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 # 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 @@ ...@@ -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**. 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 ```javascript
const nombre = "Hospital Central"; const nombre = 'Hospital Central';
console.log(`Bienvenido a la app de gestión de ${nombre}`); 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 ...@@ -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 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 ```javascript
let usuario = "María"; let usuario = 'María';
console.log(`Hola ${usuario}, bienvenida al sistema de gestión.`); console.log(`Hola ${usuario}, bienvenida al sistema de gestión.`);
// Tipado débil // Tipado débil
let cantidad = "10"; let recursos = '10';
let total = cantidad * 2; 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}`); ...@@ -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: El objeto `console` permite **mostrar información** para depuración y control del flujo:
* `console.log()` — información general. - `console.log()` — información general.
* `console.info()` — información detallada. - `console.info()` — información detallada.
* `console.warn()` — advertencias. - `console.warn()` — advertencias.
* `console.error()` — errores. - `console.error()` — errores.
* `console.table()` — muestra datos en formato tabla. - `console.table()` — muestra datos en formato tabla.
```javascript ```javascript
let recursos = [ let recursos = [
{ tipo: "Camas", cantidad: 12 }, { tipo: 'Enfermeros', cantidad: 200 },
{ tipo: "Mascarillas", cantidad: 300 } { tipo: 'Ambulancias', cantidad: 40 },
]; ];
console.log("Recursos actuales:"); console.log('Recursos actuales:');
console.info("Datos cargados correctamente."); console.info('Datos cargados correctamente.');
console.warn("Mascarillas por debajo del nivel recomendado."); console.warn('Mascarillas por debajo del nivel recomendado.');
console.error("Error al conectar con la base de datos."); console.error('Error al conectar con la base de datos.');
console.table(recursos); console.table(recursos);
``` ```
...@@ -62,39 +62,56 @@ 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)**: JavaScript permite declarar variables con `var`, `let` o `const`, cada una con distinto **alcance (scope)**:
* `var` → alcance de **función**, se puede redeclarar. - `var` → alcance de **función**, se puede redeclarar.
* `let` → alcance de **bloque**, más seguro y moderno. - `let` → alcance de **bloque**, más seguro y moderno.
* `const` → alcance de **bloque**, su valor no puede reasignarse (aunque sus propiedades sí). - `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**: 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). - 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). - 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**. - Por defecto, todas las propiedades y métodos son **públicos**.
```javascript ```javascript
class Recurso { class Recurso {
#cantidad; // propiedad privada real #id; // Propiedad privada
tipo; // propiedad pública unidad;
tipoRecurso;
constructor({ id = null, unidad = '', tipoRecurso = '' }) {
this.#id = id;
this.unidad = unidad;
this.tipoRecurso = tipoRecurso; // "HUMANO" o "MATERIAL"
}
constructor(tipo, cantidad) { // Getters y setters para id
this.tipo = tipo; get id() {
this.#cantidad = cantidad; return this.#id;
} }
mostrar() { set id(nuevoId) {
console.log(`${this.tipo}: ${this.#cantidad}`); this.#id = nuevoId;
} }
// Método público que accede a una propiedad privada mostrar() {
actualizarCantidad(nuevaCantidad) { console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
this.#cantidad = nuevaCantidad;
} }
} }
const guantes = new Recurso("Guantes", 200); let idObjeto = '2jfn49cn2s8ad8cn2a2f342da';
guantes.mostrar(); const UNIDADObjeto = 'JMAPER';
// guantes.#cantidad; // Error: propiedad privada no accesible 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(); ...@@ -104,11 +121,11 @@ guantes.mostrar();
Son los valores básicos: `string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`. Son los valores básicos: `string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`.
```javascript ```javascript
let nombre = "Juan"; let id = '12ERC7DFJG94KGLS045JD7';
let edad = 32; let cantidad = 32;
let activo = true; let activo = true;
let departamento = undefined; let unidad = undefined;
let recursoNulo = null; let otrosDatos = null;
``` ```
--- ---
...@@ -119,13 +136,13 @@ let recursoNulo = null; ...@@ -119,13 +136,13 @@ let recursoNulo = null;
`+`, `-`, `*`, `/`, `%` `+`, `-`, `*`, `/`, `%`
* `+` concatena si hay strings. - `+` concatena si hay strings.
* Resta o multiplicación con strings numéricos convierte a números. - Resta o multiplicación con strings numéricos convierte a números.
* `/` divide, `%` obtiene el resto. - `/` divide, `%` obtiene el resto.
```javascript ```javascript
console.log("10" + 5); // "105" console.log('10' + 5); // "105"
console.log("10" - "5"); // 5 console.log('10' - '5'); // 5
console.log(10 / 3); // 3.33 console.log(10 / 3); // 3.33
console.log(10 % 3); // 1 console.log(10 % 3); // 1
``` ```
...@@ -134,16 +151,16 @@ console.log(10 % 3); // 1 ...@@ -134,16 +151,16 @@ console.log(10 % 3); // 1
`&&`, `||`, `!` `&&`, `||`, `!`
* Un solo `&` o `|` → bit a bit. - Un solo `&` o `|` → bit a bit.
* Doble `&&` o `||` → lógico. - Doble `&&` o `||` → lógico.
```javascript ```javascript
let camas = 10; let enfermeros = 10;
let enfermeras = 5; let ambulancias = 5;
console.log(camas > 0 && enfermeras > 0); // true console.log(enfermeros > 0 && ambulancias > 0); // true
console.log(camas > 0 || enfermeras === 0); // true console.log(enfermeros > 0 || ambulancias === 0); // true
console.log(!(camas > 0)); // false console.log(!(enfermeros > 0)); // false
``` ```
### Comparativos ### Comparativos
...@@ -151,8 +168,8 @@ console.log(!(camas > 0)); // false ...@@ -151,8 +168,8 @@ console.log(!(camas > 0)); // false
`==` compara solo valores, `===` compara valores **y tipos**. `==` compara solo valores, `===` compara valores **y tipos**.
```javascript ```javascript
console.log(10 == "10"); // true console.log(10 == '10'); // true
console.log(10 === "10"); // false console.log(10 === '10'); // false
``` ```
--- ---
...@@ -161,25 +178,32 @@ 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. 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 ```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);
console.log(recursosMixtos[3].nombre); // "Mascarillas" console.log(recursosMixtos[3].unidad); // "JMAPER"
let inventario = [ let inventario = [
["Camas", 20], ['Enfermeros', 300],
["Mascarillas", 300] ['Ambulancias', 20],
]; ];
console.log(inventario[1][1]); // 300 console.log(inventario[1][1]); // 20
// Operaciones comunes // Operaciones comunes
let personal = ["Ana", "Luis", "María"]; let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469'];
personal.push("Carlos"); // añadir ambulancias.push('ET 101470'); // añadir
personal.pop(); // eliminar último ambulancias.pop(); // eliminar último
console.log(personal.length); console.log(ambulancias.length);
for (let i = 0; i < personal.length; i++) { for (let i = 0; i < ambulancias.length; i++) {
console.log(`Personal disponible: ${personal[i]}`); console.log(`ambulancias disponibles: ${ambulancias[i]}`);
} }
``` ```
...@@ -192,19 +216,19 @@ for (let i = 0; i < personal.length; 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. 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 ```javascript
function calcularCamasLibres(total, ocupadas) { function calcularAmbulanciasOperativas(total, inoperativas) {
return total - ocupadas; return total - inoperativas;
} }
console.log(`Camas libres: ${calcularCamasLibres(50, 38)}`); console.log(`Ambulancias operativas: ${calcularAmbulanciasOperativas(50, 38)}`);
``` ```
### Parámetros por defecto ### Parámetros por defecto
```javascript ```javascript
function registrarRecurso(tipo = "Desconocido", cantidad = 0) { function registrarRecurso(tipo = 'HUMANO', id = '1AJS8DF9J4GJ80DJS2NSJD', unidad: 'JMAPER') {
console.log(`Recurso: ${tipo}, Cantidad: ${cantidad}`); console.log(`Recurso: ${tipo}, Unidad: ${unidad}`);
} }
registrarRecurso("Mascarillas", 200); registrarRecurso('Mascarillas', '1JDS7DSF9DHEC334BFH345E', 'ACING');
registrarRecurso(); // Usa los valores por defecto registrarRecurso(); // Usa los valores por defecto
``` ```
...@@ -212,9 +236,10 @@ registrarRecurso(); // Usa los valores por defecto ...@@ -212,9 +236,10 @@ registrarRecurso(); // Usa los valores por defecto
```javascript ```javascript
function gestionarRecurso() { 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 console.log(`Tipo de recurso: ${tipo}`); // accede al ámbito externo
} }
...@@ -228,8 +253,8 @@ gestionarRecurso(); ...@@ -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. Las funciones flecha (`=>`) simplifican la sintaxis y **no crean su propio** `this`, por lo que son útiles en callbacks o eventos.
```javascript ```javascript
const reporteRecursos = (camas, mascarillas) => { const reporteRecursos = (enfermeros, ambulancias) => {
console.log(`Camas: ${camas}, Mascarillas: ${mascarillas}`); console.log(`Enfermeros: ${enfermeros}, Ambulancias: ${ambulancias}`);
}; };
``` ```
...@@ -237,29 +262,29 @@ const reporteRecursos = (camas, mascarillas) => { ...@@ -237,29 +262,29 @@ const reporteRecursos = (camas, mascarillas) => {
## 9. Estructuras de control ## 9. Estructuras de control
* **Condicionales:** `if`, `else`, `switch` (para múltiples casos). - **Condicionales:** `if`, `else`, `switch` (para múltiples casos).
* **Bucles:** `for`, `while`, `do...while`. - **Bucles:** `for`, `while`, `do...while`.
* **Manejo de errores:** `try...catch` captura errores de ejecución y evita que el programa se detenga. - **Manejo de errores:** `try...catch` captura errores de ejecución y evita que el programa se detenga.
```javascript ```javascript
let camasLibres = 12; let ambulancias = 12;
if (camasLibres > 0) { if (ambulancias > 0) {
console.log("Hay camas disponibles"); console.log('Hay ambulancias');
} else { } else {
console.log("No hay camas disponibles"); console.log('No hay camas disponibles');
} }
try { try {
let resultado = camasLibres / 0; let resultado = ambulancias / 0;
console.log(resultado); console.log(resultado);
} catch (error) { } catch (error) {
console.error("Error en el cálculo:", error); console.error('Error en el cálculo:', error);
} }
let personal = ["Ana", "Luis", "María"]; let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469'];
for (let i = 0; i < personal.length; i++) { for (let i = 0; i < ambulancias.length; i++) {
console.log(`Personal: ${personal[i]}`); console.log(`Ambulancias: ${ambulancias[i]}`);
} }
``` ```
...@@ -270,29 +295,44 @@ for (let i = 0; i < personal.length; i++) { ...@@ -270,29 +295,44 @@ for (let i = 0; i < personal.length; i++) {
### Objetos literales ### Objetos literales
```javascript ```javascript
const paciente = { const recurso = {
nombre: "Laura", id: '7d8giej2934b5kcn28xo8',
edad: 29, unidad: 'JMAPER',
ingreso: true tipoRecurso: 'HUMANO',
}; };
console.log(paciente.nombre); console.log(recurso.unidad);
``` ```
### Clases y uso de objetos ### Clases y uso de objetos
```javascript ```javascript
class Recurso { class Recurso {
constructor(nombre, cantidad) { #id; // Propiedad privada
this.nombre = nombre; unidad;
this.cantidad = cantidad; 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() { 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 datos = { id: '1j273hf83hd93j4f7gjd6', unidad: 'ACING', tipoRecurso: 'MATERIAL' };
const recurso = new Recurso(datos.nombre, datos.cantidad); const recurso = new Recurso(datos.id, datos.unidad, datos.tipoRecurso);
recurso.mostrar(); recurso.mostrar();
``` ```
...@@ -306,10 +346,10 @@ recurso.mostrar(); ...@@ -306,10 +346,10 @@ recurso.mostrar();
```javascript ```javascript
let fechaHoy = new Date(); let fechaHoy = new Date();
console.log("Fecha actual:", fechaHoy.toLocaleDateString()); console.log('Fecha actual:', fechaHoy.toLocaleDateString());
let ingreso = new Date(2025, 9, 22); let ultimaOperatividad = new Date(2025, 9, 22);
console.log("Ingreso del paciente:", ingreso.toLocaleDateString()); console.log('Ultima fecha de operatividad:', ultimaOperatividad.toLocaleDateString());
``` ```
### Math ### Math
...@@ -317,8 +357,8 @@ console.log("Ingreso del paciente:", ingreso.toLocaleDateString()); ...@@ -317,8 +357,8 @@ console.log("Ingreso del paciente:", ingreso.toLocaleDateString());
El objeto `Math` proporciona funciones matemáticas comunes. El objeto `Math` proporciona funciones matemáticas comunes.
```javascript ```javascript
console.log("Número aleatorio:", Math.random()); console.log('Número aleatorio:', Math.random());
console.log("Redondeo hacia arriba:", Math.ceil(4.3)); console.log('Redondeo hacia arriba:', Math.ceil(4.3));
console.log("Valor absoluto:", Math.abs(-5)); console.log('Valor absoluto:', Math.abs(-5));
console.log("Máximo:", Math.max(10, 20, 5)); console.log('Máximo:', Math.max(10, 20, 5));
``` ```
\ No newline at end of file
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