dupontL2: octobre 2024

Evolution : comparaison

node

element

function buildTable(data) {

var table = document.createElement("table");

var fields = Object.keys(data[0]);

console.log(fields);

var headRow = document.createElement("tr");

fields.forEach(function(field) {

var headCell = document.createElement("th");

headCell.textContent = field;

headRow.appendChild(headCell);

});

table.appendChild(headRow);

data.forEach(function(object) {

var row = document.createElement("tr");

fields.forEach(function(field) {

var cell = document.createElement("td");

cell.textContent = object[field];

if (typeof object[field] == "number")

cell.style.cssText = "background-color:black;color:white;text-align:right;"

row.appendChild(cell);

});

table.appendChild(row);

});

return table;

}

document.body.appendChild(buildTable(PERSON));

function buildTable(data) {

const table = document.createElement("table"),

fields = Object.keys(data[0]);

let template = `<tr><th>${fields[0]}</th><th>${fields[1]}</th><th>${fields[2]}</th></tr>`;

table.insertAdjacentHTML("afterBegin", template);

for (let { name, age, country } of data) {

template = `<tr><td>${name}</td><td>${age}</td><td>${country}</td></tr>`;

table.insertAdjacentHTML("beforEEnd", template);

}

return table;

}

document.body.appendChild(buildTable(PERSON));

code

Méthode : map

See the Pen Dom table for-of by dupont (@dupontcodepen) on CodePen.

like composant

le code sépare maintenant la logique de construction de l'en-tête et du corps du tableau en deux fonctions distinctes : buildTableHeader et buildTableBody.

See the Pen Dom table function by dupont (@dupontcodepen) on CodePen.

like react (pas tout à fait)

🚀https://github.com/dupontdenis/tablelikeReact.git

Projet : 🎞️

🎞️Etudiez une API

API : https://ghibliapi.dev/

Créez un application avec les films du studio

Chaque film a la structure suivante

TD DOM

🪛 TD : Learn DOM

⛏️En action

See the Pen TD 8 DOM event by dupont (@dupontcodepen) on CodePen.

Alternance some news

Hugo écrit :

"Evry me manque aussi parfois et merci à vous car c’est votre discours en L1 sur l’importance de résultats en l1 et l2 pour accéder à l’alternance qui m’a motivé sur ces deux premières années !!! "

Retour d'expérience :

"Pour ce qui est du niveau, je m’attendais à un plus grand écart, il y a une petite remise à niveau en début d’année pour les primo-arrivants, de laquelle sont dispensés les L2 MIDO. Les universités de provenance sont variées (je dirais 50% de L2 Dauphine dont 90% de L2 MIDO)

La MIDO est comme une sorte de prépa maths avec de l’informatique en 3 ans, certains élèves bifurquent vers une MIAGE et au final, je retrouve énormément d’enseignements dispensés à Evry que les élèves dauphinois n’ont pas eu ce qui donne un gros avantage : bases de données, java/objet, logique, algo des graphs (je n’ai pas regardé tous les enseignements du second semestre mais il me semble que c’est pareil avec du réseau nottament ou de la programmation système. Attention cependant, il y a beaucoup de maths (probabilités et algèbre linéaire) et les élèves doivent être à l’aise en maths absolument pour venir ici.

Pour ce qui est de l’algèbre linéaire, nous en avons en L1 portail maths info à Évry, mais pas en L2, la reprise est donc délicate et je pense qu’il faut avoir attesté d’un très bon niveau en algèbre en L1 pour pouvoir reprendre en L3 sur ses restes de L1. "

Cours DOM

Cours 1%

En action

Usecase reduce : Closest

🚀Quelle couleur est la plus proche de 610 ?

const table = new Map([

[0,'yellowgreen'],

[150, 'green'],

[600, 'olive'],

[750, 'red'],

[800, 'black'],

]);

Solution :

const closestKey = [...table.keys()].reduce( (acc, key) => {

return acc = ( Math.abs(acc-value) < Math.abs(key-value) ) ? acc : key

})

console.log(`the closest value of ${value} is ${table.get(closestKey)}`

🚀code

🥷La plus belle utilisation de reduce que je connaisse !

🪛 L'objectif de ce code est de créer et d'imprimer un tableau dont les cellules ont des hauteurs et des largeurs variables, en assurant un alignement correct et une séparation visuelle entre les lignes et les colonnes.