Objekt document a objekt window jsou dva nadřazené objekty, ke kterým můžeme pomocí JavaScriptu přistupovat. Samotný objekt document je podřízen objektu window. Myslím, že je zná každý, protože jsou všudypřítomné zejména při vývoji webových aplikací pomocí vanilla javascriptu.

Tento článek si klade za cíl ukázat vám některé praktické vlastnosti obou objektů. Není třeba podrobněji představovat, co přesně tyto dva prvky jsou, nyní vám uvedu několik praktických příkladů, které můžete použít bez větších předchozích znalostí.

Kontextová nabídka je událost DOM, která se spustí, když uživatel klikne pravým tlačítkem myši na prvek DOM, který chce kontextovou nabídku vyvolat. Kontextová nabídka je jednoduše nabídka, která se ve výchozím nastavení zobrazí, když uživatel klikne pravým tlačítkem myši na webové stránce, pokud webová stránka nezpracovává událost jinak, jak to uděláme za chvíli. Takže i když název nemusí být znám, malá nabídka vypadá v závislosti na operačním systému jinak a nabízí věci jako „uložit obrázek jako“, „prozkoumat“, „znovu načíst“ & „zpět“.
V podstatě můžeme využít událost contextmenu v DOM k provedení vlastní akce, když uživatel klikne pravým tlačítkem myši.

Kliknutí pravým tlačítkem myši a zablokování zobrazení výchozí kontextové nabídky

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

Pro náš <div> tedy nastavíme EventListener, který by se měl provést při vyvolání kontextové nabídky, tedy při kliknutí pravým tlačítkem myši. Vrátí událost, kterou můžeme zablokovat standardní funkcí preventDefault.

Ve výchozím případě by to bylo jako při kliknutí pravým tlačítkem myši na kontextovou nabídku. Tu však pomocí funkce preventDefault zablokujeme. Takže se nic nestane.

Nejenže můžeme blokovat standardní událost, ale můžeme také spouštět nejrůznější kód, když uživatel klikne pravým tlačítkem myši. To pak můžeme zkombinovat s preventDefault a nabídnout vlastní kontextovou nabídku, například:

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

Režim návrhu dokumentu

Do výzkumu pro tento článek mi to bylo zcela neznámé, ale ve skutečnosti může být tato funkce velmi praktická. Můžete ji použít např. pro systém správy obsahu nebo pro rychlé úpravy bez kódu, pro vizualizaci případných změn obsahu webových stránek.
Protože to, co designMode umožňuje, je, že můžete upravovat veškerý obsah webu, na který se díváme v prohlížeči, aniž byste museli měnit kód HTML devtools.

Můžete si to vyzkoušet hned teď. Stačí přejít na libovolnou webovou stránku, otevřít konzolu a zadat následující příkaz:

document.designMode = "on"

Nyní můžete zobrazenou webovou stránku jednoduše upravovat, jako by to byl dokument Wordu. Docela fajn, co říkáte?
Režim návrhu zná pouze dva stavy: Zapnuto a vypnuto. Takže pokud ho chcete deaktivovat, stačí udělat následující:

document.designMode = "off"

Pokud chcete jednotlivé prvky chránit před změnou obsahu, můžete jim dát následující atribut: (Pak je můžete pouze zcela odstranit, ale ne s nimi manipulovat)

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

Zkopírujte něco do schránky uživatele pomocí kódu

Původně k tomuto účelu sloužila známá funkce document.execCommand(), která je však nyní považována za zastaralou.
Na místo toho je nyní k dispozici rozhraní API schránky pro automatické kopírování obsahu pomocí jazyka JavaScript.
Lze jej použít prostřednictvím objektu navigátor, který je podřízen objektu okno.

Podívejme se na příklad, kdy po stisknutí tlačítka zkopírujeme zadaný text ve vstupním poli do schránky:

Zjištění stavu dokumentu

Zejména při vývoji složitějších a výkonově optimalizovaných webových aplikací by se mělo provádět zkoumání doby načítání & celkového chování dokumentu, aby bylo možné najít případná slabá místa nebo zlepšit výkon a UX.

Pomocí document.readyState proto můžeme přistupovat k aktuálnímu stavu dokumentu a na základě výsledku činit další rozhodnutí.

Tady jsou možné výsledky, document.readyState může vrátit:

• uninitialized – Ještě se nezačal načítat
• loading – Načítá se
• loaded – Byl načten
• interactive – Je dostatečně načten a uživatel s ním může interagovat
• complete – Plně načtený
  Zdroj: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Pokud si s tím trochu pohrajete v praxi, dojdete k zajímavým výsledkům. Za tímto účelem jsem vytvořil malý HTML boilerplate, pomocí kterého vypisujeme stav na různých místech. Každý z externích skriptů jednoduše obsahuje console.log(document.readyState)

Tady je v chronologickém pořadí to, co pak náš web loguje:

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

Různé způsoby začlenění externích skriptů zde fungují podle očekávání. Zajímavé však je, že pokud na stránku zahrneme pouze jeden velký obrázek, doba načítání obrázku zpozdí i událost onload tagu body.

Takže v každém případě je stav „kompletní“, pokud vypisujeme stav s událostí onload.

Práce s fokusem / aktivním prvkem

Pokud jde o prvky, se kterými může uživatel webu skutečně interagovat, jako jsou tlačítka, inputy a textarea, mohou mít tzv. fokus. Pokud má fokus nějaký vstup a my něco napíšeme na klávesnici, zapíše se to do vstupního pole. Pokud pole fokus nemá, do vstupního pole se to nezapíše. Myslím, že každý ví, co je to focus.

Určení, který prvek má focus

Možná už znáte atribut onfocus, což je událost, kdy prvek získá focus. Pak bychom ji mohli použít k vytvoření parádních animací CSS nebo, pokud chceme analyzovat chování uživatelů, uložit tuto událost.

Stejným způsobem můžeme určit, který prvek má focus, aniž bychom museli všem prvkům dávat atribut onfocus.
Můžeme to udělat následujícím způsobem:

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

Takto můžeme získat id prvku, který má fokus / je aktivní.

Měníme fokus ručně

Zejména s ohledem na UX může být někdy užitečné ulevit uživateli od výběru prvků. Například pokud v jednom formuláři zadal nesprávný vstup a my chceme, aby v každém vstupním poli změnil svůj vstup:

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

Čtení aktuálního stylování prvku

V rozsáhlých a dynamických webových aplikacích neustále měníme aktivní stylování libovolného prvku v DOM.
To můžeme také kdykoli vypsat na dva, takže zkontrolujeme, jaké atributy a hodnoty CSS naše prvky mají.

1. element.stylemůže sloužit také ke čtení stylů, ale je určena k jejich úpravě
2. Window.getComputedStyle()je vytvořena pro získání aktuálního stylu

Pomocí poslední funkce tedy můžeme získat celý objekt se všemi styly daného prvku:

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

Můžeme ale také přesněji vypsat jednotlivé atributy a odpovídající hodnoty:

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

Práce s velikostí prohlížeče & zobrazené webové stránky

Při vývoji moderních webů se samozřejmě velikostem nevyhneme. Zde je třeba:

• window.outerWidth
• window.outerHeight

Dva vrací rozměry samotného okna prohlížeče, takže nezáleží na tom, zda je webová stránka zmenšena např. vývojářskými nástroji.

Takže pokud jde o skutečné určení, na jakých rozměrech je webová stránka aktuálně zobrazena, jsou k dispozici následující funkce:

• window.innerWidth
• window.innerHeight

Například takto můžete vytvořit prvek na celou obrazovku:

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

Poznámka z knihy JavaScript In Plain English

Vydali jsme tři nové publikace! Projevte trochu lásky našim novým publikacím tím, že je budete sledovat:

Vždy máme také zájem o pomoc při propagaci kvalitního obsahu: AI in Plain English, UX in Plain English, Python in Plain English – děkujeme a pokračujte v učení! Pokud máte článek, který byste rádi zaslali do některé z našich publikací, pošlete nám e-mail na adresu [email protected] se svým uživatelským jménem na médiu Medium a my vás přidáme jako autora. Dejte nám také vědět, do kterých publikací chcete být přidáni.