Cours
4. XHTML et Javascript
4.6. Exercices
Voici une série d'exercices sur les chapitres 1-5 de Javascript. Placez s.v.pl. les solutions dans un répertoire nommé Javascript_exercices1 de votre domaine et faites des références vers ces solutions sur la page d'accueil.
4.6.1 Exercice 1
Complétez le fichier suivant pour que la couleur du mot message change au rouge quand on clique sur le bouton
<html>
<head>
<script>
function colore()
{
}
</script>
</head>
<body>
<input type="button" value="→" onClick="colore()" />
<br />
Ceci est un <span id="message" style="color:black" >message</span> important
</body>
4.6.2 Exercice 2
Complétez le fichier suivant pour qu'en cliquant sur le bouton couleur1, la couleur du texte change au jaune, en cliquant sur le bouton couleur2, la couleur de l'arrière-fonds vire au bleu et en cliquant sur le bouton couleur3, on rétablisse la situation initiale
<html>
<head>
<script>
function colore1()
{
}
function colore2()
{
}
function colore3()
{
}
</script>
</head>
<body>
<input type="button" value="couleur1" onClick="colore1()" />
<input type="button" value="couleur2" onClick="colore2()" />
<input type="button" value="couleur3" onClick="colore3()" />
<div id="champ" style="position:absolute;left:500px;top:100px;
width:100px;height:100px;background:red;color:green" >
<br /> Message
</div>
</body>
</html>
4.6.3 Exercice 3
Complétez le fichier suivant pour qu'en cliquant sur le bouton agrandir, le bloc coloré soit agrandi à 300px sur 200px
<html>
<head>
<script>
</script>
</head>
<body>
<input type="button" value="agrandir" onClick="bigger()" />
<div id="champ" style="position:absolute;left:500px;top:100px;
width:100px;height:100px;background:red;color:green" >
<br /> Message
</div>
</body>
</html>
4.6.4 Exercice 4
Complétez le fichier suivant pour qu'en cliquant sur le bouton remplacer, le contenu du champ de texte soit remplacé par votre nom
<html>
<head>
<script>
</script>
</head>
<body>
<input type="button" value="remplacer" onClick="remplacer()" />
<input type="text" id="champ" value="voyez mon nom!" style="position:absolute;left:500px;top:100px;width:350px;background:yellow;color:green"/>
</body>
</html>
4.6.5 Exercice 5
Complétez le fichier suivant pour qu'en cliquant sur le bouton remplacer, le contenu du champ de texte soit introduit dans la phrase à la place du mot voici
<html>
<head>
<script>
</script>
</head>
<body>
<input type="button" value="remplacer" onClick="remplacer()" />
<input type="text" id="champ" value="écrivez n'importe quoi ici!" style="position:absolute;left:200px;top:18px;width:350px;background:yellow;color:green"/>
<p>
Ceci est le contenu du champ de texte: <span id="contenu">voici</span>
</p>
</body>
</html>
(Remarque: Pour accéder au contenu d'une balise on utilise souvent l'attribut innerHTML voir la réponse à l'exercice →ici)
4.6.6 Exercice 6
Complétez le fichier suivant pour qu'en cliquant sur le bouton go, chaque lettre e du contenu du champ de texte soit changée en une lettre a et qu'ensuite le nouveau contenu soit montré en bleu sur fond jaune dans un bloc de 100px sur 100px au milieu de l'écran qui devient seulement visible à cet instant:
<html>
<head>
<script>
</script>
</head>
<body>
<input type="button" value="go" onClick="action()" />
<input type="text" id="champ" value="écrivez n'importe quoi ici!" style="position:absolute;left:200px;top:18px;width:350px;background:yellow;color:green"/>
< div id="bloc" >
</div>
</body>
</html>
4.6.6 Exercice 7
Regardez le fichier que →voici:
Mettez la charrue devant le boeuf sans que des caractères se touchent, puis modifiez le fichier en ce sens que vous ferez seulement déplacer en diagonale!