logo

Prostředí prohlížeče, specifikace

Jazyk JavaScript byl původně vytvořen pro webové prohlížeče. Od té doby se vyvinul v jazyk s mnoha způsoby použití a platformami.

Platformou může být prohlížeč, webový server nebo jiný hostitel , nebo dokonce „chytrý“ kávovar, pokud umí spouštět JavaScript. Každý z nich poskytuje funkce specifické pro platformu. Specifikace JavaScriptu to nazývá hostitelské prostředí .

Hostitelské prostředí poskytuje kromě jazykového jádra své vlastní objekty a funkce. Webové prohlížeče poskytují prostředky k ovládání webových stránek. Node.js poskytuje funkce na straně serveru a tak dále.

Zde je pohled z ptačí perspektivy na to, co máme, když JavaScript běží ve webovém prohlížeči:

Existuje „kořenový“ objekt s názvem window . Má dvě role:

  1. Za prvé je to globální objekt pro kód JavaScript, jak je popsáno v kapitole Globální objekt.
  2. Zadruhé představuje „okno prohlížeče“ a poskytuje způsoby, jak jej ovládat.

Můžeme jej například použít jako globální objekt:

function sayHi() {
 alert("Hello");
}

// global functions are methods of the global object:
window.sayHi();

A můžeme jej použít jako okno prohlížeče pro zobrazení výšky okna:

alert(window.innerHeight); // inner window height

Existuje více metod a vlastností specifických pro okna, kterým se budeme věnovat později.

DOM (model objektu dokumentu)

Objektový model dokumentu, zkráceně DOM, představuje veškerý obsah stránky jako objekty, které lze upravit.

document objekt je hlavním „vstupním bodem“ na stránku. Pomocí toho můžeme na stránce změnit nebo vytvořit cokoli.

Například:

// change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

Zde jsme použili document.body.style , ale je toho mnohem, mnohem víc. Vlastnosti a metody jsou popsány ve specifikaci:DOM Living Standard.

DOM není jen pro prohlížeče

Specifikace DOM vysvětluje strukturu dokumentu a poskytuje objekty pro manipulaci s ním. Existují nástroje bez prohlížeče, které také používají DOM.

Například skripty na straně serveru, které stahují stránky HTML a zpracovávají je, mohou také používat DOM. Mohou však podporovat pouze část specifikace.

CSSOM pro styling

Existuje také samostatná specifikace CSS Object Model (CSSOM) pro pravidla a šablony stylů CSS, která vysvětluje, jak jsou reprezentovány jako objekty a jak je číst a zapisovat.

CSSOM se používá společně s DOM, když upravujeme pravidla stylu pro dokument. V praxi se však CSSOM vyžaduje jen zřídka, protože jen zřídka potřebujeme upravovat pravidla CSS z JavaScriptu (obvykle pouze přidáváme/odebíráme třídy CSS, nikoli upravujeme jejich pravidla CSS), ale i to je možné.

BOM (objektový model prohlížeče)

Objektový model prohlížeče (BOM) představuje další objekty poskytované prohlížečem (hostitelským prostředím) pro práci se vším kromě dokumentu.

Například:

  • Objekt navigátor poskytuje základní informace o prohlížeči a operačním systému. Existuje mnoho vlastností, ale dvě nejznámější jsou:navigator.userAgent – o aktuálním prohlížeči a navigator.platform – o platformě (může pomoci rozlišit mezi Windows/Linux/Mac atd.).
  • Objekt umístění nám umožňuje číst aktuální adresu URL a může přesměrovat prohlížeč na novou.

Zde je návod, jak můžeme použít location objekt:

alert(location.href); // shows current URL
if (confirm("Go to Wikipedia?")) {
 location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

Funkce alert/confirm/prompt jsou také součástí kusovníku:nesouvisí přímo s dokumentem, ale představují čisté metody prohlížeče pro komunikaci s uživatelem.

Specifikace

Kusovník je součástí obecné specifikace HTML.

Ano, slyšeli jste správně. Specifikace HTML na https://html.spec.whatwg.org se netýká pouze „jazyka HTML“ (značky, atributy), ale pokrývá také spoustu objektů, metod a rozšíření DOM specifických pro prohlížeč. To je „HTML v širokém slova smyslu“. Některé části mají také další specifikace uvedené na https://spec.whatwg.org.

Shrnutí

Když mluvíme o standardech, máme:

Specifikace DOM
Popisuje strukturu dokumentu, manipulace a události, viz https://dom.spec.whatwg.org.
Specifikace CSSOM
Popisuje šablony stylů a pravidla stylů, manipulaci s nimi a jejich vazbu na dokumenty, viz https://www.w3.org/TR/cssom-1/.
Specifikace HTML
Popisuje jazyk HTML (např. značky) a také kusovník (objektový model prohlížeče) – různé funkce prohlížeče:setTimeout , alert , location a tak dále, viz https://html.spec.whatwg.org. Přebírá specifikaci DOM a rozšiřuje ji o mnoho dalších vlastností a metod.

Některé třídy jsou navíc popsány samostatně na https://spec.whatwg.org/.

Všimněte si prosím těchto odkazů, protože je toho tolik, co se můžete naučit, že není možné pokrýt vše a vše si zapamatovat.

Pokud si chcete přečíst o vlastnosti nebo metodě, dobrým zdrojem je také příručka Mozilly na https://developer.mozilla.org/en-US/, ale odpovídající specifikace může být lepší:je složitější a delší na čtení, ale vaše základní znalosti budou zdravé a úplné.

K nalezení něčeho je často vhodné použít internetové vyhledávání „WHATWG [term]“ nebo „MDN [term]“, např. https://google.com?q=whatwg+localstorage, https://google.com?q =mdn+místní úložiště.

Nyní se pustíme do učení DOM, protože dokument hraje ústřední roli v uživatelském rozhraní.