Javascript : commandes de base

📘 JavaScript Cheat Sheet

🔹 Affichage & Console

console.log("Hello, world!");
alert("Coucou !");
prompt("Ton prénom ?");
confirm("Es-tu sûr ?");

🔹 Variables

let x = 10;       // modifiable
const y = 20;     // constante
var z = "test";   // ancienne syntaxe

🔹 Types de données

let nombre = 42;                // Number
let texte = "Bonjour";          // String
let booleen = true;             // Boolean
let tableau = [1, 2, 3];        // Array
let objet = {nom: "Alice"};     // Object
let rien = null;                // Null
let indéfini;                   // Undefined

🔹 Opérateurs

let a = 5, b = 2;
a + b;   // 7
a - b;   // 3
a * b;   // 10
a / b;   // 2.5
a % b;   // 1 (reste)
a ** b;  // 25 (puissance)

🔹 Conditions

if (age >= 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}

🔹 Boucles

for (let i = 0; i < 5; i++) {
  console.log("Tour", i);
}

let j = 0;
while (j < 3) {
  console.log("j =", j);
  j++;
}

🔹 Fonctions

function direBonjour(nom) {
  return "Bonjour " + nom;
}
console.log(direBonjour("Alice"));

🔹 Manipuler le DOM

document.getElementById("monId").innerText = "Nouveau texte";
document.querySelector(".maClasse").style.color = "red";

🎨 Canvas (dessin)

Exemples de base avec canvas :

// Récupération du contexte
let canvas = document.getElementById("monCanvas");
let ctx = canvas.getContext("2d");

// 🔹 Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 50);
ctx.strokeStyle = "red";
ctx.strokeRect(150, 20, 100, 50);

// 🔹 Ligne
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(200, 150);
ctx.stroke();

// 🔹 Triangle rempli
ctx.beginPath();
ctx.moveTo(250, 150);
ctx.lineTo(300, 100);
ctx.lineTo(350, 150);
ctx.closePath();
ctx.fillStyle = "orange";
ctx.fill();

// 🔹 Cercle
ctx.beginPath();
ctx.arc(100, 200, 40, 0, Math.PI * 2);
ctx.fillStyle = "green";
ctx.fill();

// 🔹 Texte
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello Canvas", 50, 100);

// 🔹 Image
let img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/3/3f/Logo-JS.png";
img.onload = () => {
  ctx.drawImage(img, 380, 20, 100, 100);
};