Vanilla JavaScript

Dokumentet och fönsterobjektet är två av de överordnade objekt som vi kan komma åt med JavaScript. Själva dokumentobjektet är underordnat fönsterobjektet. Jag tror att alla känner till dem, eftersom de är allestädes närvarande särskilt när man utvecklar webbapplikationer med vanilla javascript.

Den här artikeln syftar till att visa dig några av de praktiska funktionerna hos båda. Det finns inget behov av en mer detaljerad introduktion av vad exakt dessa två är, jag kommer nu att ge dig några praktiska exempel som du kan använda utan större förkunskaper.

Kontextmenyn är en DOM-händelse, som utlöses när en användare högerklickar på ett DOM-element som kontextmenyn vill anropa. Kontextmenyn är helt enkelt den meny som visas som standard när en användare högerklickar på en webbsida, om inte webbsidan behandlar händelsen annorlunda, vilket vi kommer att göra om en stund. Så även om namnet kanske inte är känt ser den lilla menyn olika ut beroende på operativsystem och erbjuder saker som ”spara bild som”, ”undersöka”, ”ladda om” & ”tillbaka”.
I grund och botten kan vi använda contextmenu-händelsen i DOM för att utföra vår egen åtgärd när användaren högerklickar.

Högerklick och blockering av visning av standardkontextmenyn

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

Så vi sätter upp en EventListener för vår <div>, som ska utföras när kontextmenyn anropas, det vill säga med ett högerklick. Den returnerar en händelse, som vi kan blockera med standardfunktionen preventDefault.

Standardfallet skulle vara som att högerklicka på kontextmenyn. Men med preventDefault blockerar vi det. Så ingenting händer.

Självklart kan vi inte bara blockera standardhändelsen, utan vi kan också exekvera alla typer av kod när användaren högerklickar. Vi kan sedan kombinera detta med preventDefault för att erbjuda en egen kontextmeny, till exempel:

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

Designläget för ditt dokument

Innan forskningen för den här artikeln var detta helt okänt för mig, men den här funktionen kan faktiskt vara mycket praktisk. Du kan t.ex. använda den för ett innehållshanteringssystem, eller för att snabbt redigera utan kod, för att visualisera potentiella innehållsförändringar på en webbplats.
För vad designMode gör möjligt är att du kan redigera allt innehåll på en webbplats som vi tittar på i webbläsaren utan att behöva ändra HTML-koden i devtools.

Du kan prova det redan nu. Gå bara till vilken webbplats som helst, öppna konsolen och skriv in följande:

document.designMode = "on"

Nu kan du helt enkelt redigera den visade webbplatsen som om det vore ett Word-dokument. Ganska häftigt, eller hur?
DesignMode känner bara till två tillstånd: On och off. Så om du vill inaktivera den gör du bara följande:

document.designMode = "off"

Om du vill skydda enskilda element från att ändra innehållet kan du ge dem följande attribut: (Då kan du bara ta bort dem helt och hållet, men inte manipulera dem)

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

Kopiera något till användarens urklipp med kod

Ursprungligen var det välkända dokumentet document.execCommand() avsett för detta ändamål, men detta anses nu vara föråldrat.
Istället finns nu Clipboard API tillgängligt för automatisk kopiering av innehåll med hjälp av JavaScript.
Det kan användas via navigatorobjektet, som är underordnat window-objektet.

Låt oss ta en titt på ett exempel där vi efter att ha tryckt på knappen kopierar den inmatade texten i inmatningsfältet till klippbordet:

Hämta dokumentets status

Särskilt vid utveckling av mer komplexa och prestandapåverkande webbapplikationer bör undersökningar av laddningstiden & dokumentets generella beteende genomföras för att hitta potentiella svaga punkter eller för att förbättra prestanda och UX.

Med document.readyState kan vi därför få tillgång till dokumentets aktuella tillstånd och fatta ytterligare beslut baserat på resultatet.

Här är de möjliga resultaten, document.readyState kan returnera:

• uninitialized – Har inte börjat laddas ännu
• loading – Är laddad
• loaded – Har laddats
• interactive – Har laddats tillräckligt mycket och användaren kan interagera med det
• complete – Fullt laddad
  Källa: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Om man leker lite med det i praktiken får man några intressanta resultat. För detta skapade jag en liten HTML boilerplate, med vilken vi matar ut statusen på olika ställen. Varje externt skript innehåller helt enkelt console.log(document.readyState)

Här är, i kronologisk ordning, vad vår webbplats sedan loggar:

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

De olika sätten att inkludera externa skript fungerar här som förväntat. Men det är intressant att om vi inkluderar endast en stor bild på sidan, kommer laddningstiden för bilden också att fördröja onload-händelsen för body-taggen.

Så i vilket fall som helst är statusen ”komplett”, om vi matar ut statusen med onload-händelsen.

Arbeta med fokus/aktiva element

När det gäller element som användaren av webbplatsen faktiskt kan interagera med, till exempel knappar, inmatningar och textområden, kan dessa ha så kallad fokus. Om en ingång har fokus och vi skriver något på tangentbordet skrivs det in i inmatningsfältet. Om fältet inte har fokus skrivs det inte in i inmatningsfältet. Jag tror att alla vet vad fokus är.

Detektera vilket element som har fokus

Kanske känner du redan till attributet onfocus, som är händelsen när ett element får fokus. Då kan vi använda det för att skapa häftiga CSS-animationer eller, om vi vill analysera användarens beteende, spara den här händelsen.

På samma sätt kan vi bestämma vilket element som har fokus utan att behöva ge alla element onfocus-attributet.
Vi kan göra detta på följande sätt:

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

Så kan vi få fram id:t för det element som har fokus/är aktivt.

Ändra fokus manuellt

Särskilt när det gäller UX kan det ibland vara bra att befria användaren från att välja element. Till exempel om han har gjort en felaktig inmatning i ett formulär och vi vill att han ska ändra sin inmatning i varje inmatningsfält:

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

Läsning av ett elements aktuella styling

I stora och dynamiska webbapplikationer ändrar vi hela tiden den aktiva stylingen för alla element i DOM.
Vi kan även mata ut detta till två för varje gång, så kontrollera vilka CSS-attribut och värden våra element har.

1. element.stylekan också användas för att läsa stilar, men är avsedd för att redigera dem
2. Window.getComputedStyle() är gjord för att få den aktuella stylingen

Så med den sista funktionen kan vi få ett helt objekt med alla stilar för elementet:

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

Men vi kan också ge ut enskilda attribut och motsvarande värden mer exakt:

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

Arbetar med storleken på webbläsaren & den webbplats som visas

Självklart går det inte att komma runt storlekar i modern webbutveckling. Här är vad du behöver:

• window.outerWidth
• window.outerHeight

De två returnerar måtten på själva webbläsarfönstret, så det spelar ingen roll om webbsidan minskas i storlek av t.ex. utvecklarverktyg.

Så när det gäller att verkligen avgöra på vilka dimensioner webbplatsen för närvarande visas finns följande funktioner:

• window.innerWidth
• window.innerHeight

Så här kan du till exempel göra ett element till fullskärmsläge:

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

En anmärkning från JavaScript In Plain English

Vi har lanserat tre nya publikationer! Visa lite kärlek till våra nya publikationer genom att följa dem: AI in Plain English, UX in Plain English, Python in Plain English – tack och fortsätt lära dig!

Vi är också alltid intresserade av att hjälpa till att främja kvalitetsinnehåll. Om du har en artikel som du vill skicka in till någon av våra publikationer, skicka oss ett mejl till [email protected] med ditt Medium-användarnamn så ser vi till att du läggs till som skribent. Låt oss också veta vilken/vilka publikation/er du vill bli tillagd till.