Lección 15: Importaciones

Para ordenar y estructurar una aplicación, JavaScript nos ofrece una serie de herramientas, llamado sistema de módulos, para la exportación e importación. Permite obtener variables, invocar funciones o instanciar objetos de otros ficheros.

Vamos a aprender a utilizarlo con una práctica muy habitual. Haremos que un fichero JavaScript importe una variable y función de otro lugar.

1- Creamos un fichero llamado tienda.js con el siguiente contenido.

export const nombre = 'Alpine';

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

Es clave que usemos export en cada elemento que deseamos hacer accesible.

2- Creamos otro fichero JavaScript llamado index.js. Será quién importe el fichero anterior.

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

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

3- Construimos un archivo HTML con el nombre index.html. Importaremos el fichero anterior con <script> y utilizando type="module".

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

Una posible estructura podría ser:

<!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>

No es necesario añadir defer, se aplica por defecto.

4- Levantamos un servidor HTTP. El sistema de módulos no funciona si abrimos el HTML desde el disco duro por temas de seguridad. Por lo que si lo abres con doble clic te fallará. Debemos interactuar con un servidor web que lo sirva.

Con node puedes instalar un servidor muy básico y levantarlo.

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

Ahora abre localhost:8000 en tu navegador favorito para ver los resultados.

Verás un texto que dice: “La tienda se llama Alpine y hay {numero aleatorio} abiertas en todo el país.”

Actividad 1

Crea un formulario que se pida una altura y calcule el tiempo que tardará en caer un objeto.

La constante de gravedad estará en otro fichero, universo.js, que importará GRAVEDAD

¡Te ayudo con los cálculos!

t = √(2h/g)

Donde:

t es el tiempo que tarda el objeto en caer (en segundos)

h es la altura desde la que se deja caer el objeto (en metros)

g es la aceleración debido a la gravedad, que se considera constante en la superficie de la Tierra y tiene un valor aproximado de 9.81 m/s².

El peso es despreciable.

Actividad 2

Continua la actividad anterior e incluyendo en una función en universo.js que formateé el resultado final de una manera más atractiva. No olvides importar la función antes de utilizarla.

Un ejemplo de como podría quedar

El objeto tardará 4,5 segundos en caer