Het document- en vensterobject zijn twee van de bovenliggende objecten die we met JavaScript kunnen benaderen. Het documentobject zelf is ondergeschikt aan het vensterobject. Ik denk dat iedereen ze kent, omdat ze alomtegenwoordig zijn, vooral bij het ontwikkelen van web-apps met vanilla javascript.

Dit artikel is bedoeld om u enkele van de praktische functies van beide te laten zien. Er is geen behoefte aan een meer gedetailleerde inleiding van wat deze twee precies zijn, zal ik nu geven u een aantal praktische voorbeelden die u kunt gebruiken zonder veel voorkennis.

Het context menu is een DOM-evenement, dat wordt geactiveerd wanneer een gebruiker met de rechtermuisknop klikt op een DOM-element dat context menu wil oproepen. Het contextmenu is gewoon het menu dat standaard wordt weergegeven wanneer een gebruiker met de rechtermuisknop op een webpagina klikt, tenzij de webpagina de gebeurtenis anders verwerkt, zoals we zo dadelijk zullen doen. Dus ook al is de naam misschien niet bekend, het kleine menu ziet er anders uit afhankelijk van het besturingssysteem en biedt dingen als “afbeelding opslaan als”, “onderzoeken”, “herladen” & “terug”.
In principe kunnen we de contextmenu gebeurtenis in het DOM gebruiken om onze eigen actie uit te voeren wanneer de gebruiker met de rechtermuisknop klikt.

Rechtsklik en blokkeer weergave van het standaard contextmenu

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

Dus stellen we een EventListener in voor onze <div>, die moet worden uitgevoerd wanneer het contextmenu wordt aangeroepen, d.w.z. met een rechtermuisklik. Het retourneert een gebeurtenis, die we kunnen blokkeren met de standaard functie preventDefault.

Het standaard geval zou zijn als er met rechts op het context menu wordt geklikt. Maar met de preventDefault blokkeren we dat. Er gebeurt dus niets.

Natuurlijk kunnen we niet alleen de standaard gebeurtenis blokkeren, maar we kunnen ook allerlei code uitvoeren als de gebruiker met de rechtermuisknop klikt. We kunnen dit dan combineren met de preventDefault om ons eigen contextmenu aan te bieden, bijvoorbeeld:

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

De ontwerpmodus van uw document

Tot het onderzoek voor dit artikel was dit mij geheel onbekend, maar eigenlijk kan deze functie heel praktisch zijn. Je kunt het b.v. gebruiken voor een content management systeem, of om snel te bewerken zonder code, om mogelijke veranderingen in de inhoud van een website te visualiseren.
Wat designMode mogelijk maakt is dat je alle inhoud van een website die we in de browser bekijken kunt bewerken zonder dat je de HTML code van de devtools hoeft te veranderen.

Je kunt het nu uitproberen. Ga gewoon naar een website, open de console, en voer het volgende in:

document.designMode = "on"

Nu kun je de getoonde website gewoon bewerken alsof het een Word document is. Best cool, hè?
De designMode kent maar twee toestanden: Aan en uit. Dus als je hem wilt uitschakelen, doe je gewoon het volgende:

document.designMode = "off"

Als je afzonderlijke elementen wilt beschermen tegen het veranderen van de inhoud, kun je ze het volgende attribuut geven: (Dan kun je ze alleen volledig verwijderen, maar niet manipuleren)

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

Kopieer iets naar het klembord van de gebruiker met code

Oorspronkelijk was het bekende document.execCommand() hiervoor bedoeld, maar dit wordt nu als deprecated beschouwd.
In plaats daarvan is nu de Klembord-API beschikbaar voor het automatisch kopiëren van inhoud met behulp van JavaScript.
Het kan worden gebruikt via het object navigator, dat ondergeschikt is aan het object window.

Laten we eens kijken naar een voorbeeld waarbij we, nadat we op de knop hebben gedrukt, de ingevoerde tekst in het invoerveld naar het klembord kopiëren:

De status van het document opvragen

Vooral bij de ontwikkeling van meer complexe en prestatie-geoptimaliseerde webapps moet onderzoek worden gedaan naar de laadtijd &het algemene gedrag van het document om mogelijke zwakke punten te vinden of om de prestaties en de UX te verbeteren.

Daarom kunnen we met document.readyState de huidige status van het document opvragen en op basis van het resultaat verdere beslissingen nemen.

Dit zijn de mogelijke resultaten die document.readyState kan teruggeven:

• uninitialized – Is nog niet begonnen met laden
• loading – Is aan het laden
• loaded – Is geladen
• interactive – Is voldoende geladen en de gebruiker kan ermee interageren
• complete – Volledig geladen
  Bron: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Als je er in de praktijk een beetje mee speelt, zijn er een paar interessante resultaten. Hiervoor heb ik een kleine HTML boilerplate gemaakt, waarmee we de status op verschillende plaatsen weergeven. Elk van de externe scripts bevat simpelweg console.log(document.readyState)

Hier is, in chronologische volgorde, wat onze website dan logt:

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

De verschillende manieren om de externe scripts op te nemen werken hier zoals verwacht. Maar het is interessant dat als we slechts één grote afbeelding op de pagina opnemen, de laadtijd van de afbeelding ook het onload-event van de body-tag zal vertragen.

Dus in ieder geval is de status “compleet”, als we de status met het onload-event uitvoeren.

Werken met de focus / active element

Als het gaat om elementen waarmee de gebruiker van de website daadwerkelijk interactie kan hebben, zoals knoppen, ingangen en textareas, dan kunnen deze de zogenaamde focus hebben. Als een ingang de focus heeft, en we typen iets in op het toetsenbord, dan wordt dat in het invoerveld geschreven. Als het veld niet de focus heeft, wordt het niet in het invoerveld geschreven. Ik denk dat iedereen wel weet wat de focus is.

Bepaal welk element de focus heeft

Misschien ken je het onfocus attribuut al, dat is de gebeurtenis wanneer een element de focus krijgt. Dan zouden we het kunnen gebruiken om coole CSS animaties te maken of, als we gebruikersgedrag willen analyseren, deze gebeurtenis op te slaan.

Op dezelfde manier kunnen we bepalen welk element de focus heeft, zonder dat we alle elementen het onfocus attribuut hoeven te geven.
We kunnen dit op de volgende manier doen:

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

Zo kunnen we het id krijgen van het element dat de focus heeft / actief is.

De focus handmatig veranderen

Vooral met betrekking tot de UX kan het soms nuttig zijn om de gebruiker te ontlasten van het selecteren van elementen. Bijvoorbeeld als hij in één formulier een verkeerde invoer heeft gedaan, en we willen dat hij zijn invoer in elk invoerveld verandert:

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

De huidige styling van een element uitlezen

In grote en dynamische web-apps veranderen we voortdurend de actieve styling van elk element in het DOM.
Dit kunnen we ook op elk moment naar twee uitzetten, dus controleer welke CSS attributen en waarden onze elementen hebben.

1. element.stylekan ook gebruikt worden om stijlen te lezen, maar is bedoeld om ze te bewerken
2. Window.getComputedStyle() is gemaakt om de huidige styling te krijgen

Dus met de laatste functie kunnen we een heel object krijgen met alle stijlen van het element:

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

Maar we kunnen ook afzonderlijke attributen en de bijbehorende waarden nauwkeuriger uitvoeren:

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

Werken met de grootte van de browser & de website weergegeven

In moderne webontwikkeling kunnen we natuurlijk niet om maten heen. Hier is wat je nodig hebt:

• window.outerWidth
• window.outerHeight

De twee retourneren de afmetingen van het browservenster zelf, dus het maakt niet uit of de webpagina wordt verkleind door bijvoorbeeld de ontwikkelaarstools.

Wanneer het er dus op aankomt om echt te bepalen op welke afmetingen de website momenteel wordt weergegeven, zijn de volgende functies beschikbaar:

• window.innerWidth
• window.innerHeight

Zo zou je bijvoorbeeld een element fullscreen kunnen maken:

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

Een noot van JavaScript In Plain English

We hebben drie nieuwe publicaties gelanceerd! Toon wat liefde voor onze nieuwe publicaties door ze te volgen: AI in Plain English, UX in Plain English, Python in Plain English – dank je en blijf leren!

We zijn ook altijd geïnteresseerd in het helpen promoten van kwaliteitsinhoud. Als je een artikel hebt dat je wilt indienen voor een van onze publicaties, stuur ons dan een e-mail op [email protected] met je Medium-gebruikersnaam en we zorgen ervoor dat je wordt toegevoegd als schrijver. Laat ons ook weten aan welke publicatie(s) u wilt worden toegevoegd.