Laboratorio 1: Computación en El Cliente Web

2022 Laboratorio 1
Computación en el cliente web
Carlos Elrond Limón Olvera

UNIVERSIDAD INTERNACIONAL DE LA RIOJA - UNIR
Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Limón Olvera
31/01/2022
Web Nombre: Carlos Elrond
Contenido
Objetivos ................................................................................................................................................ 2
Descripción de la Actividad ................................................................................................................. 2
Herramientas a Utilizar ................................................................................................................... 3
Desarrollo del Laboratorio .................................................................................................................. 4
Ejercicio 1: Resolución del ejercicio 2005 ..................................................................................... 7
Ejercicio 2: Resolución del ejercicio 2006 .................................................................................. 11
Ejercicio 3: Resolución con Plugin de JQuery (antes de 2014) ................................................ 14
Ejercicio 4: Resolución en 2014.................................................................................................... 17
Fetch desde Node.js.................................................................................................................... 19
Ejercicio 5: Componentes Web ..................................................................................................... 22
Ejecución de Aplicación Web .................................................................................................... 27
Laboratorio. Computación en el Cliente Web

1
31/01/2022
Objetivos
Trabajar con estándares web relacionados con conexiones AJAX, funciones asíncronas y
componentes.
Desarrollar el laboratorio tal y como se explica durante la sesión y narrar cómo se ha hecho,
siguiendo para ello las instrucciones de este documento. Si no puedes asistir a la sesión en
directo, recuerda que siempre la tienes a tu disposición como grabación.
Descripción de la Actividad
En este laboratorio vamos a realizar una sencilla petición mediante estándares web y vamos a
representar los datos obtenidos en una página de manera limpia. Iremos complicando y
actualizando esta petición de datos para que cada vez se acerque más a la manera actual de
realizarse en la práctica. Es decir, repasaremos cada una de las maneras de hacer peticiones
AJAX desde la antigüedad, hasta nuestros días.
Con más detalle, emplearemos, de manera escalonada, estas tecnologías de comunicación

entre clientes web y servidores
• El objeto XMLHttpRequest.
• Las funciones AJAX del archiconocido framework jQuery.
• Un plugin específico para jQuery creado por el mantenedor del servicio al que nos
vamos a conectar.
• Por último, un componente web moderno (web component) desarrollado por un
tercero que nos permitirá realizar peticiones parecidas, pero de manera increíblemente
elegante.

2
31/01/2022
Herramientas a Utilizar
Visual Studio Code o VS Code, un editor de código que con el paso del tiempo se ha vuelto
amplio debido a sus extensiones, este lo podemos bajar directamente desde la página oficial:
https://code.visualstudio.com/#alt-downloads para el sistema operativo que tengamos.
JQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones. Hace que cosas
como el recorrido y la manipulación de documentos HTML, el manejo de eventos, la animación
y Ajax sean mucho más simples con una API fácil de usar que funciona en una multitud de
navegadores, la utilizaremos bajando el script de la URL https://code.jquery.com/jquery-
3.6.0.min.js y colocándola en nuestro proyecto.
Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto

para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía,
formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en
HTML y CSS, así como extensiones de JavaScript adicionales. La utilizaremos referenciando
los estilos mediante la URL
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css y la colocaremos
en las páginas de nuestro proyecto.
Node JS es un motor javascript para el servidor con muchas utilidades, una de ellas son los
paquetes de “node” a través de su repositorio de software centralizado llamado NPM.
Este paquete lo podemos bajar directamente desde la página oficial

https://nodejs.org/en/download/current/ para el sistema operativo que tengamos
• Node-fetch: Es un módulo que permite realizar peticiones http mediante el uso de

promesas implementado el API Fetch y este lo instalamos en una terminal de CMD o
PowerShell mediante el comando: npm install node-fetch
Fig. 1 – VS Code Fig. 2 - JQuery Fig. 3 - Bootstrap Fig. 4 – Node JS

ICNDB.com es una base de datos vía API RESTful que permite obtener bromas sobre Chuck
Norris en un formato JSON, a través del servicio http://api.icndb.com/jokes/random/ y sus
múltiples opciones de consumo.

3
31/01/2022
Desarrollo del Laboratorio

Comenzaremos por crear un directorio llamado “UnirLaboratorio1” con 3 carpetas
llamadas: ejercicios, imágenes y scripts, junto a eso, para darle forma y presentación a nuestro
proyecto, crearemos un archivo con extensión HTML llamado “índice”, como a continuación
se muestra:
Fig. 5 – Aplicación Web, Proyecto Inicial.
En este archivo “Indice.html” crearemos una interfaz donde podamos acceder a nuestros
ejercicios, para esto utilizaremos el tag HTML con sus elementos HEAD y BODY, seguido
haremos referencia a nuestras herramientas de “Bootstrap” y “JQuery” en nuestro
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Chuck Norris - API</title>

<script src="scripts/jquery-3.6.0.min.js"></script>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
" />
</head>
Fig. 6 – Índice, contenido HEAD
Con esto podremos ocupar los estilos y función que requiramos de las herramientas, esta
función la ocuparemos en todos nuestros archivos HTML, ahora en el elemento
BODY vamos a ocupar algunos elementos DIV que utilizan estilos para darle presentación a
las opciones de todos los ejercicios que desarrollaremos, comenzaremos por crear un DIV con
el estilo “container” y ahí comenzaremos a agregar todo nuestro código.

4
31/01/2022
Agregaremos un encabezado con una breve descripción del laboratorio:


<div class="row">
<div class="col-md-12">
<h2 class="mt-3">Laboratorio: Computación en el cliente
web</h2>
<p>En este laboratorio vamos a realizar una sencilla
petición mediante estándares web y vamos a representar los datos obtenidos en
una página de manera limpia.
Iremos complicando y actualizando esta petición de datos
para que cada vez se acerque más a la manera actual de realizarse en la
práctica.
Es decir, repasaremos cada una de las maneras de hacer
peticiones AJAX desde la antigüedad, hasta nuestros días</p>
</div>
</div>
Fig. 7 – Índice, contenido BODY, encabezado página
Este acceso tendrá un elemento “h5” con el título del Ejercicio, un elemento “p” con una breve
descripción y un elemento “a” con el enlace que redirecciona al mismo, ubicado en la carpeta
de “ejercicios”.


<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Ejercicio 1</h5>
<p class="card-text">Uso del objeto XMLHttpRequest
para consumo de API</p>
<a href="ejercicios/x.html" class="btn btn-
primary btn-lg">Ir a</a>
</div>
</div>
</div>
</div>
Fig. 8 – Índice, contenido BODY, acceso a ejercicio
Una vez definido nuestros elementos por utilizar, crearemos 5 accesos que nos redireccionaran
a nuestros 5 ejercicios del laboratorio, los accesos los iremos cambiando conforme avancemos
y nuestra página se verá de la siguiente forma:

5
31/01/2022
Fig. 9 – Índice, Página principal
Para poder navegar en los diferentes ejercicios, deberemos de colocar un elemento “a” con la
dirección de nuestro índice dentro del elemento BODY en cada página HTML que tengamos
que crear:


<div class="container">
<div class="row">
<a href="../indice.html" class="btn btn-primary btn-
lg">Regresar al indice</a>
<hr>
</div>
</div>
</div>
Fig. 10 – Regreso al Índice

6
31/01/2022
Ejercicio 1: Resolución del ejercicio 2005
El objeto XMLHttpRequest nos permite hacer peticiones AJAX de manera bastante cómoda,
esta forma se ocupaba mucho en el 2005, por lo que para ocuparlo necesitaremos agregar
archivos un archivo de tipo HTML a nuestra carpeta de ejercicios, un archivo tipo JS a nuestra
carpeta de scripts y una imagen a nuestra carpeta de imágenes dentro de nuestro proyecto.
Fig. 11 – Explorador, Ejercicio2005
Nuestro archivo principal, ahora llamado “Ejercicio2005.html” deberá de referenciar el

archivo “ejercicio1.js” para ocupar las funciones del consumo del API de ICNBD. Al igual que
el índice, deberemos hacer referencia a JQuery y a Bootstrap.

7
31/01/2022
<!DOCTYPE html>
<html lang="es">
<head>
/>
<title>Laboratorio 1 - Ejercicio 2005</title>
<script src="../scripts/jquery-3.6.0.min.js"></script>
" />
</head>
<body>
<script src="../scripts/ejercicio1.js"></script>


</body>
</html>
Fig. 12 – Ejercicio2005, Encabezado y Cuerpo
Utilizamos la sentencia “script” donde el atributo “src” hace referencia a la ubicación de

nuestro archivo “ejercicio1.js” de esta forma ocupar sus recursos.
//Se crea la instancia del objeto para la petición

xmlhttp = new XMLHttpRequest();
//Se utiliza el método GET y la URL para la petición
xmlhttp.open('GET', 'http://api.icndb.com/jokes/random/', true);
//Se crea función de asignación de datos
xmlhttp.onreadystatechange = function(){
//Se obtiene el valor de la respuesta
var textoChiste = JSON.parse(this.response).value.joke;
//registra el resultado obtenido
console.log('chiste recibido: ' + textoChiste);
//Obteniendo elementos H1 de la página
var h1s = document.getElementsByTagName('h1');
//Asignando Valor al 1er elemento encontrado
h1s[0].innerHTML = textoChiste;
}
//Enviando información
xmlhttp.send();
Fig. 13 – Ejercicio2005, contenido de archivo JS

8
31/01/2022
Se realiza la petición mediante el objeto XMLHttpRequest y se muestra en el primero

elemento “h1” que se recuperar del HTML. Ahora, para hacer presentable el ejercicio,
utilizaremos el siguiente código para mostrar los datos en este y ejercicios posteriores.


<div class="mt-3"></div>
<h2>Ejercicio 1.</h2>
<table class="table">
<thead>
<tr>
<th>Resolución: 2005</th>
<th>Desrcipción: Obten el consumo mediante
XMLHttpRequest()</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="../imagenes/ejercicio001.jpg"
class="img-thumbnail" alt="" >
</td>
<th>
<div class="jumbotron jumbotron-fluid">
<h1 class="display-4">Obtiene Chiste</h1>
<p class="lead">Mensaje obtenido desde
'http://api.icndb.com/jokes/random/'.</p>
</div>
</div>
</th>
</tr>
</tbody>
</table>
</div>
</div>
Fig. 14 – Ejercicio2005, elemento BODY con maquetado

9
31/01/2022
Como nos lo pide el ejercicio, debemos de mostrar el título donde se mostrará nuestro “chiste”
en el estilo “jumbotron” de Bootstrap, de esta forma, nos devolverá el siguiente resultado en
nuestro navegador:
Fig. 15 – Ejercicio2005, Navegador

10
31/01/2022
Ejercicio 2: Resolución del ejercicio 2006

A principios de 2006 nació jQuery de la mano de John Resig. Todo empezó en un sencillo e
inocente post en su blog. Entre otras muchas cosas increíbles, el framework jQuery incorpora
una nueva instrucción $.ajax(…) muy útil.
Fig. 16 – Explorador, Ejercicio2006
Este ejercicio ocupa una estructura similar a la del ejercicio anterior, únicamente cambia la
referencia hacia el archivo JS que vamos a ocupar, de la siguiente manera:

11
31/01/2022
<body>
<script src="../scripts/ejercicio2.js"></script>

<div class="mt-3"></div>
<thead>
<tr>
<th>Resolución: 2006</th>
<th>Desrcipción: Consumo de API con JQuery</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<th>
<h1 class="display-4">Obtiene Chiste</h1>
<p class="lead">Mensaje obtenido desde
'http://api.icndb.com/jokes/random/'.</p>
</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<a href="../indice.html" class="btn btn-primary btn-
lg">Regresar al indice</a>
<hr>
</div>
</div>
</div>
</body>
Fig. 17 – Ejercicio2006, Archivo HTML cuerpo
Así mismo, nuestro archivo “ejercicio2.js” ejecutará el siguiente código:

12
31/01/2022
//Utilizando JQuery en una función de carga

window.onload = function()
{
//Realiza la petición utilizando el método GET
$.get("http://api.icndb.com/jokes/random", (response) =>
{
//Obtiene el valor devuelto de la respuesta
var textoChiste = response.value.joke;
//Añadiendo valor al elemento h1
$('h1').text(textoChiste);
})
}
Fig. 18 – Ejercicio2006, Archivo JS
¿Qué diferencia existe con el código anterior?
La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento “h1” de toda la

página y en este, se les asigna el valor a todos los elementos de tipo “h1”.
Fig. 19 – Ejercicio2006, Navegador.
¿Qué ocurre si tenemos varios “tags” h1?
En todos ellos se agregaría el valor, debido a que así lo asignamos desde JQuery.

13
31/01/2022
Ejercicio 3: Resolución con Plugin de JQuery (antes de 2014)

jQuery no tardó en tener soporte para plugins (¡apenas unas semanas tras su nacimiento!).
Para ocuparlo, agregaremos nuestros 3 archivos, como lo hemos hecho con los ejercicios
anteriores:
Fig. 20 – Explorador, Ejercicio2014 con Plugin JQuery
La diferencia radica en que vamos a ocupar una librería más en nuestro elemento HEAD que
realiza el consumo de ICNDB mediante un Plugin, este lo encontraremos en la página:
http://code.icndb.com/jquery.icndb.min.js y lo que haremos será descargar el JS e importarlo
a nuestro proyecto en la carpeta de “scripts” e incluirlo en nuestro HTML.

14
31/01/2022
Fig. 21 – Explorador, Ejercicio2014, plugin ICNDB de JQuery
<head>
/>
<title>Laboratorio 1 - Ejercicio 2014</title>
<script src="../scripts/jquery-3.6.0.min.js"></script>
<script src="../scripts/jquery.icndb.min.js"></script>
" />
</head>
Fig. 22 – Ejercicio2014, Archivo HTML, elemento HEAD, Plugin ICNDB

{
//Invocando método getRandomJokes
$.icndb.getRandomJokes({
//Se obtiene 10 veces
number: 10,
//En caso de obtenerse exitosamente
success: (response) => {
//Por cada elemento se crea un elemento L1 y se añade al elemento
UL
response.forEach(element => { $("ul").append('<li class="list-
group-item">' + element.joke + '</li>'); });
}});
}
Fig. 23 – Ejercicio2014, Archivo JS
Cada resultado obtenido se añade a un elemento “li” dentro una lista “ul” de la página. Ahora
en nuestro HTML cambiaremos el elemento “h1” por el “ul” para hacer el enlace:

15
31/01/2022
<thead>
<tr>
<th>Resolución: 2014-1</th>
<th>Desrcipción: Consumo de API con Plugin de
JQuery</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<th>
<ul class="list-group"></ul>
</th>
</tr>
</tbody>
</table>
Fig. 24 – Ejercicio2014, Archivo HTML, elemento BODY, Lista UL
El elemento principal “ul” y los “li” llevan clases de estilos de Bootstrap, lo que nos da como
resultado la siguiente pantalla:
Fig. 25 – Ejercicio2014, Navegador

16
31/01/2022
Ejercicio 4: Resolución en 2014

A partir de finales de 2013 y predominantemente en 2014, contamos con el API fetch, que
permite hacer llamadas AJAX de manera muy limpia «a la jQuery».
Para implementar API Fetch, agregaremos nuestros 3 archivos, como lo hemos hecho con los
ejercicios anteriores y ocuparemos el diseño del HTML del ejercicio anterior, ya que como lo
solicita el ejercicio, necesitamos mostrar una lista de datos.
Fig. 26 – Explorador, Ejercicio2014 con API Fetch
Existen características de ICNDB que nos permiten obtener datos de distintas maneras, para
este ejercicio, utilizaremos la URL http://api.icndb.com/jokes/random/10 en nuestro archivo
JS, la variación que notamos es que al final de la dirección se encuentra el número “10”. Por lo
que nuestro script queda de la siguiente manera:

17
31/01/2022

{
//Declarando Arreglo de Peticiones
let endPoint = 'http://api.icndb.com/jokes/random/10';
//Realizando las 10 solicitudes
fetch(endPoint)
//Obteniendo Datos de la Petición
.then(respuesta => respuesta.json())
//Obteniendo Nodo de interes
.then(valor => valor.value)
//Mostrando Datos
.then(function(datos){
//Registrando datos en el registro
console.log(datos);
//Mostrando Datos
datos.forEach(element => { $("ul").append('<li class="list-group-
item">' + element.joke + '<span class="badge bg-info text-
dark">'+element.id+'</span></li>'); });
});
}
Fig. 27 – Ejercicio2014 API Fetch, Archivo JS
A diferencia del ejercicio anterior, mostramos la lista y un objeto “span” mostrando el ID.
Fig. 28 – Ejercicio2014 API Fetch, Navegador

18
31/01/2022
Fetch desde Node.js

El ejercicio nos pide replicar la funcionalidad desde la consola de Node JS, para esto tenemos
que configurar nuestro proyecto para que pueda código Javascript desde una terminal, para
esto ejecutaremos el comando “npm init -y” y nos creara nuestro archivo “package.json”
en nuestro proyecto:
Fig. 29 – Ejercicio2014 Node-Fetch, Configuración Proyecto
Seguido instalaremos la librería de “node-fetch” en nuestro proyecto, con el comando “npm

install node-fetch@^2.6.1”, utilizaremos una versión menor a la actual para este ejercicio,
junto con su dependencia “npm install --save-dev @types/[email protected]”:
Fig. 30 – Ejercicio2014 Node-Fetch, Instalación Herramientas

19
31/01/2022
Al terminar las instalaciones nuestro proyecto se verá de la siguiente forma, con la carpeta
“node_modules” que contendrá todo lo que necesita Node JS para ejecutar archivos JS y los
archivos “package” con la configuración de la ejecución:
Fig. 31 – Explorador, Ejercicio2014 Node-Fetch, Instalación
Nuestro archivo llamado “ejercicio5.js” en la carpeta de “scripts” contendrá lo siguiente:
//incluyendo Node-Fetch al Script

const fetch = require('node-fetch');
//Declarando Arreglo de Peticiones

let endPoint = 'http://api.icndb.com/jokes/random/10';
//Realizando las 10 solicitudes
fetch(endPoint)
.then(respuesta => respuesta.json())
//Obteniendo Nodo de interes
.then(valor => valor.value)
//Mostrando Datos
.then(function(datos){
//Mostrando Datos
datos.forEach(element => { console.log('ID: ' + element.id + ',
Descripcion: ' + element.joke); });
});
Fig. 32 – Ejercicio2014 Node-Fetch, Archivo JS

20
31/01/2022
El script nos mostrará una impresión de la consola donde se pueden apreciar el atributo ID y
la descripción JOKE en una cadena, ahora debemos de dirigirnos a la carpeta “scripts” con el
comando “cd scripts”, una vez ahí, ejecutaremos nuestro archivo JS con el comando:
“node .\ejercicio5.js” y nos desplegará lo siguiente:
Fig. 33 – Ejercicio2014 Node-Fetch, Resultado Consola
¿Qué es WHATWG?
El Web Hypertext Application Technology Working Group (Grupo de trabajo de tecnología de

aplicaciones de hipertexto web), es una comunidad de personas y empresas interesadas en la
evolución de HTML y las tecnologías conexas. El WHATWG fue fundado por integrantes de
Apple, la Fundación Mozilla y Opera Software, es una organización que mantiene y desarrolla
HTML y API’s para las aplicaciones Web. Antiguos empleados de Apple, Mozilla y Opera
establecieron el WHATWG en el 2004.
De acuerdo con su sitio web, WHATWG es una respuesta al W3C's (en-US) lento progreso en
los estándares Web, especialmente HTML, que el W3C dejó de desarrollar para concentrarse
en XHTML. El WHATWG mantiene especificaciones para HTML, DOM, y JavaScript
El WHATWG ha estado trabajando activamente en tres documentos:
• HTML 5 (anteriormente conocida como Aplicaciones Web 1.0) es la quinta versión del
HTML y ha sido adoptado por el W3C como punto de partida de la labor del nuevo
grupo de trabajo HTML.
• Web Workers, la cual define una API que permite utilizar ECMAScript en un CPU
multi-núcleo de manera más eficaz.
• Formularios Web 2.0, una actualización de los formularios HTML, la cual quedó
integrada en HTML5.

21
31/01/2022
Ejercicio 5: Componentes Web

Y por fin llegamos a la forma de resolver este ejercicio de la manera más elegante posible: con
Web Components. Vamos a usar el componente descrito aquí. Para instalarlo, vamos a utilizar
“bower”, abrimos una terminal de PowerShell o de CMD y ejecutamos el siguiente comando:
“npm install -g bower”
Una vez instalado, nos vamos a la terminal de nuestro proyecto y ejecutamos los siguientes
comandos:
• “bower install chuck-norris-joke” para instalar el componente Chuck-Norris-Joke.

• “bower install skeleton-framework” para instalar el framework de Skeleton.
Esto producirá que nuestro proyecto tenga el directorio “bower_components” y nuestros

componentes previamente instalados:
Fig. 34 – Aplicación Web, Componentes de Bower

22
31/01/2022
Despues, crearemos un archivo HTML llamado “EjercicioWebComponent.html” y un script

llamado”ejercicioWC.js” en sus respectivas carpetas, como lo hemos viniendo estructurando a
lo largo del laboratorio.
Fig. 35 – Explorador, EjercicioWebComponent
A diferencia de los ejercicios anteriores, el archivo HTML que ocuparemos, no tendrá

referenciado a Bootstrap, sino a Skeleton como recurso propio, tampoco será necesario que
ocupemos a JQuery, también haremos referencia al archivo “ejercicioWC.js” y vamos a definir
en el BODY el siguiente elemento:
<chuck-norris-joke></chuck-norris-joke> la función del componente web, es que

pueda ser usado como un elemento HTML. Le colocaremos el atributo “jsonapi” con la
dirección de ICNDB: https://api.icndb.com/jokes/random/10 que ocupamos en anteriores
ejercicios, después podremos colocar otros elementos que ayuden a la presentación de la
página de forma independiente al componente web, un encabezado y el regreso al índice:

23
31/01/2022
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Laboratorio 1 - Ejercicio Web Component</title>

<link rel="stylesheet" href="../bower_components/skeleton-
framework/dist/skeleton.css">

<script src="../scripts/ejercicioWC.js"></script>
</head>
<body>
<h1>Chuck Norris Joke</h1>
<h6>Componente Web de Javascript</h6>

<chuck-norris-joke
jsonapi="https://api.icndb.com/jokes/random/10"></chuck-norris-joke>
<div class="frame-container">
<div class="row">
<a href="../indice.html" class="button button-
primary">Regresar al indice</a>
</div>
</div>
</div>
</body>
</html>
Fig. 36 – EjercicioWebComponent, Archivo HTML que invoca el componente.
El ejercicio nos solicita la creación de una tabla donde imprima los datos obtenidos del API de
ICNDB, para que nuestro script defina este componente, nuestro archivo JS debe de contener
una clase que herede sus caracteristicas de HTMLElement:
class ChuckNorrisWebComponent extends HTMLElement {

constructor(){
super();
this._jsonapi = "null";
}
}
window.customElements.define('chuck-norris-joke', ChuckNorrisWebComponent);
Fig. 37 – EjercicioWebComponent, Archivo JS, Clase Principal
Nuestra clase debe de tener su constructor, debe de implementar “super();” y deberá tener
definido nuestro atributo “jsonapi”, al final de la clase utiliza el comando
“window.customElements.define(‘chuck-norris-joke’,ChuckNorrisWebComponent);”

24
31/01/2022
Esta última linea es la que se encarga de definir nuestro componente en la ventana donde lo
queremos invocar. Sin embargo, aún no terminamos, debemos de ocupar el método
“connectedCallback” que es el encargado de llamar los controles al momento de realizar la
solicitud a la página:
connectedCallback(){
//Declarando elemento de ShadowRoot y contenedor principal
let shadow = this.attachShadow({mode:'open'});
let respuesta = fetch(this.getAttribute('jsonapi')).then(r=>r.json())
respuesta.then(datos =>{
//Mostrando Datos
let cont = this.creaTabla(datos.value);
shadow.appendChild(cont);
})
.catch(e =>console.log(e));
}
Fig. 38 – EjercicioWebComponent, Archivo JS, método connectedCallback
Este método realiza la petición de datos vía “fetch” y los procesa en el método “creaTabla” que
solicita nuestros datos como parámetro de entrada y al final añade el elemento HTML obtenido
a nuestra variable “shadow” que es la encargada de mostrar nuestra construcción de elementos
de nuestra página, es muy importante que todo lo que obtengamos lo añadamos a este
elemento que se mostrará.
Después definiremos el método de “creaTabla” donde crearemos los elementos HTML de una
tabla normal (tbody, tr, th, etc) y asignaremos los datos y las columnas de forma dinámica:
creaTabla(datos){
let contenedor = document.createElement('div');
contenedor.className ='frame-container';
//Creando Estructura de la Tabla
let tabla = document.createElement('table'),
tr = tabla.insertRow(-1), //Fila Vacia
tbody = document.createElement('tbody');
//Definiendo Estilos
tabla.className = 'u-full-width';
tr.className = 'tr-container';
//Definiendo Columnas Dinamicas
let columnas = [];
for (let indice=0; indice<datos.length; indice++)
{
for (let llave in datos[indice])
{
//Validando Columna

25
31/01/2022
if (columnas.indexOf(llave)===-1){
columnas.push(llave);
}
}
}
//Añadiendo Columnas Obtenidas
for (let indice=0; indice<columnas.length; indice++)
{
//Creando Encabezado y Añadiendo Valor
let th = document.createElement('th');
th.innerHTML=columnas[indice];
tr.appendChild(th);
}
//Añadiendo Registros
for (let indice=0; indice<datos.length; indice++)
{
tr = tabla.insertRow(-1);
//Insertando Relación de Datos con las columnas
for (let idx=0; idx<columnas.length; idx++)
{
//Insertando Celda de Datos
let celda = tr.insertCell(-1);
celda.innerHTML = datos[indice][columnas[idx]];
}
}
contenedor.appendChild(tabla);
//Devolviendo Valor
return contenedor;
}
Fig. 39 - EjercicioWebComponent, Archivo JS, método CreaTabla
Utilizamos la sentencia “document.createElement” para definir elementos DOM de HTML

junto con “innerHTML” para definir el contenido, al igual que el método anterior, añadimos
los elementos creados con “appendChild” al elemento que se retornará.
Nota: no se ocupa la adición del elemento “chuck-norris-joke.html” por medio de la

importación:
<link rel="import" href="../bower_components/chuck-norris-joke/chuck-norris-

joke.html">

26
31/01/2022
Debido a que ocupa la referencia:
document.registerElement(‘chuck-norris-joke’, { prototype: HTMLChuckNorrisJokeElement

});
Y esta característica ya no se reconoce dentro de los estándares web relevantes. Por último,
procederemos a ejecutar nuestra forma y nos devolverá lo siguiente:
Fig. 40 – EjercicioWebComponent, Navegador
En base a los requerimientos solicitados, podemos apreciar que se construye una tabla de
HTML, que contiene 3 columnas (id, joke y categories), contiene la información obtenida del
API y la forma en general esta maquetada por los estilos de “skeleton”.
Ejecución de Aplicación Web

Para poder correr nuestra aplicación con nuestro componente, en necesario un servidor, para
esta ocasión se recomienda usar “http-server” que esta basado en Node JS, para esto vamos
a ejecutar el siguiente comando: “npm install http-server -g” en una linea de comandos de
CMD o PowerShell, después en una terminal dentro de nuestro proyecto ejecutamos el
siguiente comando: “http-server” y nos devolverá un estatus de nuestro servidor y las
direcciones donde podemos ver nuestra aplicación:

27
31/01/2022
Fig. 41 – Servidor “Http-Server” en linea
Al ingresar por las direcciones disponibles, nos aparecerá un índice con el directorio de nuestra
aplicación para que podamos navegar en el:
Fig. 42 – Directorio de la Aplicación desde “Http-Server”

28

Laboratorio 1: Computación en El Cliente Web

Cargado por

Copyright:

Formatos disponibles

Laboratorio 1: Computación en El Cliente Web

Cargado por

Información del documento

Descripción original:

Título original

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

Laboratorio 1: Computación en El Cliente Web

Cargado por

Copyright:

Formatos disponibles

2022 Laboratorio 1

Computación en el cliente web

Carlos Elrond Limón Olvera

Laboratorio. Computación en el Cliente Web

Con más detalle, emplearemos, de manera escalonada, estas tecnologías de comunicación

Laboratorio. Computación en el Cliente Web

Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto

Este paquete lo podemos bajar directamente desde la página oficial

• Node-fetch: Es un módulo que permite realizar peticiones http mediante el uso de

Fig. 1 – VS Code Fig. 2 - JQuery Fig. 3 - Bootstrap Fig. 4 – Node JS

Laboratorio. Computación en el Cliente Web

Desarrollo del Laboratorio

Fig. 5 – Aplicación Web, Proyecto Inicial.

Laboratorio. Computación en el Cliente Web

Agregaremos un encabezado con una breve descripción del laboratorio:

Laboratorio. Computación en el Cliente Web

Fig. 9 – Índice, Página principal

Laboratorio. Computación en el Cliente Web

Ejercicio 1: Resolución del ejercicio 2005

Fig. 11 – Explorador, Ejercicio2005

Nuestro archivo principal, ahora llamado “Ejercicio2005.html” deberá de referenciar el

Laboratorio. Computación en el Cliente Web

Utilizamos la sentencia “script” donde el atributo “src” hace referencia a la ubicación de

//Se crea la instancia del objeto para la petición

Laboratorio. Computación en el Cliente Web

Se realiza la petición mediante el objeto XMLHttpRequest y se muestra en el primero

Laboratorio. Computación en el Cliente Web

Fig. 15 – Ejercicio2005, Navegador

Laboratorio. Computación en el Cliente Web

Ejercicio 2: Resolución del ejercicio 2006

Fig. 16 – Explorador, Ejercicio2006

Laboratorio. Computación en el Cliente Web

Así mismo, nuestro archivo “ejercicio2.js” ejecutará el siguiente código:

Laboratorio. Computación en el Cliente Web

//Utilizando JQuery en una función de carga

¿Qué diferencia existe con el código anterior?

La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento “h1” de toda la

Fig. 19 – Ejercicio2006, Navegador.

¿Qué ocurre si tenemos varios “tags” h1?

Laboratorio. Computación en el Cliente Web

Ejercicio 3: Resolución con Plugin de JQuery (antes de 2014)

Fig. 20 – Explorador, Ejercicio2014 con Plugin JQuery

Laboratorio. Computación en el Cliente Web

Fig. 21 – Explorador, Ejercicio2014, plugin ICNDB de JQuery

//Utilizando JQuery en una función de carga

Laboratorio. Computación en el Cliente Web

Fig. 25 – Ejercicio2014, Navegador

Laboratorio. Computación en el Cliente Web

Ejercicio 4: Resolución en 2014

Fig. 26 – Explorador, Ejercicio2014 con API Fetch

Laboratorio. Computación en el Cliente Web

//Utilizando JQuery en una función de carga

Fig. 28 – Ejercicio2014 API Fetch, Navegador