1.3 JavaScript dans les navigateurs
Maintenant que notre environnement est prêt, nous allons écrire notre premier code JavaScript. Pour cela, nous avons besoin d'un élément <script>. Il y a deux endroits où l'on peut ajouter un élément de script dans une page HTML : à l'intérieur de la balise <head> ou de la balise <body>. La meilleure pratique consiste à le placer à la fin du <body>, après tous les éléments comme les <h1> et <p>.
Pourquoi placer le script à la fin du body
Il y a deux raisons. La première : le navigateur analyse le fichier de haut en bas. Si on place le <script> dans le <head>, le navigateur s'occupera d'exécuter et d'analyser le code avant même d'avoir affiché le contenu de la page, ce qui crée une mauvaise expérience utilisateur. La seconde raison : le code à l'intérieur du <script> doit pouvoir communiquer avec les éléments de la page (par exemple pour les afficher ou les masquer). En plaçant le script en bas, on est certain que tous les éléments ont déjà été rendus par le navigateur.
Reprenons maintenant le code écrit dans la vidéo précédente, mais cette fois dans la balise <script> de notre page. On tape console.log("Bonjour tout le monde");. Il s'agit d'une instruction, c'est-à-dire un morceau de code qui exprime une action à effectuer. Toutes les instructions JavaScript doivent se terminer par un point-virgule. Le texte entre guillemets s'appelle une chaîne de caractères, et ce petit message sera envoyé directement dans la console.
On peut aussi écrire un commentaire au-dessus du code en utilisant //. Un commentaire sert uniquement à documenter le code, il n'est pas exécuté par le moteur JavaScript. En rechargeant la page, on retrouve bien dans la console le message « Bonjour tout le monde ». Voilà pour cette vidéo, on se retrouve dans la prochaine !
En résumé
Cette leçon couvre l'intégration de JavaScript dans les pages HTML et les bonnes pratiques de placement du code. Elle explique pourquoi les balises script doivent être placées en fin du body plutôt que dans la head, et introduit les concepts fondamentaux du code JavaScript : les instructions, les chaînes de caractères, les commentaires et la syntaxe de base avec console.log().
Points clés
- Les balises script doivent être placées en fin du body pour optimiser le chargement de la page et l'expérience utilisateur
- Le navigateur analyse le fichier HTML de haut en bas, c'est pourquoi les scripts au début (head) interfèrent avec le contenu
- Le code JavaScript doit accéder aux éléments DOM, lesquels doivent être complètement rendus avant l'exécution du script
- Chaque instruction JavaScript doit se terminer par un point-virgule (;)
- console.log() envoie des messages à la console du navigateur pour afficher des données
- Les commentaires en JavaScript documentent le code sans être exécutés par le moteur
Questions fréquentes
Pourquoi placer les scripts en fin du body plutôt que dans la head ?
Cela évite que le navigateur soit préoccupé par l'exécution du code JavaScript pendant qu'il charge le contenu de la page, ce qui améliore l'expérience utilisateur. Cela permet aussi au code d'accéder sans problème aux éléments HTML qui sont rendus avant l'exécution des scripts.
Quel est le rôle de console.log() en JavaScript ?
console.log() envoie un message ou une valeur directement à la console du navigateur. C'est un outil utile pour afficher des données et déboguer le code en observant ses résultats.
Comment documenter le code en JavaScript ?
On utilise des commentaires en JavaScript qui ne seront pas exécutés par le moteur. Ils permettent de documenter le code et d'expliquer son fonctionnement sans affecter le comportement du programme.