Ce tutoriel JavaScript pour débutant vous montre comment intégrer du JavaScript dans une page HTML.
L’intégration de JavaScript dans une page HTML est essentielle pour ajouter de l’interactivité et de la dynamique à un site Web. Pour ce faire, il existe différentes méthodes, telles que l’utilisation de la balise pour inclure du code JavaScript directement dans une page HTML, ou l’utilisation d’un fichier JavaScript externe. Dans ce sujet, nous explorerons les différentes méthodes pour intégrer du JavaScript dans une page HTML.
>> Comment déclarer une variable en JavaScript ?
Création d’une Page HTML
Pour commencer, ouvrez Visual Studio Code et créez un nouveau fichier nommé 01-javascript.html. Voici la structure de base de votre fichier HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Intégrer du code Javascript dans une page HTML</title>
</head>
<body>
<script>
alert("Bonjour");
</script>
</body>
</html>En enregistrant et en ouvrant cette page dans un navigateur, vous verrez une boîte de dialogue s’afficher avec le message « Bonjour ».
Utilisation des Outils Développeur
Les outils développeur, accessibles via la console du navigateur, sont essentiels pour déboguer le code Javascript. Par exemple, si une erreur survient (comme l’absence d’un favicon), la console le signalera. Pour remédier à l’erreur de favicon, ajoutez simplement une balise link :
<link rel="icon" href="#">Cela éliminera l’erreur liée à l’absence de favicon.
Affichage dans la Console
Au lieu d’utiliser alert, nous pouvons afficher des messages dans la console en utilisant console.log :
<script>
console.log("Bonjour");
</script>En rechargeant la page, le message « Bonjour » apparaîtra dans la console. Cette méthode est plus discrète et pratique pour les messages de débogage.
Fichier Javascript Externe
Pour éviter de répéter le même code Javascript dans plusieurs pages HTML, il est préférable d’utiliser un fichier Javascript externe. Créez un dossier nommé JS et ajoutez-y un fichier 01-javascript.js :
console.log("Bienvenue dans le cours Javascript");Ensuite, liez ce fichier à votre page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Intégrer du code Javascript dans une page HTML</title>
</head>
<body>
<script src="JS/01-javascript.js"></script>
</body>
</html>Cette méthode permet de maintenir un code organisé et réutilisable.
Placement de la Balise Script
Il est crucial de placer la balise <script> juste avant la fermeture de la balise </body>. En effet, le navigateur lit le code HTML de haut en bas. Si le script est placé trop tôt, il pourrait tenter d’interagir avec des éléments HTML qui ne sont pas encore chargés, ce qui provoquerait des erreurs. Voici la structure correcte :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Intégrer du code Javascript dans une page HTML</title>
</head>
<body>
<!-- Contenu HTML -->
<script src="JS/01-javascript.js"></script>
</body>
</html>Conclusion
Nous avons couvert les bases de l’intégration de Javascript dans une page HTML. En utilisant des fichiers Javascript externes et en plaçant correctement la balise <script>, vous pouvez écrire du code propre et éviter les erreurs courantes. Restez à l’écoute pour les prochaines vidéos où nous entrerons plus en détail dans les fonctionnalités avancées de Javascript. À bientôt pour la prochaine leçon !
