Ce tutoriel explique comment intégrer JavaScript dans une page web, depuis les bases jusqu'à des méthodes avancées.
1. Créer une structure HTML de base
Avant d'écrire du JavaScript, vous avez besoin d'une page HTML.
Créez un fichier index.html avec ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site avec JavaScript</title>
</head>
<body>
<h1>Bonjour le Monde !</h1>
<button id="monBouton">Cliquez-moi</button>
<script src="script.js"></script>
</body>
</html>
2. Écrire du JavaScript dans un fichier externe (recommandé)
Créez un fichier script.js dans le même dossier et ajoutez :
const bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
alert("Vous avez cliqué sur le bouton !");
console.log("Message affiché dans la console.");
});
3. Intégrer JavaScript directement dans le HTML (méthode alternative)
<script>
document.querySelector("h1").style.color = "blue";
</script>
4. Manipuler le DOM (Document Object Model)
Le DOM permet de modifier dynamiquement la page.
const titre = document.querySelector("h1");
titre.textContent = "Nouveau Texte Modifié !";
Exemple : Ajouter un nouvel élément
const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Ceci est un paragraphe ajouté avec JS !";
document.body.appendChild(nouveauParagraphe);
5. Gérer les événements (clics, saisie, etc.)
JavaScript permet d'écouter des actions utilisateur.
const bouton = document.getElementById("monBouton");
bouton.addEventListener("click", () => {
console.log("Bouton cliqué !");
});
Exemple : Réagir à la saisie dans un champ
<input type="text" id="monInput" placeholder="Tapez quelque chose">
const input = document.getElementById("monInput");
input.addEventListener("input", (event) => {
console.log("Texte saisi :", event.target.value);
});
6. Utiliser des fonctions et variables
let nombre = 10;
function direBonjour(nom) {
return `Bonjour, ${nom} !`;
}
console.log(direBonjour("Alice"));
7. Stocker des données (localStorage)
localStorage.setItem("theme", "sombre");
const theme = localStorage.getItem("theme");
console.log("Thème choisi :", theme);
8. Debugging avec la console
-
console.log() → Afficher un message
-
console.error() → Afficher une erreur
-
console.warn() → Afficher un avertissement
exemple:
console.log("Ceci est un message de débogage.");
9. Charger JavaScript correctement
<script src="script.js" defer></script>