¿Qué es JavaScript y para qué sirve?

01¿Qué es JavaScript?

La respuesta más práctica a la pregunta qué es JavaScript: el lenguaje que hay detrás de todo lo que reacciona en una página web cuando usted hace clic, escribe o se desplaza. El menú desplegable, el botón de añadir al carrito, la sugerencia de búsqueda instantánea o el zoom sobre un mapa funcionan con JavaScript.

El lenguaje surgió a mediados de los años 90 para los navegadores y se define mediante un estándar llamado ECMAScript. A pesar de la semejanza del nombre, no tiene una relación directa con Java; su sintaxis y su forma de funcionar son bastante distintas.

Hoy JavaScript no se limita al navegador. Puede ejecutarse en servidores, aplicaciones móviles, programas de escritorio e incluso dispositivos pequeños. Esta amplitud lo convierte en uno de los lenguajes más productivos para quienes empiezan en la programación.

JavaScript es un lenguaje interpretado y de tipado dinámico: antes de ejecutar el código no se necesita un paso de compilación aparte, y el tipo de las variables se determina en tiempo de ejecución. Esto facilita probar rápido, pero en proyectos grandes también puede hacer que los errores de tipo se detecten tarde.

02¿Cómo funcionan juntos HTML, CSS y JavaScript?

Puede pensar en una página web como en una casa. HTML son las paredes y las habitaciones, CSS la pintura y el mobiliario, y JavaScript la instalación eléctrica: enciende la luz, abre la puerta, hace sonar la alarma.

Los tres no se sustituyen entre sí. El contenido debe quedarse en el HTML, el aspecto en el CSS y JavaScript debe usarse solo para el comportamiento. Esta separación facilita el mantenimiento y hace que el contenido se vea aunque JavaScript no se cargue.

Cuando la página se abre en el navegador, el HTML se convierte en una estructura de árbol llamada DOM. JavaScript accede a ese árbol: encuentra un elemento, cambia su texto, añade un elemento nuevo o escucha un evento.

<p id="mesaj">Merhaba!</p>
<button id="dugme">Cambiar</button>

<script>
  const mesaj = document.getElementById("mesaj");
  document.getElementById("dugme").addEventListener("click", () => {
    mesaj.textContent = "JavaScript se ha ejecutado.";
  });
</script>

03¿Para qué sirve JavaScript?

La respuesta a para qué sirve JavaScript se amplía según el entorno en que se use. En el navegador construye la experiencia de usuario, en el servidor la lógica de negocio y en el móvil y el escritorio la propia aplicación.

JavaScript en el navegador

JavaScript en el navegador se usa sobre todo para: validación de formularios, menús desplegables y pestañas, galerías de imágenes, obtención de datos sin recargar la página, mapas y gráficos, y los pasos del carrito y del pago. En una interfaz bien diseñada, estos comportamientos guían al usuario sin cansarlo; su planificación es objeto del proceso de diseño UI/UX.

JavaScript en el servidor

Node.js es un entorno que ejecuta JavaScript fuera del navegador. Con él se escriben API, servicios de mensajería en tiempo real, scripts de procesamiento de archivos y herramientas de línea de comandos. Usar el mismo lenguaje en el front-end y en el back-end facilita el trabajo de los equipos pequeños.

Móvil y escritorio

Con JavaScript pueden desarrollarse aplicaciones móviles con herramientas como React Native y programas de escritorio con herramientas como Electron. Algunos editores de código y aplicaciones de mensajería que usa a diario están hechos así.

04Conceptos básicos y ejemplos

Quien empieza a aprender JavaScript debe asentar primero estos bloques fundamentales. Los siguientes ejemplos de JavaScript pueden probarse directamente en la consola de desarrollador del navegador (F12).

• Variables: con let y const se guardan valores; para los valores que no van a cambiar se prefiere const.
• Tipos de datos: texto (string), número (number), lógico (boolean), lista (array), objeto (object).
• Funciones: agrupan bajo un nombre una tarea repetida; la función flecha permite una escritura más corta.
• Métodos de arrays: con map, filter, find y reduce las listas se procesan de forma legible.
• Eventos: se reacciona a acciones del usuario como click, input o submit.
• Código asíncrono: con fetch, Promise y async/await la página no se bloquea mientras espera los datos.

const urunler = [
  { ad: "Aceite de oliva", fiyat: 320 },
  { ad: "Sabun", fiyat: 90 },
  { ad: "Bal", fiyat: 410 }
];

const pahalilar = urunler.filter(u => u.fiyat > 300).map(u => u.ad);
console.log(pahalilar); // ["Aceite de oliva", "Miel"]

async function kullaniciGetir() {
  const yanit = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const veri = await yanit.json();
  console.log(veri.name);
}
kullaniciGetir();

05JavaScript y rendimiento web

JavaScript es potente, pero no es gratis. El navegador debe descargar, analizar y ejecutar cada script. Un exceso de JavaScript, o JavaScript innecesario, hace que la página responda tarde, sobre todo en móviles de gama media.

La métrica de interacción de Google, INP, mide cuánto tarda la página en responder a un clic, y menos de 200 ms se considera bueno. Los scripts pesados, las bibliotecas sin usar y las muchas etiquetas de terceros son las principales causas de que este valor empeore.

Las reglas prácticas son sencillas: cargue solo el código necesario, aplace los scripts no críticos y no use varias bibliotecas que hagan lo mismo. Esta medición y mejora debe realizarse con regularidad dentro de la gestión de velocidad y rendimiento. Para lograr una experiencia fluida en el móvil, debe pensarse junto con el diseño responsive.

06Errores frecuentes de quienes empiezan

JavaScript es un lenguaje flexible, y esa flexibilidad también facilita cometer errores al principio. Conocer las trampas siguientes le evitará horas de depuración.

• Usar == en lugar de ===: la comparación laxa convierte los tipos de forma automática y da resultados inesperados; la comparación estricta es más segura.
• Declarar variables con var: provoca problemas de ámbito; en el código moderno se usan let y const.
• No esperar al código asíncrono: intentar usar los datos antes de que llegue el resultado de fetch es la causa más habitual de los errores de valor indefinido.
• Ignorar los errores de la consola: la consola del navegador suele indicar con claridad la línea y la causa del error.
• Fiarse de lo que introduce el usuario: la validación en el navegador es una comodidad; por seguridad, la misma comprobación debe hacerse siempre también en el servidor.
• Añadir un paquete nuevo para cada tarea: incluir una biblioteca para algo que se resuelve con unas pocas líneas hace la página más pesada y añade carga de mantenimiento.

07El ecosistema de JavaScript: React, TypeScript, Node.js

Alrededor de JavaScript hay un ecosistema de herramientas muy amplio. Es lo que más confunde a quien empieza: saber para qué sirve cada herramienta.

Bibliotecas como React dividen la interfaz en componentes y hacen manejables los proyectos grandes; los detalles están en nuestro artículo qué es React. TypeScript añade un sistema de tipos a JavaScript y detecta errores antes de ejecutar el código; explicamos las diferencias en el artículo qué es TypeScript.

npm, por su parte, es el gestor de paquetes; permite añadir al proyecto fragmentos de código ya hechos por otros. Para delimitar bien la frontera entre el front-end y el back-end, también le orientará el artículo diferencia entre frontend y backend.

08Hoja de ruta para aprender JavaScript

Para aprender JavaScript no hace falta una instalación cara; bastan un navegador y un editor de código. Lo importante es seguir el orden correcto y afianzar cada concepto con un pequeño proyecto.

1. Prepare una página sencilla con HTML y CSS.
2. Pruebe en la consola las variables, condiciones, bucles y funciones.
3. Aprenda a seleccionar y modificar elementos de la página con el DOM.
4. Termine un proyecto pequeño, como una lista de tareas o una calculadora.
5. Obtenga datos de una API abierta con fetch y async/await.
6. Conozca los módulos, npm y una herramienta de compilación; después, pase a una biblioteca.

Fuentes fiables

Como referencia del lenguaje, MDN Web Docs es una de las fuentes más fiables. Los vídeos y cursos son útiles, pero el aprendizaje real se produce en sus propios proyectos, donde se equivoca y corrige.