Introduction à JavaScript
JavaScript est le langage de programmation du web.
Il permet d’ajouter des interactions et du comportement aux pages web.
Aujourd’hui, la majorité des sites internet utilisent JavaScript.
Grâce à lui, on peut :
- Créer des menus interactifs
- Afficher ou cacher des éléments
- Valider des formulaires
- Créer des animations
- Modifier une page sans la recharger
1. Le rôle de JavaScript dans le web
Sur le web, chaque technologie possède un rôle différent.
| Technologie | Rôle |
|---|---|
| HTML | Structure de la page |
| CSS | Apparence et design |
| JavaScript | Comportement et interactions |
JavaScript agit donc comme le cerveau interactif du site web.
2. Comment exécuter JavaScript
JavaScript est exécuté directement par le navigateur.
Les navigateurs modernes comme :
- Google Chrome
- Firefox
- Microsoft Edge
- Safari
possèdent tous un moteur JavaScript intégré.
Lorsqu’une page HTML contient du JavaScript, le navigateur lit puis exécute automatiquement le code.
3. La balise script
Pour ajouter du JavaScript dans une page HTML, on utilise la balise <script>.
<script>
console.log("Bonjour JavaScript");
</script>
Ce code sera exécuté automatiquement par le navigateur.
4. Le fichier main.js
Dans les vrais projets, on évite d’écrire JavaScript directement dans le HTML.
On préfère utiliser un fichier séparé.
<script src="main.js"></script>
Cela permet :
- De mieux organiser le code
- De rendre le projet plus propre
- De faciliter la maintenance
5. defer
L’attribut defer permet d’attendre que le HTML soit complètement chargé avant d’exécuter JavaScript.
<script src="main.js" defer></script>
Sans defer, JavaScript pourrait essayer d’accéder à des éléments HTML qui ne sont pas encore chargés.
Aujourd’hui, defer est une pratique standard dans les projets modernes.
6. console.log()
La fonction console.log() permet d’afficher des informations dans la console du navigateur.
console.log("Bonjour le monde");
Cette fonction est très utilisée pour :
- Tester du code
- Afficher des variables
- Déboguer un programme
Console JavaScript
> Bonjour JavaScript
7. Les outils développeur
Les navigateurs offrent des outils développeur très puissants.
Ils permettent :
- D’inspecter le HTML
- De modifier le CSS
- D’exécuter JavaScript
- De voir les erreurs
Pour ouvrir les DevTools :
- F12
- Ou clic droit → Inspecter
Résumé rapide
| Concept | Utilité |
|---|---|
| <script> | Ajouter JavaScript dans une page |
| src | Charger un fichier JavaScript externe |
| defer | Attendre le chargement du HTML |
| console.log() | Afficher des informations dans la console |