SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con Node.
js Módulo de Desarrollo Web
SENA — Formación en Tecnología
Clase 1
Introducción a JavaScript con [Link]
──────────────────────────────────────────────────────
Del código a la consola: variables, objetos, arrays,
funciones y tu primer CRUD funcional
Módulo de Desarrollo Web • Nivel Técnico
🎯 Objetivo de la clase 📋 Contenido
Que el estudiante comprenda los fundamentos • 01 — ¿Qué es [Link] y cómo instalarlo?
de JavaScript y [Link] para construir un • 02 — const vs let: el contrato de variables
sistema CRUD de inventario que corra 100% en
• 03 — Objetos: anatomía de un registro
la consola.
• 04 — Arrays: el archivador de datos
• 05 — Funciones y Arrow Functions
• 06 — CRUD completo en consola
• 07 — Reto de clase
SENA — Guía del Estudiante | Clase 1 | Pág. 1
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
¿Qué es [Link] y en qué se diferencia de JavaScript
01 vanilla?
JavaScript en dos mundos
Hasta ahora, cuando alguien dice "JavaScript" seguramente piensa en páginas web: botones,
animaciones, formularios. Ese es JavaScript corriendo en el navegador (Chrome, Firefox, Edge). Pero
JavaScript es un lenguaje completo, y [Link] nos permite ejecutarlo fuera del navegador,
directamente en nuestra computadora, como si fuera Python o Java.
JavaScript en el Navegador JavaScript con [Link]
Necesita una página HTML Se ejecuta solo, sin HTML
Vive dentro de Chrome/Firefox Corre en tu computadora (terminal)
Accede al DOM (botones, divs...) Accede al sistema de archivos, red
[Link]() → DevTools F12 [Link]() → Terminal/CMD
Orientado a la interfaz visual Orientado a lógica, servidores, datos
No puede leer archivos del PC Puede leer, escribir, crear archivos
💡 ¿Por qué empezamos con [Link]?
En esta clase queremos enfocarnos en la LÓGICA de programación, no en el diseño visual.
[Link] nos permite probar código JavaScript puro sin necesidad de crear páginas HTML.
Así aprenderemos exactamente el mismo JavaScript que usaremos después en Vue, React
o Angular.
Instalación paso a paso
Sigue estos pasos para instalar [Link] en tu computadora:
1. Ir a [Link] — descargar la versión LTS (Long Term Support) — es la más estable y
recomendada para aprender.
2. Ejecutar el instalador y aceptar todas las opciones por defecto (Next → Next → Install).
3. Verificar la instalación — abrir la terminal y ejecutar:
● ● ● JavaScript
node --version
# Debería mostrar algo como: v20.11.0
npm --version
# npm es el gestor de paquetes — también se instala con Node
# Debería mostrar algo como: 10.2.4
SENA — Guía del Estudiante | Clase 1 | Pág. 2
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
¿Qué es la Terminal / CMD?
En Windows: busca 'cmd' o 'PowerShell' en el menú inicio.
En Mac: busca 'Terminal' en Aplicaciones.
En VS Code: menú Terminal → New Terminal (recomendado, así todo está en un lugar).
Crear y ejecutar tu primer archivo
Ahora vamos a crear un proyecto y probar que todo funciona:
● ● ● JavaScript
// 1. Crear una carpeta para el proyecto
mkdir clase1-crud
cd clase1-crud
// 2. Crear el archivo principal
// (en VS Code: File → New File → guarda como '[Link]')
// 3. Escribe esto en [Link]:
[Link]("¡[Link] funciona correctamente!");
[Link]("Estoy aprendiendo JavaScript en el SENA");
// 4. Ejecutar desde la terminal:
node [Link]
// Resultado esperado en consola:
// ¡[Link] funciona correctamente!
// Estoy aprendiendo JavaScript en el SENA
SENA — Guía del Estudiante | Clase 1 | Pág. 3
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
02 const vs let — El contrato de las variables
En ingeniería de software, si algo no debe cambiar, lo protegemos. JavaScript moderno tiene dos
formas de declarar variables y cada una envía un mensaje claro a quien lee el código.
const — Constante let — Variable
const PI = 3.14159; let contador = 0;
const nombreApp = 'CRUD SENA'; let total = 100;
No se puede reasignar Sí se puede reasignar
Uso por defecto (90% del tiempo) Solo cuando el valor cambiará
Genera error si intentas cambiarla Flexible, acepta nuevos valores
Ejemplo práctico — escríbelo y ejecútalo
● ● ● JavaScript
// === SECCIÓN 2: const vs let ===
// const: para cosas que NO deben cambiar
const nombreProyecto = "Sistema de Inventario SENA";
const VERSION = "1.0.0";
// let: para cosas que SÍ van a cambiar
let contadorVentas = 0;
let stockTotal = 50;
// Probamos que let puede cambiar:
contadorVentas = 5;
stockTotal = stockTotal + 10;
[Link]('Proyecto:', nombreProyecto);
[Link]('Ventas registradas:', contadorVentas);
[Link]('Stock actualizado:', stockTotal);
// ❌ Esto causaría un ERROR — descomenta para ver qué pasa:
// nombreProyecto = "Otro nombre"; // Assignment to constant variable
📏 Regla de oro para esta clase
→ Declara TODO con const por defecto.
→ Cambia a let SOLO si sabes que el valor va a cambiar (contadores, arrays que se
reasignan).
→ Nunca uses var — es obsoleto y tiene comportamientos confusos.
SENA — Guía del Estudiante | Clase 1 | Pág. 4
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
03 Objetos — La anatomía de un registro
Un objeto es un modelo de la realidad. En lugar de tener variables sueltas (nombre1, precio1,
stock1), agrupamos toda la información de una entidad bajo un solo nombre. Esta es la base de cómo
funcionan las bases de datos.
Estructura de un objeto
● ● ● JavaScript
// Un objeto agrupa datos relacionados bajo un nombre
// Sintaxis: { clave: valor, clave: valor }
const producto = {
id: 101,
nombre: "Teclado Mecánico",
precio: 45.00,
stock: 20,
disponible: true
};
// Acceso a propiedades — dos formas equivalentes:
[Link]([Link]); // "Teclado Mecánico"
[Link](producto["precio"]); // 45
// Modificar una propiedad:
[Link] = 39.99;
[Link]("Nuevo precio:", [Link]);
// Ver el objeto completo:
[Link](producto);
Desestructuración — extraer propiedades fácilmente
La desestructuración es una forma corta de extraer propiedades de un objeto. La usaremos mucho
en el CRUD:
● ● ● JavaScript
const producto = {
id: 101, nombre: "Teclado", precio: 45.00, stock: 20
};
// Sin desestructuración (forma larga):
const nombre = [Link];
const precio = [Link];
// CON desestructuración (forma moderna):
const { nombre, precio, stock } = producto;
[Link](nombre); // "Teclado"
[Link](precio); // 45
// También funciona en parámetros de función (lo veremos después):
const mostrarProducto = ({ nombre, precio }) => {
[Link](`Producto: ${nombre} — $${precio}`);
SENA — Guía del Estudiante | Clase 1 | Pág. 5
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
};
mostrarProducto(producto);
🔑 Clave y Valor (Key-Value)
En un objeto, cada elemento tiene una CLAVE (key) y un VALOR (value).
Ejemplo: nombre: 'Teclado' → clave = nombre, valor = 'Teclado'
El valor puede ser cualquier tipo: número, texto, boolean, array, o incluso otro objeto.
SENA — Guía del Estudiante | Clase 1 | Pág. 6
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
04 Arrays — El archivador de datos
Si el objeto es una "ficha" con los datos de algo, el array es el "archivador" que guarda todas las
fichas. En nuestro inventario, el array será la única fuente de verdad — si algo no está en el array, no
existe para el programa.
Arrays simples y de objetos
● ● ● JavaScript
// Array simple (lista de valores):
const marcas = ["Apple", "Sony", "Logitech", "Samsung"];
// Acceso por ÍNDICE (siempre empieza en 0):
[Link](marcas[0]); // "Apple" ← índice 0
[Link](marcas[2]); // "Logitech" ← índice 2
[Link]([Link]); // 4 → cuántos elementos tiene
// === Array de OBJETOS — nuestra 'base de datos' ===
let inventario = [
{ id: 1, nombre: 'MacBook Pro', precio: 2500, stock: 5 },
{ id: 2, nombre: 'Monitor 4K', precio: 800, stock: 12 },
{ id: 3, nombre: 'Teclado SENA', precio: 45, stock: 30 },
];
// Acceder a un objeto dentro del array:
[Link](inventario[0].nombre); // 'MacBook Pro'
[Link](inventario[1].precio); // 800
// Ver todo el array como tabla (¡muy útil!):
[Link](inventario);
⚠️ El índice empieza en CERO, siempre
Es uno de los conceptos que más confunde al principio.
Lista de 3 elementos → índices: 0, 1, 2 (NUNCA 1, 2, 3)
El último elemento siempre está en: array[[Link] - 1]
SENA — Guía del Estudiante | Clase 1 | Pág. 7
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
05 Funciones y Arrow Functions — Los motores de acción
Una función es un bloque de código que puedes reutilizar cuantas veces quieras. Primero veremos
la sintaxis tradicional, y luego las Arrow Functions — la forma moderna que usamos en todo el código
de frameworks.
Evolución de la sintaxis
● ● ● JavaScript
// ── FUNCIÓN TRADICIONAL (todavía válida) ──────────────────
function saludar(nombre) {
return "Hola, " + nombre + "!";
}
[Link](saludar("Ana")); // "Hola, Ana!"
// ── ARROW FUNCTION (forma moderna) ────────────────────────
// Forma completa (con llaves y return):
const saludar = (nombre) => {
return `Hola, ${nombre}!`;
};
// Forma corta (retorno IMPLÍCITO — sin llaves ni return):
const saludar = (nombre) => `Hola, ${nombre}!`;
// Otro ejemplo de retorno implícito:
const sumar = (a, b) => a + b;
const cuadrado = n => n * n; // Un solo param: sin paréntesis
[Link](sumar(10, 5)); // 15
[Link](cuadrado(4)); // 16
Template Literals (backticks) — interpolación de texto
Los template literals usan comillas invertidas (`) en lugar de comillas normales. Nos permiten insertar
variables directamente en el texto con ${variable}:
● ● ● JavaScript
const nombre = "María";
const precio = 45.00;
// Forma antigua (concatenación):
[Link]("El producto de " + nombre + " cuesta $" + precio);
// Con template literals (mucho más claro):
[Link](`El producto de ${nombre} cuesta $${precio}`);
// También funciona con operaciones:
[Link](`El precio con IVA es: $${(precio * 1.19).toFixed(2)}`);
SENA — Guía del Estudiante | Clase 1 | Pág. 8
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
🎯 Mini reto — practica antes del CRUD
✏️ Ejercicio: escribe esta función
Crea una arrow function llamada mostrarProducto que reciba un objeto producto
e imprima en consola: 'El producto [nombre] cuesta $[precio]'
Pista: usa desestructuración en el parámetro: ({ nombre, precio }) => ...
y template literals con backticks para el mensaje.
Si logras hacerlo, ya estás listo para el CRUD completo.
● ● ● JavaScript
// Solución del mini reto:
const mostrarProducto = ({ nombre, precio }) =>
[Link](`El producto ${nombre} cuesta $${precio}`);
const teclado = { id: 1, nombre: 'Teclado SENA', precio: 45 };
mostrarProducto(teclado);
// → El producto Teclado SENA cuesta $45
SENA — Guía del Estudiante | Clase 1 | Pág. 9
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
06 CRUD Completo — Sistema de Inventario en Consola
¡Es hora de unir todo! El siguiente código es el sistema de inventario completo. Léelo con calma, cada
línea está comentada.
C — CREATE R — READ U — UPDATE D — DELETE
Agregar Listar Actualizar Eliminar
El código completo — [Link]
● ● ● JavaScript
/**
* CLASE 1: Sistema de Inventario CRUD — [Link]
* SENA — Formación en Tecnología
*/
// ════════════════════════════════════════════════════════════
// 1. NUESTRA 'BASE DE DATOS' — Array de objetos
// Este array es la Única Fuente de Verdad del programa
// ════════════════════════════════════════════════════════════
let inventario = [
{ id: 1, nombre: "MacBook Pro", precio: 2500, stock: 5 },
{ id: 2, nombre: "Monitor 4K", precio: 800, stock: 12 },
{ id: 3, nombre: "Teclado SENA", precio: 45, stock: 30 },
];
● ● ● JavaScript
// ════════════════════════════════════════════════════════════
// 2. READ — Listar todos los productos
// [Link]() muestra el array como una tabla visual
// ════════════════════════════════════════════════════════════
const listarProductos = () => {
[Link]("\n=== INVENTARIO ACTUAL ===");
[Link](inventario);
[Link]("Total de productos:", [Link]);
};
● ● ● JavaScript
// ════════════════════════════════════════════════════════════
// 3. CREATE — Agregar un nuevo producto
// [Link]() genera un ID único basado en el tiempo
// .push() agrega el objeto al final del array
// ════════════════════════════════════════════════════════════
const agregarProducto = (nombre, precio, stock) => {
const nuevoProducto = {
id: [Link](),
nombre: nombre,
precio: precio,
stock: stock
};
[Link](nuevoProducto);
[Link](`✅ Producto '${nombre}' agregado con éxito.`);
};
SENA — Guía del Estudiante | Clase 1 | Pág. 10
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
● ● ● JavaScript
// ════════════════════════════════════════════════════════════
// 4. UPDATE — Actualizar el precio de un producto
// Buscamos el producto por su ID con un bucle for
// Cuando lo encontramos, modificamos directamente
// ════════════════════════════════════════════════════════════
const actualizarPrecio = (id, nuevoPrecio) => {
for (let i = 0; i < [Link]; i++) {
if (inventario[i].id === id) {
inventario[i].precio = nuevoPrecio;
[Link](`🔄 Precio del ID ${id} actualizado a $${nuevoPrecio}`);
return; // Salimos de la función, ya terminamos
}
}
[Link](`❌ No se encontró producto con ID: ${id}`);
};
● ● ● JavaScript
// ════════════════════════════════════════════════════════════
// 5. DELETE — Eliminar un producto del inventario
// .splice(posición, cantidad) corta el array en esa posición
// ════════════════════════════════════════════════════════════
const eliminarProducto = (id) => {
for (let i = 0; i < [Link]; i++) {
if (inventario[i].id === id) {
const nombre = inventario[i].nombre;
[Link](i, 1); // Saca 1 elemento en posición i
[Link](` Producto '${nombre}' eliminado.`);
return;
}
}
[Link](`❌ No se encontró producto con ID: ${id}`);
};
● ● ● JavaScript
// ════════════════════════════════════════════════════════════
// 6. PRUEBA DEL SISTEMA — Ejecuta cada operación
// ════════════════════════════════════════════════════════════
[Link]('\n🚀 INICIANDO SISTEMA DE INVENTARIO...');
// READ: ver el estado inicial
listarProductos();
// CREATE: agregar un nuevo producto
agregarProducto("Mouse Gamer", 55, 25);
// UPDATE: cambiar el precio del ID 1
actualizarPrecio(1, 2200);
// READ: ver cómo quedó después de crear y actualizar
listarProductos();
// DELETE: eliminar el ID 2
eliminarProducto(2);
SENA — Guía del Estudiante | Clase 1 | Pág. 11
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
// READ final: ver el inventario sin el producto eliminado
listarProductos();
Resultado esperado al ejecutar node [Link]
● ● ● JavaScript
🚀 INICIANDO SISTEMA DE INVENTARIO...
=== INVENTARIO ACTUAL ===
┌─────────┬────┬──────────────────┬────────┬───────┐
│ (index) │ id │ nombre │ precio │ stock │
├─────────┼────┼──────────────────┼────────┼───────┤
│ 0 │ 1 │ 'MacBook Pro' │ 2500 │ 5 │
│ 1 │ 2 │ 'Monitor 4K' │ 800 │ 12 │
│ 2 │ 3 │ 'Teclado SENA' │ 45 │ 30 │
└─────────┴────┴──────────────────┴────────┴───────┘
Total de productos: 3
✅ Producto 'Mouse Gamer' agregado con éxito.
🔄 Precio del ID 1 actualizado a $2200
=== INVENTARIO ACTUAL ===
... (4 productos, MacBook con precio 2200) ...
Producto 'Monitor 4K' eliminado.
=== INVENTARIO ACTUAL ===
... (3 productos, sin Monitor 4K) ...
SENA — Guía del Estudiante | Clase 1 | Pág. 12
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
Nota para la Clase 2 — ¿Por qué cambiaremos .push()
📌 y .splice()?
Hoy usamos .push() y .splice() porque son intuitivos y fáciles de entender. Sin embargo, cuando
lleguemos a los frameworks (Vue, React) vas a descubrir por qué los profesionales no los usan.
🔮 Spoiler: el problema con push() y splice()
push() y splice() MODIFICAN el array original directamente (mutación).
Los frameworks como React y Vue necesitan un array NUEVO para detectar cambios.
Si modificas el array original, el framework no sabe que algo cambió y no actualiza la
pantalla.
Clase 2: aprenderemos spread operator [...arr, nuevo] y .filter() para crear arrays nuevos.
Por ahora, usa push() y splice() con confianza — son perfectos para aprender la lógica.
SENA — Guía del Estudiante | Clase 1 | Pág. 13
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
🎯 Reto de Clase — Sistema de Gestión de Estudiantes
Ahora vas a construir tu propio CRUD desde cero. No copies el del inventario — escríbelo tú, adaptado
a estudiantes.
Instrucciones
4. Crea un archivo nuevo llamado [Link]
5. Define un array estudiantes con al menos 3 objetos que tengan: id, nombre, programa, nota
6. Escribe las 4 funciones del CRUD:
Operación Función a crear Qué debe hacer
CREATE agregarEstudiante(nombre, Agregar un objeto al array
programa, nota) con .push()
READ listarEstudiantes() Mostrar el array con [Link]()
UPDATE actualizarNota(id, nuevaNota) Buscar por ID y cambiar la nota
DELETE eliminarEstudiante(id) Buscar por ID y usar .splice()
7. Al final del archivo, prueba TODAS las operaciones en orden: listar → agregar → actualizar →
listar → eliminar → listar
⭐ Bonus — para quien quiera ir más allá
1. Agrega una función buscarPorNombre(nombre) que muestre en consola el estudiante
encontrado.
2. Agrega una función promedioNotas() que calcule e imprima el promedio de todas las
notas.
3. Agrega un campo activo: true en cada objeto, y en lugar de eliminar, cambia activo a
false.
📋 Criterios de evaluación
✅ El archivo corre sin errores con: node [Link]
✅ El array inicial tiene mínimo 3 estudiantes con id, nombre, programa y nota
✅ Las 4 funciones CRUD están implementadas y funcionan correctamente
✅ Se llama a listarEstudiantes() después de cada operación para ver los cambios
✅ Los mensajes de consola son claros (usa emojis y template literals)
Resumen de la Clase 1
SENA — Guía del Estudiante | Clase 1 | Pág. 14
SENA Formación en Tecnología | Clase 1 — Introducción a JavaScript con [Link] Módulo de Desarrollo Web
const / let → const por defecto, let solo cuando el valor cambiará
Objetos { } → Modelo de un registro: clave-valor, acceso con punto o desestructuración
Arrays [ ] → Lista de objetos — la Única Fuente de Verdad del programa
Arrow Functions → Sintaxis moderna: (param) => expresión — retorno implícito si es 1 línea
Template Literals → Backticks: `Hola ${nombre}` — interpola variables en texto
CRUD → Create (.push) · Read ([Link]) · Update (bucle+asignación) · Delete (.splice)
SENA — Guía del Estudiante | Clase 1 | Pág. 15