HTML con JavaScript en soluciones

IoT

Objetivo
Lograr que el estudiante adquiera los conocimientos mínimos del uso de JavaScript para
lograr que las páginas html sean más interactivas e inteligentes, esto como insumo para
desarrollar soluciones IoT. Por ejemplo, estos conceptos pueden ser vistos como el
preámbulo a las Web Apps donde se trabajarán soluciones cliente-servidor con su
Front-End y su Back-End. El html con JavaScript es clave en el Front-End.

Conocimientos previos

Elementos de un desarrollo web a nivel de front-end

HTML (Hypertext Markup Language): HTML es el lenguaje de marcado utilizado para definir
la estructura y el contenido de una página web. Se utiliza para crear elementos como
encabezados, párrafos, listas, enlaces, formularios y más.

CSS (Cascading Style Sheets): CSS se utiliza para definir la apariencia y el estilo visual de
una página web. Permite controlar aspectos como colores, fuentes, márgenes, tamaños y
diseños.

JavaScript: JavaScript es un lenguaje de programación que se utiliza para agregar

interactividad y funcionalidad a una página web. Puedes utilizar JavaScript para crear
efectos dinámicos, validar formularios, interactuar con el usuario y realizar solicitudes a
servidores.

Imágenes y Multimedia: Esto incluye elementos como imágenes, videos y archivos de audio
que se incorporan en una página web para enriquecer su contenido.

Fuentes y Tipografía: La elección de fuentes y estilos tipográficos es importante para la

legibilidad y el diseño de una página web. Esto se controla a través de CSS.

Diseño Responsivo: El diseño web responsivo implica crear páginas web que se adaptan a
diferentes tamaños de pantalla y dispositivos, como computadoras de escritorio, tabletas y
teléfonos móviles.

Frameworks y Bibliotecas: Muchos desarrolladores utilizan frameworks y bibliotecas como

Bootstrap, jQuery, React, Angular, y otros para agilizar el desarrollo y mejorar la eficiencia.
Accesibilidad Web: Garantizar que una página web sea accesible para todas las personas,
incluyendo aquellas con discapacidades, es esencial. Esto implica el uso de prácticas como
etiquetas alt para imágenes y asegurarse de que las páginas sean navegables mediante
lectores de pantalla.

Testing y Depuración: La realización de pruebas en diferentes navegadores y dispositivos es

importante para garantizar que una página web funcione correctamente. También es
fundamental la capacidad de depurar y solucionar problemas en el código.

Optimización de Rendimiento: La optimización del rendimiento se refiere a técnicas para

mejorar la velocidad de carga y la eficiencia de una página web, lo que incluye la
compresión de recursos, la minimización de solicitudes y la optimización de imágenes.

Seguridad: Asegurarse de que una página web esté protegida contra vulnerabilidades
comunes, como ataques de inyección de SQL o ataques de seguridad de tipo cross-site
scripting (XSS).

Integración con APIs: La integración con APIs (interfaces de programación de aplicaciones)

permite a una página web interactuar con servicios y datos externos, como redes sociales,
mapas y servicios de terceros.

AJAX
AJAX significa Asynchronous JavaScript and XML. Se trata de una solución que incorporan
los navegadores para atender solicitudes de código JavaScript que se aloja en páginas
Web. Para esto ocurre una comunicación asincrónica entre el JavaScript en cliente-AJAX-
servidor web, logrando cambios en la vista de la página que ve el cliente sin necesidad de
recargar toda la página del cliente. Como resultado, la página puede cambiar de manera
dinámica.
 Fig. 1. Comunicación cliente-AJAX-Servidor Web

DOM
(Document Object Model) es un concepto fundamental en la programación web y está
intrínsecamente relacionado con JavaScript. El DOM es una representación estructurada y
jerárquica de un documento HTML o XML, que permite a los programadores acceder y
manipular los elementos de una página web de manera dinámica a través de JavaScript.

El DOM organiza todos los elementos de una página web en una estructura de árbol, donde
cada elemento (como etiquetas HTML) es representado como un objeto en ese árbol. Esto
significa que cada parte de una página web, como encabezados, párrafos, enlaces,
imágenes, formularios, etc., es representada por un objeto en el DOM. JavaScript puede
interactuar con estos objetos para realizar acciones como cambiar el contenido, modificar
estilos, agregar o eliminar elementos y más.

En resumen, el DOM es una interfaz que proporciona una representación programática de

una página web, permitiendo a JavaScript interactuar con los elementos de la página de
manera dinámica. JavaScript puede acceder a los objetos del DOM y manipularlos para
crear aplicaciones web interactivas y dinámicas.
El siguiente enlace permite consultar diversos comandos del DOM:
https://developer.mozilla.org/es/docs/Web/API/Document

Conocimientos de javascript con html

Como se embebe código JavaScript en un documento html

● Usualmente el código JavaScript se introduce como un elemento <script>. Por lo
tanto aparece así
<script> Aqui va el código del JavaScript </script>
● Si el script es un conjunto de funciones, el elemento <script> puede ir en principio en
cualquier parte dentro del elemento <html>. Pero si se trata de un comando que
debe correr una vez se cree la vista del usuario, debería estar en la parte final del
<body>. Si es un comando que afecta el estilo de la página debería estar dentro de
<head>
● Colocar los scripts al final del <body> es una práctica común porque garantiza que
los elementos HTML se carguen antes de que se ejecute el script. Esto es
especialmente importante para scripts que interactúan con el contenido HTML o que
dependen de elementos de la página. Ayuda a evitar problemas con el acceso a
elementos que aún no se han creado cuando se ejecuta el script.
● Scripts en el <head>: Puedes incluir scripts en la sección <head>, pero ten en
cuenta que se ejecutarán antes de que se cargue el contenido del <body>. Esto
significa que si tu script intenta interactuar con elementos del <body, es posible que
no los encuentre, lo que podría llevar a errores. Los scripts en el <head> se utilizan
principalmente para cargas de recursos, definiciones globales o cualquier cosa que
no requiera acceso inmediato al contenido de la página. Si un script afecta el estilo
de la página (por ejemplo, al cambiar el CSS), generalmente se coloca en el <head>.
Esto se debe a que esas modificaciones deberían aplicarse antes de que se muestre
el contenido en el navegador. Sin embargo, ten en cuenta que, como se mencionó
anteriormente, debes considerar la secuencia de carga y asegurarte de que el script
no intente modificar elementos que aún no se han creado.

JavaScript reconoce el DOM del html por defecto

● Cuando trabajamos manipulando una hoja de Google Sheet vimos que era
necesario crear un objeto que llamamos libro y otro que llamamos hoja. Pues bien,
cuando se usa JavaScript embebido en un documento html también es necesario ver
el html como un objeto, solo que no es necesario crearlo por comando sino que se
crea por defecto y se llama “document”.

Ejemplo 1. Embeber un código JavaScript para que corra en modo de lenguaje

interpretado, después de cargar la página

Tenemos el siguiente documento html

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Encabezado H1</title>
</head>
<body>
<h1>Este es un encabezado de nivel 1</h1>
<p>Este es un párrafo de ejemplo que sigue al encabezado.</p>
</body>
</html>

Lo que muestra el navegador

Ahora, queremos que JavaScript produzca un cambio en el elemento <h1>

mediante un comando que supone que existe el objeto “document”, de manera
que aprovecha funciones asociadas a ese objeto o clase

document.querySelector('h1').textContent = "Efecto de mi JavaScript por

consola";
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Encabezado H1</title>
</head>
<body>
<h1>Este es un encabezado de nivel 1</h1>
<p>Este es un párrafo de ejemplo que sigue al encabezado.</p>
<script>
document.querySelector('h1').textContent = "Atención: JavaScript ha cambiado este escrito";
</script>
</body>
</html>

Se produce el siguiente efecto en el navegador

Análisis

● El navegador carga primero que todos la página correspondiente. Porque

es lo primero que encuentra
● Ejecuta finalmente el código de JavaScript porque es lo último que
 encuentra.

Ejemplo 2. El código JavaScript es un conjunto de funciones, de manera que algo

las tiene que consumir o activar para aprovechar ese código. En este ejemplo,
cuando el usuario oprime un botón es cuando se consumirá la función en el
<script>

<head>
<title>Ejemplo de Encabezado H1</title>
</head>
<body>
<h1>Este es un encabezado de nivel 1</h1>
<p>Este es un párrafo de ejemplo que sigue al encabezado.</p>

<button onclick="cambiarTexto()">Cambiar Texto</button>

<script>
function cambiarTexto() {
document.querySelector('h1').textContent = "Atención: JavaScript ha cambiado este escrito";
}
</script>
</body>
</html>

Lo que muestra el navegador inicialmente

Lo que muestra el navegador al oprimir el botón

Análisis

● El código JavaScript consiste en una función cambiarTexto()

● Fue necesario crear un elemento <button> y configurarlo para que en caso
de ser oprimido produzca el cambio deseado.
 Ejemplo 3. Haremos lo mismo del ejemplo 2, pero usando marcas, de manera que
el código JavaScript afectará el elemento que tenga la marca correspondiente
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Encabezado H1</title>
</head>
<body>
<h1 id="marca1">Este es un encabezado de nivel 1</h1>
<p>Este es un párrafo de ejemplo que sigue al encabezado.</p>

<button onclick="cambiarTexto()">Cambiar Texto</button>

<script>
function cambiarTexto() {
var elementoAfectado = document.getElementById("marca1");
elementoAfectado.innerHTML = "Atención: JavaScript ha cambiado este escrito";
}
</script>
</body>
</html>

Reto general para esta práctica

Gracias a las posibilidades que brinda Google Sheet, el desarrollo web realizado en la
práctica anterior puede ser visto como una solución final. Pero qué pasaría si no se usa
Google Sheet sino otra base de datos u otra forma de almacenamiento de la información.
Pero un problema muy claro está en que los datos que se visualizan en la solución de la
práctica anterior no se refrescan automáticamente cuando ocurren cambios en la google
sheet, sino después de minutos. Podemos agregarle a la página un botón para que, cuando
el cliente lo oprima, ocurra el refresco de la página y por consiguiente de los nuevos datos.
Pero ¿qué inteligencia se ocupará de vigilar si el botón es oprimido y de ordenar que la
página se refresque?. Solucionar algo tan sencillo como esto ya requiere el uso de scripts y
los scripts en html se escriben casi siempre con JavaScript. Ese es el reto, usar JavaScript
para que la solución atienda mejor las necesidades del cliente. Pero como es la primera vez
que usamos JavaScript, seguiremos pasos más detallados de lo normal para ir
conquistando los trucos esenciales para usar scripts en soluciones Web a nivel de
Front-End.

Resultados de aprendizaje
● El estudiante conocerá los mínimos necesarios para el uso de JavaScript en
soluciones de Front-End, incluyendo:
○ poder escribir código de JavaScript como parte de un documento HTML y
probarlo
○ Conocer lo que se puede y no se puede hacer con JavaScript en soluciones
de Front-End
Tarea 1. Conquista del Navegador en modo
desarrollador para pruebas de JavaScript.
Paso 1. Abrir el navegador en modo desarrollador y explorar lo que allí se encuentra.
abre tu navegador > visita cualquier página, por ejemplo
https://sites.google.com/e3t.uis.edu.co/homeroortega/ > click derecho > Inspeccionar.

¿Qué ves en Elements?

Primeramente se puede observar la estructura del código en html. También se observan

los estilos en CSS, atributos, objetos, eventos, DOM y su árbol. Por último, en la parte
inferior podemos acceder a la consola.

¿Qué ves en Sources?

En sources encontramos las estructuras de todos los archivos que se encuentran en la

página ordenados según su código de programación. También vemos código en javascript
y css, breakpoints, alcance de las variables, donde se encuentra guardada cada una de
ellas y su seguridad, opciones de visualización, cookies, etc.

Paso 2. Pruebas de JavaScript en consola. Comprobar que la consola sirve para probar
código JavaScript en modo interpretado, como se hace con Python o Matlab.
Después del paso anterior, pasa a la pestaña “Console”. Escribe código JavaScript en modo
de programación interpretada. Por ejemplo:

Escribe aquí tus pruebas de programación por consola en javascript

Paso 3. Aprende a usar JavaScript en un HTML de manera oculta, es decir, que la vista
para el usuario no se modifica. Eso significa que JavaScript no realiza cambios al DOM, usa
una función propia alert() para producir una visualización pero no está ligada al DOM. Solo
enviamos un aviso de que hay código en ejecución pero el código no presenta ninguna
señal para el usuario, pero sí puede presentar cosas en la consola.

Crea en tu computador, un archivo de texto que se llame “mi_html.html”. Pégale el código y

guárdalo. Nota: el explorador debe ser configurado para que muestre la extensión del
archivo, para garantizar que la extensión sea html, no txt. Ahora abre el archivo
mi_html.html usando un navegador de internet: click derecho sobre el archivo > abrir con
Google Chrome.

Comienza por correr el siguiente código (simplemente lo abres con el navegador, el

navegador lo ejecutará y te invitará a oprimir un botón, al oprimir el botón y aceptar se
ejecuta el script) y revisa en modo desarrollador que es posible ver el código JavaScript,
pero también los resultados del cómputo en la consola.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de HTML con JavaScript sin interacciones con el DOM</title>
</head>
<body>
<h1>Página para comprobar el uso de JavaScript sin interacciones con el DOM</h1>
<button onclick="asustador()">Oprime el botón</button>
<script>
function asustador() {
alert('¡Cuidado!. Tan pronto aceptes o hagas algo, comenzaré a ejecutar mi código de
manera oculta para tí. Acepta si no te da miedo esto. Pero te comparto un secreto: puedes ver mi
código en modo desarrollador y el resultado de mi código en la consola');
var largo = 10;
console.log('largo = ' + largo);
var ancho = 2;
console.log('ancho = ' + largo);
var alto = 3;
console.log('alto = ' + largo);
var volumen = largo * ancho * alto;
console.log('El volumen = ' + volumen);
}
 </script>
</body>
</html>

Agrega aquí capturas de pantalla en modo desarrollador que demuestren que lo anterior
es correcto

Conclusión 1. Con lo aprendido en este paso, explica qué normas mínimas hay que
seguir para poder insertar código de JavaScript en HTML. Nota: tu explicación debe ser
tan buena que servirá para consultas futuras

se debe agregar la etiqueta correcta que es <script> y debe ubicarse en el lugar correcto del
código html para que no hayan futuros errores en el cargado de la página.

Conclusión 2: Puede decirse que esta solución usa cómputo en la nube?

No, el código se ejecuta completamente en el navegador del usuario.

Paso 4. Aprende a programar una solución que combina varios archivos. En este caso un
archivo HTML y uno de JavaScript

Crea en tu computador un archivo de texto que se llame “micodigo.js”. Pégale el siguiente

código y guárdalo. Nota: el explorador debe ser configurado para que muestre la
extensión del archivo, para garantizar que la extensión sea jsl, no txt

function asustador() {
alert('¡Cuidado!. Tan pronto aceptes o hagas algo, comenzaré a ejecutar mi código de
manera oculta para tí. Acepta si no te da miedo esto. Pero te comparto un secreto: puedes ver mi
código en modo desarrollador y el resultado de mi código en la consola');
var largo = 10;
console.log('largo = ' + largo);
var ancho = 2;
console.log('ancho = ' + largo);
var alto = 3;
console.log('alto = ' + largo);
var volumen = largo * ancho * alto;
console.log('El volumen = ' + volumen);
}
Crea en tu computador, en el mismo lugar del caso anterior, un archivo de texto que se
llame “mi_html.html”. Pégale el siguiente código y guárdalo. Nota: el explorador debe ser
configurado para que muestre la extensión del archivo, para garantizar que la extensión
sea html, no txt

<!DOCTYPE html>
<html>
<head>
<title>Página con JavaScript externo</title>
</head>
<body>
<button onclick="asustador()">Oprime el botón</button>
<script src="micodigo.js"></script>
</body>
</html>

abre el archivo mi_html.html usando un navegador de internet: click derecho sobre el

archivo > abrir con Google Chrome

Pega pantallazos como evidencia del trabajo hecho

Comprueba qué cambios hay que hacer si se usa un ambiente de desarrollo como jsfiddle
para lograr el mismo efecto de una solución con un archivo HTML y uno en JavaScript.

En el ambiente de desarrollo mencionado se proporciona un lugar para escribir código en

html y javascript por lo que solo sería convertir el html en formato js o viceversa.

Conclusión. Con lo aprendido en este paso, explica qué normas mínimas hay que seguir
para poder crear una solución cuando hay varios archivos que forman parte de ella. Nota:
tu explicación debe ser tan buena que servirá para consultas futuras

Asegurarse que los archivos estén en el formato correcto y que la forma de llamarlos esté
correcta también.
Paso 5. Prueba usar JavaScript en consola para afectar una página web.
Puedes hacerle a Chat GPT esta consulta:
mi intención es solo comprender si usando JavaScript puedo cambiar la vista de una
página. Por ejemplo
● tengo abierta, en un navegador, mi página web personal con la URL:
https://sites.google.com/e3t.uis.edu.co/homeroortega/
● estoy en la consola del navegador
Necesito los comandos en JavaScript para cambiar el encabezado que ve el usuario.
Seguramente obtendrás un código como este:
document.querySelector('h1').textContent = "Efecto de mi JavaScript por consola";
escribelo en la consola y observa el efecto en la página.

Escribe abajo el comando usado

// Selecciona el primer <h1> en la página y cambia su texto.

document.querySelector('h1').textContent = 'Nuevo Texto para el Encabezado H1';

// si tiene id
// Selecciona el elemento con el id 'mi-encabezado' y cambia su texto.
document.getElementById('mi-encabezado').textContent = 'Nuevo Texto para el
Encabezado con ID';

Mediante una captura de pantalla muestra el efecto logrado en la página web

Explica cómo funciona esto en la interacción cliente-AJAX-Servidor. Hazle la

consulta a Chat GPT. Por ejemplo así:
Puedo decir que al lanzar este código en la consola ocurre lo siguiente: 1) la orden
que lanza el script llega a AJAX; AJAX solicita al servidor web cambiar el
encabezado; el servidor devuelve al navegador el nuevo encabezado?
No, la descripción que has proporcionado sobre lo que ocurre cuando lanzas el
código en la consola no es precisa en el contexto de cómo funciona JavaScript al
manipular el DOM en una página web. Vamos a desglosar por qué y explicar lo que
realmente ocurre:

### Descripción Incorrecta

Tu descripción sugiere el siguiente flujo:

1. La orden que lanza el script llega a AJAX.

2. AJAX solicita al servidor web cambiar el encabezado.
3. El servidor devuelve al navegador el nuevo encabezado.

### Descripción Correcta

Vamos a corregir y clarificar cada punto de tu descripción con lo que realmente

ocurre cuando ejecutas el código en la consola:

#### 1. La Orden que Lanza el Script Llega a AJAX

**Incorrecto**: El código que proporcionaste no utiliza AJAX ni realiza ninguna

solicitud de red. AJAX (Asynchronous JavaScript and XML) se utiliza para hacer
solicitudes asincrónicas a un servidor para obtener datos sin recargar la página
completa.

**Correcto**: Cuando lanzas el código en la consola, estás interactuando

directamente con el DOM del documento cargado en el navegador. El código se
ejecuta localmente en el contexto de la página web que tienes abierta. No hay
interacción con AJAX ni con un servidor en este caso.

#### 2. AJAX Solicita al Servidor Web Cambiar el Encabezado

**Incorrecto**: No se hace ninguna solicitud al servidor web para cambiar el

encabezado. AJAX se utiliza para interactuar con un servidor remoto para enviar o
recibir datos, pero tu código no incluye ninguna solicitud AJAX.

**Correcto**: El JavaScript en la consola directamente manipula el DOM del

documento que está cargado en tu navegador. Esto significa que cambia el
contenido de la página visible para el usuario sin ninguna comunicación con el
servidor.

#### 3. El Servidor Devuelve al Navegador el Nuevo Encabezado

**Incorrecto**: El servidor no está involucrado en devolver un nuevo encabezado

en este caso. Todo el proceso ocurre localmente en el navegador.

**Correcto**: El navegador simplemente actualiza el contenido de la página

 basado en el cambio en el DOM que realizaste con el código JavaScript. No hay
interacción con el servidor para obtener o devolver el nuevo encabezado.

conclusión:
El proceso de cambiar un encabezado usando JavaScript desde la consola es una
manipulación directa del DOM en el navegador y no implica ninguna comunicación
con un servidor a través de AJAX o de otro tipo. Los cambios son locales,
inmediatos y afectan solo la sesión de la página que está abierta en ese momento
en el navegador.

Tarea 2. Uso de JavaScript para programar las

acciones a realizar cuando el cliente oprima un
botón.
Buscaremos mejorar la solución de la práctica 10 para que los datos se actualicen
(refresquen) al oprimir un botón. El problema de la solución de la práctica 10 es que para
refrescar los datos, el cliente debe refrescar todo el sitio web en el navegador, lo cual
visualmente no es bueno, pero además se consumen muchos recursos. Esta acción
requiere una interacción de mayor nivel que la que ofrece HTML puro, se requiere un script
en JavaScript.

Paso 1. Mejora del código final de la Tarea 4 para que incluya un botón de refresco.

Consulta a Chat GPT como solucionar el problema.

Ejemplo de pregunta para Chat GPT:
Tengo un código HTML que contiene un frame. Quiero complementarlo para que
contenga un botón llamado "Refrescar". Quiero que, cuando el cliente oprima el botón, se
actualice el frame. El código HTML que tengo es el siguiente: [escribe aquí el código
obtenido en la Tarea 4]

Escriba aquí el código obtenido

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
 border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">
<h1>Órdenes recibidas para el despacho</h1>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</tbody>
</table>

<!-- Botón para refrescar el iframe -->

<button id="refrescarBtn" class="btn btn-primary">Refrescar</button>

<!-- Iframe -->

<iframe
id="miIframe"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS2wxSMgcHlsWYVDwnkbnf_R
gNpopjH6Ej7MVRp7Z-8kcdanLbITQ_kLLipqRFIJ1holaJu3kLPRpge/pubhtml"
width="250%" height="600" frameborder="0" scrolling="no"></iframe>

<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Script para refrescar el iframe -->

<script>
 // Función para refrescar el iframe
function refrescarIframe() {
var iframe = document.getElementById('miIframe');
iframe.src = iframe.src; // Actualiza el src para refrescar el contenido
}

// Agregar evento click al botón

document.getElementById('refrescarBtn').addEventListener('click', refrescarIframe);
</script>
</body>
</html>

En la página Web en versión edición crea una nueva versión de visualización de los
datos. Embebe allí el código obtenido en el paso 1, de la misma manera en como se
explicó en la tarea 4. Publica la página web nuevamente y pasa a la versión publicada.
Captura la pantalla de la página resultante con los cambios

Paso 2
Análisis. Analice el código del paso 1. Explique dónde y cómo ha sido declarada la
función JavaScript que realiza la tarea de refresco. Como ejemplo, puedes también
explicar el código usado para invocar esa función. Nota: tu explicación debe ser tan
buena que una persona la puede consultar para saber los pasos a seguir.

La función JavaScript que realiza la tarea de refresco del `iframe` se encuentra declarada
en una sección `<script>` del código HTML. Aquí se detallan su ubicación, su declaración
y cómo se integra en el flujo de trabajo de la página.

### Ubicación de la Función

La función está declarada dentro de una etiqueta `<script>` en la parte inferior del cuerpo
(`<body>`) del documento HTML. Esto es una práctica común que garantiza que todo el
contenido HTML esté completamente cargado antes de que el script se ejecute.
### Código Relacionado con la Función

```html
<script>
// Función para refrescar el iframe
function refrescarIframe() {
var iframe = document.getElementById('miIframe');
iframe.src = iframe.src; // Actualiza el src para refrescar el contenido
}

// Agregar evento click al botón

document.getElementById('refrescarBtn').addEventListener('click', refrescarIframe);
</script>
```

### Descripción Detallada

#### Declaración de la Función `refrescarIframe`

```javascript
function refrescarIframe() {
var iframe = document.getElementById('miIframe');
iframe.src = iframe.src; // Actualiza el src para refrescar el contenido
}
```

- **Palabra clave `function`**: Se usa para declarar una función en JavaScript.

- **Nombre de la función**: `refrescarIframe`. Este nombre es descriptivo y sugiere
claramente la acción que realiza la función.
- **Parámetros**: La función no toma parámetros, ya que su acción es específica y no
requiere información adicional para ejecutarse.
- **Cuerpo de la función**:
- `var iframe = document.getElementById('miIframe');`: Se selecciona el `iframe` por su
`id` (`miIframe`) utilizando `document.getElementById()`.
- `iframe.src = iframe.src;`: Esta línea reasigna la propiedad `src` del `iframe` con su
propio valor actual. Esto provoca que el navegador vuelva a cargar el contenido del
`iframe` desde la URL especificada en `src`.

#### Asignación del Evento `click` al Botón

```javascript
document.getElementById('refrescarBtn').addEventListener('click', refrescarIframe);
```

- **`document.getElementById('refrescarBtn')`**: Selecciona el botón por su `id`

(`refrescarBtn`).
- **`.addEventListener('click', refrescarIframe)`**: Asocia el evento `click` del botón a la
función `refrescarIframe`. Esto significa que cada vez que el usuario hace clic en el botón,
se ejecuta la función `refrescarIframe`.

### Flujo de Trabajo y Explicación

1. **Carga de la Página**: La página HTML se carga en el navegador, y los elementos

como el `iframe` y el botón se renderizan.
 2. **Declaración y Registro del Script**:
- **Función `refrescarIframe`**: Se declara la función que realizará la tarea de refrescar
el `iframe`.
- **Asociación del Evento**: Se añade un listener para el evento `click` del botón, que
llamará a `refrescarIframe` cuando el botón sea presionado.
3. **Interacción del Usuario**:
- El usuario hace clic en el botón "Refrescar".
- El evento `click` dispara la función `refrescarIframe`.
4. **Ejecución de la Función**:
- La función selecciona el `iframe` y reasigna su `src` a sí mismo.
- El navegador detecta el cambio en `src` y recarga el contenido del `iframe` desde la
URL especificada.

### Beneficios de Esta Implementación

- **Simplicidad**: El código es directo y fácil de entender. La función `refrescarIframe` es

clara en su propósito y su implementación es sencilla.
- **Eficiencia**: Colocar el script al final del `body` garantiza que todos los elementos
HTML estén disponibles cuando se ejecuta el script, evitando errores de referencia nula.
- **Interactividad**: La implementación de la función proporciona una manera eficiente de
interactuar con el `iframe` sin necesidad de recargar toda la página.

### Conclusión

La función `refrescarIframe` está claramente definida dentro de una etiqueta `<script>` en

el cuerpo de la página HTML. Su propósito es refrescar el `iframe` al reasignar su `src`, y
está vinculada a un botón mediante un listener de eventos, lo que facilita la interacción del
usuario para actualizar el contenido del `iframe` de forma dinámica y efectiva.

Tarea 3. Mejorar la solución anterior para que los

datos se actualicen (refresque) automáticamente
cada 10 segundos
Es posible que el cliente no desee estar oprimiendo un botón para que los datos en la
página se refresque. Pídele a Chat GPT que te ofrezca una modificación al código que ya
tienes para lograr este efecto

Escribe abajo cómo le harás la pregunta a Chat GPT

Modifica el código anterior para que en lugar de que el frame se refresque cada vez que
se oprima el botón, se refresque automáticamente cada 10 segundos.

Nuevo código HTML obtenido

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">
<h1>Órdenes recibidas para el despacho</h1>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</tbody>
</table>

<!-- Iframe -->

<iframe
id="miIframe"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS2wxSMgcHlsWYVDwnkbnf_R
gNpopjH6Ej7MVRp7Z-8kcdanLbITQ_kLLipqRFIJ1holaJu3kLPRpge/pubhtml"
width="250%" height="600" frameborder="0" scrolling="no"></iframe>

<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Script para refrescar el iframe automáticamente -->

<script>
// Función para refrescar el iframe
function refrescarIframe() {
var iframe = document.getElementById('miIframe');
iframe.src = iframe.src; // Actualiza el src para refrescar el contenido
}

// Configurar el refresco automático cada 10 segundos

setInterval(refrescarIframe, 10000); // 10000 milisegundos = 10 segundos
</script>
</body>
</html>

Evidencias en la página web, una vez sea re-publicada sobre esta tarea

Tarea 4. Crea una solución de HTML con

JavaScript que resulte más sorprendente. Algunos
ejemplos son:
● una gráfica x-y en un documeto HTML
● una curva del comportamiento de la temperatura que cambia dinámicamente con el
tiempo
 ● Un instrumento o indicador de aguja que muestre dinámicamente los cambios de la
temperatura.

Tarea 5. Crea una solución integral para el

departamento de despachos con JavaScript
● Un web service leerá los datos del google sheet que contiene los datos. Los
convertirá a un JSON y los entregará a través de una función doGet()
● Una página Web con JavaScript tendrá un código minimo en html y un javascript que
consultará el webservice anterior para conocer el tamaño de los datos en la
googlesheet. Determinará el tamaño de los datos y basado en ellos creará una tabla
apropiada para visualizarlos. Refrescará la lectura de los datos cada medio segundo.