Investigaciones

Instituto Tecnológico de La Piedad
División de Estudios Profesionales
DEPARTAMENTO DE
SISTEMAS Y COMPUTACIÓN
CARRERA
INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN Y
COMUNICACIONES
GRUPO
7°H
MATERIA
PROGRMACIÓN DE FRONT-END
INVESTIGACIONES
UNIDAD 1
INTRODUCCIÓN Y FUNCIONES DEL ECMASCRIPT 6
PRESENTADO POR
SUSANA VALDÉS ARAIZA
JONATHAN NAHÚM ROMERO CLAUDIO
LA PIEDAD, MICHOACÁN 05 SEPTIEMBRE DEL 2023
Av. Tecnológico # 2000, Meseta de los Laureles, C.P. 59370, Apartado

Postal 22
La Piedad, Mich. Tels. 01 (352) 52 62294, 52 62369, 52 60680,
www.tecnm.mx | www.itlapiedad.edu.mx
Rúbrica para evaluar reporte escrito
Materia: Programación de Front-End Profesor: M.E. Nicolás Jasso García
Tema:
- Investigar le evolución del estándar ECMAScript.
- Identificar las diferencias en las declaraciones de variables VAR y LET con
ejercicios sencillos.
- Investigar el funcionamiento del parámetro REST.
- Conocer el funcionamiento del operador “Spread”.
- Conocer las diferencias entre “Spread” y “Rest”.
Nombre (s) de los estudiantes:

Susana Valdés Araiza ___________________________________________________
Jonathan Nahúm Romero Claudio
Numero (s) de control:

20640056__________________________________________________________
20640054
Tiempo de evaluación: Sumativa
CATEGORÍA EXCELENTE NOTABLE BUENO SUFICIENTE INSUFICIENTE

Calidad de La información La La La información La información tiene
la claramente información información No se aportan poca o ninguna
desarrolla el claramente claramente detalles de relación con el tema
información tema principal de desarrolla el desarrolla el apoyo o algún principal de la tarea.
la tarea. Incluye tema tema principal ejemplo
diversos detalles principal de la de la tarea.
de apoyo y/o tarea. Incluye Incluye 1
ejemplos. 1-2 detalles detalle de
de apoyo y/o apoyo o
ejemplos. ejemplos.
Organizació La información La La La información La información

n de la aportada es información información aportada es aportada no
completa y aportada es aportada es parcialmente presenta relación
información muestra completa y completa y completa e con el contenido de
relaciones claras muestra muestra incluye algunos los apartados o
y lógicas con relaciones algunas de los apartados subapartados de la
todos los claras y relaciones y subapartados tarea.
apartados y lógicas con la claras y de la tarea.
subapartados de mayoría de lógicas con la
la tarea. los apartados mayoría de
y los apartados
subapartados y
de la tarea. subapartados
de la tarea.
Uso de la No existen Casi no Algunos Unos pocos Muchos errores
gramática y errores existen errores errores gramaticales,
gramaticales, errores gramaticales, gramaticales, ortográficos o de
de la ortográficos o de gramaticales, ortográficos o ortográficos o de puntuación.
ortografía puntuación. ortográficos o de puntuación.
de puntuación.
puntuación.
Diagramas e Los diagramas y Los Los Los diagramas y Los diagramas y las
ilustracione las ilustraciones diagramas y diagramas y las ilustraciones ilustraciones no son
son estupendos, las las son precisos y precisos y no
s precisos y ilustraciones ilustraciones algunas veces facilitan la
facilitan la son precisos son precisos y facilitan la comprensión del
comprensión del y facilitan la facilitan la comprensión del tema al lector.
tema al lector. comprensión comprensión tema al lector.
del tema al del tema al
lector. lector.
Trabajo en La carga de La carga de La carga de La carga de La carga de trabajo

equipo trabajo ha sido trabajo ha trabajo ha trabajo ha sido no fue dividida y
dividida y sido dividida sido dividida y dividida, pero un algunas personas
compartida y compartida compartida miembro del no han hecho la
igualitariamente justamente justamente grupo no ha parte del trabajo
por todos los por todos los por algunos hecho la parte que les
miembros del miembros del de los del trabajo que le correspondía.
grupo. equipo, miembros del correspondía.
aunque equipo,
pueda variar variando
ligeramente ligeramente
entre unos y entre unos y
otros. otros.
Retroalimentación
Rúbrica para evaluar ejercicios de programación
Curso: Programación Front Profesor: M.E. Nicolás Jasso García
Tema:
- Identificar las diferencias en las declaraciones de variables VAR y LET con ejercicios
sencillos.
- Realizar ejercicios para la declaración de constantes, variables en ciclos y funciones en
ciclos.
- Realizar ejercicios para conocer los nuevos métodos de cadenas con caracteres.
Implementar el uso de Plantillas literales (Literal Templates).
- Realizar ejercicios para implementar funciones anónimas.
Competencia: Conoce el estándar ECMAScript. Utiliza las funciones que incluye ES y las
funciones flecha.
Nombre del estudiante:

Susana Valdés Araiza
Jonathan Nahúm Romero Claudio
No. de control:
20640056
20640054
Categoría Sobresaliente Bueno Regular Pobre No aceptable
El programa En algunos Sólo funciona En algunos

funciona casos en casos casos no No funciona en
Funcionalidad correctamente y particulares no específicos funciona el ningún caso.
todas las funciona el donde las programa y no
variables de programa las variables no hay validación
entrada están variables de están validadas de datos.
validadas. entrada están y las
validadas. condiciones no
son correctas.
El programa
Razonamiento Es un código contempla todas El programa El programa no No hay
lógico compacto muy las condiciones contempla es depurado razonamiento
depurado. y no es algunas de las repite partes de lógico.
compacto. condiciones y código y no
no es compacto. contempla todas
las partes de las
condiciones.
Estructuración Si utiliza En algunos No tiene No tiene sangría El código está

del código sangría, casos no hay sangría, pero en sólo en algunos escrito en forma
espacios e sangría, no hay algunos casos, no hay plana sin
interlineado que saltos de línea bloqueos saltos de línea sangrías y sin
dé mayor que clarifiquen principales si que clarifique saltos de línea.
claridad. entre funciones. hay sangría. entre funciones.
.
Documentación La presentación Le faltan La presentación No tiene No es aceptable

incluye el algunos datos está incompleta, presentación, no la
nombre, los presentación, la carrera, tiene objetivos, documentación.
apellidos, la nombre del nombre del no define bien el
carrera, nombre profesor profesor código en la
del profesor especialidad, y especialidad, y documentación.
especialidad, nombre de la nombre de la
nombre de la institución, institución,
institución y matrícula los matrícula
matrícula, objetivos no objetivos no
objetivos bien están completos define bien el
definidos define bien el código en la
documentados y código en la documentación.
partes del documentación.
código bien
documentado.
Total 100 a 90 89 a 80 79 a 75 74 a 70 69 a 0
Retroalimentación:
Índice
Introducción ........................................................................................................................................1
Unidad 1 Introducción y Funciones del ECMAScript 6 .......................................................................2
ACTIVIDAD 1. Investigar le evolución del estándar ECMAScript ................................................... 2
ACTIVIDAD 2. Identificar las diferencias en las declaraciones de variables VAR y LET con
ejercicios sencillos.......................................................................................................................... 8
ACTIVIDAD 3. Realizar ejercicios para la declaración de constantes, variables en ciclos y

funciones en ciclos ....................................................................................................................... 11
ACTIVIDAD 4. Realizar ejercicios para conocer los nuevos métodos de cadenas con caracteres
..................................................................................................................................................... 17
ACTIVIDAD 5. Implementar el uso de Plantillas literales (Literal Templates)............................... 18
ACTIVIDAD 6. Investigar el funcionamiento del parámetro REST ............................................... 21
ACTIVIDAD 7. Realizar ejercicios para implementar funciones anónimas ................................... 26
ACTIVIDAD 8. Conocer el funcionamiento del operador “Spread” ............................................... 28
ACTIVIDAD 9. Conocer las diferencias entre “Spread” y “Rest” .................................................. 30
Uso de arreglos ............................................................................................................................ 32
Conclusiones ....................................................................................................................................36
Bibliografía .......................................................................................................................................37
Anexos .............................................................................................................................................38
I
Competencia: Conoce el estándar ECMAScript. Utiliza las funciones que incluye ES y las
funciones flecha.
Introducción
El presente trabajo de investigación abarca todos los temas de la primera unidad de esta materia de
programación de Front-End. Principalmente hace referencia al estándar ECMASCript el cual es una
especificación que define al lenguaje de programación JavaScript. Este establece las reglas, la
sintaxis y características que debe de tener el lenguaje.
JavaScript es un lenguaje de programación utilizado ampliamente en el ámbito de la programación,

conforme han pasado los años ha tenido grandes cambios notorios y mejoras en cuanto a su
funcionalidad y capacidad.
Las principales características de este documento de investigación es conocer cada uno de los temas
de la presente unidad, así como también realizar ejercicios que ayudan a ejemplificar el uso de
variables, constantes, ciclos, plantillas literales y cada uno de los puntos de la unidad.
Para poder comprender cada uno de estos temas es necesario el ejemplificarlos con algunos
ejercicios, lo cual ayuda a entender cada uno de los temas presentados.
Este trabajo de investigación consta de nueve activades o partes, las cuales abarcan toda la unidad
1 “Introducción y Funciones del ECMAScript 6”.
El primer tema hace mención a la evolución del estándar ECMAScript, del como surgió, todas las
versiones que han salido hasta llegar a la de la actualidad.
En el segundo se identifican las diferencias con var y let esto con ejercicios, así también el tercero,
se realizan ciclos para comprenderlos mejor. En el cuarto se presentan algunas formas de
concatenar cadenas de texto con variables. ´
Ya en el quinto se menciona el uso de las plantillas literales, en el sexto el funcionamiento del rest,
séptimo la realización de funciones anónimas, octavo conocer el operador spread y por último
conocer las diferencias que existen entre rest y spread.
1
Unidad 1 Introducción y Funciones del ECMAScript 6
ACTIVIDAD 1. Investigar le evolución del estándar ECMAScript
EVOLUCIÓN ECMASCRIPT
DESARROLLO DE JAVASCRIPT
El trabajador y programador Brendan Eich de Netscape, desarrolló
el lenguaje “Mocha”, después se llamó LiveScript y finalmente
JavaScript. Esta es una marca registrada de Oracle.
1995
JSCRIPT
La empresa Microsoft desarrolló su propia versión llamada JScript,
esto para evitar problemas legales.
1996
2
JAVA Y JAVASCRIPT
JavaScript y Java no tienen nada en común. El nombre de
JavaScript se debe a que Java estaba en su mejor momento, por lo
cual por estrategia de marketing le pusieron así.
1996
ESTANDARIZACIÓN JAVASCRIPT
Netscape mandó el borrador de JavaScript a ECMA International
para su estandarización ECMA-262, esta edición fue adoptada en
junio de este año.
1997
PRIMERA VERSIÓN
En Junio de 1997 se lanza al mercado la primera versión de
ECMAScript. Contenía características básicas como variables,
bucles y funciones.
1997
3
SEGUNDA VERSIÓN
En junio de 1998 se lanza la segunda versión de ECMAScript, se le
hicieron algunos cambios leves, esto para estar al margen con el
estándar ISO/IEC 16262.
1998
TERCERA VERSIÓN
En Diciembre de 1999 sale la tercera versión, con cambios en el
manejo de excepciones try/catch, cadenas UNICODE, RegExp,
objetos de tipo Array.
1999
CUARTA VERSIÓN
Esta cuarta versión fue abandonada a causa de las diferencias
políticas por la complejidad del lenguaje.
2000
4
QUINTA VERSIÓN
En Diciembre de este año sale esta versión, con ella se
implementaron los gtters y setters, la librería de JSON, el strict
mode.
2009
VERSIÓN 5.1
En Diciembre de este año sale la versión 5.1, la cual está alienada
al estándar ISO/IEC 16262:2011, tuvo cambios leves.
2011
SEXTA VERSIÓN
Fue una de las actualizaciones más significativas, introdujo clases,
módulos, arrow functions, iteradores for/of loops, hashmaps, sets y
proxies.
2015
5
SÉPTIMA VERSIÓN
Esta versión introdujo el método Array includes() y la
exponenciación **.
2016
OCTAVA VERSIÓN
Fue lanzada en Junio de este año, introdujo los constructores
async/await.
2017
NOVENA VERSIÓN
Conocida como ES2018, introdujo los operadores rest/spread,
iteración asíncrona, Promise.finally().
2018
6
DÉCIMA VERSIÓN
Conocida como ES2019, introdujo el flat(), flatMap(), trimStart(),
trimEnd(), optional error catch, Object.formEntries(),
Symbol.description.
2019
ONCEAVA VERSIÓN
Lanzada en Junio de este año, introdujo Dynamic imports, BigInt,
Promise.allSettled.
2020
DOCEAVA VERSIÓN
Introdujo el operador de tuberias, mejoras en manejo de promesas
y más.
2021
7
ECMASCRIPT Y JAVASCRIPT
JavaScript no es equivalente a ECMAScript, cada uno tiene sus
propias características. JavaScript es la implementación del
estándar ECMAScript.
2022
ACTIVIDAD 2. Identificar las diferencias en las declaraciones de variables

VAR y LET con ejercicios sencillos
Variable VAR
“Sirve para declarar una variable cuyo valor puede cambiar a lo largo del programa.” 1 Este tipo de
variables pueden tener un ámbito global o función/local.
Global es cuando se declara fuera de una función, si es así, estará disponible en todo el programa.
Local es cuando se declara dentro de una función, lo cual solo estará disponible dentro de dicha
función.
Sintaxis
var nombreVariable = valorN
nombreVariable
Es el nombre que se le asigna a la variable.
1
Htmlmaster. (2023, 26 febrero). Diferencia entre VAR y LET en JavaScript - HTML Masters. HTML
Masters. https://htmlmasters.tech/diferencia-entre-var-y-let-en-javascript/
8
valorN
Es el valor inicial de la variable, puede o no tener.
Ejercicios
1.- Uso de var.
Se declara una sentencia if, dentro de ella se declara una variable var llamada nombre que es igual
a una cadena de texto, enseguida se hace uso del console.log para mostrar el valor de la variable
nombre en la consola. Ver imagen 2.1 y 2.2.
Imagen 2.1. Uso de var.
Imagen 2.2. Resultado 1.
Si el console.log se encuentra dentro de la sentencia if, arroja el mismo resultado, debido a que es
una variable global en este caso. Ver imagen 2.3 y 2.4.
Imagen 2.3 Uso de var.
Imagen 2.4. Resultado 2.
9
Variable LET
“Se emplea para declarar una variable cuyo valor puede cambiar a lo largo del programa.” 2 Este tipo
de variables solo tienen un alcance local de ámbito de bloque, puede o no estar inicializada.
Un ámbito de bloque se refiere a todo lo que se encuentra dentro de las llaves ({}). Es por esto que
let solo se puede usar dentro del mismo bloque en el que se declare.
Sintaxis
let nombreVariable = valorN
nombreVariable
Es el nombre que se le asigna a la variable.
valorN
Es el valor inicial de la variable, puede o no tener.
Ejercicios
1.- Uso de let.
Se declara una sentencia if, dentro de ella se declara una variable let llamada nombre que es igual
a una cadena de texto, enseguida se hace uso del console.log para mostrar el valor de la variable
nombre en la consola. Ver imagen 2.5.
En este caso se muestra de manera correcta en consola el valor de la variable nombre, dado que
esta dentro del mismo bloque. Ver imagen 2.6.
Imagen 2.5. Uso de let.
Imagen 2.6. Resultado.
2
Ídem
10
Caso contrario, aquí el console.log se declara fuera de la sentencia if, por lo cual al momento de
ejecutarlo marca error, el cual indica que la variable nombre no esta definida, esto es porque se
encuentra fuera del bloque. Ver imagen 2.7 y 2.8.
Imagen 2.7. Uso de let.
Imagen 2.8. Error uso de let.
La principal diferencia entre estas variables var y let, es que var es una variable global, la cual se
puede utilizar en todo el programa y let solo es de alcance de bloque, con lo cual solo se podrá
utilizar dentro de un mismo bloque de código.
ACTIVIDAD 3. Realizar ejercicios para la declaración de constantes, variables

en ciclos y funciones en ciclos
Constantes
“Se utiliza para declarar una variable cuyo valor no cambiará a lo largo del programa. Una vez que
se le asigna un valor, no se puede reasignar. Las variables declaradas con const tienen un alcance
de bloque.” 3
3
Ídem
11
Estas constantes se deben de inicializar, en la misma sentencia en la que es declarada, debido a
que no se puede cambiar posteriormente.
Sintaxis
const nombreC = valor1
nombreC
Indica el nombre de la constante.
valor1
Es el valor asignado a la constante.
Ejercicios
1.- Uso del const.
Se declara una función llamada registro, la cual contiene una constante llamada nombre y con un
valor de tipo cadena. Se utiliza el console.log para mostrar en consola el contenido de la constante.
Fuera de la función se manda llamar esta mismas. Ver imagen 3.1.
Imagen 3.1. Uso de const.
Como resultado arroja el nombre de Ross. Ver imagen 3.2.
Ciclos
Los ciclos permiten ejecutar un código de manera repetitiva en base a una condición, estas
condiciones devuelven true o false al momento en que son evaluados. Estos ciclos se siguen
ejecutando hasta el momento en que la condición devuelva un false.
12
● For
Crea un ciclo el cual consta de tres expresiones opcionales, las cuales se encuentran dentro de
paréntesis y separadas por puntos y comas, seguidas de sentencias ejecutar.
Sintaxis
for (inicialización; condición; expresión-final) {

Sentencias
}
Inicialización
Se utiliza comúnmente para crear contadores y sucede antes de la primera ejecución del ciclo.
Condición
Es la expresión que se evalúa antes de la ejecución de cada repetición. Si devuelve true las
sentencias se ejecutan, si devuelve false, el ciclo se detiene.
Expresión-final
Es la expresión que se ejecuta después de cada repetición. Se usa para incrementar o decrementar
el contador.
Ejercicios
1.- Uso del ciclo for.
En este caso se declara el ciclo for, en donde la inicialización es igual a 1, la condición es que
mientras el índice sea menor o igual a diez se seguirá ejecutando, cada vuelta se va incrementando
de uno en uno. En consola se muestra el mensaje de “La iteración del índice es: “y pinta el número
de vuelta en la que va. Ver imagen 3.3.
Cuando la condición devuelva false, se muestra en consola el último mensaje. Ver imagen 3.4.
Imagen 3.3. Ciclo for.
13
2.- Generar un ciclo for anidado para mostrar la tabla de multiplicar.
Se declaran dos constantes una que es el multiplicando que es el número de la tabla y la otra es el
multiplicador hasta que número se desea multiplicar, se declara el ciclo for en donde se inicializa en
1, se ejecutará hasta que sea menor o igual al multiplicador y se incrementa de uno en uno. Ver
imagen 3.5.
Imagen 3.5. Ciclo for para tabla de multiplicar.
Como resultado arroja la tabla del 8 iniciando en 1 y terminando en el 10. Ver imagen 3.6.
Imagen 3.6. Resultado tabla del 8.
14
● While
Crea un ciclo el cual ejecuta una sentencia especificada mientras la condición sea verdadera. La
condición siempre se avalúa antes de ejecutar la sentencia.
Sintaxis
while (condición) {
Sentencia
}
Condición
Es la expresión que se evalúa antes de cada repetición. Si la condición devuelve true, se ejecuta la
sentencia, si devuelve false se ejecutan las sentencias que se encuentran fuera del ciclo.
Sentencia
Es la sentencia que se ejecuta mientras la condición se evalúa como verdadera.
Ejercicios
1.- Uso del while.
En este caso se declara una variable x de tipo let que es igual a 1, sigue el ciclo en donde la condición
indica que mientras la x sea menor o igual a 10 se van a ejecutar las sentencias, que en este caso
se muestra en consola el valor de x, en cada vuelta se va incrementando de uno en uno. Ver imagen
3.7.
Cuando la condición devuelve false, muestra en consola el último mensaje. Ver imagen 3.8.
Imagen 3.7. Ciclo while.
15
2.- Realizar un ejercicio que tenga sentido, es decir, que de cierto numero de vueltas utilizando el
while.
Suma de los primeros 20 números.
Se declaran dos variables, una es un contador igual a 1 y la otra es una variable que va a guardar la
suma de los números, es igual a 0. Se declara el ciclo while en donde la condición es que mientras
el contador sea menor o igual a 20 se ejecutará, se irá sumando tanto la suma de los números
anteriores como el número actual (contador), el contador se incrementa de uno en uno y se va
mostrando el resultado de cada vuelta. Ver imagen 3.9 y 3.10.
Imagen 3.9. Ejercicio while.
16
ACTIVIDAD 4. Realizar ejercicios para conocer los nuevos métodos de

cadenas con caracteres
1.- Ejercicio que concatena un string con una variable de tipo let.
En este caso se declara una función expresiva a la cual se le pasa un parámetro, dentro de ella se
declara una variable let llamada saludo1 que es igual al parámetro de la función, para después
mostrar en consola una cadena de texto en donde se concatena un string con la variable, para hacer
esta concatenación se utiliza una coma (,) para separar la cadena de texto con la variable. Fuera de
la función se manda llamar y se le pasa el valor al parámetro. Ver imagen 4.1.
Imagen 4.1. Concatenación de un string y una variable.
17
El resultado de esto es la concatenación de una codena de texto con una variable de tipo string. Ver
imagen 4.2.
2.- Ejercicio que concatene una constante de tipo string en otra constante.
En este caso primero se declara la constante llamada nombre, que es igual a un nombre personal,
se declara una segunda constante llamada información, la cual contiene la concatenación de una
ceda de texto con la constante nombre. Ver imagen 4.3.
Aquí la concatenación se hace mediante un signo de más (+). A diferencia del ejercicio anterior que
fue por medio de una coma.
Para mostrar el resultado en consola, se utiliza el console.log y se le pasa como parámetro el nombre
de la constante (información).
Imagen 4.3. Concatenación con constantes.
El resultado de este ejercicio es una sola cadena de texto. Ver imagen 4.4.
ACTIVIDAD 5. Implementar el uso de Plantillas literales (Literal Templates)
“Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrustadas. Con
ellas, es posible utilizar cadenas de caracteres de más de una línea, y funcionalidades de
interpolación de cadenas de caracteres.” 4
4
Plantillas literales (plantillas de cadenas) - JavaScript | MDN. (s. f.).
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Template_literals
18
El uso de estas plantillas permite que la creación de las cadenas de texto sea de una manera más
flexible y legible, además de que la concatenación se hace de distinta forma y es más rápida a
comparación de la forma tradicional.
Sintaxis
`Cadena de texto `
`línea 1 cadena de texto
línea 2 cadena de texto`
`cadena de texto ${expresión} texto adicional`
Las plantillas literales utilizan el carácter de comillas invertidas (` `).
Ejercicios
1.- Mostrar en consola un texto en varias líneas.
En este caso se esta haciendo uso del console.log para mostrar el texto en la consola, dentro de
este se abren las comillas invertidas (` `), cada línea de texto se pone en diferente renglón, esto para
que de un salto de renglón. Ver imagen 5.1.
Imagen 5.1. Uso de plantillas literales.
El resultado, nos muestra tres líneas de texto. Ver imagen 5.2.
2.- Declarar constantes e insertarlas dentro de cadenas de texto.
Primeramente, se declaran tres constantes, nombre, noControl y grupo, cada una de ellas con su
respectivo valor. Enseguida se declara otra constante llamada infromacion2, la cual contiene
cadenas de texto y se le concatena el valor de las otras constantes por medio del símbolo de pesos
19
y entre llaves el nombre de la constante (${nombre}), a esto se le llama interpolación. Ver imagen
5.3.
Para mostrar esta interpolación se hace uso del console.log para mandar llamar a la constante
infromacion2.
Imagen 5.3. Interpolación de expresiones.
El resultado de este ejercicio nos muestra la información declarada anteriormente y cada una de
ellas en diferente renglón. Ver imagen 5.4.
3.- Declarar un objeto con 5 elementos, mostrar en pantalla la información de ese objeto utilizando
literales de texto.
Primeramente, es declarado el objeto llamado escuela, el cual contiene cinco atributos, que es,
nombre, dirección, matricula, codigoP y color. Cada uno de estos atributos es separado por comas.
Ve imagen 5.5.
Imagen 5.5. Creación del objeto.
20
Después se declara una constante llamada esc, en la cual se hace uso de las plantillas literales. Para
poder llamar el valor de los atributos del objeto escuela se tiene que poner
nombreObjeto.nombreAtributo, esto debido a que son atributos propios del objeto y se tiene que
hacer referencia a él para poder tener acceso a ellos. Como se vio en el ejercicio anterior para poder
hacer la interpolación se hace uso del signo de pesos y llaves. A console.log se le pasa como
parámetro la constante esc. Ver imagen 5.6.
Imagen 5.6. Constante para la plantilla de literales.
Como resultado se muestra cada uno de los atributos del objeto escuela, en renglones diferentes.
Ver imagen 5.7.
ACTIVIDAD 6. Investigar el funcionamiento del parámetro REST
Este parámetro es utilizado en funciones o métodos, el cual acepta un número variable de

argumentos. Sus siglas en ingles son “Representational State Transfer”, que en este contexto hace
referencia a un “Parámetro de captura o expansión”, el cual es utilizado para almacenar un número
indefinido de argumentos en una función.
Sintaxis
…valores
Este parámetro se define con los tres puntos suspensivos seguidos del nombre de la variable.
21
Todos los argumentos que se le pasen a valores se incluirán en un arreglo.
Ejemplo
function suma (...numeros) {

let resultado = 0;
for (let numero of numeros) {
resultado += numero;
}
return resultado;
}
En este ejemplo de JavaScript, ...numeros es un parámetro rest que captura un número de variables
y los almacena en un array llamado numeros.
Captura de argumentos
Cuando se llama a la función suma, se le pueden pasar cualquier cantidad de argumentos separados
por comas, todos estos argumentos se almacenan en el array. Por ejemplo:
const resultado = suma (1, 2, 3, 4, 5);

console.log(resultado); // Imprime 15
En este ejemplo, a la función suma se le pasan los argumentos “1, 2, 3, 4, 5” en un array llamado
numeros, después se realiza la suma de todos los números. La que da como resultado 15.
Argumentos adicionales
Aparte de los argumentos capturados mediante el parámetro rest, se pueden incluir otros parámetros
antes o después del parámetro en la definición de la función. Estos otros argumentos se pasan de
manera normal. Ejemplo:
function ejemplo (a, b, ...resto) {

console.log (`a: ${a}`);
console.log (`b: ${b}`);
console.log (`resto: ${resto}`);
}
ejemplo (1, 2, 3, 4, 5);
En este ejemplo a y b son parámetros normales, …resto es el parámetro rest, el cual almacena los
argumentos que restan después de a y b.
22
El parámetro rest es útil cuando se desea escribir funciones que puedan aceptar un número variable
de argumentos sin tener que especificar una cantidad fija de parámetros en la definición de la función.
Esto lo hace especialmente útil para trabajar con colecciones de datos o para crear funciones
genéricas que puedan manejar diferentes situaciones.
Ejercicios
1.- Uso del rest con forEach.
En este caso se declara una función de nombre suma la cual recibe tres parámetros, los primeros
dos tienen un nombre, el tercer argumento (c), será un array que contendrá todos los argumentos
que el usuario incluya.
Dentro de esta función se declara una variable, la cual contendrá el resultado de la suma de los dos
primeros argumentos a y b, enseguida, por cada argumento que contenga c se hará la suma de ellos
y se ira guardando en la misma variable de resultado, se regresa la variable resultado. Ver imagen
6.1.
Al final, a la función se le pasan los argumentos y se muestra en consola la suma total de todos los
números.
Imagen 6.1. Uso del parámetro rest.
El resultado arrojado es la suma total de los numero 5, 13, 10, 25. Ver imagen 6.2.
2.- Uso del rest con for.
Primero se declara una función expresiva, con tres argumentos, el tercero será el array, dentro de
ella se declara la variable resultado que es igual a cero, después el ciclo for, donde los argumentos
23
que contenga números se le pasan a num, se realiza la operación de los números contenidos en
esta variable y se van sumando cada vuelta que da, esta suma se guarda en la variable result. Fuera
del ciclo se declara otra variable llamada total, en la cual se hace la suma de los dos primeros
parámetros (a y b) y la variable result. Al final se le pasan todos los números a sumar. Ver imagen
6.3.
Imagen 6.3. Uso del parámetro rest.
El resultado es la suma total de todos los numeros que se le pasaron como argumentos. Ver imagen
6.4.
3.- Declarar una variable que contenga un arreglo de cinco elementos de tipo cadena, imprimir
elemento por elemento utilizando el forEach.
Primeramente, se declara un arreglo, el cual contiene los cinco elementos de tipo cadena, cada uno
separado por comas. Enseguida se utiliza el forEach en el arreglo words, dentro de este, se declara
una función la cual recibe un parámetro, en este se guarda palabra por palabra del arreglo. Se
muestra en consola word. Ver imagen 6.5.
Imagen 6.5. Uso del forEach.
Nos muestra una lista con las palabras del arreglo. Ver imagen 6.6.
24
4.- Ejercicio que se pueda utilizar el rest para ir ingresando elementos en un arreglo.
Primero se declara un arreglo llamado animales, el cual contiene tres elementos. Este arreglo se
muestra en consola.
Después se declara una función, la cual recibe como parámetro un elemento de tipo rest (…c), esto
con el fin de que se puedan ingresar tantos elementos como el usuario quiera. Dentro de esta función
se declara un ciclo for, el cual comienza en la posición cero, se repetirá hasta el largo del array c y
se incrementa de uno en uno. Dentro de for se coloca el arreglo animales con el length para saber
su largo, el cual es igual a c en la posición del índice del ciclo for, esto es, finalizando los elementos
del arreglo animales, se ingresan de uno por uno los nuevos elementos que contiene c, de acuerdo
a la posición indicada.
Fuera del for el arreglo animales se muestra en la consola ya con los nuevos elementos.
Al final se le pasan los argumentos a la función agregar. Ver imagen 6.7.
Imagen 6.7. Uso del rest con arreglos.
El resultado, primero se muestra el arreglo con tres elementos y después el arreglo con los elementos
que se le ingresaron después. Ver imagen 6.8.
25
ACTIVIDAD 7. Realizar ejercicios para implementar funciones anónimas
Una función es un conjunto de instrucciones que realiza una tarea especifica.
Función declarativa: Sirven para crear una función con un nombre y pueden tener o no parámetros
de entrada.
Función expresiva: Este tipo de funciones puede o no tener un nombre, en caso de que no tenga
nombre se le conoce como función anónima.
1.- Declarar una función declarativa.
En este caso se declara la función inscribir, dentro de ella se declara la constante nombre que es
igual a ‘Nahum’, después se pone el console.log y se le pasa el nombre de la constante, esto para
que se pueda mostrar en consola. Al final se manda llamar la función inscribir. Ver imagen 7.1.
Imagen 7.1. Función declarativa.
Como resultada muestra el nombre de Nahum. Ver imagen 7.2.
2.- Declarar una función declarativa con dos argumentos
En este tipo de funciones, se colocan dos argumentos dentro de los paréntesis, lo cuales son
separados por comas. En este caso se está haciendo la operación de una suma, en donde los
argumentos son dos números a recibir, a console.log se le pasa la operación de la suma de los dos
numeros, el cual muestra el resultado, fuera de la función se manda llamar ésta, pasándole los dos
argumentos. Ver imagen 7.3.
Imagen 7.3. Función declarativa con dos argumentos.
26
El resultado que arroja es el resultado de sumar 25 + 18 que es igual a 43. Ver imagen 7.4.
3.- Declarar una función expresiva
En este caso la función se llama inscribir2, dentro de ella se encuentra un cosole.log con el mensaje
a mostrar en pantalla. Fuera de las llaves se manda llamar. Ver imagen 7.5.
Imagen 7.5. Función expresiva
El resultado es la cadena de texto. Ver imagen 7.6.
4.- Declarar una función anónima y sin la palabra reservada function.
En este caso la función se declara con let con el nombre registro3, lleva el signo de igual, seguido
de paréntesis y una flecha, dentro de la función se utiliza un console.log para mostrar el mensaje en
consola. Fuera de la función se manda llamar esta misma. Ver imagen 7.7.
Imagen 7.7. Función anónima.
El resultado es la cadena de texto Me voy a inscribir. Ver imagen 7.8.
27
5.- Función expresiva sin nombre que reciba dos parámetros y concatene una cadena con el
resultado de los dos parámetros.
En este caso se declara ejercicio de tipo let, que es igual a una función que recibe dos argumentos,
dentro de ella se declara otra variable de tipo let llamada result, la cual realiza una operación de
suma de dos números, en el console.log se hace la concatenación de una cadena de texto con la
variable result, esto se hace por medio de una coma. Fuera de la función se manda llamar y se le
pasan los dos números. Ver imagen 7.9.
Imagen 7.9. Función expresiva anónima con concatenación.
El resultado es 13 dado a que se suma el numero 8 + 5. Ver imagen 7.10.
ACTIVIDAD 8. Conocer el funcionamiento del operador “Spread”

Este operador también es conocido como un operador de propagación. Este operador se utiliza para
expandir o descomponer una estructura de datos, como un array o un objeto, en elementos
individuales.
Sintaxis
…Array
Este operador se define también con los tres puntos (…) seguidos de una estructura de datos a
expandir.
La sintaxis va a variar dependiendo si es para un array o para un objeto.
Para un array
const arrayOriginal = [1, 2, 3];
28
const newArray = [...arrayOriginal]; // Expande el array original en uno nuevo
Para un objeto
const objetoOriginal = { a: 1, b: 2 };
const newObjeto = { ...objetoOriginal }; // Expande el objeto original en uno
nuevo
En cada uno de estos ejemplos, el operador spread se utiliza para crear una nueva estructura de
datos en base a la original, se expanden todos los elementos del array o del objeto.
Ejemplo
const array1 = [1, 2, 3];

const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2]; // Combina los dos arrays
En este caso, combinedArray contendrá [1, 2, 3, 4, 5, 6]
En este caso se están combinado tanto el array1 y el array2 para hacer uno solo.
El operador spread es útil cuando se necesita trabajar con estructuras de datos complejas o cuando
se desea crear copias de objetos o arrays sin modificar los originales. También se utiliza en
situaciones en las que se debe pasar múltiples argumentos a una función o constructor que espera
argumentos individuales en lugar de una estructura de datos completa.
Ejercicios
1.- Utilizar el operador spread para unir dos arreglos.
Primeramente, se declaran dos arreglos, arr1 y arr2, cada uno con cinco elementos, se muestran
en consola. Después se crea un nuevo arreglo, arr3, en el cual se utiliza el operador spread para
descomponer tanto el arr1 y el arr2 y unirlos en uno solo. El resultado de este arr3 se muestra en
consola. Ver imagen 8.1.
Imagen 8.1. Uso del operador spread.
29
Como resultado se obtiene primero los dos arreglos arr1 y arr2 de manera separada, al utilizar el
operador spread se hacen uno solo. Ver imagen 8.2.
ACTIVIDAD 9. Conocer las diferencias entre “Spread” y “Rest”

Las diferencias del parámetro rest y el operador spread, se encuentran en la tabla 9.1.
Características Parámetro rest Operador Spread
Utiliza “…” seguido de un Utiliza “…” seguido de una

Sintaxis nombre de variable de la estructura de datos sea array u
función. objetos.
Expande una estructura de

Captura un número indefinido
datos en elementos
Propósito de argumentos y los almacena
individuales para crear copias
en un array.
o combinar datos.
Se utiliza en la declaración de Se utiliza fuera de la

funciones o métodos para declaración de funciones para
Función
recibir varios argumentos en crear copias o combinar datos
un solo parámetro. en arrays u objetos.
Permite crear copias de arrays

Permite crear una copia de la y objetos, siempre
Creación de copias
estructura original de los datos. conservando los datos
originales intactos.
Puede combinar múltiples Puede combinar múltiples

Combinación de datos argumentos en un solo array arrays u objetos en uno solo
dentro de la función. fuera de la función.
30
Utilizado en la creación de
Se declara en la definición de arrays u objetos o cuando una
Orden de uso
una función. función espera recibir
argumentos individuales.
Ejercicios
1.- Definir si es rest o spread.
Primero se declara un objeto llamado perro, el cual contiene tres atributos, nombre, edad y raza.
Después se declara otro objeto llamado perro2, el cual es igual a perro, esto nos indica que los
atributos de perro se le pasaron tal cual a perro2. Por la forma en que se le pasaron los atributos se
puede decir que es un spread, porque se está propagando la información.
Enseguida a perro2 se le cambia el valor de raza por uno nuevo, se declara una constante perros la
cual es igual a perro y perro2, al final se muestra en consola perros. Ver imagen 9.1.
Imagen 9.1. Spread o rest.
Como resultado se muestra un arreglo con dos objetos, uno que es el perro y otro el perro 2. Ver
imagen 9.2.
31
Con esto, se puede decir que este ejercicio es un spread, dado que se está propagando la
información y el atributo raza fue modificado en perro2. En caso de que no se hubiera modificado
ningún atributo en perro2 este ejercicio sería de rest.
Uso de arreglos
1.- Declaración de un arreglo.
En este caso el arreglo es llamado colores, el cual contiene tres valores, se recorre con un ciclo for,
el cual inicia en la posición cero, se ejecuta hasta que sea menor a la longitud del arreglo y se
incrementa de uno en uno. Se muestran en consola de uno por uno de acuerdo en la posición que
se encuentra. Ver imagen 10.1 y 10.2.
Imagen 10.1. Uso de arreglos.
2.- Método push
Es utilizado para meter elementos dentro del arreglo.
En este caso al arreglo colores se le agrega un nuevo valor, para esto se utiliza la palabra reservada
push. Para mostrarlo en consola se utiliza el for con el let. Ver imagen 10.3.
Imagen 10.3. Método push.
32
El nuevo elemento se inserta al final de todos los elementos del arreglo. Ver imagen 10.4.
3.- Método pop
Es utilizado para quitar elementos de un arreglo de acuerdo a la posición que se le indique.
Para esto es utilizada la palabra reservada pop y entre paréntesis la posición del elemento que se
quiere eliminar. Ver imagen 10.5.
Imagen 10.5. Método pop.
En este caso la posición número 3 del arreglo de colores es la eliminada. Esta posición corresponde
al color Azul. Hay que recordar que en un arreglo las posiciones comienzan desde la cero. Ver
imagen 10.5.
4.- Metodo shift
Es utilizado para quitar el primer elemento del arreglo.
33
Para esto es utilizada la palabra reservada shift.
En este caso el color que se quita del arreglo es el rosa, dado que es el primer elemento de este
arreglo. Ver imagen 10.7.
Imagen 10.7. Método shift.
El resultado muestra el elemento eliminado y al final se muestran los elementos que quedan del
arreglo colores. Ver imagen 10.8.
5.- Declarar 2 arreglos de enteros con 3 elementos cada uno y hacer la suma de los dos arreglos y
mostrarlos en pantalla.
Primeramente, se declaran los dos arreglos de tipo constante, cada uno con sus tres valores
asignados.
En seguida se declara un condicional if en donde se hace la comparación de que si la longitud de

cada uno de los arreglos es igual se procede a realizar lo siguiente. Esto debido a que los arreglos
solo deben de ser de tres elementos.
Dentro del if se declara un ciclo for que comienza en la posición 0, se ejecutará hasta que sea menor
a la longitud del arreglo1, se incrementa de uno en uno. Dentro de este ciclo es donde se realiza la
34
suma de los números de los dos arreglos. Esto se va a ejecutar siempre y cuando se haya cumplido
la condición inicial del if.
Cada arreglo se convierte a entero y se suman los dos, se va sumando posición por posición, es
decir, la posición 0 del arreglo1 se suma con la posición 0 del arreglo2, en cada vuelta que da el ciclo
se suma una posición diferente. Ver imagen 10.9.
Imagen 10.9. Suma de numeros con arreglos.
En el resultado se muestran la suma de los numeros, posición por posición. Ver imagen 10.10.
35
Conclusiones
Con la realización de este trabajo de investigación queda más claro cada uno de los puntos que
abarca esta unidad, así como también la realización de ejercicios hizo que se comprendieran de una
mejor manera estos puntos vistos.
La evolución del ECMAScript ha demostrado una mejora continua en cuanto al lenguaje JavaScript
durante todos estos años, lo cual ha llevado a la introducción de nuevas características y mejoras
que lo han convertido en uno de los lenguajes más utilizados.
Así también, con esto se demuestra el alcance que tiene cada una de las variables, tanto var como
let, var es de alcance global y let de alcance de bloque. Los ciclos han ayudado a la reducción del
trabajo, ya que gracias a ellos ya no se hace de manera manual la repetición de una cadena de texto,
sino que con un ciclo se hace de manera automática.
Además, el implementar las plantillas literales en cualquier programa tiene muchos beneficios,
debido a que es una forma más sencilla de concatenar cadenas o hacer saltos de renglón, por hacer
mención a algunas de sus funcionalidades.
El uso del parámetro rest ha hecho que la forma de guardar cierta cantidad de argumentos dentro
de un array sea de una manera más sencilla y comprensible, dado que con esto se pueden ingresar
tantos valores como se requieran en tan solo un arreglo definido en un argumento de una función.
Así como también el uso del operador spread a ayudado a que cuando se requiera el uso de
elementos por si solos y que se encuentren dentro de un arreglo se más fácil el poderlos sacar o
incluso unirlos a otros arreglos.
Todos y cada uno de estos temas son relevantes y tiene una gran funcionalidad dentro de la creación
de programas, ya que si se saben implementar de la manera correcta el código queda mas limpio y
es más eficiente, es por esto la importancia de conocer las distintas maneras de implementar
elementos, funciones, parámetros dentro de un programa.
36
Bibliografía
For - JavaScript | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/for
Htmlmaster. (2023, 26 febrero). Diferencia entre VAR y LET en JavaScript - HTML Masters. HTML
Masters. https://htmlmasters.tech/diferencia-entre-var-y-let-en-javascript/
La especificación ECMAScript - Javascript en español. (s. f.). Lenguaje JS.

https://lenguajejs.com/javascript/introduccion/ecmascript/
Mota, E. (2021). Que es ECMAScript. Azul Web. https://www.azulweb.net/que-es-ecmascript/
Parámetros REST - JavaScript | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/rest_parameters
Plantillas literales (plantillas de cadenas) - JavaScript | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Template_literals
Timetoast. (1995). ECMAScript timeline. Timetoast timelines.

https://www.timetoast.com/timelines/ecmascript
While - JavaScript | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/while
37
Anexos
38
DEPARTAMENTO DE
CARRERA
COMUNICACIONES
GRUPO
7°H
MATERIA
PROGRAMACIÓN DE FRONT-END
INVESTIGACIONES
UNIDAD 2
CLASES Y OBJETOS EN JAVASCRIPT
PRESENTADO POR
LA PIEDAD, MICHOACÁN 15 OCTUBRE DEL 2023

Postal 22
Tema:
- Investigar que son las clases, objetos, herencia y polimorfismo.
- Investigar lo que son las promesas.
- Investigar las funciones síncronas y asíncronas.
- Investigar el DOM.
-Investigar los métodos en los formularios.
- Investigar si se puede modificar un archivo JSON.

Susana Valdés Araiza _________________________________________________

20640056__________________________________________________________

ejemplos. ejemplos.

y los apartados
subapartados y
de la tarea.

de puntuación.
puntuación.
lector. lector.

aunque equipo,
otros. otros.
Retroalimentación:
TABLA DE CONTENIDO
RESUMEN .......................................................................................................................................39
MARCO TEÓRICO...........................................................................................................................41
Clases .......................................................................................................................................... 41
Objetos ......................................................................................................................................... 41
Herencia ....................................................................................................................................... 42
Polimorfismo................................................................................................................................. 42
Promesas ..................................................................................................................................... 42
Función Síncrona ......................................................................................................................... 43
Función Asíncrona ....................................................................................................................... 43
DOM ............................................................................................................................................. 44
Recuperación de elementos HTML .............................................................................................. 44
Métodos en los Formularios ......................................................................................................... 45
Modificación de un archivo JSON ................................................................................................ 45
ACTIVIDADES .................................................................................................................................47
Declaración de una clase ............................................................................................................. 47
Objetos ......................................................................................................................................... 48
Herencia ....................................................................................................................................... 49
Polimorfismo................................................................................................................................. 50
Promesas ..................................................................................................................................... 51
Función síncrona .......................................................................................................................... 52
Función asíncrona ........................................................................................................................ 53
RESULTADOS .................................................................................................................................56
Declaración de una clase ............................................................................................................. 56
Objetos ......................................................................................................................................... 57
Herencia ....................................................................................................................................... 57
Polimorfismo................................................................................................................................. 58
I
Promesas ..................................................................................................................................... 58
Función síncrona .......................................................................................................................... 58
Función asíncrona ........................................................................................................................ 59
CONCLUSIONES .............................................................................................................................61
REFERENCIAS ................................................................................................................................62
II
Competencia: Implementa nuevos métodos objetos según el estándar ES6. Utiliza métodos
avanzados de clases en JavaScript
RESUMEN
El presente trabajo de investigación presenta algunos de los conceptos abordados en clase, los
cuales son de gran utilidad para la elaboración de los ejercicios planteados y el avance del proyecto,
es por tal motivo que se realizan estas investigaciones para que quede más claro el principal objetivo
de cada uno de esos ejercicios.
Este trabajo también cuenta con un apartado de actividades, en donde se ejemplifican cada una de
estas investigaciones con el objetivo de que sean entendidos y se tenga presente como es que
funcionan. También se presentan los resultados, los cuales son las capturas de pantalla de cada uno
de estos ejercicios para que así quede comprobado el buen funcionamiento de cada uno de ellos.
Las clases son plantillas o modelos que definen la estructura y el comportamiento de los objetos,
dichas clases son el medio o el molde para crear objetos con propiedades y métodos, es decir, se
tiene a la clase persona y sus propiedades pueden ser nombre, edad, color de ojos, algunos de sus
métodos como caminar, correr, hablar.
Los objetos son instancias de las clases. Estos son creados a partir de la plantilla ya definida, un
objeto también puede ser visto como una entidad de la vida real, que contiene datos, que son las
propiedades y funciones que son los métodos que operan dichos datos. Esto es, de la clase persona
se puede tener al objeto Juan.
La herencia es la manera en que se permite que una clase herede las propiedades y métodos de
otra clase, esta clase que hereda las propiedades es llamada subclase o clase hija, y de la que
hereda es llamada superclase o clase padre. Con esto se puede crear una jerarquía de clases y se
hace uso de la reutilización de código y la creación de relaciones entre objetos.
Por otro lado, el polimorfismo permite crear objetos de diferentes clases que respondan de diferente
manera a un método que tiene el mismo nombre, esto es, se realiza la misma acción, pero de distinta
forma, por ejemplo, Juan puede caminar despacio, pero Luis puede caminar rápido.
Las promesas es la manera de poder trabajar con funciones asíncronas, dichas promesas pueden
devolver un resultado exitoso o un fracaso, siempre se devuelve algo. Una función asíncrona permite
ejecutar tareas sin seguir un orden y no bloquea la ejecución de la otra parte del código, es útil para
tareas que llevan un tiempo en ejecutarse, en cambio una función síncrona sigue un orden de
ejecución, bloquea el demás código existen hasta que se completa cierta tarea.
39
La manipulación del DOM se da por medio de diferentes maneras, esto es de gran utilidad para
añadirle interactividad a las páginas, con esto se puede cambiar el contenido de algún párrafo, los
estilos de los elementos, entre otras cosas más.
La forma de enviar los datos de un formulario es importante, ya que con esto el usuario también
puede interferir en la manera en que se manipulan los datos enviados, si se utiliza el get el usuario
puede ver los datos enviados adjuntos a la URL, si se utiliza el post, el usuario no ve los datos
enviados.
Para poder modificar un archivo json por medio de JavaScript es necesario crear u servidor node.js
y utilizar sistema de archivos, con esto es posible la manipulación de un archivo json.
40
MARCO TEÓRICO
Clases
“Una clase sólo es una forma de organizar código de forma entendible con el objetivo de simplificar
el funcionamiento de nuestro programa.” 5 La sintaxis de clase tiene dos componentes: expresiones
de clases y declaraciones de clases.
Declaración de clases: Para definir a una clase se hace mediante la palabra reservada class y un
nombre.
Expresiones de clase: Es otra forma de definir una clase, se hace mediante la creación de una
variable la cual contendrá la clase, esta puede ser nombrada o anónima.
El contenido de una clase se encuentra entre las llaves ({}), también en este apartado se definen los
métodos o constructores.
Un constructor es un método para inicializar a un objeto creado en la clase, solo puede existir un
constructor por clase. Un constructor puede usar la palabra reservada super para hacer referencia
al constructor de una superclase.
Un método representa las acciones que un objeto de esa clase puede realizar. Este puede ser
público o privado.
La palabra clave this es importante en este contexto, debido a que hace referencia a un objeto
instanciado de una clase.
Objetos
“Un objeto es una entidad independiente con propiedades y tipos.” 6 Se puede ver de la manera en
que una computadora es un objeto, el cual tiene propiedades, como un color, diseño, peso,
capacidad de memoria, entre otras más.
Un objeto también puede ser una instancia de una clase, la cual es el molde para definir la estructura
y comportamiento de los objetos. Las propiedades de un objeto son variables que almacenan los
datos y los métodos son funciones que permiten realizar acciones relacionadas con el objeto.
5
Clases en Javascript - Javascript en español. (s. f.). Lenguaje JS.
https://lenguajejs.com/javascript/oop/clases/
6
Trabajando con objetos - JavaScript | MDN. (s. f.).
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_objects
41
Los objetos son una forma de poder organizar y estructurar el código, debido a que permiten modelar
y representar entidades y conceptos del mundo real en un software. En la Programación Orientada
a Objetos, la creación de objetos es muy común, debido a los múltiples beneficios que brindan, como
la reutilización de código o la herencia, debido a que un objeto puede tener su estado y
comportamiento basado en la clase de la que se deriva.
Herencia
“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. Esa
relación se establece a través de la palabra clave extends.” 7
La herencia permite la reutilización de código y la creación de jerarquías de clases, lo cual facilita la

organización y extensión de un programa. Con la herencia una clase hija puede heredar las
propiedades y métodos de la clase padre, pero también puede agregar sus propias propiedades y
métodos o modificar los que le fueron heredados. Esto se hace con el objetivo de crear una clase
más específica o especializada a partir de una clase más general.
Polimorfismo
“Es la capacidad de un objeto para tomar diferentes formas o comportarse de diferente manera según
el contexto en el que se encuentra. Esto significa que un objeto puede tener diferentes tipos de datos
o comportamientos según como se le llame o se le use. “ 8
El polimorfismo proporciona ventajas en términos de reutilización de código y extensibilidad, gracias

que se puede escribir código genérico que funcione en diferentes tipos de objetos, esto sin tener que
conocer los detalles internos. Con esto, se facilita la construcción de sistemas más modulares y
fáciles de mantener.
Promesas
Una promesa “es un objeto que representa la terminación o el fracaso de una operación asíncrona.” 9
Es decir, es una operación que toma su tiempo, pero se ejecuta. Estas promesas siempre devuelven
una respuesta, puede ser el resultado que se estaba esperando o el rechazo de esta debido a un
7
Herencia de clases - Javascript en español. (s. f.). Lenguaje JS.
https://lenguajejs.com/javascript/oop/herencia-clases/
8
Castro, L. (2023, marzo). Polimorfismo en JavaScript. Platzi. https://platzi.com/clases/6636-
javascript-30-dias/60973-polimorfismo-en-javascript/
9
Usar promesas - JavaScript | MDN. (s. f.).
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Using_promises
42
error que se haya generado. Las promesas primero se crean y después se consumen. Una promesa
tiene tres estados:
Pendiente (pending): Estado inicial, ni cumplida ni rechazado.
Cumplida (fulfilled): La operación fue un éxito.
Rechazada (rejected): La operación falló.
Se usa el resolve para cuando la promesa se cumple con éxito, la cual retorna el objeto promise
resuelto con el valor dado, cambia el estado de la promesa de pendiente a cumplida. Reject cuando
la promesa falla, cambia el estado de la promesa de pendiente a rechazada, retorna el objeto promise
que es rechazado por algún motivo.
Función Síncrona
Es una función que se ejecuta de manera secuencial, es decir, una instrucción a la vez y bloquea las
demás líneas de código hasta que se completa la que se está ejecutando. Por lo tanto, cuando se
llama a una función síncrona, el programa no seguirá ejecutándose hasta que la función se termine
se complete.
Este tipo de funciones son comunes en la programación secuencial, ya que se necesita garantizar
que ciertas tares se completen antes de avanzar a lo siguiente. Esto puede casuar algunos
problemas cuando una tarea tarda mucho tiempo en ejecutarse, lo que provoca que el programa
tarde mucho más en terminarse o cause ciertos retrasos.
Función Asíncrona
También conocida como async function, este tipo de funciones permite realizar operaciones
asíncronas de manera más legible y manejable. La sincronía es utilizada para trabajar con
operaciones que pueden tomar un cierto tiempo en completarse, como lo son, las solicitudes de red,
lectura/escritura de archivos, o temporizadores.
Son eventos que no ocurren del todo al mismo tiempo que el resto de eventos, es decir, hay partes
del código que son ejecutadas pero su respuesta no es inmediata, así también la ejecución del código
no sigue un orden como tal, en el código aparecen sentencias en un orden, pero se ejecutan en
orden distinto.
43
DOM
Las siglas DOM significan Document Object Model (Modelado de Objetos de Documento), “es una
interfaz de programación para los documentos HTML y XML. Facilita una representación
estructurada del documento y define de qué manera los programas pueden acceder, al fin de
modificar, tanto su estructura, estilo y contenido.” 10
Una página HTML se forma por múltiples etiquetas HTML, las cuales están anidadas una dentro de
otra, las cuales forman un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM. Ver
diagrama 1.1.
Una página web es un documento. Dicho documento puede exhibirse en un navegador o también
como código fuente HTML. El DOM es una representación orientada al objeto de la página web y
puede ser modificado con un lenguaje de script como lo es JavaScript.
Recuperación de elementos HTML
Para recuperar un elemento creado en un documento HTML y poderlo manipular en un documento

de JavaScript, se puede hacer de tres maneras diferentes:
● Por su etiqueta: Aquí se recuperan los elementos por medio de una etiqueta HTML especifica, se
debe de proporcionar el nombre de la etiqueta tal cual, para esto se utiliza el método
getElementsByTagName(tagName).
● Por su id: De esta manera se busca el elemento en el documento HTML por medio de su
identificador, cada elemento en HTML puede tener un id único, con el método getElementById(id) se
obtiene el primer elemento que coincida con el id que se le pasa como argumento.
● Por su clase: De esta manera se recuperan los elementos que tengan una clase css, con este
método getElementsByClassName(className) se obtiene una colección de elementos que tengan
esa clase en específico.
10
Introducción - Referencia de la API Web | MDN. (s. f.).
https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction
44
Métodos en los Formularios
Existen formas diferentes de enviar los datos de un formulario, esto se hace mediante el atributo
método, el cual es el que define como se envían dichos datos. Los métodos más comunes son el
GET y el POST.
GET
Este método “lleva los datos de forma visible al cliente (navegador web). El medio de envío es la
URL. Los datos los puede ver cualquiera.” 11
Estos datos se añaden como una serie de pared de
nombre/valor. Una vez que la URL ha terminado, se incluye un signo de interrogación (?) seguido de
los pares de nombre/valor, cada uno de ellos se separa por un signo (&). Por ejemplo:
www.aprenderaprogramar.com/action.php?nombre=pedro&apellidos1= Gómez
POST
Cuando se utiliza este método los “datos son ocultos (porque el cliente no los ve)” 12, no se obtienen
en la dirección URL, se incluyen en el cuerpo de la petición. Al utilizar este método la longitud no
está limitada, por lo tanto, se pueden enviar datos más grandes.
Modificación de un archivo JSON
La manipulación de archivos json se puede hacer por medio de un servidor Node.js
Node.js “es un entorno en tiempo de ejecución multiplataforma para la capa del servidor (en el lado
del servidor) basado en JavaScript.” 13
Con Nose.js se permite crear aplicaciones escalabres,
permitiendo establecer y gestionar múltiples conexiones al mismo tiempo.
Para lograr que un dato del archivo json sea modificado primeramente se debe de crear el servidor
node.js en la aplicación, además se debe de utilizar el módulo fs (file system), este es un módulo
incorporado en Node.js, el cual proporciona funcionalidades para trabajar con el sistema de archivos
del sistema operativo. Con este módulo se pueden realizar las operaciones de leer archivos, escribir,
11
Get y post HTML: Method. Formas de envío de datos en formulario. diferencias y ventajas.
ejemplos (CU00721B). (s. f.).
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=527:get-y-
post-html-method-formas-de-envio-de-datos-en-formulario-diferencias-y-ventajas-ejemplos
12
Ídem
13
imões, C. (2021, 27 julio). ¿Qué es Node.js, y para qué sirve? ITDO.
https://www.itdo.com/blog/que-es-node-js-y-para-que-sirve/
45
crear directorios, eliminar archivos, copiar archivos y muchas más tareas con relación al sistema de
archivos.
Con este servidor y el módulo fs es posible modificar un dato en el archivo json.
46
ACTIVIDADES
Declaración de una clase
Para declara una clase se utiliza la palabra reservada class y el nombre de la clase, en este caso es
rectángulo, dentro de ella se declara su constructor que inicializa las propiedades de alto y ancho.
También se ha creado un método llamado figura que muestra un mensaje en consola utilizando las
propiedades de la instancia.
// Clases
class Rectangulo {
constructor(alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
//Método
figura() {
console.log(`La altura es de ${this.alto} y el ancho
de ${this.ancho}`);
}
EXPRESIONES DE CLASES
Estas expresiones pueden tener un nombre o no, las cuales son llamadas anónimas.
Anónima
Se define una variable llamada recta, la cual contiene dicha clase, se declara su constructor y sus
propiedades. En consola se manda llamar esta variable. Esto muestra el nombre de la variable
debido a que se está utilizando la propiedad de name. Ver figura 1.1.
let recta = class {

this.alto = alto;
this.ancho = ancho;
}
};
console.log(recta.name);
47
Nombrada
Viene siendo lo mismo que la anterior, se declara la variable llamada figura, la cual contiene la clase
en este caso si se nombra como rectángulo 2. Dicha clase contiene el constructor y sus propiedades.
En consola se manda llamar esta variable y muestra el nombre de la clase. Ver figura 1.2.
let figura = class rectangulo2 {

this.alto = alto;
this.ancho = ancho;
}
};
console.log(figura.name);
Objetos
Los objetos se pueden crear mediante la palabra reservada object o pueden ser una instancia de
una clase.
Object
En este caso se declara una variable llamada miCarro que es igual a un objeto. A este objeto se le
añaden sus propiedades, como marca, modelo, año. Mediante el console.log se manda llamar esta
variable y muestra dichas propiedades en un arreglo de datos. Ver figura 2.1.
var miCarro = new Object();

miCarro.marca = "Audi";
miCarro.modelo = "A3";
miCarro.año = 2022;
console.log(miCarro);
Otra forma de crear un objeto es haciendo uso de las llaves, dentro de ellas se encierran sus
propiedades. Igualmente se imprime le objeto miCarro en consola, mostrando sus propiedades. Ver
figura 2.2.
var miCarro = {
marca: "Mazda",
modelo: "Sedán",
año: 2024,
48
};
console.log(miCarro);
Instancia de una clase
Para crear un objeto a partir de una clase, primeramente, se declara una constante con el nombre
del objeto en este caso el objeto es llamado rectanguloC dado que será una instancia de la clase
Rectángulo. En esta constante se llama la clase y se le pasan los parámetros correspondientes.
Después se manda llamar esta nueva variable y se imprime en consola. Ver figura 2.3.
const rectanguloC = new Rectangulo(15, 20);

console.log(rectanguloC);
Para también llamar al método (figura) con este objeto se llama al objeto con el nombre del método,
y en consola se muestra el mensaje que contiene. Ver figura 2.4.
rectanguloC.figura();
Herencia
En este ejercicio se tiene a la clase principal o clase padre llamada animal, la cual contiene su
constructor que inicializa la propiedad de nombre. También es declarado un método llamado sonido
que imprime en pantalla un mensaje con el nombre del animal.
class animal {
constructor(nombre) {
this.nombre = nombre;
}
sonido() {
console.log("Hace un sonido desconocido");
}
}
De esta clase se deriva una clase hija, una llamada perro, para esto se utiliza la palabra reservada
extends.
49
La clase perro contiene un atributo propio que es raza, se crea su constructor con sus dos
propiedades, la que se le hereda y la propia, también se manda llamar al constructor de la clase
padre con la palabra super, se inicializa su atributo de raza. Contiene también el método sonido que
le fue heredado.
class perro extends animal {

raza;
constructor(nombre, raza){
super(nombre);
this.raza = raza;
}
sonido() {
console.log(`Soy ${this.nombre} de raza ${this.raza} y ladro guau
guau`);
}
}
Se crea una instancia de esta clase llamada miPerro, se le pasan sus parámetros correspondientes,
se llama al método sonido y en consola se imprime el mensaje del método. Ver figura 3.1.
const miPerro = new perro("Botas", "Golden");

miPerro.sonido();
Polimorfismo
De la clase animal se crea una nueva clase llamada gato, dicha clase contiene un atributo propio,
edad, se crea su constructor y se manda llamar al constructor de la clase padre, se inicializa su
atributo. También contiene el método sonido.
class gato extends animal {

edad;
constructor(nombre, edad){
super(nombre);
this.edad = edad;
}
sonido() {
console.log(`Soy un gatito llamado ${this.nombre} y tengo
${this.edad} años, yo maullo miau miau`);
}
}
50
Se crea una función llamarAnimal que recibe como parámetro a un objeto animal, se manda llamar
al método sonido.
function llamarAnimal(animales) {
animales.sonido();
}
Después se crean las instancias de cada una de las clases, tanto de la de perro como la de gato, así
también de la clase padre animal, cada una de ellas con sus parámetros correspondientes.
const animall = new animal("Animal");

const miPerro = new perro("Botas", "Golden");
const miGato = new gato("Peque", 2);
Se manda llamar la función llamarAnimal y se le pasan los objetos creados anteriormente, en consola
se muestra el mensaje del método sonido, este mensaje será diferente en cada uno de los objetos,
lo cual viene siendo el polimorfismo, se comporta de diferente manera en cada objeto. Ver figura 4.1.
llamarAnimal(animall);
llamarAnimal(miPerro);
llamarAnimal(miGato);
Promesas
Se crea una promesa llamada miPromesa, la cual se hace mediante la palabra reservada Promise,
recibe un resolve si se resuelve con éxito y un reject si fracasa, dentro de ella se crea un retraso de
tiempo, se declara una constante booleana, en este caso esta variable puede tomar el valor de true
para que sea un éxito la promesa o un false para que sea un fracaso. Se crea un condicional if donde
se evalúa la variable éxito, si es verdadera regresa el resolve y si es falsa el reject, tiene un retraso
de dos segundos.
// Creación de una promesa

const miPromesa = new Promise((resolve, reject) => {
setTimeout(() => {
const exito = true; //True o false
if (exito) {
resolve("Los datos se cargaron con éxito.");
} else {
reject("Se produjo un error al cargar los datos.");
}
51
}, 2000); //Retraso de 2 segundos
});
Se consume la promesa, se utiliza el then que recibe un mensaje y en consola se muestra el mensaje
del resolve (Ver figura 5.1.). En él catch recibe un error y en consola muestra el mensaje del reject.
Ver figura 5.2.
/ Uso de la promesa
miPromesa
.then((mensaje) => {
// La promesa se resolvió con éxito
console.log("Éxito:", mensaje);
})
.catch((error) => {
// La promesa fue rechazada (se produjo un error)
console.error("Error:", error);
});
Función síncrona
En este caso se declara una función llamada síncrona, primeramente, en consola se muestra un
mensaje, después se declara una variable llamada resultado la cual es igual cero, se crea un ciclo
for en donde se irán sumando los números del 1 al 5 y el resultado se almacena en la variable
resultado. En consola se muestra el resultado de la suma de los números y se indica que ha
terminado la función. Fuera de esta función en consola se muestra un mensaje antes de llamar a la
función, después llama a la función y para terminar se muestra otro menaje indicando esto. Ver figura
6.1.
Con este ejemplo se puede ver cómo es que funciona una función síncrona, se va ejecutando paso
por paso, tal cual se escribe en código.
// Funcion sincrona
function sincrona() {
console.log("Inicio de la función");
//Secuencia de tareas
let resultado = 0;
for (let i = 1; i <= 5; i++) { //Se suman los numeros del 1 al 5
resultado += i;
}
52
console.log("La suma es:", resultado);
console.log("Fin de la función");
}
console.log("Antes de llamar a la función");

sincrona();
console.log("Después de llamar a la función");
Función asíncrona
En este caso primero se declara una promesa, después se crea una función asíncrona llamada
funcionAsincrona, en donde primero se muestra en consola un mensaje, se crea un try catch, en
donde en el try se crea una variable llamada resultado con un await para esperar el resultado de la
promesa, se muestra en consola un mensaje si la promesa fue un éxito, dentro del catch se muestra
un mensaje si la promesa fue un fracaso. Enseguida se muestra en consola un mensaje para indicar
que la función a terminado. Fuera de esta función se muestra un mensaje en consola y se manda
llamar a la función funcionAsincrona, al terminar se muestra en consola un mensaje. Ver figura 7.1 y
7.2.
// Función que simula una operación asíncrona

function tareaAsincrona() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const exito = true; //True o false
if (exito) {
resolve("Éxito");
} else {
reject("Fracaso");
}
}, 2000); //Retraso de 2 segundos
});
}
// Función asíncrona que llama a la tarea asíncrona

async function funcionAsincrona() {
console.log("Inicio de la función asincrona");
try {
const resultado = await tareaAsincrona();
console.log("Resultado de la tarea asincrona:", resultado);
53
} catch (error) {
console.error("Error:", error);
}
console.log("Fin de la función asincrona");

}
console.log("Antes de llamar a la función asincrona");

funcionAsincrona().then(() => {
console.log("Después de llamar a la función asincrona");
});
Primero se crea un documento HTML, dentro del body se declara un contendor, el cual contiene una
etiqueta h1, una de párrafo identificado por su id primero y otra etiqueta párrafo con una clase texto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contenedor">
<h1>
</h1>
<p id="primero">
</p>
<p class="texto">
</p>
</div>
<script src="ejerInvestigaciones.js"></script>
</body>
</html>
54
Por etiqueta
Para recuperar al elemento h1, primero se declara una constante llamada encabezado, el cual
recupera a la etiqueta h1 por medio del getElementsByTagName(“h1”), en consola se muestra esto.
Figura 8.1.
//Recuperacion por etiqueta

const encabezado = document.getElementsByTagName("h1");
console.log(encabezado);
Por id
Para recuperar al elemento p con id primero, se declara una constante llamada parrafoPrimero, el
cual se recupera por medio del getElementById(“primero”), en consola se muestra esto. Figura 8.2.
//Recuperación por id
const parrafoPrimero = document.getElementById("primero");
console.log(parrafoPrimero);
Por clase
Para recuperar al elemento p con clase texto, se declara una constante llamada texto, el cual se
recupera por medio del getElementsByClassName(“texto”), en consola se muestra esto. Figura 8.3.
//Recuperación por clase

const texto = document.getElementsByClassName("texto");
console.log(texto);
55
RESULTADOS
Árbol de DOM. Diagrama 1.1.
Document
HTML
Head Body
Meta Title H1 Div
Diagrama 1.1.
Declaración de una clase
EXPRESIONES DE CLASE
Anónima
Muestra el nombre de la variable. Figura 1.1.
Figura 1.1.
Nombrada
Muestra el nombre de la clase. Figura 1.2.
Figura 1.2.
56
Objetos
Object
Se muestran las propiedades del objeto miCarro en un arreglo. Figura 2.1.
Figura 2.1.
La otra forma de crear un objeto también devuelve un arreglo con sus propiedades. Figura 2.2.
Figura 2.2.
Instancia de una clase
Se muestran las propiedades del rectángulo. Ver figura 2.3.
Figura 2.3.
Llamada al método figura. Figura 2.4.
Figura 2.4.
Herencia
Se muestra el mensaje que contiene el método sonido de la clase perro. Ver figura 3.1.
Figura 3.1.
57
Polimorfismo
Se llama a la función llamarAnimal con cada uno de los objetos, se puede ver claramente como el
método sonido se comporta de manera diferente en cada uno de los objetos. Figura 4.1.
Figura 4.1.
Promesas
Resultado de la promesa cuando es un éxito. Figura 5.1.
Figura 5.2.
Resultado cuando la promesa fue un fracaso. Figura 5.2.
Figura 5.2.
Función síncrona
La ejecución de la función síncrona es de manera secuencial. Figura 6.1.
Figura 6.1.
58
Función asíncrona
Esta función se ejecuta de acuerdo al orden que se vaya generando, no sigue un orden como tal.
Se cumple la tarea. Figura 7.1.
Figura 7.1.
No se cumple la tarea. Figura 7.2.
Figura 7.2.
Por etiqueta
Se recupera al elemento h1. Figura 8.1.
Figura 8.1.
Por id
Se recupera al elemento p con id primero. Figura 8.2.
Figura 8.2.
59
Por clase
Se recupera al elemento p con clase texto. Figura 8.3.
Figura 8.3.
60
CONCLUSIONES
Con estas investigaciones realizadas queda más claro el concepto de cada una de ellas, así para
futuros ejercicios ya se tiene una base más sólida de lo qué es y para qué sirve, cada investigación
de cada concepto fue realizada en fuentes confiables, esto con la finalidad de que todo sea verídico.
Así, con cada una de las actividades realizadas para ejemplificar cada concepto investigado, fue
hecho de una manera simple, de tal manera que quedara claro cómo es que se utiliza para así
poderlo implementar en cada uno de los ejercicios propuestos en clases, además las capturas de
los resultados de estos ejercicios demuestran que son realizados de manera correcta dado que
arrojan el resultado esperado.
Con esto se pude decir que un clase es la plantilla de la cual se crean todos los objetos necesarios,
en ellas se declaran propiedades y métodos que los objetos pueden tener, de esta manera la
creación del código es de una mera más organizada y eficiente, con la herencia se puede reutilizar
código y hacer que el trabajo sea de una manera más eficaz, dado que si una clase hija hereda las
propiedades y métodos de su padre, ya no se tendrá que volver a escribir, con esto se ahorra tiempo
y esfuerzo para la creación de objetos y clase, además con el polimorfismo se vio que un método se
puede ejecutar de distinta manera aunque tenga el mismo nombre y esto se puede ver con ejemplos
de la vida real.
El manejar las promesas se asegura la consistencia de los datos, debido a que siempre se va a
obtener un respuesta, ya sea un éxito o un fracaso, así la manera de trabajar con funciones
asíncronas se hace de una manera más simplificada y eficaz dado que no se tiene que esperar a
que se termine de ejecutar una tarea para empezar otra, en cambio sí se utiliza una función síncrona
si se tiene que esperar a la finalización de la tarea, pero esto resulta útil para el momento en que se
requiera seguir una sincronía en la ejecución.
Con la manipulación de los objetos, es que se puede añadir la interactividad a los sitios web, ya que
por medio de la recuperación de los elementos HTML de las distintas maneras que existen, es mucho
más fácil manipularlos y trabajar con ellos en cuanto a su estilo, contenido, forma, etcétera, Con esto
también es que los formularios pueden enviar los datos a algún servidor y trabajar con ellos, es muy
importante saber la manera que estos datos son enviados con la finalidad de que el usuario no pueda
influenciar en ellos.
En conjunto, todos estos conceptos, proporcionan las herramientas necesarias para desarrollar
aplicaciones web, modernas, en donde el código se presente de manera organizada, se creen las
relaciones entre objetos, así también el manejo de las funciones asíncronas y síncronas hagan que
un programa sea eficaz.
61
REFERENCIAS
Castro, L. (2023, marzo). Polimorfismo en JavaScript. Platzi. https://platzi.com/clases/6636-

javascript-30-dias/60973-polimorfismo-en-javascript/
Clases en Javascript - Javascript en español. (s. f.). Lenguaje JS.

https://lenguajejs.com/javascript/oop/clases/
Get y post HTML: Method. Formas de envío de datos en formulario. diferencias y ventajas. ejemplos
(CU00721B). (s. f.).
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=527:get-y-
post-html-method-formas-de-envio-de-datos-en-formulario-diferencias-y-ventajas-ejemplos
Herencia de clases - Javascript en español. (s. f.). Lenguaje JS.

https://lenguajejs.com/javascript/oop/herencia-clases/
Introducción - Referencia de la API Web | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction
imões, C. (2021, 27 julio). ¿Qué es Node.js, y para qué sirve? ITDO. https://www.itdo.com/blog/que-
es-node-js-y-para-que-sirve/
Trabajando con objetos - JavaScript | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_objects
Usar promesas - JavaScript | MDN. (s. f.).

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Using_promises
62
DEPARTAMENTO DE
CARRERA
COMUNICACIONES
GRUPO
7°H
MATERIA
PROGRAMACIÓN DE FRONT-END
INVESTIGACIONES
UNIDAD 3
ESTRUCTURA DE DATOS
PRESENTADO POR
LA PIEDAD, MICHOACÁN 05 NOVIEMBRE DEL 2023

Postal 22
Tema:
- Investigar los símbolos en JavaScript y sus propiedades, relacionando su uso con
ejemplos.
- Investigar qué es Sass.
- Investigar qué es SCSS.

Susana Valdés Araiza _________________________________________________

20640056__________________________________________________________

ejemplos. ejemplos.

y los apartados
subapartados y
de la tarea.

de puntuación.
puntuación.
lector. lector.

aunque equipo,
otros. otros.
Retroalimentación:
TABLA DE CONTENIDO
RESUMEN .......................................................................................................................................63
MARCO TEÓRICO...........................................................................................................................64
Investigar los símbolos en JavaScript y sus propiedades, relacionando su uso con ejemplos .... 64
SASS ............................................................................................................................................ 65
SCSS............................................................................................................................................ 67
ACTIVIDADES .................................................................................................................................68
Uso de SCSS ............................................................................................................................... 69
RESULTADOS .................................................................................................................................72
Uso de SCSS ............................................................................................................................... 73
CONCLUSIONES .............................................................................................................................75
REFERENCIAS ................................................................................................................................76
I
Competencia: Utiliza los símbolos y sus propiedades para soluciones. Implementa los conjuntos
y mapas como estructuras que permiten la manipulación de datos.
RESUMEN
En el presente trabajo de investigación se abordan los principales temas de esta unidad, cada uno
de ellos vistos en clases o propuestos en el temario, estos temas son de gran importancia conocerlos
y abordarlos a profundidad debido a que teniendo claro lo que es el concepto, es más fácil realizar
los ejercicios propuestos, así como el proyecto.
También se incluye el apartado de actividades, en donde cada una de estas investigaciones son
ejemplificadas con el objetivo de que quede más claro su uso, es decir, se muestran ejercicios para
la creación de símbolos, un archivo en formato scss, entre otras cosas más, así también, en el
apartado de resultados, se muestran imágenes que comprueban que las actividades realizadas son
verdaderas y regresan lo esperado.
En este mundo de la programación, los símbolos desempeñan un papel importante, estos símbolos
son un tipo de dato primitivo en JavaScript que se introdujo en ECMAScript 6. Están diseñados para
representar valores únicos e inmutables, lo cual los hace útiles en situaciones en las que se requiere
de una única clave en objetos, por ejemplo, en la creación de propiedades de objetos o la
implementación de mecanismos de ocultamiento de datos.
Los símbolos son creados utilizando la función Symbol () y pueden o no tener un identificador para
describir su propósito, lo cual, aunque dos símbolos tengan el mismo identificador siguen siendo
diferentes entre sí.
Por otro lado, Sass y SCSS son preprocesadores de CSS que ofrecen una sintaxis extendida y
funcionalidades adicionales para mejorar la eficiencia en el desarrollo web. Dichos preprocesadores
permiten a los desarrolladores escribir estilos de una manera más organizada, proporcionan
características como variables, anidación de reglas, mixins, herencia, entre otros más.
Sass utiliza una sintaxis más concisa y utiliza sangrías y la indentación para estructurar el código
CSS, mientras que SCSS utiliza una sintaxis más similar a la del CSS tradicional, con llaves y punto
y coma. Cualquiera de las dos se debe compilar antes para que queden en un formato CSS estándar
y se puedan implementar en las páginas web.
En conjunto, estos conceptos son fundamentales en el desarrollo web, con los cual se puede mejorar
de manera significativa la calidad y la facilidad de mantenimiento del código.
63
MARCO TEÓRICO
Investigar los símbolos en JavaScript y sus propiedades, relacionando su uso

con ejemplos
“Symbol es un tipo de datos cuyos valores son únicos e inmutables. Dichos valores pueden ser
utilizados como identificadores (claves) de las propiedades de los objetos. Cada valor del tipo Symbol
tiene asociado un valor del tipo String o Undefined que sirve únicamente como descripción del
símbolo.” 14
Estos símbolos son un tipo de datos primitivo que se introdujeron en ECMAScript 6, que sean
primitivos significan que están en el nivel de los String, Number, Boolean y más.
El tipo Symbol permite obtener valores que no pueden volver a ser creados, es decir, son
identificadores únicos e inmutables. Cada vez que se crea uno nuevo, es completamente diferente y
no se compara con ningún otro símbolo, incluso si se crean a partir del mismo valor.
Un valor de este tipo puede ser creado usando Symbol ().
PROPIEDADES
● Unicidad: Cada símbolo es único, lo que significa que dos símbolos con el mismo nombre no son
iguales.
● Inmutabilidad: Los símbolos son inmutables, lo que significa que no se pueden cambiar una vez
creados. Lo que garantiza que su valor único no se modifique.
● Uso como propiedades de objetos: Los símbolos son utilizados como claves de propiedades de
objetos para evitar colisiones de nombres de propiedades. Esto resulta útil para agregar metadatos
o propiedades personalizadas a objetos sin preocuparse por sobrescribir las propiedades existentes.
MÉTODOS
● Symbol.for(key): Crea un símbolo global compartido que se almacena en un registro global y se

puede acceder mediante su clave.
14
Fernández, G. (2021, 13 diciembre). Javascript. ¿Conoces el tipo Symbol? - Gerardo Fernández -
Medium. Medium. https://latteandcode.medium.com/javascript-conoces-el-tipo-symbol-
197c8338924a
64
● Symbol.keyFor(sym): Devuelve la clave asociada a un símbolo global registrado mediante
Symbol.for().
● Object.getOwnPropertySymbols(obj): Devuelve un array de todos los símbolos propios de un

objeto.
● Reflect.ownKeys(obj): Devuelve un array con todas las claves (símbolos y cadenas) de un objeto.
SASS
Sass por siglas en ingles Syntactically Awesome Stylesheets (Hojas de Estilos Sintácticamente
Impresionantes). “Es un preprocesador CSS, es una herramienta que nos permite generar, de
manera automática, hojas de estilo, añadiéndoles características que no tiene CSS, y que son
propias de los lenguajes de programación, como pueden ser variables, funciones, selectores
anidados, herencia, etcétera.” 15
Con estas características se permite que el CSS generado sea más fácil de mantener y más
reutilizable. Sass se puede decir que es como un tipo CSS, pero con superpoderes por todas las
posibilidades que ofrece, es un lenguaje de prolongación CSS de un grado más profesional, maduro,
estable y potente del mundo.
CARACTERÍSTICAS
● Variables
Se pueden definir variables para almacenar valores reutilizables, como colores, tamaños de fuentes
y márgenes. Lo cual facilita la actualización y la consistencia de los estilos en todo el proyecto.
● Anidación
Se pueden anidar selectores CSS dentro de otros, lo cual se da de una forma más visibles una
estructura jerárquica del HTML. Con esto se ayuda a mantener el código más organizado y se evita
la repetición de selectores.
● Mixins
15
Jiménez, J. D. P. (2023, 14 abril). Qué es SASS: ventajas, desventajas y ejemplos de desarrollo.
OpenWebinars.net. https://openwebinars.net/blog/que-es-sass-ventajas-desventajas-y-ejemplos-
de-desarrollo/
65
Son fragmentos de código que se definen con la norma @mixin seguido del nombre, posteriormente,
se pueden emplear con la regla @include más el nombre establecido. Un mixin viene siendo una
función en otro lenguaje de programación, permite reutilizar secciones de código escribiendo
funciones con parámetros.
● Herencia
Se pueden definir estilos comunes en un selector base y después heredarlos en otros selectores,
con esto se reduce la necesidad de duplicar código.
● Importación
Por medio de la norma @import es posible dividir el código CSS en diferentes archivos y después
importarlos en un solo archivo, con esto, se facilita la gestión y la organización del código.
● Rapidez
Al implementar Sass, se ahorra mucho tiempo porque es posible acortar el código que se debe de
escribir, así como el número de archivos a implementar, por lo tanto, se aumenta la productividad.
VENTAJAS
• Reduce el tiempo para crear y mantener el CSS.
• Permite tener una organización modular de los estilos, lo cual es de ayuda para proyectos
grandes.
• Proporciona estructuras avanzadas de un lenguaje de programación, como variables, listas,

funciones y estructuras de control.
• Permite generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto
en desarrollo como en producción, además es de una forma muy fácil.
• Permite vigilar los ficheros, de tal manera que, si ha habido un cambio en la hoja de estilos,
se regenera automáticamente (modo watch).
DESVENTAJAS
• Se debe de aprender a utilizar una nueva herramienta, lo que para algunos supone una
desventaja.
66
• Hay un tiempo de consumo en el proceso de generación o compilación del CSS, sobre todo
si es el archivo SCSS es muy grande.
• Tiene una sintaxis más compleja que CSS.
SCSS
Es una extensión del lenguaje CSS que agrega funcionalidad y características adicionales para
mejorar la escritura y gestión de estilos en proyectos web. En estos archivos se utilizan llaves ({}) en
lugar de sangrías. Estos archivos se almacenan con la extensión .scss.
Es recomendable utilizar este tipo de archivos en los diseños que son bastantes grandes, en lugar
de CSS, dado que en SCSS se utilizan variables, anidaciones, mezclas, importaciones y herencia
de selectores en el desarrollo, las anidaciones ofrecen la ventaja de que el diseño sea mucho más
fácil.
Este tipo de archivos no se incluyen directamente en un documento HTML como se hace con CSS.
Los archivos SCSS son convertidos a archivos CSS, esto se hace por medio de un mapeo que ofrece
Sass.
Las características que ofrece el utilizar este tipo de archivos son las mismas que ofrece Sass, que
son el uso de variables, anidamiento, mixins, e importación de archivos.
67
ACTIVIDADES

con ejemplos
Creando un Symbol
const miPrimerSymbol = Symbol();
Con un parámetro
Se le puede pasar un string para crearlo, lo cual da como resultado el símbolo. Ver figura 1.1.
const miPrimerSymbol = Symbol('hola');

console.log(miPrimerSymbol);
Cada vez que se invoque la función Symbol () se obtendrá un identificador único que será diferente
de cualquier otro Symbol creado anteriormente o posteriormente. Por ejemplo:
console.log(Symbol() === Symbol ());
Devuelve un false (Ver figura 1.2) dado que no son iguales.
Se tiene otro ejemplo, en donde se crean Symbol con el mismo valor, pero al compararlos se
devuelve un false. Ver figura 1.3.
const a = Symbol('a');;
const otraA = Symbol('a');
console.log(a === otraA);
Acceder a Symbols creados con anterioridad
Con el método Symbol.for(key) se puede crear un Symbol asociado a la clave pasada o recuperar el
mismo del registro de Symbols. Devolverá un true, debido a que se esta haciendo referencia. Ver
figura 1.4.
const hello = Symbol.for('hello');

const hello2 = Symbol.for('hello');
68
console.log(hello === hello2);
En caso de que no se emplee la función Symbol.for, devolverá un false. Ver figura 1.5.
const hello = Symbol('hello');

const hello2 = Symbol.for('hello');
console.log(hello === hello2);
Symbols predefinidos
JavaScript tiene definidos algunos Symbols dentro de la clase Symbol que son empleados para
proporcionar diferentes características que no eran accesibles a los desarrolladores antes de la
llegada de ES6.
El más conocido es Symbol.iterator, el cual permite acceder al iterador por defecto de un objeto. Ver
figura 1.6.
const arr = [1, 2, 3];

const iterator = arr[Symbol.iterator]();
console.log(iterator.next());
Uso de SCSS
Prueba.html
Primeramente, se crea un documento HTML llamado prueba.html, el cual contiene una etiqueta de
texto y dos botones cada uno con sus clases. Ver figura 2.1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="prueba.css">
<title>Document</title>
</head>
<body>
<h1>Hola mundo</h1>
<button class="boton1"> Presiona </button>
69
<button class="boton2"> Vuelve a presionar </button>
</body>
</html>
Prueba.scss
Este archive contiene cuatro variables, dos son para almacenar colores, una es para el margen y la
otra para el tamaño de letra.
Se declara el estilo para el boton1, en donde se le aplica como color de fondo el color primario, a la
letra un color blanco, se le da una separación interna de acuerdo a la variable margin y un tamaño
de letra de acuerdo a la variable correspondiente. Dentro de él se hace una anidación para que
cuando se pase el mouse sobre el botón cambie de color a color secundario. Ver figura 2.2 y 2.3.
$color-primario: #2b9de9;
$color-secundario: #7cdaf1;
$margin: 10px;
$font-size: 16px;
.boton1 {
background-color: $color-primario;
color: #fff;
padding: $margin * 2;
font-size: $font-size;
&:hover {
background-color: $color-secundario;
}
}
Se crea un mixin para hacer botones redondeados, primero se declara el mixin el cual recibe dos
parámetros, el color y el padding, dentro de él se declara el color de fondo con el parámetro color, el
color de la letra es blanco, se le asigna un redondeado al botón y la separación interna es igual al
parámetro.
Al boton1 y boton2 se les incluye este mixin con sus parámetros correspondientes. Ver figura 2.4.
/* Mixins */
@mixin boton-redondeado($color, $padding) {
background-color: $color;
70
color: #fff;
border-radius: 5px;
padding: $padding;
}
.boton1 {
@include boton-redondeado($color-primario, 10px);
}
.boton2 {
@include boton-redondeado($color-secundario, 15px);
}
71
RESULTADOS

con ejemplos
Muestra del Symbol. Figura 1.1.
Figura 1.1.
Comparación de Symbol. Figura 1.2 y 1.3.
Figura 1.2.
Figura 1.3.
Uso del Symbol.for(key). Figura 1.4.
Figura 1.4.
No utilizando el Symbol.for. Figura 1.5.
Figura 1.5.
Symbol.iterator. Figura 1.6.
Figura 1.6.
72
Uso de SCSS
Página sin estilos. Figura 2.1.
Figura 2.1.
Estilos al botón 1.
Botón normal. Figura 2.2.
Figura 2.2.
Al pasar el mouse. Figura 2.3.
Figura 2.3.
Uso de mixins.
Las esquinas de los botones se vuelven redondeadas. Figura 2.4.
73
Figura 2.4.
74
CONCLUSIONES
En conclusión, los símbolos en JavaScript, así como los preprocesadores de CSS como Sass y
SCSS, tiene un papel fundamental en el desarrollo web. Es por esto que con estas investigaciones
realizadas queda más claro cada uno de los conceptos, por lo tanto, los conocimientos han
aumentado de tal manera que ya se tiene un base para los ejercicios, prácticas a realizar.
Así también, con los ejercicios realizados para ejemplificar estas investigaciones, los conceptos son
más entendibles, debido a que viendo el ejemplo con lo que se dice en el concepto, se ve cómo es
que se relacionan y tiene una coherencia entre sí.
Con esto, se puede decir que los símbolos ofrecen una forma eficaz de crear valores únicos e
inmutables, lo cual es esencial para la privacidad de datos y la prevención de colisiones en
propiedades de objetos. La capacidad que tienen para representar propiedades privadas en objetos
es particularmente útil en la programación orientada a objetos.
Además, Sass y SCSS son herramientas que mejoran la escritura y el mantenimiento de estilos en
CSS. Ofrecen características como variables, anidaciones, mixins, herencia, por lo tanto, facilitan la
creación de estilos más organizados, mantenibles y eficientes. Estas características ayudan a los
desarrolladores a reducir la duplicación de código, mantener la consistencia en el diseño y aumentar
la legibilidad del código CSS.
Aparte de la importancia que tienen en el desarrollo web, es fundamental que tanto los símbolos
como Sass y CSS son parte de las tendencias que se encuentran en constante evolución en el
mundo de la programación y el diseño web. Conforme las tecnologías van avanzando, es esencial
mantenerse actualizado con las mejores prácticas y las nuevas características que van surgiendo en
dichas áreas.
Es importante destacar que los símbolos y los preprocesadores no solo son herramientas técnicas,
sino que también fomentan la colaboración en equipos de desarrollo. La utilización de símbolos para
propiedades privadas y el uso de preprocesadores para mantener un código CSS limpio y
estructurado, lo cual facilita el trabajo en equipo y la escalabilidad en los proyectos web.
Comprender el funcionamiento de cada uno de estos conceptos y utilizarlos de manera efectiva,

puede mejorar la calidad, la eficiencia y la colaboración en los proyectos de desarrollo web, con lo
cual, se contribuye a la creación de sitios web y aplicaciones más sólidas y atractivas para los
usuarios. Estar en constante actualización con las últimas tendencias, es un punto clave para el éxito
dentro del campo del desarrollo web.
75
REFERENCIAS
Admin. (2021, 5 diciembre). DOMINICODE.COM. DOMINICODE.COM.

https://dominicode.com/diferencias-entre-css-vs-scss/
Fernández, G. (2021, 13 diciembre). Javascript. ¿Conoces el tipo Symbol? - Gerardo Fernández -

Medium. Medium. https://latteandcode.medium.com/javascript-conoces-el-tipo-symbol-
197c8338924a
Formato de archivo SCSS - Hoja de Estilo en cascada SASS. (2019, 11 octubre).

https://docs.fileformat.com/es/web/scss/
Jiménez, J. D. P. (2023, 14 abril). Qué es SASS: ventajas, desventajas y ejemplos de desarrollo.

OpenWebinars.net. https://openwebinars.net/blog/que-es-sass-ventajas-desventajas-y-ejemplos-
de-desarrollo/
Sass. (s. f.). Desarrollo Web. https://desarrolloweb.com/home/sass
Symbols en JavaScript. ¿Qué son y para qué sirven? (2022, 20 diciembre). midu.dev.
https://midu.dev/javascript-symbols-que-son-para-que-sirven/
Unir, V. (2023, 9 enero). ¿Qué es SASS y cómo aprenderlo? UNIR.

https://www.unir.net/ingenieria/revista/que-es-sass/
76

Investigaciones

Cargado por

Copyright:

Formatos disponibles

Investigaciones

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Investigaciones

Cargado por

Copyright:

Formatos disponibles

Instituto Tecnológico de La Piedad

División de Estudios Profesionales

LA PIEDAD, MICHOACÁN 05 SEPTIEMBRE DEL 2023

Av. Tecnológico # 2000, Meseta de los Laureles, C.P. 59370, Apartado

Nombre (s) de los estudiantes:

Numero (s) de control:

Tiempo de evaluación: Sumativa

CATEGORÍA EXCELENTE NOTABLE BUENO SUFICIENTE INSUFICIENTE

Organizació La información La La La información La información

Trabajo en La carga de La carga de La carga de La carga de La carga de trabajo

Nombre del estudiante:

Tiempo de evaluación: Sumativa

Categoría Sobresaliente Bueno Regular Pobre No aceptable

El programa En algunos Sólo funciona En algunos

Estructuración Si utiliza En algunos No tiene No tiene sangría El código está

Documentación La presentación Le faltan La presentación No tiene No es aceptable

Unidad 1 Introducción y Funciones del ECMAScript 6 .......................................................................2

ACTIVIDAD 1. Investigar le evolución del estándar ECMAScript ................................................... 2

ACTIVIDAD 3. Realizar ejercicios para la declaración de constantes, variables en ciclos y

ACTIVIDAD 5. Implementar el uso de Plantillas literales (Literal Templates)............................... 18

ACTIVIDAD 6. Investigar el funcionamiento del parámetro REST ............................................... 21

ACTIVIDAD 7. Realizar ejercicios para implementar funciones anónimas ................................... 26

ACTIVIDAD 8. Conocer el funcionamiento del operador “Spread” ............................................... 28

ACTIVIDAD 9. Conocer las diferencias entre “Spread” y “Rest” .................................................. 30

Uso de arreglos ............................................................................................................................ 32

JavaScript es un lenguaje de programación utilizado ampliamente en el ámbito de la programación,

ACTIVIDAD 1. Investigar le evolución del estándar ECMAScript

El trabajador y programador Brendan Eich de Netscape, desarrolló

el lenguaje “Mocha”, después se llamó LiveScript y finalmente

JavaScript. Esta es una marca registrada de Oracle.

La empresa Microsoft desarrolló su propia versión llamada JScript,

esto para evitar problemas legales.

JavaScript y Java no tienen nada en común. El nombre de

JavaScript se debe a que Java estaba en su mejor momento, por lo

cual por estrategia de marketing le pusieron así.

Netscape mandó el borrador de JavaScript a ECMA International

para su estandarización ECMA-262, esta edición fue adoptada en

junio de este año.

En Junio de 1997 se lanza al mercado la primera versión de

ECMAScript. Contenía características básicas como variables,

En junio de 1998 se lanza la segunda versión de ECMAScript, se le

hicieron algunos cambios leves, esto para estar al margen con el

estándar ISO/IEC 16262.

En Diciembre de 1999 sale la tercera versión, con cambios en el

manejo de excepciones try/catch, cadenas UNICODE, RegExp,

objetos de tipo Array.

Esta cuarta versión fue abandonada a causa de las diferencias

políticas por la complejidad del lenguaje.

En Diciembre de este año sale esta versión, con ella se

implementaron los gtters y setters, la librería de JSON, el strict

En Diciembre de este año sale la versión 5.1, la cual está alienada

al estándar ISO/IEC 16262:2011, tuvo cambios leves.

Fue una de las actualizaciones más significativas, introdujo clases,

módulos, arrow functions, iteradores for/of loops, hashmaps, sets y

Esta versión introdujo el método Array includes() y la

Fue lanzada en Junio de este año, introdujo los constructores

Conocida como ES2018, introdujo los operadores rest/spread,

iteración asíncrona, Promise.finally().

Conocida como ES2019, introdujo el flat(), flatMap(), trimStart(),

trimEnd(), optional error catch, Object.formEntries(),