Pages

DOM de base

Fonctions de base à tester dans la console de http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html


🆒Sélectionnez tous les paragraphes

  1. const articles = document.querySelectorAll("p");

Comptez le nombre de paragraphes

  1. const articles = document.querySelectorAll("p");
  2. console.log(articles.length)

Une boucle sur la selection des paragraphes

  1. const articles = document.querySelectorAll("p");
  2. for (let article of articles) {
  3.         console.log(article.innerText.split(" ").length); // count words
  4. }

      1️⃣Ajouter une classe à tous les paragraphes

      1. const articles = document.querySelectorAll("p");
      2. for (let article of articles) {
      3.     article.classList.add("second");
      4. }

      🪛Ajoutez un événement click (voir amélioration par délégation)

      1. const articles = document.querySelectorAll("p");
      2. for (let para of articles) {
      3.   para.addEventListener("click", () => {
      4.     para.classList.add("selected");
      5.   });
      6. }
      🥷Somme des valeurs contenu dans l'attribut data-code
      1. let value = 0;
      2. for (let para of articles) {
      3.   value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
      4. }
      5. console.log(value)

      Affichez le résultat dans un div.
      1. let value = 0;
      2. for (let para of articles) {
      3.   value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
      4. }
      5. document.querySelector("div").innerText = value

      🥇La délégation 

      1. const fun = function (event) {
      2.   const targetElement = event.target; // p or em

      4.   if (targetElement.closest("p")) {
      5.     let para = targetElement.closest("p");
      6.     para.classList.toggle("selected");
      7.   }
      8. };

      10. const parent = document.querySelector(".container");
      11. parent.addEventListener("click", fun, false);

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

      Aide au projet

      https://docs.google.com/document/d/11bobArd1BY3zqPNWiPHwJYBLLwtlmrMGdGiqPaahBqM/edit?usp=sharing

      fact

      Facile ! 

      n! = n* n-1!


      Suivez en direct les appels des fonctions !

      Js à fond la forme

      On s’intéresse à un algorithme récursif qui permet de rendre la monnaie à partir d’une liste donnée de valeurs de pièces et de billets.

      Le système monétaire est donné sous forme d’un tableau de données const pieces = [100, 50, 20, 10, 5, 2, 1]. On supposera qu’il n’y a pas de limitation quant à leur nombre.

      On cherche à donner le tableau de pièces à rendre pour une somme donnée en argument. le tableau de pièce est donné en second argument. Le troisième paramétre et l'index sur le tableau pieces.

      Donnez la fonction rendu_glouton qui implémente cet algorithme et renvoie le tableau des pièces à rendre.

      Exemples des appels récursifs
      legende : ▲reste sur la même pièce, ▶ change de pièce.
      rendu_glouton(68, [ ], 0)
[50, 10, 5, 2, 1]
      Voici la liste des appels
      100€ rendu_glouton(68, [], 0)
50€ ▶ rendu_glouton(68, [], 1)
50€ ▶ ▲ rendu_glouton(18, [50], 1)
20€ ▶ ▲ ▶ rendu_glouton(18, [50], 2)
10€ ▶ ▲ ▶ ▶ rendu_glouton(18, [50], 3)
10€ ▶ ▲ ▶ ▶ ▲ rendu_glouton(8, [50,10], 3)
5€ ▶ ▲ ▶ ▶ ▲ ▶ rendu_glouton(8, [50,10], 4)
5€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ rendu_glouton(3, [50,10,5], 4)
2€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ rendu_glouton(3, [50,10,5], 5)
2€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ ▲ rendu_glouton(1, [50,10,5,2], 5)
1€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ ▲ ▶ rendu_glouton(1, [50,10,5,2], 6)
1€ ▶ ▲ ▶ ▶ ▲ ▶ ▲ ▶ ▲ ▶ ▲ rendu_glouton(0, [50,10,5,2,1], 6)
✕ FIN ✕

      rendu_glouton(300, [ ], 0)
[100, 100, 100]
      Voici la liste des appels
      > rendu_glouton(300, [], 0: 100€ )
100€ rendu_glouton(300, [], 0)
100€ ▲ rendu_glouton(200, [100], 0)
100€ ▲ ▲ rendu_glouton(100, [100,100], 0)
100€ ▲ ▲ ▲ rendu_glouton(0, [100,100,100], 0)
✕ FIN ✕

      le troisième paramétre correspond à l'indice de recherche dans le tableau des pieces. 

      Fixant sa valeur à 0, c'est en cela que l'algorithme est glouton, on recherche le plus gros billet à rendre à chaque itération. Ainsi rendre 100€ c'est 1 billet de 100 et pas 2 billets de 50 ou 10 billets de 10.


      JS :

       La fonction recherche prend en paramètres deux chaines de caractères gene et seq_adn et renvoie True si on retrouve gene dans seq_adn et False sinon. 

      Compléter le code JS ci-dessous pour qu’il implémente la fonction recherche.

      const recherche = function (gene, seq_adn){
    const n = seq_adn.length;
    const g = gene.length;
    let trouve = false;
    let i = ❓

    while (i < 🚧 && trouve == 🔧){
        let j = 0;
        while (j < g && gene[j] == seq_adn[i+j]){
            ⚙️
        }
        if (j == g ){
                trouve = true
        }
        😍
    }
    return trouve
}


console.log(recherche("AATC", "GTACAAATCTTGCC"));
console.log(recherche("AGTC", "AAGTCGCC"))
      Donnez les valeurs de 😍⚙️🔧🚧❓

      Last call

       



      Plan

      1. Définition des variables et fonctions.
      2. DOM
      3. 🚧Interaction 🚧
      4. Améliorations


      https://github.com/dupontdenis/calculette.git



      Plan

      1. Définition des variables et fonctions.
      2. 🚧 DOM 🚧
      3. Interaction
      4. Améliorations
      5. Objet
      6. Design Pattern

      Training JS

      🚧  Exercices JS


      Evaluer surprise ! 

      const action = function (tab) {

        let i = 0
          , j = tab.length - 1;
        while (i < j) {
          if (tab[i] <= 0) {
            i++
          }
          else {
            let tmp = tab[i];
            tab[i] = tab[j];
            tab[j] = tmp;
            // [tab[j], tab[i]] = [tab[i], tab[j]]
            j--
          }
        }

        return tab
      }

      const surprise = action([-1, 1, -2, 10, 3])
      console.table(surprise)
      Inscription à : Articles (Atom)