Introducción a JavaScript para principiantes

Configurando el entorno

Si queremos escribir código Javascript, necesitamos un editor de código. Algunos editores muy extendidos hoy en día pueden ser:

  • Visual Studio Code
  • Sublime Text
  • Atom

Hay muchos más pero mi favorito es VSCode, que se puede descargar desde su web oficial. Es simple de utilizar, ligero y multiplataforma, es el que utilizaré en el curso así que podéis descargarlo e instalarlo siguiendo los pasos.

Lo segundo que necesitamos para tener un buen entorno de trabajo es Node, que se puede descargar desde su web oficial. Estrictamente no es necesario, pero es muy útil tenerlo para instalar librerías de terceros usando su gestor de paquetes npm.

Pausad el vídeo y tomaros vuestro tiempo para instalar Node, la versión LTS os servirá perfectamente; cuando lo tengáis seguiremos configurando un poco VSCode.

Para configurar VSCode vamos a hacerlo con un nuevo proyecto. Simplemente es necesario crear un directorio (por ejemplo curso-js) y lo abriremos con VSCode.

Añadiremos un nuevo fichero llamado index.html, se supone que ya deberéis saber un poco de HTML así que no os extrañará esta parte. Ahora podemos escribir un ! y presionar el tabulador, eso generará una plantilla HTML predefinida, también se puede escribir html:5:

index.html

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>

Guardamos… y ahora vamos a instalar una extensión llamada Live Server que nos servirá para ver y actualizar en tiempo real los cambios en nuestras páginas HTML.

Una vez instalada y habiendo recargado VSCode si es necesario, podemos hacer clic derecho en el index.html y abrirlo en el Live Server.

Ahora si escribimos algo de código en el body, debería mostrarse automáticamente en el navegador al guardar el fichero:

<body>
  <h1>Hola mundo</h1>
</body>