dupontL3alt: 2019

A maîtriser

Voici des exemples de code ⤯

Surprise ?

Qui va comprendre le premier(e).

https://www.vincennes.fr/sites/default/files/bulletin/pdf/VI756.pdf

transposé

const A = [
[1,3,5],
[2,4,6]
];

let At = ??;

console.log(`|${A.join("|\n|")}| `) ;

console.log(`|${At.join("|\n|")}| `) ;

Class

concat !

... en action

Voici un élégant moyen de remplacer concat.

const T1 = ["Dupont", "Whells", "toto"];

const T2 = ["Dupond", "Whells", "titi"];

console.log(T1);
console.log(...T1);
console.log( [...T1 , ...T2] );

const promos = [
{ promo: "L3miage", etudiants: ["Dupont", "Whells", "Toto"]},
{ promo: "L2miage", etudiants: ["Dupond", "Pathé"]},
{ promo: "M1miage", etudiants: ["Audu", "Baby"]},
]

const tousEtudiants = promos.?

console.log(tousEtudiants.sort());

GOOGLE and JS

Vidéo sur les nouveautés Google I/O ’19

Projet final à rendre

MVC à fond la forme

Projet

Comprendre le code de l'article sur la délégation.

Modifier le code de la fonction délégation pour pouvoir corriger le problème du Click sur le span !

propagation evt

lire l'article

Environnement

Sur votre machine installer nodeJS et un éditeur (visualStudio).

Quelques commandes

Projet : PRO CODE

Objectif

Vous récupérez d'une base de données (ou autres) un tableau d'objets sur lequel vous allez faire des requêtes côté Front-End.

La base de données est visible ici : base JSON

Chaque objet est du type

"name": "Carolus Haverbeke", 
"sex": "m", 
"born": 1832, 
"died": 1905, 
"father": "Carel Haverbeke", 
"mother": "Maria van Brussel"

➤ Ecrire un programme permettant d'obtenir les résultats suivants :

hommes = 21
Age des hommes = 73,34,90,72,47,91,28,40,67,66,63,45,68,75,71,45,54,92,41,60,73
Moyenne age 62
Année de naissance min =1535
Année de naissance max =1907
Année de naissance moyenne=1722

Fichier de test

code à compléter

En action

Parcours du DOM

Objectif

If you’re learning JavaScript, the first thing you should learn (after understanding the basics like variables, functions, etc.) is to alter the DOM. This is one of the things you do daily as a frontend developer.

Projet : Afficher le DOM en le parcourant.

Vous devez écrire un programme Affichant les balises d'une page HTML.

Exemple :

Allez dans n'importe quel site.
Ouvrez la console (F12)
Injectez Votre code dans la console
La hiérarchie de votre page doit s'afficher ! COOL !

Démo

En injectant mon code directement dans la console, la hiérarchie de la page s'affiche !

Rappels :

Structure de l'arbre DOM

fonctions utiles :

console.groupCollapsed();
console.groupEnd();
noeud.children pour avoir les enfants d'un noeud.
On utilise for of pour réaliser une boucle.

Cours

https://dupontdom.blogspot.com/p/3-deplacer.html

Objectif final :

A la fin du cours : pouvoir compter le nombre de balises de chaque type :

Exemple : mettre dans la console( F12), le code suivant et exécuter :

Code à copier/coller dans la console :

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)&&document.body.insertAdjacentHTML("afterbegin",`<p>la balise ${b} apparaît ${a[b]} fois `);allTag(document.body);