Pourquoi JavaScript ?
JavaScript est une langue de programmation interprétée, principalement utilisée côté client pour ajouter des fonctionnalités dynamiques et interactives aux sites web. Elle permet aux développeurs d'interagir avec l'utilisateur, de modifier le contenu du navigateur et de gérer les événements (cliques, saisies utilisateur, etc.). Un cas concret est la création d'un formulaire de contact qui vérifie automatiquement que tous les champs sont remplis avant de soumettre le formulaire.
Prerequis
- Connaissance de base en HTML et CSS pour comprendre l'intégration de JavaScript dans un site web.
- Familiarité avec les concepts de base du JavaScript (variables, structures conditionnelles, boucles).
- Un éditeur de code moderne comme Visual Studio Code ou Sublime Text.
Concepts fondamentaux
Variables
Les variables sont des conteneurs qui stockent des valeurs. Elles permettent de stocker et de manipuler des données dans le programme.
// Déclaration d'une variable
let nom = "Alice";
// Affichage de la valeur de la variable
console.log(nom); // Output : Alice
// Modification de la valeur de la variable
nom = "Bob";
console.log(nom); // Output : Bob
Fonctions
Les fonctions sont des blocs de code qui peuvent être appelés pour exécuter une tâche spécifique.
// Déclaration d'une fonction
function saluer(nom) {
return "Bonjour, " + nom;
}
// Appel de la fonction
console.log(saluer("Alice")); // Output : Bonjour, Alice
Structures conditionnelles
Les structures conditionnelles permettent d'exécuter un bloc de code uniquement si une certaine condition est vraie.
// Structure if-else
let age = 18;
if (age >= 18) {
console.log("Vous êtes majeur");
} else {
console.log("Vous êtes mineur");
}
// Structure switch
let jour = "lundi";
switch(jour) {
case "lundi":
console.log("C'est le premier jour de la semaine");
break;
case "mardi":
console.log("C'est le deuxième jour de la semaine");
break;
default:
console.log("Ce n'est pas un jour de la semaine");
}
Boucles
Les boucles permettent d'exécuter un bloc de code plusieurs fois.
// Boucle for
for (let i = 0; i < 5; i++) {
console.log(i); // Output : 0, 1, 2, 3, 4
}
// Boucle while
let compteur = 0;
while (compteur < 3) {
console.log(compteur); // Output : 0, 1, 2
compteur++;
}
Mise en pratique : projet fil rouge
Création d'un formulaire de contact
Pour créer un simple formulaire de contact avec vérification automatique des champs.
Étape 1 : HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire Contact</title>
</head>
<body>
<form id="contactForm">
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br><br>
<button type="submit">Envoyer</button>
</form>
<script src="contact.js"></script>
</body>
</html>
Étape 2 : JavaScript (contact.js)
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Empêche le rechargement de la page
let nom = document.getElementById('nom').value;
let email = document.getElementById('email').value;
let message = document.getElementById('message').value;
if (nom && email && message) {
alert('Formulaire soumis avec succès');
} else {
alert('Veuillez remplir tous les champs');
}
});
Exécution
- Enregistrez le HTML dans un fichier
index.htmlet le JavaScript dans un fichiercontact.js. - Ouvrez le fichier
index.htmldans votre navigateur pour voir le formulaire. - Remplissez le formulaire et cliquez sur "Envoyer" pour voir l'alerte appropriée.
Erreurs frequentes et debugging
1. Erreur de syntaxe
function greet(name) {
console.log("Hello, " name);
}
##
function greet(name) {
console.log("Hello, " + name);
}
2. Erreur d'indentation
if (age >= 18)
console.log("Vous êtes majeur");
##
if (age >= 18) {
console.log("Vous êtes majeur");
}
3. Erreur de portée des variables
function test() {
let x = 5;
}
console.log(x); // Output : ReferenceError: x is not defined
##
let x;
function test() {
x = 5;
}
test();
console.log(x); // Output : 5
Pour aller plus loin
1. Apprendre les fonctions fléchées
Les fonctions fléchées sont une syntaxe moderne pour définir des fonctions plus concises.
let saluer = (nom) => "Bonjour, " + nom;
console.log(saluer("Alice")); // Output : Bonjour, Alice
2. Comprendre les objets et les prototypes
Les objets en JavaScript sont une collection de propriétés et de méthodes.
let personne = {
nom: "Alice",
age: 30,
saluer: function() {
return "Bonjour, je suis " + this.nom;
}
};
console.log(personne.saluer()); // Output : Bonjour, je suis Alice
3. Utiliser la structure async/await pour gérer les promesses
Les promesses en JavaScript permettent de gérer des opérations asynchrones.
async function obtenirDonnees() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}
obtenirDonnees();
Défi pratique : Créer un mini-jeu
Créez un jeu simple où le joueur doit deviner un nombre généré aléatoirement entre 1 et 100. Utilisez des fonctions fléchées et les structures de contrôle pour gérer les entrées utilisateur.
N'oubliez pas de tester votre code et corriger les erreurs qui pourraient surgir lors de l'exécution du projet.