|
|
|
# 🧠 Módulo 1 — Fundamentos y Sintaxis de JavaScript
|
|
|
|
|
|
|
|
**Aplicación práctica: Sistema de gestión de recursos sanitarios (humanos y materiales)**
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 1. Qué es ECMAScript
|
|
|
|
|
|
|
|
ECMAScript es el **estándar que define el lenguaje JavaScript**, desarrollado por Ecma International.
|
|
|
|
Cada versión de ECMAScript introduce mejoras (por ejemplo, ES6 en 2015 incorporó `let`, `const`, clases, funciones flecha, entre otros).
|
|
|
|
Gracias a este estándar, el código JavaScript es **compatible entre navegadores y plataformas**.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const nombre = "Hospital Central";
|
|
|
|
console.log(`Bienvenido a la app de gestión de ${nombre}`);
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 2. Qué es JavaScript
|
|
|
|
|
|
|
|
JavaScript es un **lenguaje de programación interpretado** (no se compila antes de ejecutarse, el intérprete lo lee línea a línea).
|
|
|
|
Es además **débilmente tipado**, lo que significa que **no requiere especificar el tipo de dato** y puede convertir automáticamente entre tipos, lo que da flexibilidad pero exige cuidado.
|
|
|
|
|
|
|
|
JavaScript es **multiparadigma** (soporta programación funcional, orientada a objetos y procedimental) y se usa para desarrollar **aplicaciones web dinámicas**, como un sistema de gestión hospitalaria.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let usuario = "María";
|
|
|
|
console.log(`Hola ${usuario}, bienvenida al sistema de gestión.`);
|
|
|
|
|
|
|
|
// Tipado débil
|
|
|
|
let cantidad = "10";
|
|
|
|
let total = cantidad * 2;
|
|
|
|
console.log(`Total de camas disponibles: ${total}`);
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 3. Impresión por consola
|
|
|
|
|
|
|
|
El objeto `console` permite **mostrar información** para depuración y control del flujo:
|
|
|
|
|
|
|
|
* `console.log()` — información general.
|
|
|
|
* `console.info()` — información detallada.
|
|
|
|
* `console.warn()` — advertencias.
|
|
|
|
* `console.error()` — errores.
|
|
|
|
* `console.table()` — muestra datos en formato tabla.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let recursos = [
|
|
|
|
{ tipo: "Camas", cantidad: 12 },
|
|
|
|
{ tipo: "Mascarillas", cantidad: 300 }
|
|
|
|
];
|
|
|
|
|
|
|
|
console.log("Recursos actuales:");
|
|
|
|
console.info("Datos cargados correctamente.");
|
|
|
|
console.warn("Mascarillas por debajo del nivel recomendado.");
|
|
|
|
console.error("Error al conectar con la base de datos.");
|
|
|
|
console.table(recursos);
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 4. Declaración de variables
|
|
|
|
|
|
|
|
JavaScript permite declarar variables con `var`, `let` o `const`, cada una con distinto **alcance (scope)**:
|
|
|
|
|
|
|
|
* `var` → alcance de **función**, se puede redeclarar.
|
|
|
|
* `let` → alcance de **bloque**, más seguro y moderno.
|
|
|
|
* `const` → alcance de **bloque**, su valor no puede reasignarse (aunque sus propiedades sí).
|
|
|
|
|
|
|
|
Además, a partir de ES2022, **las clases** pueden definir propiedades **públicas** y **privadas**.
|
|
|
|
En JavaScript moderno no existen palabras reservadas como `public` o `private` al estilo de otros lenguajes (como Java o C#), pero se usan **convenciones**:
|
|
|
|
|
|
|
|
* Prefijo `_nombre` → indica que debería tratarse como privado (por convención).
|
|
|
|
* El prefijo real `#nombre` → define **propiedades privadas reales** (accesibles solo dentro de la clase).
|
|
|
|
* Por defecto, todas las propiedades y métodos son **públicos**.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
class Recurso {
|
|
|
|
#cantidad; // propiedad privada real
|
|
|
|
tipo; // propiedad pública
|
|
|
|
|
|
|
|
constructor(tipo, cantidad) {
|
|
|
|
this.tipo = tipo;
|
|
|
|
this.#cantidad = cantidad;
|
|
|
|
}
|
|
|
|
|
|
|
|
mostrar() {
|
|
|
|
console.log(`${this.tipo}: ${this.#cantidad}`);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Método público que accede a una propiedad privada
|
|
|
|
actualizarCantidad(nuevaCantidad) {
|
|
|
|
this.#cantidad = nuevaCantidad;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const guantes = new Recurso("Guantes", 200);
|
|
|
|
guantes.mostrar();
|
|
|
|
// guantes.#cantidad; // ❌ Error: propiedad privada no accesible
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 5. Tipos primitivos
|
|
|
|
|
|
|
|
Son los valores básicos:
|
|
|
|
`string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let nombre = "Juan";
|
|
|
|
let edad = 32;
|
|
|
|
let activo = true;
|
|
|
|
let departamento = undefined;
|
|
|
|
let recursoNulo = null;
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 6. Operadores
|
|
|
|
|
|
|
|
### Aritméticos
|
|
|
|
|
|
|
|
`+`, `-`, `*`, `/`, `%`
|
|
|
|
|
|
|
|
* `+` concatena si hay strings.
|
|
|
|
* Resta o multiplicación con strings numéricos convierte a números.
|
|
|
|
* `/` divide, `%` obtiene el resto.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
console.log("10" + 5); // "105"
|
|
|
|
console.log("10" - "5"); // 5
|
|
|
|
console.log(10 / 3); // 3.33
|
|
|
|
console.log(10 % 3); // 1
|
|
|
|
```
|
|
|
|
|
|
|
|
### Lógicos
|
|
|
|
|
|
|
|
`&&`, `||`, `!`
|
|
|
|
|
|
|
|
* Un solo `&` o `|` → bit a bit.
|
|
|
|
* Doble `&&` o `||` → lógico.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let camas = 10;
|
|
|
|
let enfermeras = 5;
|
|
|
|
|
|
|
|
console.log(camas > 0 && enfermeras > 0); // true
|
|
|
|
console.log(camas > 0 || enfermeras === 0); // true
|
|
|
|
console.log(!(camas > 0)); // false
|
|
|
|
```
|
|
|
|
|
|
|
|
### Comparativos
|
|
|
|
|
|
|
|
`==` compara solo valores, `===` compara valores **y tipos**.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
console.log(10 == "10"); // true
|
|
|
|
console.log(10 === "10"); // false
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 7. Arrays
|
|
|
|
|
|
|
|
Un **array** puede contener **elementos de distintos tipos**: números, strings, booleanos, objetos e incluso otros arrays.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let recursosMixtos = ["Camas", 10, true, { nombre: "Mascarillas", cantidad: 300 }];
|
|
|
|
console.log(recursosMixtos);
|
|
|
|
console.log(recursosMixtos[3].nombre); // "Mascarillas"
|
|
|
|
|
|
|
|
let inventario = [
|
|
|
|
["Camas", 20],
|
|
|
|
["Mascarillas", 300]
|
|
|
|
];
|
|
|
|
console.log(inventario[1][1]); // 300
|
|
|
|
|
|
|
|
// Operaciones comunes
|
|
|
|
let personal = ["Ana", "Luis", "María"];
|
|
|
|
personal.push("Carlos"); // añadir
|
|
|
|
personal.pop(); // eliminar último
|
|
|
|
console.log(personal.length);
|
|
|
|
|
|
|
|
for (let i = 0; i < personal.length; i++) {
|
|
|
|
console.log(`Personal disponible: ${personal[i]}`);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
> Nota: aunque sea posible mezclar tipos, se recomienda mantener arrays homogéneos cuando representen lo mismo.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 8. Funciones
|
|
|
|
|
|
|
|
Las funciones permiten **reutilizar código** y organizar la lógica.
|
|
|
|
Su **firma** incluye el nombre, los parámetros y el valor de retorno.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
function calcularCamasLibres(total, ocupadas) {
|
|
|
|
return total - ocupadas;
|
|
|
|
}
|
|
|
|
console.log(`Camas libres: ${calcularCamasLibres(50, 38)}`);
|
|
|
|
```
|
|
|
|
|
|
|
|
### Parámetros por defecto
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
function registrarRecurso(tipo = "Desconocido", cantidad = 0) {
|
|
|
|
console.log(`Recurso: ${tipo}, Cantidad: ${cantidad}`);
|
|
|
|
}
|
|
|
|
registrarRecurso("Mascarillas", 200);
|
|
|
|
registrarRecurso(); // Usa los valores por defecto
|
|
|
|
```
|
|
|
|
|
|
|
|
### Funciones anidadas y ámbito
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
function gestionarRecurso() {
|
|
|
|
const tipo = "Guantes";
|
|
|
|
|
|
|
|
function mostrarTipo() { // función anidada
|
|
|
|
console.log(`Tipo de recurso: ${tipo}`); // accede al ámbito externo
|
|
|
|
}
|
|
|
|
|
|
|
|
mostrarTipo();
|
|
|
|
}
|
|
|
|
gestionarRecurso();
|
|
|
|
```
|
|
|
|
|
|
|
|
### Funciones flecha
|
|
|
|
|
|
|
|
Las funciones flecha (`=>`) simplifican la sintaxis y **no crean su propio `this`**, por lo que son útiles en callbacks o eventos.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const reporteRecursos = (camas, mascarillas) => {
|
|
|
|
console.log(`Camas: ${camas}, Mascarillas: ${mascarillas}`);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 9. Estructuras de control
|
|
|
|
|
|
|
|
* **Condicionales:** `if`, `else`, `switch` (para múltiples casos).
|
|
|
|
* **Bucles:** `for`, `while`, `do...while`.
|
|
|
|
* **Manejo de errores:** `try...catch` captura errores de ejecución y evita que el programa se detenga.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let camasLibres = 12;
|
|
|
|
|
|
|
|
if (camasLibres > 0) {
|
|
|
|
console.log("Hay camas disponibles");
|
|
|
|
} else {
|
|
|
|
console.log("No hay camas disponibles");
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
|
|
let resultado = camasLibres / 0;
|
|
|
|
console.log(resultado);
|
|
|
|
} catch (error) {
|
|
|
|
console.error("Error en el cálculo:", error);
|
|
|
|
}
|
|
|
|
|
|
|
|
let personal = ["Ana", "Luis", "María"];
|
|
|
|
for (let i = 0; i < personal.length; i++) {
|
|
|
|
console.log(`Personal: ${personal[i]}`);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 10. Clases y objetos
|
|
|
|
|
|
|
|
### Objetos literales
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const paciente = {
|
|
|
|
nombre: "Laura",
|
|
|
|
edad: 29,
|
|
|
|
ingreso: true
|
|
|
|
};
|
|
|
|
console.log(paciente.nombre);
|
|
|
|
```
|
|
|
|
|
|
|
|
### Clases y uso de objetos
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
class Recurso {
|
|
|
|
constructor(nombre, cantidad) {
|
|
|
|
this.nombre = nombre;
|
|
|
|
this.cantidad = cantidad;
|
|
|
|
}
|
|
|
|
mostrar() {
|
|
|
|
console.log(`${this.nombre}: ${this.cantidad}`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const datos = { nombre: "Mascarillas", cantidad: 300 };
|
|
|
|
const recurso = new Recurso(datos.nombre, datos.cantidad);
|
|
|
|
recurso.mostrar();
|
|
|
|
```
|
|
|
|
|
|
|
|
> Un objeto literal puede inicializar una clase, pero no puede convertirse directamente en una instancia sin pasar sus propiedades al constructor.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 11. Otros objetos: Fechas y más
|
|
|
|
|
|
|
|
### Date
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let fechaHoy = new Date();
|
|
|
|
console.log("Fecha actual:", fechaHoy.toLocaleDateString());
|
|
|
|
|
|
|
|
let ingreso = new Date(2025, 9, 22);
|
|
|
|
console.log("Ingreso del paciente:", ingreso.toLocaleDateString());
|
|
|
|
```
|
|
|
|
|
|
|
|
### Math
|
|
|
|
|
|
|
|
El objeto `Math` proporciona funciones matemáticas comunes.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
console.log("Número aleatorio:", Math.random());
|
|
|
|
console.log("Redondeo hacia arriba:", Math.ceil(4.3));
|
|
|
|
console.log("Valor absoluto:", Math.abs(-5));
|
|
|
|
console.log("Máximo:", Math.max(10, 20, 5));
|
|
|
|
```
|
|
|
|
|