. 
@manikManik
Out Of The Box Thinker, Love To Write Javascript And Python. “🍺 🍻 gulp watch”
JavaScript jest z pewnością jednym z tych języków programowania, który możesz zacząć w ciągu kilku godzin ze względu na jego prostą składnię, ale prawdopodobnie zajęłoby ci lata, aby go opanować.
Do opanowania JavaScript wymagane jest dogłębne zrozumienie jak działa cały ekosystem. Podstawowy ekosystem JavaScript składa się z 3 głównych komponentów, którymi są ECMAScript, silnik JavaScript i JavaScript Runtime.
Wszystko zaczyna się od zrozumienia czym jest ECMAScript i jak różni się od JavaScript, a następnie zrozumienia silnika JavaScript i JavaScript Runtime. To właśnie z powodu JavaScript Runtime, NodeJS i Google Chrome mogą używać tego samego silnika JavaScript, a jednak mieć bardzo różne implementacje JavaScript dla programistów.
Czym jest JavaScript Runtime lub JavaScript Host?
JavaScript Runtime (lub JavaScript Host) może być rozumiany jako kontener, który używa silnika JavaScript do generowania API, które mogą być używane przez programistów do tworzenia aplikacji przy użyciu JavaScript. Biorąc za przykład runtime JavaScript w przeglądarce, zazwyczaj zawierałby implementacje JavsScript, które są bardziej specyficzne dla przeglądarki. Natomiast runtime dla czegoś takiego jak NodeJs miałby specyficzne implementacje, które są bardziej specyficzne dla uruchamiania i budowania aplikacji po stronie serwera przy użyciu JavaScript.
JavaScript Runtime In Your Browser For Web Development
The JavaScript runtime w przeglądarce ma implementację JavaScript, która umożliwia programistom tworzenie aplikacji dla sieci. Runtime przeglądarki internetowej ma następujące trzy ważne komponenty:
- The Core Based On ECMAScript – Podstawowa implementacja JavaScriptu ze wszystkimi funkcjami wejścia i wyjścia, których programiści mogą używać.
- Document Object Model (DOM) – To jest to, co przeglądarka renderuje jako hierarchię węzłów do wyświetlenia klientowi lub użytkownikowi dla XML i HTML.
- Browser Object Model (BOM) – To jest to, co pozwala programistom manipulować oknem przeglądarki. Używając BOM programiści mogą uzyskać dostęp do funkcji przeglądarki i manipulować nimi poza kontekstem DOM lub strony, która jest renderowana.
Zanurzmy się głębiej, aby zrozumieć każdy z tych komponentów w szczegółach.
Rdzeń IO Functions Based On ECMAScript
Drobne zrozumienie historii JavaScriptu wyjaśniłoby czym jest ECMAScript. ECMAScript jest językiem skryptowym ogólnego przeznaczenia, który został zbudowany na podstawie standardów zdefiniowanych w ECMA-262 przez European Computer Manufacturers Association (ECMA). Zostało to zrobione w celu standaryzacji JavaScript począwszy od roku 1997.
JavaScript jest implementacją ECMAScript i wszystkie przeglądarki internetowe muszą stosować się do ECMAScript podczas tworzenia ich silnika JavaScript i środowisk uruchomieniowych. ECMAScript nie zawiera żadnych funkcji IO, zamiast tego, to JavaScript implementuje różne funkcje używając wytycznych ustalonych przez ECMAScript. ECMAScript i JavaScript różnią się od siebie. ECMAScript jest językiem skryptowym opartym na standardach zdefiniowanych w ECMA-262 i nie jest związany z przeglądarkami internetowymi. To na podstawie ECMAScript został zbudowany bardziej solidny język skryptowy jak JavaScript.
Document Object Model lub DOM
The Document Object Model jest neutralnym językowo interfejsem dla XML jak również HTML, który mapuje cały dokument jako hierarchię węzłów tworząc drzewo-podobną reprezentację. Poniższy kod HTML jest doskonałym przykładem hierarchii węzłów.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Dlaczego Model Obiektowy Dokumentu (DOM) był potrzebny?
Podczas wczesnych lat Internetu, istniała przeglądarka pomiędzy Netscape Navigator 4 i Internet Explorer 4. Obie przeglądarki stosowały różne wersje dynamicznego HTML (DHTML), co utrudniało uruchamianie tego samego kodu HTML na różnych przeglądarkach. Wraz z rosnącymi obawami, że sieć traci swoją międzyplatformową naturę, powstało nowe niezależne ciało o nazwie World Wide Web Consortium (W3C). W3C było odpowiedzialne za utrzymanie standardów komunikacji internetowej i właśnie wtedy rozpoczęło pracę nad DOM. To właśnie dzięki DOM, JavaScript uzyskuje możliwość tworzenia dynamicznego HTML, a programista może manipulować różnymi węzłami dokumentu.
Istnieją różne metody dostarczane przez DOM jako interfejs programowania, który pozwala zmienić dokument HTML w sposób, w jaki chciałbyś jako programista. Oto kilka przykładów cech API DOM:
- Możliwość znalezienia elementu na stronie internetowej na podstawie jego id lub klasy.
- Możliwość zmiany stylizacji lub zawartości między znacznikami.
- Możliwość śledzenia różnych zdarzeń na stronie i dodawania słuchaczy zdarzeń.
- Możliwość dodawania lub usuwania węzłów HTML.
- i tak dalej
Dom (DOM) może być dostępny za pomocą obiektu
documentw przeglądarce. Oto prosty przykład dostępu do elementu z
id="demo” za pomocą obiektu
documentw przeglądarce przy użyciu JavaScript.
Tutaj znajduje się oficjalna lista wszystkich właściwości i metod obiektu dokumentu w przeglądarce.
Browser Object Model lub BOM
Tak jak DOM jest interfejsem do interakcji z dokumentem, Browser Object Model jest interfejsem do interakcji z przeglądarką poza kontekstem samego dokumentu. BOM był uważany za dość problematyczny z powodu bycia jedyną częścią JavaScriptu, która nie miała standardu regulującego jego działanie. Jednak wraz z wprowadzeniem HTML5, większość funkcji związanych z BOM stała się częścią oficjalnego standardu HTML5, co doprowadziło do znacznego zmniejszenia zamieszania wokół BOM.
Do BOM można uzyskać dostęp za pomocą obiektu window, który reprezentuje okno przeglądarki. Wszystkie zmienne globalne są częścią obiektu okna w przeglądarkach. Przyjrzyjmy się, jak można uzyskać dostęp do obiektu okna i jego właściwości:
<!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>Oto kilka przykładów funkcji, które są oferowane przez API BOM:
- Otwarcie lub zamknięcie okna.
- Przesuwanie lub zmiana rozmiaru okna.
- Uzyskanie wymiarów okna.
- Zapytanie o lokalizację użytkownika.
- Pobieranie historii przeglądarki.
- Dostęp do ciasteczek
- i tak dalej
Tutaj jest oficjalna lista wszystkich właściwości i metod Browser Object Model.
Te trzy komponenty tworzą runtime JavaScript w przeglądarce i dają API do interakcji z silnikiem JavaScript. Proszę rozprzestrzeniać trochę miłości, dając ten artykuł kciuki w górę, jeśli ci się podobało, utrzymać mnie zmotywowany. Możesz obserwować tę przestrzeń dla następnego artykułu lub możesz zapisać się do mojego Newslettera, a ja powiadomię Cię jak tylko następny artykuł zostanie opublikowany. Nie zapomnij zostawić like lub podzielić się artykułem, jeśli był pomocny!
Poprzednio opublikowany na stronie https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
. Tagi
Załóż darmowe konto, aby odblokować niestandardowe doświadczenie czytelnicze.