Découvrir JavaScript
Comprendre ce qu'est JavaScript, à quoi il sert et comment écrire ses premières lignes de code dans un navigateur.
Découvrir JavaScript
Introduction
JavaScript est l'un des langages les plus utilisés au monde pour créer des sites web interactifs. Quand on débute dans le développement web, on rencontre souvent trois technologies ensemble :
- HTML pour structurer le contenu ;
- CSS pour gérer l'apparence ;
- JavaScript pour ajouter le comportement. Dans ce chapitre, nous allons voir le rôle de JavaScript, comprendre où il s'exécute, puis écrire quelques premières instructions simples.
Ce que vous allez apprendre
À la fin de ce chapitre, vous saurez :
- expliquer à quoi sert JavaScript ;
- faire la différence entre HTML, CSS et JavaScript ;
- ouvrir la console du navigateur ;
- écrire et lire une instruction simple avec
console.log(); - repérer les erreurs les plus fréquentes ;
- créer vos premiers petits programmes.
1. HTML, CSS et JavaScript : qui fait quoi ?
Pour comprendre JavaScript, imaginons une page web comme une maison.
HTML : la structure
Le HTML correspond à la structure de la maison : les murs, les portes, les fenêtres. Exemple :
<h1>Bienvenue</h1>
<p>Mon premier site web.</p>
Ici, le navigateur comprend qu'il doit afficher un titre et un paragraphe.
CSS : l'apparence
Le CSS correspond à la décoration : les couleurs, les tailles, les espacements. Exemple :
h1 {
color: blue;
}
Le titre devient bleu.
JavaScript : le comportement
JavaScript correspond aux mécanismes qui font vivre la maison. Il permet par exemple de :
- ouvrir un menu ;
- afficher un message ;
- vérifier un formulaire ;
- charger des données ;
- modifier le contenu d'une page. Sans JavaScript, une page reste surtout statique.
2. Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation créé à l'origine pour ajouter de l'interactivité dans les navigateurs. Aujourd'hui, il sert aussi à créer :
- des applications web ;
- des applications mobiles ;
- des applications desktop ;
- des serveurs ;
- des outils de développement. C'est un langage très polyvalent.
3. Où JavaScript s'exécute-t-il ?
Dans le navigateur
C'est son environnement le plus connu. Quand vous cliquez sur un bouton et qu'un menu s'ouvre, JavaScript est souvent en train d'agir.
Sur un serveur
Avec Node.js, JavaScript peut aussi s'exécuter côté serveur. Cela permet par exemple de créer des API ou de traiter des données.
4. Pourquoi apprendre JavaScript ?
Il est accessible
Quelques lignes suffisent pour voir un résultat.
console.log("Bonjour");
Il est très demandé
JavaScript est utilisé dans énormément de projets web.
Il possède une grande communauté
Vous trouverez facilement :
- des tutoriels ;
- des bibliothèques ;
- des exemples ;
- de l'aide en ligne.
5. Ouvrir la console du navigateur
La console est un outil très pratique pour tester du code. Pour l'ouvrir :
- faites un clic droit sur la page ;
- cliquez sur Inspecter ;
- ouvrez l'onglet Console. La console sert à :
- afficher des informations ;
- tester une instruction ;
- repérer des erreurs.
6. Votre première instruction JavaScript
Écrivons notre premier programme :
console.log("Bonjour tout le monde !");
Cette ligne demande au navigateur d'afficher un message dans la console.
console
console est un objet fourni par le navigateur.
log()
log() est une méthode qui affiche une valeur.
"Bonjour tout le monde !"
Ceci est une chaîne de caractères, c'est-à-dire du texte.
7. Comment lire cette instruction ?
On peut la lire ainsi :
Affiche dans la console le texte "Bonjour tout le monde !".
8. Quelques exemples supplémentaires
console.log("Je m'appelle Corneille");
console.log("J'apprends JavaScript");
console.log("Je vais progresser étape par étape");
Résultat :
Je m'appelle Corneille
J'apprends JavaScript
Je vais progresser étape par étape
9. Erreurs fréquentes
Oublier les guillemets
Incorrect :
console.log(Bonjour);
Correct :
console.log("Bonjour");
Oublier une parenthèse
Incorrect :
// console.log("Bonjour";
Correct :
console.log("Bonjour");
Se tromper dans le nom de la fonction
Incorrect :
Console.log("Bonjour");
Correct :
console.log("Bonjour");
10. Résumé
Dans ce chapitre, nous avons vu :
- le rôle de JavaScript ;
- la différence entre HTML, CSS et JavaScript ;
- l'endroit où JavaScript s'exécute ;
- l'utilisation de la console ;
- la première instruction
console.log(); - les erreurs les plus courantes.
Exercices
Exercice 1
Affichez votre prénom dans la console.
Exercice 2
Affichez votre âge dans la console.
Exercice 3
Affichez trois messages différents dans la console.
Exercice 4
Affichez une phrase complète vous présentant. Exemple :
Je m'appelle Alice et j'apprends JavaScript.
Corrigés
Correction exercice 1
console.log("Corneille");
Correction exercice 2
console.log(24);
Correction exercice 3
console.log("Bonjour");
console.log("Comment allez-vous ?");
console.log("J'apprends JavaScript");
Correction exercice 4
console.log("Je m'appelle Corneille et j'apprends JavaScript.");
Prochaine étape
Dans le prochain chapitre, nous apprendrons à stocker des informations dans des variables.