htmls/js/css les bases:

les variable js les boucles html element + css
2025-10-24 17:22:43 +02:00
commit d675b15f96
3 changed files with 154 additions and 0 deletions
--- a/bases-js/index.html
+++ b/bases-js/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body id="body">
+
+
+  <script src="script.js"></script>
+</body>
+</html>
--- a/bases-js/script.js
+++ 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);
+
+
+
--- a/bases-js/styles.css
+++ 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;
+}