Entrainement ultime
Class
Code
Trouver un code pour établir à la fin de la journée le nombre de clients et le bilan des recettes. Chaque client présente une liste d'achats.
- Client (49.99);
- Client (239.99, 229.99);
- Client (9.9, 120.99);
- Client (239.99, 19.99, 19.99, 19.99, 59.99);
Résultats
"clients" : 4
"somme" : 1.010,81 €
Discussion
Nous proposons une solution ( lien ).
Il faut cependant corriger un bug 🐛 !
Solutions finale avec saisie du partron
Class en action
Création d'une forme
Nous créons des points sans les afficher.
Nous traçons des lignes reliant les points
Nous allons dessiner des formes
Nous allons détaillé la mise en place de cette classe permettant de créer des formes aléatoires.
Création d'un rectangle
Pour créer un rectangle, on a besoin de quatre points.
Les quatre points se déduisent facilement à partir d'un point origine et de la largeur et hauteur du rectangle.
Un rectangle se dessine à partir d'une forme à quatre point. La présence de l'héritage est démontré.
Cours en ligne
Retrouver l'ensemble des vidéos sur class 💣 lien
Document
Voici le code associé aux vidéos : lien
Class : template
Nous avons vu dans le projet calendrier l'importance de l'utilisation d'un template (⥲lien). Nous allons reprendre le code en introduisant la notion de classe
code
Voici le code en détail (👉lien)
Code commenté
Et voici les commentaires sur la mise en place de la classe template
Code en action
Voici un exemple d'instanciation de la classe Template.
TD : création d’éléments
On désire à partir d’un objet afficher un tableau !
const PERSON = [
{name: "dupont", age:52, country: "Tanzania"},
{name: "tintin", age:"infinie", country: "World"},
];
Voici la structure à créer dynamiquement
Compléter le code : ?
// data est l’objet un tableau d’objet.
function buildTable(data) {
const table = document.?("table");
// récupération des entêtes
const fields = Object.keys(data[0]);
// fields = ["name", "age", "country"]
// création de la ligne tr qui contiendra les th
const headRow = document.? ("tr");
// faire un foreach sur fields pour créer le th
fields.?(function(field) {
const headCell = document.?("th");
// mettre le texte de headCell égale à fields
headCell.? = field;
// ajouter headCell à headRow
headRow.?(headCell);
});
// ajouter headRow à table
table.?(headRow);
// ajouter une ligne du tableau par objet de data
// faire un forEach sur data
data.?(function(object) {
// créer un tr
const row = document.?("tr");
// pour chaque champ (name,age,country)
fields.?(function(field) {
// création d’une case td
const cell = document.?("td");
// ajouter le texte de l’objet à la case { name: "dupont", age:52, country: "Tanzania" },
cell.? = object[field];
// cas des nombres !
if (typeof object[field] == "number")
cell.style.cssText = "background-color:black;color:white;text-align:right;"
// ajout à la row la cell
?.appendChild(?);
});
// ajout de la row au tableau
table.?(row);
});
//retourne le tableau !
return ?;
}
document.body.appendChild(buildTable(PERSON));
Amélioration
que pensez vous de ce code !
DS !
Un DS d'un 1/4 est prévu au prochain cours,
Il faut commencer l'entrainement sans tarder !
N'oublie pas
- https://dupontdistanciel.blogspot.com/
- http://dupontcss.blogspot.com/2020/09/grid-bilan.html
Entrainement :
Soit le HTML
<div class="conteneur" style="width: 400px; height: 400px;">
<div id="it1">A</div>
<div id="it2">B</div>
<div id="it3">C</div>
<div id="it4">D</div>
</div>
Imaginer le résultat du CSS suivant
.conteneur {
display: grid;
grid-template-columns: repeat(2, 100px);
}
#it4 {
grid-column-end : 1
}
<div class="conteneur" style="width: 400px; height: 400px;">
<div id="it1">A</div>
<div id="it2">B</div>
<div id="it3">C</div>
<div id="it4">D</div>
</div>
Imaginer le résultat du CSS suivant
.conteneur {
display: grid;
grid-template-columns: repeat(2, 100px);
}
#it4 {
grid-column-end : 1
}
Imaginer le résultat du CSS suivant :
JE vous propose de regarder le vidéos https://dupontdistanciel.blogspot.com/
#it1 {
grid-row : 2;
grid-column : 2/3;
}
#it2 {
grid-column : span 2;
}
#it3 {
grid-row : 1;
}
Pour un flux row, les blocs sont traités dans l'ordre it1 (fixe row/col), it3(fixe row), it2(ordre flux),it4(ordre flux)
Simulateur : Grid
Vous pouvez utiliser le simulateur Grid à tout moment ( ici )
Code du simulateur de Grid : télécharger
Cours : CSS grid
Cours :
Nous avons conçu avec Mozilla un cours spécialement pour le distanciel. Il est fait pour vous.
 |
| -> Grid |
examen session 2
Le test de la session 2 est disponible https://ecampus.paris-saclay.fr/course/view.php?id=22788
Le type de test est séquentiel :
- une question par page
- impossibilité de revenir en arrière (si vous sautez une question, vous ne pourrez plus y répondre)
Chaque étudiant à un QCM différent.
Inscription à :
Articles (Atom)