🍒some, every

rappel : destructuration

🍋 map

🍌filter

🍎reduce

Et moi qui vous promet la lune !

Les dessous de JS

Episode 1 : __proto__

Episode 2 : Object.create

Episode 3 : prototype

Episode 4 : new

DOM : les événements en action

Les évènements

Voici une vidéo sur les événements dans le DOM.

cours : https://dupontdom.blogspot.com/p/event-es6.html

Délégation

Pour ceux qui ont regardé la délégation.

👍 Objectif : 1 écouteur pour gérer 6 événements sur des objets différents.

Have fun

Quelle valeur sera affichée par le code suivant ?

function f ( ) {
console.log(` ${x} `)
}
let x = 1;
{
let x = 3;
f ( );
}

Nous verrons l'explication à la rentrée : la portée lexicale

Test 5minutes

const test1 = ['+', 2, 3, 5];

const test2 = ['*',10,10];

const test3 = ['-',100,10];

console.log(cal(test1),cal(test2),cal(test3));

Trouver le code de la fonction cal pour obtenir ce résultat !

Projet

Improve your code

lisez le projet : arbre généalogique

Nous verrons ensuite comment améliorer notre code avec les méthodes sur les tableaux

for of

let tabPers =

[

{

nom: "Dupont",

sex : "f"},

{

nom: "Brusel",

sex : "h"},

{

nom: "Dupont",

sex : "f"},

];

Cas des pointeurs

for (let pers of tabPers){

console.log(pers);

}

Code ⇽

Cas de la déstructuration

for (let { nom } of tabPers){

console.log(nom);

}

A chaque itération, nous aurons :

{

let [ FORMAL_PARAMETERS ] = [ ACTUAL_PARAMETERS ];

{

CODE

}

ainsi

{

let [ { nom } ] = [ { nom: "Dupont",sex:"f" } ];

{

console.log( nom );

}

sera équivalent à

{

let [ { nom:nom } ] = [ { nom: "Dupont",sex:"f" } ];

{

console.log( nom );

}

{

let [ { nom } ] = [ { nom: "Dupont",sex:"f" } ];

{

console.log( nom );

}

code ↨

Cas des tableaux

Trie avec le premier élément du tableau comme critère.

COMPAGNIES.sort( ({ ranges: [A] } , {ranges: [B] }) => A < B );

code

parcours DOM

En action 👉 code à injecteur dans la console.

parcours en profondeur

Nous allons étudier différents codes pour parcourir le DOM !

Je vous rappelle que la structure du DOM est un arbre : voir exemple

code récursif

printDOM = (node, prefix) => {

//action : affichage

for(let nd of node.children) {
   printDOM ( nd, prefix + '-' );
}
}
printDOM(document," ");

Explication

Application

💥L'idée maintenant est de parcourir le DOM à la recherche d'un item contenant un texte.
Si le nœud contient ce string on met le nœud en rouge. Voici une solution sans parcours : code

Remplaçons simplement action par :

if (node.innerHTML.indexOf(string) > -1) {
node.style.color="red";
}
ce code met en rouge le noeud node contenant le mot string.

function find(node, string) {
if (node.innerHTML.indexOf(string) > -1) {
node.style.color="red";
}
for (n of node.children) {
find(n, string);
}
}

console.log(find(document.body, "para"));

Testez le code ;

Passons à un code offrant une plus grande granularité sur les nœuds

Etudier le code suivant

Allez dans

http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html

coller le code suivant dans la console.

function find(node, string) {

if (node.nodeType == document.ELEMENT_NODE) {

for (var i = 0; i < node.childNodes.length; i++) {

if (find(node.childNodes[i], string))

return true;

}

return false;

} else if (node.nodeType == document.TEXT_NODE) {

if (node.nodeValue.indexOf(string) > -1) {

alert("le HTLM contient le nom cherché");

return true;

}

return false;

}

puis tapez

console.log(find(document.body, "evry"));

puis

console.log(find(document.body, "second"));

En action

Pourquoi ce code ne marche pas dans jsbin !

code

Trouver enfin un dernier bug !

Pourquoi ce code ne met pas en rouge l'item trouvé ?

function find(node, string) {
if (node.nodeType == document.ELEMENT_NODE && node.nodeName !=
"SCRIPT") {
for (var i = 0; i < node.childNodes.length; i++) {
if (find(node.childNodes[i], string))
return true;
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
if (node.nodeValue.indexOf(string) > -1) {
//node.classList.add("find");
node.style.color="red";
return true;
}
return false;
}
}

find(document.body, "second");

idée !