Introducción a JavaScript

¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado, orientado a objetos, basado en prototipos y de alto nivel con funciones de primera clase. Es uno de los tres pilares fundamentales del desarrollo web junto con HTML y CSS:

HTML: Define la estructura del contenido web
CSS: Controla la presentación y el diseño
JavaScript: Añade interactividad y comportamiento dinámico

JavaScript permite crear páginas web dinámicas que pueden:

Responder a las acciones del usuario
Modificar el contenido de la página en tiempo real
Comunicarse con servidores para cargar datos sin recargar la página
Almacenar información en el navegador del usuario

// Un simple ejemplo de JavaScript
console.log("¡Hola, mundo!");

Historia y evolución

Orígenes

JavaScript fue creado por Brendan Eich en 1995 mientras trabajaba en Netscape Communications. Originalmente llamado "Mocha", luego "LiveScript", y finalmente "JavaScript" (aunque no tiene relación directa con el lenguaje Java).

Línea de tiempo

1995: Primera versión de JavaScript
1997: Estandarización con ECMAScript 1
1999: ECMAScript 3 (ampliamente implementado)
2009: ECMAScript 5 (ES5) con importantes mejoras
2015: ECMAScript 2015 (ES6) - Una actualización masiva con muchas características nuevas
2016-presente: Actualizaciones anuales (ES2016, ES2017, etc.)

Evolución del uso

JavaScript ha evolucionado desde un simple lenguaje para validación de formularios a un poderoso ecosistema que permite:

Aplicaciones web completas (Single Page Applications)
Desarrollo del lado del servidor (Node.js)
Aplicaciones móviles (React Native, Ionic)
Aplicaciones de escritorio (Electron)
Internet de las cosas (IoT)

JavaScript en el desarrollo web moderno

Roles actuales de JavaScript

Frontend: Manipulación del DOM, gestión de eventos, validación de formularios
Backend: Servidores con Node.js, APIs RESTful
Fullstack: Desarrollo completo usando JavaScript en ambos lados
Frameworks y bibliotecas: React, Angular, Vue, Express, etc.
Herramientas de desarrollo: Webpack, Babel, ESLint, etc.

Importancia en la industria

JavaScript es consistentemente uno de los lenguajes de programación más populares según índices como:

GitHub Octoverse
Stack Overflow Developer Survey
TIOBE Index

La demanda de desarrolladores de JavaScript sigue siendo alta, con salarios competitivos en todo el mundo.

Configuración del entorno de desarrollo

Para comenzar a programar en JavaScript, necesitas:

Herramientas básicas

Un editor de código:
- Visual Studio Code (recomendado)
- Sublime Text
- Atom
- WebStorm (IDE completo)
Un navegador moderno:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
Herramientas de desarrollo del navegador:
- Presiona F12 o Ctrl+Shift+I (Cmd+Option+I en Mac) para abrir las DevTools
- La consola JavaScript para probar código y ver resultados
- El inspector de elementos para ver el DOM

Configuración avanzada (opcional)

Node.js: Para ejecutar JavaScript fuera del navegador
npm o yarn: Gestores de paquetes para instalar bibliotecas
Git: Para control de versiones
ESLint: Para verificar la calidad del código

Tu primer programa en JavaScript

Método 1: Usando la consola del navegador

Abre tu navegador
Presiona F12 para abrir las herramientas de desarrollo
Ve a la pestaña "Console"
Escribe el siguiente código y presiona Enter:

console.log("¡Hola, mundo desde JavaScript!");

Método 2: Creando un archivo HTML con JavaScript

Crea un archivo llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer JavaScript</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    
    <script>
        // JavaScript interno
        console.log("¡Hola desde JavaScript interno!");
        
        // Cambiando el contenido HTML
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector("h1").style.color = "blue";
        });
    </script>
</body>
</html>

Método 3: JavaScript en un archivo separado

Crea un archivo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript externo</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    
    <!-- JavaScript externo -->
    <script src="script.js"></script>
</body>
</html>

Crea un archivo script.js en la misma carpeta:

// Este es un archivo JavaScript externo
console.log("¡Hola desde un archivo JavaScript externo!");

// Cambiando el contenido HTML cuando la página carga
document.addEventListener("DOMContentLoaded", function() {
    const heading = document.querySelector("h1");
    heading.style.color = "purple";
    heading.textContent = "¡JavaScript está funcionando!";
});

Conclusión

JavaScript es un lenguaje de programación versátil y poderoso que ha evolucionado significativamente desde su creación. Es esencial para el desarrollo web moderno y tiene aplicaciones más allá del navegador. En las próximas lecciones, profundizaremos en la sintaxis y características de JavaScript para construir aplicaciones web interactivas y dinámicas.

Sintaxis Básica y Variables

Aprende los fundamentos de la sintaxis de JavaScript, incluy...

Referencias

Auth0. A Brief History of JavaScript. https://auth0.com/blog/a-brief-history-of-javascript/

MDN Web Docs. JavaScript Documentation. https://developer.mozilla.org/en-US/docs/Web/JavaScript