Direction Régionale Rabat – Salé - Kénitra
Examen régional de fin de module
Année de Formation 2021/2022
Module M 105
Programmation en javascript
Filière : DÉVELOPPEMENT DIGITAL Durée : 1H30
Année : Barème : / 40
1A Correction
Exercice 1 : Partie Théorique (14pts)
1- A quoi sert JavaScript? (2pt)
Javascript est un langage de scripts qui peut être incorporé aux balises Html. Il est exécuté
par le navigateur, son rôle est d'améliorer la présentation et l'interactivité des pages Web, il
offre des « gestionnaires d'événement » qui reconnaissent et réagissent aux demandes du
client (comme les mouvements de la souris, clics sur les touches du clavier, etc.) et permet
d'accéder aux objets du navigateur.
2- Que fait l’instruction suivante : (2pt)
[Link] ('h1')
Permet de sélectionner tous les éléments h1 du document HTML.
3- soit le code suivant :
A- Que se passera-t-il au clic sur le bouton? (4pt)
Au clic sur le bouton la couleur de l’arrière-plan de l’élément HTML dont le ID est
demo sera rouge.
B- Ecrire un code JQuery équivalent (4pt)
$(document).ready(function(){
$("#myBtn").click(function(){
$("#demo").css({"background-color": "red"});
}); });
4- A quoi sert AJAX ? (2pt)
AJAX est acronyme de « Asynchronous JavaScript And XML », une technologie basée sur :
• Un objet XMLHttpRequest intégré au navigateur (pour demander des données à un serveur Web).
• JavaScript et DOM HTML (pour afficher les données).
AJAX permet de :
• Lire les données d'un serveur web (après le chargement d'une page web) ;
• Mettre à jour une page web sans la recharger ;
• Envoyer les données à un serveur web (en arrière-plan).
Page 1 / 3
Exercice 2 : Partie Pratique (26pts)
1)- Ecrire une fonction javascript PTTC(pht,tva) qui permet de retourner le prix TTC à
partir du prix HT et de la TVA sachant que : PTTC=PHT+PHT*TVA. 6pts
function PTTC (PHT, TVA) {
return PHT+PHT*TVA }
2)- Soit le formulaire suivant :
<form name="F1" id="idF1">
<h1>Candidat</h1>
Nom:<input id="idNom"><br>
Note:<input id="idNote"
type="number"><br>
<input type="button" id="idB1"
value="Ajouter">
</form>
<div id="idR"><table
id="idTable"></table></div>
Sachant que le nom (contient au moins 4 caractères) et que la note est (entre 0 et 40)
a)- Ecrire une fonction qui permet de vérifier le nom et la note avant de l’envoyer le
formulaire. 8pts
function Verifier () {
let nom=[Link]("idNom").value;
let note=Number([Link]("idNote").value);
if([Link]<4 || note<0 || note>40)
{
[Link]("Erreur de saisie");
[Link]("idF1").reset();
return false;
}
return true;
}
b)- à chaque saisie d’un candidat son nom et sa note doivent être ajouté comme étant une
nouvelle ligne dans un tableau HTML contenant les candidats déjà ajoutés. 8pts
[Link]("idB1").addEventListener("click",Ajouter)
function Ajouter () {
if( Verifier ())
{
let nom=[Link]("idNom").value;
let note=Number([Link]("idNote").value);
let row=[Link]("tr");
let elementtable=[Link]("idTable");
[Link]="<td>"+nom+"</td><td>"+[Link]()+"</td>";
if (![Link]()) {
[Link]="1";
[Link]="<th>Nom</th><th>Note</th>";
}
[Link](row);
Page 2 / 3
AfficherMoyenne() ;
}}
c)- Calculer et afficher la moyenne des notes après chaque ajout. 4pts
let PMoy=[Link]("p");
function AfficherMoyenne()
{
const TNotes=[Link]("cnote");
s=0;
for ( i=0;i<[Link];i++)
{s=s+Number(TNotes[i].textContent);}
let m= s/[Link];
let elementform=[Link]("idF1");
[Link]="Moyenne:"+[Link]();
[Link](PMoy);
}
Page 3 / 3
