Assimilation !

ATTENTION : ne pas utiliser jsbin pour tester les réponses du QUIZZ. 

Jsbin ajoute votre code js dans un script, ce qui ajoute un élément dans le dom. Vous pourrez tester ce problème avec ce code jsbin.

Comparer le résultat en utilisant ce fichier et en tapant dans la console F12 :
console.log(document.body.lastElementChild.nodeName); 

JSbin affiche : Script
alors que la console dans le fichier affiche :  P

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