Creando archivos personalizados

vs code

Ahora que tenemos un editor de código podemos crear archivos que nos permitan conservar los programas que hagamos.

Creando un nuevo proyecto

El primer paso es dirigirnos a la Barra Lateral > Explorador y abrir una carpeta donde guardaremos nuestros proyectos.

INFO

Si aún no tenemos una carpeta, podemos crear una directamente desde este menú

Esto nos ayudará a mantener organizados nuestros archivos mientras aprendemos.

Agregando un archivo HTML

Una vez que tengamos abierta una carpeta dentro de VS Code, el panel cambiará ligeramente con una nueva sección.

Ahora podemos darle Clic derecho > Nuevo archivo.

Debemos crear un archivo con la extensión .html, ya que es el tipo de archivos que reconoce un navegador. Por ejemplo: mi-primer-programa.html.

Generando la estructura HTML

Dentro de él debemos escribir ! (signo de admiración) para activar el atajo de autocompletado que nos dará el código inicial.

El código se verá algo así:

mi-primer-programa.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Agregando código de JavaScript

Este código nos permite crear una página web, que es donde vivirá nuestro código.

Por ahora sólo tenemos código HTML, para ejecutar JavaScript debemos hacer un paso extra.

INFO

Hay varias maneras de agregar JavaScript a una página web, por ahora sólo veremos la más sencilla.

Debemos agregar un poco más de código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log("¡Hola, mundo!");
    </script>
  </body>
</html>

En medio de <script>...</script> podemos agregar las líneas de JavaScript que necesitemos.

Ejecutando el código en el navegador

Ahora el archivo que acabamos de crear lo podemos abrir con nuestro navegador.

Este programa sólo imprime un ¡Hola, mundo! a la consola, por lo que debemos abrirla para ver el resultado.

De esta manera podemos crear archivos que preserven el código que hagamos a lo largo de las siguientes lecciones. Incluso podemos volver a ellos para repasar los conceptos que vimos.

TIP

Recomendamos crear un nuevo archivo para cada lección

☝️🤓
🏋️‍♂️ Ejercicio

Modifica el código dentro de <script> para imprimir tu nombre en la consola.

Por ejemplo:

console.log("¡Hola, [NOMBRE]!");
INFO

Una vez que modificamos el archivo, debemos guardar los cambios y actualizar el navegador para ver los resultados.

Comentarios