Les revisions

Pizzas

Destructuration

const words = [1,2,2,1,5];

let minMaxDistSumMoyNb = words.reduce((a, x) => {

let [m,M] = [Math.min(a[0],x),Math.max(a[1],x)];

let sum = a[3]+x;

let nb = a[5]+1;

let moy = sum/nb;

return [m,M,M-m+1,sum,moy,nb]

}

,[Number.MAX_VALUE,Number.MIN_VALUE,Number.MIN_VALUE,0,0,0]);

console.log(minMaxDistSumMoyNb);

code

Amélioration

const words = [1,2,2,1,6];

let minMaxSumMoyNb = words.reduce(([min,max,sum,_,nb], x) => {

let [m,M] = [Math.min(min,x),Math.max(max,x)];

sum = sum+x;

nb = nb+1;

return [m,M,sum,sum/nb,nb]

}

,[Number.MAX_VALUE,Number.MIN_VALUE,0,0,0]);

const [min,max,sum,moy,nb] = minMaxSumMoyNb

console.log(min,max,sum,moy,nb);

TD : reduce & Co

Reduce à fond la forme !

Prérequis :

reduce 1 📉

reduce 2

reduce 3

reduce 4

reduce 5 📈

En action :

const words = [10,2,2,1,10,10,10,10,10];

const o = words.reduce((a, x) => {

if (!a[x]) a[x] = 0;

a[x]=a[x]+1;

return a},{});

code

les méthodes sur les tableaux

Some, every

rappel : destructuration

map

reduce

filter

MA FONCTION filter

Filtre et map

Etude de cas et Projet

Class en action

https://github.com/dupontdenis/Class-lesSoldes.git

Création d'un quizz !

Analyse des structures

Clonez le code

https://github.com/dupontdenis/Quiz-App-Master-test-1.git

https://dupontdenis.github.io/Quiz-App-Master/game.html

Souriez : projet

Clonez https://github.com/dupontdenis/takepicture.git

Lancez dans un terminal le serveur avec la commande :

node app

Dans votre navigateur allez http://localhost:3000/

myForEach

	let words = ["Beau", "Ange", "Ananas", "Ballon"];


	function forEach(array, fx) {
	for (var i = 0; i < array.length; i++)//for of
	fx(array[i], i , array);
	}


	console.log('----- UpperCase ------');
	let upperCase = function(word,i,t){
	t[i]= t[i].toUpperCase();
	}
	forEach(words,upperCase);


	console.log('----- start A -------');
	//afficher true si commence par A

	let beginWithA = function(word,i,t){
	t[i]= /^A/.test(word)?"True":"False"
	}
	forEach(words,beginWithA);

	words = ["Beau", "Ange", "Ananas", "Ballon"];
	let includeE = function(word,i,t){
	t[i]= /e/.test(word)?"e":"-"
	}
	forEach(words,includeE);

	words = ["Beau", "Ange", "Ananas", "Ballon"];
	let replaceE = function(word,i,t){
	t[i] = word.replace('e', '--e--')
	}
	forEach(words,replaceE);

	const dom = ["data-number","data-operator"]
	const dashToCamelCase = ( str,i,t ) => {
	t[i] = str.replace(/-./g, function ($) { return $[1].toUpperCase(); });
	}

	dom.forEach(dashToCamelCase);

view raw forEach in action hosted with ❤ by GitHub

	let words = ["Beau", "Ange", "Ananas", "Ballon"];

	console.log('----- Affiche ------');
	//afficher les mots
	for (let i=0; i<words.length; i++){
	console.log(words[i])
	}
	console.log('----- nb de chars ------');

	//afficher la taille
	for (let i=0; i<words.length; i++){
	console.log(words[i].length)
	}
	console.log('----- UpperCase ------');
	//afficher en majuscule
	for (let i=0; i<words.length; i++){
	console.log(words[i].toUpperCase())
	}
	console.log('----- include g ----');
	//afficher si true la lettre "g"
	for (let i=0; i<words.length; i++){
	console.log(words[i].includes("g")?"True":"False");
	}

	console.log('----- include b ----');
	//afficher si true la lettre "b"
	for (let i=0; i<words.length; i++){
	console.log(words[i].toLowerCase().includes("b")?"True":"False");
	}

	console.log('----- start A -------');
	//afficher si true commence par A
	for (let i=0; i<words.length; i++){
	console.log(/^A/.test(words[i])?"True":"False")
	}

	words = ["data-number","data-operator"]

	//affiche dashToCamelCase
	for (let i=0; i<words.length; i++){
	console.log(words[i].replace(/-./g, function ($) { return $[1].toUpperCase()}));
	}

view raw improveYourSkill.js hosted with ❤ by GitHub

tableau

Le littéral tableau

Objectifs

Projet (finir l'interaction)

Plan

DOM : TD

Element

Etude : événement

Repérer dans le code l'écouteur sur l'événement input.

input.addEventListener("input", ACTION)

MASTER CHEF 🐱‍🚀

Projet : améliorer son style !

projet

DOM / Etude de code pour le projet calculette !

HTML

	// http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html
	const myHTML = `<button data-number="">1</button>
	<button data-number="">2</button>
	<button data-number="">3</button>
	<button data-operation="">*</button>`

	document.body.innerHTML=myHTML;

	const numberButtons = document.querySelectorAll('[data-number]');

	let operand = "";
	numberButtons.forEach(function(button){
	button.addEventListener('click', function(){
	operand += button.innerText;
	document.body.insertAdjacentHTML("beforeend",`<p>🧮${operand}</p>`)
	})
	})

view raw dom.js hosted with ❤ by GitHub

dupontL2

Pages