Introducción al JSReferencias JSÍndice de contenidos
¿Te has preguntado alguna vez cómo se crean las interacciones dinámicas que realizan algunas páginas web? ¿Cómo se consigue que un botón responda a un clic? ¿Cómo funcionan las validaciones de los formularios? En este curso de JavaScript se responden todas estas preguntas y se ofrece una visión general. No sólo aprenderás qué es JS, sino también cómo utilizarlo correctamente.
¿Qué es JavaScript?
JavaScript (JS) es un lenguaje de programación interpretado, orientado a objetos, basado en prototipos, imperativo, dinámico y multiparadigma. Este lenguaje es uno de los pilares del desarrollo web, junto con HTML y CSS: HTML permite definir la estructura básica de una página web, CSS permite definir su apariencia y JavaScript es el que se encarga de las partes interactiva y dinámica.
Cada vez que una página web se carga en el navegador web, puede hacer mucho más que mostrar contenido estático. Por ejemplo, puede mostrar actualizaciones dinámicas de contenido, sin tener que recargar la página. También puede mostrar mapas con animaciones, gráficos interactivos en 2D y 3D, barras de desplazamiento de reproductores multimedia, animaciones avanzadas…
JavaScript puede ejecutarse tanto en los navegadores web (Firefox, Chrome, Safari o Edge) mediante sus motores de ejecución, como fuera de ellos, ya sean servidores o escritorios, usando entornos de ejecución como Node.js y Deno. Estos últimos lo han convertido en un lenguaje de propósito general.
¿Por qué aprender JavaScript?
En la actualidad, JavaScript es uno de los lenguajes de programación más populares y demandados, tanto en el desarrollo web como de software en general. Se ha vuelto imprescindible para muchos estudiantes y profesionales. Aprenderlo ofrece algunas ventajas muy claras. Vamos a ver cuáles son:
Crear páginas web interactivas. Desde crear simples efectos visuales hasta desarrollar aplicaciones web complejas. JavaScript permite manipular elementos HTML y dar respuesta a las acciones del usuario.
Convertirse en desarrollador web. Si ya conoces los lenguajes HTML y CSS, JavaScript es el siguiente paso para convertirte en desarrollador web front-end. Combinado con Node.js, también puedes trabajar en el back-end.
Aprender otros lenguajes. JavaScript es una excelente puerta de entrada para entender conceptos comunes de la programación, extensibles a cualquier otro lenguaje: variables, funciones, objetos, eventos o la asincronía.
Alta demanda de empleo. Hoy en día existe una alta demanda de empleo para aquellos que conocen y dominan JavaScript. Por lo tanto, su aprendizaje mejorará el currículum, facilitando el acceso al mercado laboral.
Existencia de muchas librerías. JavaScript cuenta con una enorme cantidad de librerías, frameworks (React, Angular, Vue, Svelte) y recursos de todo tipo. Además, hay una comunidad muy activa que ofrece soporte de forma rápida.
Ejemplos de código JavaScript
Para entender mejor la naturaleza del lenguaje JavaScript, puede ser de ayuda visualizar un ejemplo básico de su código. Por ejemplo, si queremos mostrar un mensaje en la consola, lo hacemos con la siguiente función.
console.log("Hola, mundo!");
Veremos el resultado tanto en la consola del navegador web como si lo ejecutamos a través de un archivo JavaScript, con Node.js.
También podemos interactuar con el usuario mostrando un mensaje de alerta con la función alert(). Usamos el atributo onclick en la etiqueta HTML para que el código JS se ejecute cuando el usuario haga clic en el párrafo.
<p onclick='alert("¿Qué tal?")'>
Pulsa este párrafo.
</p>
Para ver la ventana emergente, haz clic sobre el párrafo siguiente:
Pulsa este párrafo.
Podemos incluso cambiar alternativamente el contenido de un elemento HTML. Por ejemplo, si pone «Verdadero», que se cambie a «Falso», y lo mismo a la inversa. Para ello, vamos a utilizar la siguiente función:
function alternar() {
const el = document.getElementById("cambia");
if (el.textContent === "Falso") {
el.textContent = "Verdadero";
} else {
el.textContent = "Falso";
}
}
Y este es el código HTML:
<p id="cambia" onclick='alternar()'>
Verdadero.
</p>
Ahora haz clic sobre el párrafo siguiente. Por cada clic o pulsación, el texto irá alternando entre «Verdadero» y «Falso».
Verdadero.
Estos ejemplos son solo una pequeña muestra de lo que se puede lograr. En resumen: JS puede manipular cualquier elemento HTML de una página web, responder a eventos, manejar datos y comunicarse con servidores.
Aplicaciones de JavaScript
El principal uso de JavaScript es dotar de dinamismo a las páginas web. Pero su alcance es mucho mayor, ya que no solo permite mejorar la experiencia del usuario en el desarrollo front-end, sino que también puede utilizarse en el lado del servidor, la lógica y el procesado de datos, conocido como desarrollo back-end. A continuación enumeramos algunas de sus aplicaciones.
Validación de formularios. Validar los datos introducidos por el usuario en el lado del cliente (navegador web) es muy importante. Permite asegurarse que los datos tienen el formato correcto antes de ser enviados al servidor.
Manipulación del código HTML. Agregar, eliminar y modificar etiquetas HTML de forma dinámica es una tarea común en muchas situaciones y contextos. Esto resulta muy útil, ya que permite actualizar el contenido sobre la marcha.
Creación de sitios web completos. Existen algunos frameworks y librerías que permiten crear un sitio web completo mediante JavaScript, en el lado del cliente. Puede usarse React, Angular o Vue.js, pero hay muchos más.
Creación de servidores web. Con entornos de ejecución como Node.js o Deno es posible construir servidores web rápidos y escalables. También se puede crear aplicaciones web, APIs y gestionar bases de datos.
Programación de uso general. JavaScript es un lenguaje versátil y de uso general. Se puede usar, por ejemplo, desde la línea de comandos con Node.js, o para crear aplicaciones de escritorio mediante herramientas como Electron.
Desarrollo de juegos. Es posible crear videojuegos mediante HTML, CSS y JavaScript. Existen librerías (como Phaser o Babylon.js) que facilitan mucho este proceso. Se ejecutan en el navegador, sin requerir ayuda externa.
Desarrollo de aplicaciones móviles. Con herramientas como React Native, Ionic y NativeScript es posible crear aplicaciones que funcionan en todo tipo de móviles, independientemente del sistema operativo que se esté usando.
Audiencia
Este curso está pensado para aquellas personas que ya conocen HTML y CSS y quieren dar el siguiente paso hacia la creación de páginas web dinámicas. También es un buen punto de partida para quienes deseen iniciar su camino en la programación con un lenguaje flexible y de alta demanda laboral.
Requisitos previos
Como en todo lenguaje de programación, saber los fundamentos de la programación supondrá una verdadera ventaja, aunque no sea estrictamente necesario. Sin embargo, antes de aprender JavaScript se recomienda familiarizarse con HTML y CSS, por la estrecha relación que comparten las tres tecnologías.
También se recomienda disponer de los conocimientos siguientes:
- Conocimientos básicos de un sistema operativo
- Crear directorios y trabajar con archivos
- Conocer las extensiones de archivos y cómo editarlos
- Conocer algún editor de código o de texto plano
- Comprender el funcionamiento de un navegador web
