Tutorial JavaScript: Introducción a JavaScript

Introducción e historia de JavaScript

¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado, orientado a objetos y basado en prototipos. Es uno de los pilares fundamentales del desarrollo web, junto con HTML y CSS. Mientras que HTML estructura el contenido y CSS lo estiliza, JavaScript permite dotar a las páginas web de interactividad y dinamismo.

Origen y Evolución

JavaScript es un lenguaje de programación que nació en 1995. Fue creado en apenas 10 días por Brendan Eich, un desarrollador de Netscape, con el objetivo de permitir que las páginas web fueran más dinámicas e interactivas. En sus inicios se llamó LiveScript, pero pronto pasó a llamarse JavaScript por motivos comerciales (aunque no tiene relación directa con el lenguaje Java).

En sus primeros años, JavaScript era visto como un lenguaje sencillo y limitado, usado principalmente para tareas básicas en el navegador como mostrar mensajes emergentes o validar formularios. Sin embargo, con el tiempo evolucionó hasta convertirse en uno de los lenguajes más poderosos y usados en el mundo del desarrollo web.

Hoy en día, JavaScript no solo funciona en los navegadores, sino también en servidores, dispositivos móviles, videojuegos y hasta en inteligencia artificial. Es el motor que hace que las páginas web cobren vida.

Versiones de JavaScript

JavaScript está estandarizado bajo el nombre de ECMAScript (ES), definido por la organización Ecma International. Este estándar asegura que el lenguaje evolucione de manera coherente y que las implementaciones en diferentes navegadores sean compatibles.

Principales Versiones

A lo largo de los años, se han lanzado varias versiones de ECMAScript, cada una introduciendo nuevas características y mejoras. A continuación, se presentan algunas de las más relevantes:

ES5 (2009): Introdujo el "modo estricto", mejoras en la manipulación de objetos y soporte para JSON.

ES6 / ES2015: Una de las actualizaciones más significativas, incorporando clases, módulos, promesas, funciones flecha y mucho más.

ES7 / ES2016 y posteriores: Desde 2016, se ha adoptado una cadencia anual de lanzamientos, introduciendo características como el operador de exponenciación (**), async/await, y mejoras en el manejo de arrays y objetos.

Es importante destacar que, aunque no es necesario dominar todas las versiones desde el inicio, comprender la evolución del lenguaje ayuda a escribir código más moderno y eficiente.

Instalación de Javascript

Antes de comenzar a escribir código JavaScript, es fundamental configurar un entorno de desarrollo adecuado. Afortunadamente, para los primeros pasos, no se requieren herramientas complejas.

Requisitos Básicos

• Navegador Web: Cualquier navegador moderno (como Google Chrome, Mozilla Firefox o Microsoft Edge) incluye una consola de desarrollador que permite ejecutar código JavaScript directamente.
• Editor de Texto: Un editor de texto simple como el Bloc de notas puede ser suficiente, pero se recomienda utilizar editores especializados como Visual Studio Code, que ofrecen resaltado de sintaxis y otras funcionalidades útiles.

Para ejecutar JavaScript fuera del navegador y desarrollar aplicaciones del lado del servidor, es necesario instalar Node.js en tu sistema.

Node.js es un entorno de ejecución que permite utilizar JavaScript en el servidor, proporcionando acceso al sistema de archivos, redes y otras funcionalidades.

A continuación, se detallan los pasos para instalar Node.js en los sistemas operativos más comunes:

Windows:

• Visita la página oficial de Node.js en nodejs.org y descarga el instalador de la versión LTS (Soporte a Largo Plazo) para Windows.

• Ejecuta el instalador y sigue las indicaciones del asistente de instalación, aceptando los términos de la licencia y seleccionando las opciones predeterminadas.
• Una vez completada la instalación, verifica que Node.js está correctamente instalado abriendo la línea de comandos y ejecutando:

Deberías ver la última versión de Node.js instalada, por ejemplo, v22.14.0.

macOS:

• Puedes instalar Node.js mediante el gestor de paquetes Homebrew. Si no tienes Homebrew instalado, puedes hacerlo ejecutando en la Terminal:

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• Una vez instalado Homebrew, instala Node.js ejecutando:

     brew install node

• Verifica la instalación comprobando la versión de Node.js:

     node -v

Linux:

• En distribuciones basadas en Debian/Ubuntu, abre la terminal y ejecuta:

     sudo apt update
     sudo apt install nodejs npm

• En distribuciones basadas en Fedora/CentOS/RHEL, utiliza:

     sudo dnf install nodejs npm

• Comprueba la versión instalada:

     node -v

• Es posible que las versiones disponibles en los repositorios oficiales no sean las más recientes. Para instalar la última versión LTS de Node.js, puedes utilizar el repositorio oficial:

     curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
     sudo apt install nodejs

O para Fedora:

     curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
     sudo dnf install nodejs

Uso de NVM (Node Version Manager):

• NVM es una herramienta que permite instalar y gestionar múltiples versiones de Node.js en el mismo sistema. Es especialmente útil para desarrolladores que trabajan en proyectos con diferentes versiones de Node.js.
• Para instalar NVM, ejecuta en la terminal:

     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

Luego, carga NVM en tu sesión actual:

     source ~/.nvm/nvm.sh

• Instala la versión LTS de Node.js:

     nvm install --lts

• Comprueba las versiones instaladas y selecciona la que deseas usar:

     nvm ls
     nvm use --lts

• Verifica que Node.js está instalado:

     node -v

• Comprobar la instalación:

Para asegurarte de que tanto Node.js como el gestor de paquetes npm están correctamente instalados, verifica las versiones:

     node -v
     npm -v

Deberías obtener la versión de Node.js y la versión de npm instalada.

Instalar Yarn (opcional):

• Yarn es un gestor de paquetes alternativo a npm, que ofrece algunas ventajas en términos de velocidad y seguridad. Puedes instalarlo ejecutando:

     npm install -g yarn

Verifica la instalación:

     yarn -v

Una vez instalado Node.js, podrás ejecutar scripts de JavaScript en tu sistema y utilizar un gran número de herramientas y frameworks de desarrollo que dependen de Node.js, como React, Angular o Vue.js.

Es importante mantener tu instalación de Node.js actualizada para beneficiarte de las últimas mejoras y correcciones de seguridad. Puedes consultar la versión actual y actualizarla según sea necesario utilizando el gestor de paquetes o NVM.

Primer Programa: "Hola, mundo"

Es una tradición en la programación comenzar con un programa que simplemente muestre el mensaje "Hola, mundo". Veamos cómo hacerlo en JavaScript.

Usando la Consola del Navegador

• Abre tu navegador web.
• Presiona F12 o haz clic derecho y selecciona "Inspeccionar" para abrir las herramientas de desarrollador.
• Navega a la pestaña "Consola".
• Escribe el siguiente código y presiona Enter:

console.log("Hola, mundo");

Deberías ver el mensaje "Hola, mundo" impreso en la consola.

Usando un Archivo HTML

También puedes escribir código JavaScript dentro de un archivo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primer programa</title>
</head>
<body>
    <h1>Hola, mundo</h1>
    <script>
        console.log("Hola, mundo");
    </script>
</body>
</html>

• Crea un archivo con el nombre index.html y abrelo con VSCode
• Copia y pega el código, guarda.
• Abre el archivo en tu navegador.

Verás el mensaje "Hola, mundo" en la página, y si abres la consola del navegador, también lo verás allí.