Lesson 3.2. JavaScript Hello World

Lesson 3.1 Summary Lesson 3.3

JavaScript is sent from the server (like HTML), but it runs in the browser. It is said to be a client-side language, as opposed to a server-side language like PHP or NodeJs. The easiest way to write its first lines of JavaScript is to insert it in the same file as the HTML.

JavaScript and HTML

To insert JavaScript into HTML, we use a dedicated <script></script> tag. For example, the following code displays a pop-up with the message Hello World.

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

JavaScript can be inserted in the page header (in the <head></head> tags). In this case, it runs before the page content is displayed. Here is an example:

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

Try online

It is also possible to insert the JavaScript in the body of the HTML page (in <body></body> tags). This is generally the preferred solution because:

if the JavaScript has to interact with elements of the page, they have to be displayed ;
the JavaScript slows down the loading of the page. Placing the scripts at the end of the body speeds up the display of the pages.

<html>
  <head>
  </head>
  <body>
    <h1>My first JavaScript code</h1>

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

  </body>
</html>

Try online

External JavaScript

The JavaScript can be in an external file. For example, a file myScript.js file would contain the following code:

alert ('Hello World');

To tell the browser to fetch the file, the following syntax is used in HTML:

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

As for the internal JavScript, the position of the <script> tag determines its order of execution. Again, in order not to slow down the display, it is better to place it before the </body> closing tag.

Exercise

In the following HTML code, add a line that allows you to insert the script that is located at the address https://lucidar.me/fr/web-dev-class/files/premierJavaScript.js

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

    <!-- Add external JavaScript here -->

  </body>
</html>

Do the exercise online

Solution

Note that this type of alert is quite unpleasant for the user. One should avoid using the alert() function in JavaScript.

Quiz

Where can we place the JavaScript?

In the HTML header <head>.

In the body of the HTML </body>.

Outside the tags <html>.

In an external file.

Check

Where the JavaScript runs?

On the server, before sending the HTML page.

On the server, after the HTML page is sent.

In the user's browser.

Between the server and the browser (in the cloud).

Check

JavaScript is ... ?

a server-side language.

a client-side language

sent by the server

sent by the client

Check

Which tag allows you to insert JavaScript into HTML?

<javascript></javascript>

<js></js>

<script></script>

<java></java>

Check Bravo! The </script> tag allows you to run different languages including JavaScript.

Where to place the JavaScript to prevent slowing down the page display

At the beginning of the HTML page header.

At the end of the HTML page header.

At the beginning of the HTML body.

At the end of the HTML body.

Check

Lesson 3.1 Summary Lesson 3.3

Lesson 3.2. JavaScript Hello World

JavaScript and HTML

External JavaScript

Exercise

Quiz

See also