JavaScriptin kolme pääkomponenttia

admin
21. syyskuuta 2020 523 luettu

JavaScripthin käyttöliittymä on varmastikin yksi niistä ohjelmointikielistä, joiden käytön pääsee alkuun yksinkertaisen syntaksinsa ansiosta muutamassa tunnissa, mutta sen hallitseminen veisi luultavasti vuosia.

Javaskriptin hallitseminen vaatii kyllä syvällistä ymmärrystä siitä, miten koko ekosysteemi toimii. JavaScriptin keskeinen ekosysteemi koostuu kolmesta pääkomponentista, jotka ovat ECMAScript, JavaScript Engine ja JavaScript Runtime.

Kaikki alkaa ymmärtämällä, mikä on ECMAScript ja miten se eroaa JavaScriptistä, ja sen jälkeen ymmärretään JavaScript Engine ja JavaScript Runtime. JavaScript-runtimen ansiosta NodeJS ja Google Chrome voivat käyttää samaa JavaScript Engineä, mutta silti niillä voi olla hyvin erilaiset JavaScript-toteutukset kehittäjille.

Mikä on JavaScript Runtime tai JavaScript Host?

Javaskriptin runtime (tai JavaScript Host) voidaan ymmärtää säiliöksi (container), joka käyttää JavaScript Engineä luodakseen API-rajapintoja (APIs), joita ohjelmistokehittäjät voivat käyttää luodakseen sovelluksia JavaScriptillä. Esimerkkinä JavaScript-runtime selaimessa, se sisältäisi tyypillisesti JavsScript-toteutukset, jotka ovat enemmän selainkohtaisia. Kun taas esimerkiksi NodeJs:n kaltaisessa ajoajassa olisi erityisiä toteutuksia, jotka ovat spesifisempiä palvelinpuolen sovelluksen ajamiseen ja rakentamiseen JavaScriptin avulla.

JavaScript-ajoaika selaimessa web-kehitystä varten

Selaimessa olevassa JavaScript-ajoaikakoodissa on JavaScriptin toteutus, jonka avulla kehittäjät pystyvät kehittämään sovelluksia webiä varten. WWW-selaimen runtime sisältää seuraavat kolme tärkeää komponenttia:

  • ECMAScriptiin perustuva ydin – JavaScriptin perustoteutus, jossa on kaikki syöttö- ja tulostustoiminnot, joita kehittäjät voivat käyttää.
  • Document Object Model (DOM) – Selain renderöi tämän XML- ja HTML-formaateissa asiakkaalle tai käyttäjälle näytettävien solmujen hierarkiana.
  • Browser Object Model (BOM) – Selainten oliomalli (Browser Object Model, selaimen oliomalli) – Kehittäjien on mahdollista käsitellä selainikkunaa. BOM:n avulla kehittäjät voivat käyttää selaimen ominaisuuksia ja manipuloida niitä DOM:n tai renderöitävän sivun kontekstin ulkopuolella.

Sukelletaanpa syvemmälle, jotta ymmärretään kukin näistä komponenteista yksityiskohtaisesti.

Ydin IO-toiminnot, jotka perustuvat ECMAScriptiin

Hieman JavaScriptin historian ymmärtäminen tekisi selväksi, mikä ECMAScript on. ECMAScript on yleiskäyttöinen skriptikieli, joka on rakennettu ECMA-262:ssa (European Computer Manufacturers Association) määriteltyjen standardien pohjalta. Tämä tehtiin JavaScriptin standardoimiseksi vuodesta 1997 alkaen.

JavaScript on ECMAScriptin toteutus, ja kaikkien verkkoselaimien on noudatettava ECMAScriptiä luodessaan JavaScript-moottoriaan ja ajoympäristöjään. ECMAScript ei sisällä IO-funktioita, vaan JavaScript toteuttaa eri toiminnot ECMAScriptin ohjeiden mukaisesti. ECMAScript ja JavaScript eroavat toisistaan. ECMAScript on ECMA-262:ssa määriteltyihin standardeihin perustuva skriptikieli, joka ei ole sidottu verkkoselaimiin. ECMAScriptin pohjalta on rakennettu JavaScriptin kaltainen vankempi skriptikieli.

Dokumenttiobjektimalli eli DOM

Dokumenttiobjektimalli on kielineutraali rajapinta XML:lle sekä HTML:lle, joka kuvaa koko dokumentin solmujen hierarkiana, joka luo puumaisen esityksen. Alla oleva HTML-koodi on täydellinen esimerkki solmujen hierarkiasta.

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

Miksi Document Object Model (DOM) tarvittiin?

Internetin alkuvuosina selain oli välillä Netscape Navigator 4 ja Internet Explorer 4. Molemmat selaimet noudattivat erilaista versiota dynaamisesta HTML:stä (DHTML), mikä vaikeutti saman HTML-koodin ajamista eri selaimilla. Koska yhä useammin pelättiin, että verkko menettäisi alustarajat ylittävän luonteensa, perustettiin uusi riippumaton elin nimeltä World Wide Web Consortium (W3C). W3C:n tehtävänä oli ylläpitää verkkoviestinnän standardeja, ja silloin se alkoi työskennellä DOM:n parissa. DOM:n ansiosta JavaScript saa kyvyn luoda dynaamista HTML:ää, ja kehittäjä voi manipuloida asiakirjan eri solmuja.

DOM tarjoaa erilaisia menetelmiä ohjelmointirajapintana, jonka avulla HTML-dokumenttia voi muuttaa haluamallaan tavalla kehittäjänä. Seuraavassa on muutamia esimerkkejä DOM API:n ominaisuuksista:

  • Kyky löytää elementti verkkosivulta sen id:n tai luokan perusteella.
  • Kyky muuttaa muotoilua tai sisältöä tagien välillä.
  • Kyky seurata erilaisia tapahtumia sivulla ja lisätä tapahtumien kuuntelijoita.
  • Kyky lisätä tai poistaa HTML-solmuja.
  • ja niin edelleen

DOM:iin pääsee käsiksi selaimen 

document

objektin avulla. Tässä on yksinkertainen esimerkki elementin

id="demo

” käyttämisestä selaimen

document

-objektin avulla JavaScriptin avulla.

Tässä on virallinen luettelo kaikista selaimen dokumenttiobjektin ominaisuuksista ja metodeista.

selaimen objektimalli eli BOM

Aivan kuten DOM on rajapinta, jonka avulla voi olla vuorovaikutuksessa dokumentin kanssa, selaimen objektimalli on rajapinta, jonka avulla voi olla vuorovaikutuksessa selaimen kanssa itse dokumentin kontekstin ulkopuolella. BOM:ia pidettiin varsin ongelmallisena, koska se oli ainoa JavaScriptin osa, jota ei ohjannut mikään standardi. HTML5:n julkaisun myötä suurin osa BOM:iin liittyvistä ominaisuuksista tuli kuitenkin osaksi HTML5:n virallista standardia, mikä johti BOM:iin liittyvän sekaannuksen massiiviseen vähenemiseen.

BOM:iin pääsee käsiksi selainikkunaa edustavan window-objektin avulla. Kaikki globaalit muuttujat ovat selaimissa osa ikkunaobjektia. Katsotaanpa, miten ikkuna-objektiin ja sen ominaisuuksiin pääsee käsiksi:

<!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>

Tässä on muutamia esimerkkejä BOM API:n tarjoamista ominaisuuksista:

  • Ikkunan avaaminen tai sulkeminen.
  • Ikkunan siirtäminen tai koon muuttaminen.
  • Ikkunan mittojen hakeminen.
  • Käyttäjän sijainnin pyytäminen.
  • Selaimen historian hakeminen.
  • Evästeiden käyttäminen
  • ja niin edelleen

Tässä on virallinen luettelo kaikista selaimen objektimallin ominaisuuksista ja metodeista.

Nämä kolme komponenttia muodostavat selaimen JavaScript-ajoympäristön ja antavat API:n vuorovaikutteiseen käyttöön JavaScript-moottorin kanssa. Levitä rakkautta antamalla tälle artikkelille peukku ylös, jos pidit siitä, pidä minut motivoituneena. Voit seurata tätä tilaa seuraavaa artikkelia varten tai voit tilata uutiskirjeeni ja ilmoitan sinulle heti, kun seuraava artikkeli julkaistaan. Älä unohda jättää tykkää tai jakaa artikkeli, jos se oli hyödyllinen!

Edellinen julkaistu osoitteessa https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

.

Tags

Liity Hacker Noon

Luo ilmainen tili ja avaa mukautettu lukukokemus.

Vastaa

Sähköpostiosoitettasi ei julkaista.