Eventos y DOM y ChatGPT

Instrucciones

Utiliza ChatGPT y github Copilot para resolver la siguiente actividad. Antes de hacer los ejercicios, contesta las siguientes preguntas. Pregúntale a ChatGPT las preguntas, y verifica que lo que haya generado es correcto. Cuando sea necesario, agrega un ejemplo de código. Incluye una fuente que valide o invalide lo que generó. Agrega elementos de HTML con tus respuestas. (Protip: usa ChatGPT para que las respuestas las ponga directamente en elementos de html.)

Terminando las preguntas y los ejercicios, documenta tu experiencia con las herramientas en la sección de conclusiones.

Preguntas

  1. ¿Qué es el DOM?
      2. El DOM (Document Object Model) es una interfaz de programación que proporciona una representación estructurada y jerárquica de un documento web, como HTML, XHTML o XML. Organiza el contenido en forma de un árbol de nodos, donde cada elemento HTML se representa como un nodo. A través del DOM, los desarrolladores pueden acceder, manipular y modificar los elementos del documento, como agregar o eliminar nodos, cambiar atributos y manipular eventos. Es esencial en el desarrollo web, ya que permite crear aplicaciones dinámicas e interactivas utilizando lenguajes de programación como JavaScript.
  2. ¿Qué es un nodo?
      3. Un nodo, en el contexto del Document Object Model (DOM), es una entidad que representa un elemento individual en un árbol jerárquico de un documento web. Cada nodo puede tener propiedades, atributos y eventos asociados, y se utilizan para acceder, manipular y modificar el contenido y la estructura del documento.
  3. ¿Cómo se accede a un elemento del DOM?
      4. En el DOM, se accede a un documento utilizando JavaScript. Hay varias formas de acceder a un documento en el DOM:
    1. Utilizando el objeto global `document`: El objeto `document` es una referencia al documento actual y proporciona métodos y propiedades para interactuar con él. Puedes acceder a él directamente usando `document`, por ejemplo: `var doc = document;`.
    2. Accediendo a elementos por su ID: Si conoces el ID único de un elemento en el documento, puedes acceder a él utilizando el método `getElementById()`. Por ejemplo: `var elemento = document.getElementById('miId');`.
    3. Accediendo a elementos por su etiqueta: Puedes acceder a elementos utilizando su etiqueta HTML utilizando los métodos `getElementsByTagName()` o `querySelectorAll()`. Por ejemplo: `var elementos = document.getElementsByTagName('div');` o `var elementos = document.querySelectorAll('div');`.
    4. Accediendo a elementos por su clase: Si deseas acceder a elementos por su clase CSS, puedes utilizar los métodos `getElementsByClassName()` o `querySelectorAll()`. Por ejemplo: `var elementos = document.getElementsByClassName('miClase');` o `var elementos = document.querySelectorAll('.miClase');`.
      5. Estos son solo algunos ejemplos de cómo acceder a un documento en el DOM utilizando JavaScript. Hay varias otras formas y métodos disponibles según tus necesidades específicas.
  4. ¿Cómo se modifica un elemento del DOM?
      5. Para modificar un elemento del DOM, puedes utilizar los métodos `innerHTML` o `textContent`. Por ejemplo: `document.getElementById('miId').innerHTML = 'Nuevo contenido';` o `document.getElementById('miId').textContent = 'Nuevo contenido';`.
  5. ¿Cuál es la diferencia entre getElementby* y querySelector*?
      6. En resumen, getElementBy* es más limitado en cuanto a las opciones de selección de elementos y devuelve una colección de elementos, mientras que querySelector ofrece una sintaxis más flexible y poderosa, y devuelve solo el primer elemento que coincide con el selector.
  6. ¿Qué es un evento?
      7. Un evento es una acción o suceso que ocurre en una página web, como hacer clic en un elemento o mover el mouse. Los eventos permiten que la página web sea interactiva y responda a las acciones del usuario.
  7. ¿Qué es un listener?
      8. es una función o bloque de código que se adjunta a un elemento de un programa o página web para "escuchar" y responder a eventos específicos que ocurren en ese elemento. Cuando se dispara un evento, el listener detecta y captura ese evento, y luego ejecuta la acción correspondiente o la lógica programada en respuesta a dicho evento. En resumen, un listener está atento a eventos y actúa en consecuencia.
  8. ¿Qué es un callback?
      9. Un callback, en términos sencillos, es una función que se pasa como argumento a otra función y se invoca más tarde, generalmente en respuesta a un evento o cuando se cumple una condición determinada. El propósito principal de un callback es permitir que el código asíncrono se ejecute de manera controlada y secuencial. Al utilizar callbacks, se puede definir la lógica que se ejecutará después de que se complete una tarea o se produzca un evento, lo que permite una programación más flexible y basada en eventos.
  9. ¿Qué es un objeto de evento?
      10. un objeto de evento es una estructura de datos que contiene información relevante sobre un evento y se utiliza para controlar y responder a eventos específicos en un programa o entorno web.

Ejercicios de código

Usa ChatGPT y copilot para resolver los ejercicios. Por cada ejercicio, pídele a ChatGPT o a copilot que te genere los comentarios. Verifica los resultados antes de subirlos a tu repo.

1. Modifica el siguiente elemento para mostrar la posición del mouse en el documento:

Posición del mouse:

2. Al dar click al siguiente botón, obtén el nombre y apellido de las siguientes cajas de texto, y agrega, después del botón, un elemento que tenga el nombre completo.

First name:
Last name:

3. Agrega el código para agregar una fila, o una columna, a la siguiente tabla al dar click al botón correspondiente.

Row 1 column 1 Row 1 column 2
Row 2 column 1 Row 2 column 2

4. Incluye dos cajas de input, para solicitar al usuario la posición de la fila y columna de la siguiente tabla, y otra para solicitar un texto. Al apretar el botón, actualiza el contenido de esa tabla en la posición que solicitaste, con la cadena de texto que solicitaste.

Row1 cell1 Row1 cell2 Row1 cell3
Row2 cell1 Row2 cell2 Row2 cell3
Row3 cell1 Row3 cell2 Row3 cell3

5. Agrega el código para quitar o agregar elementos a la lista de opciones. Los colores pueden ser aleatorios.

6. Al poner el mouse encima de la siguiente imagen, genera dos números aleatorios entre 300 y 600 para el width y height de una imagen. Reemplaza la imagen de placeholder por otra similar con el tamaño random que generaste. El evento solo se dispara cuando el mouse entra en la imagen.

Conclusiones

Experiencia general

Mi experiencia general es fue buena, pues aprendí a manejar las herramientas mencionadas para mejorar mi aprendizaje con DOM. También me fue de mucha ayuda que ChatGPT me explica el código generado, entonces para mi fueron más claros los ejercicios.

¿Cuándo y para qué usarías ChatGPT y cuándo Copilot?

Usaría ChatGPT más que nada para preguntas teorícas o la explicación de cierto códgio y Copilot para la programación en si.

Ventajas de usar AI para programar

Considero que las ventajas es que te puede ayudar si te atoras en algún momento o incluso podría optimizar el código siempre y cuando funcione. Incluso nos puede ayudar a recordar eventos o ciertos atributos de algunos objetos que no nos acordemos que existen.

Desventajas de usar AI para programar

Una desventaja es que no siempre el código proporcionado puede ser adecuado o no el más óptimo siempre por lo que aún es necesaria la mente humana para asegurarnos que no haya detalles o fallas como esas.

Referencias Proporcionadas por ChatGPT

W3Schools - DOM Tutorial: w3schools.com. (s.f.). DOM Tutorial. Recuperado el 15 de mayo de 2023, de https://www.w3schools.com/js/js_htmldom.asp

JavaScript.info - Document Object Model: JavaScript.info. (s.f.). Document Object Model. Recuperado el 15 de mayo de 2023, de https://javascript.info/document