Correction TP3 Javascript
1. Lors du chargement de la page :
• Html
<body onload="Initialiser()">
• JS
function Initialiser() {
let mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre"]
let d = new Date()
let j = [Link]()
let m = [Link]()
let a = [Link]()
let ch = "Le " + j + " " +mois[m]+" " + a
[Link]("date").innerHTML = ch
[Link]("photo").src = "[Link]"
[Link]("matricule").disabled = true
[Link]("matricule").value = ""
let dateFormatee = a + "-" + (m+1) + "-" + j;
[Link]("dateins").value = dateFormatee;
}
4. Lors de changement de role a partir de la liste deroulante :
• Html
<select id="role" onchange="majform()">
<option value="">-- Choisir Votre Rôle --</option>
<option value="etudiant">Étudiant</option>
<option value="enseignant">Enseignant</option>
</select>
• JS
function majform(){
let role = [Link]('role');
let matricule = [Link]('matricule');
let photo = [Link]('photo');
let form = [Link]('formulaire');
if ([Link] == 1) {
[Link] = '#e6f7ff'; // bleu clair
[Link] = '[Link]';
[Link] = false;
}
else if ([Link] == 2) {
[Link] = '#fff5e6'; // orange clair
[Link] = '[Link]';
[Link] = true;
[Link] = '';
}
else {
[Link] = true;
[Link] = '';
[Link] = '[Link]';
[Link] = '';
return false;
}
}
5. Au fur et a mesure de la saisie de nom :
• Html
<input type="text" id="nom" placeholder="Saisir Votre Nom" onkeyup="verifNom()">
<p id="msgnom" class="msg"></p>
• JS
function verifNom(){
let nom = [Link]('nom');
let msgnom = [Link]('msgnom');
if([Link] < 3 || !alpha ([Link])) {
[Link] = 'Nom Non Valide (alphabetique et long >= 3)';
[Link] = 'red';
[Link] = 'red';
return false;
}else {
[Link] = 'Nom valide';
[Link] = 'green';
[Link] = 'green';
return true;}
}
6. Effectuer la meme verification sur le champ Prénom et afficher, en temps réel, la longueur saisie : en
vert si le prenom est valide, ou en rouge s’il ne respecte pas les règles, dans la zone prevue a cet effet.
• Html
<input type="text" id="prenom" placeholder="Saisir Prénom" oninput="verifPrenom()">
<p id="msgpre" class="msg"></p>
• JS
function verifPrenom() {
let prenom = [Link]('prenom');
let msgpre= [Link]('msgpre');
[Link] = 'Longueur : ' + [Link] + ' caractères';
if ([Link] < 3 || !alpha ([Link])) {
[Link] = 'red';
return false
}else {
[Link] = 'green';
return true;
}
}
7. Lors de la saisie d’une date d’inscription :
• Html
<input type="date" id="dateins" onchange="verifDate()">
<p id="msgdate" class="msg"></p>
• JS
function verifDate() {
let d = new Date([Link]("dateins").value)
let auj = new Date()
let msgdate = [Link]("msgdate")
if (d > auj) {
[Link] = "Date postérieure Impossible"
[Link] = 'red';
return false
}else {
[Link] = "Date Valide"
[Link] = 'green';
return true;}}
8. Apres la saisie du matricule et des que le champ perd le focus :
• Html
<input type="text" id="matricule" onblur= "verifMat()" >
<p id="msgmat" class="msg"></p>
• JS
function verifMat() {
let matricule = [Link]('matricule');
let msgmat = [Link]('msgmat');
let p = [Link]("-");
let ch1 = [Link](0, p);
let ch2 = [Link](p + 1);
if (p == -1 ||
[Link] != 2 || !alpha2(ch1) ||
[Link] != 4 || isNaN(ch2)) {
[Link]="Matricule Non valide Ex: XX-1234!"
[Link] = 'red';
return false
}
else {
[Link]=" Matricule Valide"
[Link] = 'green';
return true;
}
}
9. Lors du choix du niveau (Débutant / Intermédiaire / Avancé) avec des boutons radio : le choix est
obligatoire.
• Html
<input type="radio" name="niveau" value="Débutant" onclick="verifNiveau()"> Débutant
<input type="radio" name="niveau" value="Inter" onclick="verifNiveau()"> Intermédiaire
<input type="radio" name="niveau" value="Avancé" onclick="verifNiveau()"> Avancé
<p id="msgniv" class="msg"></p>
• JS
function verifNiveau() {
let t = [Link]("niveau");
let msg = [Link]("msgniv");
let i = 0
while (i < 3 && !t[i].checked) {
i = i + 1
}
if (i == 3) {
[Link] = " Veuillez choisir un niveau !";
[Link] = "red";
return false
}
for (let i = 0; i < [Link]; i++) {
if (t[i].checked) {
[Link] = "Niveau choisi : " + t[i].value;
[Link] = "green";
break;
}
}
return true;
}
10. On dispose de trois cases à cocher permettant de choisir le support d’un cours : PDF, Vidéo et Live.
On vous demande d’implémenter trois fonctions JavaScript afin de gérer automatiquement les
dépendances entre ces choix.
• Html
<input type="checkbox" id="pdf" onchange="choixSupport2()">Support PDF
<input type="checkbox" id="video" onchange="choixSupport1()">Support Vidéo
<input type="checkbox" id="live" onchange="choixSupport3()">Support en direct
• JS
// Si l'utilisateur coche Vidéo, PDF doit être coché
function choixSupport1() {
let pdf = [Link]("pdf");
let video = [Link]("video");
if ([Link]) {
[Link] = true;
}
}
// Si l'utilisateur décoche PDF, Vidéo et Live sont décochés
function choixSupport2() {
let pdf = [Link]("pdf");
let video = [Link]("video");
let live = [Link]("live");
if (![Link]) {
[Link] = false;
[Link] = false;
}
}
// Si l'utilisateur coche Live, PDF doit être coché
function choixSupport3() {
let pdf = [Link]("pdf");
let live = [Link]("live");
if ([Link]) {
[Link] = true;
}
}
11. Lors de la saisie du mot de passe, vous devez analyser son contenu et mettre à jour une barre de
progression indiquant sa force.
a. Écrire une fonction calculScore(ch) qui reçoit une chaîne de caractères mdp (le mot de passe) et
qui retourne un score entre 0 et 5 selon les critères suivants :
function calculScore(ch) {
let min = 0; let maj = 0; let num = 0; let sym = 0;
let score = 0;
for (let i = 0; i < [Link]; i++) {
if (ch[i] >= 'a' && ch[i] <= 'z') min=min+1;
else if (ch[i] >= 'A' && ch[i] <= 'Z') maj=maj+1;
else if (ch[i] >= '0' && ch[i] <= '9') num=num+1;
else sym=sym+1;
}
if ( [Link] >= 8 ) { score = score + 1 }
if ( min != 0 ) { score = score + 1 }
if ( maj != 0 ) { score = score + 1 }
if ( sym != 0 ) { score = score + 1 }
if ( num != 0 ) { score = score + 1 }
return score }
b. Écrire une fonction verifForce( ) appelée lors de chaque saisie dans le champ mot de passe.
Cette fonction doit :
• Html
<input type="password" id="mdp" oninput="verifForce()">
<div id="barreForce"></div>
• JS
function verifForce() {
let score = calculScore([Link]("mdp").value);
let barre = [Link]("barreForce");
if (score == 0) {
[Link] = "0%";
}
if (score == 1 || score == 2) {
[Link] = "25%";
[Link] = "red";
}
if (score == 3) {
[Link] = "50%";
[Link] = "orange";
}
if (score == 4) {
[Link] = "75%";
[Link] = "yellowgreen";
}
if (score == 5) {
[Link] = "100%";
[Link] = "green";
}
return score === 5;
}
12. Lors du clic sur le bouton “S’inscrire”, écrire une fonction qui :
Vérifie que tous les champs du formulaire sont correctement remplis :
Si une seule de ces conditions n’est pas respectée, afficher un message d’alerte : "Le formulaire
n'est pas correctement rempli !" et bloquer l’envoi du formulaire.
• Html
<form action ="" id="formulaire" onsubmit="return valider()">
• JS
function valider() {
if ( !verifNom()||!verifPrenom()||!verifMat()||!verifDate()||!verifForce()||!verifNiveau())
{
alert("Veuillez vérifier tous les champs !");
return false; // bloque l'envoi du formulaire
}
alert("Votre inscription est soumise !!!");
return true;
}