Pages

🥷DM : Array

  ...

🍕Base des données

const pizzas = [

    { name:"queen", ingredients: ["🐷","🍄","🍅","🧀"] },

    { name: "cheese", ingredients: ["🧀", "🍅"]},

    { name: "oriental", ingredients: ["🍅","🐑","🍄","🌶"]},

    { name: "royal", ingredients: ["🍅","🌵"]},

  ];

🪛 Questions

Trouvez les pizzas avec du 🧀

Trouvez les pizzas avec du 🍅

Trouvez les pizzas avec un ingrédient quelconque (soit du "🍅" ou du "🧀" ou du "🐑" ...)

Trouvez les pizzas avec au moins un ingrédient parmi une liste d'ingrédients

Trouvez les pizzas avec tous les ingrédients d'une liste

Trouvez les pizzas avec viande

Ajoutez pour chaque pizza le type (🐮ou ☘️)

Trouvez l'ensemble des ingrédients  "🐷","🍄","🍅","🧀","🐑","🌶","🌵"

Trouvez pour chaque ingrédient le nombre de pizzas l'utilisant ,"🧀":2 …

Trouvez pour chaque ingrédient la liste des pizzas l'utilisant

Ajoutez le prix de chaque pizza

prices = new Map([ ["🍅", 1], ["🐷", 2], ["🌶",2], ["🍄", 5], ["🧀", 5], ["🐑", 2], ["🌵", 10]]);


TD array !

🪛 start with array

🪛🪛 map en action


Cours Array

Objectif du cours

1. **Function Style, Method Style**

 The main difference between the function style and the use of the `filter()` method lies in the programming paradigm they represent.


1. **Function Style**: The function style represents the procedural programming paradigm. In this style, you write a sequence of commands for the computer to perform. The function `filterArray` that we wrote earlier is an example of this. It uses a `for` loop to iterate over the array and an `if` statement to check each element against the test function. This style gives you more control over the details of how the array is processed.

function filterArray(array, test) {
  let result = [];
  for (let i = 0; i < array.length; i++) {
    if (test(array[i])) {
      result.push(array[i]);
    }
  }
  return result;
}

let isEven = (num) => num % 2 === 0;
let evenNumbers = filterArray(array, isEven);

2. **Method Style**:

 The method style represents the functional programming paradigm. In this style, you use built-in array methods like `filter()` to process the array. The `filter()` method abstracts away the details of how the array is processed, allowing you to focus on what you want to do (filter the array) rather than how to do it. This style can lead to more concise and readable code.

let evenNumbers = array.filter(num => num % 2 === 0);

In general, the method style is considered more "modern" and is often preferred in JavaScript, but both styles have their uses and can be appropriate in different situations.


Test

Pour tester le code définisez un tableau de nombres.

const array = [2,3,4,6,8,10];


 lien : https://javascript.info/array-methods


Cours

TD arbre

Cours parcours du DOM

🚀Cours


👿Test

Nous allons étudier différents codes utilisant un parcours récursif.

🪛L'idée 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.

Nous allons nous inspirer de la structure du code récursif pour parcourir le DOM

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


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.


Bilan


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 ;

  


Analyse : 

que vaut document.body.innerHTML.indexOf("second")
testez alors

       if (document.body.innerHTML.indexOf("second") > -1) {

         document.body.style.color="red";}

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


🆘Etudier le code suivant

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



🪛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.style.color="red"; // ou node.classList.add("find");
         return true;
       }
        return false;
    }
}

find(document.body, "second");

🆘idée !

DS :

 

 🪛On désire par courir le DOM pour mettre en rouge le paragraphe contenant "second".

See the Pen find bug by dupont (@dupontcodepen) on CodePen.

🆘Corriger le bug.

Code to use

🚀Load localy the db


Clonez le code 

 https://github.com/dupontdenis/Cours-L2-method.git


Modifiez le fichier test/yourCode.mjs



Dans le terminal lancez la commande> node main.js


Ecrire le code pour obtenir les produits dont le nom commence par "p" et qui sont en stock.



Plus d'infos »

Cours JS

🥷 https://javascript.info/


Browser: Document, Events, Interfaces



Youtube : JS

 

Udacity

https://classroom.udacity.com/courses/ud803




Data base

https://gist.github.com/dupontdenis/b2e5e1b7460c239b39deb76f8d458908


Projet dom

 

PROJET / Parcours de l'arbre

See the Pen parcoursGenator by dupont (@dupontcodepen) on CodePen.
Gi


Projet DOM

🪛Ecrire le code pour parcourir l'ensemble des éléments d'une page.

🚀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 `)};
Plus d'infos »

Cours 1 : template String - Destructuration

 

Site

 



Inscription à : Articles (Atom)