Pages

Préparation au DS

JS splice en action

Etude de splice


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


Son utilisation est fort utile. 


En action


  1. let e = [2,3,4],
  2.      t =  [0,2,2,6,1,3];

  3. function notIn(array1,array2) {

  4.   for (let i=0 ; i < array1.length; i++) {

  5.      for (let j=0 ; j < array2.length; j++) {
  6.         if ( array1[i] == array2[j]){
  7.            array2.splice(j--, 1);
  8.         }
  9.      }
  10.   }
  11. }

  12. notIn(e,t);

  13. console.log(t);

Cas des ensembles

Si nous utilisons des ensembles, le code se confond à l'algorithme.
  1. function difference (setA, setB) {
  2.   let dif = new Set(setA);
  3.   for (let elem of setB) {
  4.     dif.delete(elem);
  5.   }
  6.   return dif;
  7. }
lig.4  : On retire les éléments de l'ensemble A qui sont dans l’ensemble B.

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;



Rappels

 Élément

Voici le vocabulaire a connaitre pour se déplacer dans le DOM/élément !


 Node


On pourra utiliser également le vocabulaire suivant au niveau Nœud  !




Parcours du DOM

Ecrire une fonction de parcours du DOM : printDomEle



HTML
utiliser hemmet pour générer le code html : 

<body>
article{article $}>section{section $}*2>p{para $}*3(puis Tab)
</body>


JS
fonctions utiles :   console.groupCollapsed(); console.groupEnd();
on utilise children pour avoir les enfants d'un nœud élément.
on utilise for of pour réaliser une boucle

printDomEle(document.body);


Voici le résultat que vous devez obtenir :

Projet : améliorer son style !

projet

Vidéo 1H /

https://dupontdistanciel.blogspot.com/