Cours 3.2. Hello World en JavaScript

Cours 3.1 Sommaire Cours 3.3

Le JavaScript est envoyé par le serveur (comme le HTML), mais il s'exécute dans le navigateur. On dit que c'est un langage côté client, par opposition à un langage côté serveur comme le PHP ou NodeJs. Le moyen le plus simple d'écrire ses premières lignes de JavaScript est de l'insérer dans le même fichier que le HTML.

JavaScript et HTML

Pour insérer du JavaScript dans le HTML, on utilise une balise dédiée <script></script>. Par exemple, le code suivant affiche une pop-up avec le message Hello World.

<script>alert ('Hello World');</script>

Le JavaScript peut être inséré dans l'en-tête de la page (dans les balises <head></head>). Dans ce cas, il s'exécute avant que le contenu de la page soit affiché. Voici un exemple :

<html>
  <head>
    <!-- Le JavaScript est inséré dans l'en-tête HTML -->
    <script>alert ('Hello World');</script>
  </head>
  <body>
    <h1>Mon premier programme en JavaScript</h1>
  </body>
</html>

Tester l'exemple en ligne

Il est aussi possible d'insérer le JavaScript dans le corps de la page HTML (dans les balises <body></body>). C'est généralement cette solution qui est privilégiée car :

si le JavaScript doit interagir avec des éléments de la page, ceux-ci doivent être affichés ;
le JavaScript ralentit le chargement de la page. En plaçant les scripts à la fin du corps, on accélére l'affichage des pages.

<html>
  <head>
  </head>
  <body>
    <h1>Mon premier programme en JavaScript</h1>

    <!-- Le JavaScript s'exécute après le HTML -->
    <script>alert ('Hello World');</script>

  </body>
</html>

Tester l'exemple en ligne

JavaScript externe

Le JavaScript peut se trouver dans un fichier externe. Par exemple, un fichier monScript.js contiendrait le code suivant :

alert ('Hello World');

Pour indiquer au navigateur qu'il doit aller chercher le fichier, on utilise la syntaxe suivante dans le HTML :

<script src="monScript.js"></script>

Comme pour le JavScript interne, la position de la balise <script> détermine son ordre d'exécution. Là encore, pour ne pas ralentir l'affichage, il vaut mieux le placer avant la balise de fermeture </body>.

Exercice

Dans le code HTML suivant, ajouter une ligne qui permet d'insérer le script qui se trouve à l'adresse https://lucidar.me/fr/web-dev-class/files/premierJavaScript.js

<html>
  <head>
  </head>
  <body>
    <h1>JavaScript externe</h1>

    <!-- Ajouter le script externe ici -->

  </body>
</html>

Faire l'exercice en ligne

Solution

Notez que ce type d'alerte est assez désagréable pour l'utilisateur. On évitera d'utiliser la fonction alert() du JavaScript.

Quiz

Où peut-on placer le JavaScript ?

Dans l'en-tête du HTML <head>.

Dans le corps du HTML </body>.

En dehors des balises <html>.

Dans un fichier externe.

Vérifier

Où s'exécute le JavaScript

Sur le serveur, avant l'envoi de la page HTML.

Sur le serveur, après l'envoi de la page HTML.

Dans le navigateur de l'utilisateur.

Entre le serveur et le navigateur (dans le cloud).

Vérifier

Le JavaScript est ... ?

un langage côté serveur.

un langage côté client

envoyé par le serveur

envoyé par le client

Vérifier

Quelle balise permet d'insérer du JavaScript dans le HTML ?

<javascript></javascript>

<js></js>

<script></script>

<java></java>

Vérifier Bravo ! La balise </script> permet d'éxécuter différent langage dont le JavaScript.

Où faut-il placer le JavaScript pour ne pas ralentir l'affichage de la page ?

Au début de l'en-tête de la page HTML.

À la fin de l'en-tête de la page HTML.

Au début du corps de la page HTML.

À la fin du corps de la page HTML.

Vérifier

Cours 3.1 Sommaire Cours 3.3

Voir aussi

Dernière mise à jour : 02/10/2022