Test / CSS + Selecteurs

On dispose de 4 blocs dans un conteneur ! Dessiner le résultat.

.conteneur {

display: grid;

grid-template-columns: repeat(4, 1cm);

grid-auto-rows: 1cm;

grid-gap: 0.1cm;

grid-auto-flow: row;

}

div:nth-child(1) {

grid-column: 1/3;

grid-row: 1/3;}

div:nth-child(2) {

grid-column: 3/5;

grid-row: 2/5;}

div:nth-child(3) {

grid-row-end: span 2;

}

div:nth-child(4) {

grid-row: 2;

}

Indiquez les lignes sélectionnées par chaque sélecteur.

<h1>Heading L.1</h1> <article> <p>First paragraph</p> <p>Second paragraph</p> </article> <article> <div>div element</div> <p>First paragraph</p> </article> <p data-cont="last">paragraph</p>	sélecteurs	ligne(s)
	p:first-child
	body > p
	article + p
	article :nth-child(3)
	[data-cont="last"]

Donnez le code CSS (grid) pour créer le drapeau français.

Le html est imposé.

</div>

CSS / revoir

Grid : https://mozilladevelopers.github.io/playground/css-grid/02-first-grid/

Grid

La technologie CSS Grid est une révolution dans la conception de sites !

Grid est intégrée progressivement par les leaders du marché.

Notion de grille

Pensez aux villes américaines, voici un plan de Manhattan dans les années 18xx.

Pour réaliser cette grille, on définit :

des zones, ce qui définit des quartiers.
puis on y affecte des élements, ce qui place les maisons !

Ne perdons pas une minute et passons à l'action en créant notre première grille.

En action

Allez dans le simulateur de grid ( simu ).

Nous allons:

définir un plan,
placez notre code HTML dans les différentes zones définies par le quadrillage.

Définir un plan

dans le conteneur du simulateur tapez

.conteneur {
display :grid;
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}

Ce code définit le quadrillage suivant :

Définir le placement

.conteneur {
display :grid;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}

Associer le placement

Il ne reste plus qu'à associer le code HTML à une zone en indiquant tout simplement son nom.

Par exemple : it2 sera associé à la zone nav.

#it2 {
grid-area: nav;
}

Je vous laisse compléter le code (... c'est si facile) pour obtenir une vision simplifiée de la topologie du site.

JS / revoir

Sujet d'examen

Sujet 2025

Retour sur la destructuration

Rappels destructuration sur les objets

const obj = { name:"dupont" }
const copyAdr = obj;

const copyVal = {...obj};

copyAdr.name = "cool"
console.log(obj,copyAdr,copyVal)

Equivalent pythontutor (l'opérateur ... est remplacé par Object.Assign)

Rappels destructuration sur les tableaux

const t= [1,2];

const copyAdr = t;

const copyVal = [...t];

copyAdr[0] = "cool"

copyVal.push = "new";

console.log(t,copyAdr,copyVal)

Equivalent pythontutor

Filtrer les articles par catégorie : Par exemple, sélectionner tous les fruits :

⛔Code avec for-i à ne plus utiliser

let fruits = [];
for (let i = 0; i < basket.length; i++) {
  if (basket[i].category === "fruit") {
    fruits.push(basket[i]);
  }
}
console.log(fruits);

🚫Code avec destructuration donné par GPT : à ne pas utiliser pour l'instant

let fruits = [];

for (const { category, ...rest } of basket) {
  if (category === "fruit") {
    fruits.push({ category, ...rest }); // Ajoute l'objet correspondant à la catégorie "fruit"
  }
}

✅ Il est préférable d'écrire le code suivant sans destructuration

let fruits = [];

for (const item of basket) {
  if (item.category === "fruit") {
    fruits.push({ ...item }); // Ajoute l'objet correspondant à la catégorie "fruit"
  }
}

🆘 faire un dessin du résultat !

Code équivalent dans pythontutor : code

👍code

`Comparez le code précédent qui copie les fruits dans une nouvelle structure avec une recopie de l'adresse !`

let fruits = [];

for (const item of basket) {
  if (item.category === "fruit") {
    fruits.push(item); // Ajoute l'objet correspondant à la catégorie "fruit"
  }
}

code

👍code

Résumé
for (const item of basket) {
  if (item.category === "fruit") {
    fruits.push( item );
  }
} for (const item of basket) {
  if (item.category === "fruit") {
    fruits.push( {... item} );
  }
}

Pages