@manikManik
Out Of The Box Thinker, Elsker at skrive Javascript og Python. “🍺 🍻 gulp watch”
JavaScript er helt sikkert et af de programmeringssprog, som du kan komme i gang med på få timer på grund af dets simple syntaks, men som det sandsynligvis vil tage dig år at mestre.
For at mestre JavaScript kræver det dog en dybdegående forståelse af, hvordan hele økosystemet fungerer. Det centrale økosystem i JavaScript består af 3 hovedkomponenter, som er ECMAScript, JavaScript Engine og JavaScript Runtime.
Det hele starter med at forstå, hvad ECMAScript er, og hvordan det adskiller sig fra JavaScript, og derefter følger en forståelse af JavaScript Engine og JavaScript Runtime. Det er på grund af JavaScript runtime, at NodeJS og Google Chrome kan bruge den samme JavaScript Engine og alligevel have meget forskellige implementeringer af JavaScript for udviklere.
Hvad er en JavaScript Runtime eller en JavaScript Host?
En JavaScript runtime (eller en JavaScript Host) kan forstås som en container, der bruger JavaScript Engine til at generere API’er, som kan bruges af softwareudviklere til at oprette applikationer med JavaScript. Hvis man tager et eksempel på en JavaScript-køretid i en browser, vil den typisk indeholde de implementeringer af JavsScript, som er mere specifikke for en browser. Hvorimod en runtime til noget som NodeJs ville have specifikke implementeringer, der er mere specifikke for kørsel og opbygning af et serversideprogram ved hjælp af JavaScript.
JavaScript-køretid i din browser til webudvikling
JavaScript-køretiden i browseren har den implementering af JavaScript, der gør det muligt for udviklerne at udvikle applikationer til internettet. Webbrowseren runtime har følgende tre vigtige komponenter:
- Kernen baseret på ECMAScript – Basisimplementeringen af JavaScript med alle de input- og outputfunktioner, som udviklerne kan bruge.
- Document Object Model (DOM) – Det er det, som browseren gengiver som et hierarki af knuder, der skal vises til klienten eller brugeren for XML og HTML.
- Browser Object Model (BOM) – Det er det, som gør det muligt for udviklerne at manipulere browservinduet. Ved hjælp af BOM kan udviklerne få adgang til browserfunktionerne og manipulere dem uden for rammerne af DOM’en eller den side, der gengives.
Lad os dykke dybere ned for at forstå hver af disse komponenter i detaljer.
De centrale IO-funktioner baseret på ECMAScript
En lille forståelse af JavaScript’s historie vil gøre det klart, hvad ECMAScript er. ECMAScript er et scriptsprog til generelle formål, som er blevet bygget over de standarder, der er defineret i ECMA-262 af European Computer Manufacturers Association (ECMA). Dette blev gjort med henblik på at standardisere JavaScript fra 1997.
JavaScript er en implementering af ECMAScript, og alle webbrowsere skal overholde ECMAScript, når de opretter deres JavaScript-motor og køretidsmiljøer. ECMAScript indeholder ingen IO-funktioner, men det er i stedet JavaScript, der implementerer de forskellige funktioner ved hjælp af de retningslinjer, der er fastsat i ECMAScript. ECMAScript og JavaScript er forskellige fra hinanden. ECMAScript er et scriptingsprog baseret på de standarder, der er defineret i ECMA-262, og det er ikke bundet til webbrowsere. Det er baseret på ECMAScript, at et mere robust scriptingsprog som JavaScript er blevet bygget.
Document Object Model eller DOM
Document Object Model er en sprogneutral grænseflade for XML såvel som HTML, der kortlægger hele dokumentet som et hierarki af knuder, der skaber en trælignende repræsentation. Nedenstående HTML-kode er et perfekt eksempel på et hierarki af knuder.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Hvorfor var der brug for Document Object Model (DOM)?
I de tidlige år af internettet var der en browser var mellem Netscape Navigator 4 og Internet Explorer 4. Begge browsere fulgte en anden version af dynamisk HTML (DHTML), hvilket viste sig at gøre det vanskeligt at køre den samme HTML-kode på forskellige browsere. På grund af den stigende frygt for, at internettet skulle miste sin tværplatformskarakter, blev der oprettet et nyt uafhængigt organ ved navn World Wide Web Consortium (W3C). Det var W3C’s ansvar at opretholde standarderne for webkommunikation, og det var på dette tidspunkt, at man begyndte at arbejde på DOM. Det er på grund af DOM, at JavaScript får mulighed for at skabe dynamisk HTML, og en udvikler kan manipulere de forskellige knuder i et dokument.
Der er forskellige metoder, som DOM stiller til rådighed som en programmeringsgrænseflade, der gør det muligt at ændre HTML-dokumentet på den måde, som man ønsker som udvikler. Her er et par eksempler på funktioner i DOM API:
- Muligheden for at finde et element på websiden baseret på dets id eller klasse.
- Muligheden for at ændre stilen eller indholdet mellem tags.
- Muligheden for at spore forskellige hændelser på siden og tilføje hændelseslytterne.
- Muligheden for at tilføje eller fjerne HTML-knuder.
- og så videre
DOM’en kan tilgås ved hjælp af
document-objektet i browseren. Her er et simpelt eksempel på at få adgang til et element med
id="demo” ved hjælp af
document-objektet i browseren ved hjælp af JavaScript.
Her er den officielle liste over alle dokumentobjektets egenskaber og metoder i browseren.
Browser Object Model eller BOM
Som DOM er en grænseflade til at interagere med dokumentet, er Browser Object Model grænsefladen til at interagere med browseren uden for selve dokumentets kontekst. BOM blev anset for at være ret problematisk, fordi det var den eneste del af JavaScript, som ikke havde nogen standard for den. Men med lanceringen af HTML5 blev de fleste af de funktioner, der er relateret til BOM, en del af den officielle standard for HTML5, hvilket førte til en massiv reduktion af forvirringen omkring BOM.
BOM kan tilgås ved hjælp af window-objektet, som repræsenterer browservinduet. Alle de globale variabler er en del af window-objektet i browserne. Lad os se på, hvordan du kan få adgang til vinduesobjektet og dets egenskaber:
<!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>Her er et par eksempler på de funktioner, som BOM API’et tilbyder:
- Åbning eller lukning af et vindue.
- Bevægelse eller ændring af vinduets størrelse.
- Oplysning af vinduets dimensioner.
- Oplysning af brugerens placering.
- Hentning af browserens historik.
- Accessing the cookies
- og så videre
Her er den officielle liste over alle egenskaber og metoder i Browser Object Model.
Disse tre komponenter udgør JavaScript-køretiden i browseren og giver dig en API til at interagere med JavaScript Engine. Spred venligst lidt kærlighed ved at give denne artikel en thumbs up, hvis du kunne lide den, hold mig motiveret. Du kan holde øje med dette rum for den næste artikel, eller du kan abonnere på mit nyhedsbrev, og jeg vil give dig besked, så snart den næste artikel er offentliggjort. Glem ikke at efterlade et like eller dele artiklen, hvis den var nyttig!
Tidligere offentliggjort på https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
Tags
Opret din gratis konto for at låse op for din brugerdefinerede læseoplevelse.