@manikManik
Out Of The Box Thinker, Liebt es, Javascript und Python zu schreiben. “🍺 🍻 gulp watch”
JavaScript gehört sicherlich zu den Programmiersprachen, die man aufgrund ihrer einfachen Syntax innerhalb weniger Stunden beherrschen kann, für deren Beherrschung man aber wahrscheinlich Jahre brauchen würde.
Um JavaScript zu beherrschen, ist ein tiefes Verständnis der Funktionsweise des gesamten Ökosystems erforderlich. Das Kern-Ökosystem von JavaScript besteht aus 3 Hauptkomponenten, nämlich ECMAScript, JavaScript Engine und JavaScript Runtime.
Es beginnt damit, zu verstehen, was ECMAScript ist und wie es sich von JavaScript unterscheidet, gefolgt von einem Verständnis der JavaScript Engine und der JavaScript Runtime. Es ist wegen der JavaScript-Laufzeit, dass NodeJS und Google Chrome die gleiche JavaScript-Engine verwenden können und dennoch sehr unterschiedliche Implementierungen von JavaScript für Entwickler haben.
Was ist eine JavaScript-Laufzeit oder ein JavaScript-Host?
Eine JavaScript-Laufzeit (oder ein JavaScript-Host) kann als ein Container verstanden werden, der die JavaScript-Engine verwendet, um APIs zu generieren, die von Softwareentwicklern verwendet werden können, um Anwendungen mit JavaScript zu erstellen. Ein Beispiel für eine JavaScript-Laufzeitumgebung in einem Browser: Sie enthält in der Regel die Implementierungen von JavsScript, die spezifischer für einen Browser sind. Während eine Runtime für etwas wie NodeJs spezifische Implementierungen haben würde, die spezifischer für die Ausführung und Erstellung einer serverseitigen Anwendung unter Verwendung von JavaScript sind.
JavaScript Runtime In Your Browser For Web Development
Die JavaScript-Runtime im Browser hat die Implementierung von JavaScript, die es den Entwicklern ermöglicht, Anwendungen für das Web zu entwickeln. Die Laufzeit des Webbrowsers hat die folgenden drei wichtigen Komponenten:
- Der auf ECMAScript basierende Kern – Die Basisimplementierung von JavaScript mit allen Eingabe- und Ausgabefunktionen, die die Entwickler verwenden können.
- Document Object Model (DOM) – Dies ist das, was der Browser als eine Hierarchie von Knoten wiedergibt, die dem Client oder dem Benutzer für XML und HTML angezeigt werden.
- Browser Object Model (BOM) – Dies ist das, was den Entwicklern erlaubt, das Browserfenster zu manipulieren. Mit dem BOM können die Entwickler auf die Browser-Funktionen zugreifen und sie außerhalb des Kontexts des DOM oder der Seite, die gerade gerendert wird, manipulieren.
Lassen Sie uns tiefer eintauchen, um jede dieser Komponenten im Detail zu verstehen.
Die Kern-IO-Funktionen auf der Grundlage von ECMAScript
Ein kleines Verständnis der Geschichte von JavaScript würde deutlich machen, was ECMAScript ist. ECMAScript ist eine Allzweck-Skriptsprache, die auf den in ECMA-262 von der European Computer Manufacturers Association (ECMA) definierten Standards aufbaut. Dies geschah mit dem Ziel der Standardisierung von JavaScript ab dem Jahr 1997.
JavaScript ist eine Implementierung von ECMAScript und alle Webbrowser müssen sich bei der Erstellung ihrer JavaScript-Engine und -Laufzeitumgebung an ECMAScript halten. ECMAScript enthält keine IO-Funktionen, stattdessen implementiert JavaScript die verschiedenen Funktionen unter Verwendung der von ECMAScript festgelegten Richtlinien. ECMAScript und JavaScript unterscheiden sich voneinander. ECMAScript ist eine Skriptsprache, die auf den in ECMA-262 definierten Standards basiert und nicht an Webbrowser gebunden ist. Auf der Grundlage von ECMAScript wurde eine robustere Skriptsprache wie JavaScript entwickelt.
Document Object Model oder DOM
Das Document Object Model ist eine sprachneutrale Schnittstelle für XML und HTML, die das gesamte Dokument als eine Hierarchie von Knoten abbildet und eine baumartige Darstellung erzeugt. Der untenstehende HTML-Code ist ein perfektes Beispiel für eine Knotenhierarchie.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Warum wurde das Document Object Model (DOM) benötigt?
In den Anfangsjahren des Internets gab es einen Browser zwischen Netscape Navigator 4 und Internet Explorer 4. Beide Browser verwendeten eine andere Version von Dynamic HTML (DHTML), was es schwierig machte, denselben HTML-Code auf verschiedenen Browsern auszuführen. Mit der zunehmenden Befürchtung, dass das Web seine plattformübergreifende Natur verlieren könnte, wurde ein neues unabhängiges Gremium namens World Wide Web Consortium (W3C) gegründet. Das W3C hatte die Aufgabe, die Standards für die Webkommunikation aufrechtzuerhalten, und so begann es mit der Arbeit am DOM. Durch das DOM erhält JavaScript die Möglichkeit, dynamisches HTML zu erstellen, und ein Entwickler kann die verschiedenen Knoten eines Dokuments manipulieren.
Es gibt verschiedene Methoden, die das DOM als Programmierschnittstelle bereitstellt, mit der Sie das HTML-Dokument so verändern können, wie Sie es als Entwickler wünschen. Hier sind einige Beispiele für Funktionen der DOM-API:
- Die Fähigkeit, ein Element auf der Webseite anhand seiner ID oder Klasse zu finden.
- Die Fähigkeit, das Styling oder den Inhalt zwischen den Tags zu ändern.
- Die Fähigkeit, verschiedene Ereignisse auf der Seite zu verfolgen und die Ereignis-Listener hinzuzufügen.
- Die Fähigkeit, HTML-Knoten hinzuzufügen oder zu entfernen.
- und so weiter
Das DOM kann mit dem
documentObjekt im Browser aufgerufen werden. Hier ist ein einfaches Beispiel für den Zugriff auf ein Element mit
id="demo” mit Hilfe des
document-Objekts im Browser unter Verwendung von JavaScript.
Hier ist die offizielle Liste aller Eigenschaften und Methoden des Dokument-Objekts im Browser.
Browser Object Model oder das BOM
Genauso wie das DOM eine Schnittstelle für die Interaktion mit dem Dokument ist, ist das Browser Object Model die Schnittstelle für die Interaktion mit dem Browser außerhalb des Kontextes des Dokuments selbst. Das BOM galt als recht problematisch, da es der einzige Teil von JavaScript war, für den es keinen Standard gab. Mit der Einführung von HTML5 wurden jedoch die meisten Funktionen im Zusammenhang mit der BOM Teil des offiziellen Standards von HTML5, was zu einer massiven Verringerung der Verwirrung um die BOM führte.
Auf die BOM kann über das Window-Objekt zugegriffen werden, das das Browserfenster darstellt. Alle globalen Variablen sind Teil des Window-Objekts in den Browsern. Schauen wir uns an, wie man auf das Window-Objekt und seine Eigenschaften zugreifen kann:
<!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>Hier sind einige Beispiele für die Funktionen, die die BOM-API bietet:
- Öffnen oder Schließen eines Fensters.
- Verschieben oder Ändern der Größe des Fensters.
- Abfrage der Abmessungen des Fensters.
- Abfrage der Position des Benutzers.
- Die Historie des Browsers abfragen.
- Auf die Cookies zugreifen
- und so weiter
Hier ist die offizielle Liste aller Eigenschaften und Methoden des Browser Object Model.
Diese drei Komponenten bilden die JavaScript-Laufzeit im Browser und geben Ihnen eine API, um mit der JavaScript Engine zu interagieren. Bitte geben Sie diesem Artikel einen Daumen nach oben, wenn er Ihnen gefallen hat, damit ich motiviert bleibe. Sie können den nächsten Artikel an dieser Stelle lesen oder meinen Newsletter abonnieren und ich würde Sie benachrichtigen, sobald der nächste Artikel veröffentlicht wird. Vergessen Sie nicht, ein Like zu hinterlassen oder den Artikel zu teilen, wenn er hilfreich war!
Vormals veröffentlicht unter https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
Tags
Erstelle dein kostenloses Konto, um dein eigenes Leseerlebnis freizuschalten.