clubinfo-2024-2025/cours_vanilla_js/script.js
2024-11-29 14:53:49 +01:00

120 lines
2.5 KiB
JavaScript

// variable
// nombre
let a = 2;
let b = 5;
let x = 2;
// y = ax + b;
console.log(a*x+b);
// chaine de charactère
let montext = "texte, ou plutot une chaine de charactères.";
let unautretext = "Ha bon :/";
// concatenation
console.log(montext + unautretext + a*b);
// Tableau
let maliste = [2,4,7,8,9,'un text','ouaa'];
console.log(maliste);
console.log(maliste[2]);
console.log(maliste[5]);
// imbriqué / nested
let mapoupeerusse = [
3,
"machin",
[
6,8, 'hoho'
]
];
console.log(mapoupeerusse);
// objet / object
let unobjet = {clef1:'valeur', clef2:"valeur2"};
let listeetudiantes = {
rouen: [
{
nom: 'machin',
prenom: 'truc'
},
{
nom: "...",
prenom: "..."
}
],
lehavre: [
{
nom: 'mohamed',
prenom: 'eli'
},
{
nom: "...",
prenom: "..."
}
]
}
console.log(listeetudiantes);
// boucles
// Object.keys(listeetudiantes) permet de recupérer le tableau des clefs de l'object listeetudiantes
[7,2,89,4].forEach(value => {
})
// 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);
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 => {
console.log(key);
// et on récupère les valeurs en utilisant la clef (key)
let ville = listeetudiantes[key];
console.log(ville);
// on refait une boucle imbriquée (une boucle dans une boucle)
ville.forEach(etudiant => {
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);
}