L’oggetto documento e l’oggetto finestra sono due degli oggetti padre a cui possiamo accedere con JavaScript. L’oggetto documento è subordinato all’oggetto finestra. Penso che tutti li conoscano, perché sono onnipresenti soprattutto quando si sviluppano applicazioni web con vanilla javascript.

Questo articolo mira a mostrarvi alcune delle caratteristiche pratiche di entrambi. Non c’è bisogno di un’introduzione più dettagliata di cosa sono esattamente questi due, ora vi darò alcuni esempi pratici che potete usare senza molte conoscenze precedenti.

Il menu contestuale è un evento DOM, che viene attivato quando un utente clicca con il tasto destro del mouse su un elemento DOM che il menu contestuale vuole chiamare. Il menu contestuale è semplicemente il menu che viene visualizzato di default quando un utente clicca con il tasto destro su una pagina web, a meno che la pagina web non elabori l’evento in modo diverso, come faremo tra un momento. Quindi, anche se il nome può non essere noto, il piccolo menu appare diverso a seconda del sistema operativo e offre cose come “salva immagine con nome”, “esamina”, “ricarica” & “indietro”.
Fondamentalmente, possiamo usare l’evento contextmenu nel DOM per eseguire la nostra azione quando l’utente clicca con il tasto destro.

Clicco destro e blocco della visualizzazione del menu contestuale predefinito

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

Allora impostiamo un EventListener per il nostro <div>, che dovrebbe essere eseguito quando viene chiamato il menu contestuale, cioè con un clic destro. Restituisce un evento, che possiamo bloccare con la funzione standard preventDefault.

Il caso di default sarebbe come cliccare con il tasto destro del mouse sul menu contestuale. Ma con preventDefault lo blocchiamo. Quindi non succede niente.

Ovviamente, non solo possiamo bloccare l’evento standard, ma possiamo anche eseguire tutti i tipi di codice quando l’utente clicca con il tasto destro. Possiamo quindi combinare questo con il preventDefault per offrire il nostro menu contestuale, per esempio:

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

La modalità di progettazione del vostro documento

Fino alla ricerca per questo articolo questo mi era completamente sconosciuto, ma in realtà questa caratteristica può essere molto pratica. Puoi usarla ad esempio per un sistema di gestione dei contenuti, o per modificare rapidamente senza codice, per visualizzare i potenziali cambiamenti del contenuto di un sito web.
Perché ciò che designMode rende possibile è che si può modificare tutto il contenuto di un sito web che guardiamo nel browser senza dover cambiare il codice HTML dei devtools.

Si può provare subito. Basta andare su qualsiasi sito web, aprire la console e inserire quanto segue:

document.designMode = "on"

Ora potete semplicemente modificare il sito web visualizzato come se fosse un documento Word. Piuttosto fico, eh?
Il designMode conosce solo due stati: On e off. Quindi se vuoi disattivarlo basta fare quanto segue:

document.designMode = "off"

Se vuoi proteggere singoli elementi dalla modifica del contenuto, puoi dare loro il seguente attributo: (Poi puoi solo rimuoverli completamente, ma non manipolarli)

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

Copiare qualcosa negli appunti degli utenti con il codice

In origine, il ben noto document.execCommand() era destinato a questo scopo, ma ora è considerato deprecato.
Invece, l’API Clipboard è ora disponibile per la copia automatica del contenuto usando JavaScript.
Può essere usata tramite l’oggetto navigatore, che è subordinato all’oggetto window.

Diamo un’occhiata a un esempio in cui, dopo aver premuto il pulsante, copiamo il testo inserito nel campo di input negli appunti:

Ricevere lo stato del documento

Soprattutto per lo sviluppo di webapp più complesse e ottimizzate dal punto di vista delle prestazioni, dovrebbero essere effettuate indagini sul tempo di caricamento &comportamento generale del documento per trovare potenziali punti deboli o per migliorare le prestazioni e la UX.

Pertanto, con document.readyState possiamo accedere allo stato attuale del documento e prendere ulteriori decisioni in base al risultato.

Ecco i possibili risultati che document.readyState può restituire:

• uninitialized – Non ha ancora iniziato il caricamento
• loading – Sta caricando
• loaded – È stato caricato
• interactive – Ha caricato abbastanza e l’utente può interagire con esso
• complete – Completamente caricato
  Source: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Se ci si gioca un po’ in pratica, ci sono alcuni risultati interessanti. Per questo ho creato un piccolo boilerplate HTML, con il quale emettiamo lo stato in diversi punti. Ognuno degli script esterni contiene semplicemente console.log(document.readyState)

Ecco, in ordine cronologico, ciò che il nostro sito web registra:

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

I diversi modi di includere gli script esterni funzionano qui come previsto. Ma è interessante che se includiamo solo una grande immagine nella pagina, il tempo di caricamento dell’immagine ritarderà anche l’evento onload del tag body.

Quindi in ogni caso lo stato è “completo”, se emettiamo lo stato con l’evento onload.

Lavoro con il focus / elemento attivo

Quando si tratta di elementi con cui l’utente del sito web può effettivamente interagire, come pulsanti, input e textareas, questi possono avere il cosiddetto focus. Se un input ha il focus, e noi digitiamo qualcosa sulla tastiera, questo viene scritto nel campo di input. Se il campo non ha il focus, non viene scritto nel campo di input. Penso che tutti sappiano cos’è il focus.

Determinare quale elemento ha il focus

Forse conoscete già l’attributo onfocus, che è l’evento quando un elemento riceve il focus. Allora potremmo usarlo per creare fantastiche animazioni CSS o, se vogliamo analizzare il comportamento dell’utente, salvare questo evento.

Nello stesso modo, possiamo determinare quale elemento ha il focus senza dover dare a tutti gli elementi l’attributo onfocus.
Possiamo farlo nel seguente modo:

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

Così possiamo ottenere l’id dell’elemento che ha il focus / è attivo.

Modificare il focus manualmente

Soprattutto per quanto riguarda l’UX, può essere utile a volte alleviare l’utente dalla selezione degli elementi. Per esempio, se ha fatto un input sbagliato in un modulo, e vogliamo che cambi il suo input in ogni campo di input:

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

Leggere lo stile corrente di un elemento

Nelle applicazioni web grandi e dinamiche cambiamo costantemente lo stile attivo di qualsiasi elemento nel DOM.
Possiamo anche emettere questo a due per ogni momento, quindi controllare quali attributi e valori CSS hanno i nostri elementi.

1. element.stylepuò anche essere usato per leggere gli stili, ma è destinato a modificarli
2. Window.getComputedStyle()è fatto per ottenere lo stile corrente

Quindi con l’ultima funzione possiamo ottenere un intero oggetto con tutti gli stili dell’elemento:

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

Ma possiamo anche ottenere singoli attributi e i valori corrispondenti in modo più preciso:

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

Lavorando con le dimensioni del browser & il sito web visualizzato

Ovviamente non c’è modo di aggirare le dimensioni nello sviluppo web moderno. Ecco cosa ti serve:

• window.outerWidth
• window.outerHeight

I due restituiscono le dimensioni della finestra del browser stesso, quindi non importa se la pagina web è ridotta nelle dimensioni, per esempio, dagli strumenti di sviluppo.

Quindi, quando si tratta di determinare realmente su quali dimensioni il sito web è attualmente visualizzato, sono disponibili le seguenti funzioni:

• window.innerWidth
• window.innerHeight

Per esempio, ecco come si può rendere un elemento a schermo intero:

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

Una nota di JavaScript In Plain English

Abbiamo lanciato tre nuove pubblicazioni! Mostra un po’ di amore per le nostre nuove pubblicazioni seguendole: AI in Plain English, UX in Plain English, Python in Plain English – grazie e continuate ad imparare!

Siamo anche sempre interessati ad aiutare a promuovere contenuti di qualità. Se hai un articolo che vorresti sottoporre a una delle nostre pubblicazioni, mandaci un’email a [email protected] con il tuo nome utente Medium e ti aggiungeremo come scrittore. Facci anche sapere a quale/i pubblicazione/i vuoi essere aggiunto.