|
|
|
# Módulo 1 — Fundamentos y Sintaxis de JavaScript
|
|
|
|
|
|
|
|
**Aplicación práctica: Sistema de gestión de recursos sanitarios (humanos y materiales)**
|
|
|
|
**Aplicación práctica: Sistema de gestión de recursos sanitarios (Humanos y materiales)**
|
|
|
|
|
|
|
|
---
|
|
|
|
|
| ... | ... | @@ -9,7 +9,7 @@ |
|
|
|
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";
|
|
|
|
const nombre = 'Hospital Central';
|
|
|
|
console.log(`Bienvenido a la app de gestión de ${nombre}`);
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -22,13 +22,13 @@ JavaScript es un **lenguaje de programación interpretado** (no se compila antes |
|
|
|
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 sanitaria.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let usuario = "María";
|
|
|
|
let usuario = 'María';
|
|
|
|
console.log(`Hola ${usuario}, bienvenida al sistema de gestión.`);
|
|
|
|
|
|
|
|
// Tipado débil
|
|
|
|
let cantidad = "10";
|
|
|
|
let recursos = '10';
|
|
|
|
let total = cantidad * 2;
|
|
|
|
console.log(`Total de camas disponibles: ${total}`);
|
|
|
|
console.log(`Total de recursos disponibles: ${total}`);
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
| ... | ... | @@ -37,22 +37,22 @@ console.log(`Total de camas disponibles: ${total}`); |
|
|
|
|
|
|
|
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.
|
|
|
|
- `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 }
|
|
|
|
{ tipo: 'Enfermeros', cantidad: 200 },
|
|
|
|
{ tipo: 'Ambulancias', cantidad: 40 },
|
|
|
|
];
|
|
|
|
|
|
|
|
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.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);
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -62,39 +62,56 @@ console.table(recursos); |
|
|
|
|
|
|
|
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í).
|
|
|
|
- `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**.
|
|
|
|
- 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
|
|
|
|
#id; // Propiedad privada
|
|
|
|
unidad;
|
|
|
|
tipoRecurso;
|
|
|
|
|
|
|
|
constructor({ id = null, unidad = '', tipoRecurso = '' }) {
|
|
|
|
this.#id = id;
|
|
|
|
this.unidad = unidad;
|
|
|
|
this.tipoRecurso = tipoRecurso; // "HUMANO" o "MATERIAL"
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor(tipo, cantidad) {
|
|
|
|
this.tipo = tipo;
|
|
|
|
this.#cantidad = cantidad;
|
|
|
|
// Getters y setters para id
|
|
|
|
get id() {
|
|
|
|
return this.#id;
|
|
|
|
}
|
|
|
|
|
|
|
|
mostrar() {
|
|
|
|
console.log(`${this.tipo}: ${this.#cantidad}`);
|
|
|
|
set id(nuevoId) {
|
|
|
|
this.#id = nuevoId;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Método público que accede a una propiedad privada
|
|
|
|
actualizarCantidad(nuevaCantidad) {
|
|
|
|
this.#cantidad = nuevaCantidad;
|
|
|
|
mostrar() {
|
|
|
|
console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const guantes = new Recurso("Guantes", 200);
|
|
|
|
guantes.mostrar();
|
|
|
|
// guantes.#cantidad; // Error: propiedad privada no accesible
|
|
|
|
let idObjeto = '2jfn49cn2s8ad8cn2a2f342da';
|
|
|
|
const UNIDADObjeto = 'JMAPER';
|
|
|
|
var tipoRecursoObjeto = 'HUMANO';
|
|
|
|
|
|
|
|
// Ejemplo:
|
|
|
|
recurso = new Recurso({
|
|
|
|
id: idObjeto,
|
|
|
|
unidad: UNIDADObjeto,
|
|
|
|
tipoRecurso: tipoRecursoObjeto,
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log(recurso.mostrar());
|
|
|
|
console.log(recurso.unidad);
|
|
|
|
//console.log(recurso.#id) mostraría un error
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
| ... | ... | @@ -104,11 +121,11 @@ guantes.mostrar(); |
|
|
|
Son los valores básicos: `string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let nombre = "Juan";
|
|
|
|
let edad = 32;
|
|
|
|
let id = '12ERC7DFJG94KGLS045JD7';
|
|
|
|
let cantidad = 32;
|
|
|
|
let activo = true;
|
|
|
|
let departamento = undefined;
|
|
|
|
let recursoNulo = null;
|
|
|
|
let unidad = undefined;
|
|
|
|
let otrosDatos = null;
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
| ... | ... | @@ -119,13 +136,13 @@ let recursoNulo = null; |
|
|
|
|
|
|
|
`+`, `-`, `*`, `/`, `%`
|
|
|
|
|
|
|
|
* `+` concatena si hay strings.
|
|
|
|
* Resta o multiplicación con strings numéricos convierte a números.
|
|
|
|
* `/` divide, `%` obtiene el resto.
|
|
|
|
- `+` 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' + 5); // "105"
|
|
|
|
console.log('10' - '5'); // 5
|
|
|
|
console.log(10 / 3); // 3.33
|
|
|
|
console.log(10 % 3); // 1
|
|
|
|
```
|
| ... | ... | @@ -134,16 +151,16 @@ console.log(10 % 3); // 1 |
|
|
|
|
|
|
|
`&&`, `||`, `!`
|
|
|
|
|
|
|
|
* Un solo `&` o `|` → bit a bit.
|
|
|
|
* Doble `&&` o `||` → lógico.
|
|
|
|
- Un solo `&` o `|` → bit a bit.
|
|
|
|
- Doble `&&` o `||` → lógico.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let camas = 10;
|
|
|
|
let enfermeras = 5;
|
|
|
|
let enfermeros = 10;
|
|
|
|
let ambulancias = 5;
|
|
|
|
|
|
|
|
console.log(camas > 0 && enfermeras > 0); // true
|
|
|
|
console.log(camas > 0 || enfermeras === 0); // true
|
|
|
|
console.log(!(camas > 0)); // false
|
|
|
|
console.log(enfermeros > 0 && ambulancias > 0); // true
|
|
|
|
console.log(enfermeros > 0 || ambulancias === 0); // true
|
|
|
|
console.log(!(enfermeros > 0)); // false
|
|
|
|
```
|
|
|
|
|
|
|
|
### Comparativos
|
| ... | ... | @@ -151,8 +168,8 @@ console.log(!(camas > 0)); // false |
|
|
|
`==` compara solo valores, `===` compara valores **y tipos**.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
console.log(10 == "10"); // true
|
|
|
|
console.log(10 === "10"); // false
|
|
|
|
console.log(10 == '10'); // true
|
|
|
|
console.log(10 === '10'); // false
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
| ... | ... | @@ -161,25 +178,32 @@ console.log(10 === "10"); // false |
|
|
|
|
|
|
|
Un **array** puede contener **elementos de distintos tipos**: números, strings, booleanos, objetos e incluso otros arrays.
|
|
|
|
|
|
|
|
El orden de los arrays empieza en 0.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
let recursosMixtos = ["Camas", 10, true, { nombre: "Mascarillas", cantidad: 300 }];
|
|
|
|
let recursosMixtos = [
|
|
|
|
'Ambulancia',
|
|
|
|
10,
|
|
|
|
true,
|
|
|
|
{ id: '18HFHSK2J3H123H412KH3', unidad: 'JMAPER', tipoRecurso: 'HUMANO' },
|
|
|
|
];
|
|
|
|
console.log(recursosMixtos);
|
|
|
|
console.log(recursosMixtos[3].nombre); // "Mascarillas"
|
|
|
|
console.log(recursosMixtos[3].unidad); // "JMAPER"
|
|
|
|
|
|
|
|
let inventario = [
|
|
|
|
["Camas", 20],
|
|
|
|
["Mascarillas", 300]
|
|
|
|
['Enfermeros', 300],
|
|
|
|
['Ambulancias', 20],
|
|
|
|
];
|
|
|
|
console.log(inventario[1][1]); // 300
|
|
|
|
console.log(inventario[1][1]); // 20
|
|
|
|
|
|
|
|
// Operaciones comunes
|
|
|
|
let personal = ["Ana", "Luis", "María"];
|
|
|
|
personal.push("Carlos"); // añadir
|
|
|
|
personal.pop(); // eliminar último
|
|
|
|
console.log(personal.length);
|
|
|
|
let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469'];
|
|
|
|
ambulancias.push('ET 101470'); // añadir
|
|
|
|
ambulancias.pop(); // eliminar último
|
|
|
|
console.log(ambulancias.length);
|
|
|
|
|
|
|
|
for (let i = 0; i < personal.length; i++) {
|
|
|
|
console.log(`Personal disponible: ${personal[i]}`);
|
|
|
|
for (let i = 0; i < ambulancias.length; i++) {
|
|
|
|
console.log(`ambulancias disponibles: ${ambulancias[i]}`);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -192,19 +216,19 @@ for (let i = 0; i < personal.length; i++) { |
|
|
|
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;
|
|
|
|
function calcularAmbulanciasOperativas(total, inoperativas) {
|
|
|
|
return total - inoperativas;
|
|
|
|
}
|
|
|
|
console.log(`Camas libres: ${calcularCamasLibres(50, 38)}`);
|
|
|
|
console.log(`Ambulancias operativas: ${calcularAmbulanciasOperativas(50, 38)}`);
|
|
|
|
```
|
|
|
|
|
|
|
|
### Parámetros por defecto
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
function registrarRecurso(tipo = "Desconocido", cantidad = 0) {
|
|
|
|
console.log(`Recurso: ${tipo}, Cantidad: ${cantidad}`);
|
|
|
|
function registrarRecurso(tipo = 'HUMANO', id = '1AJS8DF9J4GJ80DJS2NSJD', unidad: 'JMAPER') {
|
|
|
|
console.log(`Recurso: ${tipo}, Unidad: ${unidad}`);
|
|
|
|
}
|
|
|
|
registrarRecurso("Mascarillas", 200);
|
|
|
|
registrarRecurso('Mascarillas', '1JDS7DSF9DHEC334BFH345E', 'ACING');
|
|
|
|
registrarRecurso(); // Usa los valores por defecto
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -212,9 +236,10 @@ registrarRecurso(); // Usa los valores por defecto |
|
|
|
|
|
|
|
```javascript
|
|
|
|
function gestionarRecurso() {
|
|
|
|
const tipo = "Guantes";
|
|
|
|
const tipo = 'Materal';
|
|
|
|
|
|
|
|
function mostrarTipo() { // función anidada
|
|
|
|
function mostrarTipo() {
|
|
|
|
// función anidada
|
|
|
|
console.log(`Tipo de recurso: ${tipo}`); // accede al ámbito externo
|
|
|
|
}
|
|
|
|
|
| ... | ... | @@ -228,8 +253,8 @@ gestionarRecurso(); |
|
|
|
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}`);
|
|
|
|
const reporteRecursos = (enfermeros, ambulancias) => {
|
|
|
|
console.log(`Enfermeros: ${enfermeros}, Ambulancias: ${ambulancias}`);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -237,29 +262,29 @@ const reporteRecursos = (camas, 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.
|
|
|
|
- **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;
|
|
|
|
let ambulancias = 12;
|
|
|
|
|
|
|
|
if (camasLibres > 0) {
|
|
|
|
console.log("Hay camas disponibles");
|
|
|
|
if (ambulancias > 0) {
|
|
|
|
console.log('Hay ambulancias');
|
|
|
|
} else {
|
|
|
|
console.log("No hay camas disponibles");
|
|
|
|
console.log('No hay camas disponibles');
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
|
|
let resultado = camasLibres / 0;
|
|
|
|
let resultado = ambulancias / 0;
|
|
|
|
console.log(resultado);
|
|
|
|
} catch (error) {
|
|
|
|
console.error("Error en el cálculo:", 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]}`);
|
|
|
|
let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469'];
|
|
|
|
for (let i = 0; i < ambulancias.length; i++) {
|
|
|
|
console.log(`Ambulancias: ${ambulancias[i]}`);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -270,29 +295,44 @@ for (let i = 0; i < personal.length; i++) { |
|
|
|
### Objetos literales
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const paciente = {
|
|
|
|
nombre: "Laura",
|
|
|
|
edad: 29,
|
|
|
|
ingreso: true
|
|
|
|
const recurso = {
|
|
|
|
id: '7d8giej2934b5kcn28xo8',
|
|
|
|
unidad: 'JMAPER',
|
|
|
|
tipoRecurso: 'HUMANO',
|
|
|
|
};
|
|
|
|
console.log(paciente.nombre);
|
|
|
|
console.log(recurso.unidad);
|
|
|
|
```
|
|
|
|
|
|
|
|
### Clases y uso de objetos
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
class Recurso {
|
|
|
|
constructor(nombre, cantidad) {
|
|
|
|
this.nombre = nombre;
|
|
|
|
this.cantidad = cantidad;
|
|
|
|
#id; // Propiedad privada
|
|
|
|
unidad;
|
|
|
|
tipoRecurso;
|
|
|
|
|
|
|
|
constructor({ id = null, unidad = '', tipoRecurso = '' }) {
|
|
|
|
this.#id = id;
|
|
|
|
this.unidad = unidad;
|
|
|
|
this.tipoRecurso = tipoRecurso; // "HUMANO" o "MATERIAL"
|
|
|
|
}
|
|
|
|
|
|
|
|
// Getters y setters para id
|
|
|
|
get id() {
|
|
|
|
return this.#id;
|
|
|
|
}
|
|
|
|
|
|
|
|
set id(nuevoId) {
|
|
|
|
this.#id = nuevoId;
|
|
|
|
}
|
|
|
|
|
|
|
|
mostrar() {
|
|
|
|
console.log(`${this.nombre}: ${this.cantidad}`);
|
|
|
|
console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const datos = { nombre: "Mascarillas", cantidad: 300 };
|
|
|
|
const recurso = new Recurso(datos.nombre, datos.cantidad);
|
|
|
|
const datos = { id: '1j273hf83hd93j4f7gjd6', unidad: 'ACING', tipoRecurso: 'MATERIAL' };
|
|
|
|
const recurso = new Recurso(datos.id, datos.unidad, datos.tipoRecurso);
|
|
|
|
recurso.mostrar();
|
|
|
|
```
|
|
|
|
|
| ... | ... | @@ -306,10 +346,10 @@ recurso.mostrar(); |
|
|
|
|
|
|
|
```javascript
|
|
|
|
let fechaHoy = new Date();
|
|
|
|
console.log("Fecha actual:", fechaHoy.toLocaleDateString());
|
|
|
|
console.log('Fecha actual:', fechaHoy.toLocaleDateString());
|
|
|
|
|
|
|
|
let ingreso = new Date(2025, 9, 22);
|
|
|
|
console.log("Ingreso del paciente:", ingreso.toLocaleDateString());
|
|
|
|
let ultimaOperatividad = new Date(2025, 9, 22);
|
|
|
|
console.log('Ultima fecha de operatividad:', ultimaOperatividad.toLocaleDateString());
|
|
|
|
```
|
|
|
|
|
|
|
|
### Math
|
| ... | ... | @@ -317,8 +357,8 @@ console.log("Ingreso del paciente:", ingreso.toLocaleDateString()); |
|
|
|
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));
|
|
|
|
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));
|
|
|
|
``` |