JavaScript - Lesson 15: Imports

To organize and structure an application, JavaScript offers us a series of tools, called the module system, for exporting and importing. It lets us obtain variables, invoke functions, or instantiate objects from other files.

Let's learn to use it with a very common practice. We'll make one JavaScript file import a variable and a function from another location.

1- We create a file called tienda.js with the following content.

export const nombre = 'Alpine';

export function tiendasAbiertas() {
  return Math.floor(Math.random() * 10);
}

It's key that we use export on every element we want to make accessible.

2- We create another JavaScript file called index.js. It will be the one importing the previous file.

// Imports
import {nombre, tiendasAbiertas} from './tienda.js';

document.body.textContent = `La tienda se llama ${nombre} y hay ${tiendasAbiertas()} abiertas en todo el país.`

3- We build an HTML file named index.html. We'll import the previous file with <script> and using type="module".

<script type="module" src="index.js"></script>

One possible structure could be:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="index.js"></script>
</head>
<body></body>
</html>

There's no need to add defer, it's applied by default.

4- We spin up an HTTP server. The module system doesn't work if we open the HTML from the hard drive, for security reasons. So if you double-click to open it, it will fail. We need to interact with a web server that serves it.

With node you can install a very basic server and start it up.

npm install -g http-server
http-server . -p 8000

Now open localhost:8000 in your favorite browser to see the results.

You'll see a text that says: "The store is called Alpine and there are {random number} open across the country."

Activity 1

Create a form that asks for a height and calculates the time it will take for an object to fall.

The gravity constant will be in another file, universo.js, which will import GRAVEDAD

Let me help you with the calculations!

t = √(2h/g)

Where:

t is the time it takes the object to fall (in seconds)

h is the height from which the object is dropped (in meters)

g is the acceleration due to gravity, considered constant at the Earth's surface with an approximate value of 9.81 m/s².

Weight is negligible.

Activity 2

Continue the previous activity and include a function in universo.js that formats the final result in a more attractive way. Don't forget to import the function before using it.

An example of how it could look

The object will take 4.5 seconds to fall