147 lines
3.5 KiB
JavaScript
147 lines
3.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);
|
|
|
|
let nbr_rond = 20+ Math.random()*180;
|
|
// 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) (comment i évolue entre chaque boucle)
|
|
//
|
|
// a b c
|
|
// ____|____ __|_____ _|_
|
|
for (let i = 0; i < nbr_rond; 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)
|
|
// donc pour avoir un nombre entre 0 et 100 on fait Math.rndom()*100 (ex 0.45*100=45)
|
|
// on écrit des propriétées css sur notre élément
|
|
monrond.style.top = Math.random()*window.innerHeight +"px";
|
|
monrond.style.left = Math.random()*window.innerWidth +"px";
|
|
|
|
// taille aléatoire
|
|
let cotecarre = 10 + Math.random()*90;
|
|
monrond.style.width = monrond.style.height = cotecarre +"px";
|
|
// https://css-tricks.com/almanac/properties/b/border-radius/
|
|
monrond.style.borderRadius = cotecarre/2 +"px";
|
|
|
|
// couleur aléatoire
|
|
|
|
// en rgb
|
|
// let r = Math.random()*255;
|
|
// let g = Math.random()*255;
|
|
// let b = Math.random()*255;
|
|
// 'rgb(r,g,b)'
|
|
// monrond.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
|
|
// monrond.style.backgroundColor = `rgb(${r},${g},${b})`;
|
|
|
|
// en hsl
|
|
// https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl
|
|
// 'hsl()'
|
|
let h = Math.random()*360;
|
|
let s = 30 + Math.random()*20;
|
|
let l = 40 + Math.random()*20;
|
|
monrond.style.backgroundColor = `hsl(${h},${s}%,${l}%)`;
|
|
|
|
body.append(monrond);
|
|
}
|
|
|
|
|
|
|
|
|