Document

commit d675b15f96054f6d87ac28b4667810155cf49dba Author: bach Date: Fri Oct 24 17:22:43 2025 +0200 htmls/js/css les bases: les variable js les boucles html element + css diff --git a/bases-js/index.html b/bases-js/index.html new file mode 100644 index 0000000..a6a4ffd --- /dev/null +++ b/bases-js/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/bases-js/script.js b/bases-js/script.js new file mode 100644 index 0000000..4775147 --- /dev/null +++ b/bases-js/script.js @@ -0,0 +1,117 @@ +console.log('Salut :)'); + +// Les variables +// fonction d'une droite +// y = ax + b +// x et y sont des variables + +// variable type number +let x = 3; +let a = 2; +let b = 23; +let y; + +y = a*x + b; + +console.log(y); + +console.log(outerHeight); + +// variable string (chaine de charactères) +let leprenomdelours = "hubert"; +console.log(leprenomdelours); +let leprenomduloup = "maurice"; +console.log(leprenomduloup); +// concatenation +let letritredemacomptine = leprenomdelours + " & " + leprenomduloup; +console.log(letritredemacomptine); + +console.log(a + letritredemacomptine); + +// boolean (vrai ou faux) +// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique) +let jesuisunevache = false; +let youaregreat = true; +console.log(jesuisunevache, youaregreat); + +// comparaison +let lalignedescend = a < 0; +console.log("lalignedescend", lalignedescend); + +// random (Aleatoire) +let unnombrealeatoire = 50 + Math.random() * 50; + +// Array (tableau) +let malistedecourses = [ + "beurre", + "salade", + "glace", + 10, + true +]; +console.log("malistedecourses", malistedecourses[0]); + +// Object (objet) +let malistedecourseencoremieux = { + "biocoop": "l'adresse de biocoop", + "intermarcher": 99, + "salut": false +} +console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop); + +// nested (imbriquer) + +let objectarraynested = { + "biocoop":[ + {'beurre':1}, + {'yahourt':10} + ], + 'leclerc':[ + {'essence':10} + ] +} +console.log("objectarraynested", objectarraynested); + + +// comment afficher des trucs + +// créer un element html virtuel +console.log('document', document); + +let body = document.getElementById('body'); +console.log('body', body); + + +let balle = document.createElement('div'); +balle.classList.add('balle'); +body.prepend(balle); + + +// Les boucles +let boules = []; +for (let index = 0; index < 100; index=index+1) { + boules[index] = document.createElement('div'); + boules[index].classList.add('boule'); + // boules[index].style.backgroundColor = 'rgb(255,0,255)'; + + // HSL Hue Saturation Luminosity + // boules[index].style.backgroundColor = 'hsl(180 50 50)'; + // boules[index].style.backgroundColor = 'hsl(180 50 '+index+')'; + // boules[index].style.backgroundColor = `hsl(180 50 ${index})`; + // boules[index].style.backgroundColor = `hsl(180 ${index} 50)`; + boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`; + + boules[index].style.top = Math.random()*700+"px"; + boules[index].style.left = Math.random()*700+"px"; + + let rayon = 20 + Math.random()*30; + boules[index].style.width = rayon+"px"; + boules[index].style.height = rayon+"px"; + boules[index].style.borderRadius = (rayon/2)+"px" + + body.append(boules[index]); +} +console.log('boules', boules); + + + diff --git a/bases-js/styles.css b/bases-js/styles.css new file mode 100644 index 0000000..ee963e5 --- /dev/null +++ b/bases-js/styles.css @@ -0,0 +1,23 @@ +body{ + background-color: aqua; +} + +h1{ + font-weight: 900; + font-size: 240px; +} + +div.balle{ + width: 20px; + height:20px; + border-radius: 10px; + background-color: black; +} + +div.boule{ + position: absolute; + width: 10px; + height:10px; + border-radius: 10px; + background-color: red; +} \ No newline at end of file