Drie hoofdcomponenten van JavaScript

admin
21 september 2020 523 lezingen

Manik Hacker Noon profielfoto

JavaScript is zeker een van die programmeertalen waarmee je binnen een paar uur aan de slag kunt door de eenvoudige syntaxis, maar waar je waarschijnlijk jaren over zou doen om ze onder de knie te krijgen.

Om JavaScript onder de knie te krijgen is een diepgaand begrip nodig van hoe het hele ecosysteem werkt. Het ecosysteem van JavaScript bestaat uit 3 hoofdonderdelen: ECMAScript, JavaScript Engine, en de JavaScript Runtime.

Het begint met begrijpen wat ECMAScript is en hoe het verschilt van JavaScript, gevolgd door een begrip van de JavaScript Engine en de JavaScript Runtime. Het is vanwege de JavaScript runtime dat NodeJS en Google Chrome dezelfde JavaScript Engine kunnen gebruiken en toch zeer verschillende implementaties van JavaScript voor ontwikkelaars kunnen hebben.

Wat is een JavaScript Runtime of een JavaScript Host?

Een JavaScript runtime (of een JavaScript Host) kan worden opgevat als een container die gebruikmaakt van de JavaScript Engine om API’s te genereren die door softwareontwikkelaars kunnen worden gebruikt om toepassingen te maken met JavaScript. Als we een voorbeeld nemen van een JavaScript runtime in een browser, dan bevat deze typisch de implementaties van JavaScript die meer specifiek zijn voor een browser. Terwijl een runtime voor iets als NodeJs specifieke implementaties zou hebben die meer specifiek zijn voor het uitvoeren en bouwen van een server-side applicatie met behulp van JavaScript.

JavaScript Runtime In Your Browser For Web Development

De JavaScript runtime in de browser bevat de implementatie van JavaScript die de ontwikkelaars in staat stelt applicaties voor het web te ontwikkelen. De runtime van de webbrowser heeft de volgende drie belangrijke componenten:

  • The Core Based On ECMAScript – De basisimplementatie van JavaScript met alle invoer- en uitvoerfuncties die de ontwikkelaars kunnen gebruiken.
  • Document Object Model (DOM) – Dit is wat de browser rendert als een hiërarchie van knooppunten die aan de client of de gebruiker worden getoond voor XML en HTML.
  • Browser Object Model (BOM) – Dit is wat de ontwikkelaars in staat stelt het browservenster te manipuleren. Met behulp van het BOM kunnen de ontwikkelaars toegang krijgen tot de browser-functies en deze manipuleren buiten de context van het DOM of de pagina die wordt weergegeven.

Laten we dieper duiken om elk van deze componenten in detail te begrijpen.

De Core IO Functies gebaseerd op ECMAScript

Een beetje begrip van de geschiedenis van JavaScript zou duidelijk maken wat ECMAScript is. ECMAScript is een scripttaal voor algemene doeleinden die is gebouwd op basis van de standaarden die zijn gedefinieerd in ECMA-262 door de European Computer Manufacturers Association (ECMA). Dit werd gedaan met het doel om JavaScript vanaf het jaar 1997 te standaardiseren.

JavaScript is een implementatie van ECMAScript en alle webbrowsers moeten zich aan ECMAScript houden bij het maken van hun JavaScript-engine en runtime-omgevingen. ECMAScript bevat geen IO-functies, maar het is JavaScript dat de verschillende functies implementeert volgens de richtlijnen van ECMAScript. ECMAScript en JavaScript zijn verschillend van elkaar. ECMAScript is een scripttaal die is gebaseerd op de in ECMA-262 gedefinieerde normen en is niet gebonden aan webbrowsers. Het is op basis van ECMAScript dat een robuustere scripttaal als JavaScript is gebouwd.

Document Object Model of het DOM

Het Document Object Model is een taalneutrale interface voor zowel XML als HTML die het gehele document in kaart brengt als een hiërarchie van knooppunten waardoor een boomachtige representatie ontstaat. De onderstaande HTML-code is een perfect voorbeeld van een hiërarchie van knooppunten.

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

Waarom was het Document Object Model (DOM) nodig?

Tijdens de beginjaren van het internet was er een browser tussen Netscape Navigator 4 en Internet Explorer 4. Beide browsers volgden een verschillende versie van Dynamic HTML (DHTML), waardoor het moeilijk werd dezelfde HTML-code op verschillende browsers uit te voeren. Toen de vrees toenam dat het web zijn platformoverschrijdende karakter zou verliezen, werd een nieuw onafhankelijk orgaan opgericht, het World Wide Web Consortium (W3C). Het was de verantwoordelijkheid van het W3C om de normen voor webcommunicatie te handhaven en op dat moment begon het te werken aan het DOM. Dankzij het DOM krijgt JavaScript de mogelijkheid om dynamische HTML te maken en kan een ontwikkelaar de verschillende knooppunten van een document manipuleren.

Er zijn verschillende methoden die het DOM als programmeerinterface biedt, waarmee je het HTML-document kunt wijzigen zoals je dat als ontwikkelaar zou willen. Hier zijn een paar voorbeelden van functies van de DOM API:

  • De mogelijkheid om een element op de webpagina te vinden op basis van zijn id of klasse.
  • De mogelijkheid om de styling of de inhoud tussen de tags te veranderen.
  • De mogelijkheid om verschillende gebeurtenissen op de pagina te volgen en de gebeurtenis-luisteraars toe te voegen.
  • De mogelijkheid om HTML-nodes toe te voegen of te verwijderen.
  • enzovoort

Het DOM kan worden benaderd met behulp van het 

document

object in de browser. Hier is een eenvoudig voorbeeld van toegang tot een element met 

id="demo

” met behulp van het 

document

object in de browser met behulp van JavaScript.

Hier is de officiële lijst van alle eigenschappen en methoden van het document object in de browser.

Browser Object Model of het BOM

Net zoals het DOM een interface is voor interactie met het document, is het Browser Object Model de interface voor interactie met de browser buiten de context van het document zelf. Het BOM werd als vrij problematisch beschouwd omdat het het enige onderdeel van JavaScript was waarvoor geen standaard bestond. Met de lancering van HTML5 werden de meeste functies met betrekking tot de BOM echter onderdeel van de officiële standaard van HTML5, waardoor de verwarring rond de BOM enorm afnam.

De BOM kan worden benaderd met behulp van het vensterobject dat het browservenster vertegenwoordigt. Alle globale variabelen zijn een onderdeel van het window object in de browsers. Laten we eens kijken hoe u het venster-object en de eigenschappen ervan kunt benaderen:

<!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 volgen enkele voorbeelden van de functies die door de BOM API worden geboden:

  • Een venster openen of sluiten.
  • Verplaatsen of vergroten/verkleinen van het venster.
  • De afmetingen van het venster opvragen.
  • De locatie van de gebruiker opvragen.
  • Opvragen van de geschiedenis van de browser.
  • Toegang tot de cookies
  • enzovoort

Hier is de officiële lijst van alle eigenschappen en methoden van het Browser Object Model.

Deze drie componenten vormen de JavaScript runtime in de browser en geven je een API om te interageren met de JavaScript Engine. Verspreid alsjeblieft wat liefde door dit artikel een duimpje omhoog te geven als je het leuk vond, houdt me gemotiveerd. U kunt hier kijken voor het volgende artikel of u kunt zich abonneren op mijn Nieuwsbrief en ik zou u op de hoogte zodra het volgende artikel wordt gepubliceerd. Vergeet niet om een like achter te laten of het artikel te delen als het nuttig was!

Vorig gepubliceerd op https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

>

Tags

Word lid van Hacker Noon

Maak uw gratis account aan om uw leeservaring op maat te ontgrendelen.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.