EXAMEN

PRÁCTICO

ELOY
PÉREZ GÓMEZ

DESARROLLO
ENTORNO
CLIENTE

1
Actividad 1: HTML5 - CSS - Js - JQuery

Diseño el formulario con bootstrap

Y tengo su code js para que me cree la cookie o no

2
Funciona perfectamente.
Si no la marco

Si la marco.

Ahora tenemos que mejorarlo para usar https. Para ello, necesitaremos
hacer uso de un certificado de seguridad SSL.

Para ello, tendré que cambiar mi index.js para asociarle el SSL y ejecutar
con https.
Esto añado a mi index.js:

Y mi carpeta con lo necesario de los certificados:

3
Finalmente, me funciona.

y me almacena perfectamente:

4
Si lo queremos añadir en session storage es igual, sólo tendríamos que
cambiar el js.

Finalmente, funciona de lujo.

¿Qué diferencia hay en almacenarlo en cookie o en session?

Cookies: Son como pequeñas notas que puedes dejar en el navegador

del usuario. Puedes decirle a la nota cuánto tiempo quieres que
permanezca pegada, incluso después de que cierra su navegador. Pero ten
en cuenta que hay un límite en el tamaño de la nota, y estas notas se
envían automáticamente al servidor cada vez que visitas una página.

Session Storage: Es como tomar notas en un papel que solo existen

mientras el usuario está mirando tu sitio web. Cuando cierra la ventana
del navegador, tiras el papel. Puedes escribir más en este papel que en
una cookie, pero no lo puedes compartir con otros papeles (ventanas del
navegador) ni con el servidor. Es solo para cosas temporales mientras el
usuario está en tu sitio web.

5
Para gestionar esta aplicación con JQuery, primero que nada, tendremos
que añadir al head la línea que nos conecta.

Después, cambiaremos nuestro script para hacerlo con JQuery.

Y funciona perfectamente.

6
Actividad 2: HTML5 - CSS - TypeScript - POO

Para ello creo la clase Polígono (que va a ser la padre para que el resto
herede):

Después las tres clases de figuras:

Triángulo.

7
Cuadrado.

Pentágono.

8
También tengo que crear el formulario para que me pregunte las cosas:

Y en caso de que sea triángulo tendré indicar la altura, o si es pentágono,

el apotema. Lo hago con js directo en el code.

9
También tendré que mostrar los datos. Para ello creo una función en mi
archivo ts para que cuando yo presione el botón de enviar el formulario,
me muestre una ficha con los datos y los cálculos.

Cómo el code es largo, lo divido en varias capturas.

10
Finalmente, tendré que compilar el archivo ts mío para usarlo en HTML,
ya que no se puede usar directamente el archivo.ts

Ejecutamos el proyecto con live server:

Lo relleno con los datos de un Pentágono por ejemplo:

11
Actividad 3: Programación asíncrona

Pues creo un formulario en HTML:

Y el code de consumo para cada uno:

Callback.

Promise.

12
Fetch.

Async/Await.

La función fetchAPI que utilizan todas y el handleApiResponse.

13
Si ponemos la api, me muestra los resultados en pantalla cuando le doy al
botón.

Diferencias entre las cuatro opciones:

- Callback: Usa funciones de retorno de llamada, pero puede generar

código anidado complejo.

- Promise: Proporciona una estructura más clara para operaciones

asincrónicas, facilitando el manejo de errores.

- Fetch: Una API moderna para solicitudes HTTP asincrónicas, devuelve

Promesas y es común para obtener recursos desde una API.

- Async/Await: Una sintaxis moderna que simplifica el manejo de

Promesas, facilitando la lectura del código asincrónico.

14
Para mostrar los datos en una tabla adecuadamente, sólo tendríamos que
cambiar el handleApiResponse:

15
Y me muestra el resultado mejor que bien.

16
Para mostrar las imágenes de la API de dummyjson, cambié el
handleApiResponse.

17
Pero aún así no he conseguido que me muestre cualquier otra API en
tabla y la de dummy sus imágenes en galería, pero si he conseguido que
por lo menos me la consuma y me la pinte.

18
Actividad 4: Programación Funcional

Diseño el formulario:

Y con el siguiente code lo hacemos funcional:

19
Funciona perfectamente.

Hay

Funciones puras como:

Funciones anónimas como:

De primer nivel (no están dentro de otras):

20
Por último, para mostrar el tiempo que tarda en ejecutarse el programa,
usaremos las siguientes líneas:

* Código *

* El code lo muestra en pantalla *

Resultado:

21