Clase 16 - CSSOM y Web API

#dom #events #javascript #cssom #location #history #local-storage

CSSOM

• Manipular el DOM con JavaScript permite cambiar los estilos, clases y otros atributos de los elementos dinámicamente

input.addEventListener('input', () => {
  if(input.value.length < 5) {
    input.style.backgroundColor = 'red'
  } else {
    input.style.backgroundColor = 'green'
  }
})

• Otra manera de manipular los estilos de los elementos es dejando estilado en nuestro archivo CSS una clase inexistente y luego asignarle dicha clase al elemento con JavaScript

<input type="text" name="" id="name">

.is-invalid {
  color: red;
}

input.addEventListener('input', () => {
  if(input.value.length < 5) {
    input.classList.add('is-invalid')
  } else {
    input.classList.remove('is-invalid')
  }
})

• Continuando con el manejo de clases, otra manera de agregar y eliminar clases mediante JavaScript es con toggle

const information = document.getElementById('info')
const toggleBtn = document.getElementById('toggle-button')

toggleBtn.addEventListener('click', () => {
  information.classList.toggle('hidden')
})

---

JavaScript Window Object

Location

• Me proporciona información sobre la ubicación del documento actual y me permite manipular diferentes partes de una URL.

window.location
window.location.href
window.location.hostname
window.location.host
window.location.pathname
window.location.protocol
window.location.search
window.location.hash
window.location.port
window.location.origin

window.location.assign()
window.location.replace()
window.location.reload()

History

• Proporciona acceso y control sobre el historial del navegador. Entre otras tareas podemos avanzar, retroceder o capturar información sobre las URL visitadas.

window.history.back()
window.history.forward()
window.history.go()
window.history.length

---

Storage

Local Storage

• Nos permite almacenar datos de manera persistente en el navegador.

localStorage.setItem('name', 'Juan')
const name = localStorage.getItem('name')

localStorage.removeItem('name')

localStorage.clear()

• Al momento de almacenar u obtener objetos debemos tener en cuenta el uso de:
  • JSON.stringify()
  • JSON.parse()

const user = {
  name:'Juan',
  age:28
}

localStorage.setItem('user', JSON.stringify(user))

const user = JSON.parse(localStorage.getItem('user'))

• Para acceder al localStorage debemos ir a las devTools (F12) - Application - Local Storage

Session Storage

• Cumple la misma funcionalidad del Local Storage pero la diferencia es que los datos almacenados en el Session Storage desaparecen cuando cerramos la ventana.

sessionStorage.setItem('datos', 'muchos datos')

const name = sessionStorage.getItem('name')

sessionStorage.removeItem('name')

---

Ejemplos de implementación

Pagination y rutas dinámicas con Astro

• Página de digimon

Formulario con astro (astroV2.4.1)

• Formulario con validaciones

---

Ejercicio

• Haciendo uso del formulario creado en la clase anterior. En tiempo real, cambiar los estilos y añadir un <span> en cada input para mostrar un texto correspondiente si la validación falla. Además, guardar los datos en el localStorage una vez que las validaciones no fallen.