Pages

Réponses aux questions !

💪Les "futurs pro"

installer nodejs/différences avec Chrome




expression-instructions

passage des paramètres 



💪💪les "pro" ex-débutants

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 : 

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


Démo

En injectant mon code directement dans la console d'une page prise au hasard, la structure HTML s'affiche !

Rappels : 

Structure de l'arbre DOM




fonctions utiles :   

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

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 d'une page web !

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