Clase 15 - DOM y Events

#dom #events #javascript

Script tag

• Nos permite agregar JavaScript a cualquier documento HTML. El código JS se escribe dentro de la etiqueta <script>

<script>
  const number = 10
  console.log( number + 5 )
</script>

JavaScript Window Object

Seleccionar elementos del DOM

• A la hora de aplicar JavaScript en el navegador es común querer interactuar con la web.
• Para ello debemos seleccionar elementos del DOM y así poder usarlos dentro de nuestro código:

const $anchor = document.querySelector('a')
const $button = document.querySelector('button')
const $nameInput = document.querySelector('input[name="name"]')
const $messageBox = document.querySelector('.message-box')
const $notification = document.querySelector('#notification')

const $allInputs = document.querySelectorAll('input')
const $allButtons = document.querySelectorAll('button')

const $submitButton = document.getElementById('submit')

Eventos

• Son acciones que nos permiten controlar o revisar un comportamiento sobre un elemento del DOM.

const $button = document.querySelector('button')

$button.addEventListener('click', () => {})

• MDN events

Eventos típicos

• Algunos eventos ampliamente utilizados son:
  • click
  • submit
  • focus
  • blur
  • keydown
  • keyup
  • scroll
  • mouseover
  • mouseout
  • change

Eliminar un Event Listener

• Es normal eliminar un event listener cuando consideramos que no hace falta o porque su existencia puede desencadenar efectos en lugares no esperados.

const $button = document.querySelector('button')

const handleClick = () => {
  console.log('Hiciste click')
}

$button.addEventListener('click', handleClick)
$button.removeEventListener('click', handleClick)

Ejecutar un Evento una vez

• Si lo que se busca es ejecutar un evento una única vez, utilizamos el parámetro once con el valor true

const $button = document.querySelector('button')

const handleClick = () => {
  console.log('Hiciste click')
}

$button.addEventListener('click', handleClick, { once: true })

Abort Event Listener

• Podemos abortar un event listener cuando se cumpla la condición que necesitemos.
• Se realiza mediante el uso de AbortController()

const $button = document.querySelector('button')
let remainingClicks = 5
const controller = new AbortController()

const handleClick = () => {
  console.log('¡Hiciste click!')
  remainingClicks--

  if (remainingClicks === 0) {
    console.log('¡No te quedan clicks!')
    controller.abort()
  }

  console.log(`Te quedan ${remainingClicks} clicks!`)
}

$button.addEventListener('click', handleClick, { signal: controller.signal })

Ejercicios

Ejercicio 1

• Mediante el uso de HTML, CSS y JavaScript, diseñe un formulario de registro con los siguientes campos: first name, lastname, username, password, confirm password, birthday, newsletter checkbox. Con JavaScript realice las validaciones de datos que considere necesarias, por ejemplo que no se puedan poner números en los campos first name y last name.

Ejercicio 2

• Mediante el uso de HTML, CSS y JavaScript, diseñe una ventana modal que tenga un mensaje personalizado, un botón de confirmar, un botón de cancelar y un botón de cerrar.