bsc/clubinfo-2024-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

js create html element & math.random

Browse Source
This commit is contained in:
bach 2024-11-29 14:53:49 +01:00
parent 0c2b17b460
commit f980afb00c
4 changed files with 66 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
cours_vanilla_js/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>

BIN
cours_vanilla_js/live-server.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

40
cours_vanilla_js/script.js
View File

@ -69,15 +69,51 @@ console.log(listeetudiantes);
}) })
// Object.hey permet de récupérer la liste des clefs (keys) de l'objet sous la forme d'un tableau
let listedeskey = Object.keys(listeetudiantes); let listedeskey = Object.keys(listeetudiantes);
console.log(listedeskey); console.log(listedeskey);
// ensuite on peu boucler sur le tableau des clefs (keys) avec foreach (foreach ne fonctionne pas sur les objets)
listedeskey.forEach(key => { listedeskey.forEach(key => {
console.log(key); console.log(key);
let ville = listeetudiantes[key] // et on récupère les valeurs en utilisant la clef (key)
let ville = listeetudiantes[key];
console.log(ville); console.log(ville);
// on refait une boucle imbriquée (une boucle dans une boucle)
ville.forEach(etudiant => { ville.forEach(etudiant => {
console.log(etudiant.prenom); console.log(etudiant.prenom);
}) })
}); });
// recupère le body
let body = document.body;
// créer un element html virtuel
let titre = document.createElement('h1');
// on insert du text dans la balise
titre.innerText = "salut ma div :)";
// on ajoute une classe
titre.classList.add('titre');
// on insert l'element html dans la page
body.append(titre);
// on boucle pour créer x elements
// a : la valeur de départ de l'index (i)
// b : tant que b est vrai, la boucle continue
// c : la valeur d'incrémentation de l'index (i)
//
// a b c
// -------- ------ ---
// | | | | | |
for (let i = 0; i < 10; i++) {
let monrond = document.createElement('div');
monrond.classList.add('rond');
monrond.innerText = i;
// math.random renvoie un nombre entre 0 et 1 (ex 0.45)
monrond.style.top = Math.random()*window.innerHeight +"px";
monrond.style.left = Math.random()*window.innerWidth +"px";
body.append(monrond);
}

15
cours_vanilla_js/style.css Normal file
View File

@ -0,0 +1,15 @@
h1.titre{
display: block;
border: red 1px solid;
}
div.rond{
/* display: inline-block; */
width: 20px;
height: 20px;
border-radius: 10px;
background-color: red;
/* top:50px;
left:78px; */
position: absolute;
}