Introduccion al Curso y JavaScript

1.1 Que es JavaScript y por que empezar aqui

JavaScript es el lenguaje de programacion de la web. Durante muchos anos solo funcionaba dentro del navegador; hoy tambien construye aplicaciones de escritorio, servidores y apps moviles. Para este curso nos interesa su terreno original: hacer que una pagina reaccione.

Una pregunta que aparece pronto es: ¿que compilador necesito? Ninguno. JavaScript ya viene incluido en todos los navegadores, asi que tu navegador es a la vez el entorno de ejecucion y la herramienta de pruebas. No hay nada que instalar para empezar.

Como esta pensado el curso

El material original combina teoria y proyectos, con una idea repetida en varias lecciones: no tiene sentido aprender la teoria si no la pones en practica. Estas 14 unidades cubren la parte de fundamentos; los proyectos del curso (carrito de compras, cotizador de seguros, app del clima, etc.) se apoyan despues en todo lo que veras aqui.

1.2 El editor y las extensiones recomendadas

El curso usa Visual Studio Code. Si ya tienes otro editor puedes continuar con el, pero estas extensiones te ahorraran tiempo:

1.3 Hola Mundo: JavaScript dentro del HTML

Hay dos formas de anadir JavaScript a una pagina: dentro del propio HTML con la etiqueta <script>, o en un archivo externo. Empecemos por la primera, que es la mas directa para ver algo funcionando.

Paso a paso

1. Crea un archivo index.html con la estructura basica de una pagina.
2. Justo antes de cerrar </body>, escribe una etiqueta <script>.
3. Dentro de ella llama a alert(), una funcion que ya existe en el lenguaje.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Introduccion a JavaScript</title>
</head>
<body>

  <h1>Mi primera pagina con JavaScript</h1>

  <!-- El navegador lee el HTML de arriba abajo.
       Al llegar aqui dice: "esto es JavaScript, lo trato distinto". -->
  <script>
    alert('Hola Mundo');
  </script>

</body>
</html>

Que hace cada parte

• <script> le avisa al navegador de que lo que viene ya no es HTML sino codigo a ejecutar.
• alert es una funcion nativa: viene incluida en el lenguaje, no la escribes tu.
• 'Hola Mundo' es el texto que quieres mostrar; va entre comillas.
• El ; final marca el fin de la instruccion (volveremos sobre esto en 1.8).

Que ocurre al ejecutarlo

Al guardar y recargar, el navegador muestra una ventana emergente con el texto Hola Mundo. Cada navegador dibuja ese aviso a su manera: Chrome, Firefox y Safari se ven distintos entre si, pero el comportamiento es el mismo.

1.4 Mover JavaScript a su propio archivo

Escribir el codigo dentro del HTML sirve para probar, pero tiene un problema: si tu sitio tiene varias paginas, tendrias que copiar y pegar el mismo codigo en todas. Duplicar codigo es la forma mas rapida de que un proyecto se vuelva imposible de mantener.

La solucion: un archivo externo

1. Crea una carpeta llamada js (algunos la llaman scripts; es preferencia personal).
2. Dentro crea app.js.
3. Mueve ahi tu codigo, sin las etiquetas <script>.
4. En el HTML, enlaza el archivo con el atributo src.

// Aqui ya NO se escribe <script>.
// El navegador sabe que este archivo
// entero es JavaScript.
alert('Hola Mundo');

  <script src="js/app.js"></script>
</body>

Detalle importante: la ruta

src funciona igual que en las imagenes (<img src="...">): indica donde esta el archivo. Usa siempre una ruta relativa al documento (js/app.js), nunca una direccion completa con 127.0.0.1. Asi el proyecto sigue funcionando cuando lo subas a un servidor, sin tocar nada.

1.5 Lo que se puede hacer con dos lineas

Antes de entrar en la teoria, vale la pena ver de que es capaz el lenguaje. No te preocupes por la sintaxis todavia: todo lo que aparece aqui se explica en las unidades siguientes.

const nombre = prompt('¿Cual es tu nombre?');

document.querySelector('.contenido').innerHTML = `${nombre} esta aprendiendo JavaScript moderno`;

Que hace cada parte

Que ocurre al ejecutarlo

La pagina pregunta el nombre. Si escribes Juan y aceptas, el contenido de la pagina pasa a decir «Juan esta aprendiendo JavaScript moderno». Si lo abre otra persona y escribe Pablo, dira Pablo. Eso es una variable: el mismo codigo produce resultados distintos segun el dato que reciba.

1.6 Comentar el codigo

Un comentario es texto que el navegador ignora. Sirve para dos cosas muy distintas: explicar que hace una parte del codigo, y desactivar temporalmente lineas para que no se ejecuten.

Las dos sintaxis

// Esto es un comentario de UNA linea. Todo lo que va detras de // se ignora.

// Pregunta al usuario su nombre
console.log('Esta linea si se ejecuta');

/*
  Esto es un comentario de MULTIPLES lineas.
  Empieza con barra-asterisco y termina con asterisco-barra.
  console.log('Esta linea NO se ejecuta');
*/

console.log('Y esta tambien se ejecuta');

Pulsa Ejecutar en el bloque anterior: veras que solo aparecen los dos mensajes que estan fuera de los comentarios.

Comentar para documentar

// Pregunta al usuario su nombre
const nombre = prompt('¿Cual es tu nombre?');

// Toma el nombre y lo muestra en pantalla
document.querySelector('.contenido').innerHTML = `${nombre} esta aprendiendo JavaScript`;

1.7 La consola de JavaScript

La consola es el panel donde el navegador muestra los mensajes de tu codigo y sus errores. Trabajaras en ella durante casi toda la primera mitad del curso, asi que conviene saber abrirla.

Los metodos de console que usaras

// El mas usado con diferencia: escribir un valor
console.log('Hola desde la consola');

// Tambien funciona con arreglos y objetos
console.log([1, 2, 3, 4]);

// .table muestra los datos como una tabla: ideal con muchos registros
console.table([1, 2, 3, 4]);

// Mensajes de error: aparecen destacados en rojo
console.error('Algo salio mal');

// Advertencias: menos graves que un error
console.warn('Esto no esta permitido');

console.time('prueba');

console.warn('Eso no esta permitido');
console.warn('Eso no esta permitido');
console.warn('Eso no esta permitido');

console.timeEnd('prueba');   // prueba: 0.42ms

1.8 Buenas practicas: el punto y coma y el orden

Hay programadores obsesionados con el formato que no avanzan en el lenguaje, y otros que dominan el lenguaje pero escriben codigo ilegible. El equilibrio esta en adoptar pronto unos pocos habitos y olvidarse del tema.

¿Es obligatorio el punto y coma?

No. A diferencia de otros lenguajes, JavaScript deduce donde termina una instruccion. Este codigo funciona:

console.log('Hola')
console.log('Mundo')

Pero si pones dos instrucciones en la misma linea, el punto y coma si es obligatorio:

console.log('Hola') console.log('Mundo')

console.log('Hola'); console.log('Mundo');

Indentacion dentro de bloques

Cuando un bloque de codigo esta dentro de llaves, su contenido se indenta. No es obligatorio, pero deja claro a simple vista que pertenece a que.

function saludar() {
console.log('Hola');
console.log('Que tal');
}

function saludar() {
    console.log('Hola');
    console.log('Que tal');
}

Sobre el eterno debate de tabuladores frente a espacios: elige uno, se consistente y sigue adelante. Como dice el material, es mas probable que te contraten por saber escribir codigo que por ganar ese debate.

1.9 ESLint: una herramienta que revisa tu codigo

Un linter es un programa que revisa tu codigo y avisa cuando no cumple unas reglas de estilo. ESLint es el mas usado en JavaScript. Se instala con npm, el gestor de paquetes de Node.js:

npm install -g eslint

Despues creas un archivo de configuracion en la raiz del proyecto que define que reglas quieres que se revisen:

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "semi": ["error", "always"]
  }
}

Que dice esta configuracion

• ecmaVersion: 6 — interpreta el codigo como ECMAScript 6, la version que introdujo la sintaxis moderna.
• "semi": ["error", "always"] — la regla semi revisa los punto y coma; "always" exige que siempre esten y "error" marca su ausencia como error, no como simple aviso.

eslint js/app.js          # informa: falta punto y coma en las lineas 1, 2, 6, 7 y 8
eslint js/app.js --fix    # reescribe el archivo anadiendo los punto y coma

La opcion --fix es la razon de ser de estas herramientas: corregir 5.000 lineas a mano no es viable. Muchas empresas definen su propia guia de estilo (o adoptan una publica) y la aplican asi a todo el equipo.

1.10 Ejercicios practicos

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejercicio 1</title>
</head>
<body>
  <h1>Hola</h1>
  <script src="js/app.js"></script>
</body>
</html>

alert('Hola, soy Ana');

console.log('Mensaje normal');
console.warn('Cuidado con esto');
console.error('Esto fallo');

console.log(['lunes', 'martes', 'miercoles']);
console.table(['lunes', 'martes', 'miercoles']);

console.log('Uno');
console.log('Dos');
console.log('Tres');
console.log('Cuatro');
console.log('Cinco');

// console.log('Uno');

/*
console.log('Dos');
console.log('Tres');
console.log('Cuatro');
*/

console.log('Cinco');

1.11 Resumen de lo aprendido

1.12 Verificacion de cierre

Marca lo que ya sabes hacer sin consultar nada:

• Se crear un HTML y enlazarle un archivo .js externo
• Se por que el <script> va al final del body
• Se abrir la consola en mi navegador
• Se escribir un mensaje con console.log()
• Se comentar una linea y un bloque de varias lineas
• Entiendo que hace --fix en ESLint