CMC-Laayoune- OFPPT – Institut de CONTRÔLE CONTINU – VARIANTE
Formation 2
Module : Développement Web (JavaScript) Durée : 2h30 | Note : /40 pts
Partie I – Théorique (10 pts)
Question 1 : Expliquez le fonctionnement de l'architecture Client/Serveur Web en décrivant les 6
étapes d'interaction. (2 pts pts)
Question 2 : Quelle est la différence entre une fonction classique et une fonction fléchée (arrow
function) en JavaScript ? Donnez un exemple des deux. (4 pts pts)
Question 3 : Qu’est-ce que JSON ? Citez 3 de ses caractéristiques et expliquez la différence entre
[Link]() et [Link](). (4 pts pts)
QCM – Cochez la bonne réponse (1 pt chacune) :
N° Question A B C D
1 Quelle balise HTML est utilisée <js> <script> <code> <javascript>
pour intégrer du code JS externe ?
Réponse : □ A □ B □ C □ D
2 Quel mot-clé déclare une variable var global let function
à portée de bloc ?
Réponse : □ A □ B □ C □ D
3 Quelle méthode supprime le pop() shift() splice() delete()
premier élément d'un tableau ?
Réponse : □ A □ B □ C □ D
4 Quel code HTTP signifie 200 403 500 404
"ressource introuvable" ?
Réponse : □ A □ B □ C □ D
5 Quelle méthode cherche une exec() match() test() search()
correspondance regex et retourne
true/false ?
Réponse : □ A □ B □ C □ D
Partie II – Pratique (30 pts)
Les exercices sont progressifs. Chaque exercice peut utiliser les résultats du précédent.
Exercice 1 – Types de données et conversions (8 pts pts)
1. Déclarez les variables suivantes avec les mots-clés appropriés :
• Une constante PI = 3.14159
• Un nombre flottant prix = 199.99
• Une chaîne quantité = "5" (chaîne, pas nombre)
• Un booléen estDisponible = false
2. Effectuez les opérations suivantes et expliquez le résultat :
• Affichez prix + quantité (sans conversion)
• Convertissez quantité en nombre puis recalculez prix + quantité
• Affichez typeof quantité avant et après conversion
3. Utilisez l'opérateur ternaire pour afficher "Disponible" ou "Rupture de stock" selon estDisponible.
Exercice 2 – Manipulation de tableaux (8 pts pts)
On dispose du tableau suivant :
let prenoms = ["Salma","Omar","Fatima","Youssef","Nadia","Karim"];
1. Triez le tableau par ordre alphabétique et affichez-le.
2. Ajoutez "Hassan" à la fin et "Zineb" au début du tableau.
3. Supprimez le 3ème élément du tableau (splice).
4. À l'aide de forEach, affichez chaque prénom avec son indice et sa longueur :
Ex : "0 - Fatima (6 caractères)"
5. Utilisez findIndex() pour trouver l'indice de "Omar" dans le tableau final.
Exercice 3 – Fonctions et gestion des exceptions (8 pts pts)
1. Écrivez une fonction diviser (a, b) qui :
• Utilise un bloc try/catch
• Lève une exception si b = 0 avec le message "Division par zéro interdite !"
• Retourne le résultat sinon
2. Écrivez une version fléchée (arrow function) de la même fonction.
3. Écrivez une fonction calculerTTC(prixHT, taux) avec :
• Vérification que prixHT > 0 et 0 < taux < 1 (sinon exception)
• Retour du prix TTC = prixHT * (1 + taux)
• Testez avec calculerTTC(200, 0.20) et calculerTTC(-50, 0.20)
Exercice 4 – Objets, Regex & Callbacks – Niveau avancé (6 pts pts)
On veut créer un mini-système de validation de formulaire d'inscription.
1. Créez un objet Utilisateur (avec constructeur) ayant les propriétés : nom, email, motDePasse, age.
2. Ajoutez une méthode valider() qui vérifie via try/catch et expressions régulières :
• L'email est valide (contient @ et un domaine)
• Le mot de passe >= 8 caractères avec au moins 1 chiffre
• L'âge est un nombre entier entre 18 et 99
• Chaque règle lève une exception personnalisée si non respectée
3. Écrivez une fonction fléchée enregistrer(utilisateur, callback) qui :
• Appelle [Link]()
• Appelle callback(null, "Inscription réussie !") si tout est valide
• Appelle callback(erreur, null) si une exception est levée
4. Utilisez [Link]() pour sauvegarder l'utilisateur validé (sans le mot de passe).