Computación en el Cliente Web

Laboratorio: Computación en cliente web

Para el ejercicio propuesto previamente se tiene creada una carpeta en una dirección local del ordenador, y en el VS Code se la abre a dicha carpeta que para este caso se la ha nombrado como Laboratorio1, además en el VS Code se tienen instaladas unas extensiones que facilitaran el desarrollo del laboratorio que son: HTML Boilerplate, HTML Snippets y Prettier.

En este laboratorio se trabaja con el framework del navegador, todos los ejercicios son llamadas Ajax que están dentro de una página web y las llamadas Ajax son una API que ofrece el navegador a JavaScript, si JavaScript corriera en otro entorno que no fuera el navegador no tendría el acceso a estas llamadas Ajax.

El procesado de una página web es de arriba hacia abajo y por eso normalmente se coloca los scripts al final del body

Ejercicio1

Para este ejercicio se usa una función constructora XMLHttpRequest() que es parte de la API del navegador

Se sabe que es asíncrono porque en el tercer parámetro del método open se encuentra en true.

[pic 1]

Resultado ejercicio 1

[pic 2]

Ejercicio 2

Para este ejercicio se puede ver que se simplifica a la llamada y usando el signo de dólar $.

¿Qué diferencias ves con respecto al ejercicio anterior?

Se puede visualizar que la cantidad de código es menor, además ya no se usa varios métodos para llamar a la funcionalidad sino en uno solo. Se está usando una librería externa llamada jQuery.

 ¿Cómo simplifica la vida jQuery?

Simplifica la forma en la que realizamos tareas cómo seleccionar elementos, o realizar peticiones Ajax, además la forma de manipular el DOM: permiten por ejemplo cambiar el estilo, o añadir eventos de forma más sencilla.

Simplifica reemplazando jQuery por el símbolo del dólar ($)

Sin jQuery  🡪 $(document).ready(function() {});

Con jQuery  🡪 $(function() {});

[pic 3]

¿Qué ocurre si tenemos varios tags h1?

Como se puede observar al tener varios h1, todos son reemplazados por el mismo chiste y no como ocurría en el primer ejercicio que solo funcionaba con el primero.

[pic 4]

Ejercicio 3

En este ejercicio se importa directamente del API que expone icndb además se usa estilos propios de Bootstrap en las etiquetas

y

• [pic 5]

  Resultado Ejercicio 3

  [pic 6]

  ¿Cómo se escribían las funciones en las versiones de ECMAScript previas a la versión 6?

  Antes se usaba el operador function define una función dentro de una expresión.

  [pic 7]

  Ejercicio 4

  En el presente ejercicio se usa la función fetch que básicamente funciona como una promesa, el formato json en el que responde el servicio hace que recorramos el value y se imprima el joke que es el chiste, además para tener solo 10 chistes, se puede enviar como parámtero en la URL la cantidad.

  [pic 8]

  Resultado Ejercicio 4

  [pic 9]

  node – fetch

  Para usar esta funcionalidad, primero se procede a instalar el paquete mediante npm además se lo ejecuta sobre el servidor node y se obtiene el JSON.

  [pic 10]

  [pic 11]

  ¿Qué es el WHATWG? (organismo que, entre otras cosas, ha definido la API del método fetch).

  Está formada por personas que forman parte de empresas importantes que trabajan en el mercado de Internet, como Mozilla, Apple y Opera. Su interés es ayudar a la organización W3C para regular todos los estándares que forman parte de la Web, con especial énfasis en el HTML 5.

  Ejercicio 5

  Este ejercicio se realizó con Web Components y se usó el Github como CDN y con esto sólo tenemos que incluir este tag  en el fichero html.

...