Introduction au JavaScript

Qu’est-ce que JavaScript ?

JavaScript est un langage de programmation utilisé pour rendre les pages web interactives.

Caractéristiques principales :

Langage interprété (exécuté par le navigateur)

Interaction avec HTML et CSS

Gestion des événements (clics, formulaires, animations, etc.)

Où écrire le JavaScript ?

Il existe trois manières d’intégrer JavaScript à une page HTML :

Méthode Description Interne (<script>) Code inclus directement dans le fichier HTML Externe (.js) Fichier séparé, inclus avec <script src="script.js"> En ligne (onclick="...") Directement dans une balise HTML (peu recommandé)

Exemple d’inclusion externe :

HTML

<script src="script.js"></script>

Variables et Types de données

Déclaration des variables

Mot-clé Description

var : Ancienne méthode, portée globale ou fonction let : Portée limitée au bloc où elle est définie const : Variable constante qui ne peut pas être modifiée

Exemple :

 
 
let nom = "Alice";
const age = 25;

Types de données

Exemple Number : let x = 10; String : let txt = “Bonjour”; Boolean : let est Vrai = true; Array : let fruits = [“Pomme”, “Banane”]; Object : let personne = {nom: “Alice”, age: 25};

Opérateurs et Conditions

Opérateurs arithmétiques

Principaux opérateurs :

 
let a = 10, b = 5; 
console.log(a + b); // Addition 
console.log(a - b); // Soustraction 
console.log(a * b); // Multiplication 
console.log(a / b); // Division 
console.log(a % b); // Modulo

Conditions (if / else / switch)

Exemple avec if :

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

Exemple avec switch :

let fruit = "Banane";
switch (fruit) {
    case "Pomme":
        console.log("C'est une pomme");
        break;
    case "Banane":
        console.log("C'est une banane");
        break;
    default:
        console.log("Fruit inconnu");
} 

Boucles

for

Exemple :

 
for (let i = 0; i < 5; i++) {
     console.log("Itération n°" + i);
      }`
      

 while et do while

Exemple while :

 
 
let x = 0; while (x < 3) {
     console.log(x);
          x++; 
          }`
          

Exemple do while :

 
let y = 0;
 do {
    console.log(y);
    y++;
} while (y < 3);`

Fonctions

Déclaration d’une fonction

Exemple de fonction classique :

 
function saluer(nom) { 
    return "Bonjour, " + nom;
} 
console.log(saluer("Alice"));`
 
 

Fonctions fléchées (ES6)

Exemple :

 
const saluer = (nom) => "Bonjour, " + nom;
 console.log(saluer("Bob"));`
 

Manipulation du DOM

Sélection d’éléments HTML

Méthode

Description

getElementById(“id”) : Sélectionne un élément par son ID getElementsByClassName(“classe”) : Sélectionne une collection d’éléments querySelector(“selector”) : Sélectionne le premier élément correspondant

Exemple :

 
document.getElementById("titre").textContent = "Nouveau titre";`
 

Modification du style

Exemple :

 
document.getElementById("monDiv").style.color = "red";`
 

Gestion des événements

Ajouter un événement

 Exemple :  

 
document.getElementById("monBouton").addEventListener("click", function() {     alert("Bouton cliqué !");
});`