deep destructuration

Exemple pour la deep destructuration :lien

Plan

Décomposition : exemple

Allez dans la console de votre navigateur et tapez :
const doc = document.documentElement;
const { clientWidth:largueur } = doc;
console.log( `la largeur de la fenêtre est : ${largueur} ` );

Décomposition : fonction fléchée

Définition

let f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

Paramètres

f([2,3],{x:10});

f = ([a, b], {x: c}) => a + b + c;

// 15 = 2 + 3 + 10

Paramètres

f([2,3]);

([a, b], {x: c} = {x: a - b}) => a + b + c;

// 4 = 2 + 3 + ( 2 - 3 )

Paramètres

f();

f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

// 20 = 10 + 10 + ( 10 - 10 )

décomposition et renomage :

const cours = [
{
langue: "fr",
niveau: {
lu: 2,
ecrit: 5,
parle: 5
},
test: 35
},
{
langue: "eng",
niveau: {
lu: 4,
ecrit: 4,
parle: 4
},
test: 100
}
]

// sans renomage
for (let {langue, niveau: { ecrit} } of cours) {
console.log(`langue : ${langue}
\t\tniveau de l'écrit = ${ecrit}`)

}

// on peut redéfinir les variables
for (let {langue: l, niveau: { ecrit: e } } of cours) {
console.log(`langue : ${l}
\t\tniveau de l'écrit = ${e}`)
}

>

"langue : fr
niveau de l'écrit = 5"
"langue : eng
niveau de l'écrit = 4"

En action :

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

Projet :

Réaliser l'interface d'une calculette

Ce projet perrmet d'appréhender de nombreux aspects de la technologie CSS-grid.

help : https://docs.google.com/document/d/1GFbsAF0xcwWGKeDShq93YsFgIRhxgYWpEZk7i3kdEAA/edit?usp=sharing

Les snippets ?

et ses snippets (lisez l'article)

Travail en DM : CV

Workshop Microsoft

Nous avons mis en place un workshop pour illustrer la mise en ligne de votre CV

Exemple

https://dupontdenis.github.io/CV/

Suivez le guide

Create a resume website in the Browser using HTML, CSS, github.dev, and GitHub Pages

https://github.com/ornelladotcom/resume-website-workshop

L'inspection montre l'utilisation d'une grille CSS.

Cours : grid

Objectifs

https://dupontdenis.github.io/grid-exemple/

Cours

JavaScript

Js : with Mash

Enoncé

Let's start

Mettez un maximum de cerise 🍒 dans votre panier 🧺 énoncé
🍒 = niveau de difficulté,
💻 = connectez vous.

Wait 0ms🍒🍒

Donnez l'affichage du code
const wait = 0;
setTimeout(function () {
console.log('First');
}, wait);
console.log('Second');

Game💻, 🍒

✍️Trouvez un moyen pour déclencher le bouton
https://dupontdenis.github.io/hack-lelia/

Voici ce que vous devriez obtenir, sans le code de sécurité installé par la république !

Opérateurs 🍒

x = 10; y = ++x; z = x++;
Donner les valeurs de x,y,z

Opérateurs🍒

let [x, y] = [,1,f(){}]
Donner les valeurs de x,y

This 🍒🍒🍒

let user = {
  name: "John",
  sayHi: function () {
    console.log(`hi ${this.name}`);
  }
}
✍️Quelle est la valeur de this ?

Find a bug 💻,🍒

Charger le code du simulateur de sélecteurs
https://gist.github.com/dupontdenis/06a9f0519ff11b14994f10386348ad4a

Testez le simulateur, il semblerait y avoir un Bug.
En effet le résultat pour le sélecteur 😡n'est pas celui attendu :
😡p:nth-child(4) {
border : 1px solid;
}
Le simulateur fonctionne parfaitement.
✍️Trouvez une explication à ce résultat.

Code 🥇

let obj = {
  nom: "dupont",
  sex: "m"
};

obj = {
  nom: "dupont",
  sex: "f"
};
✍️Expliquez le déroulement du code en mémoire. Quel mot important dans les langages doit être ici invoqué.

Algorithmique 🍒🍒🍒

✍️Donnez le code de separe qui isole les valeurs du tableau non nulle à droite.
separe([1, 0, 1, 1, 1, 0, 1, 0])
// [0, 0, 0, 1, 1, 1, 1, 1]

Les méthodes sur les structures 🍒

✍️Dessinez le résultat en mémoire du code !
const data = [
    {
        nom: "coka",
        cat: "Boisson",
        prix: 4, }
, {
        nom: "pepsi",
        cat: "Boisson",
        prix: 9, }
,{
        nom: "farine",
        cat: "Epicerie",
        prix: 4,
    },];
const groupBy = (arr, key) =>
  arr.reduce((acc, i) => {
    (acc[i[key]] = acc[i[key]] || [] ).push(i);
    return acc;
  }, {});

const cat = groupBy(data,"cat");

Langage 🍒🍒🍒

✍️A quoi sert toto ! Pourriez-vous lui donner un nom plus approprié ?
Function.prototype.toto= function (obj) {
  const method = this,
  temp = function(){
    return method.apply(obj, arguments)
  };
  return temp;
}

map 🍒🍒

const animals = [{name: "i", age: 3, type: 'dog'},
{name: "ii", age: 6,type: 'cat'}];

const format = Animals.map( function(animal){
animal.type = `${animal.name}-${animal.type}`
return animal
})
Que valent les tableaux animals et format.

Pages

Plan

Décomposition : exemple

Décomposition : fonction fléchée

Définition

Paramètres

Paramètres

Paramètres

Correction lien

Code

Plan du cours

Projet :

Exemple

Suivez le guide

Cours

Js : with Mash

Mettez un maximum de cerise 🍒 dans votre panier 🧺 énoncé🍒 = niveau de difficulté, 💻 = connectez vous.

Wait 0ms🍒🍒

Donnez l'affichage du codeconst wait = 0;setTimeout(function () { console.log('First');}, wait); console.log('Second');

Game💻, 🍒

✍️Trouvez un moyen pour déclencher le boutonhttps://dupontdenis.github.io/hack-lelia/Voici ce que vous devriez obtenir, sans le code de sécurité installé par la république !

Opérateurs 🍒

x = 10; y = ++x; z = x++;Donner les valeurs de x,y,z

Opérateurs🍒

let [x, y] = [,1,f(){}]Donner les valeurs de x,y

This 🍒🍒🍒

let user = { name: "John", sayHi: function () { console.log(`hi ${this.name}`); }}✍️Quelle est la valeur de this ?

Find a bug 💻,🍒

Code 🥇

let obj = { nom: "dupont", sex: "m"};obj = { nom: "dupont", sex: "f"};✍️Expliquez le déroulement du code en mémoire. Quel mot important dans les langages doit être ici invoqué.

Algorithmique 🍒🍒🍒

✍️Donnez le code de separe qui isole les valeurs du tableau non nulle à droite.separe([1, 0, 1, 1, 1, 0, 1, 0]) // [0, 0, 0, 1, 1, 1, 1, 1]

Les méthodes sur les structures 🍒

Langage 🍒🍒🍒

✍️A quoi sert toto ! Pourriez-vous lui donner un nom plus approprié ?Function.prototype.toto= function (obj) { const method = this, temp = function(){ return method.apply(obj, arguments) }; return temp;}

map 🍒🍒

const animals = [{name: "i", age: 3, type: 'dog'}, {name: "ii", age: 6,type: 'cat'}];const format = Animals.map( function(animal){ animal.type = `${animal.name}-${animal.type}` return animal})Que valent les tableaux animals et format.

Mettez un maximum de cerise 🍒 dans votre panier 🧺 énoncé
🍒 = niveau de difficulté,
💻 = connectez vous.

Donnez l'affichage du code
const wait = 0;
setTimeout(function () {
console.log('First');
}, wait);
console.log('Second');

✍️Trouvez un moyen pour déclencher le bouton
https://dupontdenis.github.io/hack-lelia/

Voici ce que vous devriez obtenir, sans le code de sécurité installé par la république !

x = 10; y = ++x; z = x++;
Donner les valeurs de x,y,z

let [x, y] = [,1,f(){}]
Donner les valeurs de x,y

let user = {
name: "John",
sayHi: function () {
console.log(`hi ${this.name}`);
}
}
✍️Quelle est la valeur de this ?

let obj = {
nom: "dupont",
sex: "m"
};

obj = {
nom: "dupont",
sex: "f"
};
✍️Expliquez le déroulement du code en mémoire. Quel mot important dans les langages doit être ici invoqué.

✍️Donnez le code de separe qui isole les valeurs du tableau non nulle à droite.
separe([1, 0, 1, 1, 1, 0, 1, 0])
// [0, 0, 0, 1, 1, 1, 1, 1]

✍️A quoi sert toto ! Pourriez-vous lui donner un nom plus approprié ?
Function.prototype.toto= function (obj) {
const method = this,
temp = function(){
return method.apply(obj, arguments)
};
return temp;
}

const animals = [{name: "i", age: 3, type: 'dog'},
{name: "ii", age: 6,type: 'cat'}];

const format = Animals.map( function(animal){
animal.type = `${animal.name}-${animal.type}`
return animal
})
Que valent les tableaux animals et format.