LaboratorioComputación en El Cliente Web

Laboratorio Computación en Cliente Web
Introducción
En este laboratorio vamos a realizar peticiones desde un cliente web a un servidor mediante estándares web,
las respuestas obtenidas serán mostradas en un navegador y se dará un paso a través de la historia de como
fue evolucionando la manera de realizar dichas peticiones .
Objetivos
1. Lograr el entendimiento de como se realizan peticiones con el objeto XMLHttpRequest .
2. Entender como se realizan peticiones con A JAX del framework jQuery.
3. Utilizar un plugin específico de jQuery para hacer peticiones a una API.
4. Utilizar un componente web moderno (web component) desarrollado por un tercero, que nos permitirá
realizar peticiones de una manera mucho más sencilla.
5. Ser capaz de crear y probar cada una de las formas anteriormente referenciadas pata realizar peticiones
Web.
Instalación de Programas
Instalar Visual Studio Code (VS Code)

Visual Studio Code es un editor de código fuente creado por Microsoft compatible con los sistemas
operativos: Windows , Linux y macOS, posee características como : soporte para la depuración de código,
puede ser integrado con un repositorio Git , resaltado de sintaxis, finalización inteligente de código,
fragmentos y refactorización de código. También es personalizable, por lo que los usuarios pueden cambiar el
tema del editor, los atajos de teclado y las preferencias. Es gratuito y de código abierto.
Para nuestro ejercicio VS Code además de cumplir el papel principal, lo utilizaremos como editor para nuestro
código fuente.

Descargar la versión conforme al sistema Operativo en el siguiente enlace: https://code.visualstudio.com/#alt-
downloads
Una vez descargado el instalador , seguir el siguiente paso a paso:
Nota: Las capturas siguientes corresponden a Visual Studio Code 1.33.0 en Windows 10 de 64 bits.
1. Haga doble clic sobre el instalador de Visual Studio Code para que comience el asistente de instalación.
2. La primera pantalla informa que se va a instalar Visual Studio Code. Haga clic en Siguiente para instalar
el programa:

3. La segunda pantalla exige aceptar la licencia de Visual Studio Code para continuar la instalación:
4. La tercera pantalla permite elegir el directorio de instalación (por tratarse de la versión User installer, el
directorio de instalación está en la carpeta de usuario, no en Archivos de programa):

5. La cuarta pantalla permite elegir el nombre de la carpeta del menú de inicio:
6. La quinta pantalla permite elegir algunas tareas adicionales tras la instalación. Personalmente, aconsejo
marcar las casillas "Agregar la acción ...":
7. Finalmente se muestran las opciones elegidas en las pantallas anteriores. Para iniciar la instalación, haga
clic en Instalar:
8. A continuación, se instalará Visual Studio Code:

9. Finalmente VS Code esta instalado de forma correcta, damos clic en Finalizar.
Instalar extensiones en VS Code HTML Snippets, HTML Bolierplate

,Prettier y Bootstrap4.
Nota: Podemos instalar estas extensiones presionando Ctrl+Shift+p o dando clic en el icono
HTML Snippets
Esta extensión la instalamos para hacernos más fácil la creación de código, basta con escribir parte de un
fragmento de código y luego pulsar Intro, inmediatamente el fragmento de código se crea de forma completa,
con sus atributos y etiquetas de cierre.

HTML Bolierplate
Esta extensión proporciona el código HTML estándar utilizado en todas las aplicaciones web, lo vamos a
emplear para crear nuestro 'html5-boilerplate' en un archivo HTML seleccionando el fragmento del menú
desplegable de sugerencias automáticas para obtener el HTML boilerplate.
Prettier
Esta extensión nos permite hacer la indentación de nuestro código.

Ahora activaremos para que se haga efectiva la indentación cada vez que le guardemos los cambios en
nuestros archivos en File-->Preferences-->Settings.
Nota: Mi VS Code esta configurado en ingles, favor buscar la equivalencia en su idioma.
Luego escribiremos Format On Save y activemos la opción:

Bootstrap4
Bootstrap 4 es la última versión de Bootstrap,el framework de CSS, HTML y JavaScript más popular, que nos
permite desarrollar webs que se ajustan a cualquier resolución y dispositivo (responsive).
Empecemos el Laboratorio
Nuestra fuente de Información
El actor y experto en artes marciales Carlos Ray Norris (mundialmente conocido como Chuck Norris), ha
servido desde hace mucho tiempo como fuente de inspiración de cientos de chistes respecto a su fortaleza,
coraje y determinación. Tal es así, que incluso existe una base de datos oficial (ICNDB) de estos chistes.
Además, esta base de datos posee un API REST muy fácil de usar.
Lo que vamos a implementar es precisamente el consumo de los servicios que ofrece esta API y traernos esos
chistes para mostrarlos en un navegador, lo divertido será darnos un paseo a través de la historia de la
manera como fue evolucionando la manera de realizar las peticiones.

Resolución del laboratorio a la manera de 2005
Para empezar, como en todo proyecto Web moderno, vamos a crear una carpeta de trabajo, por ejemplo
ChistesChuck . A continuación, arrancamos el Visual Studio Code y abrimos esa carpeta:
Nota: VS Code esta por defecto en mi ordenador en idioma Ingles, favor buscar la equivalencia en su
idioma.
Nos debe abrir el proyecto de la siguiente manera:
Dentro de esa carpeta, crearemos un fichero HTML para comenzar: chuck2005.html , donde
empezaremos a utilizar nuestras extensiones instaladas.

Dentro de nuestro fichero escribiremos html y seleccionamos la que dice html:5
Luego escribiremos script y seleccionamos la que nos carga de primero.
Copiamos y pegamos el siguiente código dentro de las etiquetas script
xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "http://api.icndb.com/jokes/random/", true);
xmlhttp.onreadystatechange = function() {
var textoChiste = JSON.parse(this.response).value.joke;
console.log("chiste recibido: " + textoChiste);
var h1s = document.getElementsByTagName("h1");
h1s[0].innerHTML = textoChiste;
};
xmlhttp.send();
El objeto XMLHttpRequest nos permite hace peticiones A JAX de manera sencilla.
En este ejemplo, se busca el texto de un único chiste, y al encontrarlo, se sustituye el contenido de la primera
etiqueta <h1> de la página web donde se ejecute este script.

Por ende procedemos a crear nuestra etiqueta y nuestro código finalmente deberá quedar así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>Aqui se coloca el Texto</h1>
<script>
};
xmlhttp.send();
</script>
</body>
</html>
Abrimos nuestro archivo desde un navegador y tenemos un divertido chiste que leer.
Al dar f5 o actualizar la página, se recarga con un nuevo chiste.

Ahora vamos a modificar nuestro ejercicio con el framework Bootstrap4, implementaremos su estilo
CSS y crearemos un elemento Jumbotron.
Crearemos otro fichero HTML chuck2005Bootstrap.html , y volvemos a crear html:5 , pero creamos en
la etiqueta <body> un Jumbotron aprovechando la extensión, colocando b4-jumbotron-default.
Ahora aplicaremos el CSS de Bootstrap, esto lo vamos a realizar con su CDN oficial y sólo tenemos que
colocar el tag en la etiqueta <head> .
Para este ejercicio solo dejaremos los siguientes atributos:
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
Y finalmente copiamos el script del archivo anterior chuck2005.html .

};
xmlhttp.send();
Nos debe quedar nuestro código de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
/>
</head>
<body>
<div class="jumbotron">
<h1 class="display-3">Jumbo heading</h1>
<p class="lead">Jumbo helper text</p>
<hr class="my-2" />
<p>More info</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="Jumbo action link" role="button"
>Jumbo action name</a
>
</p>
</div>
<script>
};
xmlhttp.send();
</script>
</body>
</html>

Abrimos nuestro archivo desde un navegador y obtendremos un divertido chiste con un estilo agradable y
con el botón creado.
Al dar f5 o actualizar la página, se recarga con un nuevo chiste

Resolución del laboratorio a la manera de 2006
Crearemos un nuevo fichero HTML al cual llamaremos chuck2006.html
Enlazamos la biblioteca de jQuery, vamos a usar su CDN oficial y copiamos el código en el <head> .
Para este ejercicio solo utilizaremos el atributo src :
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
Volvemos a utilizar en nuestra etiqueta <head> el estilo CSS de Bootstrap .
<link
rel="stylesheet"
/>

Creamos un Jumbotron en la etiqueta <body> aprovechando la extensión, colocando b4-jumbotron-
default.
Luego escribiremos script y seleccionamos la que nos carga de primero.
$.get("http://api.icndb.com/jokes/random", response => {

var textoChiste = response.value.joke;
$("h1").text(textoChiste);
});
Con este código estamos realizando una petición get a la API , luego a la variable textoChiste le estamos
asignado el valor de la respuesta que viene en la ruta value.joke (El cual es el chiste) y finalmente a la
etiqueta <h1> le asigna este valor.

Nos debe quedar nuestro código de la siguiente manera
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
/>
</head>
<body>
<hr class="my-2" />
<p>More info</p>
<p class="lead">
>
</p>
</div>
<script>
$.get("http://api.icndb.com/jokes/random", response => {
var textoChiste = response.value.joke;
});
</script>
</body>
</html>

Abrimos nuestro archivo desde un navegador y tenemos un divertido chiste.
¿Qué diferencias ves con respecto al ejercicio anterior?
Se paso de un bloque extenso de código para realizar el consumo a tres sencillas líneas, las cuales son de fácil
entendimiento.
¿Cómo simplifica la vida jQuery?
jQuery simplifica la forma en la que realizamos tareas cómo seleccionar elementos, o realizar peticiones Ajax,
además es Cross browser, de modo que está testada en los siguientes navegadores: I.E. 6.0+, FF2+, Safari
2.0+, Opera 9.0+, Chrome.

¿Qué ocurre si tenemos varios tags h1 ?

Le asigna el valor del chiste a todas las etiquetas <h1> que tengamos en nuestra página.
Resolución con plugin de jQuery (hasta ~2014)

Seguiremos utilizando jQuery , pero esta vez vamos a invocar directamente la API de los gestores del ICNDb
gracias a su plugin de jQuery
Crearemos un nuevo fichero HTML al cual llamaremos ChuckHasta2014.html
Volvemos a enlazar la librería de JQuery en nuestra etiqueta <head> :

Seguiremos utilizando el estilo CSS de Bootstrap en nuestra etiqueta <head> .
<link
rel="stylesheet"
/>
Enlazamos la biblioteca de jQuery, vamos a usar su CDN oficial y copiamos el código en el <head> .
Para este ejercicio solo dejaremos el atributo src :
<script src="http://code.icndb.com/jquery.icndb.js"></script>
Creamos un Jumbotron en la etiqueta <body> aprovechando la extensión, colocando b4-jumbotron-

default.

Luego creamos nuestra etiqueta <script> en el <body>
$.icndb.getRandomJoke(response => {
var textoChiste = response.joke;
});
Con este código estamos realizando una petición get a la libreria jQuery ICNDb , luego a la variable
textoChiste le estamos asignado el valor de la respuesta que viene en la ruta response.joke (El cual es el
chiste) y finalmente a la etiqueta <h1> le asigna este valor.
Nos debe quedar nuestro código de la siguiente manera
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
/>
</head>
<body>
<hr class="my-2" />
<p>More info</p>
<p class="lead">
>
</p>
</div>
<script>
$.icndb.getRandomJoke(response => {
var textoChiste = response.joke;
});
</script>
</body>
</html>
Abrimos nuestro archivo desde un navegador y tenemos un obtendremos un divertido chiste.

Ahora vamos a modificar nuestro ejercicio usando el método $.icndb.getRandomJokes ,para poblar los
elementos de una lista ordenada (tag <ul></ul> ), de igual forma vamos a agregar un estilo a las listas:

1. Eliminemos el jumbotron de nuestro <body> .

2. Modifiquemos lo que tenemos en nuestro script del body por el siguiente :
$.icndb.getRandomJokes({
number: 10,
success: response => {
response.forEach(element => {
$("ul").append(
"<li class='list-group-item'>" + element.joke + "</li>"
);
});
}
});
A diferencia del anterior código , estamos diciendo que vamos a crear una lista dinámica de 10 chistes y
también tendrá un estilo class='list-group-item'.

3. Creamos en nuestra etiqueta <body> un elemento <ul> , importante agregarle el atributo class , el
cual le aplicará un estilo CSS de Bootstrap.
<ul class="list-group"></ul>
Nuestro código debe quedar de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
/>
</head>
<body>
<ul class="list-group"></ul>
<script>
$.icndb.getRandomJokes({
number: 10,
success: response => {
response.forEach(element => {
$("ul").append(
"<li class='list-group-item'>" + element.joke + "</li>"
);
});
}
});
</script>
</body>
</html>
Abrimos nuestro archivo desde un navegador y tenemos una lista de 10 divertidos chistes.

Al dar f5 o actualizar la página, se recarga con una lista de 10 nuevos divertidos chistes.
¿cómo se escribían las funciones en las versiones de ECMAScript previas a la

versión 6?
Las funciones solo se definian con la palabra function , hoy se pueden definir Función Flecha (arrow)
//ES5
function(){
...
}
//ES6
() => {
...
}
Si la función sólo cuenta con una línea de código, era siempre necesario poner las llaves:
//ES5
array.filter(function (value){
return value > 5;
});
//ES6
array.filter(value => value > 5);

Si lo que se necesita es retornar un objeto, sería de la siguiente forma:
//ES5
array.map(function (value, index){
return {
index: index,
value: value
}
});
//ES6
array.map((value, index) => ({ index: index, value: value
Resolución en 2014
Ahora vamos a consumir la API del método fetch definida por WHATWG , que permite hacer llamadas A JAX de
manera muy limpia.
¿Qué es el WHATWG?
El Web Hypertext Application Technology Working Group, o WHATWG, es una comunidad de personas
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. Desde entonces, el editor de las especificaciones WHATWG, Ian
Hickson, ha pasado a Google.
La WHATWG tiene un pequeño comité de invitados llamados "miembros" que tienen el poder de impugnar las
especificaciones que propone el editor de estas. Cualquiera puede participar como colaborador, solo tiene
que unirse a la lista de correo de WHATWG.
Crearemos un nuevo fichero HTML al cual llamaremos Chuck2014Fetch.html
Volvemos a enlazar la librería de JQuery en nuestra etiqueta <head> :
Seguiremos utilizando el estilo CSS de Bootstrap en nuestra etiqueta <head> .
<link
rel="stylesheet"
/>
Creamos un elemento <ul> en la etiqueta <body> .
Posteriormente creamos una etiqueta <script> en el <body> , y colocamos el siguiente código:
for (var i = 0; i < 10; i++) {

fetch("http://api.icndb.com/jokes/random")
.then(res => res.json())
.then(
json => $("ul").append("<li>" + json["value"]["joke"]) + "</li>"
);
}
Tenemos un bucle que iterara 10 veces haciendo peticiones a la API , luego obtenemos la respuesta en
formato json y creamos una lista dinámicamente asignándole el valor de los chistes json["value"]
["joke"] .
Nuestro código quedará así:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
/>
</head>
<body>
<ul></ul>
<script>
for (var i = 0; i < 10; i++) {
fetch("http://api.icndb.com/jokes/random")
.then(res => res.json())
.then(
json => $("ul").append("<li>" + json["value"]["joke"]) + "</li>"
);
}
</script>
</body>
</html>

Abrimos nuestro archivo desde un navegador y tenemos una lista de 10 divertidos chistes.

Al dar f5 o actualizar la página, se recarga con una lista de 10 nuevos divertidos chistes.
Ahora Vamos a ejecutar nuestro ejercicio utilizando node-fetch y vamos a imprimirlo en pantalla.
Nota: Las capturas siguientes corresponden desde una terminal cmd.exe en Windows 10 de 64 bits,
ejecútelo en una terminal según tu sistema operativo.
Desde una Terminal ejecutamos el comando:
npm install node-fetch --save

Saldrá un pantallazo con el resumen de la instalación.
Nos debe crear las carpeta node_modules y el archivo package-lock.json.

Creamos un archivo dentro de nuestro folder y lo nombraremos node-fetch.js
Abrimos el archivo node-fetch.js y lo editamos con el siguiente código:
const fetch = require("node-fetch");

const url = "http://api.icndb.com/jokes/random";
const getData = async url => {
try {
const response = await fetch(url);
const json = await response.json();
console.log(json);
} catch (error) {
console.log(error);
}
};
getData(url);

Para garantizar el correcto funcionamiento ejecutamos desde la terminal el comando:
node node-fetch.js
Notamos que en el value{joke} nos carga un divertido chiste.

Resolución del ejercicio con Web Components (presente)
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 Github , este módulo no se trata de un script de Javascript o un CSS (a la antigua
usanza), si no de un webcomponent moderno. Para usarlo, se necesita la nueva directiva import definida en
las últimas especificaciones del W3C.
Crearemos un nuevo fichero HTML al cual llamaremos Chuck2016.html
Y usamos Github como CDN, de la siguiente manera:
<link rel="import" href="https://raw.githubusercontent.com/erikringsmuth/chuck-norris-

joke/master/chuck-norris-joke.html">
Ahora, si queremos un chiste de Chuck Norris, sólo tenemos que incluir este tag en el fichero HTML:
<chuck-norris-joke></chuck-norris-joke>

Nuestro Archivo deberá quedar de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="import"
href="https://raw.githubusercontent.com/erikringsmuth/chuck-norris-
joke/master/chuck-norris-joke.html"
/>
</head>
<body>
<chuck-norris-joke></chuck-norris-joke>
</body>
</html>
Abrimos nuestro archivo desde un navegador y tenemos un chiste para divertirnos.

Ahora vamos a ejecutar nuestro ejercicio utilizando una tabla y para crearle su propio estilo vamos a utilizar el
framework Skeleton , para esto usaremos su CDN .
Creamos un archivo con el nombre chuck2016Skeleton.html
utilizamos el CSS Skeleton,

Copiamos el link en la cabecera <head> :
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"
/>

Y usamos Github como CDN, de la siguiente manera:
<link
rel="import"
/>
Creamos nuestra tabla en la etiqueta <body>
<table class="u-full-width">
<thead>
<tr>
<th>Chistes Chuck Norris</th>
</tr>
</thead>
<tbody>
<tr>
<td><chuck-norris-joke></chuck-norris-joke></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
Finalmente nuestro página debe quedar así:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"
/>
<link
rel="import"
/>
</head>
<body>
<table class="u-full-width">
<thead>
<tr>
<th>Chistes Chuck Norris</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</body>
</html>
Abrimos nuestro archivo desde un navegador y tenemos una lista de 10 divertidos chistes en una
tabla con el estilo del Framework Skeleton.
Al dar f5 o actualizar la página, se recarga con una lista de 10 nuevos divertidos chistes en una tabla
con el estilo del Framework Skeleton.

LaboratorioComputación en El Cliente Web

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LaboratorioComputación en El Cliente Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Laboratorio Computación en Cliente Web

2. Entender como se realizan peticiones con A JAX del framework jQuery.

3. Utilizar un plugin especíﬁco de jQuery para hacer peticiones a una API.

Instalar Visual Studio Code (VS Code)

Una vez descargado el instalador , seguir el siguiente paso a paso:

8. A continuación, se instalará Visual Studio Code:

Instalar extensiones en VS Code HTML Snippets, HTML Bolierplate

Esta extensión nos permite hacer la indentación de nuestro código.

Nota: Mi VS Code esta conﬁgurado en ingles, favor buscar la equivalencia en su idioma.

Luego escribiremos Format On Save y activemos la opción:

Nos debe abrir el proyecto de la siguiente manera:

Luego escribiremos script y seleccionamos la que nos carga de primero.

Copiamos y pegamos el siguiente código dentro de las etiquetas script

xmlhttp = new XMLHttpRequest();

El objeto XMLHttpRequest nos permite hace peticiones A JAX de manera sencilla.

Al dar f5 o actualizar la página, se recarga con un nuevo chiste.

Para este ejercicio solo dejaremos los siguientes atributos:

xmlhttp = new XMLHttpRequest();

Nos debe quedar nuestro código de la siguiente manera:

Al dar f5 o actualizar la página, se recarga con un nuevo chiste

Dentro de nuestro ﬁchero escribiremos html y seleccionamos la que dice html:5

Para este ejercicio solo utilizaremos el atributo src :

Volvemos a utilizar en nuestra etiqueta <head> el estilo CSS de Bootstrap .

Luego escribiremos script y seleccionamos la que nos carga de primero.

Copiamos y pegamos el siguiente código dentro de las etiquetas script

$.get("http://api.icndb.com/jokes/random", response => {

Nos debe quedar nuestro código de la siguiente manera

Abrimos nuestro archivo desde un navegador y tenemos un divertido chiste.

Al dar f5 o actualizar la página, se recarga con un nuevo chiste.

¿Qué diferencias ves con respecto al ejercicio anterior?

¿Cómo simpliﬁca la vida jQuery?

¿Qué ocurre si tenemos varios tags h1 ?

Resolución con plugin de jQuery (hasta ~2014)

Crearemos un nuevo ﬁchero HTML al cual llamaremos ChuckHasta2014.html

Dentro de nuestro ﬁchero escribiremos html y seleccionamos la que dice html:5

Volvemos a enlazar la librería de JQuery en nuestra etiqueta <head> :

Seguiremos utilizando el estilo CSS de Bootstrap en nuestra etiqueta <head> .

Para este ejercicio solo dejaremos el atributo src :

Creamos un Jumbotron en la etiqueta <body> aprovechando la extensión, colocando b4-jumbotron-

Copiamos y pegamos el siguiente código dentro de las etiquetas script

Nos debe quedar nuestro código de la siguiente manera

Abrimos nuestro archivo desde un navegador y tenemos un obtendremos un divertido chiste.

Al dar f5 o actualizar la página, se recarga con un nuevo chiste.

Nuestro código debe quedar de la siguiente manera:

¿cómo se escribían las funciones en las versiones de ECMAScript previas a la

Si lo que se necesita es retornar un objeto, sería de la siguiente forma:

Crearemos un nuevo ﬁchero HTML al cual llamaremos Chuck2014Fetch.html

Dentro de nuestro ﬁchero escribiremos html y seleccionamos la que dice html:5

Volvemos a enlazar la librería de JQuery en nuestra etiqueta <head> :

Creamos un elemento <ul> en la etiqueta <body> .

Posteriormente creamos una etiqueta <script> en el <body> , y colocamos el siguiente código:

for (var i = 0; i < 10; i++) {

Nuestro código quedará así:

Desde una Terminal ejecutamos el comando:

npm install node-fetch --save

Nos debe crear las carpeta node_modules y el archivo package-lock.json.

Abrimos el archivo node-fetch.js y lo editamos con el siguiente código:

const fetch = require("node-fetch");

Notamos que en el value{joke} nos carga un divertido chiste.

Crearemos un nuevo ﬁchero HTML al cual llamaremos Chuck2016.html

Dentro de nuestro ﬁchero escribiremos html y seleccionamos la que dice html:5

Y usamos Github como CDN, de la siguiente manera:

<link rel="import" href="https://raw.githubusercontent.com/erikringsmuth/chuck-norris-