@manikManik
Out of the box tänkare, Älskar att skriva Javascript och Python. “🍺 🍻 gulp watch”
JavaScript är säkert ett av de programmeringsspråk som du kan komma igång med inom några timmar på grund av sin enkla syntax, men som det antagligen skulle ta dig flera år att behärska.
För att behärska JavaScript krävs det verkligen en djupgående förståelse för hur hela ekosystemet fungerar. Det centrala ekosystemet i JavaScript består av tre huvudkomponenter som är ECMAScript, JavaScript Engine och JavaScript Runtime.
Det börjar med att förstå vad ECMAScript är och hur det skiljer sig från JavaScript, följt av en förståelse för JavaScript Engine och JavaScript Runtime. Det är på grund av JavaScript Runtime som NodeJS och Google Chrome kan använda samma JavaScript Engine och ändå ha mycket olika implementationer av JavaScript för utvecklare.
Vad är en JavaScript Runtime eller en JavaScript Host?
En JavaScript Runtime (eller en JavaScript Host) kan förstås som en behållare som använder JavaScript Engine för att generera API:er som kan användas av programvaruutvecklare för att skapa program med JavaScript. Om man tar ett exempel på en JavaScript-körningstid i en webbläsare, skulle den vanligtvis innehålla implementationer av JavsScript som är mer specifika för en webbläsare. Medan en runtime för något som NodeJs skulle ha specifika implementationer som är mer specifika för att köra och bygga en serverbaserad applikation med hjälp av JavaScript.
JavaScript Runtime In Your Browser For Web Development
JavaScript Runtime i webbläsaren har den implementering av JavaScript som gör det möjligt för utvecklarna att utveckla applikationer för webben. Webbläsarens körtid har följande tre viktiga komponenter:
- Kärnan baserad på ECMAScript – Basimplementationen av JavaScript med alla in- och utmatningsfunktioner som utvecklarna kan använda.
- Document Object Model (DOM) – Detta är vad webbläsaren återger som en hierarki av noder som ska visas för klienten eller användaren för XML och HTML.
- Browser Object Model (BOM) – Detta är vad som gör det möjligt för utvecklarna att manipulera webbläsarens fönster. Med hjälp av BOM kan utvecklarna få tillgång till webbläsarens funktioner och manipulera dem utanför ramen för DOM eller den sida som återges.
Låt oss dyka djupare för att förstå var och en av dessa komponenter i detalj.
De centrala IO-funktionerna baserade på ECMAScript
En liten förståelse för JavaScript:s historia skulle göra det klart vad ECMAScript är. ECMAScript är ett allmänt skriptspråk som bygger på de standarder som definieras i ECMA-262 av European Computer Manufacturers Association (ECMA). Detta gjordes i syfte att standardisera JavaScript från och med 1997.
JavaScript är ett genomförande av ECMAScript och alla webbläsare måste följa ECMAScript när de skapar sina JavaScript-motorer och körtidsmiljöer. ECMAScript innehåller inga IO-funktioner, utan det är JavaScript som implementerar de olika funktionerna med hjälp av de riktlinjer som fastställs i ECMAScript. ECMAScript och JavaScript skiljer sig från varandra. ECMAScript är ett skriptspråk som bygger på de standarder som definieras i ECMA-262 och är inte bundet till webbläsare. Det är baserat på ECMAScript som ett mer robust skriptspråk som JavaScript har byggts upp.
Document Object Model eller DOM
Dokumentobjektmodellen är ett språkneutralt gränssnitt för XML samt HTML som kartlägger hela dokumentet som en hierarki av noder som skapar en trädliknande representation. Nedanstående HTML-kod är ett perfekt exempel på en hierarki av noder.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Varför behövdes Document Object Model (DOM)?
Under internets tidiga år fanns det en webbläsare var mellan Netscape Navigator 4 och Internet Explorer 4. Båda webbläsarna följde en annan version av dynamisk HTML (DHTML), vilket gjorde det svårt att köra samma HTML-kod i olika webbläsare. På grund av den ökande rädslan för att webben skulle förlora sin plattformsoberoende karaktär skapades ett nytt oberoende organ vid namn World Wide Web Consortium (W3C). Det var W3C:s ansvar att upprätthålla standarderna för webbkommunikation och det var då man började arbeta med DOM. Det är tack vare DOM som JavaScript får möjlighet att skapa dynamisk HTML och en utvecklare kan manipulera de olika noderna i ett dokument.
Det finns olika metoder som tillhandahålls av DOM som ett programmeringsgränssnitt som låter dig ändra HTML-dokumentet på det sätt som du skulle vilja som utvecklare. Här är några exempel på funktioner i DOM API:
- Möjligheten att hitta ett element på webbsidan baserat på dess id eller klass.
- Möjligheten att ändra stilen eller innehållet mellan taggarna.
- Förmågan att spåra olika händelser på sidan och att lägga till händelselysslor.
- Förmågan att lägga till eller ta bort HTML-noder.
- och så vidare
DOM kan nås med hjälp av
document-objektet i webbläsaren. Här är ett enkelt exempel på åtkomst till ett element med
id="demo” med hjälp av
document-objektet i webbläsaren med hjälp av JavaScript.
Här finns en officiell lista över alla egenskaper och metoder för dokumentobjektet i webbläsaren.
Browser Object Model eller BOM
Just precis som DOM är ett gränssnitt för att interagera med dokumentet så är Browser Object Model gränssnittet för att interagera med webbläsaren utanför själva dokumentets sammanhang. BOM ansågs vara ganska problematisk eftersom det var den enda delen av JavaScript som inte hade någon standard som reglerade den. I och med lanseringen av HTML5 blev dock de flesta av de funktioner som rör BOM en del av den officiella standarden för HTML5, vilket ledde till en massiv minskning av förvirringen kring BOM.
BOM kan nås med hjälp av window-objektet som representerar webbläsarfönstret. Alla globala variabler är en del av fönsterobjektet i webbläsarna. Låt oss ta en titt på hur du kan komma åt fönsterobjektet och dess egenskaper:
<!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>Här är några exempel på de funktioner som erbjuds av BOM API:
- Öppna eller stänga ett fönster.
- Förflytta eller ändra storlek på fönstret.
- Få fram fönstrets dimensioner.
- Förfrågan om användarens plats.
- Hämta webbläsarens historik.
- Accessing the cookies
- och så vidare
Här är den officiella listan över alla egenskaper och metoder i Browser Object Model.
Dessa tre komponenter bildar JavaScript-körtiden i webbläsaren och ger dig ett API för att interagera med JavaScript Engine. Sprid gärna lite kärlek genom att ge den här artikeln en tumme upp om du gillade den, håll mig motiverad. Du kan titta här för nästa artikel eller prenumerera på mitt nyhetsbrev så meddelar jag dig så fort nästa artikel publiceras. Glöm inte att lämna ett gilla eller dela artikeln om den var till hjälp!
Förut publicerad på https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
. Taggar
Lägg upp ett kostnadsfritt konto för att låsa upp din anpassade läsupplevelse.