Vanilla JavaScript

Dokumentet og vinduesobjektet er to af de overordnede objekter, som vi kan få adgang til med JavaScript. Selve document-objektet er underordnet window-objektet. Jeg tror, at alle kender dem, for de er allestedsnærværende, især når man udvikler webapps med vanilla javascript.

Denne artikel har til formål at vise dig nogle af de praktiske funktioner ved begge. Der er ikke behov for en mere detaljeret introduktion af, hvad de to præcist er, jeg vil nu give dig nogle praktiske eksempler, som du kan bruge uden megen forkundskab.

Kontekstmenuen er en DOM-hændelse, som udløses, når en bruger højreklikker på et DOM-element, som kontekstmenuen ønsker at kalde. Kontekstmenuen er ganske enkelt den menu, der som standard vises, når en bruger højreklikker på en webside, medmindre websiden behandler hændelsen anderledes, hvilket vi vil gøre om et øjeblik. Så selv om navnet måske ikke er kendt, ser den lille menu forskelligt ud afhængigt af styresystemet og tilbyder ting som “gem billede som”, “undersøg”, “genindlæs” & “tilbage”.
Grundlæggende kan vi bruge contextmenu-hændelsen i DOM til at udføre vores egen handling, når brugeren højreklikker.

Højreklik og blokering af visning af standardkontekstmenuen

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

Så vi opretter en EventListener for vores <div>, som skal udføres, når kontekstmenuen kaldes, dvs. ved et højreklik. Den returnerer en hændelse, som vi kan blokere med standardfunktionen preventDefault.

Det normale tilfælde ville være som at højreklikke på kontekstmenuen. Men med preventDefault blokerer vi det. Så der sker ikke noget.

Selvfølgelig kan vi ikke kun blokere standardbegivenheden, men vi kan også udføre alle mulige former for kode, når brugeren højreklikker. Vi kan så kombinere dette med preventDefault for at tilbyde vores egen kontekstmenu, f.eks.:

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

Designtilstand for dit dokument

Indtil research til denne artikel var dette helt ukendt for mig, men faktisk kan denne funktion være meget praktisk. Du kan f.eks. bruge den til et indholdsstyringssystem, eller til hurtigt at redigere uden kode, til at visualisere potentielle indholdsændringer på et websted.
Det, som designMode gør muligt, er nemlig, at man kan redigere alt det indhold på et websted, som vi ser i browseren, uden at skulle ændre HTML-koden i devtools.

Du kan prøve det lige nu. Du skal bare gå til et hvilket som helst websted, åbne konsollen og indtaste følgende:

document.designMode = "on"

Nu kan du simpelthen redigere det viste websted, som om det var et Word-dokument. Ret sejt, ikke sandt?
DesignMode kender kun to tilstande: On og off. Så hvis du vil deaktivere den, skal du blot gøre følgende:

document.designMode = "off"

Hvis du vil beskytte enkelte elementer mod at ændre indholdet, kan du give dem følgende attribut: (Så kan du kun fjerne dem helt, men ikke manipulere dem)

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

Kopier noget til brugerens udklipsholder med kode

Originalt var den velkendte document.execCommand() beregnet til dette formål, men dette anses nu for forældet.
I stedet er Clipboard API’et nu tilgængeligt til automatisk kopiering af indhold ved hjælp af JavaScript.
Det kan bruges via navigator-objektet, som er underordnet window-objektet.

Lad os se på et eksempel, hvor vi efter at have trykket på knappen kopierer den indtastede tekst i indtastningsfeltet til udklipsholderen:

Hent dokumentets status

Særligt ved udvikling af mere komplekse og ydelsesoptimerede webapps bør der foretages undersøgelser af indlæsningstiden & dokumentets generelle adfærd for at finde potentielle svage punkter eller for at forbedre ydelsen og UX’en.

Derfor kan vi med document.readyState få adgang til dokumentets aktuelle tilstand og træffe yderligere beslutninger på baggrund af resultatet.

Her er de mulige resultater, document.readyState kan returnere:

• uninitialized – Er ikke begyndt at indlæse endnu
• loading – Er ved at indlæse
• loaded – Er blevet indlæst
• interactive – Er indlæst nok, og brugeren kan interagere med det
• complete – Er fuldt indlæst
  Kilde: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Hvis man leger lidt med det i praksis, er der nogle interessante resultater. Til dette har jeg lavet en lille HTML boilerplate, hvormed vi udsender status forskellige steder. Hvert af de eksterne scripts indeholder simpelthen console.log(document.readyState)

Her er, i kronologisk rækkefølge, hvad vores website så logger:

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

De forskellige måder at inkludere de eksterne scripts på virker her som forventet. Men det er interessant, at hvis vi kun inkluderer ét stort billede på siden, vil billedets indlæsningstid også forsinke onload-hændelsen i body-tagget.

Så under alle omstændigheder er status “complete”, hvis vi udsender status med onload-hændelsen.

Arbejde med fokus/aktivt element

Når det drejer sig om elementer, som brugeren af hjemmesiden rent faktisk kan interagere med, såsom knapper, input og tekstområder, kan disse have det såkaldte fokus. Hvis et input har fokus, og vi skriver noget i tastaturet, bliver det skrevet ind i inputfeltet. Hvis feltet ikke har fokus, bliver det ikke skrevet ind i indtastningsfeltet. Jeg tror, at alle ved, hvad fokus er.

Bestemm hvilket element der har fokus

Måske kender du allerede onfocus-attributten, som er den begivenhed, når et element får fokus. Så kan vi bruge den til at lave fede CSS-animationer eller, hvis vi vil analysere brugeradfærd, gemme denne begivenhed.

På samme måde kan vi bestemme, hvilket element der har fokus, uden at vi behøver at give alle elementer onfocus-attributten.
Vi kan gøre dette på følgende måde:

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

Sådan kan vi få id’et for det element, der har fokus / er aktivt.

Fokusændring manuelt

Sær med hensyn til UX kan det nogle gange være nyttigt at fritage brugeren for at vælge elementer. Hvis han f.eks. har foretaget et forkert input i en formular, og vi ønsker, at han skal ændre sit input i alle inputfelter:

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

Læsning af et elements aktuelle styling

I store og dynamiske webapps ændrer vi konstant den aktive styling af ethvert element i DOM.
Vi kan også udstede dette til to til enhver tid, så tjek, hvilke CSS-attributter og værdier vores elementer har.

1. element.stylekan også bruges til at læse stilarter, men er beregnet til at redigere dem
2. Window.getComputedStyle() er lavet til at få den aktuelle styling

Så med den sidste funktion kan vi få et helt objekt med alle stilarter for elementet:

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

Men vi kan også outputte individuelle attributter og de tilsvarende værdier mere præcist:

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

Arbejde med størrelsen af browseren & det viste websted

Der er selvfølgelig ingen vej uden om størrelser i moderne webudvikling. Her er det, du har brug for:

• window.outerWidth
• window.outerHeight

De to returnerer dimensionerne for selve browservinduet, så det er ligegyldigt, om websiden er formindsket i størrelse af f.eks. udviklerværktøjerne.

Så når det virkelig skal afgøres, på hvilke dimensioner webstedet i øjeblikket vises, er følgende funktioner tilgængelige:

• window.innerWidth
• window.innerWidth
• window.innerHeight

Sådan kan du f.eks. gøre et element fuldskærm:

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

En note fra JavaScript In Plain English

Vi har lanceret tre nye publikationer! Vis lidt kærlighed til vores nye publikationer ved at følge dem: AI in Plain English, UX in Plain English, Python in Plain English – tak og bliv ved med at lære!

Vi er også altid interesserede i at hjælpe med at fremme kvalitetsindhold. Hvis du har en artikel, som du gerne vil indsende til en af vores publikationer, så send os en e-mail på [email protected] med dit Medium-brugernavn, så får vi dig tilføjet som skribent. Lad os også vide, hvilken eller hvilke publikationer du ønsker at blive tilføjet til.