Exercise - Importing JavaScript

In this exercise we will practice several use-case scenarios of including JavaScript in our HTML document.

Importing a single JavaScript file

Create an HTML file that includes (imports) a single, external myscript.js file, located in the same folder as the HTML file.

Solution

The index.html source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Import a single JavaScript file -->
    <script src="myscript.js"></script>
</head>
<body>

</body>
</html>

The myscript.js file:

alert("Hello from a JavaScript file!");

Important: Since we do not have a web server, and we only want to open and test a local HTML file in a browser, we used the document-relative path of src="myscript.js". In production, you can include the / symbol, which represents the root folder on your web host. The snippet then becomes:

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

JavaScript file from a custom folder

Create an HTML page that imports the myscript.js file located in the js/ directory.

Solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Import a single JavaScript file from a custom directory -->
    <script src="js/myscript.js"></script>
</head>
<body>

</body>
</html>

The myscript.js file, placed in a js/ directory:

alert("Hello from a JavaScript file placed in a custom directory!");

Note: While testing the HTML on a local machine, we did not use root folder symbol / in our document-relative path. In production, we can indeed include the root folder symbol in the path, so the code snippet becomes:

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

Importing multiple JavaScript files

Create an HTML file that imports multiple external JavaScript files.

Solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Import multiple JavaScript files from a custom directory -->
    <script src="js/myscript.js"></script>
    <script src="js/my-other-script.js"></script>
</head>
<body>

</body>
</html>

The content of the myscript.js file, placed in a js/ directory:

alert("Hello from a JavaScript file placed in a custom directory!");

The content of the my-other-script.js file, placed in a js/ directory:

alert("Hello from a JavaScript file placed in a custom directory!");

Note: If simply opening and testing a local HTML file in a browser, omit the / symbol from the path. In production, depending on how your host's setup, you can indeed use paths with the root folder symbol / included:

<script src="/js/myscript.js"></script>
<script src="/js/my-other-script.js"></script>

Importing JavaScript from an external server

Create an index.html file that imports a JavaScript file from an external server/website.

Solution

The index.html file listing:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Include a JavaScript file from a remote host -->
    <link rel="stylesheet" href="https://www.example.com/some-script.js">
</head>
<body>

</body>
</html>

Note: Replace "https://www.example.com/some-script.js" with the actual URL/address that points to a remotely hosted JavaScript file.

Creating inline JavaScript code styles

Create an HTML document that uses inline JavaScript code.

Solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Define and use inline JavaScript statement(s) -->
    <script>
       alert("This is an inline JavaScript code.");
    </script>    
</head>
<body>

</body>
</html>

Summary

In this exercise, we went through the following scenarios:

Importing a single JavaScript file.
Importing a single JavaScript file from a custom folder.
Importing multiple JavaScript files.
Importing a JavaScript file hosted on another server.
Specifying inline JavaScript code.

In our next exercise, we will create an HTML document that includes all the usual metadata elements and external files.