Pages

Etude de cas

See the Pen examen event delegation by dupont (@dupontcodepen) on CodePen.

🪛Modifiez le CSS en supprimant le filtre de la classe show ! 

.show::after {

  content: " — " attr(data-population)".000" ;

  font-weight: bold;

  color: #555;

}


🚀Verifiez le bon comportement des événements avec le code HTML suivant

 <section>

    <p data-population="30" data-zone="zone1">Evry</p>

    <div data-population="20" data-zone="zone1">Corbeil-Essonnes</div>


🚨Verifiez le mauvais comportement des événement avec du code HTML suivant ! 

 <section>

   <div data-population="30" data-zone="zone1"><span>la ville </span>d'Evry</div>

   <div data-population="20" data-zone="zone1">Corbeil-Essonnes</div>


🛟Proposez une amélioration dans le code JS ! 




ETUDIANTS EN DDL



Pour accéder à la L2 Informatique venant du double diplôme Droit-Informatique ou Bio-informatique, vous devez valider les 60 ECTS et tous les blocs d'informatique.


🅰️La rumeur selon laquelle il suffirait de valider uniquement les modules d’informatique est fausse. Pour passer en L2 Info, il faut obligatoirement valider l’ensemble des 60 ECTS de la L1. Les seuls modules d’informatique ne représentent qu’une partie de ces crédits : même si vous les réussissez, vous n’atteignez pas le total requis. 

Entrainement

- Donnez le corps de la fonction myFilter(array, test) qui renvoie un nouveau tableau contenant uniquement les éléments qui passent le test.

- Donnez la fonction de test fx pour obtenir le résultat suivant :  u = myFilter(T,fx)

Vous disposez de toutes les fonctions myForEach, mySome, myEvery, myIncludes, myMap … les boucles sont donc à bannir ! 

 <section>

    <div data-population="30" data-zone="zone1">Evry</div>

    <div data-population="20" data-zone="zone1">Corbeil-Essonnes</div>

    <div data-population="20" data-zone="zone2">Juvisy-sur-Orge</div>

    <div data-population="22" data-zone="zone1">Ris-Orangis</div>

    <div data-population="20" data-zone="zone3">Athis-Mons</div>

    <div data-population="20" data-zone="zone2">Massy</div>

  </section>

  <div id="population"></div>

-Récupérer tous les <div> contenus dans la balise <section> ?

 

-Récupérer la population d’une ville à partir d’un élément <div> ?

 

-Calculez la population totale et l’afficher dans #population ?


-Ajoutez une classe "highlight" aux villes ayant une population > 20


- Sélectionnez les villes de la zone 1 en utilisant myFilter()


- Sélectionnez les villes de la zone 1 sans utiliser myFilter()


- Trouvez toutes les zones en utilisant myMap puis myForEach et myIncludes.


- Evaluez le programme

  1. const t = [];


  2. myForEach(

  3.   myMap(villes, v => Number(v.dataset.population)),

  4.   p => {

  5.     if (!myIncludes(t, p)) {

  6.       t.push(p);

  7.     }

  8.   }

  9. );


- - Evaluez ce code

div.show::after {

  content: " — " attr(data-population)".000" ;

  font-weight: bold;

  color: #555;

} // CSS


const showPopulation = function (event) {

  event.target.classList.toggle("show");

};


const parent = document.querySelector("section");

parent.addEventListener("click", showPopulation, false);

// JS

- proposez une amélioration !


Correction DS

myForEach : sujet A

myMap : sujet B

myFilter : sujet C

myMethod

Création de vos outils : 

myForEach

myFilter

DOM TD

 introduction au DOM