¿Qué es JavaScript? Guía completa y explicación

JavaScript es un lenguaje de programación interpretado que requiere un intérprete para ejecutarse, habitualmente el propio navegador. Se emplea principalmente para crear páginas web interactivas, modificando el HTML y el CSS a través del DOM. También se utiliza en el servidor con Node.js, en aplicaciones móviles con React Native o Ionic y en videojuegos con Phaser.

JavaScript es un lenguaje de programación interpretado, lo que significa que necesita un intérprete para su ejecución. En la mayoría de los casos es interpretado gracias a los navegadores, como el que estás usando para leer este artículo.

Aunque su uso más extendido es el de la creación de páginas web en la parte más visual, también puede emplearse a nivel de servidor, gracias a Node.js del que hablaré más adelante.

En resumen, JavaScript sirve para crear páginas web interactivas, siendo capaz de modificar el HTML y el CSS de una página web. Si no conoces los lenguajes de HTML y CSS es recomendable que aprendas sobre ellos antes de continuar con este artículo y que tengas en cuenta que estos dos últimos lenguajes no son lenguajes de programación.

¿Para qué se usa JavaScript?

JavaScript es un lenguaje de programación muy versátil, puede usarse para múltiples aplicaciones:

• Desarrollo del frontend de páginas web: esto quiere decir que podemos programar la parte más visual de una página web, dándole dinamismo e interactividad.
• Desarrollo del backend: cuando hablamos de backend, hablamos de la parte de servidores, esto se consigue a través de Node.js.
• Aplicaciones móviles: existen frameworks que nos permiten usar el lenguaje de JavaScript para desarrollar aplicaciones móviles, algunos de los más conocidos en este aspecto son React Native e Ionic.
• Videojuegos: JavaScript permite crear juegos que se ejecutan directamente en el navegador sin necesidad de instalar nada. Uno de los frameworks más populares para el desarrollo de videojuegos es Phaser.

Como puedes observar, es un lenguaje de programación que dispone de múltiples aplicaciones y por eso es tan interesante aprenderlo, ya que abre un gran abanico de posibilidades. Aunque en este post nos centraremos en el desarrollo web de parte del cliente, donde su uso es más extendido.

Características de JavaScript

Antes de empezar a programar con JavaScript es importante que conozcas algunas características relevantes que debes conocer.

Es un lenguaje interpretado

Los navegadores leen y ejecutan el código directamente, es decir, no existe una compilación como en lenguajes como Java, es muy importante que no confundas JavaScript con Java pues no tienen nada que ver.

Tipado débil

JavaScript es un lenguaje de tipado débil, es decir los tipos de datos pueden cambiar sin restricciones. Cuando hablamos de tipos de datos nos referimos a los tipos de datos como números o cadenas de texto (string). Si no conoces los tipos de datos es importante que los aprendas pues son comunes entre lenguajes de programación.

let x = 5; // número x = «hola»; // ahora es un string

Esto puede llevar a resultados incongruentes, como el ejemplo que te pongo a continuación:

«5» + 3 // «53» «5» – 3 // 2

Para solventar estos problemas de tipado que pueden llevar a confusiones e inconsistencia en los datos que tratamos, es muy extendido el uso de un lenguaje denominado TypeScript, que básicamente proporciona un tipado más robusto.

Gran integración con el navegador

Esta es una de las características que hacen que sea un lenguaje tan potente dentro del desarrollo web. No solo es interpretado por el navegador, sino que tiene acceso a un conjunto enorme de APIs que permiten manipular casi cualquier parte de una página web.

JavaScript puede modificar el DOM (que te explicaré en el punto siguiente), que es la representación de la página web en forma de árbol, es decir puede crear, eliminar y modificar elementos HTML, cambiar estilos y clases, todo ello en tiempo real, sin necesidad de un refresco de página.

¿Qué es el DOM?

El DOM (o Modelo de Objetos del Documento) es como un mapa en forma de árbol de todo lo que ves en una página web.

¿Te imaginas que el navegador toma tu código HTML y lo transforma en un árbol lleno de objetos? Bueno, eso es el DOM. Gracias a él, JavaScript puede leer, cambiar o eliminar elementos de la página cuando lo necesites.

¿Cómo se ve un DOM?

Si este es tu HTML:

<body> <h1>Hola</h1> <p>Texto de ejemplo</p> </body>

El DOM sería algo como la siguiente imagen:

Métodos principales para acceder al DOM

getElementById()

Busca un elemento por su atributo id.

const titulo = document.getElementById(«titulo»);

querySelector()

Permite usar selectores CSS (id, clases, etiquetas, etc.).

document.querySelector(«#titulo»); // por id document.querySelector(«.rojo»); // por clase document.querySelector(«p»); // por etiqueta document.querySelector(«div p»); // selectores combinados

querySelectorAll()

Devuelve una lista de todos los elementos que coinciden.

const parrafos = document.querySelectorAll(«p»); parrafos.forEach(p => console.log(p.textContent));

getElementsByClassName()

Busca por clase. Devuelve una colección de elementos.

const items = document.getElementsByClassName(«item»);

getElementsByTagName()

Busca por etiqueta: p, h1, div, etc.

const titulos = document.getElementsByTagName(«h1»);

¿Qué es ECMAScript?

JavaScript se basa en un estándar llamado ECMAScript. En pocas palabras: JavaScript es una forma de implementar lo que ECMAScript define.

¿Y qué es ECMAScript exactamente? Imagina que es el libro de reglas del lenguaje. Ahí se detalla cómo debe funcionar todo:

• cómo se comportan las funciones,
• cómo se declaran variables,
• cómo se crean clases y módulos,
• y en general, qué características debe tener el lenguaje.

JavaScript, por su parte, es el lenguaje real que usas a diario en el navegador o en entornos como Node.js.

¿Por qué se creó ECMAScript?

JavaScript nació en 1995, pero al principio cada navegador lo interpretaba a su manera. Eso causaba un montón de inconsistencias y dolores de cabeza para los desarrolladores.

Entonces, en 1997, se decidió poner orden. Se creó un estándar común bajo la gestión de ECMA International.

Gracias a eso, hoy todos los navegadores siguen las mismas reglas, lo que significa que JavaScript se comporta igual en Chrome, Firefox, Safari, Edge y compañía.

Mucho más fácil para todos, ¿no crees?

Cómo se programa en JavaScript

Después de toda esta teoría es hora de que empecemos con algo de práctica, vamos a empezar a programar con un ejemplo muy sencillo que iremos modificando para que puedas hacerte una idea de lo que JavaScript puede ofrecer.

Puedes incluir código JavaScript en el propio HTML a través de la etiqueta <script> pero como queremos un código limpio y ordenado vamos a separar los archivos, por una parte crearemos un archivo HTML y otro archivo con extensión .js

Nuestra estructura de archivos quedaría de la siguiente forma:

/mi-proyecto |– index.html |– script.js

Cargando nuestro JavaScript desde el HTML

Para cargar un archivo JavaScript desde nuestro HTML es muy sencillo. Usaremos la etiqueta script y añadiremos la ruta relativa en su atributo src.

De tal forma que nuestro HTML quedaría de la siguiente forma

<!DOCTYPE html> <html lang=»es»> <head> <meta charset=»UTF-8″> </head> <body> <h1 id=»titulo»>Hola desde HTML</h1> <!– Cargar un archivo JavaScript externo –> <script src=»script.js»></script> </body> </html>

Si abres el archivo index.html en tu navegador deberías ver lo siguiente:

Cómo crear tu primera función en JavaScript

Vamos a crear nuestra primera función en JavaScript, para ello vamos a crear una función que modifique el texto de nuestro HTML con el texto que le indiquemos.

El código quedaría de la siguiente manera:

function cambiarTitulo() { let nuevoTexto = «Este es el nuevo título desde una variable»; document.getElementById(«titulo»).textContent = nuevoTexto; } // Llamamos a la función cambiarTitulo();

Si refrescas el navegador deberías de ver algo como lo siguiente:

Eventos en JavaScript

Los eventos son acciones que ocurren en el navegador (clics, teclas, carga de página, etc.) y JavaScript puede “escucharlos” con addEventListener.

Algunos de los eventos principales que podemos escuchar son:

Evento	Descripción
click	Cuando el usuario pulsa con el ratón
dblclick	Pulsación doble
mousedown	Aprieta el botón del ratón
mouseup	Libera el botón del ratón
mousemove	Desplaza el ratón
mouseover	El ratón accede a un elemento
mouseout	El ratón abandona el elemento
contextmenu	Pulsación con el botón derecho

Para poner en práctica los eventos vamos a incorporar un botón al HTML y, al pulsarlo el usuario, agregaremos un texto.

En primer lugar incorporamos el botón al HTML

<!DOCTYPE html> <html lang=»es»> <head> <meta charset=»UTF-8″> </head> <body> <h1 id=»titulo»>Hola desde HTML</h1> <!– Botón que el usuario pulsará –> <button id=»boton»>Añadir texto</button> <!– Contenedor donde se agregará el texto –> <p id=»mensaje»></p> <!– Cargar un archivo JavaScript externo –> <script src=»script.js»></script> </body> </html>

Nuestro js quedará así:

// Buscar el botón const boton = document.getElementById(«boton»); // Escuchar el clic del usuario boton.addEventListener(«click», function() { let textoNuevo = «¡Has hecho clic y este texto aparece!»; document.getElementById(«mensaje»).textContent = textoNuevo; });

Si recargamos el navegador y pulsamos el botón que hemos incorporado, deberías ver el texto que se añade de esta manera.

Depurar en JavaScript

Al hablar de debuguear nos referimos a depurar el código; esto resulta útil para consultar valores de variables, verificar si alguna función se ejecuta o asegurarte del flujo de tu programa.

La manera más simple de lograrlo es empleando console.log. Para poder ver los mensajes que lances desde el método de console, tendrás que abrir las herramientas de DevTools del navegador.

Para abrir DevTools puedes emplear los siguientes atajos:

• Chrome / Edge: F12 o Ctrl + Shift + I
• Firefox: F12
• Mac: Cmd + Option + I

Aunque antes de nada vamos a incorporar en nuestro código de JavaScript unos logs para poder verlos.

// Buscar el botón const boton = document.getElementById(«boton»); // Escuchar el clic del usuario boton.addEventListener(«click», function() { let textoNuevo = «¡Has hecho clic y este texto aparece!»; // Salida de un mensaje por consola console.log(‘El usuario hizo clic’); document.getElementById(«mensaje»).textContent = textoNuevo; });

Cada vez que el usuario pulse aparecerá en el panel de consola el mensaje “El usuario hizo clic”.

Además de console.log puedes emplear métodos más específicos:

console.error(«Ocurrió un error»); console.warn(«Esto es una advertencia»); console.table([1, 2, 3]);

Esto es lo más básico que debes conocer para depurar tu código JavaScript, aunque también puedes colocar breakpoints (puntos de interrupción), emplear un linter que detecta errores antes de ejecutar el código, etc. Aunque estas últimas opciones son algo más avanzadas.

Por qué aprender JavaScript es clave para empezar en programación web

Aprender JavaScript hoy no es solo una buena idea, es una jugada estratégica si estás empezando a programar o quieres llevar tus habilidades al siguiente nivel. ¿Por qué? Porque es el lenguaje base de la web. Está en casi todas las páginas modernas y no deja de mejorar gracias al estándar ECMAScript, que cada año trae nuevas funciones.

Lo más potente de JavaScript es su versatilidad. Con un solo lenguaje puedes:

• Crear sitios web interactivos.
• Desarrollar apps móviles.
• Construir videojuegos.
• Levantar servidores completos con Node.js.

Y lo mejor: no necesitas nada raro para empezar. Solo un navegador. Ya está. Sumale a eso una comunidad gigantesca y llena de recursos, librerías y herramientas, y tienes todo listo para arrancar proyectos reales desde el día uno.

Además, su ecosistema te permite aprender de a poco. Empiezas con algo sencillo, como cambiar un texto en una página web y puedes ir avanzando hasta trabajar con cosas más complejas: asincronía, APIs, frameworks como React, Vue o Django, el framework Python que usa JavaScript en el frontend. Incluso puedes convertirte en un desarrollador full stack.

En resumen: JavaScript es actual, útil, muy buscado y súper flexible. Aprenderlo te abre muchas puertas y te convierte en alguien capaz de construir prácticamente cualquier tipo de aplicación digital.

Preguntas Frecuentes