Introduction
JavaScript n'a pas besoin d'introduction. C'est l'un des langages de programmation les plus populaires pour le développement web. Il fonctionne de manière similaire à HTML et CSS. Tous ces langages aident à concevoir et à développer des applications et des programmes web.
Alors, en quoi JavaScript est-il particulièrement utile ? Grâce à JavaScript, vous pouvez rendre vos applications et pages web très interactives. Il n'y a pas de place pour la complaisance dans la sphère moderne. Vous devez capter l'attention de vos visiteurs dès les premières secondes et les maintenir engagés. Il ne fait aucun doute qu'un design web intéressant et réactif est l'un des meilleurs moyens d'y parvenir. Heureusement, la plupart des navigateurs prennent en charge JavaScript. Il peut être exécuté sur votre navigateur à l'aide de moteurs intégrés.
Ajouter du JavaScript à l'HTML
Si vous souhaitez utiliser des fichiers JavaScript pour votre application web, vous devez les exécuter parallèlement au balisage HTML. Il existe deux façons d'ajouter du JavaScript à l'HTML. L'une consiste à le faire en ligne (inline) dans un document HTML. L'autre consiste à l'ajouter sous forme de fichier séparé. Ce fichier sera téléchargé en même temps que le document HTML.
Dans ce tutoriel, nous explorerons en détail comment ajouter du JavaScript à l'HTML en utilisant ces deux méthodes.
Comment ajouter du JavaScript en ligne (inline) aux documents HTML
Tout d'abord, nous allons voir comment ajouter du JavaScript en ligne dans un document HTML. Pour ce faire, vous devez utiliser la balise HTML dédiée. Il s'agit de <script>. Cette balise entoure le code JavaScript. Vous pouvez placer la balise n'importe où dans l'ensemble de votre balisage HTML. L'endroit où vous la placez dépend du moment où vous souhaitez que le JavaScript se charge.
Par exemple, vous pouvez la placer dans la section <head>, la section <body>, ou même après la balise de fermeture </body>. Si vous souhaitez séparer le JavaScript du contenu principal du code HTML, il est préférable de placer la balise dans la section <head>. Celle-ci contiendra le code JavaScript. D'un autre côté, vous souhaiterez peut-être que votre code JavaScript s'exécute à l'intérieur de la mise en page de votre page web. Si tel est le cas, vous devez placer la balise dans la section <body>. Vous ferez cela si, par exemple, vous utilisez document.write pour générer du contenu.
Une meilleure façon de comprendre cela serait à travers un exemple de code. Considérez le document HTML suivant qui est vide. Le titre du navigateur pour ce document est La date d’aujourd'hui :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La date d'aujourd'hui</title> </head> <body> </body> </html> |
Comme vous pouvez le voir, il n'y a aucune trace de JavaScript ici. Le document ne contient que le balisage HTML pour le moment. Maintenant, nous aimerions ajouter du code JavaScript en ligne pour qu'il se charge et s'exécute simultanément. Considérez le morceau de code JavaScript suivant :
|
1 2 |
let d = new Date(); alert("La date d'aujourd'hui est " + d); |
Selon le code ci-dessus, nous permettons à notre page web d'afficher une alerte avec la date d'aujourd'hui. Ainsi, peu importe quand le visiteur lance le site, la page affichera la date actuelle.
Maintenant, pour ajouter ce morceau de code JavaScript au document HTML, nous allons utiliser la balise <script>. Tout d'abord, vous devez ajouter le code JavaScript entre les balises <head>. Cela indique à la page web que ce code particulier doit se charger avant le reste du contenu de la page. Vous pouvez ajouter le code sous les balises <title>. Voici comment procéder :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Date d'aujourd'hui</title> <script> let d = new Date(); alert("La date d'aujourd'hui est " + d); </script> </head> <body> </body> </html> |
Votre code JavaScript est maintenant ajouté. Votre page web s'exécutera et chargera ce script avant le reste de la page. Lorsque vous lancerez votre site, vous recevrez une alerte avec la date actuelle, quelque chose comme ceci :
C'est ainsi que vous ajouteriez le code dans la section <head> du document HTML. L'alternative consisterait à ajouter le script soit à l'intérieur, soit à l'extérieur des balises <body>. Comme vous le verrez dans l'exemple ci-dessous, nous ajouterons ce morceau de code après la section <head> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Date d'aujourd'hui</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>La date d'aujourd'hui est " + d + "</h1>" </script> </body> </html> |
À la suite de cette modification, vous verrez quelque chose comme ceci lors du rechargement de la page :
Comment ajouter du JavaScript à l'HTML avec un fichier JavaScript séparé
Les petits scripts JavaScript fonctionnent bien avec les fichiers HTML. En effet, ils s'exécutent entièrement sur une seule page ou moins. Si vous travaillez avec des scripts plus volumineux qui occupent plusieurs pages, le fichier peut devenir très difficile à comprendre. C'est pourquoi vous pourriez avoir besoin de l'ajouter sous forme de fichier JavaScript séparé. Le fichier se chargerait simultanément avec le document HTML.
Dans cette section, nous verrons comment ajouter du JavaScript à l'HTML en utilisant un fichier séparé. Le code est généralement hébergé dans un ou plusieurs fichiers .js. Le document HTML fera référence à ces fichiers comme à tout autre élément externe. Les raisons pour lesquelles vous pourriez vouloir utiliser un fichier JavaScript totalement séparé sont nombreuses. Principalement, cela rend le code beaucoup plus facile à lire et à comprendre. Sans oublier que des fichiers séparés permettent aux pages mises en cache de se charger rapidement et sont également relativement plus faciles à maintenir.
Pour tirer parti de ces avantages, vous devez savoir comment connecter les deux l'un à l'autre : le fichier JavaScript et le document HTML. Pour vous aider à comprendre, nous allons prendre l'exemple d'un petit projet web. Ce projet supposé contient un fichier index.html principal à la racine, style.css dans le répertoire css/ et script.js dans le répertoire js/. Voici notre petit projet :
|
1 2 3 4 5 6 7 8 9 10 11 |
projet/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Pour notre balisage HTML, nous utiliserons le document que nous avons utilisé précédemment :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Date d'aujourd'hui</title> </head> <body> </body> </html> |
Maintenant que nous avons nos deux documents, nous pouvons commencer à les connecter. Nous devons ajouter le code JavaScript concernant la date au fichier script.js. Vous l'ajouterez sous forme d'en-tête <h1> comme suit :
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>La date d'aujourd'hui est " + d + "</h1>" |
Pour connecter le code au document HTML, vous allez ajouter une référence au script. La référence doit être présente soit à l'intérieur, soit en dessous de la section <body> du modèle HTML. Voici le code que vous utiliserez ici :
|
1 |
<script src="js/script.js"></script> |
Comme vous pouvez le voir, nous utilisons la balise <script>. La balise indique le fichier script.js qui se trouve dans le répertoire js/ du projet. Voici comment le code apparaîtra dans le document HTML :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La date d'aujourd'hui</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Si vous le souhaitez, vous pouvez apporter quelques modifications stylistiques pour embellir votre page. Par exemple, ajoutons une couleur d'arrière-plan à l'en-tête <h1>. Nous ferons cette modification dans le fichier style.css :
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Puisque la modification doit être affichée dans l'en-tête, nous la référencerons dans la section <head> du document HTML. Voici comment vous ferez référence à ce fichier CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La date d'aujourd'hui</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Maintenant que nous avons fait les références requises, vous pouvez visualiser les changements. Chargez le fichier index.html dans votre navigateur et vous verrez une page comme celle-ci :
Si vous souhaitez mettre à jour le code, vous pouvez modifier toutes vos pages à partir d'un seul emplacement. Cela rend la maintenance des pages web très facile. C'est l'avantage d'utiliser un fichier séparé pour vos scripts JavaScript.
Conclusion
Nous espérons que ce tutoriel vous a aidé à en savoir plus sur le processus d'ajout de JavaScript à HTML. Nous avons vu comment le faire directement dans un document HTML (inline) ainsi que comment l'ajouter sous forme de fichier .js. Maintenant que vous connaissez les bases, vous pouvez faire bien plus avec JavaScript dans HTML.
Voici quelques ressources de notre blog qui vous aideront à utiliser davantage JavaScript :
- Si vous construisez votre propre application web, jetez un œil à notre guide sur la façon de choisir la meilleure configuration de serveur.
- Si vous voulez apprendre comment configurer un blog avec Ghost, jetez un œil à ce tutoriel.
- Jetez un œil à ce tutoriel pour apprendre à installer Node.js sur Ubuntu 18.04.
Bonne programmation !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.