Pages

Don't be a 🦜


let greaterThanOne = [];
for (let i = 0; i < array.length; i++) {
  if (array[i] > 1) {
    greaterThanOne.push(array[i]);
  }
}
console.log('Values greater than 1:', greaterThanOne);

// 🦜
let greaterThanTwo = [];
for (let i = 0; i < array.length; i++) {
  if (array[i] > 2) {
    greaterThanTwo.push(array[i]);
  }
}
console.log('Values greater than 2:', greaterThanTwo);

// 🦜


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

let greaterThanOne = findValuesGreaterThan(array, 1);        
let greaterThanTwo = findValuesGreaterThan(array, 2);        
let greaterThanVelue = findValuesGreaterThan(array, value);  

🥷How to improve our programming style ?

As an AI programming assistant, I don't have personal opinions or feelings.
However, I can say that asking such a question shows your understanding
of functional programming concepts and your ability to think abstractly about code,
which are important skills in software development. Keep asking questions and exploring different ways to solve problems
- this is a great way to learn and improve as a programmer!




Passons maintenant aux questions suivantes : 




🦜Quels codes donnent les nombres : 
  1. pairs,
  2. impairs,
  3. positifs,
  4. négatifs
  5. multiples de 2
  6. et patati et patata !

Cherchez les valeurs uniques : pas si unique !

 

Solution du DM : unique !

 Définir une fonction unique recherchant les valeurs uniques d'un tableau.


  1. const t = [2,0,2,0,2,3];
  2. const u = unique(t);

💥Proto de SuperDupont


Unique !

Nous allons donner un ensemble de fonction recherchant les valeurs uniques d'un tableau.

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

  3. unique(t);
Nous découvrirons les méthodes et propriétés suivantes :
Array.isArray
array.length
array.splice
array.indexOf
array.push
array.includes

Nous pourrons comparer le temps d'exécution des différentes propositions de code.
  1. let t = [2,0,2,0,2,3];

  3. console.time("time");
  4. unique(t);
  5. console.timeEnd("time");

Nous pourrions également integrer un test élémentaire sur le tableau en argument
  1.   if (!Array.isArray(arr)) {
  2.     throw new TypeError('array-unique expects an array.');
  3.   }
Les écritures suivantes ne sont pas commentées
  1. function unique(t){
  2.   let cur = t.length;
  3.   while (--cur){

  5.   for (let i=0; i< cur; i++){
  6.       if (t[i] == t[cur]){
  7.           t.splice(cur,1);
  8.           break;
  9.       }
  10.   }
  11.   }
  12. }
code
  1. function unique(arr) {
  2.   let i = -1;
  3.   while (i++ < arr.length) {
  4.     var j = i + 1;

  6.     for (; j < arr.length; ++j) {
  7.       if (arr[i] === arr[j]) {
  8.         arr.splice(j--, 1);
  9.       }
  10.     }
  11.   }
  12.   return arr;
  13. };
code
  1. function unique(array) {
  2.   let passed = [];
  3.   for (let i=0 ; i < array.length; i++) {
  4.     if (array.indexOf( array[i]) === i)
  5.       passed.push(array[i]);
  6.   }
  7.   return passed;
  8. }

Dans quelques temps, nous apprendrons des méthodes sur les tableaux très utiles

  1. array.reduce
  2. array.filter

  1. function unique(t){
  2.   
  3.   let u = t.reduce(function(a,c){
  4.     if (!a.includes(c)){
  5.       a.push(c)
  6.     }
  7.     return a;   
  8.     },[])
  9.   return u;
  10. }
code
code
  1. function unique(value,index,tab){
  2.   return tab.indexOf(value) === index;
  3. }

  5. console.time("while")
  6. t = t.filter(unique);
  7. console.timeEnd("while");

Finalement, SuperDupont pourra toujours nous impressionner par l'utilisation de nouveaux
 types d'objet SET et MAP.
  1. console.time("while")
  2. let v = [...new Set(t)];
  3. console.timeEnd("while");

Mais que dire des tableaux contenant des objets ! 
  1. const T = [
  2.     { name: 'dupont', id:22 },
  3.     { name: 'dupont', id:20 },
  4.     { name: 'dupond', id:21 },
  5.     { name: 'dupond', id:21 },
  6.   ];
  7. const unique = [];
  8. const map = new Map();
  9. for (const item of T) {
  10.     if(!map.has(item.id)){
  11.         map.set(item.id, true);    // set any value to Map
  12.         unique.push({
  13.             id: item.id,
  14.             name: item.name
  15.         });
  16.     }
  17. }
  18. console.log(unique)
Voici ce qui mettrait fin à notre discussion : 
L'implémentation de unique dans lodash :

Il y a également l'incroyable fonction : uniqBy ! 
Regardez cet exemple.
import { uniqBy } from 'lodash'; // code nécessaire pour importer la fonction

let array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' }
];

let uniqueArray = uniqBy(array, 'id');

console.log(uniqueArray);
// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

DS résultats

 infos

  .

🍕Base des données

const pizzas = [

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

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

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

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

  ];


Questions

Trouvez les pizzas avec du 🧀

Trouvez les pizzas avec du 🍅


vers pythontutor

Exercices de JS pour se former

🛠 Exercices JS

Rendre la monnaie !

//MAP a new objet

Here are some of the most commonly used methods provided by the Map object in JavaScript:

  1. set(key, value): Adds or updates an element with a specified key and a value to a Map object.

  2. get(key): Returns the value associated to the key, or undefined if there is none.

  3. size: Returns the number of key/value pairs in the Map object.

  4. Itération over a Map object

aMap.forEach((value, key) => {
    console.log(`$${key}: ${value}`);
});

🪛 en action pour rendre la monnaie !



/**
 * Calculates the change for a given amount.
 *
 * @param {number} amount - The amount for which to calculate the change.
 * @returns {Map<number, number>} - A map containing the denominations as keys and the count of each denomination as values.
 */
function calculateChange(amount) {
  const denominations = [100, 20, 10, 5, 1];
  let change = new Map();

  for (let bill of denominations) {
    let count = Math.floor(amount / bill);
    if (count > 0) {
      change.set(bill, count);
      amount -= bill * count;
    }
    if (amount === 0) {
      break;
    }
  }

  return change;
}

// Generate a random number between 1 and 1000
let randomAmount = Math.floor(Math.random() * 1000) + 1;
let text = `Random amount: ${randomAmount}`;

console.log(text);

let change = calculateChange(randomAmount);

// Calculate the number of tab spaces needed
let tabs = Math.ceil(text.indexOf(":") - 1); // Each tab is approximately 4 spaces

// Display the change
change.forEach((value, key) => {
  console.log(
    `${" ".repeat(tabs)}${value}: ${key >= 5 ? "bill" : "coin"}${
      value > 1 ? "s" : ""
    }\t${key}${key >= 5 ? "💶" : "🪙"}`
  );
});




 


Programmation récursive

Rendre la monnaie peut être resolu par une programmation recursive : 


DS / 30 minutes

 A) Sélectionnez les deux premiers <p> avec quatre types de sélecteurs différents.

<p id="d1" class="s">p 1</p>

<p id="d2" class="s">p 2</p>

<p id="d3">p 3</p>

<p id="d4">p 4</p>






🆘Utilisez le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/


B) Donnez les codes HTML et CSS pour la création d'un trombinoscope trois étudiants par ligne.


🆘https://dupontl1.blogspot.com/2024/02/flex-de-la-theorie-la-pratique.html

Il suffit de simplifier le code (notezz le fake des images avec 

🖼️https://testgithubdupont.github.io/row-3-cols/

🚧https://github.com/testgithubdupont/row-3-cols.git


C) Indiquez les lignes sélectionnées pour chaque sélecteur



  1.  <article>

  2.  <p title="Strophe1" id="st"></p>

  3.  <header>

  4.  <h1></h1>

  5.  <h2></h2></header>

  6.  <p class="refrain"></p>

  7.  <p title="Str4" id="str"></p>

  8.  <p class="rn" id="r"></p></article>

  9.  <footer> date (1880 - 1918) </footer>

sélecteur

lig.

p + p


p:nth-child(2)


article   :last-child:not(p)


[class $="n"]


article   :nth-of-type(-n+1)


🚧Préparation au DS : https://dupontl1.blogspot.com/2024/02/preparation-au-ds.html

🥷Attention au HTML

Avant formatage


Après formatage

🆘Utilisez le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/

D) Donnez la représentation du code pour 2 <div> dans un conteneur.

.conteneur { display:flex; flex-wrap: wrap }

.conteneur div { flex: 1 0 100px; }



Vous pouvez supprimer deux blocs par l'inspection


Cas conteneur   width<100px

Cas conteneur 100px<width<199px

Cas width>=200px

DM du WE !

const array=["dupont", "dupond", "dupont", "dupond", "dupont", "dupond", "dupont"];

 const separe = function(array){
   
   let i = 0
      ,j = array.length-1;
    while (i < j) {
        if (array[i] == "dupond"){
            i++
        }
        else{
          let tmp = array[i];
          array[i] = array[j];
          array[j] = tmp;
          j--
        }
    }
    return array
 }

console.table(separe(array))

🥷Que vaut array ?



Inscription à : Articles (Atom)