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?

...