Introducción a JavaScript
JavaScript es un lenguaje de programación de alto nivel, interpretado y basado en el modelo de eventos. Es uno de los pilares del desarrollo web moderno, junto con HTML y CSS. Originalmente fue creado para agregar interactividad y dinamismo a las páginas web, pero con el tiempo ha evolucionado para ser un lenguaje versátil que se usa tanto en el cliente (navegador) como en el servidor.
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Mundo</title>
</head>
<body>
<h1 id="saludo"></h1>
<script>
document.getElementById("saludo").textContent = "Hola, Mundo";
</script>
</body>
</html>
Características principales de JS
🔸Interpretado: No requiere compilación; los navegadores lo ejecutan directamente. 🔸Basado en objetos: Aunque no es estrictamente orientado a objetos, admite programación basada en prototipos. 🔸Dinámico: Permite escribir código flexible sin necesidad de declarar estrictamente tipos de datos. 🔸Compatible: Es compatible con todos los navegadores modernos. 🔸Lenguaje de propósito general: Aunque nació para la web, hoy puede usarse para desarrollar aplicaciones móviles, de escritorio y más.¿Para qué se utiliza JavaScript?
En el lado del cliente (Front-end):
Interactividad: Crear experiencias interactivas para los usuarios, como menús desplegables, sliders de imágenes, formularios dinámicos, etc.
Manipulación del DOM: Cambiar o actualizar el contenido HTML y CSS en tiempo real.
Validación de formularios: Validar datos del usuario antes de enviarlos al servidor.
Animaciones: Añadir transiciones y efectos animados en páginas web.
En el lado del servidor (Back-end):
Gracias a Node.js, JavaScript también puede ser utilizado para desarrollar servidores web, manejar bases de datos y ejecutar lógica de negocio.
Desarrollo de aplicaciones móviles:
Con herramientas como React Native, se pueden crear aplicaciones móviles para iOS y Android usando JavaScript.
Desarrollo de aplicaciones de escritorio:
Frameworks como Electron.js permiten construir aplicaciones de escritorio multiplataforma, como Visual Studio Code o Discord.
Desarrollo de juegos:
JavaScript también se usa en el desarrollo de videojuegos simples (por ejemplo, con Canvas API) o más avanzados con motores como Phaser.js.
Automatización y scripting:
Se utiliza para automatizar tareas repetitivas, como pruebas automatizadas en navegadores (Selenium) o la creación de scripts para páginas web.
Inteligencia artificial y ciencia de datos:
Con bibliotecas como TensorFlow.js, se puede trabajar en modelos de aprendizaje automático directamente en el navegador.
Ventajas de JavaScript:
- Es multiplataforma y funciona en prácticamente cualquier dispositivo que tenga un navegador.
- Posee una enorme cantidad de bibliotecas y frameworks (React, Angular, Vue, etc.).
- La comunidad es vasta, con recursos disponibles para aprendizaje y resolución de problemas.
Desventajas de JavaScript:
- Puede ser menos eficiente que otros lenguajes para tareas muy intensivas en cálculo.
- Su flexibilidad puede llevar a errores difíciles de depurar si no se sigue una estructura clara.
Instalación y Configuración del Entorno: Navegadores y Editores
JavaScript es un lenguaje muy versátil que se puede ejecutar tanto en el navegador como en el servidor. Para empezar, necesitas configurar un entorno adecuado donde puedas escribir y probar tu código.
Uso del Navegador
Los navegadores modernos (como Chrome, Firefox, Edge y Safari) tienen un motor JavaScript integrado, por lo que puedes ejecutar JavaScript directamente en ellos. No necesitas instalar nada adicional para probar pequeños fragmentos de código.
Pasos para usar el navegador:
1- Abrir la consola del navegador:
🔸 En Google Chrome o Microsoft Edge:
Presiona Ctrl +Shift + J (Windows/Linux) o Cmd + Option + J (Mac).
🔸 En Mozilla Firefox:
Presiona Ctrl +Shift + K (Windows/Linux) o Cmd + Option + K (Mac).
2- Escribir código en la consola:
En la consola, puedes escribir código JavaScript y presionar Enter para ejecutarlo.
console.log("Hola, mundo desde el navegador");
Cuándo usar el navegador:
Es recomendable utilizar el navegador para probar fragmentos pequeños de código o cuando trabajas directamente con aplicaciones web.Instalar un Editor de Texto: Visual Studio Code (VS Code)
Visual Studio Code es un editor de código ligero y poderoso que se utiliza ampliamente para desarrollar en JavaScript y otros lenguajes.
Pasos para instalar y configurar VS Code:
1- Descargar Visual Studio Code:
📚 Ve a la página oficial: https://code.visualstudio.com/.
Descarga la versión adecuada para tu sistema operativo (Windows, MacOS o Linux).
2- Instalar:
Sigue el asistente de instalación.
Marca la opción para agregar VS Code al PATH si aparece (esto facilita abrirlo desde la terminal).
Configurar Extensiones:
Abre Visual Studio Code.
Haz clic en el ícono de extensiones (barra lateral izquierda) o presiona Ctrl + Shift + X.
Busca e instala las siguientes extensiones útiles:
🔸ESLint: Ayuda a mantener un estilo de código consistente y detectar errores.
🔸Prettier: Formatea automáticamente tu código.
🔸JavaScript (ES6) code snippets: Ofrece atajos para escribir código JavaScript más rápido.
🔸Code Runner: Permite ejecutar código JavaScript y muchos más lenguajes desde VSC.
Abrir un Proyecto:
🔸Crea una carpeta para tus proyectos JavaScript.
🔸Desde VS Code, selecciona File > Open Folder y elige la carpeta creada.
Crear tu primer archivo JavaScript:
Dentro de la carpeta de tu proyecto, haz clic en New File.
1- Nombra el archivo como app.js.
2- Escribe tu primer código:
console.log("¡Hola desde Visual Studio Code!");
3- Ejecutar Código:
Puedes usar extensiones como Code Runner para ejecutar código directamente en VS Code. Si instalaste Node.js (ver sección siguiente), puedes ejecutarlo desde la terminal.
Instalar Node.js
Node.js permite ejecutar JavaScript fuera del navegador. Esto es especialmente útil para aprender y crear proyectos más avanzados como servidores, herramientas o scripts.
1- Descargar Node.js:
📚 Ve a la página oficial: https://nodejs.org/
Descarga la versión recomendada para tu sistema operativo (LTS es más estable y adecuada para principiantes).
2- Instalar:
Sigue las instrucciones del instalador.
Marca la opción para instalar npm (Node Package Manager), que viene incluido con Node.js.
3- Verificar la instalación:
Abre la terminal:
En Windows: Presiona Windows +R, escribe cmd y presiona Enter.
En Mac/Linux: Abre la aplicación de «Terminal«.
Escribe los siguientes comandos para verificar que todo está instalado:
node -v
Esto muestra la versión de Node.js instalada.
console.log("Hola, mundo desde Node.js");
4- Ejecutar tu primer programa con Node.js:
Crea un archivo llamado app.js con este contenido:
cd ruta/del/archivo
Ejecuta el archivo:
node app.js
Deberías ver «Hola, mundo» desde Node.js en la terminal.
