Antes de continuar

vs code preparación

Ahora que sabemos crear archivos personalizados, hablemos un poco del flujo de trabajo que recomendamos usar en este curso.

Sobre la ruta de estudio

A pesar de que existen diferentes alternativas para agregar JavaScript a nuestros proyectos, en esta ruta de estudio nos concentraremos en usarlo mediante el procedimiento que aprendimos en la lección pasada.

Sobre la creación de archivos

Nuestra siguiente recomendación es crear un nuevo archivo .html por cada lección que veamos. Todos van a seguir la misma estructura básica:

  • Crear un archivo con el nombre de la lección. Por ejemplo: variables.html
  • Agregar el código HTML por defecto
  • Agregar las etiquetas <script>
  • Escribir el código de las lecciones y ejercicios

Por ejemplo:

Sobre Live Server

Por defecto, cuando modificamos el código dentro de nuestros archivos, debemos recargar la página en el navegador para ver los cambios. Esto puede ser un poco molesto, especialmente cuando estamos aprendiendo.

Para solucionar este problema, podemos usar una extensión de VS Code llamada Live Server.

INFO

Una extensión es como un mini programa que le agrega funcionalidad a nuestro editor de código.

Instalación

Para instalar Live Server, debemos:

  • Ir a la barra lateral de VS Code y abrir el panel de Extensiones
  • En la barra de búsqueda, escribir Live Server
  • Instalamos la extensión, usualmente es la primera opción en los resultados

Uso

Una vez instalada la extensión, podemos abrir nuestros archivos HTML de una manera más conveniente:

  1. Dar clic derecho sobre el archivo HTML
  2. Seleccionar Open with Live Server

Esto abrirá nuestro archivo en el navegador.

Ahora cada vez que hagamos cambios en el archivo y guardemos, la página se actualizará automáticamente.

Comentarios