Scribd
Cargar
214 vistas10 páginas

Laboratorio Computación en Cliente Web

El documento describe 5 ejercicios de programación web resueltos a lo largo de los años utilizando diferentes tecnologías como Bootstrap, jQuery, Fetch API y Web Components. Cada ejercicio consiste en obtener un chiste de una URL y mostrarlo en la página mediante diferentes métodos como jQuery, plugins y Fetch.

Cargado por

CARLOS A Jc
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
214 vistas10 páginas

Laboratorio Computación en Cliente Web

El documento describe 5 ejercicios de programación web resueltos a lo largo de los años utilizando diferentes tecnologías como Bootstrap, jQuery, Fetch API y Web Components. Cada ejercicio consiste en obtener un chiste de una URL y mostrarlo en la página mediante diferentes métodos como jQuery, plugins y Fetch.

Cargado por

CARLOS A Jc
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

Laboratorio Computación en Cliente Web

Antes de empezar a realizar los ejercicios se ha instalado el Framework Bootstrap, se busca


en el menú vertical, la opción extensiones de VS Code y se instala, adjunto imagen:

1. Resolución del ejercicio a la manera de 2005

Para resolver este ejercicio creamos un archivo HTML llamado chuck2005 en el cual
agregamos un estilo CSS de Bootstrap en la estructura <head>:

- <link rel='stylesheet' href='bower_components/path/al/css/de/bootstrap.css'>

En la estructura del elemento <body> se agrega una etiqueta <h1> dentro del elemento
‘jumbotron’ para que nuestro script proceda a buscar y agrega en esta etiqueta <h1> un
chiste obtenido de la URL.
Adjunto imagen de código fuente implementado:

Para ejecutar y ver los resultados, se abre el archivo chuck2005 en un navegador, adjunto
imagen del resultado obtenido:

2. Resolución del ejercicio en 2006

Para desarrollar este ejercicio se creó un archivo HTML llamado chuck2006,


agregamos la librería jQuery a través del elemento:

- <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
la cual tiene una instrucción llamada $. Ajax, y poder ejecutar nuestro script.

Diferencia con respecto al anterior ejercicio es:


- Notable reducción de líneas de código
- No se necesita instanciar variable de tipo XMLHttpRequest para crear la estructura
- No se necesita un comando como ‘send’ para enviar la petición

Para este ejercicio se agregó 2 etiquetas <h1>, lo que hace el script es buscar la etiqueta
<h1> en el elemento <body> y reemplaza con el dato obtenido de la URL, adjunto
imagen de implementación:
Se Ejecuta el archivo para ver los resultados:

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

Siguiendo con los ejercicios, en este caso nos encontramos con los plugins que
implementa jQuery, entonces se crea un archivo llamado Ejercicio2014 y se procede a
agregar un plugin al siguiente ejercicio, en la estructura <head> se agrega el script:

- <script src="http://code.icndb.com/jquery.icndb.js "></script>

para hacer referencia al plugin, se agrega una etiqueta <h1> para ver el proceso, adjunto
imagen de implementación:
Se ejecuta el archivo HTML para ver los resultados:

Ahora se crea un archivo llamado Ejemplo2014-2 donde se agrega un nuevo script el


cual contiene un ciclo ‘Foreach’, el cual muestra 10 chistes que será visualizados en una
etiqueta <ul> dentro del elemento <div class=”jumbotron”> , adjunto imagen de
implementación:
Adjunto imagen de los resultados:

En ECMAScript previas a las versiones 6, las funciones se escribían de la siguiente manera:

1. Para recorrer un Array:


var data = [{...}, {...}, {...}, ...];
data.forEach(function(elem){
// Tratamos el elemento
console.log(elem)
});

2. Otro caso son las variables:


(function() {
console.log(x); // x no está definida aún.
if(true) {
var x = "hola mundo";
}
console.log(x);
// Imprime "hola mundo", porque "var" hace que sea global
// a la función;
})();

Ahora se puede declarar variables con let en lugar de var si no queremos que sean
accesibles más allá de un ámbito.

4. Resolución en 2014

En este ejercicio se agrega un API ‘Fecth’ en el archivo Resolucion2014, para el ejemplo de


uso de este script se obtiene un chiste al azar de una URL y lo reemplaza en la etiqueta
<h1>, adjunto imagen de implementación:
Para ver los resultados se ejecuta en el navegador:

Que es el WHATWG:
Es una comunidad de profesionales interesados en las paginas web para mejorar su
desempeño y también su conectividad con otras tecnologías, actualmente están trabajando
con HTML5, Web Workers que es un API para ECMAscript para trabajar en CPU multi
nucleos y Formularios Web 2.0

Ahora se procede a realizar un ejercicio similar al anterior, pero usando Node-Fetch, se


crea un archivo llamado Resolucion2014-2, se implementa el código en JavaScript y se crea
un elemento <h1> para obtener el resultado, adjunto imagen de implementación:
Se ejecuta para ver los resultados:

5. Resolución del ejercicio con Web Components

Para finalizar un ultimo ejercicio sobre componentes, se crea un archivo llamado


EjercicioComponentes, en este se va a agregar unas directivas ‘imports’ la cuales son:

- <link rel="import" href="bower_components/chuck-norris-joke/chuck-norris-


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

Ademas se debe agregar el tag:


- <chuck-norris-joke></chuck-norris-joke>

Para continuar con este ejercicio se debe instalar un Framework skeleton, el cual lo vamos
a usar para crear una tabla que tendrá unos chistes usando el tag mencionado
anteriormente, adjunto imagen de implementación:

Ejecutamos el archivo en el navegador Chrome, para ver los resultados:

También podría gustarte