TP1: Découverte Du Langage Javascript Activité 1

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 ?
………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………
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 exemplejs1.html
<!DOCTYPE html>
<html>
<head>
<script>
function maFonction( )
{
document.getElementById("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>
2-Que permet de faire la fonction Mafonction() dans cet exemple ? Où est-elle placée ?
………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………
3- Déplacer l’élément <script> …. </script>dans la partie <body>…. </body> , que remarquez-vous ?
………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………
4- En utilisant l’éditeur VS code, créer un nouveau fichier dans votre dossier de travail sous le nom
myscript.js puis déplacer le code de la fonction maFonction dans ce fichier
function maFonction() {
document.getElementById("demo").innerHTML = "Paragraphe changé.";
}
Modifier le code de la page exemplejs1.html en ajoutant l’attribut suivant dans la balise script
<script src="myscript.js">
</script>
Que remarquez-vous ?
………………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………………
Retenons :Les scripts peuvent être placés dans l’entête ……………………………….. , le corps
de la page …………………………………………. ou dans un fichier externe d’extension ………….
11
JavaScript 3STI
Activité 3 : Les sorties en Javascript
1. Lancer vscode, saisir ce code et l’enregistrer dans votre dossier de travail sous le nom
act3ex1.html
<body>
<h1>MaPage Web </h1>
<p> Mon premier code js</p>
<script>
alert(5 + 6);
</script>
</body>
2. Exécuter ce code, quel est son rôle ?
………………………………………………………………………………………………
3. Remplacer alert(5 + 6); par alert(‘Bonjour’); Quel est le role de la méthode alert
……………………………………………………………………………………………..
4. Enregistrerle fichier sous le nom act3ex2.htmlpuis modifier le code comme suit
<!DOCTYPE html>
<html>
<body>
<p>Mon premier code js</p>
<p id="pg"></p>
<script>
document.getElementById("pg").innerHTML = 5 + 6;
</script>
</body></html>
5. Exécuter ce code, quel est son rôle ?
………………………………………………………………………………………………………….
6. 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>
<p id="pg"></p>
<button onclick="document. getElementById('pg').innerHTML = 5 + 6"> Essayer</button>
</body></html>
……………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………
7. Enregistrerle fichier sous le nom act3ex3.htmlpuis modifier le code comme suit et trouver le
rôle et la différence par rapport au précédent :
<!DOCTYPE html>
<html>
<body>
<p id="pg"></p>
<button onclick="document.write(5 + 6)"> Essayer</button>
</body></html>
……………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………
12
JavaScript 3STI
Application 1 :
1- Enregistrer le code suivant dans un fichier nommé « app1a1.html »
<!DOCTYPE html>
<html>
<head>
<title>Nouvelle page 1</title>
<script>
function ………………..( )
{
…………………………………………………………..
}
</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é « app1a2.html » puis ajouter les modifications
nécessaires pour que le message s’affiche dans la page web.
<head>
<script>
{
…………………………………………………………..
}
</script>
</head>
<body>
<button onClick="msg( )">méthode</button>
</body></html>
4- Enregistrer le code dans un fichier nommé « app1a3.html » 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>
{
……………………………………………………………………………………..
}
</script>
</head>
<body>
<p …………………></p>
<button type="button" onClick="msg( )">méthode</button>
</body></html>
5- Déplacer la fonction dans un fichier externe « message.js » puis faire référence à ce fichier au niveau
de fichier html.
………………………………………………………………………………………………………...……
13
JavaScript 3STI
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 act3ex3.html et l’enregistrer sous le nom « act3ex4.html ». Ajouter les modifications
nécessaire pour obtenir ce code
<!DOCTYPE html>
<html>
<body>
<p id="pg"></p>
<script>
console.log( 5 + 6);
</script>
</body></html>
1- Exécuter le code. Est-ce que la valeur 11 est affichée dans la page web ?.............
2- Ouvrir le console web (cliquer sur la touche F12 , ou bien ctrl+shift+I), que remarquez-vous ?
……………………………………………………………
3- Dans l’onglet Console , écrire la commande suivante et observer le résultat:
document.getElementById('pg').innerHTML = " bonjour ";
4- Dans l’onglet Console , écrire la commande suivante et observer le résultat:
document.write(5 + 6)
NB : L'utilisation de document.write() 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.
Écrire dans la sortie HTML à l'aide de document.write().
Écrire dans une boîte d'alerte, en utilisant window.alert().
Écrire dans la console du navigateur, en utilisant console.log().
On peut aussi afficher des données dans une zone de formulaire.
Essayer cet exemple , l’enregistrer dans un fichier nommé « act3ex5.html »
<head><title>Document</title>
<script>
function msg(){
document. getElementById("z1").value="bonjour"
}
</script></head>
<body>
Le message s'affiche ici <inputtype="text"id="z1">
<button onclick='msg()'> Essayer</button></body></html>
14
JavaScript 3STI
Activité 2 : les Entrées en JavaScript
a- Exécuter le code suivant
<!DOCTYPE html>
<html>
<body>
<h1>Ma Page Web </h1>
<p id="p2">Bonjour <span id="pnom"></span></p>
<script>
var nom=prompt("donner votre nom");
document.getElementById("pnom").innerHTML=nom;
</script>
</body></html>
1- Que présente l’objet « nom » ? ………………………………
2- Quel est le rôle de la méthode « prompt » ? ……………………………………………………..
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.
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 :
1-
<!DOCTYPE html>
<html>
<body>
<script>
…………………………………………………………………………………//entrer une valeur à une variable 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 … »
………………………………………………………………
15
JavaScript 3STI
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) { console.log(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>
console.log(a); // …..4
console.log(b); //……1
console.log(c); //……7
}
console.log(a); // ….5
console.log(b); //…. 1
console.log(c); //……7
</script>
</body>
</html>
4 façons pour déclarer une variable en JavaScript :

 En utilisantvar (globale)
 En utilisantlet (locale)
 En utilisantconst (constante)
 Ne rien utiliser(globale)
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.
Fichier « act4tp1.html » Fichier

« calculsomme.js »
<body>
<table>
<tr><td><labelfor="A">A=</label></td>
<td><inputtype="text"id="A"></td></tr>
<tr>
<td><labelfor="B">B=</label></td>
<td><inputtype="text"id="B"></td></tr>
<tr>
<td><inputtype="button"value="Somme"……………………………..="……………………."></td>
<td><labelfor="s">S=</label><inputtype="text"id="s"></td></tr>
</table>
<script …………….="calculsomme.js"></script>
16
JavaScript 3STI
</body>
(utiliser la méthode document.getElementById('id').value )
Tp2 :Les structures conditionnelles
Activité 1 :
Ecrire un programme JavaScript dans un fichier nommé « minicalc.js » qui permet de réaliser la somme, la
soustraction, la multiplicationet la division de deux entiers donnés par l'utilisateur en utilisant un
formulaire comme le montre l'image suivante :
Les champs
nombre1 et
nombre 2 sont
obligatoires.
Dans le cas de la
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-
alculatrice.html"
dans le dossier
"tp3" dans votre
dossier de
travail
Les fonctions Javascriptde l’objet Math :

Math.abs(a) Retourne la valeur absolue de a
Math.round(a) Retourne l'entier arrondi le plus proche de a
Math.sqrt(a) Retourne la racine carrée de a
Math.pow(a,b) Retourne a à la puissance b
I. Les structures de contrôle conditionnelles :

1. if … else … (si … sinon …):
Forme Syntaxe Exemple
17
JavaScript 3STI
if (condition) if (d.getHours() < 18) {
{ message = "Bonjour";
// traitement si condition est vrai }
} else {
Simple
else message = "Bonsoir";
{ }
// traitement si condition est faux document.write(message);
}
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):
if (condition1) if (d.getHours() < 12)
{ {
// traitement si condition1 est vrai message = "Bonjour";
} }
else if (condition2) { else if (d.getHours() < 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 }
} document.write(message);
Activité 3 :
Créer une page html nommée « arcciel.html » 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 document.write)
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) :
18
JavaScript 3STI
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 }
tp3
Gestion de temps en Javascript : l’objet Date
a.Cré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 document.write(d.toString());
toDateString() convertit une date dans un format plus lisible document.write(d.toDateString());
getFullYear() renvoie l'année d'une date sous forme de nombre à d = new Date();
quatre chiffres document.write(d.getFullYear());
getMonth() renvoie le mois d'une date sous forme de nombre (0-11) d = new Date();
document.write(d.getMonth());
getDate() renvoie le jour d'une date sous forme de nombre (1- d = new Date();
31) document.write(d.getDate());
setDate() Modifie le numéro du jour du mois. d = new Date();

document.write(d.toDateString());
d.setDate(5)
document.write("<br/>"+d.toDateString());
setMonth() Modifie le numéro du mois d.setMonth(3) //modifier le mois en avril
setFullYear() Modifie la valeur de l'année. d.setFullYear(2020)
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
19
JavaScript 3STI
naissance et en sortant de cette zone la page affiche :
Correction de l’activité 4 :
Tp2ac4.html Calcage.js
<body> function CalculAge() {
<label>Date de Naissance:</label> d=new Date(document.getElementById("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=d.getFullYear(); // l'année de la date de naissance
<label>Age : </label> anac=…………………….………; // l'année actuelle
<input type="text" name="age" id="Age"> document.getElementById("Age").value=………………………….
<br><br> mois=……………………………………….
<p> vous êtes nés en <span switch (…………….){
id="sais"></span></p> case 1: case 2: case 12:
<script …………………………> document.getElementById("sais")………………..="………….";
</script></body> break;
case ….: case …..: case …….:
document.getElementById("sais").innerHTML="printemps";
break;
case …..: case …….: case …..:
document.getElementById("sais").innerHTML="……….";
break;
case …….: case …….: case …….:
document.getElementById("sais").innerHTML="…………..";
break;
}
}
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)
Tp2ac5.html Bissextile.js
<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=……………………………………// sauvegarderl’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
……………………………………………
……………………………………………………………………………….
………………………
……………………………………………………………………………….
}
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) :
a.Propriétés :
Propriété Rôle exemple
length retourne la taille du tableau t = new Array("sysème","technologie","internet");
20
JavaScript 3STI
Propriété Rôle exemple
n = t.length;
document.write(n); // il affiche ……..
document.write("<br>"+ t[0]) // il affiche ……..
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= fruits.toString();
virgules). alert(ch); // affiche ……………………..
<script> //créer un tableau des mois
……………………………………………………………………………………………………………………
d=…………………..………..; //date actuelle

aujourdhui=……………………………………………………………………………………..//j mois aaaa
document.write('Nous sommes le :'+aujourdhui);
</script>
<script> num=prompt("donner le numéro de couleur de l'arc en ciel");
switch (num) {
case "1": document.write("couleur rouge");
break;
case "2": document.write("couleur orangé");
break;
case "3": document.write(" couleur jaune");
break;
case "4": document.write("couleur vert");
break;
case "5": document.write("couleur bleu");
break;
case "6": document.write("couleur indigo");
break;
case "7": document.write("couleur violet");
break;
default : alert("entrer un numéro compris entre 1 et 7")
}
</script>
<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(document.getElementById("dn").value);// on lit la date de naissance
auj=new Date(); // Le date d'ouverture de la page (aujourd'hui)
ann=d.getFullYear(); // l'année de la date de naissance
anac=auj.getFullYear(); // l'année actuelle
document.getElementById("Age").value=anac-ann +" ans";
mois=d.getMonth() + 1;
switch (mois){
21
JavaScript 3STI
case 1: case 2: case 12:
document.getElementById("sais").innerHTML="hiver";
break;
document.getElementById("sais").innerHTML="printemps";
break;
document.getElementById("sais").innerHTML="été";
break;
document.getElementById("sais").innerHTML="hiver";
break;
}
}
</script></body>
<body onload="afficherDateActuelle()">
<p> Nous sommes le <span id='zoneSaisie'></span></p>
<div id="zs"></div>
<script>
function afficherDateActuelle()
{
var auj = new Date();
jour=auj.getDate ();
mois=auj.getMonth()+1;
if (jour < 10) jour='0'+jour;
if (mois < 10) mois='0'+mois;
année=auj.getFullYear();
var date = jour+'-'+mois+'-'+année
var heure = auj.getHours() + ":" + auj.getMinutes() + ":" + auj.getSeconds();
document.getElementById('zoneSaisie').innerHTML=date+" "+heure;
if (année % 4 == 0)
document.getElementById('zs').innerHTML= "cette année est bissextile";
else
document.getElementById('zs').innerHTML= "cette année n ' est pas bissextile";
}
</script>
<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=d.getDate()+ " "+ mois[d.getMonth()]+ " "+ d.getFullYear();
document.write('Nous sommes le :'+aujourdhui);
</script>
22
JavaScript 3STI
Tp4 : Objet String + structures itératives
Les opérateurs arithmétiques
Operateur Description
+ Addition
- Soustraction
* Multiplication
/ Division
% Modulo
Les opérateurs de comparaison
Signe Nom
== Egal
< Inférieur
<= Inférieur ou égal
> Supérieur
>= Supérieur ou égal
!= Différent
23
Javascript 3STI
Les opérateurs logiques (booléens)
Signe Nom
&& ET logique(and)
|| OU (or)
! NON (not)
Des fonction JS
isNaN(a) Retourne vrai si l’argument a n’est pas un nombre
Number(ch) Convertit une chaîne ch en un nombre
parseFloat(ch) Convertit une chaîne ch en un réel
parseInt(ch,b) Convertit une chaîne ch en un entier exprimé dans la
base b
String(a) Convertit la valeur a en une chaîne
Si la conversion n’est pas possible la fonction retourne NaN
L’objet String :
1.Propriétés :
propriété Rôle exemple
ch = "Bonjour";n = ch.length;
Length retourne la longueur de la chaine document.write(n) // affiche ……
2.Méthodes : (sachant que Ch est un objet String)
méthode description exemple
Ch.charAt retournera le caractère à la position spécifiée var ch = "bonjour";
(index) (index). r = ch.charAt(6);
alert(r); //affiche ..
Ch.indexOf (c,p) détermine la première position c en effectuant la ch1 = "bonjour le monde";
recherche à partir de la position p. a = ch1.indexOf("le");
renvoie -1 si la valeur n'est pas trouvée. alert(a); // affiche ..
b=ch1.indexOf("bonne");
alert(b); // affiche ..
Ch.lastIndexOf détermine la dernière position c à partir de la ch1 = "bonjour le monde";
(c) position p a = ch1.lastindexOf("n");
renvoie -1 si la valeur n'est pas trouvée . alert(a); // affiche ..
Ch.substr (p,n) extraire une partie de la chaîne de la position p , n ch = "bonjour le monde!";
caractères. r = ch.substr(0, 7);
si on ne donne pas n la copie sera jusqu'à la fin alert(r);// affiche ..
Ch.toString () renvoie la valeur d'une chaîne var x = 34;

var r = x.toString();
alert(r+typeof r); // affiche ..
Ch.replace recherchera ch1 et la remplacée par ch2. ch = "bonjour le monde!";
(ch1,ch2) r = ch.replace(" ","-");
alert(r);// affiche ..
Ch.trim () supprime les espaces non utiles.(début, fin, en ch = "bonjour le monde!";
double) r = ch.trim();
Ch.toLowerCas convertit une chaîne en lettres minuscules. ch = "BONJOUR!";

e () r = ch.ToLowerCase();
Ch.toUpperCas convertit une chaîne en lettres majuscules. ch = "bonjour!";
e () r = ch.ToUpperCase();
Retourne une chaîne formée par la concaténation alert(String.fromCharCode(65,97))
12
Javascript 3STI
méthode description exemple
String.fromCh des résultats de conversion des codes passés en // affiche ……….
arCode(num1, paramètres
….,numN)
Ch.charCodeAt Retourne le code du caractère à la position p ch = "bonjour!";
(p) r = ch.charCodeAt(0);
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 » . Puis vérifier si la date est valide, sinon
afficher dans une boîte d’alerte si le jour, le mois ou l’année est invalide
d=…………………………………………………………………….. //entrer date à partir la boîte de dialogue
j=……………………………………. //extraire le jour de la chaîne
s1= …………………………….……//extraire le « / »
m=………………………………….//extraire le mois
S2=……………………………………..//extraire le deuxième « / »
a=…………………………………….//extraire l’année de la chaîne
if …………………………………………………………………………………………………………….
…………………………………………………………………………………………………………….
else { ………………………………………………………………………..
//pour vérifier la validité de la date
m=Number(m)
if …………………………….. 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"); }
break ;
case 4: case 6: case 9: case 11 :
if ………………………. { alert("jour invalide"); }
break ;
case 2:
if ((a%4==0)&&((j>29)||(j<1)))
{ alert("jour invalide"); }
else if ((a%4!=0)&&((…………….)||(…………..)))
{ alert("jour invalide"); }
break ;
}
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@serveur.domaine »
Nb :nom, serveur et domaine sont des chaînes de deux caractères au minimum
ch=……………………("donner votre adresse email")
l=……………………………………//longueur de l’adresse ch
13
Javascript 3STI
p1=…………………………………..//index de « @ »
p2= …………………………………//dernier index de « . »
if ( ……………………………………………………………………………………………………………….)
…………………………………………….("Adresse valide");
else
………………………..("veuillez entrer une adresse email sous forme nom@serveur.domaine ")
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 en sortant de cette zone
Exemple :
Tp4ac4.html Voy.js
<body> Function
………………………{ch=document.getElementById(………). ……………….
<inputtype="text"placeholder="saisir
voy="………………………………." ; nb=0 ;
une chaîne de caractère"id="c"
…………………..="calc()"> for(i=……..; i<……………………………………….;i++){
<p>le nombre de voyelles dans if (……………………………………………………………………………………………..)
cette chaîne est {………………………………………..}}
<spanid="s"></span></p> document.getElementById("….")………………….=…………}
<script …………………………………….>
</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.
14
Javascript 3STI
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.
Correc
tion de
l’activi
té 4 :
<script>
do
v=………………………("donner un verbe du premier groupe")
while((v.toLowerCase()=="aller")||(…………………………………………………………………………………………………………………………))
p=…………………………………………………………………………………………………….+"é"
document.write("le participe passé de "…………………………" est " ………………………………… ;)
</script>
Activité 5:
Ecrire un script qui demande votre nom puis il vérifie si votre nom commence par une lettre majuscule et
qui ne contient pas un chiffre ;
<script>
nom=prompt("donner votre nom")
if (…………………………………………………………………………………………………………………………………………………………)
{alert("le nom doit commencer par une lettre majuscule")}
else{ i=0
while(………………………………………………………………….)&&(i<=nom.length)){i=i+1}
if(……………………………………………………………………………………)){alert("le nom ne doit pas contenir un chiffre")}
elsedocument.write("bonjour "+nom)}
</script>
Tp5 : Contrôle de saisie pour le formulaire

Créer dans votre dossier de travail une page nommée « succès.html » qui contient le paragraphe « inscription faite
avec succès » et une page nommée "enregistrement.html" qui présente le formulaire suivant :
15
Javascript 3STI
Sachant que le clic sur le bouton "Envoyer" fait appel à :

• une fonction JavaScript intitulée "verif",
• le fichier "succes. html".
a) Ecrire la fonction "verif" dans un fichier "controles.js" afin de s’assurer de la validité des champs du formulaire
tout en respectant les contrôles suivants :
Champ Contrôle
Code Une chaîne de 8 caractères respectant le format suivant : xx/xxxxx
(où chaque x représente un chiffre).
NCin Composé de 8 chiffres et commence soit par 0 soit par 1
Date de naissance Année de naissance avant 2006 (âge minimale 18 ans)
Genre La sélection d’un genre est obligatoire.
controles.js
<formaction="……………………………………"onsubmit="…………………………… function verif()
…………………………………"> {res=……………………
<label>code:</label > cod=document.getElementById("……….").
<inputtype="text"id="c"placeholder="xx/xxxxx"><br …………………………….
> if( (…………………………………………………………)||
<label>NCin:</label> (…………………………………………………………………)||
<inputtype="text"id="nc"><br> (…………………………………………………………………) ||
<label>Date de naissance: </label> (…………………………………………………………………))
<inputtype="date"id="dn"><br> {alert("code sous forme xx/xxxxx
<label>Genre:</label> avec x sont des chiffres")
<inputtype="radio"value="M"id="mm"> M res= ………………………}
<inputtype="radio"value="F"id="ff"> F<br> cin=document.getElementById("………").
<inputtype="submit" value="Envoyer"> …………………………
<inputtype="reset"value="Annuler"> if(((………………………………………………)&&(…………………………
……………………))||
</form> (………………………………………)||(………………………………………………
<script src=…………………………………> ))
</script> {alert("le cin doit commencer par zéro
ou un et composé par 8 chiffres ")
res= ……………………………………………}
d=new
Date(document.getElementById("dn").val
ue)
if(……………………………………………………………………)
{alert("age minimal 18ans")
res= ……………………}
if
((document.getElementById("mm").checke
d==……………) &&
(document.getElementById("ff").checked
16
Javascript 3STI
==……………))
{alert("Spécifier le genre!")
res =……………………… }
return ………………………………… }
Application :
Créer la page web « inscription.html » présentant le formulaire suivant :
Le clic sur le bouton envoyer fait appel à la fonction JavaScript verif1() qui permet d’effectuer les contrôles de saisie
suivant :
 Le champ pseudo doit contenir entre 4 et 8 caractères
 Le champ email est de type email, il est obligatoire
 Le champ mot de passe est de type password, il doit contenir au moins une lettre majuscule, une lettre
minuscule et un chiffre
 Le quatrième champ doit être identique au troisième
Application 2 :
Application 3 :
17
Javascript 3STI
Application 4 :
Soit le formulaire inscription.html comme présenté ci-dessous :
Le clic sur le bouton GO fait appel à une fonction verif afin d’assurer la validité des champs du formulaire en
respectant les contrôles suivants :
Champ Contrôle
Id_unique Une chaine de six caractères les cinq premier sont numériques et le dernier caractère doit être
alphabétique minuscule
Nom_prenom Une chaine alphabétique et peut contenir un seul espace

Fax Chaine de 10 chiffres dont le premier caractère doit être non nul et le troisième doit être impair
Mail Le caractère @ doit apparaitre à partir de la position 7 et le nom de l’utilisateur est
alphanumérique
Civilité La sélection d’une civilité est obligatoire
18
Javascript 3STI
Application 5 :
Créer la page web suivante ainsi que le script demandé
19

TP1: Découverte Du Langage Javascript Activité 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1: Découverte Du Langage Javascript Activité 1

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript 3STI

TP1 : Découverte du langage Javascript

Activité 2: Où inclure-on le code JavaScript?

Essayer cet exemple , l’enregistrer dans un fichier nommé « act3ex5.html »

Ajouter les modifications nécessaires pour afficher dans la

Activité 3: les variables

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

Fichier « act4tp1.html » Fichier

Les fonctions Javascriptde l’objet Math :

I. Les structures de contrôle conditionnelles :

Forme Syntaxe Exemple

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

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

new Array() ; permet de créer un nouveau tableau.

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

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

Les opérateurs de comparaison

Ch.toString () renvoie la valeur d'une chaîne var x = 34;

Ch.toLowerCas convertit une chaîne en lettres minuscules. ch = "BONJOUR!";

p2= …………………………………//dernier index de « . »

………………………..("veuillez entrer une adresse email sous forme nom@serveur.domaine ")

En entrant le verbe « conjuguer » le message

Tp5 : Contrôle de saisie pour le formulaire

Sachant que le clic sur le bouton "Envoyer" fait appel à :

Nom_prenom Une chaine alphabétique et peut contenir un seul espace

Vous aimerez peut-être aussi