Bienvenidos

Nivel II: “Programación Web Full Stack”

 Perfil del Estudiante

El estudiante egresado podrá desarrollar aplicaciones y sitios web de forma

completa aplicando las mejores prácticas del diseño web responsive,
pudiendo programar tanto la interfaz gráfica con la que interactúan los
usuarios así como las funcionalidades del servidor que procesa los datos
que estos ingresen. Con el complemento del idioma inglés (técnico) junto a
los conocimientos de programación adquiridos, podrá leer e interpretar un
código (propio y ajeno) , identificar y resolver fallas y, finalmente, formar
parte de un equipo de trabajo.
Estructura del Curso

Resultado
3
Módulo 7

Núcleo
2
Módulos 5 y 6
Bases y
1 Fundamentos
Módulos 1, 2, 3 y 4
Módulo 1
Fundamentos de JavaScript
BackEnd
El desarrollo backend alude a aquella parte de la programación que no es visible
para el usuario. Esta parte no se ejecuta en el navegador o dispositivo del cliente,
sino en un servidor (físico o en la nube). Mediante la codificación debe de ser
capaz de lograr responder eficientemente a las peticiones enviadas desde la
interfaz gráfica.

La lógica del negocio es tarea del Backend Developer: el backend se encarga de

procesar toda la información, de relacionar los datos en el interior de la aplicación
con las capas visuales que ha creado el Frontend.
FrontEnd
Un desarrollador front-end se encarga de la parte visual de la web (de todo
aquello que puedes ver en tu explorador) haciendo que su diseño sea intuitivo y
atractivo.

Mediante la codificación debe de ser capaz de lograr mostrar los datos en una
web y además permitir la ingesta de datos también mediante la interfaz gráfica.

El programador frontend suele trabajar en conjunto con algún Diseñador Gráfico,

UX, y además con los backend ya que estos son los que proveen la información
dinámica que se debe mostrar en una pantalla, por ejemplo una lista de ¨Alumnos¨
la cual debe ser representada por el frontend en una Tabla en una página web.
FrontEnd
FullStack
Es el desarrollador que tiene la capacidad de hacer ambas tareas, tanto
front-end como back-end.
Conceptos Iniciales
IDE (Entorno de Desarrollo Integrado): Herramienta que proporciona un entorno completo
para desarrollar, depurar, compilar y desplegar aplicaciones de software. Pueden combinar
funciones adicionales y herramientas en una sola interfaz de usuario para la gestión de
proyectos y la integración con sistemas de control de versiones, sugerencias de código,
refactorización automática, resaltado de sintaxis, completado automático, integración con
sistemas de construcción y pruebas, y soporte para múltiples lenguajes de programación.
Visual Studio Code.

Framework: Estructura conceptual y/o física que proporciona soporte y orientación para el
desarrollo de aplicaciones. Incluye componentes reutilizables, librerías, y patrones de diseño
predefinidos que permiten construir aplicaciones de manera más eficiente al proporcionar un
esqueleto sobre el cual construir. Suelen abstraer tareas comunes y repetitivas, como la
gestión de la interfaz de usuario, el acceso a la base de datos, la gestión de sesiones, entre
otras, permitiendo a los desarrolladores enfocarse en la lógica específica de su aplicación.
Node.JS
JavaScript
Abreviado comúnmente como JS es un lenguaje de programación con varias características:
● Interpretado: no necesita un compilador, sino que el intérprete analiza el código en los
archivos.
● Orientado a objetos: clases, propiedades, métodos, herencia, etc.
● Imperativo: la ejecución es de línea en línea, el programa para en la línea errónea.
● Case Sensitive: sensible a mayusculas y minusculas.
● Tipado débil: las variables no necesitan un tipo de dato inicial, su tipo puede variar.
● Lenguaje Dinámico: la variable se adapta a su contenido y no el contenido a la variable.
● Basado en Prototipos: los objetos heredan propiedades y métodos de su prototipo.
● ECMAScript: especificación de lenguaje de programación publicada por Ecma International.

Se utilizaba principalmente del lado del cliente, implementado como parte de un navegador web
permitiendo mejoras en la interfaz de usuario y páginas web dinámicas y JavaScript del lado del
servidor (Server-side JavaScript).
Archivos JavaScript
El código javascript es interpretado por los navegadores de internet, por ej:
google chrome, y se pueden escribir en archivos con la extensión .js o
incorporarlo dentro del lenguaje HTML (Lo veremos en el módulo de Front End).

A fines introductorios vamos a centrarnos en los conceptos básicos de javascript

incorporando código a archivos .js desacoplados de HTML, para que más
adelante podamos juntar los conocimientos de este módulo con los del de Front
End.
Node JS
Javascript nació como un lenguaje de programación
para el navegador, que servía de apoyo a las páginas
HTML+CSS para dotar de interactividad y de mayor
dinamismo a su funcionamiento. Con el tiempo, se
comienza a utilizar más y más Javascript en los sitios
web, luego se hace posible utilizar Javascript fuera
del navegador a través de Node.js.

Node.js es un entorno de ejecución de JavaScript del

lado del servidor, fué escrito en C++ con el intérprete
de Google Chrome V8 extendido. Es decir, que utiliza
un intérprete de Javascript y lo extiende para
agregarle bastantes características propias de un
servidor.
JavaScript del lado del servidor
Javascript no fue pensado originalmente para trabajar del lado del servidor, de tal forma
que en pro de lograr que pudiese ser un lenguaje que se pudiera utilizar para escribir
programación del lado del servidor se tuvieron que agregar nuevas características a V8 en
Nodejs.

● Organización del código con piezas reutilizables (módulos).

● Manejo de archivos (filesystem).
● Manejo de bases de datos.
● Interacción con web services.
● Interacción mediante el protocolo HTTP.
● Manejo de procesos que puedan tomar mucho tiempo en ser ejecutados.
Shell de Nodejs
La shell de Nodejs permite ejecutar comandos de Nodejs directamente desde un
cliente de Nodejs en la línea de comandos.

Para ingresar a la shell (terminal) de node se debe tipear:

node
Shell de Nodejs
Por default las operaciones que regresan un resultado son impresas
directamente en la shell, no es necesario imprimirlas, la primera reacción sería
entonces almacenar el resultado en una variable así… total = 1 + 1, pero al
teclear esto sobre la shell también imprime el resultado.
Si no quiero regresar un valor a impresión y solo quiero
mantenerlo en una variable, tengo que especificarle que
solo quiero que que se mantenga el valor en la variable.

Para salir de la terminal basta con presionar CTRL+C+C.

Introducción al lenguaje JavaScript

● Constantes y Variables
● Cadenas de texto y métodos de cadena
● Arrays y métodos de arrays
● Estructuras de control y de repetición
● Funciones y parámetros
● Manejo de excepciones
● Formato JSON
● Desarrollo de rutinas y algoritmos básicos
Variables
Son usadas para almacenar datos en memoria que luego se reutilizan en alguna
parte del código. Es un contenedor que se utiliza para almacenar datos que
pueden ser modificados durante la ejecución de un programa.

var: Su valor puede cambiar

let: Su valor puede cambiar
const: Su valor NO puede cambiar
Constantes y Variables
var se utilizó en todo el código JavaScript desde 1995 hasta 2015. Sólo debe usarse en
código escrito para navegadores más antiguos

let y const se agregaron a JavaScript en 2015.

En JavaScript, la declaración de variables los tipos de datos no se definen durante la

declaración (tipado débil).

let x = 99; // x almacena un valor numérico

let city = 'Istanbul'; // city almacena una cadena de texto
let isExists = true; // isExists almacena un valor booleano
Console
La keyword “console” se usa en javascript para operar con la consola del intérprete
(navegador o servidor web según sea frontend/backend)

Lo usamos para imprimir mensajes que nos sirvan a la hora de debugear el código y
entender cómo se encuentra la ejecución de nuestro sistema.
 Comentarios
Podemos incorporar comentarios a fin de agregar información al código para que
al ser leído a futuro o por otro desarrollador pueda interpretar de manera más
sencilla la lógica expresada en código.

con // podemos colocar comentarios de 1 línea

con /* al iniciar y */ al finalizar podemos poner

comentario multilínea
Tipos de Datos
Una cadena (o una cadena de texto) es una serie de caracteres que se escriben con
comillas simples o dobles

Los números se pueden escribir con o sin decimales

Los valores booleanos sólo pueden tener dos valores: true o false
Operaciones Asignación
Los operadores de asignación asignan valores a
variables de JavaScript.
Operaciones Aritméticas
Operaciones que podemos realizar tanto con
números literales como entre variables y/o
constantes.
Operaciones de comparación
Estructuras de control (IF)
Utilizado para alternar comportamiento en base a una condición.
Ejecutar un código u otro si se cumple alguna condición.

if: bloque de código a ejecutar si condición es true

else: bloque a ejecutar si condición es false
else if: nueva condición a evaluar si la primera condición es falsa.
Estructuras de control (SWITCH)
Utilizado para ejecutar uno de muchos bloques de ejecución. se utiliza para realizar
diferentes acciones en función de diferentes condiciones.

● la expresión es evaluada una vez.

● el valor es comparado con cada “case”
● si algún “case” coincide, se ejecuta su bloque.
● si ninguno coincide, se ejecuta el bloque default
Estructuras de repetición (WHILE)
Utilizado para ejecutar un bloque de código mientras cierta condición sea true

El bucle do while es una variante del bucle while. Aquí se ejecutará

el bloque de código al menos una vez, antes de verificar si la
condición es verdadera, luego repetirá el bucle mientras la condición
sea verdadera.
Estructuras de repetición (FOR)
Utilizado para ejecutar un bloque de código un número de veces.

Expresión 1: Se utilizará para inicializar la variable utilizada en el bucle (sea i = 0).

Expresión 2: A menudo se utiliza para evaluar la condición de la variable inicial.
Expresión 3: Por lo general incrementa o decrementa el valor de la variable inicial.
Resúmen de Estructuras
Estructura ¿Para qué sirve? ¿Cuándo usarla?

if - else Ejecuta un bloque de código u otro si se Cuándo necesitas tomar decisiones simples o
cumple una condición. múltiples validaciones.
switch Evalúa una variable contra varios casos Cuando hay muchas condiciones que dependen de
posibles. un mismo valor. Alternativa a varios if-else.
for Repite un bloque de código un número Cuando sabes cuántas veces debe repetirse un
determinado de veces. bloque de código.
for in Recorre las propiedades de un objeto. Cuando necesitas recorrer las claves (propiedades)
de un objeto.
for of Recorre los elementos de un array o Cuando quieres recorrer directamente los valores
iterable. de un array o estructura iterable.
while Repite un bloque de código mientras una Cuando no sabes cuántas veces se repetirá el
condición se cumpla. código, pero depende de una condición.
do while Igual que while, pero garantiza que el Cuando necesitas que el código se ejecute al
bloque se ejecuta al menos una vez. menos una vez antes de validar la condición.
String: operación length
Las cadenas (strings) soportan diversas operaciones.

length: retorna la longitud de la cadena

String: métodos de extracción
slice(start, end)

Extrae una parte de una cadena y devuelve la

parte extraída en una nueva cadena.

El método toma la posición inicial y la posición

final (final no incluido).

Si un parámetro es negativo, la posición se

cuenta desde el final de la cadena.
String: métodos de extracción
● substring(start,end)
○ La diferencia con slice() es que los valores
iniciales y finales inferiores a 0 se tratan
como 0 en substring().

● substr(start,length) //a ser deprecado

○ La diferencia con slice() es que el segundo
parámetro especifica la longitud de la parte
extraída.
String: método replace
Reemplaza un valor especificado con otro valor en una cadena:

● El método no cambia la cadena a la que se llama.

● El método devuelve una nueva cadena.
● El método reemplaza solo la primera coincidencia.

replace(“original”,”nuevo”)
String: toUpperCase y toLowerCase
Una cadena se convierte a mayúsculas con toUpperCase():
Una cadena se convierte a minúsculas con toLowerCase():
String: métodos útiles
● includes(): determina si una const cadena = "JavaScript es increíble";

cadena de texto contiene una console.log(cadena.includes("increíble")); // true

console.log(cadena.includes("genial")); // false
subcadena específica.

● startsWith(): comprueba si una const saludo = "Hola mundo";

cadena comienza con los caracteres console.log(saludo.startsWith("Hola")); // true

de una subcadena específica. console.log(saludo.startsWith("mundo")); // false

● endsWith(): verifica si una cadena const archivo = "documento.pdf";

termina con los caracteres de una console.log(archivo.endsWith(".pdf")); // true

subcadena específica. console.log(archivo.endsWith(".txt")); // false

String: métodos útiles
● indexOf(): devuelve el índice de la let texto = "Hola, mundo!";
let indice = texto.indexOf("mundo");
primer aparición de un texto específico en
una cadena, si el valor no se encuentra, console.log(indice); // Salida: 6
devuelve -1.
let texto = "Hola, mundo! mundo!";
● lastIndexOf(): devuelve el índice de la let ultimoIndice = texto.lastIndexOf("mundo");
última aparición de un texto en una
cadena console.log(ultimoIndice); // Salida: 13

● repeat(): devuelve una nueva cadena const mensaje = "¡Hola!";

con un número especificado de copias de console.log(mensaje.repeat(3)); // ¡Hola!¡Hola!¡Hola!
la cadena original
Arrays
Los arrays son tipos de variables que pueden
contener más de un valor, almacenando
valores en distintas posiciones del array para
luego ser recuperados.

Lo pueden asimilar como una cajonera, donde

cada compartimento puede contener un valor,
y a cada uno de estos compartimentos se le
asigna un número, que es su índice. El primer
compartimento tiene el índice 0, el segundo
tiene el índice 1, y así sucesivamente.
Arrays
Los Arrays soportan operaciones sobre sus elementos, como ser:

Métodos Básicos de arrays

Métodos de Búsqueda

Métodos de Ordenamiento

Métodos de Iteración
Métodos de Array JavaScript
Arrays (Métodos de Iteración)
Son funciones incorporadas que permiten recorrer o manipular los elementos de un array
de manera más eficiente y expresiva que con un simple bucle. Aunque "iterar" un array
se refiere a recorrer cada uno de sus elementos (como con un bucle for), estos métodos
ofrecen más control y funcionalidad sobre cómo se hace ese recorrido, permiten realizar
acciones específicas durante ese recorrido, como transformar, filtrar, acumular o verificar
condiciones, todo de manera más expresiva y con menos código.

forEach(): Ejecuta una función en cada elemento del array, pero no devuelve nada. Es
útil para realizar acciones como imprimir valores o actualizar el DOM.

map(): Crea un nuevo array con los resultados de aplicar una función a cada elemento.
Se usa cuando quieres transformar los datos de un array sin modificar el original.

filter(): Crea un nuevo array con los elementos que cumplen una condición. Ideal
para extraer elementos que satisfacen un criterio específico.
Funciones
Una función de JavaScript es un bloque de código diseñado para realizar una tarea en
particular.
Una función puede ejecutarse cero o muchas veces, es práctica para cuando tenemos
una tarea que vamos a requerir en varias partes de nuestro código, así evitando
duplicar código
● Se define con la palabra clave function, seguida de un nombre , seguido de paréntesis () .
● Los nombres de funciones pueden contener letras, dígitos, subrayados y signos de dólar
(las mismas reglas que las variables).
● Los paréntesis pueden incluir nombres de parámetros separados por comas:
● ( parámetro1, parámetro2, ... )
● El código a ejecutar, por la función, se coloca entre corchetes: {}

function name(parameter1, parameter2, parameter3) {

// tu codigo aqui
}
Funciones
Cuando se invoca la palabra reservada return, la función dejará de ejecutarse.
Si la función se invocó desde una declaración, JavaScript "regresará" para ejecutar el
código después de la declaración de invocación.
Las funciones suelen calcular un valor de retorno . El valor de retorno se "devuelve" a la
"persona que llama":
First class functions
Javascript permite el uso de funciones de primer clase (First Class Functions), es decir que
podemos asignar una función a una variable.
var sumar = function (x, y){
console.log(x + y);
}
sumar(4, 5);

También se pueden pasar como argumentos a otras funciones, así como ser el resultado de
otra función, lo que permite la creación de funciones de orden superior.
var sumar = function (x, y) {
console.log(x + y);
}
let calculadora = function (algunCalculo , x, y) {
algunCalculo (x, y);
}
calculadora (sumar, 4, 5);
Función Flecha (Arrow Function)
Las funciones de flecha nos permiten escribir una sintaxis de función más corta.

hello = function() { hello = () => {

return "Hello World!"; return "Hello World!";
} }

¡Se hace más corto! Si la función tiene solo una declaración y la declaración devuelve
un valor, puede quitar los corchetes y la palabra clave return
hello = () => "Hello World!";

Si tiene parámetros, los pasa dentro de los paréntesis:

hello = (val) => "Hello " + val;

Si solo tiene un parámetro, también puede omitir los paréntesis:

hello = val => "Hello " + val;
Date
Usado para representar una fecha. Sobre este tipo de datos se puede realizar
operaciones como extraer campos individuales, definir y formatear fechas, entre otros.

Date Objects

Date Formats

Date Methods

Set Date Methods

Date
let hoy = new Date(); // Fecha actual
console.log(hoy); // Muestra la fecha y hora actual

// Crear una fecha específica

let algunaFecha = new Date(2024, 7, 30); // Año, mes (0-indexado), día
console.log(algunaFecha); // "2024-08-30T00:00:00.000Z"

JavaScript por sí solo no tiene una función de formateo de fechas robusta, pero puedes
usar métodos básicos o librerías como moment.js o date-fns para formatear fechas.
let fecha = new Date(2024, 7, 30);
console.log(fecha.toDateString()); // "Fri Aug 30 2024"
console.log(fecha.toISOString()); // "2024-08-30T00:00:00.000Z"
console.log(fecha.toLocaleDateString("es-ES")); // "30/8/2024"
Date (a partir de un string)
// ISO 8601 (Año-Mes-Día)
let fechaDesdeCadena = new Date("2024-08-30");
console.log(fechaDesdeCadena); // "2024-08-30T00:00:00.000Z"

// ISO 8601 con fecha y hora

let fechaHoraISO = new Date("2024-08-30T14:30:00");
console.log(fechaHoraISO); // "2024-08-30T14:30:00.000Z"

// Inglés Americano: Mes Día, Año

let fechaIngles = new Date("August 30, 2024");
console.log(fechaIngles); // "2024-08-30T00:00:00.000Z"

// Inglés Americano: Mes/Día/Año

let fechaMDY = new Date("08/30/2024");
console.log(fechaMDY); // "2024-08-30T00:00:00.000Z"
Modificar y comparar fechas
Puedes ajustar los valores de la fecha usando métodos set
let fecha = new Date();
fecha.setFullYear (2025);
fecha.setMonth (11); // Diciembre
fecha.setDate(25);
console.log(fecha); // "2025-12-25T00:00:00.000Z"

Para comparar fechas, puedes usar operadores de comparación como >, <, >=, <=, o ===.
let fecha1 = new Date(2024, 7, 30);// mes inicia en 0
let fecha2 = new Date(2024, 7, 31);

console.log(fecha1 > fecha2); // false

console.log(fecha1 < fecha2); // true
console.log(fecha1.getTime() === fecha2.getTime());
// false (compara el tiempo en milisegundos)
Componentes de una Fecha
Puedes obtener diferentes partes de la fecha utilizando métodos específicos:

let fecha = new Date(2024, 7, 30);

console.log(fecha.getFullYear()); // Año: 2024

console.log(fecha.getMonth()); // Mes (0-indexado, 7 es agosto): 7
console.log(fecha.getDate()); // Día del mes: 30
console.log(fecha.getDay()); // Día de la semana (0 es domingo, 1 es lunes, etc.)
console.log(fecha.getHours()); // Hora: 0
console.log(fecha.getMinutes()); // Minutos: 0
console.log(fecha.getSeconds()); // Segundos: 0
Date (Ejercicio)
Manejo de errores
Al ejecutar código JavaScript, pueden ocurrir diferentes errores. Estos pueden ser
errores de codificación cometidos por el programador, errores debido a una entrada
incorrecta y otras cosas imprevisibles.
Javascript provee funcionalidades para administrar los errores.
● try define un bloque de código para ejecutar (para probar).
● catch define un bloque de código para manejar cualquier error.
● finally define un bloque de código para ejecutar independientemente del resultado.
● throw define un error personalizado.

try {
Block of code to try
}catch(err) {
Block of code to handle errors
}finally{
other code
}
Manejo de errores
let a = 15, b = 0;
try {
let a = 15, b = 0; if (b == 0) {
try { throw new TypeError("Imposible dividir entre 0");
if (b == 0) { }
throw new Error("Imposible dividir entre 0"); console.log(`Cociente: ${(a / b)}`);
} } catch (error) {
console.log(`Cociente: ${(a / b)}`); if (error instanceof TypeError) {
} catch (error) { console.warn(error.message);
console.warn(error) } else {
} finally { console.error("Ha ocurrido un error genérico");
console.log("Operación finalizada."); }
} } finally {
console.log("Operación finalizada.");
}
Tipos de errores clásicos
● TypeError: cuando se realiza una operación en un valor del tipo incorrecto. Un ejemplo típico es
intentar acceder a una propiedad o método de undefined o null.
let alumno = null;
alumno.obtenerPromedio();
● ReferenceError: cuando intentas acceder a una variable que no está definida o no está en el
alcance.
console.log(variableNoDeclarada);
● SyntaxError: cuando hay un error de sintaxis en el código, por ejemplo, cuando faltan caracteres
o las estructuras no están correctamente definidas.
let x = ;
● RangeError: cuando un valor está fuera del rango permitido. Un ejemplo es intentar crear un array
con una longitud negativa o exageradamente grande.
let arr = new Array(-1);
● InternalError: cuando el motor de JavaScript enfrenta un problema interno, como una recursión
demasiado profunda.
function recursiveFunction() {
recursiveFunction();
}
recursiveFunction();
Formato JSON
JSON (JavaScript Object Notation). Es un formato ligero de intercambio de datos. JSON es
de fácil lectura y escritura para los usuarios. JSON es fácil de analizar y generar por parte
de las máquinas. JSON se basa en un subconjunto del lenguaje de programación
JavaScript.

Para escribir objetos JSON debemos tener en cuenta lo siguiente:

● Los datos están separados por comas.
● Los datos se escriben en pares, siendo primero el nombre o atributo del mismo y
luego el valor del dato.
● Los objetos JSON están rodeados por llaves “{}”
● Los corchetes “[ ]” guardan arreglos, incluyendo otros objetos JSON
Formato JSON
{
"curso": {
"nombre": "Introducción a la programación",
"duracion": "8 semanas",
"activo": true,
"descripcion": "Introducción básica a los conceptos fundamentales de la programación.",
"docente": {
"nombre": "Juan Pérez",
"email": "juan@example.com" Los tipos de datos soportados son:
},
"alumnos": [
{ ● Cadena
"nombre": "María", ● Número
"apellido": "Gómez",
"edad": 25 ● Booleano
}, ● Nulo
{
"nombre": "Pedro", ● Objeto
"apellido": "López",
"edad": 30
● Matriz
}
]
}
}
Tipos de datos JSON
Cadena: Para representar textos

Número: Para representar números enteros y

de punto flotante

Booleanos: Se designan como verdadero o

falso. Los valores booleanos no están
delimitados por comillas y se tratan como
valores de cadena.
Tipos de datos JSON
Nulo es un valor vacío. Cuando no hay ningún valor que
asignar a una clave, se puede tratar como nulo.

El objeto JSON es un conjunto de pares de nombres o valores insertados entre llaves {}.
Las claves deben ser cadenas y ser únicas separadas por comas.

"Influencers": [
{
"name": "María", Una matriz es una recopilación ordenada de
"age": 25 valores. En JSON, los valores de matriz deben ser
}, cadena, número, objeto, matriz, booleano o nulo.
{
"name": "Pedro",
"age": 30
}
]
Programación Orientada a Objetos
La programación orientada a objetos (POO) es un paradigma de programación que parte
del concepto de "objetos" como base, los códigos en este paradigma no se dividen en
archivos con funciones sueltas sino que todo se relaciona a dichos objetos los cuales
contienen información en campos llamados atributos y métodos.

Se basa en el concepto de clases y objetos.

● Objeto: Una entidad que contiene atributos (propiedades) y métodos (funciones).

● Clase: Un molde o plantilla a partir de la cual se crean objetos.

Clases en JS
Una clase sólo es una forma de organizar código de forma entendible. Son
«conceptos abstractos» de los que se pueden crear objetos de programación,
cada uno con sus características concretas.
Casos de uso de Clases
● Modelar entidades en una aplicación. Por ejemplo, si estás creando una aplicación de
gestión de estudiantes, podrías tener una clase Estudiante para modelar a cada
estudiante el cual tendrá atributos como {nombre, legajo, notas} y métodos como
agregarNota(), calcularPromedio(), etc.

● En aplicaciones que manejan usuarios. Por ejemplo, una clase Usuario podría
almacenar datos del usuario y manejar su autenticación con un método llamado
autenticar(password)

● Crear clases abstractas y mediante la herencia permitir que una clase derive o heredar
propiedades y métodos de otra clase. Una clase raíz puede definir un comportamiento
genérico en una clase base y extenderla para casos más específicos.
Instanciar una clase
Se le llama instanciar una clase, crear un objeto o crear una instancia a la acción de crear
un nuevo objeto basado en una clase particular. Esta acción la realizamos a través de la
palabra clave new, seguida del nombre de la clase, la cual puede tener parámetros, en
cuyo caso se controlan desde un constructor, concepto que veremos más adelante.

En Javascript, para instancia una clase, se utiliza una sintaxis muy similar a otros lenguajes
como, por ejemplo, Java. Es tan sencillo como escribir lo siguiente:
Miembros de una clase
La palabra clave this
Esta es una palabra clave que se utiliza mucho dentro de las clases para hacer referencia
al objeto instanciado. Es importante entender que hace referencia al objeto instanciado y
no a la clase:

Observa que la palabra clave this no se refiere a la clase Animal exactamente, sino a
la variable que utilizamos al instanciarla. Es decir, si hacemos un const pato = new
Animal(), se ejecutaría el constructor y la palabra clave this haría referencia a pato, por
lo que this.name estaría haciendo referencia a pato.name.
Clases y Métodos en ES6
class Libro { Se recomienda siempre seguir las
constructor(titulo, autor, año) { especificaciones ECMAScript cuyas
this.titulo = titulo; especificaciones mencionan todos
this.autor = autor; los detalles de cómo debe funcionar
this.año = año; y comportarse Javascript en un
} navegador, de modo que que
cualquier código o programa
// Método para mostrar los detalles del libro funcione exactamente igual,
detalle() { independientemente del navegador
return ` Título: "${this.titulo}", que se utilice.
Autor: ${this.autor},
Año: ${this.año} `;
}
}
Clases y Métodos en ES6
class Personaje { Tradicionalmente en Javascript, las propiedades
name; //(undefined) acostumbraban a definirse a través del constructor,
type = "Player"; mediante la palabra clave this, por lo que es muy
lifes = 5;
energy = 10;
probable que también te las encuentres declaradas
} de esta forma, sin necesidad de declararlas fuera
del constructor:

class Personaje {
constructor() { Puesto que se trata de propiedades de clase y el
this.name; constructor() es un método que se ejecuta cuando
this.type = "Player"; se crea el objeto (instancia de clase), ambas son
this.lifes = 5; equivalentes, ya que al crear un objeto se ejecutará
this.energy = 10; el constructor y se crearán esas propiedades.
}
}
Programación Orientada a Objetos
class Personaje {
name; // Propiedad sin definir (undefined)
type = "Player"; // Propiedad definida
lifes = 5; // Propiedad definida con 5 vidas restantes
energy = 10; // Propiedad definida con 10 puntos de energía

constructor(name) {
this.name = name; // Modificamos el valor de la propiedad name
console.log(`¡Bienvenido/a, ${this.name}!`); // Accedemos al valor actual de la prop. name
}
}

const mario = new Personaje("Mario"); // '¡Bienvenido/a, Mario!'

Como se puede ver, estas propiedades existen en la clase, y se puede establecer de

forma que todos los objetos tengan el mismo valor, o como en el ejemplo anterior,
tengan valores diferentes dependiendo del objeto en cuestión, pasándole los valores
específicos por parámetro.
Herencia

Es la capacidad de una clase para

heredar el comportamiento y
propiedades de otra clase.
Se puede denominar herencia de
clases a la característica donde una
clase hija obtiene las propiedades y
métodos de una clase padre porque
se ha establecido una relación entre
ambas, para ello se utiliza la palabra
reservada “extends”.
Herencia (super)
class Persona {
Cuando heredamos, una clase, en el constructor(nombre,apellido){
this.nombre = nombre;
constructor de la subclase podemos this.apellido = apellido;
invocar al constructor de la clase superior }
presentarme(){
con la palabra reservada “super”. return `${this.apellido} ${this.nombre}`;
}
}
Además con la palabra reservada super class Alumno extends Persona{
notas;
podemos hacer referencia a un método constructor(nombre,apellido,notas){
de la superclase desde una clase super(nombre,apellido);
this.notas = notas;
heredada }
presentarme(){
return super.presentarme() + " (Alumno)";
Una subclase puede sobrescribir una }
}
función definida en la superclase, class Docente extends Persona{
alterando el comportamiento de la curso;
constructor(nombre,apellido,curso){
misma. super(nombre,apellido);
this.curso = curso;
}
}
Herencia (casos de uso)
Este patrón es útil en sistemas donde tienes una lógica genérica para diferentes tipos de
objetos, pero necesitas que los detalles específicos sean manejados por cada tipo de
objeto. Por ejemplo:

En una aplicación de transporte, podrías tener vehículos como coches, motocicletas,

camiones, etc., y definir una lógica general en la clase base (Vehículo), mientras que los
detalles como el tipo de arranque, combustible o capacidad se implementarían en las
clases derivadas (Coche, Motocicleta, Camion).

En una aplicación de comercio electrónico, podrías tener una clase abstracta Producto, y
clases derivadas como Electrodoméstico, Ropa, y Alimentos que implementen
características específicas de cada tipo de producto.
Clase Abstracta
Una clase abstracta es aquella que no se puede utilizar para crear objetos, pero que sirve
como plantilla para crear otras clases. Es decir, no puede ser instanciada directamente y
está diseñada para ser heredada. Se caracterizan por no tener implementados algunos o
todos sus miembros, por lo que las clases derivadas deben proporcionar las
implementaciones. Actúan como expresiones de conceptos generales.
class Vehiculo {
constructor(marca, modelo) {
if (this.constructor === Vehiculo) {
throw new Error('No se puede instanciar una clase abstracta'
);
}
this.marca = marca;
this.modelo = modelo;
}
// Método abstracto
arrancar() {
throw new Error('Este método debe ser implementado por una subclase'
);
}
// Método genérico para detener el vehículo
detener() {
console.log(`${this.marca} ${this.modelo} se ha detenido.`);
}
}
Clase Abstracta
class Coche extends Vehiculo {
constructor (marca, modelo, puertas) {
super(marca, modelo); // con super llamamos al constructor de la clase base
this.puertas = puertas;
}
// Implementación específica del método arrancar para coches
arrancar () {
console.log(`${this.marca} ${this.modelo} está arrancando con ${this.puertas}
puertas.` );
}
}

class Motocicleta extends Vehiculo {

constructor (marca, modelo, cilindrada ) {
super(marca, modelo);
this.cilindrada = cilindrada ;
}
// Implementación específica del método arrancar para motocicletas
arrancar () {
console.log(`${this.marca} ${this.modelo} (${this.cilindrada } cc.) está
arrancando` );
}
}
Variables estáticas
Un miembro estático es aquel que reside class Persona {
nombre;
en una clase sin requerir una instancia de apellido;
esta para ser ejecutado. De forma que peso;
static unidadPeso = "Kg";
hay sólo una copia de éste, y se puede
constructor(nombre,apellido,peso){
llamar sin tener objetos de la clase. this.nombre = nombre;
this.apellido = apellido;
this.peso = peso;
}

presentarme(){
return `${this.apellido} ${this.nombre}`;
}

pesoATexto(){
return `${this.peso} ${Persona.unidadPeso}`;
}
}
Función estática
Al igual que las propiedades, las class Persona {
nombre;
funciones también se pueden definir apellido;
como estáticas.
constructor(nombre,apellido,peso){
this.nombre = nombre;
this.apellido = apellido;
this.peso = peso;
}

presentarme(){
return `${this.apellido} ${this.nombre}`;
}

static saludarA(nombre){
console.log(`Buenos dias ${nombre}`);
}
}

Persona.saludarA("Pedro");
¡Gracias!