JavaScript toteutus
- Edellinen sivu JavaScript historia
- Seuraava sivu ECMAScript syntaksi
JavaScriptin keskeinen ECMAScript kuvaa kielen syntaksia ja perusobjekteja;
DOM kuvaa tapoja ja liitäntöjä käsitellä verkkosivun sisältöä;
BOM kuvaa tapoja ja liitäntöjä selaimen kanssa suorittaa vuorovaikutusta.
ECMAScript, DOM ja BOM
Vaikka ECMAScript on tärkeä standardi, se ei ole ainoa osa JavaScriptistä, eikä myöskään ainoa standardoitu osa. Itse asiassa, täydellinen JavaScript-toteutus koostuu seuraavista kolmesta eri osasta:

ECMAScript
ECMAScript ei ole sidottu mihinkään tiettyyn selaimenversioon, itse asiassa, se ei myöskään mainitse mitään käyttäjän syöttö- tai tulostusmenetelmiä (tämä eroaa C-tyyppisistä kielistä, jotka tarvitsevat ulkoisia kirjastoja suorittaa tällaiset tehtävät). Mitä sitten on ECMAScript? ECMA-262-standardin (2. luku) kuvaus on seuraava:
“ECMAScript voi tarjota keskeisiä skriptiohjelmointikykyjä erilaisille isäntäympäristöille, joten keskeinen skriptikieli määritellään erillään minkä tahansa tietyn isäntäympäristön kanssa... ...”
Web-selaimet ovat ECMAScript:lle isäntäympäristö, mutta ne eivät ole ainoita. Todellisuudessa on lukemattomia muita erilaisia ympäristöjä (esimerkiksi Nombasin ScriptEase ja Macromedian ActionScript, joka käytetään samanaikaisesti Flashissa ja Director MX:ssä) jotka voivat sisältää ECMAScript:n toteutuksia. Mitä ECMAScript määrittelee ulkopuolella selaimista?
Yksinkertaisesti sanottuna ECMAScript kuvaa seuraavaa:
- Syntaksi
- Tyypit
- Lausunnot
- Avainsanat
- Varattu sanasto
- Operatorit
- Objektit
ECMAScript on vain kuvaus, joka määrittelee skriptikielen kaikki ominaisuudet, metodit ja objektit. Muut kielet voivat toteuttaa ECMAScript:ää toiminnallisena perustana, kuten JavaScript.

Jokaisella selaimella on oma ECMAScript-interfeissinsä toteutus, ja tämä toteutus laajennetaan sitten sisältämään DOM ja BOM (jotka käsitellään seuraavissa luvuissa). On myös muita ECMAScriptin toteutuksia ja laajennuksia, jotka eivät ole selaimia, esimerkiksi Windows Scripting Host (WSH), Macromedian ActionScript Flashissa ja Director MX:ssä, sekä Nombasin ScriptEase.
1. ECMAScript:n versiot
ECMAScript jaetaan useisiin eri versioihin, ja se määritellään nimellä ECMA-262 olevassa standardissa. Kuten muutkin standardit, ECMA-262 päivitetään ja muutetaan. Kun on tehty merkittäviä päivityksiä, julkaistaan uusi versio standardista. Viimeisin ECMA-262:n versio on 5.1, joka julkaistiin kesäkuussa 2011.
ECMA-262:n ensimmäinen versio oli peruspuoleltaan samanlainen kuin Netscapen JavaScript 1.1, mutta kaikki selaimiin liittyvät koodit poistettiin, ja lisäksi tehtiin joitakin pieniä säätöjä. Ensimmäiseksi, ECMA-262 vaatii Unicode-standardin tuen (jotta tuetaan monikielisyyttä). Toiseksi, se vaatii objektien olevan alustariippumattomia (Netscapen JavaScript 1.1:llä on itse asiassa eri objekti toteutukset, esimerkiksi Date-objekti, joka riippuu alustasta). Tämä on yksi pääsyistä, miksi JavaScript 1.1 ja 1.2 eivät vastanneet ECMA-262:n ensimmäisen version määrittäviä standardeja.
ECMA-262:n toisen version päivitykset ovat pääasiassa toimituksellisia. Tämä standardin päivitys oli suunniteltu olemaan täysin yhdenmukainen ISO/IEC-16262:n kanssa, eikä sisältänyt erityisiä lisäyksiä, muutoksia tai poistoja. ECMAScript ei yleensä noudata toista versiota.
ECMA-262:n kolmas versio on ensimmäinen todellinen päivitys tälle standardille. Se tarjoaa päivityksiä merkkijonojen käsittelyyn, virheiden määrittelyyn ja numeeriseen tulosteeseen. Samalla se lisää tuen säännöllisille lausekkeille, uusille ohjauslausekkeille, try...catch poikkeuskäsittelylle sekä muutamia pieniä muutoksia, jotka tekevät standardista kansainvälisemmän. Yleisesti ottaen se merkitsee, että ECMAScript on tullut todelliseksi ohjelmointikieleksi.
2. Miten ECMAScriptin noudattavuus määritellään
ECMA-262:ssa ECMAScriptin noudattavuus (conformance) on selkeästi määritelty. Skriptikielen täytyy täyttää seuraavat neljä perusperiaatetta:
- Noudattavien Implementointien täytyy noudattaa ECMA-262:ssa kuvattua tukemista kaikille 'tyypeille, arvoille, objekteille, ominaisuuksille, funktioille ja ohjelmointikielille sekä semantiikalle' (ECMA-262, ensimmäinen sivu).
- Noudattavien Implementointien täytyy tukea Unicode-merkistöstandardia (UCS).
- Noudattavien Implementointien täytyy tukea ECMA-262:ssa määrittelemättömiä 'lisätyyppejä, arvoja, objekteja, ominaisuuksia ja funktioita'. ECMA-262 kuvaa nämä lisäykset standardin määrittelemättömiksi uusiksi objekteiksi tai objektien uusiksi ominaisuuksiksi.
- Noudattavien Implementointien täytyy tukea ECMA-262:ssa määrittelemättömiä 'ohjelmointi- ja säännöllinen lausekekieliä' (tämä tarkoittaa, että ne voivat korvata tai laajentaa sisäänrakennetun säännöllisen lausekkeen tuen).
Kaikki ECMAScript-Implementoinnit täytyy noudattaa yllä olevaa standardia.
3. ECMAScript-tuki verkkoselaimissa
Netscape Navigator 3.0, joka sisältää JavaScript 1.1, julkaistiin vuonna 1996. Sitten JavaScript 1.1 -standardi esiteltiin uuden standardin luonnoksena EMCA:lle. JavaScriptin räjähtävä suosio teki Netscapedasta erittäin tyytyväisen aloittamaan 1.2-version kehityksen. Mutta oli ongelma, ECMA ei hyväksynyt Netscapedan luonnosta. Netscape Navigator 3.0:n julkaisun jälkeen pian Microsoft julkaisi IE 3.0:n. Tämä versio IE:stä sisälsi JScript 1.0 (Microsoftin oma JavaScript-Implementaation nimi), joka oli alun perin suunniteltu kilpailemaan JavaScript 1.1:n kanssa. Sitten, dokumentaation puuttumisen ja joitakin epäasiallisia toistuvia ominaisuuksia vuoksi, JScript 1.0 ei saavuttanut JavaScript 1.1:n tasoa.
Ennen ECMA-262 ensimmäisen version lopullista hyväksymistä Netscape Navigator 4.0, joka sisälsi JavaScript 1.2, julkaistiin vuonna 1997. Myöhemmin samana vuonna ECMA-262-standardi hyväksyttiin ja standardoitiin. Siksi JavaScript 1.2 ei ole yhteensopiva ECMAScript ensimmäisen version kanssa, vaikka ECMAScript olisi pitänyt perustua JavaScript 1.1:een.
JScriptin seuraava askel oli JScript 3.0 IE 4.0:ssa (2.0-versio julkaistiin yhdessä IIS 3.0:n kanssa, mutta sitä ei sisällytetty selaimiin). Microsoft mainosti JScript 3.0:ta maailman ensimmäisenä todella ECMA-standardia noudattavana skriptikielenä. Silloin ECMA-262 ei ollut vielä lopullisesti hyväksytty, joten JScript 3.0 kärsi samanlaisen kohtalon kuin JavaScript 1.2 - se ei myöskään noudattanut lopullista ECMAScript-standardia.
Netscape valitsi päivittää JavaScript- toteutustaan Netscape Navigator 4.06:ssa. JavaScript 1.3 teki Netscapen vihdoin täysin yhteensopivaksi ECMAScript ensimmäisen version kanssa. Netscape lisäsi tuen Unicode- standardille ja säilytti kaikkien objektien uudet ominaisuudet JavaScript 1.2:ssa ja teki ne alustariippumattomiksi.
Kun Netscape julkaisi sen lähdekoodin Mozilla-projektina, suunnitelma oli sisällyttää JavaScript 1.4 Netscape Navigator 5.0:een. Kuitenkin rohkea päätös - alusta alkaen uudelleen suunnitella Netscapen koodia, tuotti työn tuhoutumisen. JavaScript 1.4 julkaistiin vain Netscape Enterprise Serverin palvelinohjelmointikieleksi eikä sitä lisätty myöhemmin selaimiin.
Nykyään kaikki suositut verkkoselaimet noudattavat ECMA-262 kolmatta versiota.
Seuraavassa taulukossa luetellaan suurimmat Web-selaimet ECMAScript-tuen osalta:
Selain | DOM-yhteensopivuus |
---|---|
Netscape Navigator 2.0 | - |
Netscape Navigator 3.0 | - |
Netscape Navigator 4.0 - 4.05 | - |
Netscape Navigator 4.06 - 4.79 | Käyttöohje 1 |
Netscape 6.0+ (Mozilla 0.6.0+) | Käyttöohje 3 |
Internet Explorer 3.0 | - |
Internet Explorer 4.0 | - |
Internet Explorer 5.0 | Käyttöohje 1 |
Internet Explorer 5.5+ | Käyttöohje 3 |
Opera 6.0 - 7.1 | Käyttöohje 2 |
Opera 7.2+ | Käyttöohje 3 |
Safari 1.0+/Konqueror ~ 2.0+ | Käyttöohje 3 |
DOM
DOM (dokumenttinen objektimalli) on HTML:n ja XML:n sovellusliittymä (API). DOM jakaa koko sivun solmuja muodostavaksi dokumentiksi. HTML- tai XML-sivun jokainen osa on solmun haara. Tarkastellaan seuraavaa HTML-sivua:
<html> <head> <title>Esimerkkipagina</title> </head> <body> <p>hei maailma!</p> </body> </html>
Tämä koodi voidaan piirtää DOM:n solmujen hierarkiaksi:

DOM luo puun muodossa dokumentin, mikä antaa kehittäjille ennennäkemättömän hallinnan dokumentin sisällölle ja rakenteelle. DOM API:n avulla voidaan helposti poistaa, lisätä ja korvata solmuja.
1. Miksi DOM on välttämätön
Kun IE 4.0 ja Netscape Navigator 4.0 alkoivat tukea erilaisia dynaamisia HTML (DHTML) muotoja, kehittäjät saivat ensimmäisen kerran mahdollisuuden muuttaa sivun ulkoasua ja sisältöä ilman sivun uudelleenlatausta. Tämä oli suuri edistysaskel Web-tekniikassa, mutta se toi mukanaan myös valtavan määrän ongelmia. Netscape ja Microsoft kehittivät omat DHTML:n versiot, mikä lopetti kauden, jolloin Web-kehittäjät saattoivat kirjoittaa vain yhden HTML-sivun, joka toimi kaikissa selaimissa.
Teollisuus päätti, että on tehtävä jotain pitääkseen Webin yhtenäisyyden, he pelkäsivät, että jos Netscape ja Microsoft antaisivat tällaisen vapaudelle, Web jakautuisi kahteen erilliseen osaan, jotka sopivat vain tiettyihin selaimiin. Siksi W3C (World Wide Web Consortium), joka vastaa Web-kuuntelun standardeista, alkoi kehittää DOM:ia.
2. DOM:n eri tasoja
DOM Level 1 esiteltiin W3C:llä lokakuussa 1998. Se koostuu kahdesta moduulista, nimittäin DOM Coresta ja DOM HTML:stä. Ensimmäinen tarjoaa XML-pohjaisen asiakirjarakenteen, jotta voidaan avata ja käsitellä asiakirjan minkä tahansa osan; jälkimmäinen lisää joitakin HTML-ominaisuuksia ja menetelmiä, mikä laajentaa DOM Corea.
Huomaa, että DOM ei ole pelkästään JavaScriptin omaisuutta, itse asiassa monissa muissa kielissä on toteutettu sitä. Web-selaimissa DOM on kuitenkin toteutettu ECMAScriptin avulla ja se on nyt suuri osa JavaScript-kieltä.
DOM Level 1 on vain tavoite, eli suunnitella asiakirjan rakenteen, kun taas DOM Level 2:n tavoitteet ovat laajemmat. Alkuperäiseen DOM:aan lisätty laajennus tarjoaa tuen hiiren ja käyttöliittymätapahtumille (DHTML tarjoaa tälle runsaasti tukea), alueelle, selailulle (toistuvat DOM-dokumenttien menetelmät) ja CSS:n (kerrastetyylitaulukot) tukemisen objektipohjaisen rajapinnan kautta. Level 1:ssä esitelty alkuperäinen DOM Core lisää tuen XML-nimitaloudelle.
DOM Level 2:n myötä otettiin käyttöön useita uusia DOM-moduuleja, jotka käsittelevät uusia rajapintatyyppejä:
- DOM-näkymät - kuvaa erilaisia asiakirjan näkymiä (eli CSS-tyylien mukauttamisen ennen ja jälkeen)
- DOM-tapahtumat - kuvaa tapahtumarajapintoja
- DOM-tyyli - kuvaa rajapintoja, jotka käsittelevät CSS-tyylejä perustuvaa tyyliä
- DOM-selailu ja -alue - kuvaa rajapintoja, jotka selataan ja käsitellään asiakirjapuuta
DOM Level 3 ottaa käyttöön yhtenäisen tavoin ladata ja säilyttää asiakirjoja (mukaan lukien uusi moduuli DOM Load and Save) sekä asiakirjojen validointimenetelmät (DOM Validation), mikä laajentaa DOM:ia edelleen. Level 3:ssa DOM Core laajennetaan tukeakseen kaikkia XML 1.0 -ominaisuuksia, mukaan lukien XML Infoset, XPath ja XML Base.
DOM-opiskelun aikana voi kohdata ihmisiä, jotka viittaavat DOM Level 0:een. Huomaa, että DOM Level 0:ta ei ole olemassa mitään standardia, se on vain DOM:n historiallinen viittauspiste (DOM Level 0 tarkoittaa alkuperäistä DHTML:tä, jota IE 4.0 ja Netscape Navigator 4.0 tukivat).
3. Muut DOM
Lisäksi DOM Coren ja DOM HTMLn ohella useat muut kielet ovat julkaisseet omia DOM-standardejaan. Nämä kielet perustuvat XML:ään, ja jokaisella DOM:illa on omat erityiset metodit ja rajapinnat, jotka lisätään vastaavaan kieleen:
- Scalable Vector Graphics (SVG) 1.0
- Digital Markup Language (MathML) 1.0
- Synchronous Multimedia Integration Language (SMIL)
Huomautus:Jos haluat oppia lisää, vieraile CodeW3C:n SMIL opetusohjelma ja SVG opetusohjelma.
Lisäksi myös muut kielet ovat kehittäneet omia DOM-toteutuksiaan, kuten Mozillan XML-käyttöliittymäkieli (XUL). Vain yllä luetellut kielet ovat W3C:n suositeltuja standardeja.
4. Web-selaimien DOM-tuki
DOM oli jo standardina ennen kuin se alkoi toteutua Web-selaimissa. IE kokeili DOM:ia ensimmäisen kerran 5.0-versiossa, mutta vasta 5.5-versiosta lähtien se tarjosi todellista DOM-tukea, IE 5.5 toteutti DOM Taso 1:n. Tämän jälkeen IE ei ole tuonut uusia DOM-ominaisuuksia.
Netscape otti DOM-tuen käyttöön vasta Netscape 6:ssa (Mozilla 0.6.0). Tällä hetkellä Mozilla tarjoaa parhaan DOM-tuen, toteuttaen täyden Taso 1:n, suurimman osan Taso 2:sta ja osan Taso 3:sta. (Mozilla-kehitystiimin tavoite on rakentaa 100% standardien kanssa yhteensopiva selain, ja heidän työnsä on tuonut hedelmää.)
Opera liitti DOM-tuen vasta 7.0-versiossa, ja Safari on myös toteuttanut suurimman osan DOM Taso 1:sta. Ne ovat lähes samalla tasolla IE 5.5:n kanssa, ja joissakin tapauksissa jopa ylittävät IE 5.5:n. DOM-tuen osalta kaikki selaimet ovat kuitenkin paljon jäljessä Mozillasta. Tässä taulukossa l列nnetään yleisimmät selaimet DOM:n tukemisessa.
Selain | DOM-yhteensopivuus |
---|---|
Netscape Navigator 1.0 - 4.x | - |
Netscape 6.0+ (Mozilla 0.6.0+) | Taso 1, Taso 2, Taso 3 (osittain) |
IE 2.0 - 4.x | - |
IE 5.0 | Taso 1 (minimi) |
IE 5.5+ | Taso 1 (melkein kaikki) |
Opera 1.0 - 6.0 | - |
Opera 7.0+ | Taso 1 (melkein kaikki), Taso 2 (osittain) |
Safari 1.0+/Konqueror ~ 2.0+ | Taso 1 |
Huomautus:Jos haluat syventyä DOM-tuntemukseen, vieraile CodeW3C:n HTML DOM opetusohjelma ja XML DOM opetusohjelma.
BOM
IE 3.0 ja Netscape Navigator 3.0 tarjosivat ominaisuuden - BOM (Browser Object Model), jolla voidaan käyttää ja hallita selainikkunoita. BOM:n avulla kehittäjät voivat siirtää ikkunoita, muuttaa tilastopalkin tekstiä ja suorittaa muita, jotka eivät suoraan liity sivun sisältöön, toimia. BOM:n ainutlaatuisuus ja usein epäilyttävyys johtuu siitä, että se on vain osa JavaScriptiä, eikä sillä ole minkäänlaisia standardeja.
BOM käsittelee pääasiassa selainikkunoita ja kehyksiä, mutta yleensä selainkohtaiset JavaScript-laajennukset pidetään BOM:n osana. Nämä laajennukset sisältävät:
- Avaa uuden selainikkunan
- Siirtää, sulkea selainikkuna ja säätää ikkunan kokoa
- Tarjoaa Web-selaimen yksityiskohtia sijaintiobjekti
- Tarjoaa käyttäjän näytönresoluution yksityiskohtia näyttöobjekti
- Cookie-tuen
- IE laajensi BOM:n, lisäten ActiveXObject-luokan, jota voidaan instanssoida ActiveX-objekteja JavaScriptillä
Koska ei ole mitään suoraan BOM-standardia, jokaisella selaimella on oma BOM-toteutuksensa. On olemassa joitakin käytännön standardeja, kuten yksi ikkuna- ja navigointiobjekti, mutta jokainen selain voi määritellä omia ominaisuuksiaan ja menetelmiään näille tai muille objekteille.
Katso:
- Edellinen sivu JavaScript historia
- Seuraava sivu ECMAScript syntaksi