clubinfo-2526/bases-js/script.js

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 h = Math.random()*360;
let s = Math.random()*100;
let l = Math.random()*100;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;

let balle = document.createElement('div');
balle.classList.add('balle');
body.prepend(balle);


// index=index+1
// index+=1
// index++

//  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);

// une fonction
// function unefunctiontest(){

// } 

// c'est pareille que :
// let unefunctiontest = function() {

// }

// la version moderne
let unefunctiontest = (test, unautre) => {
  // entre les deux accolades : le block de code executer a chaque fois que la function est appelée
  console.log('test: ',test);
  console.log('unautre: ',unautre);
  
};

// on appele la function avec des arguments
unefunctiontest(45, 'babar');




// let fonctionpourchaqueboule = (boule) => {
    
// }
// boules.forEach(fonctionpourchaqueboule);

let monanime = () => {
  // console.log('frame');
  let i = 0;
  boules.forEach((boule) => {
    // console.log('boule',boule);
    let impair = i%2;

    let vitesse_x;
    let vitesse_y;
    if (impair) {
      vitesse_x = vitesse_y = 1;
    } else {
      vitesse_x = vitesse_y = -1;
    }

    boule.style.left = (boule.offsetLeft+vitesse_x)+"px";  
    boule.style.top = (boule.offsetTop+vitesse_y)+"px";  

    i++;
  });
  
  window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
 
window.requestAnimationFrame(monanime);