JavaScript Manejo de Eventos
41 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

¿Cuál de las siguientes NO es una razón por la que se desaconseja el uso de atributos ON para manejar eventos en JavaScript?

  • Puede llevar a la repetición innecesaria de bloques de código.
  • Complica el mantenimiento del software a largo plazo.
  • Dificulta la separación del código HTML, CSS y JavaScript.
  • Es incompatible con la mayoría de los navegadores modernos. (correct)

    • ¿Cuál es el método más moderno y recomendado para manejar eventos en JavaScript, introducido en ES6?

  • Implementación de observables con RxJS.
  • Utilización de `addEventListener`. (correct)
  • Asignación de funciones a propiedades `on` de elementos del DOM.
  • Uso de atributos `ON` directamente en el HTML.

    • Si un usuario presiona y suelta el botón del mouse sobre un elemento, ¿cuántos eventos del mouse se disparan en total, como mínimo?

  • 2 (correct)
  • 4
  • 3
  • 1

    • Un usuario desplaza el puntero del mouse sobre un elemento HTML sin hacer clic. ¿Cuáles eventos del mouse se disparan?

    <p><code>mouseover</code> y posiblemente <code>mousemove</code> repetidamente</p> Signup and view all the answers

    ¿Qué evento se activa cuando un usuario presiona un botón del mouse y lo mantiene pulsado sobre un elemento HTML?

    <p>mousedown</p> Signup and view all the answers

    Después de que un usuario hace doble clic en un elemento, ¿cuántos eventos click, mousedown y mouseup se habrán disparado en total como mínimo?

    <p>2 clicks, 2 mousedown, 2 mouseup</p> Signup and view all the answers

    Un usuario coloca el cursor del mouse sobre un elemento y luego lo mueve fuera del elemento. ¿Qué eventos se disparan en ese orden?

    <p><code>mouseover</code>, <code>mouseout</code></p> Signup and view all the answers

    ¿Cuál de los siguientes eventos JavaScript NO está directamente asociado con los elementos <audio> o <video>?

    <p>change</p> Signup and view all the answers

    En el contexto del formulario descrito, ¿qué método se utiliza para visualizar la información del objeto nuevoProducto de forma tabulada en la consola del navegador?

    <p>console.table(nuevoProducto)</p> Signup and view all the answers

    Según el texto, ¿cuál es el propósito de capturar el evento 'submit' del formulario en JavaScript, después de agregar el enlace JS al elemento <form> con querySelector?

    <p>Para evitar el envío por defecto del formulario y mostrar información del objeto <code>nuevoProducto</code> en la consola.</p> Signup and view all the answers

    ¿Cuál de las siguientes afirmaciones describe mejor la característica principal de WebStorage mencionada?

    <p>Permite almacenar datos en el navegador del usuario, ya sean temporales o persistentes.</p> Signup and view all the answers

    En el contexto del formulario, ¿qué función realiza el evento ‘change’ definido en cada input type (excepto input type codigo)?

    <p>Permite completar la propiedad correspondiente del objeto <code>nuevoProducto</code>, para cada <em>input type</em> al ser modificado.</p> Signup and view all the answers

    ¿Cuál es el propósito principal de usar document.querySelector('div.carrito-image') en el contexto del código proporcionado?

    <p>Seleccionar el primer elemento <code>div</code> que tenga la clase <code>carrito-image</code> en el documento HTML.</p> Signup and view all the answers

    ¿Qué función cumple el objeto navigator en la función navegarHaciaDocumentoHTML?

    <p>Proporcionar información sobre el navegador y permitir la navegación.</p> Signup and view all the answers

    ¿Cuál es el papel del método addEventListener en el código JavaScript proporcionado?

    <p>Asociar un evento a un elemento HTML y ejecutar una función cuando ocurre este evento.</p> Signup and view all the answers

    ¿Qué tipo de función se utiliza como 'callback' en el método addEventListener en el ejemplo proporcionado?

    <p>Una función anónima o <em>arrow function</em>.</p> Signup and view all the answers

    En el contexto del código, ¿qué acción se ejecuta cuando se hace clic en el elemento div con la clase carrito-image?

    <p>Se navega a la página <code>carrito.html</code>.</p> Signup and view all the answers

    ¿Por qué se considera que la función navegarHaciaDocumentoHTML es genérica?

    <p>Porque puede ser reutilizada para navegar a cualquier documento HTML en la aplicación.</p> Signup and view all the answers

    ¿Qué valor se espera recibir como parámetro la función navegarHaciaDocumentoHTML?

    <p>Una ruta o el nombre de un documento HTML.</p> Signup and view all the answers

    Además del evento click, ¿qué otro tipo de evento se menciona brevemente en el texto?

    <p>Evento <code>mousemove</code>.</p> Signup and view all the answers

    ¿Cuál es la diferencia fundamental entre el uso del evento click y el evento mousemove según el texto?

    <p>El evento <code>click</code> se activa al presionar un botón, mientras que <code>mousemove</code> se activa al mover el mouse</p> Signup and view all the answers

    ¿Cuál método se utiliza para enlazar los elementos input del formulario con JavaScript en el ejemplo proporcionado?

    <p><code>querySelector</code></p> Signup and view all the answers

    Según el código proporcionado, ¿qué tipo de evento se captura utilizando addEventListener sobre el elemento inputNombre?

    <p><code>keypress</code></p> Signup and view all the answers

    ¿Qué hace el método console.log(inputNombre.value) dentro del manejador del evento keypress?

    <p>Muestra el texto que se ha escrito en el campo de texto.</p> Signup and view all the answers

    ¿En qué momento se dispara el evento change en un elemento input?

    <p>Cuando el <em>input</em> pierde el foco y su valor ha cambiado.</p> Signup and view all the answers

    Si se desea guardar el contenido de los campos del formulario en el objeto nuevoProducto, ¿qué evento se debe utilizar, con excepción de inputCodigo?

    <p>Evento <em>change</em>.</p> Signup and view all the answers

    Según el contexto, ¿por qué se excluye inputCodigo de la captura de eventos change?

    <p>El texto no especifica ninguna razón concreta.</p> Signup and view all the answers

    ¿Qué significa que los elementos input estén ‘enlazados’ desde JS mediante querySelector?

    <p>Que se tiene una referencia a esos elementos del DOM, y se pueden manipular.</p> Signup and view all the answers

    En el objeto nuevoProducto, ¿qué tipo de dato se espera para la propiedad importe?

    <p>Un número decimal.</p> Signup and view all the answers

    Si un usuario escribe 'Producto 1' en inputNombre y luego presiona la tecla 'Tab', ¿qué evento se activa después de soltar 'Tab'?

    <p>El evento <em>change</em> del inputNombre se activa.</p> Signup and view all the answers

    Si el usuario escribe en el campo inputNombre y rápidamente cambia al siguiente campo, el evento keypress, ¿qué ocurre con el manejador del evento vinculado a inputNombre?

    <p>El manejador de <em>keypress</em> se ejecuta con cada pulsación de tecla en dicho campo.</p> Signup and view all the answers

    ¿Qué función principal tiene el evento change en el contexto del código proporcionado?

    <p>Actualizar un objeto literal con los valores ingresados por el usuario en los campos del formulario.</p> Signup and view all the answers

    Según el texto, ¿cuál es el desencadenante principal del evento submit en un formulario?

    <p>Cuando se hace clic en un elemento <code>input type submit</code> o <code>button type submit</code>.</p> Signup and view all the answers

    ¿Por qué el texto sugiere dejar el control de los eventos focus y blur a CSS en lugar de JavaScript?

    <p>Porque estos eventos son principalmente relevantes para el diseño visual, cual es la función de CSS.</p> Signup and view all the answers

    ¿Cuál es la diferencia fundamental entre la forma en que se procesan los eventos de formulario tradicionalmente y la forma en que son controlados con JavaScript (JS)?

    <p>Los eventos tradicionales los define el navegador de web por defecto, y JS permite controlarlos de manera personalizada.</p> Signup and view all the answers

    En el contexto del código proporcionado, ¿qué ocurriría si se elimina el eventListener del evento change?

    <p>El objeto <code>nuevoProducto</code> no se actualizaría automáticamente con cada cambio en los campos de entrada.</p> Signup and view all the answers

    Además del evento submit, ¿que otros dos eventos son propios de los formularios?

    <p>focus y blur</p> Signup and view all the answers

    Basado en el ejemplo del código que utiliza el evento change, ¿cómo se actualiza el objeto nuevoProducto?

    <p>Se actualiza directamente cuando se cambia alguno de los campos de entrada del formulario mediante asignaciones de valor.</p> Signup and view all the answers

    ¿Cuál es el rol principal de JavaScript en la gestión de formularios, de acuerdo con el texto?

    <p>Supervisar y personalizar el comportamiento de los formularios y la forma en que envían datos.</p> Signup and view all the answers

    En el código provisto, ¿cómo influye el uso del evento change en la experiencia del usuario?

    <p>Permite visualizar los datos actualizados en tiempo real a medida que los ingresan, sin esperar el envío del formulario.</p> Signup and view all the answers

    Si se quiere ejecutar una función específica después de que un usuario deje de enfocar un campo de un formulario, ¿qué evento se debería utilizar?

    <p>blur</p> Signup and view all the answers

    Study Notes

    Módulo 2. Herramientas avanzadas de Javascript

    • Este módulo estudia conceptos esenciales como eventos, atributos y eventos on, addEventListener.
    • Se estudian las categorías de eventos: ratón, teclado, formularios y navegador web.
    • Se trata el almacenamiento de datos locales y su integración con DOM.
    • Se aborda la gestión de datos dinámicos usando promesas JS y el comportamiento de tecnologías de servidor.
    • JS intercambia información a través de archivos JSON o servidores backend.

    Unidad 1: Eventos y almacenamiento de la información

    • El manejo de eventos es fundamental para la interacción del usuario con la aplicación web.
    • Los eventos desencadenan la interactividad en la aplicación.
    • Los navegadores web permiten almacenar datos localmente (preferencias, configuraciones).
    • Minimizar peticiones al servidor backend mejora la velocidad de respuesta.

    Tema 1: El manejo de eventos

    • Los eventos permiten controlar las acciones del usuario en aplicaciones web.

    • Se puede detectar diferentes eventos y definir acciones específicas en respuesta a ellos.

    • Categorización de eventos facilita su organización y recordatorio.

    • Manejo de eventos (event handling) asocia un objeto JS a un elemento HTML para ejecutar una función al ocurrir un evento.

    • Las funciones pueden ser anónimas o convencionales, creadas para cada evento.

    • El navegador tiene un escuchador que verifica las funciones asociadas a cada evento.

    • El callback es la respuesta que se ejecuta tras detectarse el evento.

    • Hay diferentes formas de manejar eventos (atributos on, eventos on, addEventListener).

    • Click: El usuario hace clic en un elemento.

    • Dblclick: El usuario hace doble clic en un elemento.

    • Mousedown: El usuario pulsa un botón sobre un elemento.

    • Mouseup: El usuario suelta un botón sobre un elemento.

    • Mouseover: El usuario pasa el ratón sobre un elemento.

    • Mouseout: El usuario sale del ratón de un elemento.

    • Mousemove: El usuario mueve el ratón sobre un elemento.

    Formas de utilizar eventos

    • Se muestran diferentes formas de manejar eventos en JavaScript, todas con el mismo resultado final.

    Eventos del teclado

    • Los eventos de teclado cubren la pulsación de teclas y el cambio de estado de elementos HTML.
    • Se pueden aplicar a elementos que permiten el ingreso de información (INPUT, portapapeles).
    • Keypress: Se activa al presionar teclas, usualmente durante la escritura en un campo de texto.
    • Keydown: Se activa al presionar una tecla y mantenerla pulsada.
    • Keyup: Se activa al soltar una tecla pulsada.
    • Change: detecta cambios en los elementos HTML.
    • Search: evento específico para elementos input de tipo search.
    • Enter: se activa cuando el usuario presiona la tecla Enter.

    Eventos de formulario

    • Los formularios web existen antes que JS.
    • JS permite controlar el comportamiento de los formularios.
    • Focus: el usuario enfoca un elemento del formulario.
    • Blur: el elemento pierde el foco.
    • Submit: se envía el formulario.

    Tema 2: Datos: transporte y almacenamiento

    • WebStorage permite almacenar datos en el navegador (temporales o persistentes).
    • LocalStorage almacena datos de forma persistente (hasta que se eliminen).
    • SessionStorage almacena datos por sesión (desaparecen al cerrar la pestaña).
    • IndexedDB es un almacén de datos NoSQL, más versátil pero más complejo de manejar.
    • Cookies son un almacén de datos utilizado desde los primeros navegadores, con una capacidad limitada.
    • LocalStorage y SessionStorage funcionan como pares clave-valor.
    • Los métodos SetItem(), GetItem(), Removeltem(), y Clear() permite manipular el almacenamiento local.
    • JSON permite almacenar datos estructurados en LocalStorage. JSON.stringify() transforma objetos a cadenas JSON. JSON.parse() transforma cadenas JSON a objetos.

    Tema 3: Combinar herramientas

    • Integración de DOM y datos dinámicos (ejemplos prácticos).
    • El DOM (Document Object Model) maneja la estructura del documento HTML y permite manipular elementos.
    • La persistencia de datos se logra con LocalStorage o SessionStorage.
    • Los eventos click, change, submit controlan la interacción del usuario con formularios.
    • Los eventos dinámicos permiten la actualización de la UI (User Interface) de forma automática.

    Tema 4: Promesas JavaScript

    • Las promesas representan el resultado eventual de una operación asíncrona.
    • Las promesas se gestionan en tres estados: pendiente (pending), cumplida (fulfilled), o rechazada (rejected).
    • El método .then() maneja la ejecución tras la resolución(fulfilled).
    • El método .catch() maneja los errores (rejected).
    • El método .finally() maneja la finalización (independientemente de si se cumplió o no la promesa).
    • Las promesas facilitan la gestión de operaciones asíncronas de forma más estructurada.

    Unidad 2: AJAX y Fetch

    • AJAX revolucionó la forma en que las aplicaciones web interactúan con los servidores.
    • El modelo cliente-servidor se basa en peticiones HTTP, donde el cliente inicializa la comunicación y el servidor responde.
    • Los datos se intercambian a través de formatos como JSON y XML.
    • Fetch es el método moderno y más eficiente para realizar peticiones HTTP en JavaScript.

    Otros

    • Se incluyen tablas y figuras para ilustrar conceptos.
    • Se proveen ejemplos de código.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    Módulo 2. Herramientas Avanzadas de Javascript PDF

    Description

    Este cuestionario evalúa tus conocimientos sobre el manejo de eventos en JavaScript. Se abordan tanto prácticas recomendadas como eventos específicos asociados a interacciones del usuario. Responde preguntas sobre el uso de atributos ON, eventos del mouse y multimedia.

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser