Vous êtes sur la page 1sur 9

Javascript

Les exercices ne sont pas bien compliqués et reposent sur des notions élémentaires.
Aussi si les programmeurs du cours sont intéressés par un petit projet à la place de ces
exercices, j’en ai un sous le coude.

Thème : Intégrer du code JavaScript dans une page html, Entrée, sortie et variables

1) Ecrire un programme qui permet d’afficher dans la fenêtre du navigateur le


message « hello the world »

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function message() {
document.write("<H1> Hello the world</H1>");
document.bgColor="#336699";
document.fgColor="CCCCCC";
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="message()">
</BODY>
</HTML>

2) Ecrire un programme qui demande à l’utilisateur de saisir un message et qui


affiche ensuite le message dans la fenêtre du navigateur

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form1) {
var testin =document.form1.texte1.value;
document.form1.texte2.value=testin
}

function verifiez(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
Zone de texte d'entrée: <BR>
<textarea name="texte1" cols=50 rows=6></textarea> <BR><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher" onClick="afficher(form1)"><BR><BR>
Vous avez écrit: <BR>
<textarea name="texte2" cols=50 rows=6></textarea><BR><BR><BR>
<b>Une autre solution:</b><BR><BR>
Tapez votre texte: <INPUT TYPE="text" NAME="input" VALUE="">
<INPUT TYPE="button" NAME="bouton" VALUE="Verifiez le texte" onClick="verifiez(form1)">
</FORM>
</BODY>
</HTML>
Thème : Entrée, sortie, variables, et condition (if)

3) Ecrire un programme qui demande à un utilisateur de saisir successivement un


nombre, un operateur (+,-,/,*) un deuxième chiffre et qui ensuite retourne le
résultat de l’opération .

<html>
<head>
<script LANGUAGE="Javascript">
<!--
function calcul()
{
var x=document.maform.Operations[document.maform.Operations.selectedIndex].value;
if(x=="Addition")
alert(eval(document.maform.num1.value)+eval(document.maform.num2.value))
else if(x=="Soustraction")
alert(eval(document.maform.num1.value)-eval(document.maform.num2.value))
else if(x=="Multiplication")
alert(eval(document.maform.num1.value)*eval(document.maform.num2.value))
else if(x=="Division")
alert(eval(document.maform.num1.value)/eval(document.maform.num2.value))

}
//-->
</script>
</head>
<body>
<form name="maform">
Premier nombre: <input type="text" name="num1"> <select name="Operations">
<option value="Soustraction">-</option>
<option value="Addition">+</option>
<option value="Multiplication">*</option>
<option value="Division">/</option>
</select> Second nombre: <input type="text" name="num2">
<INPUT TYPE="button" NAME="bouton" VALUE="Calculez" onClick="calcul()">
</form>
</body>
</html>

Une autre solution

<html>
<head>
<script LANGUAGE="Javascript">
<!--
x = prompt("Entrez un nombre", "");
oper = prompt("choisissez entre les operateurs: +, -, *, /", "");
y = prompt("Entrez un autre nombre", "");
function calcul()
{
if(oper=="+")
document.write(parseInt(x)+parseInt(y))
else if(oper=="-")
document.write(parseInt(x)-parseInt(y))
else if(oper=="/")
document.write(parseInt(x)/parseInt(y))
else if(oper=="*")
document.write(parseInt(x)*parseInt(y))
}
//-->
</script>
</head>
<body>
<INPUT TYPE="button" NAME="bouton" VALUE="Calculez" onClick="calcul()">
</form>
</body>
</html>

Thème : déviation, redirection vers une autre page web

4) Ecrire un programme qui redirige automatiquement un utilisateur vers un


autre page après trois secondes.

<html>
<head>
<SCRIPT LANGUAGE="Javascript">
<!--
function diriger(){
window.open('exo 1.html');

}
//-->
</script>
</head>
<body onLoad="setTimeout('diriger()', 3000)">
<H2>vous serez dirig&eacute vers la page de message dans 3 secondes </H2>
</body>
</html>

Une autre solution

<html>
<head>
<SCRIPT LANGUAGE="Javascript">
<!--
function diriger(){
window.location = "http://www.google.com"
}
//-->
</script>
</head>
<body onLoad="setTimeout('diriger()', 3000)">
<H2>vous serez dirig&eacute vers le moteur de recherche google dans 3 secondes </H2>
</body>
</html>

Thème : Programmer une boucle for

5) Ecrire un programme qui invite un utilisateur à saisir un nombre et qui affiche


une phrase un nombre de fois égale au chiffre saisi.

<html>
<head>
<script LANGUAGE="Javascript">
<!--
function repet() {
x = document.form1.num1.value
for (i=1;i<=parseInt(x); i++)
{
document.write("<b>Bonjour et bienvenue!</b>" + "<br>");
}
}
//-->
</script>
</head>
<body>
<form name="form1" action="">
<b>Entrez un nombre compris entre 1 et 100: <b> <input type="text" name="num1" value= "">
<INPUT TYPE="submit" NAME="bouton" VALUE="repetez" onClick="repet()">
</body>
</html>

Une autre solution

<html>
<head>
<script LANGUAGE="Javascript">
<!--
x = prompt("Entrez un nombre compris entre 1 et 100", "");
function repet() {
for (i=0;i<parseInt(x); i++)
{
document.write("Bonjour!" + "<br>");
}
}
-->
</script>
</head>
<body onLoad="repet()">
</body
</html>

Thème : Programmer une boucle while, utiliser les conditions,

6) Ecrire un programme qui invite un utilisateur à saisir un mot de passe, qui


vérifié la validité du mot de passe et qui dans le cas de trois tentatives
infructueuses redirige l’utilisateur vers une page d’erreur

<html><head><title>While</title>
</head><body>
<script type="text/javascript">
<!--
var saisie = "";
var compteur = 1;
while(saisie != "passer" && compteur <= 3) {
saisie = window.prompt(compteur + " Entrez votre mot de passe:","");
compteur++;
}
if(saisie != "passer")
window.location.replace("erreur.html");
else
document.write("<H1>Bienvenue, mot de passe valide! ...</H1>");
// -->
</script>
</body>
</html>
Solution qui fonctionne sur Firefox seulement

<html><head><title>While</title>
</head><body>
<script type="text/javascript">
<!--
function verif () {
saisie = "";
compteur = 1;
while(saisie != "passer" && compteur <= 3) {
saisie = window.prompt(compteur + " Entrez votre mot de passe:","");
compteur++;
}
if(saisie != "passer")
window.location.replace("erreur.html");
else
document.write("<H1>Bienvenue, mot de passe valide! ...</H1>");
}
// -->
</script>
<FORM name="forme" >
Entrez votre mot de passe
<INPUT TYPE="password" NAME= "txt" VALUE="">
<INPUT TYPE="button" VALUE="verifiez" onClick="verif(this.form)">
</FORM>
</body>
</html>

Thème : Définir une fonction avec transmission de paramètres, utilisation des


événements

7) Ecrire une fonction qui permet à un utilisateur de choisir la couleur de fond de


la fenêtre du navigateur. Il s’agit donc avant tout de créer un formulaire avec
trois boutons (qui indiquent chacun une couleur) et de permettre à
l’utilisateur de modifier la couleur de fond en cliquant sur l’un de ces boutons.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function couleur(form1) {
if (form1.bouton[0].checked) { document.bgColor="#CCCCCC"};
if (form1.bouton[1].checked) { document.bgColor="#FFFF22"};
if (form1.bouton[2].checked) { document.bgColor="#green"};
}

function couleur1() {
document.bgColor="#CCCCCC";
}
function couleur2() {
document.bgColor="#FFFF22";
}
function couleur3() {
document.bgColor="#green";
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<h1>Solution (1): </h1>
<FORM NAME="form1">
Choisissez une couleur de fond:
gris <INPUT TYPE="radio" NAME="bouton" VALUE="gris">
jaune <INPUT TYPE="radio" NAME="bouton" VALUE="jaune">
vert <INPUT TYPE="radio" NAME="bouton" VALUE="vert">
<INPUT TYPE="button"NAME="but" VALUE="Changez" onClick="couleur(form1)">
</FORM>
<br><br>
<h1>Solution (2): </h1>
<form>
Choisissez une couleur de fond:
<INPUT TYPE="button" NAME="bouton1" VALUE="gris " onClick="couleur1()">
<INPUT TYPE="button" NAME="bouton2" VALUE="jaune" onClick="couleur2()">
<INPUT TYPE="button" NAME="bouton3" VALUE="vert " onClick="couleur3()">
</form>

</BODY>
</HTML>

8) Ecrire un programme qui modifie de façon aléatoire la couleur de fond d’une


page toutes les trois secondes.

<html>
<head>
<script language="javascript">
<!--
var interval=0;
interval= setInterval ("aleatoire()",3000);
function aleatStop() {
clearInterval (interval);
}

function aleatoire ()
{
hex = new Array(16);
hex[0]="0";
hex[1]="1";
hex[2]="2";
hex[3]="3";
hex[4]="4";
hex[5]="5";
hex[6]="6";
hex[7]="7";
hex[8]="8";
hex[9]="9";
hex[10]="A";
hex[11]="B";
hex[12]="C";
hex[13]="D";
hex[14]="E";
hex[15]="F";
var bg =
"#"+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.
floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.ran
dom()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];
document.bgColor = bg;
document.couleur.valeurCouleur.value = bg;
}
//-->
</script>
</head>

<body>
<br><br><br>
<center>
<form name="couleur">
<b>Code de la couleur d'arri&egrave;re plan: </b>
<input type="text" name="valeurCouleur" size=10><br><br>
<input type="button" name="bouton" value="Stop Random" onClick="aleatStop()">
</form>
</center>
</body>
</body>
</html>

Une autre solution

<html>
<head>
<script language="javascript">
<!--
var interval=0;
function aleatStop2() {
if (document.couleur.bouton2.value=="Random"){
document.couleur.bouton2.value="Stop?";
interval= setInterval ("aleatoire()",3000);
}
else {
document.couleur.bouton2.value="Random";
clearInterval (interval);
}
}

interval= setInterval ("aleatoire()",3000);


function aleatStop() {
clearInterval (interval);
}

function aleatoire ()
{
hex = new Array(16);
hex[0]="0";
hex[1]="1";
hex[2]="2";
hex[3]="3";
hex[4]="4";
hex[5]="5";
hex[6]="6";
hex[7]="7";
hex[8]="8";
hex[9]="9";
hex[10]="A";
hex[11]="B";
hex[12]="C";
hex[13]="D";
hex[14]="E";
hex[15]="F";
var bg =
"#"+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.
floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.ran
dom()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];
document.bgColor = bg;
document.couleur.valeurCouleur.value = bg;
}
//-->
</script>
</head>

<body>
<br><br><br>
<center>
<form name="couleur">
<h1>Arr&ecirc;ter</h1>
<input type="button" name="bouton" value="Stop Random" onClick="aleatStop()">
<br><br><br>
<h1>Red&eacute;marrer</h1>
<input type="button" name="bouton2" value="Random" onClick="aleatStop2()">
<br><br><br>
<b>Code de la couleur d'arri&egrave;re plan: </b>
<input type="text" name="valeurCouleur" size=10>
<br><br>
</form>
</center>
</body>
</body>
</html>

9) Soit un formulaire avec les champs Nom, Prénom, Mail. Ecrire un programme
qui vérifié que l’utilisateur a renseigné tous les champs quand l’utilisateur
clique sur le bouton envoyer du formulaire.

<html>
<head>
<script language="javascript">
<!--
function valider(formulaire) {
if(formulaire.prenom.value.length==0)
{
alert("Erreur, le champ du prénom est vide");
return false;
}
else if(formulaire.nom.value.length==0)
{
alert("Erreur, le champ du nom est vide");
return false;
}
else if(formulaire.mail.value.length==0)
{
alert("Erreur, le champ de mail est vide");
return false;
}
else if (formulaire.mail.value.indexOf("@",0)<0)
{
alert("Adresse mail saisie invalide.");
return false;
}
alert("Bravo! Le formulaire est validé");
}

function valider2(formulaire) {
if(formulaire.prenom.value.length==0 || formulaire.nom.value.length==0 ||
formulaire.mail.value.length==0)
{
alert("Vous devez remplir les trois champs");
return false;
}
else if (formulaire.mail.value.indexOf("@",0)<0)
{
alert("Adresse mail saisie invalide.");
return false;
}
alert("Bravo! Le formulaire est validé");
}

//-->
</script>

</head>

<body>
<h1>Solution:</h1>
<form name="form1" action="">
<pre><b>Entrez votre pr&eacute;nom: <input type="text" name="prenom" size=50 maxlength=50
value=""></pre>
<pre><b>Entrez votre nom: <input type="text" name="nom" size=50 maxlength=50 value=""></pre>
<pre><b>Entrez votre e-mail: <input type="text" name="mail" size=50 maxlength=50 value=> adresse
mail valide (type nom@domaine.com)</pre>
<input type="submit" name="verifier" value="Envoyer" onClick="valider(this.form)">
</form>
<br><br>
<h1>Le code &eacute;crit autrement:</h1>
<form name="form2" action="">
<pre><b>Entrez votre pr&eacute;nom: <input type="text" name="prenom" size=50 maxlength=50
value=""></pre>
<pre><b>Entrez votre nom: <input type="text" name="nom" size=50 maxlength=50 value=""></pre>
<pre><b>Entrez votre e-mail: <input type="text" name="mail" size=50 maxlength=50 value=> adresse
mail valide (type nom@domaine.com)</pre>
<input type="submit" name="verifier" value="Envoyer" onClick="valider2(this.form)">
</form>
</body>

</html>