JavaScript est un langage de script puissant qui s'exécute dans le navigateur, permettant de manipuler le contenu et le comportement de la page web. Si on le compare à une maison, JavaScript représente la fonctionnalité de la maison, englobant des éléments tels que les systèmes électriques, la plomberie, la domotique et le chauffage central – en somme, tout ce qui fournit des fonctionnalités.

Voici comment ajouter JavaScript au document HTML :

JavaScript en ligne

Il est possible d'inclure JavaScript directement dans le document HTML à l'aide de la balise <script>. Cette méthode est utile pour ajouter des scripts rapides et ponctuels.

Exemple :

Veuillez cliquer sur le bouton Cliquez-moi ci-dessous.

JavaScript externe

Pour des scripts plus volumineux ou lorsque l’on souhaite réutiliser du code sur plusieurs pages, il est courant d’utiliser des fichiers JavaScript externes. Créer un fichier JavaScript séparé (par exemple, index.js) et le lier au document HTML à l’aide de la balise <script>.

Exemple :

Veuillez vous assurer de consulter les trois fichiers dans l’exemple fourni.

Notions de base en JavaScript

JavaScript permet d’ajouter de l’interactivité et un comportement dynamique aux pages web. Voici quelques concepts fondamentaux :

Variables

Les variables sont utilisées pour stocker des valeurs de données. Il est possible de déclarer des variables à l'aide des mots-clés let ou const.

let age = 30;
const name = "Peter";

Fonctions

Les fonctions sont des blocs de code réutilisables qui exécutent une tâche spécifique. Il est possible de définir des fonctions à l'aide du mot-clé function.

function greet() {
  alert('Hello, World!');
}

Manipulation du DOM

Le Document Object Model (DOM) représente la structure d'une page web. JavaScript permet de manipuler le DOM afin de modifier dynamiquement le contenu et le comportement de la page web.

document.getElementById('myElement').innerHTML = 'New Content';

Instructions conditionnelles

Les instructions conditionnelles permettent d’exécuter différents blocs de code selon des conditions spécifiées.

if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}

Tutoriel vidéo