Revision !

(function talksAbout(node, _string) {
     if ( --?-- )
        Array.from( node.childNodes ).forEach( function( node ) {
          talksAbout( node, _string  )
         });
     else if ( --?-- )
        if( node.nodeValue.indexOf( _string) > -1 )//.includes
           action;
})(document.body, "Dupont");

Revision

Etudier le code 

const cards = [];
   for(let suit of ['H', 'C', 'D', 'S']) // hearts, clubs, diamonds, spades
       for(let value=1; value<=13; value++)
           cards.push({ suit,value });

Object.keys(cards).forEach(function (c,i) {
 console.log(`carte N°${i} ${cards[c].suit}${cards[c].value}`);
});

for (let c of cards){
   console.log(`${c.suit}${c.value}`);
}


let dictionnary = { 'H': '\u2665', 'C': '\u2663', 'D': '\u2666', 'S': '\u2660',  1: 'A', 11: 'J', 12: 'Q', 13: 'K'};


function cardToString({suit,value}) { // 

    if (!dictionnary[value]==0) value=dictionnary[value];

    return value+dictionnary[suit];
}

Object.keys(cards).forEach(function(c) {
 //console.log(cards[c]);
 console.log(`carte ${cardToString(cards[c])}`);
});

for (let c of cards){
   console.log(`${cardToString(c)}`);
}


console.log(` les cartes du paquet sont : ${cards.map(cardToString)}`);

Trouver le code pour afficher "les figures Rouges : J♥,Q♥,K♥,J♦,Q♦,K♦"

 




const cards = [];
   for(let suit of ['H', 'C', 'D', 'S']) // hearts, clubs, diamonds, spades
       for(let value=1; value<=13; value++)
           cards.push({ suit,value });

Object.keys(cards).forEach(function (c,i) {
 console.log(`carte N°${i} ${cards[c].suit}${cards[c].value}`);
});

for (let c of cards){
   console.log(`${c.suit}${c.value}`);
}


let dictionnary = { 'H': '\u2665', 'C': '\u2663', 'D': '\u2666', 'S': '\u2660',  1: 'A', 11: 'J', 12: 'Q', 13: 'K'};


function cardToString({suit,value}) { // 

    if (!dictionnary[value]==0) value=dictionnary[value];

    return value+dictionnary[suit];
}

Object.keys(cards).forEach(function(c) {
 //console.log(cards[c]);
 console.log(`carte ${cardToString(cards[c])}`);
});

for (let c of cards){
   console.log(`${cardToString(c)}`);
}


console.log(` les cartes du paquet sont : ${cards.map(cardToString)}`);


console.log(`les figures Rouges : ${cards.filter(c => c.value > 10 && (c.suit === 'H' || c.suit === 'D')  ).map(cardToString) }`); 

Révision Array ***

const words = ["Beau", "Balle", "Ange", "Ananas", "Reduce","Action"];

Ecrire la fonction donnant pour chaque première lettre les mots !

" B => Beau,Balle"
" A => Ange,Ananas,Action"
" R => Reduce"

 



const words = ["Beau", "Balle", "Ange",
"Ananas", "Reduce","Action"];


const alphabetical = words.reduce((a, x) => {
if(!a[x[0]]) a[x[0]] = [];
a[x[0]].push(x);
return a; }, {});

Object.keys(alphabetical).forEach(function (key) {
 console.log(` ${key} => ${alphabetical[key]}`);
});

console.log(alphabetical);

Revision

const words = ["Beau", "Balle", "Ange",
"Ananas", "Reduce","Action"];

let l = 'A';

Ecrire une fonction qui donne les mots commençant par la lettre A.

console.log(`Les mots commençant par ${l} dans [ ${words} ] sont : 
** A completer ** `);

 



const words = ["Beau", "Balle", "Ange",
"Ananas", "Reduce","Action"];

let l = 'A';

console.log(`Les mots commençant par ${l} dans [ ${words} ] sont : 
${words.filter((w) => w[0] == l)} `);

console.log(`Les mots commençant par ${l} dans [ ${words} ] sont : 
${words.filter(function(w) {return w[0] == l}) }`);

Révision !

Ecrire une fonction qui teste si tous les nombres d'un tableau sont pairs

const arr1 = [4, 6, 16, 36];
console.log(` Tous les nombres ${arr1} sont pairs ? = **A completer** `);

const arr1 = [4, 6, 16, 36];
// ****************************** appel fonction
function isEven(v){
  return v%2===0
}

console.log(` Tous les nombres ${arr1} sont pairs ?= ${arr1.every(isEven)?"oui":"non" } `);

// ****************************** anonyme fonction
console.log(` Tous les nombres ${arr1} sont pairs ? = ${arr1.every(function(v){
  return v%2===0;
})?"oui":"non" } `);


// ****************************** arrow function
console.log(` Tous les nombres ${arr1} sont pairs ? = ${arr1.every(x => x%2===0)?"oui":"non" } `);

attribut data-

HTML permet d'associer des données directement dans un élément HTML à l'aide des attributs data-*.

Nous pouvons donc stocker et manipuler de l’information directement.

Voici les 7 selecteurs disponibles.

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value=|"foo"] {
  /* Attribute value has this in a dash-separated list somewhere */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

Voici un exemple.

+ infos

Manipulation en JS

La propriété HTMLElement.dataset en lecture seule permet l'accès, à la fois en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément.

chaîne = element.dataset.nomEnCamelCase;
element.dataset.nomEnCamelCase = chaîne;

Notre donc, les deux façons d'obtenir les valeurs stockées dans prof1

<li id="first" data-nom-prenom="denis dupont">prof1</li>

console.log(` ${document.getElementById("first").getAttribute("data-nom-prenom")}`) ;

console.log(` ${document.getElementById("first").dataset.nomPrenom}`) ;

[attribut css]

Voici la liste des Selecteurs CSS.

Selector	Example	Example description
.class	.intro	Selects all elements with class="intro"
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
[attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:invalid	input:invalid	Selects all input elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links