Programming & Development

JavaScript / TypeScript

Beginner 10 modules • 30 hours •69 € VAT included

Curso orientado a aprender JavaScript moderno y a introducir TypeScript como capa de tipos para desarrollo frontend y backend. El recorrido cubre navegador, DOM, eventos, asincronia, Node.js, modulos y tooling, con un enfoque pensado para construir aplicaciones pequeñas pero serias.

JavaScript es el lenguaje nativo del navegador y tambien una pieza central del desarrollo backend con Node.js. TypeScript se ha convertido en el complemento natural para proyectos medianos y grandes porque permite describir contratos, objetos, respuestas de API y componentes con mayor seguridad. Este curso construye criterio para moverse en ambos runtimes sin mezclar conceptos.

The first module is free. Request information about full-course access.

Please note: the course material (modules, exam, glossary and labs) is written in Spanish. Only the site interface is available in English. A good reading level of Spanish is required.

On sale soon. The first module is free: sign up and start.

hola@itlabcert.com

Request received. We will reply to your email within 48 working hours. No need to send it again.

For myself For my company or team

I have read and accept the privacy policy. We will only use your data to reply to you.

hola@itlabcert.com

Modulo 01. Introduccion al ecosistema JavaScript

Objetivo del modulo

Entender que es JavaScript, donde se ejecuta, como se relaciona con el navegador y con Node.js, y por que TypeScript aparece como capa complementaria en proyectos modernos.

Resultados esperados

Diferenciar lenguaje, runtime y herramientas del ecosistema.
Explicar la diferencia entre navegador y Node.js.
Conocer el papel de ECMAScript, V8, npm y TypeScript.
Preparar un entorno minimo para empezar a practicar.

Desarrollo teorico

JavaScript es un lenguaje de programacion interpretado y estandarizado por ECMAScript. Durante años se asocio casi exclusivamente al navegador, pero hoy se ejecuta tambien en servidores, herramientas de build, scripts de automatizacion e incluso aplicaciones de escritorio. Esa evolucion explica por que hablar solo de "JavaScript" ya no basta: hay que entender en que runtime se esta ejecutando.

En el navegador, JavaScript vive junto a HTML y CSS. El navegador ofrece APIs como document, window, localStorage, fetch, history o eventos del DOM. En Node.js, en cambio, no existe el DOM; lo que existe es acceso al sistema de archivos, procesos, red, variables de entorno y un modelo pensado para backend y scripting. Ambos comparten lenguaje, pero no contexto. Veamos la diferencia concreta con codigo:

// En el navegador - acceso al DOM
const titulo = document.querySelector("h1");
titulo.textContent = "Hola desde el navegador";
console.log(window.location.href);
localStorage.setItem("usuario", "admin");

// En Node.js - acceso al sistema
const fs = require("fs");
const os = require("os");
console.log(`Hostname: ${os.hostname()}`);
console.log(`Plataforma: ${os.platform()}`);
const contenido = fs.readFileSync("config.json", "utf-8");
console.log(contenido);

Intentar usar document en Node.js o require("fs") en el navegador produce errores. Esa frontera es una de las primeras cosas que hay que interiorizar.

Otra pieza esencial es ECMAScript, la especificacion que define el lenguaje. Cuando se habla de ES6, ES2015 o versiones posteriores, se alude a evoluciones del estandar: let, const, arrow functions, clases, modulos, promesas y mucho mas. El motor JavaScript del navegador o de Node.js implementa ese estandar. Uno de los motores mas conocidos es V8, usado por Chrome y por Node.js. Veamos las diferencias entre JavaScript clasico y moderno:

// ES5 (antiguo) - var, function, concatenacion
var nombre = "Ana";
var saludar = function(n) {
    return "Hola, " + n;
};

// ES6+ (moderno) - const/let, arrow, template literals
const nombre = "Ana";
const saludar = (n) => `Hola, ${n}`;

// Desestructuracion
const usuario = { nombre: "Ana", rol: "admin", departamento: "IT" };
const { nombre: nombreUsuario, rol } = usuario;

// Modulos ES6
import { validarEmail } from "./validaciones.js";
export function crearUsuario(datos) { /* ... */ }

El ecosistema moderno incluye tambien un gestor de paquetes: npm. Aunque mucha gente lo asocia a "instalar librerias", su papel real es mayor. npm permite declarar dependencias, scripts de proyecto y versionado de paquetes. La pieza central es package.json:

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "scripts": {
    "dev": "node app.js",
    "test": "node --test tests/",
    "lint": "eslint src/"
  },
  "dependencies": {
    "express": "^4.18.0"
  },
  "devDependencies": {
    "eslint": "^8.56.0"
  }
}

Los scripts definidos en package.json se ejecutan con npm run <nombre>. Eso estandariza como se arranca, prueba y mantiene un proyecto. Flujo basico de inicio:

# Inicializar proyecto
mkdir mi-app && cd mi-app
npm init -y

# Instalar una dependencia
npm install express

# Instalar herramienta de desarrollo
npm install --save-dev eslint

# Ejecutar un script
npm run dev

TypeScript aparece porque JavaScript, siendo muy flexible, deja muchos errores para tiempo de ejecucion. Si una funcion espera un objeto con email y activo, pero recibe una cadena, el fallo se descubre tarde. TypeScript añade un sistema de tipos sobre JavaScript:

// TypeScript: los errores se detectan antes de ejecutar
interface Usuario {
    nombre: string;
    email: string;
    activo: boolean;
}

function mostrarUsuario(usuario: Usuario): string {
    return `${usuario.nombre} (${usuario.email})`;
}

// Error en compilacion, no en runtime:
// mostrarUsuario("Ana");  // Argument of type 'string' is not assignable
mostrarUsuario({ nombre: "Ana", email: "ana@test.com", activo: true }); // OK

TypeScript no cambia el lenguaje que corre finalmente en el browser o en Node; transpila a JavaScript. Su valor no es "hacer JavaScript mas dificil", sino hacer grandes partes del codigo mas predecibles.

Pieza	Que es	Para que sirve
JavaScript	lenguaje	expresar logica en browser o Node
ECMAScript	estandar	definir sintaxis y comportamiento del lenguaje
Browser runtime	entorno del navegador	DOM, eventos, Web APIs
Node.js	runtime de servidor/scripting	filesystem, procesos, red, CLI
npm	gestor de paquetes	dependencias, scripts, versionado
TypeScript	superconjunto tipado	detectar errores antes de ejecutar

Un flujo minimo razonable seria:

Instalar Node.js.
Comprobar version con node --version y npm --version.
Crear una carpeta de proyecto.
Ejecutar un archivo app.js con node app.js.
Abrir la consola del navegador y comparar el entorno disponible.

// app.js - primer script para Node.js
const nombre = process.argv[2] || "mundo";
console.log(`Hola, ${nombre}!`);
console.log(`Node.js version: ${process.version}`);
console.log(`Directorio actual: ${process.cwd()}`);

node app.js Ana
# Hola, Ana!
# Node.js version: v20.11.0
# Directorio actual: /home/user/mi-proyecto

Esa comparacion temprana evita dos confusiones habituales: pensar que document existe en Node o que require("fs") puede usarse en un script del navegador sin build ni bundling.

Contenido ampliado

Diferencia entre libreria, framework y runtime.
Para que sirve package.json.
Relacion entre TypeScript y build/transpilacion.

Puntos clave

JavaScript es el lenguaje; navegador y Node.js son entornos distintos.
ECMAScript define el lenguaje, pero no las APIs del navegador.
npm es una pieza central del flujo de trabajo moderno.
TypeScript complementa JavaScript con tipos y mejor tooling.

Checklist operativa

Instalar Node.js y verificar versiones.
Crear un primer archivo .js ejecutable.
Abrir consola del navegador y comparar contexto.
Identificar que APIs son del browser y cuales de Node.

Errores frecuentes

Mezclar APIs de navegador y Node.js.
Pensar que npm solo sirve para "bajar librerias".
Confundir JavaScript con TypeScript como si fueran runtimes distintos.
Empezar a usar herramientas sin entender que problema resuelven.

Practica sugerida

Crea un archivo app.js, ejecutalo con Node, y luego prueba expresiones similares en la consola del navegador anotando diferencias de APIs disponibles.

Preguntas de autoevaluacion

Que diferencia hay entre lenguaje y runtime.
Por que document existe en el navegador pero no en Node.js.
Que problema intenta resolver TypeScript.

Cierre

Antes de aprender sintaxis avanzada conviene situar el mapa: JavaScript es el lenguaje, pero el valor profesional aparece cuando entiendes donde se ejecuta y con que herramientas trabaja.

Modelar datos y reglas basicas en JavaScript usando variables modernas, tipos fundamentales y estructuras de control claras.

What you will learn

Diferenciar `let`, `const` y `var`.
Reconocer tipos primitivos y referencias.
Usar condicionales, comparaciones y bucles comunes.
Evitar errores derivados de coercion y ambitos confusos.

Module contents

Desarrollo teorico
Contenido ampliado
Puntos clave
Checklist operativa
Errores frecuentes
Practica sugerida
Preguntas de autoevaluacion
Cierre