Développement Web II
Enseignante de TP : Chamkha Nadia
Année universitaire : 2025-2026
Filière : D-LSI MM
Proposition de solution pour TP 4 – JavaScript
Exercice 1
Créer une page html [Link] contenant une fonction JavaScript surfaceCercle() permettant de :
afficher une boite de dialogue (prompt) pour que l’utilisateur saisi le rayon d’un cercle
calculer la surface du cercle
Par la suite faire l’appel de cette fonction
b. Résultat
a. boite de dialogue
Solution Ex1
<!doctype html>
<html lang="fr">
<head>
<title>Exercice1 TP4</title>
<meta charset="utf-8" />
<script>
function surfaceCercle(r){
return (r*r*[Link]);
}
</script>
</head>
<body>
<h3>La surface d'un cercle = <span id="affiche" style="color:blue"></span></h3>
<script>
var rayon = prompt("Entrer le rayon du cercle :","0");
rayon=parseFloat(rayon);
if (rayon != null) {
s=surfaceCercle(rayon);
//[Link]("La surface du cercle = "+[Link](2));
[Link]("affiche").innerHTML = [Link](2);
}
</script>
</body>
</html>
TP4 : JAVASCRIPT PAGE 1
Exercice 2
1. Ecrire une page Html contenant un formulaire (figure 2.a) nommé f1 avec une zone de texte (phrase) le
click sur le bouton submit de f1 permet d’appeler la fonction segmentation () décrite ci-dessous
2. Ecrire une fonction javascript segmentation () permettant de :
segmenter une phrase (séparateur espace)
affiche chaque mot sous forme de titre niveau 4, en majuscule avec une ligne de séparation (<hr>)
entre les mots.
a. formulaire f1 b.Résultat
Solution Ex2
<!doctype html>
<html lang="fr">
<head>
<title>Exercice2 TP4</title>
<meta charset="utf-8" />
<script type="text/javascript">
function segmenter(chaine){
[Link]("Chaîne d'origine : " + chaine + "<BR>");
var tableau=[Link](" ");
//Affichage
var i=0;
while(tableau[i]) {
[Link] ("<h4 style='text-align:center'>");
[Link](tableau[i].toUpperCase());
[Link] ("</h4><hr/>");
i++;
}
}
</script>
</head>
<body>
<div style="text-align:center">
<h1>Taper une phrase</h1>
<form name="f1" method="post" action="">
<p>
<label>Taper une phrase</label> : <br>
<textarea name="phrase" value="Bonjour tout le monde">Bonjour tout le
monde</textarea>
</p>
<br/>
<!-- <input type="submit" name="Segmenter" value="Segmenter"
onClick="segmenter([Link]);" ></input> -->
</form>
<button type="submit" onClick="segmenter([Link]);">Segmenter</button>
</div>
</body>
</html>
TP4 : JAVASCRIPT PAGE 2
Exercice 3
Nous désirons réaliser une version simpliste d’une calculatrice qui calcule uniquement, les opérations
arithmétiques.
1) Ecrire le formulaire comportant les composants graphiques de la calculatrice
2) Ecrire la fonction concatener (chiffre)
3) Ecrire les fonctions de calcul : addiction(a,b), soustraction(a,b), division(a,b) et multiplication(a,b)
Solution Ex3
Contenu du Fichier : [Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ex3_tp4 Calculatrice en javascript</title>
<script src="fonct_calc.js"></script>
</head>
<body>
<FORM name="form_Calculatrice">
<table id="calc">
<tr>
<td colspan="4">
<input type="text" readonly="readonly" name="resultat" id="resultat" value="0" />
</td>
</tr>
<tr>
<td>
<input type="button" id="b0" value="0" onclick="concatener([Link]);" />
</td>
<td>
<!--<input type="button" id="bc" value="C" onclick="initialiser_calc();" />-->
<input type="reset" id="bc" value="C" onclick="initialiser_calc();" />
</td>
<td>
<input type="button" id="egl" value="=" onclick="egal();" />
</td>
<td>
<input type="button" id="sur" value="/" onclick="nombre1([Link]);" />
</td>
</tr>
<tr>
<td>
<input type="button" id="b1" value="1" onclick="concatener([Link]);" />
</td>
TP4 : JAVASCRIPT PAGE 3
<td>
<input type="button" id="b2" value="2" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="b3" value="3" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="plus" value="+" onclick="nombre1([Link]);" />
</td>
</tr>
<tr>
<td>
<input type="button" id="b4" value="4" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="b5" value="5" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="b6" value="6" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="moins" value="-" onclick="nombre1([Link]);" />
</td>
</tr>
<tr>
<td>
<input type="button" id="b7" value="7" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="b8" value="8" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="b9" value="9" onclick="concatener([Link]);" />
</td>
<td>
<input type="button" id="fois" value="*" onclick="nombre1([Link]);" />
</td>
</tr>
</table>
</FORM>
</body>
</html>
Contenu du Fichier : fonct_calc.js
//fichier fonct_calc.js
//_______Variables globales------------------
var a, operateur="", b=0, res = 0;
//___________________________
function concatener(chiffre) {
if ([Link].form_Calculatrice.[Link] == "0")
[Link].form_Calculatrice.[Link] = chiffre;
else
[Link].form_Calculatrice.[Link] += chiffre;
}
TP4 : JAVASCRIPT PAGE 4
//____________________________
function addition(a, b) {
return (a + b);
}
function soustraction(a, b) {
return (a - b);
}
function multiplication(a, b) {
return (a * b);
}
function division(a, b) {
return (a / b);
}
//_____________________________
function nombre1(x) {
if(operateur!="")//pour faire plus qu'une opération
egal();
else
a = parseFloat([Link]("resultat").value); //ou bien
//a=parseFloat([Link].Calcuform_latrice.[Link]);
operateur = x;
//[Link]("resultat").value = "0";//ou bien
[Link].form_Calculatrice.[Link] = "0";
}
//____________________________
function egal() {
//b = parseFloat([Link]("resultat").value);//ou bien
b = parseFloat([Link].form_Calculatrice.[Link]);
switch (operateur) {
case "+":
res = addition(a, b);
break;
case "-":
res = soustraction(a, b);
break;
case "*":
res = multiplication(a, b);
break;
case "/":
if (b != 0)
res = division(a, b);
else
res = "Division par 0 impossible";
break;
}
[Link]("resultat").value = res;
a = res; //Cas ou plusieurs opérations
operateur = "";
}
//______________________
function initialiser_calc() {
res = 0;
a = 0;
b = 0;
operateur = "";
[Link]('resultat').value = "0";
}
TP4 : JAVASCRIPT PAGE 5