Introducción a JavaScript

¿Te interesa crear sitios web dinámicos y llenos de interactividad? En este artículo te presento JavaScript, el lenguaje clave para darle vida a tus proyectos web. Vas a aprender qué es, para qué se usa y cómo empezar a escribir tus propias líneas de código. Desde lo más básico hasta las herramientas que lo convierten en uno de los lenguajes más usados del mundo. Ideal si estás dando tus primeros pasos en el desarrollo web.

Fecha de publicación: Mayo 27, 2025

Última actualización: Mayo 27, 2025

Introducción a JavaScript

🟨 ¿Qué es JavaScript?

JavaScript (JS) es un lenguaje de programación interpretado, dinámico y orientado a objetos, utilizado principalmente para crear interactividad en páginas web. Se ejecuta en el navegador del usuario (como Chrome, Firefox, Safari, etc.) y permite que los sitios web hagan cosas como:

Recomendación: para entender mejor cómo se maneja el desarrollo web, te recomendamos leer nuestro artículo sobre Desarrollo Web.

¿Para qué se usa JavaScript?

Hoy en dia, JavaScript se utiliza en una amplia variedad de aplicaciones, incluyendo:

DOM: El Document Object Model es una representación estructurada del documento HTML que permite a JavaScript interactuar con el contenido de la página. El DOM convierte el HTML en un árbol de nodos que JavaScript puede manipular.



✅ ¿Cómo se usa JavaScript?

JavaScript se puede incluir en una página web de varias maneras:



🧩 Fundamentos básicos

Dado que este artículo no es un tutorial de javascript, sino una introducción a sus conceptos básicos, solo cubriremos la sintaxis y conceptos fundamentales en forma general.



🌳 Manipulación del DOM

Manipular el DOM es una de las tareas más comunes en JavaScript. Permite cambiar el contenido, estructura y estilo de una página web de forma dinámica. El DOM es una estructura de árbol que el navegador crea a partir del HTML que recibe cuando carga una página. Cada elemento del HTML se convierte en un nodo del árbol.

Para interactuar con el DOM, JavaScript proporciona el objeto document, que representa el documento HTML cargado en el navegador. A través de este objeto, puedes acceder a los elementos del DOM y modificarlos.

Obtener elementos

Para manipular el DOM, primero necesitas obtener los elementos que deseas modificar. Puedes hacerlo de varias maneras:

Cambiar contenido

Una vez que tienes el elemento, puedes cambiar su contenido utilizando la propiedad innerHTML o textContent.

const elemento = document.getElementById('miElemento')
elemento.innerHTML = '<strong>Nuevo contenido</strong>' // Cambia el HTML interno
elemento.textContent = 'Nuevo contenido' // Cambia solo el texto

Cambiar estilos

Puedes cambiar los estilos de un elemento utilizando la propiedad style.

const elemento = document.getElementById('miElemento')
elemento.style.color = 'red' // Cambia el color del texto
elemento.style.backgroundColor = 'blue' // Cambia el color de fondo

Escuchar eventos

Puedes agregar eventos a los elementos para que respondan a acciones del usuario, como clics o teclas presionadas.

const boton = document.getElementById('miBoton')
boton.addEventListener('click', function () {
	alert('¡Botón clickeado!')
})

Existen muchos tipos de eventos, como click, mouseover, keydown, entre otros. Puedes consultar la documentación de eventos para más detalles.

Crear y eliminar elementos

Puedes crear nuevos elementos y agregarlos al DOM, o eliminar elementos existentes.

// Crear un nuevo elemento
const nuevoElemento = document.createElement('div')
nuevoElemento.textContent = 'Soy un nuevo div'

// Agregarlo al DOM
document.body.appendChild(nuevoElemento)

// Eliminar un elemento existente
const elementoAEliminar = document.getElementById('elementoAEliminar')
elementoAEliminar.remove()



⏰ Temporizadores

JavaScript permite ejecutar código después de un cierto período de tiempo utilizando los métodos setTimeout y setInterval.

setTimeout

setTimeout ejecuta una función después de un tiempo específico (en milisegundos).

setTimeout(() => {
	console.log('Esto se ejecuta después de 2 segundos')
}, 2000)

Puedes cancelar un setTimeout utilizando clearTimeout() si es necesario.

const timeoutId = setTimeout(() => {
	console.log('Esto no se ejecutará')
}, 5000)
clearTimeout(timeoutId) // Cancela el timeout

setInterval

setInterval ejecuta una función repetidamente a intervalos específicos (en milisegundos).

setInterval(() => {
	console.log('Esto se ejecuta cada 1 segundo')
}, 1000)

Igualmente, puedes cancelar un setInterval utilizando clearInterval().

const intervalId = setInterval(() => {
	console.log('Esto no se ejecutará más')
}, 1000)
clearInterval(intervalId) // Cancela el intervalo



⏳ Sincronización y asincronía

JavaScript es un lenguaje asíncrono por naturaleza, lo que significa que puede ejecutar tareas en segundo plano sin bloquear la ejecución del código principal. Esto es especialmente útil para operaciones que pueden tardar, como peticiones a servidores o temporizadores.

console.log('Inicio')

setTimeout(() => {
	console.log('Timeout')
}, 2000)

console.log('Fin')

En este ejemplo, el mensaje “Inicio” se imprime primero, luego “Fin”, y finalmente “Timeout” después de 2 segundos. Esto demuestra cómo JavaScript puede manejar tareas asíncronas sin bloquear el hilo principal.

Para cambiar el comportamiento asíncrono, JavaScript utiliza promesas y async/await.

Promesas

Una promesa es un objeto que representa la eventual finalización (o falla) de una operación asíncrona y su valor resultante.

function obtenerDatos() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('Datos obtenidos')
		}, 2000)
	})
}
obtenerDatos()
	.then(resultado => {
		console.log(resultado) // Imprime "Datos obtenidos" después de 2 segundos
	})
	.catch(error => {
		console.error('Error:', error)
	})

Async/Await

async/await es una sintaxis más sencilla para trabajar con promesas. Permite escribir código asíncrono de manera más legible, como si fuera síncrono.

async function obtenerDatosAsync() {
	try {
		const resultado = await obtenerDatos()
		console.log(resultado) // Imprime "Datos obtenidos" después de 2 segundos
	} catch (error) {
		console.error('Error:', error)
	}
}
obtenerDatosAsync()