¿Qué es JavaScript?
JavaScript es un lenguaje de programación interpretado, esto quiere decir que necesita de 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 se puede utilizar a nivel de servidor, gracias a Node.js del que te hablaré más adelante.
En resumen, JavaScript se puede utilizar para crear páginas web interactivas, siendo capaz de modificar el HTML y el CSS de una página web. Si desconoces los lenguajes de HTML y CSS es recomendable que aprendas sobre ellos antes de seguir adelante 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?
- Características de JavaScript
- Es un lenguaje interpretado
- Tipado débil
- Gran integración con el navegador
- ¿Qué es el DOM?
- ¿Cómo se ve un DOM?
- Métodos principales para acceder al DOM
- ¿Qué es ECMAScript?
- ¿Por qué se creó ECMAScript?
- Cómo se programa en JavaScript
- Cargando nuestro JavaScript desde el HTML
- Cómo crear tu primera función en JavaScript
- Eventos en JavaScript
- Debuguear en JavaScript
- Por qué aprender JavaScript es clave para empezar en programación web
¿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. Es de uso muy popular Phaser, de desarrollo de videojuegos.
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 un 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 hace clic |
|
dblclick |
Doble clic |
|
mousedown |
Presiona el botón del mouse |
|
mouseup |
Suelta el botón del mouse |
|
mousemove |
Mueve el mouse |
|
mouseover |
El mouse entra en un elemento |
|
mouseout |
El mouse sale del elemento |
|
contextmenu |
Clic derecho |
Para practicar con los eventos vamos a añadir un botón al HTML y cuando el usuario haga clic añadiremos un texto.
Primero añadimos 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á de la siguiente manera:
// 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 refrescamos el navegador y hacemos clic en el botón que hemos añadido deberías de ver el texto que se agrega de la siguiente forma.
Debuguear en JavaScript
Cuando hablamos de debuguear nos referimos a depurar el código, esto es útil para ver valores de variables, comprobar si alguna función se ejecuta o cerciorarse del flujo de tu programa.
La forma más sencilla de hacerlo es con el uso de console.log. Para poder ver los mensajes que dispongas desde el método de console, necesitarás abrir las herramientas de DevTools del navegador.
Para abrir DevTools puedes usar los siguientes atajos:
- Chrome / Edge: F12 o Ctrl + Shift + I
- Firefox: F12
- Mac: Cmd + Option + I
Aunque antes de todo vamos a añadir 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 haga clic aparecerá en el panel de consola el mensaje “El usuario hizo clic”.
Además de console.log puedes usar 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 saber para depurar tu código JavaScript, aunque también puedes colocar breakpoints (puntos de interrupción), usar 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.
- Programar aplicaciones de escritorio.
- 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 o Vue, o incluso 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.
