Ce TP est à rendre sur école directe, toute absence de travail sera noté zéro.
- Lisez ce cours sur JavaScript : https://pgdg.frama.io/1nsi/ihm/js/ (vous pouvez également vous appuyer sur d'autres ressources)
- Téléchargez ces images : ici
- Faites le TP ci-dessous.
Exercice 1¶
Exécuter et comprendre :
1.
<!DOCTYPE html>
<html>
<head>
<title>Exemple 1</title>
</head>
<body>
<button onclick="f()">Bouton 1</button><br>
<button onclick="f()">Bouton 2</button><br>
<button onclick="f()" >Bouton 3</button><br>
<script type="text/javascript">
function f(){alert("Un simple click!!!");}
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<title>Exemple 2</title>
<style>
img{width:200px;
height:200px;
border:solid 4px black; }
</style>
</head>
<body>
<table>
<tr>
<td>
<img onclick="f(this)" id="img1" src="planetes\mars.png" alt="mars" />
</td>
<td>
<img onclick="f(this)"id="img2" src="planetes\terre.png"alt="terre" />
</td>
</tr>
</table>
<script>
function f(image)
{alert(image);}
</script>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<title>Exemple 3</title>
<style>
img{width:200px;
height:200px;
border:solid 4px black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img onclick="f(this)" id="img1" src="planetes\mars.png" alt="mars" />
</td>
<td>
<img onclick="f(this)" id="img2" src="planetes\terre.png" alt="terre" />
</td>
</tr>
</table>
<script>
function f(image){
alert(image.getAttribute("src"));
alert(image.getAttribute("id"));
}
</script>
</body>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<title>Exemple 4</title>
<style>
img{width:200px;
height:200px;
border:solid 4px black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img onclick="f(this)" id="img1" src="planetes\mars.png" alt="mars" />
</td>
<td>
<img onclick="f(this)" id="img2" src="planetes\terre.png" alt="terre" />
</td>
</tr>
</table>
<script>
function f(image){
var txt=image.getAttribute("src");
if (txt=="planetes\\mars.png")
image.setAttribute("src","planetes\\terre.png");
else
image.setAttribute("src","planetes\\mars.png");
}
</script>
</body>
</html>
Exercice 2¶
- Ecrire un code HTML et CSS qui permet d’afficher les images suivantes :
-
Ajouter du script javascript pour afficher le chemin d’accès d’une image suite à un clic. Par exemple, le clic sur la première image affiche le message : « planetes\mars.png ».
-
Maintenant, un clic sur une image la replace par un fond blanc (voir la figure donnée ci-dessous). Un deuxième clic permet de l’afficher.
- Le programme génère une chaine de caractères aléatoire correspondant à une planète et l’utilisateur clique sur une image pour la trouver. L’image choisie par l’utilisateur est encadrée en rouge si ce n’est pas la bonne, sinon en vert. Par exemple, si la planète demandée est la terre et la réponse de l’utilisateur est mars. La figure suivante s’affiche. Prévoyez un bouton Rejouer.
