dupontL3alt: avril 2019

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);