@manikManik
Out Of The Box Thinker, Szeretek Javascriptet és Pythont írni. “🍺 🍻 gulp watch”
A JavaScript minden bizonnyal egyike azoknak a programozási nyelveknek, amelyeket egyszerű szintaxisának köszönhetően néhány óra alatt el lehet kezdeni, de valószínűleg évekbe telne elsajátítani.
A JavaScript elsajátításához valóban szükség van a teljes ökoszisztéma működésének alapos megértésére. A JavaScript alapvető ökoszisztémája 3 fő komponensből áll, amelyek az ECMAScript, a JavaScript Engine és a JavaScript Runtime.
Az egész azzal kezdődik, hogy megértjük, mi az ECMAScript és miben különbözik a JavaScript-től, majd ezt követi a JavaScript Engine és a JavaScript Runtime megértése. A JavaScript-futtatási idő miatt van az, hogy a NodeJS és a Google Chrome ugyanazt a JavaScript Engine-t használhatja, mégis nagyon különböző JavaScript implementációkkal rendelkeznek a fejlesztők számára.
Mi a JavaScript-futtatási idő vagy a JavaScript Host?
A JavaScript-futtatási idő (vagy a JavaScript Host) olyan konténerként értelmezhető, amely a JavaScript Engine-t használja a szoftverfejlesztők által a JavaScriptet használó alkalmazások létrehozására használható API-k létrehozására. Ha egy böngészőben lévő JavaScript futtatási időt veszünk példának, akkor az jellemzően a JavsScript olyan implementációit tartalmazza, amelyek inkább a böngészőre jellemzőek. Míg egy olyan futásidő, mint például a NodeJs, olyan specifikus implementációkkal rendelkezne, amelyek inkább a JavaScriptet használó szerveroldali alkalmazások futtatására és létrehozására jellemzőek.
JavaScript futásidő a böngészőben a webfejlesztéshez
A JavaScript futásidő a böngészőben tartalmazza a JavaScript azon implementációit, amelyek lehetővé teszik a fejlesztők számára a webes alkalmazások fejlesztését. A webböngésző futási ideje a következő három fontos összetevőből áll:
- Az ECMAScript alapú mag – A JavaScript alapimplementációja az összes be- és kimeneti funkcióval, amelyet a fejlesztők használhatnak.
- Document Object Model (DOM) – Ez az, amit a böngésző a csomópontok hierarchiájaként megjelenít az ügyfél vagy a felhasználó számára az XML és a HTML esetében.
- Browser Object Model (BOM) – Ez teszi lehetővé a fejlesztők számára a böngészőablak manipulálását. A BOM segítségével a fejlesztők hozzáférhetnek a böngésző funkcióihoz és manipulálhatják azokat a DOM vagy a megjelenített oldal kontextusán kívül.
merüljünk el mélyebben, hogy részletesen megértsük az egyes komponenseket.
A Core IO Functions Based On ECMAScript
A JavaScript történetének egy kis megértése egyértelművé tenné, hogy mi az ECMAScript. Az ECMAScript egy általános célú szkriptnyelv, amely az ECMA-262-ben az Európai Számítógépgyártók Szövetsége (ECMA) által meghatározott szabványokra épül. Ennek célja a JavaScript szabványosítása volt 1997-től kezdődően.
A JavaScript az ECMAScript egy implementációja, és minden webböngészőnek be kell tartania az ECMAScriptet a JavaScript-motor és a futtatókörnyezet létrehozása során. Az ECMAScript nem tartalmaz IO-funkciókat, ehelyett a JavaScript az, amely a különböző funkciókat az ECMAScript által meghatározott irányelvek felhasználásával valósítja meg. Az ECMAScript és a JavaScript különbözik egymástól. Az ECMAScript az ECMA-262-ben meghatározott szabványokon alapuló szkriptnyelv, és nem kötődik a webböngészőkhöz. Az ECMAScriptre épül az olyan robusztusabb szkriptnyelv, mint a JavaScript.
Dokumentum objektum modell vagy a DOM
A dokumentum objektum modell egy nyelvsemleges interfész az XML és a HTML számára, amely a teljes dokumentumot csomópontok hierarchiájaként térképezi fel, egy fa-szerű ábrázolást létrehozva. Az alább megadott HTML-kód tökéletes példa a csomópontok hierarchiájára.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Miért volt szükség a Document Object Modelre (DOM)?
Az internet korai éveiben a Netscape Navigator 4 és az Internet Explorer 4 között volt egy böngésző. Mindkét böngésző a dinamikus HTML (DHTML) különböző verzióját követte, így nehéznek bizonyult ugyanazon HTML-kód futtatása a különböző böngészőkben. Mivel egyre inkább félő volt, hogy a web elveszíti platformokon átívelő jellegét, létrehoztak egy új, független testületet, a World Wide Web Consortiumot (W3C). A W3C feladata volt a webes kommunikáció szabványainak fenntartása, és ekkor kezdett el dolgozni a DOM-on. A DOM-nak köszönhető, hogy a JavaScript megkapja a dinamikus HTML létrehozásának képességét, és a fejlesztő manipulálhatja a dokumentum különböző csomópontjait.
A DOM által programozási felületként biztosított különböző módszerek lehetővé teszik, hogy a HTML-dokumentumot úgy módosítsuk, ahogyan fejlesztőként szeretnénk. Íme néhány példa a DOM API funkcióira:
- A weblapon található elem keresésének lehetősége az azonosítója vagy osztálya alapján.
- A címkék közötti stílus vagy tartalom megváltoztatásának lehetősége.
- A különböző események követésének képessége az oldalon és az eseményhallgatók hozzáadása.
- A HTML csomópontok hozzáadásának vagy eltávolításának képessége.
- és így tovább
A DOM a böngészőben a
documentobjektummal érhető el. Íme egy egyszerű példa egy
id="demo” elem elérésére a
documentobjektum segítségével a böngészőben JavaScript segítségével.
Itt van a dokumentum objektum összes tulajdonságának és metódusának hivatalos listája a böngészőben.
Böngésző objektum modell vagy a BOM
Mint ahogy a DOM egy interfész a dokumentummal való interakcióhoz, úgy a böngésző objektum modell a böngészővel való interakció interfésze magának a dokumentumnak a kontextusán kívül. A BOM-ot meglehetősen problematikusnak tartották, mivel ez volt a JavaScript egyetlen olyan része, amelyet nem szabályozott semmilyen szabvány. A HTML5 megjelenésével azonban a BOM-mal kapcsolatos legtöbb funkció a HTML5 hivatalos szabványának részévé vált, ami a BOM körüli zűrzavar jelentős csökkenéséhez vezetett.
A BOM a böngészőablakot reprezentáló window objektummal érhető el. A böngészőkben az összes globális változó az ablakobjektum része. Nézzük meg, hogyan érhetjük el az ablakobjektumot és annak tulajdonságait:
<!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>Itt van néhány példa a BOM API által kínált funkciókra:
- A ablak megnyitása vagy bezárása.
- Az ablak mozgatása vagy méretének módosítása.
- Az ablak méreteinek lekérdezése.
- A felhasználó helyének lekérdezése.
- A böngésző előzményeinek lekérdezése.
- A sütik elérése
- és így tovább
Itt a böngésző objektummodell összes tulajdonságának és metódusának hivatalos listája.
Ez a három komponens alkotja a JavaScript futási időt a böngészőben és ad egy API-t a JavaScript motorral való interakcióhoz. Kérlek, terjessz egy kis szeretetet azzal, hogy felfelé mutató hüvelykujjat adsz ennek a cikknek, ha tetszett, motiválj engem. Figyelheti ezt a helyet a következő cikkért, vagy feliratkozhat a hírlevelemre, és értesítem Önt, amint a következő cikk megjelenik. Ne felejts el egy like-ot hagyni vagy megosztani a cikket, ha hasznos volt!
Előzőleg megjelent: https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
. Tags
Létrehozza ingyenes fiókját, hogy feloldja egyéni olvasási élményét.