cours 16-10-26

intro js/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>intro js</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  
+  <h1>Salut le club :)</h1>
+
+  <canvas></canvas>
+
+  <script src="script.js"></script>
+</body>
+</html>

intro js/script.js

@@ -0,0 +1,101 @@
+// variables
+
+// qui contiennent des nombre (valeurs numériques)
+var lapremierevariabledemaviewouahou = 2;
+console.log('lapremierevariabledemaviewouahou 1 = ', lapremierevariabledemaviewouahou);
+var b = 3;
+
+// des operation avec des variables
+var y = lapremierevariabledemaviewouahou*5 + b;
+console.log('y = ', y);
+
+lapremierevariabledemaviewouahou = 6;
+console.log('lapremierevariabledemaviewouahou 2 = ', lapremierevariabledemaviewouahou);
+
+//  qui contiennent du texte (chaine de charactères)
+var monpremiertextstockedansunevariablemaisnon="a ouai ! :/"
+console.log('monpremiertextstockedansunevariablemaisnon', monpremiertextstockedansunevariablemaisnon);
+
+var autretext = "meme pas en reve";
+
+// concatenation
+var untruc = monpremiertextstockedansunevariablemaisnon + " | " + 2 + " | " + autretext;
+console.log('untruc : ', untruc);
+
+// tableau
+var mon_premier_tableau = [2,5,9,10,534,-23,67];
+console.log("mon_premier_tableau: ", mon_premier_tableau);
+
+var montableau_melange = [2, "prout", untruc, mon_premier_tableau];
+console.log("montableau_melange", montableau_melange);
+
+// acceder a une valeur de tableau
+var une_valeur_de_tableau = montableau_melange[1];
+console.log("une_valeur_de_tableau", une_valeur_de_tableau);
+console.log("montableau_melange[3][2]", montableau_melange[3][2]);
+
+// object
+var mon_premier_objet = {
+  "nom": "machin", 
+  "age":18, 
+  "genre":"x", 
+  "taille": 180, 
+  "scores":[20,34,17], 
+  "potes": {
+    "nom": "truc",
+    "age":22,
+    "genre": "m",
+    "taille": 178,
+  }
+}
+
+console.log("mon_premier_objet", mon_premier_objet);
+console.log("l'age de pote de machin", mon_premier_objet.potes.age);
+
+// les boucles (loop)
+
+// pour chaque clef dans objet
+for (let key in mon_premier_objet) {
+  console.log(key, mon_premier_objet[key]);
+}
+
+// index ++
+// index += 1
+// index = index + 1
+
+for (let i = 0; i < montableau_melange.length; i++) {
+  console.log('i = ', i, "valeur = ", montableau_melange[i]);
+}
+
+
+let montableauremplisenboucle = [];
+for (let k = 100; k > 10; k = k * 0.5) {
+  console.log('k = ', k);
+  montableauremplisenboucle.push(k);
+}
+console.log("montableauremplisenboucle", montableauremplisenboucle);
+
+let lespointsdemadroite = [];
+let a = -2 + Math.random()*4;
+b = 0;
+for (let x = -500; x < 500; x+=10) {
+  let point = {
+    'x': x,
+    // 'y': a * x + b
+    'y': Math.sin(x) *3
+  }
+  lespointsdemadroite.push(point);
+}
+console.log("lespointsdemadroite", lespointsdemadroite);
+
+let win_w = document.body.offsetWidth;
+let win_h = document.body.offsetHeight;
+lespointsdemadroite.forEach(point => {
+  let htmlpoint = document.createElement('div');
+  htmlpoint.classList.add('point');
+  htmlpoint.style.top = win_h / 2 + -point.y+"px";
+  htmlpoint.style.left = win_w / 2 + point.x+"px";
+  
+  document.body.append(htmlpoint);
+
+});

intro js/style.css

@@ -0,0 +1,18 @@
+body{
+  /* background-color: red; */
+  width : 100vw;
+  height : 100vh;
+  margin: 0;
+}
+
+h1{
+  margin: 0;
+}
+
+.point{
+  width: 5px;
+  height: 5px;
+  background-color: black;
+  position: absolute;
+  border-radius: 3px;
+}