Vanilla JavaScript

El objeto documento y el objeto ventana son dos de los objetos padre a los que podemos acceder con JavaScript. El objeto documento en sí está subordinado al objeto ventana. Creo que todo el mundo los conoce, porque son omnipresentes sobre todo cuando se desarrollan aplicaciones web con vanilla javascript.

Este artículo pretende mostrar algunas de las características prácticas de ambos. No hace falta una introducción más detallada de lo que son exactamente estos dos, ahora te daré algunos ejemplos prácticos que puedes utilizar sin muchos conocimientos previos.

El menú contextual es un evento del DOM, que se activa cuando un usuario hace clic con el botón derecho en un elemento del DOM que el menú contextual quiere llamar. El menú contextual es simplemente el menú que se muestra por defecto cuando un usuario hace clic con el botón derecho del ratón en una página web, a menos que la página web procese el evento de forma diferente, como haremos en un momento. Así que, aunque no se sepa el nombre, el pequeño menú tiene un aspecto diferente según el sistema operativo y ofrece cosas como «guardar imagen como», «examinar», «recargar» &»volver».
Básicamente, podemos utilizar el evento contextmenu en el DOM para realizar nuestra propia acción cuando el usuario haga clic con el botón derecho.

Hacer clic con el botón derecho y bloquear la visualización del menú contextual por defecto

<div id="nocontext">No context menu available for this</div><script>
noContext = document.getElementById('nocontext')noContext.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
</script>

Así que configuramos un EventListener para nuestro <div>, que debe ejecutarse cuando se llame al menú contextual, es decir, con un clic derecho. Devuelve un evento, que podemos bloquear con la función estándar preventDefault.

El caso por defecto sería como hacer clic con el botón derecho en el menú contextual. Pero con el preventDefault bloqueamos eso. Así que no pasa nada.

Por supuesto, no sólo podemos bloquear el evento estándar, sino que también podemos ejecutar todo tipo de código cuando el usuario hace clic con el botón derecho. Luego podemos combinar esto con el preventDefault para ofrecer nuestro propio menú contextual, por ejemplo:

contextAvailable.addEventListener('contextmenu', (e) => {
console.log('you rightclicked this')
e.preventDefault()
})

El modo de diseño de tu documento

Hasta la investigación para este artículo esto era completamente desconocido para mí, pero realmente esta característica puede ser muy práctica. Puedes usarla, por ejemplo, para un sistema de gestión de contenidos, o para editar rápidamente sin código, para visualizar posibles cambios de contenido en un sitio web.
Porque lo que designMode hace posible es que puedas editar todo el contenido de una web que miramos en el navegador sin tener que cambiar el código HTML de las devtools.

Puedes probarlo ahora mismo. Sólo tienes que ir a cualquier sitio web, abrir la consola e introducir lo siguiente:

document.designMode = "on"

Ahora simplemente puedes editar el sitio web mostrado como si fuera un documento de Word. Muy chulo, ¿no?
El designMode sólo conoce dos estados: Activado y desactivado. Así que si quieres desactivarlo sólo tienes que hacer lo siguiente:

document.designMode = "off"

Si quieres proteger elementos individuales para que no cambien el contenido, puedes darles el siguiente atributo: (Entonces sólo podrá eliminarlos completamente, pero no manipularlos)

<i contenteditable = "false">This is not editable.</i>

Copiar algo al portapapeles de los usuarios con código

Originalmente, el conocido document.execCommand() estaba destinado a este propósito, pero ahora se considera obsoleto.
En su lugar, la API del Portapapeles está ahora disponible para la copia automática de contenido utilizando JavaScript.
Se puede utilizar a través del objeto navigator, que está subordinado al objeto window.

Veamos un ejemplo en el que, tras pulsar el botón, copiamos al portapapeles el texto introducido en el campo de entrada:

Obtener el estado del documento

Especialmente para el desarrollo de webapps más complejas y de rendimiento optimizado, se deben realizar investigaciones del tiempo de carga &comportamiento general del documento para encontrar posibles puntos débiles o mejorar el rendimiento y la UX.

Por lo tanto, con document.readyState podemos acceder al estado actual del documento y tomar otras decisiones basadas en el resultado.

Aquí están los posibles resultados, document.readyState puede devolver:

• uninitialized – No ha empezado a cargar todavía
• loading – Está cargando
• loaded – Se ha cargado
• interactive – Ha cargado lo suficiente y el usuario puede interactuar con él
• complete – Totalmente cargado
  Source: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Si se juega un poco con ello en la práctica, hay algunos resultados interesantes. Para ello he creado un pequeño boilerplate HTML, con el que damos salida al estado en diferentes lugares. Cada uno de los scripts externos contiene simplemente console.log(document.readyState)

Aquí está, en orden cronológico, lo que nuestra web registra entonces:

• normal: loading
• script-tag: loading
• defer: interactive
• async: interactive
• onload body: complete

Las diferentes formas de incluir los scripts externos funcionan aquí como se esperaba. Pero es interesante que si incluimos una sola imagen grande en la página, el tiempo de carga de la imagen también retrasará el evento onload de la etiqueta body.

Así que en cualquier caso el estado es «completo», si emitimos el estado con el evento onload.

Trabajando con el foco/elemento activo

Cuando se trata de elementos con los que el usuario de la web puede realmente interactuar, como botones, entradas y áreas de texto, éstos pueden tener el llamado foco. Si una entrada tiene el foco, y escribimos algo en el teclado, se escribe en el campo de entrada. Si el campo no tiene el foco, no se escribe en el campo de entrada. Creo que todo el mundo sabe lo que es el foco.

Determinar qué elemento tiene el foco

Quizás ya conozcas el atributo onfocus, que es el evento cuando un elemento obtiene el foco. Entonces podríamos usarlo para crear animaciones CSS muy chulas o, si queremos analizar el comportamiento del usuario, guardar este evento.

De la misma manera, podemos determinar qué elemento tiene el foco sin tener que dar a todos los elementos el atributo onfocus.
Podemos hacerlo de la siguiente manera:

var x = document.activeElement.idconsole.log(x)

Así podemos obtener el id del elemento que tiene el foco/está activo.

Cambiar el foco manualmente

Especialmente en lo que respecta a la UX, puede ser útil a veces aliviar al usuario de la selección de elementos. Por ejemplo, si ha hecho una entrada incorrecta en un formulario, y queremos que cambie su entrada en todos los campos de entrada:

document.getElementById('input1').focus()

Lectura del estilo actual de un elemento

En aplicaciones web grandes y dinámicas cambiamos constantemente el estilo activo de cualquier elemento en el DOM.
También podemos emitirlo a dos para cualquier momento, así que comprueba qué atributos y valores CSS tienen nuestros elementos.

1. element.styletambién puede usarse para leer estilos, pero está pensada para editarlos
2. Window.getComputedStyle()está hecha para obtener el styling actual

Así que con la última función podemos obtener un objeto completo con todos los estilos del elemento:

let box = document.getElementById('box')console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

Pero también podemos sacar atributos individuales y los valores correspondientes de forma más precisa:

let box = document.getElementById('box')console.log(
window.getComputedStyle(box)
.getPropertyValue('background-color') // E.g. rgb(0, 128, 0)
)

Trabajando con el tamaño del navegador & el sitio web mostrado

Por supuesto, no hay que eludir los tamaños en el desarrollo web moderno. Esto es lo que necesitas:

• window.outerWidth
• window.outerHeight

Los dos devuelven las dimensiones de la propia ventana del navegador, por lo que no importa si la página web se reduce en tamaño, por ejemplo, las herramientas de desarrollo.

Así que cuando se trata de determinar realmente en qué dimensiones se muestra la página web en ese momento, están disponibles las siguientes funciones:

• window.innerWidth
• window.innerHeight

Por ejemplo, así es como se puede hacer que un elemento sea de pantalla completa:

elem.style.width = window.innerWidth + 'px'

Una nota de JavaScript In Plain English

¡Hemos lanzado tres nuevas publicaciones! Muestra un poco de amor por nuestras nuevas publicaciones siguiéndolas: AI in Plain English, UX in Plain English, Python in Plain English – ¡gracias y sigue aprendiendo!

También estamos siempre interesados en ayudar a promover contenido de calidad. Si tienes un artículo que te gustaría enviar a cualquiera de nuestras publicaciones, envíanos un correo electrónico a [email protected] con tu nombre de usuario en Medium y te añadiremos como escritor. Indícanos también a qué publicación/es quieres que te añadamos.