Pages

Révisions

DOM, JS, Grid

Correction du DS


Réponses

Question A


a :        let parent = element.parentElement;
b,c :      parent 
d :        parent.classList.add(className);
e :        parent = parent.parentElement;


Question B


tab = [];
function run(n, selector) {
   if (n.matches(selector)) {tab.push(n);}
   for (let childElt of n.children) {
       run(childElt, selector);
 }}

Question C

images.addEventListener("click", (e) => { if (e.target.nodeName == "P") e.target.closest("article").querySelector("img").toggleAttribute("hidden"); },false);

Vidéo et commentaire



Projet

Nous allons mettre en place un tableau dynamique !

Ce dernier projet regroupe l'ensemble de nos connaissances sur le DOM.

En particulier, nous verrons l'ajout

  • de nouveaux éléments
  • d'attributs
  • de classes
  • d'évènements
Voici une vue animée de notre application : 

La force de notre code est de prendre un code HTML vierge de tout marqueur de classe.

C'est le JS qui met en place les fonctionnalités de l'application.

Vidéo commentée


Le code 

Voici les code en détail : lien

Aide au DS : un grand classique

Mise en place un menu dynamique.




Entrainez vous à écrire le code JS

 

Vous allez pouvoir comparer votre code avec de nouvelles propositions !

 Amélioration 1

 

Amélioration 2


Voici un code qui permet de réduire le code JS.
Nous appliquons la règle suivante :

  1. .menu li ul {
  2.   display : none;
  3. }

Amélioration 3


Amélioration 4




Pour info : bootstrapTheme

Aide aux revisions


Révisions

La partie Grid ne sera pas au DS. 

Les partie DOM avec les événements et parcours sont à cibler.

Aides

Structure du DOM

Voici pour commencer trois vidéos reprenant le parcours dans l'arbre  vidéos

le code de la vidéo : code et une amélioration : code

Vous pourrez finalement testez vos connaissances ( lien )

DOM

Voici une série de question sur le vocabulaire du DOM (lien)


Retrouvez le programme des cours  lien

Semaine du 16 au 20

 Cours

La délégation

En action

 


Code en action

Vous trouverez les codes des vidéos : 

https://codepen.io/dupontcodepen/pen/GRqYRro

https://codepen.io/dupontcodepen/pen/gOMqwjL


TD

Introduire la délégation dans le code https://codepen.io/dupontcodepen/pen/mdExbWm 

pour pouvoir avoir plusieurs couples énoncés/solutions.

Remarques :

Pour information, la délégation est si importante, que nous pouvons dans des applications métiers PRO, créer des fonction de haut niveau.

https://codepen.io/dupontcodepen/pen/eYzxdeL


Semaine du 9 au 13

 Cours : les événements

https://dupontl2.blogspot.com/2020/11/event-video.html

TD

https://dupontl2.blogspot.com/2020/11/td-semaine-du-9-au-15.html

DM

https://dupontl2.blogspot.com/2020/11/dm-image.html

En savoir plus

https://dupontl2.blogspot.com/2020/11/allez-plus-loin.html

Inscription à : Commentaires (Atom)