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

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

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

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

Aide aux étudiants