Aprende JavaScript desde cero

Un programa es una lista de instrucciones que el ordenador ejecuta en orden, de arriba abajo. En JavaScript, console.log() muestra en la consola lo que pongas entre los paréntesis: un texto entre comillas o el resultado de una operación.

Cada instrucción suele terminar en punto y coma. Lo que va detrás de // es un comentario: el ordenador lo ignora y sirve para explicar el código a quien lo lea.

Una variable es un nombre que guarda un valor para usarlo después. Con const declaras una que no vas a reasignar y con let una que sí puede cambiar. La antigua var se sigue entendiendo, pero hoy se prefieren las otras dos.

Los valores tienen un tipo: texto (string), número (number), verdadero o falso (boolean), y también undefined y null para «sin valor». El operador typeof te dice de qué tipo es algo.

Con if el programa ejecuta un bloque solo si se cumple una condición, y con else indicas qué hacer si no. Para comparar se usan === (igual), !== (distinto), <, >, <= y >=.

Usa siempre === en lugar de ==: el doble igual convierte los tipos antes de comparar y da resultados sorprendentes, como que "5" == 5 sea verdadero.

Un array es una lista ordenada de valores entre corchetes. Cada elemento tiene una posición que empieza en 0, y length te dice cuántos hay. Con push() añades uno al final.

Un bucle repite un bloque de código. for...of recorre los elementos de un array uno a uno, sin que tengas que llevar la cuenta de las posiciones.

Una función agrupa código con un nombre para reutilizarlo. Recibe datos (parámetros) y puede devolver un resultado con return. Así no repites la misma operación en varios sitios.

Además de function, existe la sintaxis de flecha =>, más corta, muy usada para funciones pequeñas.

Un objeto agrupa datos relacionados en pares clave–valor entre llaves. Accedes a cada valor con un punto (usuario.nombre) y puedes añadir o cambiar propiedades en cualquier momento.

JSON es un formato de texto basado en esta misma forma de escribir objetos y es el que usan casi todas las APIs. JSON.stringify() convierte un objeto en texto y JSON.parse() hace lo contrario.

Los arrays traen métodos que reciben una función y la aplican a cada elemento. filter() se queda con los que cumplen una condición, map() transforma cada uno y reduce() los combina en un solo valor, como una suma.

Estos métodos no modifican el array original: devuelven uno nuevo. Así el código es más fácil de seguir que con un bucle que va cambiando variables.

El DOM es la representación de la página que el navegador pone a disposición de JavaScript. Con document.querySelector() buscas un elemento usando un selector CSS y con textContent cambias su texto.

addEventListener() ejecuta una función cuando ocurre algo, como un clic. Usa textContent y no innerHTML para mostrar datos que escribe el usuario: así evitas que se cuele código.

Pedir datos a un servidor tarda, y JavaScript no se queda bloqueado esperando: trabaja con promesas, valores que llegarán más adelante. fetch() hace una petición y devuelve una promesa.

Dentro de una función async puedes escribir await para esperar a la promesa como si fuera código normal. Envuélvelo en try...catch para tratar los fallos de red.

Cuando un programa crece, se reparte en varios archivos llamados módulos. Con export decides qué ofrece cada archivo y con import lo usas en otro.

npm, el gestor de paquetes que viene con Node.js, descarga bibliotecas de otras personas y apunta en package.json cuáles usa tu proyecto, para que cualquiera pueda instalarlas con npm install.

Una clase es un molde para crear objetos que tienen los mismos datos y las mismas acciones. El método constructor se ejecuta al crear cada objeto con new y guarda sus datos en this; los demás métodos son las acciones que puede hacer.

Con extends una clase hereda de otra: aprovecha sus métodos y puede añadir otros nuevos. En el constructor de la clase hija hay que llamar primero a super(), que ejecuta el constructor de la clase madre.

Cuando algo falla (un dato con un formato inesperado, una conexión que se corta…), JavaScript lanza un error y detiene el programa. Con try { … } catch (error) { … } lo capturas y decides qué hacer: avisar a la persona, usar un valor por defecto o volver a intentarlo.

Tú también puedes lanzar errores con throw new Error("mensaje") cuando una función recibe datos sin sentido, para que el fallo se note en vez de seguir con datos erróneos. El bloque finally se ejecuta siempre, haya error o no.

Un evento es algo que ocurre en la página: un clic, una tecla pulsada, el envío de un formulario. Con elemento.addEventListener("click", función) indicas qué hacer cada vez que ocurre; la función recibe un objeto event con los detalles, como la tecla pulsada (event.key) o el elemento que lo provocó (event.target).

Al enviar un formulario, el navegador recarga la página. event.preventDefault() lo evita, para que puedas leer y mostrar los datos con JavaScript sin perderlos.

localStorage guarda pares clave-valor en el navegador y los conserva aunque cierres la pestaña. Solo almacena texto: para guardar listas u objetos, conviértelos con JSON.stringify() y recupéralos con JSON.parse().

Lo que guardas solo está en ese navegador y ese dispositivo, y cualquier script de la página puede leerlo: no guardes contraseñas ni datos sensibles. En modo privado o con el almacenamiento bloqueado puede fallar, por eso conviene envolverlo en try…catch.

Una expresión regular describe un patrón de texto: «cinco dígitos», «algo con forma de correo»… En JavaScript se escriben entre barras, como /\d{5}/ (\d es un dígito y {5}, cinco veces), y el método test() dice si un texto cumple el patrón.

^ y $ marcan el principio y el final del texto; sin ellos, basta con que el patrón aparezca en cualquier parte. Los métodos match() y replace() usan patrones para extraer o sustituir partes de un texto.