` para ocultar la notificación inicialmente, con:
.. code-block:: html
:caption: Notificación interactiva oculta
:emphasize-lines: 2
4. Compruebe la vista previa del resultado en el navegador.
Javascript: función de autoejecución
------------------------------------
1. Utilice un cliente de IAG en el documento *js/file01.js*, para:
a) Crea una :term:`función de autoejecución` que muestre un mensaje de bienvenida con una alerta y por consola.
.. dropdown:: Ver la solución
:color: success
.. code-block:: javascript
:emphasize-lines: 3-6
"use strict";
(() => {
alert("¡Bienvenido a la página!");
console.log("Mensaje de bienvenida mostrado.");
})();
2. Compruebe la vista previa del resultado y la :term:`consola del navegador` para verificar la ejecución del código.
Javascript: DOM
---------------
1. Utilice un cliente de IAG en el documento *js/file01.js*, para:
a) Crear la :term:`función flecha` **showToast** que obtiene la referencia al elemento con el ID `toast-interactive`. En caso de existir la referencia muestre la notificación por pantalla, agregando la clase `md:block`.
b) Dentro de la función de autoejecución, elimine el codigo anterior y llame a la función showToast.
.. dropdown:: Ver la solución
:color: success
.. code-block:: javascript
:emphasize-lines: 3-8, 11
"use strict";
const showToast = () => {
const toast = document.getElementById("toast-interactive");
if (toast) {
toast.classList.add("md:block");
}
};
(() => {
showToast();
})();
2. Compruebe la vista previa del resultado y la consola del navegador para verificar la ejecución del código.
Javascript: Eventos
-------------------
1. Utilice un cliente de IAG en el documento *js/file01.js*, para:
a) Crear la función flecha **showVideo** que obtiene la referencia al elemento con el ID `demo`. En caso de existir la referencia, agregue un :term:`evento` `click` que abra un enlace a un video de YouTube en una nueva pestaña del navegador.
b) Dentro de la función de autoejecución, agregue la llamada a la función showVideo.
.. dropdown:: Ver la solución
:color: success
.. code-block:: javascript
:emphasize-lines: 5-12, 16
"use strict";
const showToast = () => { ... }
const showVideo = () => {
const demo = document.getElementById("demo");
if (demo) {
demo.addEventListener("click", () => {
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
});
}
};
(() => {
showToast();
showVideo();
})();
2. Compruebe la vista previa del resultado y la consola del navegador para verificar la ejecución del código.
JSDoc
-----
1. Utilice un cliente de IAG en el documento *js/file01.js*, para:
a) Agregar comentarios JSDoc a las funciones **showToast** y **showVideo**.
b) Asegúrese de que los comentarios JSDoc incluyan descripciones, parámetros y tipos de retorno.
2. Valide su respuesta con `JSDoc: La Guía Definitiva para Documentar tu Código JavaScript `_.
Versionamiento
--------------
1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio *landing*.
2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.
Vercel
------
1. Verifique el despliegue continuo (CD) del proyecto en Vercel.
Conclusiones
============
.. topic:: Preguntas de cierre
* ¿Qué limitaciones encontraste en las explicaciones o ejemplos generados por la IA que te motivaron a investigar más sobre cómo funcionan getElementById y addEventListener en el flujo de ejecución de JavaScript?
* ¿Cómo resolviste errores o comportamientos inesperados al combinar estructuras condicionales con eventos del DOM, y qué papel tuvo tu razonamiento frente a lo sugerido por la IA?
* ¿Cómo aseguras que el uso de la inteligencia artificial no sustituya tu proceso de aprendizaje, sino que complemente tu desarrollo autónomo al escribir e interpretar código JavaScript?
Actividades autónomas
=====================
Recursos extras
------------------------------
En redes:
.. raw:: html
DOM con JavaScript