Tři hlavní součásti JavaScriptu

admin
21. září 2020 523 přečtení
.

JavaScript je určitě jeden z těch programovacích jazyků, se kterými můžete díky jeho jednoduché syntaxi začít během pár hodin, ale jeho zvládnutí by vám pravděpodobně trvalo roky.

K tomu, abyste zvládli JavaScript, je skutečně zapotřebí důkladně porozumět fungování celého ekosystému. Základní ekosystém jazyka JavaScript se skládá ze tří hlavních součástí, kterými jsou ECMAScript, JavaScript Engine a JavaScript Runtime.

Vše začíná pochopením toho, co je ECMAScript a jak se liší od JavaScriptu, a následuje pochopení JavaScript Engine a JavaScript Runtime. Právě kvůli běhovému prostředí JavaScriptu mohou NodeJS a Google Chrome používat stejný JavaScript Engine, a přesto mají velmi odlišné implementace JavaScriptu pro vývojáře.

Co je to běhové prostředí JavaScriptu nebo hostitel JavaScriptu?

Běhové prostředí JavaScriptu (nebo hostitel JavaScriptu) lze chápat jako kontejner, který používá JavaScript Engine k vytváření rozhraní API, jež mohou vývojáři softwaru používat k vytváření aplikací využívajících JavaScript. Vezmeme-li si příklad runtime JavaScriptu v prohlížeči, obvykle by obsahoval implementace JavaScriptu, které jsou specifičtější pro prohlížeč. Zatímco runtime pro něco jako NodeJs by obsahoval specifické implementace, které jsou specifičtější pro spouštění a vytváření aplikací na straně serveru pomocí JavaScriptu.

JavaScript Runtime v prohlížeči pro vývoj webových aplikací

Runtime JavaScriptu v prohlížeči obsahuje implementace JavaScriptu, které umožňují vývojářům vyvíjet aplikace pro web. Běhové prostředí webového prohlížeče má tyto tři důležité součásti:

  • Jádro založené na ECMAScriptu – Základní implementace JavaScriptu se všemi vstupními a výstupními funkcemi, které mohou vývojáři používat.
  • Objektový model dokumentu (DOM) – To je to, co prohlížeč vykresluje jako hierarchii uzlů, které se zobrazí klientovi nebo uživateli pro XML a HTML.
  • Objektový model prohlížeče (BOM) – To je to, co umožňuje vývojářům manipulovat s oknem prohlížeče. Pomocí BOM mohou vývojáři přistupovat k funkcím prohlížeče a manipulovat s nimi mimo kontext DOM nebo vykreslované stránky.

Ponořme se hlouběji, abychom podrobně pochopili každou z těchto součástí.

Jádro IO funkcí založených na ECMAScriptu

Při troše znalosti historie JavaScriptu by bylo jasné, co je ECMAScript. ECMAScript je univerzální skriptovací jazyk, který byl vytvořen nad standardy definovanými v ECMA-262 Evropskou asociací výrobců počítačů (ECMA). To bylo provedeno s cílem standardizovat JavaScript počínaje rokem 1997.

JavaScript je implementací ECMAScriptu a všechny webové prohlížeče se musí při vytváření svého JavaScriptového jádra a běhového prostředí řídit ECMAScriptem. ECMAScript neobsahuje žádné funkce IO, místo toho je to JavaScript, který implementuje různé funkce pomocí pokynů stanovených ECMAScriptem. ECMAScript a JavaScript se od sebe liší. ECMAScript je skriptovací jazyk založený na standardech definovaných v ECMA-262 a není vázán na webové prohlížeče. Právě na základě ECMAScriptu byl vytvořen robustnější skriptovací jazyk, jako je JavaScript.

Document Object Model neboli DOM

Document Object Model je jazykově neutrální rozhraní pro XML i HTML, které mapuje celý dokument jako hierarchii uzlů vytvářející stromovou reprezentaci. Níže uvedený kód HTML je dokonalým příkladem hierarchie uzlů.

<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>

Proč byl zapotřebí objektový model dokumentu (DOM)?

V prvních letech internetu existoval prohlížeč byl mezi Netscape Navigator 4 a Internet Explorer 4. V době, kdy se objevily nové prohlížeče, byl mezi nimi i prohlížeč DOM. Oba prohlížeče se řídily odlišnou verzí dynamického jazyka HTML (DHTML), čímž se ukázalo, že je obtížné spustit stejný kód HTML v různých prohlížečích. S rostoucími obavami, že web ztratí svou multiplatformní povahu, byl vytvořen nový nezávislý orgán s názvem World Wide Web Consortium (W3C). W3C mělo za úkol udržovat standardy webové komunikace, a proto začalo pracovat na DOM. Právě díky DOM získal JavaScript možnost vytvářet dynamické HTML a vývojář může manipulovat s různými uzly dokumentu.

Existují různé metody, které DOM poskytuje jako programovací rozhraní a které umožňují měnit dokument HTML tak, jak byste jako vývojáři chtěli. Zde je několik příkladů funkcí rozhraní DOM API:

  • Možnost najít prvek na webové stránce na základě jeho id nebo třídy.
  • Možnost měnit stylování nebo obsah mezi značkami.
  • Schopnost sledovat různé události na stránce a přidávat posluchače událostí.
  • Schopnost přidávat nebo odebírat uzly HTML.
  • a tak dále

K DOM lze přistupovat pomocí objektu 

document

v prohlížeči. Zde je jednoduchý příklad přístupu k elementu s

id="demo

” pomocí objektu

document

v prohlížeči pomocí JavaScriptu.

Tady je oficiální seznam všech vlastností a metod objektu dokumentu v prohlížeči.

Objektový model prohlížeče neboli BOM

Stejně jako DOM je rozhraní pro interakci s dokumentem, objektový model prohlížeče je rozhraní pro interakci s prohlížečem mimo kontext samotného dokumentu. BOM byl považován za poměrně problematický vzhledem k tomu, že se jedná o jedinou část JavaScriptu, která nemá žádnou normu, jež by ji upravovala. S uvedením HTML5 se však většina funkcí souvisejících s BOM stala součástí oficiálního standardu HTML5, což vedlo k masivnímu omezení zmatků kolem BOM.

K BOM lze přistupovat pomocí objektu window, který představuje okno prohlížeče. Všechny globální proměnné jsou v prohlížečích součástí objektu window. Podívejme se, jak můžete přistupovat k objektu okna a jeho vlastnostem:

<!DOCTYPE html><html><body><p></p><script>var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var x = document.getElementById("demo");x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";</script></body></html>

Níže uvádíme několik příkladů funkcí, které nabízí rozhraní BOM API:

  • Otevření nebo zavření okna.
  • Přesunutí okna nebo změna jeho velikosti.
  • Získání rozměrů okna.
  • Zadání polohy uživatele.
  • Získání historie prohlížeče.
  • Přístup k souborům cookie
  • a tak dále

Tady je oficiální seznam všech vlastností a metod objektového modelu prohlížeče.

Tyto tři komponenty tvoří běhové prostředí JavaScriptu v prohlížeči a poskytují rozhraní API pro interakci s enginem JavaScriptu. Prosím, šiřte lásku tím, že dáte tomuto článku palec nahoru, pokud se vám líbil, udržujte mě v motivaci. Můžete sledovat tento prostor pro další článek nebo se můžete přihlásit k odběru mého Newsletteru a já bych vás upozornil, jakmile by byl zveřejněn další článek. Nezapomeňte zanechat lajk nebo článek sdílet, pokud vám pomohl!

Předchozí článek byl publikován na https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

.

Tags

Join Hacker Noon

Vytvořte si bezplatný účet a odemkněte si vlastní čtení.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.