Apprends Introduction à JavaScript

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation qui donne vie aux pages web. Alors que HTML fournit la structure et CSS gère le style, JavaScript ajoute de l'interactivité — répondre aux clics, mettre à jour le contenu dynamiquement, valider des formulaires, créer des animations, et bien plus encore.

Quelques points importants à connaître sur JavaScript :

Il s'exécute dans le navigateur. Chaque navigateur web moderne possède un moteur JavaScript intégré qui exécute ton code directement sur l'appareil de l'utilisateur.
Ce n'est pas Java. Malgré le nom similaire, JavaScript et Java sont des langages complètement différents. Le nom était une décision marketing des années 1990.
Il est dynamique et interprété. Tu n'as pas besoin de compiler JavaScript — le navigateur le lit et l'exécute ligne par ligne.
Il est partout. JavaScript est le langage de programmation le plus utilisé au monde. Au-delà du navigateur, il s'exécute aussi sur les serveurs (Node.js), dans les applications mobiles, les applications de bureau, et même sur les appareils IoT.

Ajouter JavaScript à HTML

Il existe trois façons d'ajouter JavaScript à une page HTML :

Gestionnaires d'événements inline — Ajoute JavaScript directement dans un attribut HTML comme onclick. C'est rapide mais peu pratique et difficile à maintenir.
html
```
<button onclick="alert('Hello!')">Click me</button>
```
Script interne — Place ton code à l'intérieur d'une balise <script> dans le document HTML. Cela garde ton JavaScript proche du HTML avec lequel il interagit.
html
```
<script>
  document.getElementById('greeting').textContent = 'Hello!';
</script>
```
Script externe — Écris JavaScript dans un fichier .js séparé et référence-le avec une balise <script src>. C'est la méthode préférée pour les vrais projets.
html
```
<script src="app.js"></script>
```

Pour les leçons de ce cours, nous utiliserons des balises <script> internes afin que tu puisses voir HTML et JavaScript au même endroit.

Ton premier script

html

<h1 id="title">Original Title</h1>
<p id="description">This text will change.</p>

<script>
  // Select elements by their id
  const title = document.getElementById('title');
  const description = document.getElementById('description');

  // Change their text content
  title.textContent = 'Hello, JavaScript!';
  description.textContent = 'This text was changed by JavaScript.';
</script>

La console du navigateur

L'un des outils les plus utiles pour apprendre JavaScript est la console du navigateur. Elle te permet de voir les sorties de ton code, tester des expressions et déboguer les erreurs.

Pour ouvrir la console :

Chrome / Edge : Appuie sur F12 ou Ctrl+Shift+J (Windows) / Cmd+Option+J (Mac)
Firefox : Appuie sur F12 ou Ctrl+Shift+K (Windows) / Cmd+Option+K (Mac)

La fonction console.log() affiche un message dans la console. Elle est inestimable pour déboguer :

javascript

console.log('Hello from JavaScript!');
console.log(42);
console.log('The answer is', 40 + 2);

Tu peux aussi utiliser console.warn() pour les avertissements et console.error() pour les erreurs. Tout au long de ce cours, console.log() sera ton meilleur ami pour comprendre ce que fait ton code.

Où est-il recommandé de placer une balise <script> pour de meilleures performances ?

Introduction à JavaScript

Qu'est-ce que JavaScript ?

Ajouter JavaScript à HTML

Ton premier script

La console du navigateur

Prêt à pratiquer ?