Chargement...

Introduction à JavaScript

HTML donne une structure à la page. CSS lui donne un aspect. Une vitrine prête reste silencieuse tant que rien ne se passe : un clic, une valeur saisie, un message après le chargement. JavaScript est le langage qui fait cela dans le navigateur.

Qu’est-ce que JavaScript ?

JavaScript est un langage de programmation. Vous écrivez des instructions que le navigateur exécute l’une après l’autre. Ce n’est pas du balisage (c’est HTML) ni une feuille de style (c’est CSS). Sur le web, son travail quotidien est le comportement : mettre à jour du texte, réagir à l’utilisateur, calculer une valeur, et plus tard dans ce cours — charger des données.

Un langage d’exécution, pas un document

Les balises HTML nomment des morceaux de contenu. Les règles CSS décrivent leur apparence. Les instructions JavaScript disent à l’ordinateur de faire quelque chose : afficher un message, modifier un nœud de la page, ou additionner deux nombres. Vous savez assez d’HTML pour accrocher un script à la page. Ce cours enseigne le langage qui s’exécute dans ce script.

📊 Page statique face à une page avec JavaScript

Situation Sans JavaScript Avec un court script
La page vient d’être chargée Le titre reste exactement comme dans le HTML Un script peut le réécrire après le chargement
Le visiteur clique sur un bouton Le bouton, seul, n’a pas de réaction utile Plus tard : le code s’exécute au clic
Vous avez besoin d’un total ou d’un contrôle HTML ne calcule pas ; CSS ne décide pas JavaScript calcule puis affiche le résultat

Gardez les trois couches séparées. La structure reste HTML. L’apparence reste CSS. Ce cours est la troisième couche : ce que la page fait.

Premier regard sur une instruction

Une instruction est un ordre. L’exemple écrit une ligne dans la console développeur — un outil pour programmer, pas la page visible. Vous utiliserez souvent la console.

Une première instruction

javascript 
console.log("Hello, JavaScript");

Ce que fait cette instruction

  • console.log est une fonction intégrée qui écrit dans la console
  • Le texte entre guillemets est une chaîne — des données texte
  • Le point-virgule termine l’instruction (habitude sûre dans ce cours)
  • Rien ne change encore sur la page ; ce n’est qu’un journal
    Ouvrez les outils de développement (souvent F12) et regardez l’onglet Console après l’exécution du script.

Voir JavaScript sur une page

Pour changer ce que voit le visiteur, le script parle à la page. Ci-dessous, un paragraphe HTML commence par une phrase. Un <script> intégré trouve ce paragraphe par id et remplace son texte. L’emplacement des scripts est pour la séance suivante ; un fichier suffit ici.

HTML avec un script intégré

html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

Ce qui a changé

Sans le script, le paragraphe d’origine reste. Avec le script, le navigateur lit d’abord le HTML, exécute les instructions, puis affiche la nouvelle phrase. Même squelette — comportement différent après le chargement.

JavaScript sait aussi calculer

Parce que c’est un langage de programmation, JavaScript travaille avec des nombres et des noms, pas seulement des balises. Ce petit exemple n’a rien à voir avec la couleur ou les titres. Il calcule un total et l’écrit. Variables et types viendront plus tard ; ici, voyez seulement que le code calcule.

Un petit calcul

javascript 
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

Ce que ce cours est (et n’est pas)

Nous restons dans le navigateur : bases du langage, DOM, événements, formulaires et fetch. Pas de framework, ni Node.js, ni TypeScript pour commencer. Sans ces outils, vous pouvez déjà écrire des scripts utiles. Les séances optionnelles sont des extras ; elles ne sont pas exigées pour le parcours principal.

À vous d’essayer

  1. Créez un fichier nommé intro.html.
  2. Collez l’exemple HTML avec script, enregistrez et ouvrez-le dans le navigateur.
  3. Vérifiez que le paragraphe montre la phrase réécrite, pas le texte HTML d’origine.
  4. Changez la chaîne dans textContent pour une phrase à vous, enregistrez et actualisez.
  5. Optionnel : ajoutez console.log("Hello, JavaScript"); dans le même <script>, enregistrez, actualisez, et trouvez la ligne dans l’onglet Console.

Erreurs fréquentes

  • Traiter JavaScript comme une autre façon d’écrire titres et paragraphes — laissez la structure en HTML ; que JS la change ou l’enrichisse au besoin
  • Attendre que CSS réagisse à un clic ou calcule un total — CSS habille ; il n’exécute pas de logique de programme
  • Mettre la seule copie d’un texte important dans le script, si bien que la page est vide sans JS
  • Confondre la console et la page visible : console.log ne remplace pas un titre à l’écran

Résumé

  • JavaScript est un langage de programmation qui ajoute du comportement aux pages dans le navigateur
  • HTML structure le contenu ; CSS contrôle la présentation ; JavaScript décide ce que fait la page
  • Une instruction est un ordre, comme console.log("Hello, JavaScript");
  • Un script intégré peut trouver un élément et changer son textContent après le chargement
  • JavaScript calcule aussi des valeurs, il ne fait pas que toucher le balisage
  • Ce cours reste dans le navigateur et n’exige pas de framework
  • Entraînez-vous en modifiant un petit script et en actualisant le navigateur

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 3
Javascript Tutoriel