Vanilla JavaScript

A dokumentum és az ablak objektum két olyan szülőobjektum, amelyet JavaScript segítségével elérhetünk. Maga a document objektum az window objektumnak van alárendelve. Szerintem mindenki ismeri őket, hiszen mindenütt jelen vannak, különösen, ha webes alkalmazásokat fejlesztünk vanilla javascript segítségével.

Ez a cikk célja, hogy bemutassa mindkettő néhány gyakorlati tulajdonságát. Nem kell részletesebben bemutatni, hogy pontosan mi is ez a kettő, most néhány gyakorlati példát fogok adni, amit különösebb előismeretek nélkül is tudsz használni.

A kontextusmenü egy DOM esemény, ami akkor indul el, amikor a felhasználó jobb egérgombbal kattint egy DOM elemre, amit a kontextusmenü meg akar hívni. A kontextusmenü egyszerűen az a menü, amely alapértelmezés szerint megjelenik, amikor a felhasználó jobb egérgombbal kattint egy weboldalon, hacsak a weboldal nem dolgozza fel másképp az eseményt, ahogyan azt mindjárt meg is tesszük. Tehát még ha a neve nem is ismert, a kis menü az operációs rendszertől függően másképp néz ki, és olyan dolgokat kínál, mint a “kép mentése másként”, “vizsgálat”, “újratöltés” & “vissza”.
Lényegében a contextmenu eseményt használhatjuk a DOM-ban, hogy a saját műveletünket hajtsuk végre, amikor a felhasználó jobb klikkre kattint.

Jobb klikk és az alapértelmezett kontextusmenü megjelenésének blokkolása

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

Egy EventListenert állítunk tehát be a <div>-ünkhöz, amelyet akkor kell végrehajtani, amikor a kontextusmenü meghívásra kerül, azaz jobb klikkre. Visszaad egy eseményt, amit a standard preventDefault függvénnyel blokkolni tudunk.

Az alapértelmezett eset olyan lenne, mintha jobb egérgombbal kattintanánk a kontextusmenüre. De a preventDefault funkcióval ezt is blokkoljuk. Így nem történik semmi.

Nem csak a standard eseményt tudjuk blokkolni, hanem természetesen mindenféle kódot is végre tudunk hajtani, amikor a felhasználó jobb egérgombbal kattint. Ezt aztán a preventDefault-tal kombinálva fel tudjuk ajánlani a saját kontextusmenünket, például:

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

A dokumentumod tervezési módja

A cikk kutatásáig ez teljesen ismeretlen volt számomra, de valójában ez a funkció nagyon praktikus lehet. Használhatod pl. egy tartalomkezelő rendszerhez, vagy kód nélküli gyors szerkesztéshez, egy weboldalon a lehetséges tartalmi változtatások megjelenítéséhez.
Mert amit a designMode lehetővé tesz, az az, hogy a devtools HTML kódjának módosítása nélkül szerkeszthetjük egy weboldal teljes tartalmát, amit a böngészőben nézünk.

Kipróbálhatja most rögtön. Csak menjünk fel egy tetszőleges weboldalra, nyissuk meg a konzolt, és írjuk be a következőket:

document.designMode = "on"

Most már egyszerűen szerkeszthetjük a megjelenített weboldalt, mintha az egy Word dokumentum lenne. Elég menő, nem?
A designMode csak két állapotot ismer: On és off. Ha tehát ki akarod kapcsolni, csak a következőket kell tenned:

document.designMode = "off"

Ha meg akarod védeni az egyes elemeket a tartalom megváltoztatásától, akkor a következő attribútumot adhatod nekik: (Ekkor csak eltávolítani lehet őket teljesen, de manipulálni nem)

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

Kóddal

Eredetileg a jól ismert document.execCommand() parancsot szánták erre a célra, de ez ma már elavultnak számít.
Ehelyett mostantól a Clipboard API áll rendelkezésre a tartalom automatikus másolására JavaScript segítségével.
Ez a navigátor objektumon keresztül használható, amely az ablak objektumnak van alárendelve.

Nézzünk egy példát, ahol a gomb megnyomása után a beviteli mezőbe beírt szöveget a vágólapra másoljuk:

A dokumentum állapotának lekérdezése

Főként összetettebb és teljesítményoptimalizált webalkalmazások fejlesztése során érdemes a dokumentum betöltési idejének & általános viselkedésének vizsgálatát elvégezni az esetleges gyenge pontok megtalálása, illetve a teljesítmény és az UX javítása érdekében.

Ezért a document.readyState segítségével hozzáférhetünk a dokumentum aktuális állapotához, és az eredmény alapján további döntéseket hozhatunk.

Itt vannak a lehetséges eredmények, document.readyState visszatérhet:

• uninitialized – Még nem kezdte el a betöltést
• loading – Betöltődik
• loaded – Betöltődött
• interactive – Eléggé betöltődött és a felhasználó interakcióba léphet vele
• complete – Teljesen betöltődött
  Forrás: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Ha a gyakorlatban játszol vele egy kicsit, érdekes eredményeket kapsz. Ehhez készítettem egy kis HTML boilerplate-et, amivel különböző helyeken adjuk ki az állapotot. Mindegyik külső szkript egyszerűen console.log(document.readyState)

Itt van, időrendi sorrendben, amit ezután a weboldalunk naplóz:

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

A külső szkriptek bevonásának különböző módjai itt az elvárásoknak megfelelően működnek. Érdekes azonban, hogy ha csak egy nagy képet építünk be az oldalra, akkor a kép betöltési ideje is késlelteti a body tag onload eseményét.

Az állapot tehát minden esetben “complete”, ha az onload-eventtel együtt adjuk ki az állapotot.

Munka a fókusz / aktív elemmel

Ha olyan elemekről van szó, amelyekkel a weboldal felhasználója ténylegesen interakcióba léphet, mint például a gombok, beviteli és szövegterületek, akkor ezeknek lehet úgynevezett fókuszuk. Ha egy bemenetnek van fókusza, és beírunk valamit a billentyűzetre, akkor az beíródik a beviteli mezőbe. Ha a mezőnek nincs fókusza, akkor nem íródik be a beviteli mezőbe. Azt hiszem, mindenki tudja, mi az a fókusz.

Meghatározni, hogy melyik elemnek van fókusza

Talán már ismered az onfocus attribútumot, ami az az esemény, amikor egy elem megkapja a fókuszt. Akkor felhasználhatjuk arra, hogy menő CSS animációkat hozzunk létre, vagy ha a felhasználói viselkedést akarjuk elemezni, elmenthetjük ezt az eseményt.

Azt is meghatározhatjuk, hogy melyik elemnél van a fókusz, anélkül, hogy minden elemnek megadnánk az onfocus attribútumot.
Ezt a következő módon tehetjük meg:

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

Így megkaphatjuk annak az elemnek az azonosítóját, amelyiknek a fókusza van / aktív.

A fókusz manuális megváltoztatása

Főként a UX szempontjából néha hasznos lehet, ha a felhasználót megszabadítjuk az elemek kiválasztásától. Például, ha egy űrlapon rosszul adta meg a bevitelt, és szeretnénk, ha minden beviteli mezőben megváltoztatná a bevitelét:

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

Elem aktuális stílusának leolvasása

A nagy és dinamikus webes alkalmazásokban folyamatosan változtatjuk bármelyik elem aktív stílusát a DOM-ban.
Ezt bármikor kettesével is kiadhatjuk, így ellenőrizhetjük, hogy milyen CSS attribútumokkal és értékekkel rendelkeznek az elemeink.

1. element.stylea stílusok kiolvasására is használható, de ezek szerkesztésére szolgál
2. Window.getComputedStyle() az aktuális stílusok lekérdezésére készült

Az utolsó függvénnyel tehát egy teljes objektumot kaphatunk az elem összes stílusával:

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

De pontosabban ki tudjuk adni az egyes attribútumokat és a hozzájuk tartozó értékeket is:

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

A böngésző méretével dolgozva & a megjelenített weboldalt

A modern webfejlesztésben természetesen nem lehet megkerülni a méreteket. Erre van szükség:

• window.outerWidth
• window.outerHeight

A kettő magának a böngészőablaknak a méreteit adja vissza, így nem számít, hogy a weblapot pl. a fejlesztői eszközök csökkentik-e méretre.

Amikor tehát valóban meg kell határozni, hogy a weboldal éppen milyen méreteken jelenik meg, a következő funkciók állnak rendelkezésre:

• window.innerWidth
• window.innerHeight

Egy elemet például így tehetünk teljes képernyőre:

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

A JavaScript In Plain English

Megjelentünk három új kiadványt! Mutasson egy kis szeretetet új kiadványainknak, ha követi őket: AI in Plain English, UX in Plain English, Python in Plain English – köszönjük és tanuljatok tovább!

Minket is mindig érdekel a minőségi tartalmak népszerűsítésének segítése. Ha van egy cikked, amit szívesen beküldenél bármelyik kiadványunkhoz, küldj nekünk egy e-mailt a [email protected] címre a Medium felhasználóneveddel, és felveszünk íróként. Azt is tudasd velünk, hogy melyik kiadvány(ok)ba szeretnél bekerülni.