PROF MME BOURGOU TP2 JavaScript(structure conditionnelle) 3éme STI(TIC)
Activité1:
1) Créer un dossier dans votre dossier de travail et le nommer « tp2_JavaScript »
2) Créer un document HTML contenant dans son corps le code ci-dessous et l’enregistrer dans
votre dossier de travail « tp2_JavaScript » sous le nom Activité[Link] et un fichier JavaScript
« activité[Link] »
3) Compléter le script donné dans le fichier « activité[Link] » pour qu’il nous permet de saisir une
expression arithmétique (exemple : 5+2) et d’afficher ensuite l’un des messages suivant :
o « Résultat pair» si la valeur de l’expression est pair
o « Résultat impair » si la valeur de l »expression est impair
Corps du Document HTML (activité[Link])
<body>
<h1> activité1</h1>
<script src="activité[Link]"> </script>
</body>
</html>
Script (activité[Link])
exp=prompt("taper une expression arithmétique","");
x=……………………………………………………………………………….;
if (…………………………………………………….)
{alert(" résultat pair");}
else
{alert("résultat impair");}
Activité2:
1) Créer un document HTML contenant dans son corps le code ci-dessous et l’enregistrer dans votre
dossier de travail sous le nom Activité[Link] et un fichier JavaScript « activité[Link] »
2) Compléter le script donné dans le fichier « activité[Link] » pour qu’il nous permet d’afficher Le
résultat de la division entière des deux entiers a et b données
NB : Ajouter un contrôle de saisie des valeurs saisies de a et b.
Corps du Document HTML (activité[Link])
<body>
<h1> activité2</h1>
<script src="activité[Link]"> </script>
</body>
</html>
Script (activité[Link])
a = …………………………………………………………………………………………………………………………………………;
b = ………………………………………………………………………………………………………………………………………..;
if (…………………………………………………………………………………………………………………..)
{ alert("vous devez saisir des valeurs numériques !!") }
Else
{R = a / b; alert("Resultat = " + R);}
Page 1/5
PROF MME BOURGOU TP2 JavaScript(structure conditionnelle) 3éme STI(TIC)
Activité3:
1) Créer un document HTML contenant dans son corps le code ci-dessous et l’enregistrer dans votre
dossier de travail sous le nom Activité[Link] et un fichier JavaScript « activité[Link] »
2) Compléter le script donné dans le fichier « activité[Link] » pour qu’il nous permet de saisir l’âge
d’une personne et d’afficher ensuite l’un des messages suivant :
« Bébé» si l’age ≤ 5 ans
« Enfant » si l’age ≤ 14 ans
« Jeune » si si l’age ≤ 35 ans
Si non afficher « Adulte »
Corps du Document HTML (activité[Link])
<body>
<h1> activité3</h1>
<script src="activité[Link]"> </script>
</body>
</html>
Script (activité[Link])
a = Number(prompt("entrer votre age", ""));
if (………………………………………) { alert("Bébé"); }
else if (……………………………..) { alert("Enfant"); }
else if (……………………………….) { alert("Jeune"); }
else { alert(" Adulte "); }
Activité4:
1) Créer un document HTML contenant dans son corps le code ci-dessous et l’enregistrer dans votre
dossier de travail sous le nom Activité[Link] et un fichier JavaScript « activité[Link] »
2) Compléter le script donné dans le fichier « activité[Link] » pour qu’il nous permet de saisir un
caractère et d’afficher ensuite l’un des messages suivant :
« Bleu» si le caractère saisi est « b » ou « B »
« Noir» si le caractère saisi est « n» ou « N »
« Gris» si le caractère saisi est «G» ou « g »
Si non afficher « divers couleurs»
Corps du Document HTML (activité[Link])
<body>
<h1> activité4</h1>
<script src="activité[Link]"> </script>
</body>
</html>
Solution1 : Script (activité[Link])
c=prompt(″ entrer un caractére ″, ″ ″) ;
if((c==″b″)||(c==″B″)){alert(″Bleu″);}
else if((c==″N″)||(c==″n″)){alert(″Noir″);}
else if((c==”G”)||(c==″g″)){alert(″Gris″);}
else {alert(″ ………………………………………………………………………. ″) ;}
Page 2/5
PROF MME BOURGOU TP2 JavaScript(structure conditionnelle) 3éme STI(TIC)
Solution2 : Script (activité[Link])
c=prompt("entrer un caractére","");
if([Link]()=="B"){alert("Bleu");}
else if ([Link]()=="N") {alert("Noir");}
else if([Link]()=="G") {alert("Gris");}
else {alert(" divers couleurs");}
Solution3 : Script (activité[Link])
c = prompt("entrer un caractére", "");
switch (c) {
case "B", "b": alert("bleu"); break;
case "N", "n": alert("Noir"); break;
case "G", "g": alert("Gris"); break;
default: alert("divers couleurs");
}
Activité5:
1) Créer un document HTML contenant dans son corps le code ci-dessous et l’enregistrer dans votre
dossier de travail sous le nom Activité[Link] et un fichier JavaScript « activité[Link] »
2) Compléter le script donné dans activité[Link] pour changer la couleur d’arrière-plan du document
selon le choix saisi par l’utilisateur.
Corps du Document HTML (activité[Link])
<body id=”bod”>
<h1> activité4</h1>
<script src="activité[Link]"> </script>
</body>
</html>
Solution1 : Script (activité[Link])
c=prompt("choisir entre ces couleurs: jaune, gris, rouge","");
switch(c)
{case "………..": [Link]("……..").[Link]="red" ;break;
case "jaune":[Link]("……..").[Link]="yellow" ;break;
case "…………….":[Link]("…………").[Link]="grey" ;break;
default:alert("cette couleur n'existe pas !!")}
</script>
Page 3/5
PROF MME BOURGOU TP2 JavaScript(structure conditionnelle) 3éme STI(TIC)
Retenons :
Conversion de types
Fonction de vérification Rôle
IsNaN() : Is Not a Number fonction booléenne permettant de vérifier si le contenu d’une variable
donnée est numérique ou non ;
Fonction de conversion Rôle Exemple
String et Number Conversion de numérique var a = String (21.34) ; a = "21.34"
en chaîne et inversement var a = Number ("10.5") ; a = 10.5
eval évalue une chaîne de ch="5+10" ; x=eval (ch) ; x=15
caractères sous forme de
valeur numérique
Les opérateurs utilisables en JavaScript
²
1. LES OPERATEURS DE CALCUL 2. LES OPERATEURS DE COMPARAISON
+ Addition == Égal
- Soustraction < Inférieur
* Multiplication <= Inférieur ou égale
/ Division > Supérieur
% Modulo (reste de la division) >= Supérieur ou égal
= Affectation != Différent
++ Ajoute 1 (x++ x=x+1)
-- Retire 1 (y-- y=y-1)
3. LES OPERATEURS ASSOCIATIFS 4. LES OPERATEURS LOGIQUES
&& ET
+= Plus égal (x +=y x = x+y) || OU
-= Moins égal (x -=y x = x-y) ! NON
*= Multiplié égal (x *=y x = x*y)
/= Divisé égal (x /=y x = x/y)
les structures conditionnelles
Structure Syntaxe Remarques/exemples
La forme réduite Une autre syntaxe pour exprimer un traitement
if (condition) conditionnel (forme complète):
{Traitement ;} (Condition)?Traitement1:Traitement2 ;
IF Exemple :
La forme complète (a%2==0)? alert("Nombre pair"):
if (condition) alert("Nombre impair");
{ Traitement 1 ; }
else
{ Traitement 2 ; }
La forme généralisée :
Page 4/5
PROF MME BOURGOU TP2 JavaScript(structure conditionnelle) 3éme STI(TIC)
If (condition1) {
traitement1;}
else If (condition 2) {
traitement2;}
….
else If (condition n-1) {
traitement n-1;}
else { traitement n;}
switch (expression) Switch(mois)
{ { case12 :case1 :case2 : alert(" hiver"); break;
case V1: bloc 1; break; Case3 :case4 :case5 : alert(" printemps"); break;
case V2: bloc 2; break ; Case6 :case7 :case8 : alert(" été"); break;
switch … Case9 :case10 :case11 : alert(" automne"); break;
case Vn: bloc n; break ; Default: alert("numéro de mois erroné") ; break ;
default: bloc n+1; break ; }
}
Exercice :
1) Créer un document HTML contenant dans son corps le code ci-dessous et l’enregistrer dans votre
dossier de travail sous le nom [Link] et un fichier JavaScript « [Link] »
2) Compléter le script dans le fichier [Link] pour :
Changer la couleur d’arrière-plan du paragraphe 1 si l’utilisateur tape la valeur 1
Changer la couleur d’arrière-plan du paragraphe 2 si l’utilisateur tape la valeur 2
Changer la couleur d’arrière-plan du paragraphe 3 si l’utilisateur tape la valeur 3
Corps du Document HTML (activité[Link])
<body id=”bod”>
<h1> exercice</h1>
<p id=”p1”> paragraphe1 </p>
<p id=”p2”> paragraphe2 </p>
<p id=”p3”> paragraphe3 </p>
<script src="[Link]"> </script>
</body>
</html>
: Script ([Link])
Page 5/5
