dupontL2: 2020

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

Code

https://docs.google.com/document/d/1RD-aYIb_6bcdxFzqipBnXeyUAjDL9DonlgFg9JyaDew/edit?usp=sharing

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 :

.menu li ul {
display : none;
}

Amélioration 3

Amélioration 4

Pour info : bootstrapTheme

https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/

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

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

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

Allez plus loin

Voici le code pour remplacer les images par des vidéos.

code : Mes vidéos

Comment mettre en ligne vos propres vidéos 👉explications

DM : image

Aide :

CSS : Définir votre grille dense 👉 code DOM + JS : Compléter le codepour un ensemble d'images 👉 code

En action l'idée est de réaliser une application aux comportement suivant :

Remarque

Pour agrandir simplement une image : scale( )

En action

On peut reprendre le projet en remplaçant les images par des vidéos. 👉 en action

En savoir plus

Dans la vidéo je vous parle de reconnaissance d'images https://www.clarifai.com/

TD : semaine du 9 au 15

Découvrir le DOM ( lien )

Nous corrigerons les TD DOM ( lien )

ex 1 : https://youtu.be/8n8ohTjbbY4?t=192
ex 2 : https://youtu.be/8n8ohTjbbY4?t=654
ex 3 : https://youtu.be/8n8ohTjbbY4?t=900
ex 4 : https://youtu.be/8n8ohTjbbY4?t=1624
ex 5 : https://youtu.be/6aD4VSUMoEg?t=1
ex 6 : https://youtu.be/6aD4VSUMoEg?t=356
ex 7 : https://youtu.be/6aD4VSUMoEg?t=661

ex 8 : https://youtu.be/hPvJVEzEVro

En pratique

Application

Explication

N.B.

Juste pour information, dans le TD5, j'évoque une fonction pour générer une couleur aléatoire :

Voici un code possible:

'#'+'0123456789abcdef'.split('').map(function(v,i,a){ return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');

Pour comprendre ce code ( lien )

En action : lien

Et comme un code n'est jamais unique, voici une autre version En action : lien

Event : Vidéo

https://dupontdom.blogspot.com/p/event-es6.html

Semaine du 2 au 9

Pas de cours nouveau cette semaine.

Je viens de vous rédiger une longue correction du projet avec des problèmes intéressants. lien

Etude de splice

splice retire ou ajoute des éléments d'un tableau.

Son utilisation est fort utile.

En action

let e = [2,3,4],
t = [0,2,2,6,1,3];
function notIn(array1,array2) {
for (let i=0 ; i < array1.length; i++) {
for (let j=0 ; j < array2.length; j++) {
if ( array1[i] == array2[j]){
array2.splice(j--, 1);
}
}
}
}
notIn(e,t);
console.log(t);

Cas des ensembles

Si nous utilisons des ensembles, le code se confond à l'algorithme.

function difference (setA, setB) {
let dif = new Set(setA);
for (let elem of setB) {
dif.delete(elem);
}
return dif;
}

lig.4 : On retire les éléments de l'ensemble A qui sont dans l’ensemble B.

code

Aide au projet

https://dupontdistanciel.blogspot.com/2020/10/aide-au-ds-parcours-du-dom.html

Projet DOM

Ecrire le code pour parcourir l'ensemble des éléments d'une page.

En action Ecrire le code JS qui permet d'afficher le nombre de balises par type !

En action :

Injecter le code dans la console d'une page HTML prise au hasard.

allTag=(a=>{let b=[],c={};return _explore=(a=>{for(let c of a.children)b.push(c.nodeName),_explore(c)}),_explore(a),_getWordCnt=(a=>{return a.reduce(function(a,b){return a[b]=a[b]+1||1,a},[])}),c=_getWordCnt(b),_sort=(a=>{let b=[],c=Object.keys(a).sort((b,c)=>a[c]-a[b]);for(var d of c)b[d]=a[d];return b}),_sort(c)});let a=allTag(document.body);for(var b in a){a.hasOwnProperty(b)&&console.log(`la balise ${b} apparaît ${a[b]} fois `)};

Puis tapez >a;