Introducción a JavaScript. En este primer capítulo daremos los primeros pasos en el mundo de JavaScript. Comenzaremos entendiendo qué es este lenguaje, para qué se utiliza y por qué se ha convertido en una pieza fundamental en el desarrollo web. Exploraremos brevemente su historia y evolución, desde sus orígenes hasta su papel actual como un lenguaje versátil que puede ejecutarse tanto en el navegador como en el servidor.

También aprenderemos sobre los entornos donde se puede ejecutar JavaScript, destacando su integración en los navegadores web y el uso de plataformas como Node.js. Veremos cómo podemos comenzar a escribir y ejecutar nuestros primeros fragmentos de código JavaScript de forma sencilla, tanto desde la consola del navegador como desde archivos externos.

Por último, haremos un recorrido por las herramientas básicas que necesitaremos durante todo el curso: navegadores con sus herramientas de desarrollo, editores de código como Visual Studio Code, y la consola JavaScript, que nos permitirá probar y depurar nuestros programas.

¿Estás listo? Arrancamos!!!

Amazon Fire TV Stick HD (Última generación), con TV en directo gratuita, mando por voz Alexa, controles de Hogar digital y reproducción en streaming HD

44,99€

Tapo C210 – Cámara IP WiFi 360° Cámara de Vigilancia 2K (3MP),Visión nocturna Admite tarjeta SD hasta 512 GB, Detección y seguimiento de movimiento, Control Remoto, Compatible con Alexa

26,99€

Echo Dot (Última generación) | Altavoz inteligente wifi y Bluetooth con Alexa, con sonido más potente y de mayor amplitud | Antracita

64,99€

1.1 ¿Qué es JavaScript y para qué se utiliza?

JavaScript es un lenguaje de programación de alto nivel, interpretado, basado en texto y centrado principalmente en la creación de experiencias dinámicas e interactivas en la web. A diferencia de HTML y CSS, que definen la estructura y el estilo de una página web, JavaScript añade comportamiento, permitiendo que una página reaccione a las acciones del usuario, actualice su contenido sin recargar, valide formularios, cree animaciones, entre muchas otras funciones.

Características principales de JavaScript

Lenguaje interpretado: no necesita ser compilado antes de ejecutarse. Los navegadores lo interpretan directamente.
Orientado a objetos: aunque no es puramente orientado a objetos como Java o C++, JavaScript permite crear y manejar objetos, así como aplicar principios como herencia y encapsulamiento.
Basado en eventos: gran parte de su funcionamiento se basa en responder a eventos como clics, desplazamientos, cambios de valor, etc.
Dinámico y flexible: permite declarar variables sin necesidad de definir su tipo, y ofrece una sintaxis muy permisiva.
Multiplataforma: se ejecuta en cualquier dispositivo que tenga un navegador moderno, lo cual lo hace universalmente accesible.

¿Para qué se utiliza JavaScript?

1. Interactividad en páginas web

JavaScript es el lenguaje principal que permite que las páginas web sean interactivas. Algunas funcionalidades típicas incluyen:

Mostrar/ocultar contenido.
Validar formularios antes de enviarlos.
Crear menús desplegables o pestañas.
Cambiar estilos dinámicamente.
Crear animaciones y efectos visuales.

2. Manipulación del DOM (Document Object Model)

Permite modificar en tiempo real la estructura, contenido y estilos del HTML de una página. Esto hace posible que una página reaccione de forma instantánea a las acciones del usuario.

3. Desarrollo de aplicaciones web completas (frontend y backend)

Gracias al ecosistema actual de JavaScript, es posible desarrollar aplicaciones web completas:

Frontend: mediante frameworks/librerías como React, Vue.js o Angular.
Backend: con el uso de Node.js, que permite ejecutar JavaScript fuera del navegador y construir servidores, APIs REST, sockets en tiempo real, etc.

4. Aplicaciones móviles y de escritorio

Con herramientas como React Native, Electron o Ionic, JavaScript puede utilizarse también para crear aplicaciones móviles (Android/iOS) y de escritorio (Windows, MacOS, Linux).

5. Automatización y scripting

JavaScript también se utiliza para realizar tareas automatizadas (por ejemplo, en procesos de desarrollo web como bundling, testing o minificación), y para construir herramientas de línea de comandos mediante Node.js.

6. Juegos

Aunque no es su uso principal, también se utiliza para desarrollar juegos web en 2D y 3D, haciendo uso de tecnologías como Canvas, WebGL o motores como Phaser.js o Three.js.

1.2 Historia y evolución del lenguaje

Para entender bien qué es JavaScript y cómo ha llegado a ser uno de los lenguajes más importantes del mundo, es útil conocer un poco de su historia. Aunque JavaScript es ahora omnipresente y se usa desde páginas web hasta servidores, su origen fue bastante modesto… y un poco caótico.

El nacimiento de JavaScript (1995)

Todo comenzó en 1995, cuando la empresa Netscape Communications estaba desarrollando su navegador web: Netscape Navigator, que por aquel entonces era el más popular. En esa época, las páginas web eran totalmente estáticas: solo texto, enlaces, imágenes… nada se movía, nada reaccionaba, etc. Así que Netscape quería darle a sus páginas la capacidad de responder a acciones del usuario sin tener que recargar la página completa cada vez.

Para ello, contrataron a Brendan Eich, un ingeniero que, en solo 10 días, creó el primer prototipo de un lenguaje que inicialmente se llamaría Mocha, luego LiveScript, y finalmente… JavaScript.

Dato curioso: JavaScript no tiene relación directa con Java, aunque los nombres se parezcan. Fue una jugada de marketing: Java estaba de moda y Netscape pensó que ese nombre le daría más visibilidad.

JavaScript y la guerra de los navegadores

A finales de los 90, los navegadores comenzaron una batalla feroz por dominar Internet: Netscape Navigator por un lado, Internet Explorer (de Microsoft) por el otro. Ambos navegadores comenzaron a crear sus propias versiones de JavaScript, añadiendo funciones no compatibles entre sí.

Esto fue un caos para los desarrolladores web, que tenían que hacer malabares para que sus scripts funcionaran en ambos navegadores. La necesidad de una estandarización era urgente.

Estandarización: nace ECMAScript (1997)

Para resolver esta confusión, en 1997 se creó un estándar oficial llamado ECMAScript, que es básicamente el “nombre técnico” de JavaScript. Este estándar fue gestionado por un comité internacional llamado TC39.

Desde entonces, JavaScript = lenguaje basado en ECMAScript. Cada vez que escuchas que JavaScript tiene una nueva “versión” (como ES5, ES6…), se refiere a una actualización del estándar ECMAScript.

Evolución del lenguaje

Durante muchos años, JavaScript evolucionó lentamente. Sin embargo, hubo algunos momentos clave:

ES3 (1999): Se añadió soporte para expresiones regulares, mejor manejo de errores, y más estabilidad. Fue muy utilizado durante muchos años.
ES5 (2009): Se añadió strict mode, JSON, y muchas mejoras que lo hicieron más moderno.
ES6 (2015), también llamado ES2015: ¡Revolución total! Este fue el gran salto que transformó a JavaScript en el lenguaje profesional y potente que conocemos hoy. Aquí llegaron cosas como:
- let y const
- Funciones flecha (=>)
- Clases y herencia
- Promesas
- Módulos (import y export)
- Destructuración, Map, Set, y muchas mejoras más

@TIP. A partir de ES6, el lenguaje comenzó a evolucionar año tras año, con nuevas versiones (ES2016, ES2017, etc.), aunque muchas veces se sigue llamando «JavaScript moderno» a todo lo que llegó con ES6 y versiones posteriores.

JavaScript hoy en día

Hoy, JavaScript es uno de los lenguajes más usados del mundo, y ha dejado de ser “solo para el navegador”. Con la llegada de Node.js (de lo cual hablaremos más adelante), se puede ejecutar código JavaScript también en el servidor, lo que lo convierte en un lenguaje full stack.

Además, el ecosistema de JavaScript ha explotado con miles de librerías y frameworks como:

React, Vue, Angular → para el desarrollo del frontend.
Node.js, Express → para el backend.
Electron, React Native, Ionic → para apps de escritorio y móviles.

Esto hace que con JavaScript puedas desarrollar casi cualquier tipo de aplicación: páginas web, juegos, apps móviles, aplicaciones de escritorio, servidores web, herramientas automatizadas, etc.

1.3 Entorno de ejecución: navegadores y Node.js

Una de las cosas más interesantes de JavaScript es dónde puede ejecutarse. A diferencia de otros lenguajes como Python o C++, que normalmente se ejecutan en el sistema operativo o desde una terminal, JavaScript, debido a sus orígenes, tiene una historia un poco distinta y muy ligada al navegador web. Pero no se queda ahí.

Vamos a ver en detalle los dos grandes entornos de ejecución donde puede funcionar JavaScript:

– JavaScript en los navegadores

El entorno original y más conocido de JavaScript es el navegador web (como Chrome, Firefox, Edge, Safari…). Todos estos navegadores modernos traen incorporado un motor de JavaScript, es decir, un programa interno que interpreta y ejecuta el código JavaScript directamente en el navegador del usuario.

¿Qué hace el navegador con JavaScript?

El navegador usa JavaScript para hacer que una página web sea interactiva. Por ejemplo:

Mostrar u ocultar elementos cuando haces clic.
Validar un formulario antes de enviarlo.
Crear animaciones o transiciones.
Cargar contenido nuevo sin recargar la página (AJAX).
Reaccionar a eventos del usuario (como teclas, ratón, etc.).

JavaScript trabaja junto con HTML y CSS para crear páginas web dinámicas. El navegador proporciona un conjunto de objetos y funciones que puedes usar desde JavaScript para interactuar con la página. Lo más conocido de esto es el DOM (Document Object Model), que te permite leer y modificar el contenido HTML desde el código.

Motores JavaScript más conocidos

Cada navegador tiene su propio motor JavaScript. Por ejemplo:

V8 (Google Chrome, también usado por Node.js)
SpiderMonkey (Firefox)
JavaScriptCore (Safari)
Chakra (Internet Explorer / Edge Legacy)

@Tip: El motor V8, creado por Google, es increíblemente rápido. Compila el código JavaScript a lenguaje máquina justo a tiempo (JIT), lo que lo hace muy eficiente.

– JavaScript en el servidor: Node.js

Aunque JavaScript empezó en el navegador, con el tiempo surgió la necesidad de usarlo también en el servidor. Y ahí entra en escena Node.js.

¿Qué es Node.js?

Node.js es un entorno de ejecución de JavaScript fuera del navegador, creado en 2009 por Ryan Dahl. Se basa en el motor V8 de Google Chrome, pero lo extiende con funcionalidades para trabajar con el sistema operativo, archivos, red, y mucho más.

Gracias a Node.js puedes hacer cosas como:

Crear servidores web.
Leer y escribir archivos.
Conectarte a bases de datos.
Ejecutar tareas automatizadas.
Construir aplicaciones completas del lado del servidor (backend).

Y lo mejor es que usas el mismo lenguaje (JavaScript) tanto en el navegador como en el servidor. Esto facilita mucho el desarrollo full stack: puedes usar una sola tecnología en todo tu proyecto.

Diferencias clave entre navegador y Node.js

Característica	Navegador	Node.js
Entorno	Cliente (frontend)	Servidor (backend)
Acceso al DOM	✅ Sí	❌ No
Acceso al sistema de archivos	❌ No	✅ Sí
Uso típico	Interfaz de usuario web	Lógica de servidor, APIs
Funciones disponibles	`alert()`, `document`, `window`	`fs`, `http`, `process`, etc.
Ejecución	Se ejecuta automáticamente al cargar la web	Manual, desde la consola

¿Dónde se aprende primero?

Por lo general, cuando uno empieza con JavaScript, suele hacerlo en el navegador, ya que es donde se entiende más fácilmente su propósito original: dar vida a las páginas web. Escribes el código en un achivo de texto y lo cargas desde el Navegador para ver sus resultados.

Más adelante, cuando ya entiendes bien cómo funciona el lenguaje puedes dar el salto a Node.js para aprender a crear servidores, APIS, trabajar con archivos y mucho más.

1.4 Cómo ejecutar código JavaScript

Ahora que ya sabes qué es JavaScript, para qué se usa y dónde puede ejecutarse, es hora de ver cómo lo ponemos en marcha. Vamos a explorar las formas más comunes y sencillas de ejecutar código JavaScript tanto en el navegador como fuera de él con Node.js.

Ejecutar JavaScript en el navegador

a) Directamente en una página HTML

La forma más clásica y directa es incrustar JavaScript en una página web escribiendo el código entre las etiquetas <script> </script> .

<!DOCTYPE html>
<html>
<head>
  <title>Mi primera página JS</title>
</head>
<body>
  <h1>¡Hola, Mundo!</h1>

  <script>
    console.log("Hola desde JavaScript!");
    alert("Hola, Mundo!");
  </script>
</body>
</html>

Ahora lo que tendremos que hacer es guardar este código en un archivo p.e. index.html y cargar este archivo desde el navegador.

b) Usando archivos JavaScript externos

Puedes escribir el código JavaScript en un archivo por separado con extensión.js y luego enlazarlo desde tu HTML en la etiqueta <script>:

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo con archivo externo</title>
  <script src="app.js"></script>
</head>
<body>
  <h2>Probando archivo externo</h2>
</body>
</html>

app.js:

console.log("Este mensaje viene desde app.js");

¿Qué ventajas tiene?

Separas el HTML del JavaScript.
Más limpio y fácil de mantener.
Puedes reutilizar el mismo archivo JS en varias páginas html distintas.

c) Desde la consola del navegador

Todos los navegadores actuales tienen herramientas de desarrollo (DevTools) que te permiten escribir y probar código JavaScript directamente.

Pasos:

Abre una página web cualquiera.
Haz clic derecho y selecciona “Inspeccionar” o pulsa F12.
Ve a la pestaña “Consola” o “Console”.
Escribe código como este:

console.log("Probando desde la consola");

d) Ejecutar JavaScript con Node.js

1) Instalación de Node.js

Primero necesitas instalar Node.js desde su sitio oficial:

👉 https://nodejs.org

Esto te instala dos cosas importantes:

El ejecutable node para correr archivos JavaScript.
El gestor de paquetes npm, que se usa más adelante para instalar librerías.

2) Crear y ejecutar un archivo .js

Crea un archivo llamado hola.js:

console.log("¡Hola desde Node.js!");

Abre una terminal o consola (CMD, PowerShell, Terminal de macOS o Linux).
Ejecuta:

node hola.js

¡Y verás el mensaje en tu terminal!

e) Usar el modo interactivo (REPL)

Node también tiene un CLI (línea de comandos interactiva) que te permite ejecutar código línea por línea al igual que hemos hecho en la consola del navegador:

node

Y luego puedes escribir directamente:

> 2 + 2
4
> console.log("Hola")
Hola

Este modo de trabajo se llama REPL (Read-Eval-Print Loop), y es muy útil para probar cosas rápidamente.

¿Cuál es mejor para empezar?

Situación	Recomendado
Probar cosas simples	Consola del navegador
Crear páginas web interactivas	Script en HTML o archivo externo JS
Aprender desarrollo backend	Node.js
Hacer pruebas rápidas en local	Node.js REPL o consola navegador

1.5 Herramientas del navegador (DevTools)

Como hemos adelantado, todos los navegadores modernos (Chrome, Firefox, Edge, Safari) incluyen un conjunto de herramientas para desarrolladores. Estas herramientas permiten inspeccionar el código HTML, ver estilos CSS aplicados y, lo que nos interesa aquí, ejecutar y depurar JavaScript.

¿Cómo abrirlas?

El acceso a esta sección depende del navegador que estés utilizando, pero normalmente suele ser en las opciones del menú «Herramientas del desarrollador«. También es posible medienate los atajos de teclado:

Windows/Linux: F12 o clic derecho → «Inspeccionar»
Mac: Cmd + Option + I

Dentro de las opciones de Herramientas del desarrollador tenemos varios apartados útiles, entre los que podemos destacar:

Consola (Console): para ejecutar comandos, ver errores y mensajes del comando javascript console.log(). Muy útil para depurar los programas.
Fuentes (Sources): donde podemos ver todos los archivos descargados por el navegador para una página web y depurar archivos .js.
Depurador (Debugger): Nos permite poner «puntos de interrupción» para examinar paso a paso cómo se ejecuta tu código y puder evaluar en tiempo de ejecución el valor de las variables.
Red (Network): para analizar las solicitudes HTTP y cómo se cargan los recursos, podemos ver las cabeceras, códigos de respuesta HTTP, etc..

Editores de código

Para escribir código JavaScript lo ideal es usar un buen editor de texto o IDE (entorno de desarrollo integrado). Entre los más populares podemos destacar:

Visual Studio Code (VS Code)

Gratuito, multiplataforma y ligero.
Autocompletado inteligente, resaltado de sintaxis y depuración integrada.
Amplia variedad de extensiones para JavaScript, Node.js, React, etc.
Terminal integrada y control de versiones con Git.

Puedes descargarlo desde su web: https://code.visualstudio.com/

Otros editores populares que puedes utilizar:

Editor	Características
Sublime Text	Rápido, personalizable, pero con versión de pago.
Atom	Código abierto, desarrollado por GitHub.
WebStorm	Muy potente, ideal para proyectos grandes, pero de pago.

Consolas y terminales

Si usas Node.js para ejecutar JavaScript fuera del navegador, necesitarás trabajar desde una consola o terminal. Desde este entorno podrás:

Ejecutar tus archivos con el comando node archivo.js
Instalar paquetes con npm
Usar herramientas como git, eslint, webpack, etc.

Ejemplos de terminales útiles:

CMD o PowerShell en Windows
Terminal en macOS o Linux
Terminal integrada en VS Code (¡muy práctica!)

Conclusión

En este primer capítulo hemos conocido los fundamentos sobre qué es JavaScript, su origen, y por qué se ha convertido en uno de los lenguajes más importantes del desarrollo web. Aprendimos que JavaScript no solo se ejecuta en navegadores, sino también en servidores gracias a Node.js, y que existe una gran variedad de herramientas para trabajar con él de forma cómoda y eficiente.

Hemos explorado cómo comenzar a escribir y ejecutar código, y cuáles son las principales herramientas que te acompañarán durante tu camino como desarrollador JavaScript. Con estos conocimientos, ya estás listo para sumergirte en la sintaxis básica del lenguaje, escribir tus primeros programas y comenzar a pensar como un programador JavaScript.

En el siguiente capítulo empezaremos ya con la sintáxis básica de JavaCript y con nuestros primeros scripts.

Índice

1. Introducción a JavaScript