Scribd
Importer
5 vues23 pages

Correction TP1 À 4 Js

Ce document présente une introduction au langage JavaScript à travers des activités pratiques. Il explique comment rendre une page web interactive, où inclure le code JavaScript, et les différentes méthodes pour afficher des données. Les concepts abordés incluent l'utilisation de fonctions, d'événements, et de styles CSS pour améliorer l'expérience utilisateur.

Transféré par

borhenjbeli360
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
5 vues23 pages

Correction TP1 À 4 Js

Ce document présente une introduction au langage JavaScript à travers des activités pratiques. Il explique comment rendre une page web interactive, où inclure le code JavaScript, et les différentes méthodes pour afficher des données. Les concepts abordés incluent l'utilisation de fonctions, d'événements, et de styles CSS pour améliorer l'expérience utilisateur.

Transféré par

borhenjbeli360
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Javascript 3STI

TP1 : Découverte du langage Javascript


Activité 1:
Ouvrir le dossier « D:\intro javascript » et regarde les différentes pages web interactives puis déduire que
peut-on faire avec Javascript ?
JavaScript : est un langage de programmation Web, qui permet de rendre interactive une page web :
faire bouger, apparaître ou disparaître un élément, changer un texte, calculer, Réagir lorsque l’utilisateur
face quelque chose (cliquer, taper au clavier, bouger la souris,…), contrôler la saisie de données …
Activité 2: Où inclure-on le code JavaScript?
1-En utilisant l’éditeur VS code, saisir le code suivant et l’enregistrer dans votre dossier de travail
sous le nom [Link]
<!DOCTYPE html>
<html>
<head>
<script>
function maFonction( )
{
[Link]("demo").innerHTML = "Paragraphe changé."
}
</script>
</head>
<body>
<h1>Ma Page Web</h1>
<p id="demo">Voici un Paragraphe </p>
<button onclick="maFonction()">Essayer</button>
</body>
</html>

Explication détaillée du code :


html
CopierModifier
<!DOCTYPE html>
<html lang="fr">

1. Déclaration du type de document et de la langue

 <!DOCTYPE html> : Cette ligne indique que le document suit la norme HTML5. Cela garantit que les
navigateurs modernes interprètent correctement le code.
 <html lang="fr"> : L’attribut lang="fr" informe le navigateur et les moteurs de recherche que la
langue principale de la page est le français.

html
<head>
<meta charset="UTF-8">

2. Définition de l'encodage des caractères

 <meta charset="UTF-8"> : UTF-8 est un encodage qui permet d’afficher correctement les
caractères spéciaux comme les accents français (é, è, à, ô, û). Sans cela, certains caractères
pourraient apparaître de manière incorrecte.

1
Javascript 3STI
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Configuration de l'affichage sur mobile

 Cette ligne est essentielle pour le responsive design.


 width=device-width : Cela signifie que la largeur de la page s'ajuste à celle de l'appareil utilisé
(ordinateur, tablette, smartphone).
 initial-scale=1.0 : Définit le zoom initial à 100%, ce qui évite que la page apparaisse trop grande
ou trop petite sur certains appareils.

html

<title>Ma Page Web</title>

4. Titre de la page

 <title> : Définit le titre affiché dans l’onglet du navigateur.


 Dans cet exemple, le titre est "Ma Page Web", mais il peut être modifié selon le contenu de la page.

html
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>

5. Ajout de styles CSS

Styles pour le body :

 font-family: Arial, sans-serif; → Utilise une police lisible pour le texte.


 text-align: center; → Centre le texte de toute la page.
 margin-top: 50px; → Ajoute un espace de 50 pixels entre le haut de la page et le contenu.

Styles pour le bouton :

 padding: 10px 20px; → Définit un espace intérieur de 10 pixels en haut/bas et 20 pixels à


gauche/droite pour un meilleur confort visuel.
 font-size: 16px; → Augmente la taille du texte du bouton.
 cursor: pointer; → Modifie le curseur en main (pointer) pour indiquer que le bouton est
cliquable.

html

<script>
function maFonction() {
[Link]("demo").innerHTML = "Paragraphe changé.";
}
2
Javascript 3STI
6. Définition de la fonction JavaScript

 function maFonction() { ... } : Crée une fonction nommée maFonction.


 [Link]("demo").innerHTML = "Paragraphe changé.";
o [Link]("demo") → Sélectionne l’élément HTML dont l'id est "demo".
o .innerHTML = "Paragraphe changé."; → Modifie le texte à l’intérieur de cet élément
pour afficher "Paragraphe changé.".

html
CopierModifier
[Link]("DOMContentLoaded", function() {
[Link]("btn").addEventListener("click", maFonction);
});
</script>

7. Ajout d'un écouteur d'événements

 [Link]("DOMContentLoaded", function() {...});


o Cela garantit que le script ne s’exécute qu’après que la page soit complètement chargée.
 [Link]("btn").addEventListener("click", maFonction);
o Sélectionne le bouton avec l’id="btn".
o .addEventListener("click", maFonction);
 Ajoute un écouteur d’événements qui déclenche la fonction maFonction quand
l’utilisateur clique sur le bouton.

💡 Pourquoi cette approche est meilleure que onclick dans HTML ?

 Séparation du HTML et JavaScript → Meilleure organisation du code.


 Facilité de maintenance → Si on change l’élément button, on n’a pas besoin de modifier l’attribut
onclick dans le HTML.
 Permet d’ajouter plusieurs événements sans écraser les précédents.

html
CopierModifier
</head>
<body>

8. Début du corps du document

 La balise <body> contient tout le contenu visible de la page.

html
CopierModifier
<h1>Ma Page Web</h1>

9. Titre principal

 <h1> → Définition d’un titre de premier niveau.


 "Ma Page Web" → Texte affiché en grand, généralement en gras.

html

3
Javascript 3STI
CopierModifier
<p id="demo">Voici un Paragraphe</p>

10. Paragraphe modifiable

 <p id="demo"> → Paragraphe avec l’identifiant "demo", qui sera modifié par le JavaScript.

html
CopierModifier
<button id="btn">Essayer</button>

11. Bouton interactif

 <button> → Élément cliquable.


 id="btn" → Identifiant unique, utilisé en JavaScript pour l'associer à l'événement click.
 "Essayer" → Texte affiché sur le bouton.

html
CopierModifier
</body>
</html>

12. Fermeture des balises

 </body> → Fin du corps de la page.


 </html> → Fin du document HTML.

Résumé des améliorations par rapport à un code


basique :
✅ Encodage UTF-8 pour afficher les accents correctement.
✅ Balise <meta viewport> pour un meilleur affichage sur mobile.
✅ Ajout de CSS pour améliorer l'apparence.
✅ Utilisation d'addEventListener pour un code plus propre et maintenable.
✅ Séparation du HTML et JavaScript pour une meilleure organisation.

2-Que permet de faire la fonction Mafonction() dans cet exemple ? Où est-elle placée ?
Elle a changé le paragraphe d’identifiant «demo » , le script est placée dans l’entête
3- Déplacer l’élément <script> …. </script> dans la partie <body>…. </body> , que remarquez-vous ?
Même rôle que la question précédente, donc on peut placer le script aussi dans le corps de la page
4- En utilisant l’éditeur VS code, créer un nouveau fichier dans votre dossier de travail sous le nom
[Link] puis déplacer le code de la fonction maFonction dans ce fichier
function maFonction() {
[Link]("demo").innerHTML = "Paragraphe changé."

4
Javascript 3STI
}
Modifier le code de la page [Link] en ajoutant l’attribut suivant dans la balise script
<script src="[Link]">
</script>
Que remarquez-vous ?
Même rôle que la question précédente, donc on peut placer le script aussi dans un fichier externe
d’extension js et de le relier avec le fichier html à l’aide de <script src="[Link]"> </script>

Retenons : Les scripts peuvent être placés dans l’entête entre <HEAD> et </HEAD>, le
corps de la page entre <BODY> et </BODY> ou dans un fichier externe d’extension .js

Activité 3 : Les sorties en Javascript


1. Lancer vscode, saisir ce code et l’enregistrer dans votre dossier de travail sous le nom
[Link]
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<script>
alert(5 + 6)
</script>
</body>
2. Exécuter ce code, quel est son rôle ?
Afficher le résultat de l’expression (11) dans une boîte d’alerte
3. Remplacer alert(5 + 6); par alert(‘Bonjour’); Quel est le role de la méthode alert
Afficher un message dans une boîte d’alerte
4. Enregistrer le fichier sous le nom [Link] puis modifier le code comme suit
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<script>
[Link]( 5 + 6)
</script>
</body></html>
Quel est le role de [Link] Afficher le résultat de l’expression (11) dans la page web
5. Enregistrer le fichier sous le nom [Link] puis modifier le code comme suit
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<p id="pg"></p>
<script>
[Link]("pg").innerHTML = 5 + 6
</script>
</body></html>
6. Exécuter ce code, quel est son rôle ?
5
Javascript 3STI
Afficher le résultat dans l’élément html d’identifiant pg dans la page web
7. Enregistrer le fichier sous le nom [Link] puis modifier la partie script par un bouton
comme suit et trouver le rôle et la différence par rapport au précédent :
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<p id="pg"></p>
<button onclick="document. getElementById('pg').innerHTML = 5 + 6"> Essayer</button>
</body></html>

L’affichage se fait lorsqu’on clique sur le bouton : c’est l’événement onclick


8. Enregistrer le fichier sous le nom [Link] puis modifier le code comme suit et trouver le
rôle et la différence par rapport au précédent :
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<p id="pg"></p>
<button onclick="[Link](5 + 6)"> Essayer</button>
</body></html>
En appellant la méthode [Link]() après le chargement de la page , tout le contenu de la page
s’efface.
Application 1 :
1- Enregistrer le code suivant dans un fichier nommé « [Link] »
<!DOCTYPE html>
<html>
<head>
<title>Nouvelle page 1</title>
<script>
function msg( )
{
alert("Hello JavaScript")
}
</script>
</head>
<body>
<button onClick="msg( )">méthode</button>
</body></html>

2- Compléter le pointillé pour afficher le message « Hello JavaScript » en cliquant sur le bouton
méthode. Le message s’affiche dans une boîte d'alerte
3- Enregistrer le code dans un fichier nommé « [Link] » puis ajouter les modifications nécessaires
pour que le message s’affiche dans la page web.
<head>
<script>
function msg ( )
{
[Link]("Hello JavaScript")
}
</script>
</head>
6
Javascript 3STI
<body>
<button onClick="msg( )">méthode</button>
</body></html>
4- Enregistrer le code dans un fichier nommé « [Link] » puis ajouter les modifications nécessaires
pour que le message s’affiche dans le paragraphe de la page web.
<!DOCTYPE html>
<html>
<head>
<title>Nouvelle page 1</title>
<script>
function msg ( )
{
document. getElementById("p1").innerHTML = "Hello JavaScript"
}
</script>
</head>
<body>
<p id=’’p1’’> </p>
<button onClick="msg( )">méthode</button>
</body></html>
5- Déplacer la fonction dans un fichier externe « [Link] » puis faire référence à ce fichier au niveau
de fichier html.
<script src="[Link]"> </script>
Le console web
Il affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et
avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement
affichés par le code JavaScript s’exécutant sur la page.
Il permet aussi d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.
a- Ouvrir le fichier [Link] et l’enregistrer sous le nom « [Link] ». Ajouter les modifications
nécessaires pour obtenir ce code
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<p id="pg"></p>
<script>
[Link]( 5 + 6);
</script>
</body></html>
1- Exécuter le code. Est-ce que la valeur 11 est affichée dans la page web ? non
2- Ouvrir le console web (cliquer sur la touche F12 , ou bien ctrl+shift+I puis ouvrir l’onglet console),
que remarquez-vous ?
Le message 11 est affiché dans le console
3- Dans le Console , écrire la commande suivante et observer le résultat:
[Link]('pg').innerHTML = " bonjour ";
4- Dans l’onglet Console , écrire la commande suivante et observer le résultat:
[Link](5 + 6)
NB : L'utilisation de [Link]() après le chargement d'un document HTML supprimera
tout le code HTML existant.
6- Dans l’onglet Console, écrire la commande suivante : alert(" salut les amis ") ;
Retenons :
JavaScript peut "afficher" les données de différentes manières :
 Écrire dans un élément HTML, en utilisant innerHTML.

7
Javascript 3STI
 Écrire dans la sortie HTML à l'aide de [Link]().
 Écrire dans une boîte d'alerte, en utilisant alert().
 Écrire dans la console du navigateur, en utilisant [Link]().
On peut aussi afficher des données dans une zone de formulaire.
Essayer cet exemple , l’enregistrer dans un fichier nommé « [Link] »

<head> <title>Document</title>
<script>
function msg(){
document. getElementById("z1").value="bonjour"
}
</script> </head>
<body>
Le message s'affiche ici <input type="text" id="z1">
<button onclick='msg()'> Essayer</button></body></html>
Activité 2 : les Entrées en JavaScript
a- Exécuter le code suivant
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p> Mon premier code js</p>
<p id="p2">Bonjour <span id="pnom"> </span></p>
<script>
var nom=prompt("donner votre nom");
[Link]("pnom").innerHTML=nom;
</script>
</body></html>
1- Que présente l’objet « nom » ? variable
2- Quel est le rôle de la méthode « prompt » ? afficher une boîte de dialogue afin d’entrer une valeur
en entrant « 3STI » et en cliquant
sur ok :

Application2 :
Ecrire le code JavaScript nécessaire qui permet d’avoir la fenêtre 1 en premier lieu puis qu’il affiche une boîte
de dialogue contenant la valeur entrée.

8
Javascript 3STI
Exemple : en donnant la valeur 5 il affiche

Ajouter les modifications nécessaires pour afficher dans la

boîte d’alerte le message : « la valeur entrée est


5»
Solution :
<!DOCTYPE html>
<html>
<body>
<script>
a=prompt("entrer une valeur")//entrer une valeur à une variable a
alert(a) //afficher le contenu de a dans une boîte d’alerte
</script>
</body></html>
2- pour afficher dans la boîte d’alerte le message : « la valeur entrée est … »
alert("la valeur entrée est" +a)
Activité 3: les variables
a- Exécuter les 2 codes suivants
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body>
<body>
<script> <script>
var a = 5;
var b = 10; Const x =6;
c=3; x=4
if (a === 5) { [Link](x);
let a = 4; // La portée est celle du bloc if </script>
var b = 1; // La portée est celle interne à la fonction </body>
c=7 ; // La portée est celle interne à la fonction </html>
[Link](a); // 4
[Link](b); // 1
[Link](c); // 7 Un message d’erreur
} s’affiche on peut pas
[Link](a); // 5 changer la valeur d’une
[Link](b); //1 constante
[Link](c); // 7
</script>
</body>
</html>

4 façons pour déclarer une variable en JavaScript :


 En utilisant var (globale)
 En utilisant let (locale)
 En utilisant const (constante)
 Ne rien utiliser (globale)

9
Javascript 3STI
Activité 4 :
Ecrire le code JavaScript permettant de saisir 2 nombres a et b dans des zones de texte d’un formulaire puis
calculer et afficher la somme dans une autre zone de texte suite à un clic sur le bouton somme comme le
présente la fenêtre à droite.

(utiliser la méthode [Link]('id').value )


Fichier « [Link] » Fichier « [Link] »
<table> function somme()
<tr><td><label for="A">A=</label></td> {
<td><input type="text" id="A"></td></tr>
<tr><td><label for="B">B=</label></td> a=Number([Link]('nb1').value);
<td><input type="text" id="B"></td></tr> //La valeur entrée est par défaut de type chaîne
<tr> <td> <input type="button"
//de caractère donc il faut la convertir en nombre
value="Somme" onclick="somme()"></td>
<td><label for="s">S=</label> <input b=Number([Link]('nb2').value);
type="text" id="s"></td> </tr>
s=a+b;
</table>
<script src="[Link]"></script> [Link]('nb3').value=s;}
</body>

Tp2 : Les structures conditionnelles


Activité 1 :
Ecrire un programme JavaScript dans un fichier nommé « [Link] » qui permet de réaliser la somme, la
soustraction, la multiplication et la division de deux entiers donnés par l'utilisateur en utilisant un
formulaire comme le montre l'image suivante :

10
Javascript 3STI
Les champs
nombre1 et
nombre 2 sont
obligatoires.

Dans le cas de la

i division, il faut
traiter le cas de
la division par
zéro en affichant
une alerte
« impossible de
diviser par
zéro »

Enregistrer la
page web sous le
nom "mini-
[Link]"
dans le dossier
"tp3" dans votre
dossier de
travail

Les fonctions Javascript de l’objet Math :


[Link](a) Retourne la valeur absolue de a
[Link](a) Retourne l'entier arrondi le plus proche de a
[Link](a) Retourne la racine carrée de a
[Link](a,b) Retourne a à la puissance b
Les opérateurs arithmétiques Les opérateurs de comparaison

Operateur Description Signe Nom


+ Addition == Egal
- Soustraction < Inférieur
* Multiplication <= Inférieur ou égal
/ Division > Supérieur
% Modulo >= Supérieur ou égal
!= Différent

Les opérateurs logiques (booléens)

Signe Nom
&& ET logique(and)
|| OU (or)
! NON (not)
I. Les structures de contrôle conditionnelles :
1. if … else … (si … sinon …):

11
Javascript 3STI
Forme Syntaxe Exemple
if (condition) if ([Link]() < 18) {
{ message = "Bonjour";
// traitement si condition est vrai }
} else {
Simple
else message = "Bonsoir";
{ }
// traitement si condition est faux [Link](message);
}
Correction :
[Link] [Link]
<body> function somme(){
<h1>mini-caluclatrice</h1> <hr> a=Number([Link]("nb1").value)
<form action=""> b=Number([Link]("nb2").value)
<table><tr> s=a+b
<td>nombre1</td> [Link]("r").value=s
<td><input }
type="text" id="nb1"> </td> function soustraction(){
</tr> a=Number([Link]("nb1").value)
<tr> b=Number([Link]("nb2").value)
<td>nombre2</td> s=a-b
<td><input type="text" [Link]("r").value=s
id="nb2"></td> }
</tr></table> function produit(){
<input type="button" value="+" a=Number([Link]("nb1").value)
onclick="somme()"> b=Number([Link]("nb2").value)
<input type="button" value="-" s=a*b
onclick="soustraction()"> [Link]("r").value=s
<input type="button" value="*" }
onclick="produit()"> function div(){
<input type="button" value="/" a=Number([Link]("nb1").value)
onclick="div()"> b=Number([Link]("nb2").value)
<input type="button" value="max" if (b==0)
onclick="maximum()"> {alert("impossible de diviser par zéro")}
<input type="button" value="min" else
onclick="minimum()"> {s=a/b
<input type="button" [Link]("r").value=s}
value="puissance" onclick="puiss()">
<input type="reset" }
value="réinitialiser"> function maximum(){
<br><br> a=Number([Link]("nb1").value)
<label for="">résultat</label> b=Number([Link]("nb2").value)
<input type="text" id="r" if (a>b)
disabled> max=a
</form> else
<script src="[Link]"></script> max=b
</body> [Link]("r").value=max
}
function minimum(){
a=Number([Link]("nb1").value)
b=Number([Link]("nb2").value)
if (a<b)

12
Javascript 3STI
min=a
else
min=b
[Link]("r").value=min
}
function puiss(){
a=Number([Link]("nb1").value)
b=Number([Link]("nb2").value)
s=[Link](a,b)
[Link]("r").value=s
}
Activité 2 :
L’indice de masse corporelle (IMC) permet d’évaluer rapidement votre corpulence simplement avec votre
poids et votre taille. Il permet de déterminer si on est en situation de maigreur, de surpoids ou d’obésité .
Il se calcule simplement en divisant le poids (en kg) par le carré de la taille (m).
Créer une page web qui permet de calculez l’IMC d’une personne et d’afficher dans quelle catégorie il
est situé. Sachant que :
Indice de masse corporelle (IMC) Interprétation (d'après l'OMS)
moins de 18,5 Insuffisance pondérale (maigreur)
18,5 à 25 Corpulence normale
25 à 30 Surpoids
30 à 35 Obésité modérée
35 à 40 Obésité sévère
plus de 40 Obésité morbide ou massive
La page web contient un formulaire comme suit :

Développer une fonction javascript qui permet de calculer l’imc et d’afficher un message sous le bouton
calculer contenant l’interprétation correspondante.
2. if … else if…else (si … sinon si…sinon):
Forme Syntaxe Exemple
if (condition1) if ([Link]() < 12)
{ {
// traitement si condition1 est vrai message = "Bonjour";
} }
else if (condition2) { else if ([Link]() < 18) {
Généralisée // traitement si condition2 est vrai message = "bon aprés midi";
} }
else { else{
// traitement si condition1 et condition2 est message = "bonsoir";
fauxi }
} [Link](message);
correction
Ac2 .html [Link]
<body> function imc(){
<table> taille=Number([Link]('t').value)
<tr><td> <label for="">Nom poids=Number([Link]('p').value)
et Prénom</label></td> im=poids/(taille*taille)
13
Javascript 3STI
<td> <input type="text" if (im <18.5)
id="np"></td></tr> [Link]('res').innerHTML=" Insuffisa
<tr><td> <label nce pondérale (maigreur)"
for="ag">Age</label></td> else if (im <25)
<td> <input type="number" [Link]('res').innerHTML="Corpulence
id="ag"></td></tr> normale"
<tr><td> <label else if (im <30)
for="t">Taille(m)</label> [Link]('res').innerHTML="Surpoids"
</td> else if (im <35)
<td> <input type="text" [Link]('res').innerHTML="Obésité
id="t"></td></tr> modérée"
<tr> <td> <label else if (im <40)
for="p">poids(kg)</label></t [Link]('res').innerHTML="Obésité
d> sévère"
<td> <input type="text" else
id="p"></td></tr> [Link]('res').innerHTML="Obésité
<tr> <td> <input morbide ou massive"
type="button" }
value="calculer"
onclick="imc()"></td>
<td></td> </tr>
</table>
<p id="res"></p>
<script
src="[Link]"></script>
</body>

Activité 3 :
Créer une page html nommée « [Link] » dans laquelle vous allez écrire un script qui permet de :
saisir un numéro de couleur de l'arc-en-ciel (à travers une boîte de dialogue)
puis d'afficher la couleur correspondante dans la page web (en utilisant la méthode [Link])
sachant que : 1: rouge, 2 : orangé, 3 : jaune, 4 : vert, 5 : bleu, 6 : indigo et 7 : violet.
Dans le cas de saisie d’un numéro non valide , une boîte d’alerte s’affiche contenant le message « veuillez
entrer un numéro compris entre 1 et 7 »
3. switch (selon) :
switch(expression) {
case x:
// code cas expression égal x
break;
case y: case a: case b:
// code cas expression égal à y ou a ou b
break;
default:
// code si toutes les valeurs sont différentes de l’expression }

Correction de l’activité 3 :
<script> num=prompt("donner le numéro de couleur de l'arc en ciel");
switch (num) {
case "1": [Link]("couleur rouge");
break;
case "2": [Link]("couleur orangé");
14
Javascript 3STI
break;
case "3": [Link](" couleur jaune");
break;
case "4": [Link]("couleur vert");
break;
case "5": [Link]("couleur bleu");
break;
case "6": [Link]("couleur indigo");
break;
case "7": [Link]("couleur violet");
break;
default : alert("entrer un numéro compris entre 1 et 7")
}
</script>

tp3
Gestion de temps en Javascript : l’objet Date
[Link]éation :
Exemple
Mode de création
d = new Date();
créer un nouvel objet de date avec la date et l'heure actuelles
d = new Date(2020, 11, 24, 10, 33, 30, 0);
Créer un nouvel objet de date avec une date et une heure spécifiées :
Remarque:JavaScript compte les mois de 0 à
on donne l'année, le mois, le jour, l'heure, la minute, la seconde et la
11.
milliseconde (dans cet ordre)
Janvier est 0. Décembre est 11.

créer un nouvel objet de date à partir d'une chaîne de date d = new Date("October 13, 2014 11:13:00");

b.Méthode :
Méthode Description Exemple

toString() Retourne une chaîne de d = new Date();


caractères représentant la date d [Link]([Link]());
toDateString() convertit une date dans un format plus lisible [Link]([Link]());

getFullYear() renvoie l'année d'une date sous forme de nombre à d = new Date();
quatre chiffres [Link]([Link]());

getMonth() renvoie le mois d'une date sous forme de nombre (0-11) d = new Date();
[Link]([Link]());

getDate() renvoie le jour d'une date sous forme de nombre (1- d = new Date();
31) [Link]([Link]());

setDate() Modifie le numéro du jour du mois. d = new Date();


[Link]([Link]());
[Link](5)
[Link]("<br/>"+[Link]());
setMonth() Modifie le numéro du mois [Link](3) //modifier le mois en avril
[Link]("<br/>"+[Link]());
setFullYear() Modifie la valeur de l'année. [Link](2020)
[Link]("<br/>"+[Link]());
15
Javascript 3STI
Activité 4 :
Créer une page web et un programme javascript qui étant donnée une date de naissance il calcule et affiche l’Age et
la saison correspondante.
Exemple :
En entrant la date
de naissance et
en sortant de
cette zone la page
affiche :

Correction de l’activité 4 :
[Link] [Link]
<body> function CalculAge() {
<label>Date de Naissance:</label> d=new Date([Link]("dn").value);
<input type="date" id="dn" // on lit la date de naissance
……………….="CalculAge()"> auj=………………………..; // La date d'ouverture de la page
<br><br> ann=[Link](); // l'année de la date de naissance
<label>Age : </label> anac=…………………….………; // l'année actuelle
<input type="text" name="age" id="Age"> [Link]("Age").value=………………………….
<br><br> mois=……………………………………….
<p> vous êtes nés en <span id="sais"> switch (…………….){
</span> </p> case 1: case 2: case 12:
<script …………………………> [Link]("sais")………………..="………….";
</script> </body> break;
case ….: case …..: case …….:
[Link]("sais").innerHTML="printemps";
break;
case …..: case …….: case …..:
[Link]("sais").innerHTML="……….";
break;
case …….: case …….: case …….:
[Link]("sais").innerHTML="…………..";
break;
}
}
Correction de l’activité 4 :
<body> <label>Date de Naissance : </label><input type="date" id="dn" onblur="CalculAge()">
<br><br><label>Age : </label><input type="text" name="age" id="Age" ">
<br><br> vous êtes nés en <span id="sais"></span>
<script>
function CalculAge() {
d=new Date([Link]("dn").value);// on lit la date de naissance
auj=new Date(); // Le date d'ouverture de la page (aujourd'hui)
ann=[Link](); // l'année de la date de naissance
anac=[Link](); // l'année actuelle
[Link]("Age").value=anac-ann +" ans";
mois=[Link]() + 1;
switch (mois){
case 1: case 2: case 12:
[Link]("sais").innerHTML="hiver";
break;
case 3: case 4: case 5:
[Link]("sais").innerHTML="printemps";
break;
case 6: case 7: case 8:
16
Javascript 3STI
[Link]("sais").innerHTML="été";
break;
case 9: case 10: case 11:
[Link]("sais").innerHTML="hiver";
break;
}
}
</script> </body>

Activité 5:
Réaliser un script js qui permet d’afficher en temps réel la date dans une page web dés son chargement
sous la forme : « Nous sommes le jj-mm-aaaa» puis afficher si l’année est bissextile ou non. Une année
est dite bissextile si elle est divisible par 4 (elle possède 366 jours)
Correction de l’activité 5 :
[Link] [Link]
<body ………………………………..="afficherDateActuelle()"> function afficherDateActuelle()
<p> Nous sommes le <span id='z1'></span></p> { auj= ………………………………………..//créer un objet date
<div id="z2"></div> jour= …………………………………….//sauvegarder le jour
<script ……………………………………..> mois=………………………………………//sauvegarder le mois
</script> if (jour < 10){ jour=………………………}// jour sous forme jj
…..……………………………………………..//mois sous forme mm
Année=……………………………………// sauvegarder l’année
date =……………………………………………………. ;//jj-mm-aaaa
//afficher la date obtenue dans la zone 1
………………………………………………………………………………………………
//afficher dans la zone 2 si cette année est bissextile ou non
……………………………………………
……………………………………………………………………………….
………………………
……………………………………………………………………………….
}
Correction de l’activité 5 :
<body onload="afficherDateActuelle()"> <!—le script se déclenche lors de chargement de la page -->
<p> Nous sommes le <span id='zoneSaisie'></span></p>
<div id="zs"></div>
<script>
function afficherDateActuelle()
{
auj = new Date();
jour=[Link] ();
mois=[Link]()+1;
if (jour < 10) jour='0'+jour;
if (mois < 10) mois='0'+mois;
année= [Link]();
date = jour+'-'+mois+'-'+année
[Link]('zoneSaisie').innerHTML=date;
if (année % 4 == 0)
[Link]('zs').innerHTML= "cette année est bissextile";
else
[Link]('zs').innerHTML= "cette année n ' est pas bissextile";
}
</script>

17
Javascript 3STI

Activité 6:
Réaliser un script js qui permet d’afficher en temps réel la date dans une page web sous la forme suivante :
Nous sommes le : J mois en toute lettre et l’année sur quatre chiffres
NB :Vous utiliserez les tableaux pour faire une transcription des mois (Janvier, Février, …).
Array (tableau) :
[Link]étés :
propriété Rôle exemple
t = new Array("sysème","technologie","internet");
n = [Link];
[Link](n); // il affiche ……..3
[Link]("<br>"+ t[0]) // il affiche ……..sysème
length retourne la taille du tableau
new Array() ; permet de créer un nouveau tableau.
nomTableau[ i ] : permet d’accéder à la case i du tableau avec 0≤i < longueur du tableau
b.Méthodes :
Description
Méthode Exemple
convertit un tableau en une chaîne de fruits = ["Banane", "Orange", "Pomme", "Mangue"];
toString() valeurs de tableau (séparées par des ch= [Link]();
virgules). alert(ch); // affiche ……………………..

Correction de l’activité 6 :
<script> //créer un tableau des mois
……………………………………………………………………………………………………………………

d=…………………..………..; //date actuelle


aujourdhui=……………………………………………………………………………………..//j mois aaaa
[Link]('Nous sommes le :'+aujourdhui);
</script>

Correction de l’activité 6 :

<h3>Affiche de la date d'aujourd'hui</h3>


<script>

mois=new Array("janvier","février","mars","avril","mai","juin","juillet","août",
"septembre","octobre","novembre","décembre");
d=new Date();
aujourdhui=[Link]()+ " "+ mois[[Link]()]+ " "+ [Link]();
[Link]('Nous sommes le :'+aujourdhui);
</script>

Tp4 : Objet String + structures itératives

18
Javascript 3STI

Activité 1 :
Ecrire un script qui permet de vérifier si une date donnée à travers une boîte de dialogue est de format
valide (jj/mm/aaaa)

Si le format est valide on affiche format valide dans le console , sinon une boîte d’alerte s’affiche contient le
message « veuillez entrer une date sous forme jj/mm/aaaa »

Correction de l’activité 1 :
d=prompt("donner une date sous forme jj/mm/aaaa ")

j=[Link](0,2)
s1=[Link](2);
m=[Link](3,2);
s2=[Link](5);
a=[Link](6,4);
if (([Link]!=10)||(s1!="/")||(s2!="/")|| isNaN(j)||isNaN(m)||isNaN(a))
alert("veuillez entrer une date sous forme jj/mm/aaaa " )
else [Link]("format valide" )
//pour vérifier la validité de la date
19
Javascript 3STI
a=Number(a);
if ((a<1900)||(a>2023))
{
alert("année invalide");

}
m=Number(m);
if ((m<1)||(m>12))
{
alert("mois invalide");
}
j=Number(j);
switch(m)
{
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
if ((j<1)||(j>31))
{
alert("jour invalide");

}
case 4: case 6: case 9: case 11:
if ((j<1)||(j>30))
{
alert("jour invalide");

}
case 2:
if ((a%4==0)&&((j>29)||(j<1)))
{
alert("jour invalide");
}

else if ((a%4!=0)&&((j>28)||(j<1)))
{
alert("jour invalide");
}
}

Activité 2 :
Ecrire un script qui permet de vérifier si une adresse email donnée à travers une boîte de dialogue est
valide.

Si l’adresse est valide on affiche adresse valide dans le console , sinon une boîte d’alerte s’affiche contient le
message « veuillez entrer une adresse email sous forme nom@[Link] »

Correction de l’activité 2 :

ch=prompt("donner votre adresse email")

l=[Link]
20
Javascript 3STI
p1=[Link]("@")

p2=[Link](".")

if (l>5&&p1!=-1&&p1<p2-1&&p2< l-1)

[Link]("Adresse valide");

else

alert("veuillez entrer une adresse email sous forme nom@[Link] ")

Structures itératives

Activité 3 :

Ecrire un script qui permet de calculer le nombre de voyelles dans une chaîne donnée à travers une zone de
texte

Exemple :

Correction de l’activité 3 :

<body>
<input type="text" placeholder="saisir une chaîne de caractère" id="c"
onblur="calc()">
<p>le nombre de voyelles dans cette chaîne est <span id="s"></span></p>
<script>

function calc(){
c=0;
voy="AOIYUE"
ch=[Link]("c").value
for(i=0; i<[Link];i++){
if ( [Link]([Link](i).toUpperCase()) != -1) {c=c+1;}
}
21
Javascript 3STI
[Link]("s").innerHTML=c
}
</script>
</body>

Activité 4 :

Ecrire un script qui permet d’afficher le participe passé d’un verbe du premier groupe.

Dans le cas de saisie d’un verbe d’un autre groupe la boîte de dialogue s’ouvre une autre fois.

NB : un verbe du premier groupe se termine par « er » (le verbe aller n’est pas du premier groupe)

Exemple :

En entrant le verbe « conjuguer » le message


suivant s’affiche dans la page web.

Correction de l’activité 4 :
<script >
do
v=prompt("donner un verbe du premier groupe")

while(([Link]()=="aller")||([Link]().lastIndexOf("er")!=[Link]-2))
p=[Link](0,[Link]-2)+"é"
[Link]("le participe passé de "+v+ " est "+p)
</script>

Activité 5:

Ecrire un script qui demande votre nom puis il vérifie si votre nom commence par une majuscule et qui ne
contient pas un chiffre ;

22
Javascript 3STI
Correction de l’activité 5 :

<script>
nom=prompt("donner votre nom")
if ([Link](0).toUpperCase()!=[Link](0)){alert("le nom doit commencer par
une lettre majuscule")}
else{ i=0
while(isNaN([Link](i))&&(i<=[Link])){i=i+1}
if(([Link](i) >="0")&&([Link](i) <="9")){alert("le nom ne doit pas contenir un
chiffre")}
else [Link]("bonjour "+nom)}

</script>
Correction tp 5
<script>
function verif()
{res=true
cod=[Link]("c").value
if( ([Link]!=8)|| ([Link](2)!="/")|| (isNaN([Link](0,2))) ||
(isNaN([Link](3,5))))
{alert("le code sous forme xx/xxxxx avec x sont des chiffres");
res= false}

cin=[Link]("nc").value
if((([Link](0)!=1)&&([Link](0)!=0))||([Link]!=8)||(isNaN(cin)))
{alert("le cin doit commencer par zéro ou un et composé par 8 chiffres ")
res= false}
d=new Date([Link]("dn").value)
if( [Link]()>2005){alert("age minimal 18ans"); res= false}

if
(([Link]("mm").checked==false)&&([Link]("ff").checked==f
alse))
{
res = false;
alert("Spécifier le genre!");
}
return res;
}
</script>
</body>
</html>

23

Vous aimerez peut-être aussi