Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • E ECMAscript-Typescript
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 11
    • Issues 11
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • imunnic
  • ECMAscript-Typescript
  • Wiki
  • Modulo 1

Modulo 1 · Changes

Page history
actualizacion de ejemplos panacea authored Nov 19, 2025 by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 105 deletions
+145 -105
  • Modulo-1.md Modulo-1.md +145 -105
  • No files found.
Modulo-1.md
View page @ cd31b939
# 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));
```
\ No newline at end of file
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));
```
Clone repository

Índice

  • Inicio
  • Modulo 1. Sitaxis básica
  • Modulo 2. Importaciones en Javascript
  • Modulo 3. Interacción con el BOM y con el DOM
  • Modulo 4. Uso de servicios y API REST