INSTITUT SPECIALISE DE TECHNOLOGIE APPLIQUEE HAY SALAM

M204 – Développement front-end

EXERCISES
Filière : Développement Digital-option web full stack Formateur : Khalid MZIBRA

Exercice 1
En utilisant la syntaxe ES6 (map, filter, foreEach, Reduce…) écrire les programmes suivants :

let Stagiaire=[
{Nom:"Ali",NoteBac:13,Option:'DEV'},
{Nom:"Ahmed",NoteBac:11,Option:'ID'},
{Nom:"Yassine",NoteBac:16,Option:'ID'},
{Nom:"Mohammed",NoteBac:14,Option:'DEV'},
{Nom:"Alae",NoteBac:10,Option:'Multimedia'},
{Nom:"Mohammed",NoteBac:15,Option:'DEV'}
];
A. Ecrire une fonction qui retourne la liste des stagiaires de l’option DEV
B. Ecrire une fonction qui retourne, pour chaque option donnée en paramètre, la moyenne des notes de
bac de ses stagiaires.
C. Ecrire une fonction qui retourne, pour chaque option donnée en paramètre, la meilleure note
de bac de ses stagiaires.
D. Ecrire une fonction qui retourne la liste des stagiaires qui ont plus de 12 en note de baccalauréat.
E. En utilisant la fonction précédente, Calculer la moyenne des notes des stagiaires qui ont eu le bac avec
ne note supérieure à 12.
F. En utilisant le principe de la déstructuration (destucturing) et les opérateurs de propagation (spread
operator), ajouter à la fin du tableau ci-dessus l’objet suivant : {Nom:"Fatima", NoteBac:14,
Option:'ID'}

Exercice 2
Ecrire une Composante de type classe qui affiche la liste des stagiaires ci-dessus selon la forme suivante.

Figure 1 Liste des stagiaires

A- Après chaque clique sur le bouton ‘Details’ le programme affiche ces données correspondantes sous
forme d’alerte selon la forme suivante

Figure 2 Une alerte qui contient les détails d'un certain stagiaire

B- Ré-écrire le programme en mettant le code qui affiche un élément du tableau dans une composante
de type fonction qui s’appelle ‘StagiaireDetails’.

Figure 3 Un élément d'affichage d'une liste de stagiaires

 INSTITUT SPECIALISE DE TECHNOLOGIE APPLIQUEE HAY SALAM
M204 – Développement front-end

EXERCISES
Filière : Développement Digital-option web full stack Formateur : Khalid MZIBRA

Exercice 3
Créer une composante de type classe qui contient un formulaire qui contient une zone de texte et un
bouton de soumission, Le programme doit répondre aux exigences suivantes :
- Si la taille du texte saisit est inférieure à 10, on doit afficher un message en rouge qui demande à
l’utilisateur de saisir un texte supérieur à 10
- Si la taille dépasse 10, on doit afficher un message en vert qui informe l’utilisateur qu’il a bien
dépassé les 10 lettres exigées.
- Après clique sur le bouton ‘Valider’ on affiche le même texte saisi en dessous du formulaire

Figure 5 Un message qui indique qu'on a saisi plus de 10 lettres

Figure 4 Message d'erreur si on saisit moins de 10 caractères

Figure 6 Affichage du texte inséré par l'utilisateur