JavaScript

ohjelmointikieli, jota käytetään enimmäkseen skriptikielenä verkkoselaimissa

JavaScript on alun perin Netscapen kehittämä, pääasiassa verkkoympäristössä käytettävä ohjelmointikieli.

JavaScript
Paradigma monia: olio-ohjelmointi (prototyyppipohjainen), imperatiivinen, funktionaalinen
Tyypitys heikko, dynaaminen
Yleinen suoritusmalli tulkattava
Muistinhallinta automaattinen
Julkaistu 4. joulukuuta 1995[1]
Suunnitellut Brendan Eich
Kehittäjä alun perin Netscape, nykyään Ecma International
Vakaa versio ECMAScript 2021[2]
Merkittävimmät toteutukset V8, SpiderMonkey, JavaScriptCore, Chakra
Vaikutteet C, Java, Perl, Python, Scheme, Self
Vaikuttanut TypeScript, Dart, Haxe, CoffeeScript, QML, Objective-J, LiveScript, JScript .NET, ActionScript
Käyttöjärjestelmä alustariippumaton
Uutisryhmä comp.lang.javascript

JavaScript on dynaamisesti ja heikosti tyypitetty, tulkattava, oliopohjainen komentosarjakieli, jonka syntaksi perustuu löyhästi C-ohjelmointikieleen. Kielen semantiikka ja suunnittelu on saanut vaikutteita Self- ja Scheme-ohjelmointikielistä.

Web-kehitykseen käytetään usein JavaScriptiin perustuvia ohjelmistokehyksiä kuten React, Svelte ja Next.js sekä JavaScriptin laajennoksia ja JavaScriptiksi käännettäviä (engl. transpiler) kieliä kuten JSX ja TypeScript – ei niinkään natiivia JavaScriptiä suoraan. JavaScriptiä ei tule sekoittaa Java-kieleen; nimi on peräisin Netscapen ja Javan kehittäneen Sunin lisenssisopimuksesta ja pyrkimyksestä markkinoida JavaScriptistä Javan "apukieli"[3]. Kielen standardin virallinen nimi on ECMAScript.

JavaScript-tiedoston ikoni.

EsimerkitMuokkaa

PrototyypitMuokkaa

// Luo uusi tyhjä olio.
let person = Object.create(null);
// Lisää olioon attribuutteja.
person.name = 'foo';
person.age = 25;
// Lisää olioon metodi.
person.saySomething = function() {
    console.log('Hello. I am ' + this.name + '.');
}

person.saySomething(); // > Hello. I am foo.

// Luo uusi olio käyttämällä edellistä prototyyppinä.
let anotherPerson = Object.create(person);
// Muuta attribuutin arvoa.
anotherPerson.name = 'bar';

// JavaScript etsii "saySomething" ja "name" prototyyppiketjusta.
anotherPerson.saySomething(); // > Hello. I am bar.

HTML-dokumentitMuokkaa

<html>
  <head>
    <title>JavaScript-esimerkki</title>
  </head>
  <body>
    <!-- script-merkkien välissä oleva teksti
         tulkitaan JavaScript-koodiksi ja ajetaan heti, kun
         HTML-tiedosto avataan web-selaimessa. -->
    <script>
      // "document" on web-selainympäristössä oleva
      // globaali objekti, joka edustaa web-sivua (HTML DOM) ja 
      // mahdollistaa tämän muokkaamisen JavaScriptin avulla.
      document.write("Hei, maailma!");
    </script>
  </body>
</html>
<html>
  <head>
    <title>JavaScript-esimerkki 2</title>
  </head>
  <body>
    <script>
      function sayHello() {
        alert("Hei!")
      }
    </script>
    <!-- button-merkki hyväksyy JavaScript-funktion, jota
         kutsutaan, kun kyseistä painiketta klikataan. --> 
    <button onclick="setTimeout(sayHello, 1000)">Tervehdi</button>
  </body>
</html>
<html>
  <head>
    <title>JavaScript-esimerkki 2</title>
  </head>
  <body>
    <div id="box">Teksti tulee tänne</div>
    <button id="change-color">Muuta värejä</button>
    <button id="change-text">Muuta tekstiä</button>
    <script>
        let box = document.querySelector("#box")
        document.querySelector("#change-color").addEventListener("click", () => {
            box.style.backgroundColor = "black"
            box.style.color = "white"
        })
        document.querySelector("#change-text").addEventListener("click", () => {
            box.innerHTML = "Terve, maailma!"
        })
    </script>
  </body>
</html>

FunktiotMuokkaa

/* Nimetön funktio, joka kutsuu itseään, palauttaa merkkijonon "Bar" 
todennäköisyydellä 67 % ja "Foo" todennäköisyydellä 33 %, ja kulkeutuu 
sitten roskienkeruuseen. */
(function (arg) {
  // pino eli periytyykö arraysta
  if (arg instanceof Array) {
    // muutetaan jokainen numeroarvo kirjaimeksi
    arg.forEach((item, index) => {
      arg[index] = String.fromCharCode(item);
    });
    arg = arg.join(""); // kirjainpinosta merkkijonoksi
  }
  return arg;
  // argumenttina kolmiosainen (ternary) operaatio 
})(Math.random() <= 0.33 ? [70, 111, 111] : "Bar");

KäyttöaiheetMuokkaa

JavaScriptin tärkein sovellus on mahdollisuus lisätä verkkosivuille dynaamista toiminnallisuutta. Sitä käytetään tavallisimmin osana verkkoselaimia, joiden toteutukset sallivat asiakaspuolen skriptien interaktion käyttäjän kanssa, selaimen rajoitetun hallinnan, asynkronisen kommunikaation ja käyttäjälle näytettävän dokumenttisisällön muokkaamisen. JavaScriptin käyttö on yleistynyt sen yksinkertaisuuden, joustavuuden, monipuolisten lisäosien ja tehokkuuden vuoksi myös palvelinpuolella[4], jolloin sitä voidaan käyttää esimerkiksi Node.js -ajoympäristössä. Lisäksi ohjelmointikieltä käytetään pelien kehityksessä sekä työpöytä- ja mobiilisovellusten luomisessa.

OminaisuudetMuokkaa

TyypitMuokkaa

JavaScript on heikosti tyypitetty, mikä tarkoittaa, ettei käytössä olevia tietorakenteita erikseen määritellä ja JavaScript pyrkii yleensä muuttamaan tyyppejä automaattisesti virheen nostamisen sijaan. Esimerkiksi taulukko voi kehittyä oliomaiseksi muuttujarakenteeksi ja kokonaisluvun ja liukuluvun eroja ei tarvitse välttämättä miettiä.

JavaScriptin primitiiveihin kuuluvat Boolean, null, undefined, Number, String, BigInt, Symbol ja Object. Tyypitys on dynaaminen ja ajonaikaiset tyyppimuunnokset ovat tavallisia. Literaaleihin kuuluvat tekstiliteraalit "string", taulukkoliteraalit [1, 2, 3, /* tyhjä */, 5, ], Boolen literaalit true ja false, numeeriset literaalit kuten 10, 3.14 ja 1.5e-9, objektiliteraalit kuten { nimi: "Arvo", "taulukko": [1, 2, 3], teeJotain() { ... }, }, regex-literaalit /[A-Z]+/ ja mallineet `Hei, ${nimi}!'\n'`.[5]

FunktiotMuokkaa

Funktio määritellään deklaraatiosyntaksilla function teeJotain(x) { ... } tai lausekkeena var teeJotain = function (x) { ... };. Lausekesyntaksi on tavallinen, kun funktiota on tarkoitus käyttää toisen funktion parametrina. Nimettömiin lambdafunktioihin käytetään fat arrow-syntaksia (x) => x.length tai yksinkertaisesti function () { ... }. Välittömästi kutsuttu nimetön funktio voi olla myös (function () { ... })();. Funktion sisänäkymässä on käytössä erityinen arguments-taulukko, joka sisältää järjestyksessä kaikki funktiolle annetut parametrit. Vastaavasti ylimääräisten parametrien kaappaamiseen voidaan käyttää ...nimi-syntaksia tyylillä function nimi(x, ...y) { ... }. Jos taas määritettyjä argumentteja ei anneta, niiden arvo on undefined tai oletusarvo function nimi(x = "oletus") { ... }. Funktioiden käyttö on sallittua ennen niiden määritelmiä (engl. function hoisting), jos funktio on määritelty deklaraatiotyylillä.[5]

LauseetMuokkaa

Muuttuja määritellään var (funktionäkymä, muuttuva), let (blokkinäkymä, muuttuva) ja const (blokkinäkymä, muuttumaton) avainsanoilla. JavaScript ei kuitenkaan edellytä näitä vaan luo avainsanan puuttuessa alustamattoman globaalin muuttujan. Tällainen joustavuus on kielelle tyypillistä. var-sanalla määriteltyjen muuttujien käyttö on myös sallittua ennen määrittelyä, mutta niiden arvo on tällöin undefined (engl. variable hoisting). Destrukturointi on mahdollista tyylillä let [eka, toka, kolmas] = teeJotain(input);.[5]

Lauseet erotellaan puolipisteillä (mutta tämä ei ole pakollista yksirivisissä lauseissa). Lauseisiin kuuluvat myös[5]

  • blokkilauseet { ... }
  • if-else-lause if (...) { ... } else if (...) { ... } else { ... } (undefined, null, 0, NaN ja "" tulkitaan olevan false; kaikki muut arvot tulkitaan olevan true)
  • switch-lause switch (x) { case y: ...; case z: ...; default: ...; }
  • poikkeustenhallinnan throw ja try { ... } catch (e) { ... } finally { ... }
  • for-silmukka for (let x = 0; x < 10; x++) { ... }
  • for-in-silmukka for (x in y) { ... }, missä y on ominaisuuksia sisältävä objekti ja x ominaisuuden nimi
  • for-of-silmukka for (x of y) { ... }, missä y on iteroitava objekti ja x on arvo
  • do-while-silmukka do { ... } while (...);
  • while-silmukka while (...) { ... }

Operaattoreita ovat[5]

  • sijoitusoperaattori = ja tämän päivittävät versiot kuten += ja ehdolliset versiot kuten &&= (true) ja ??= (null)
  • vertailuoperaattorit kuten heikkoyhtäläisyys == ja vahva (sama tyyppi) yhtäläisyys ===
  • aritmeettiset operaattorit kuten jakojäännös x % y ja inkrementointi ++x
  • bittioperaattorit kuten ja & ja ei ~
  • loogiset operaattorit kuten ja &&, tai ||, ei ! ja ?? (null tai undefined)
  • ehto-operaattori x ? y : z
  • delete, typeof, void, in, instanceof, new
  • ryhmittely ( ... )

ModularisointiMuokkaa

JavaScript-moduulissa käytetään export-lausetta kuten export { muuttuja, nimi, funktio, Luokka }; ja nämä jaetut objektit tuodaan uuteen globaaliin näkymään tyylillä import { muuttuja, funktio } from "./polku/moduuli.js". HTML-tiedostossa tulee tällöin käyttää type-attribuuttia <script type="module" src="..."></script>. Nimetyn viennin sijaan voidaan myös käyttää export default nimi;. Jos taas halutaan vaihtaa tuotujen objektien nimiä, voidaan käyttää as-avainsanaa tyylillä import { funktio as f, nimi as n } from "./polku/moduuli.js";. Useat tuodut objektit voidaan myös laittaa moduuliobjektiin tyylillä import * as Moduuli from "./polku/moduuli.js";. Vienti voidaan myös merkitä avainsanalla await, jolloin moduulin tuonti ei estä muita prosesseja, jotka eivät riipu tästä await-moduulista. Moduulit on parasta kehittää niin, että ne toimivat eri ajoympäristöissä (web-selain, Node.js). Globaalit muuttujat ovat yhden globaalin objektin ominaisuuksia, kuten web-selaimessa window.muuttuja. Funktiot ja blokkilauseet (engl. block statement) luovat paikallisia näkymiä ja globaalit nimet näkyvät kaikkialle.[5]

Olio-ohjelmointiMuokkaa

JavaScriptin oliomallin perusyksikköjä ovat object- ja function-oliot. Oliomalli ja sen enkapsulaatio ja periytyvyys pohjautuvat prototyyppeihin, ei luokkiin kuten useimmissa olio-ohjelmointikielissä (esim. Smalltalk, C++, Java, Ruby).[6]

Koska JavaScript on prototyyppipohjainen kieli, olioiden luominen ei edellytä luokkia. Oliot voidaan rakentaa suoraan "tyhjästä" tai jonkin toisen olion prototyypin pohjalta. Prototyypit tukevat siis eräänlaista versiota perinnästä, joka on tärkeä käsite luokkapohjaisissa kielissä, kuten Javassa. Jokaisella JavaScript-oliolla on sisäänrakennettuna ominaisuutena jokin prototyyppi[7]. Prototyypit ovat myös olioita ja näin myös prototyypeillä on omat prototyyppinsä. Tästä muodostuu ns. prototyyppiketju, joka jatkuu niin pitkään kunnes päästään olioon, jonka prototyyppi on null. Tämä muistuttaa hieman perintäketjua luokkapohjaisissa kielissä. Kun olion attribuuttia referoidaan esim. olio.ominaisuus, sen arvo haetaan prototyyppiketjusta tai arvon puuttuessa palautetaan undefined.

Objektit voivat periä ominaisuudet. prototyypiltä __proto__-syntaksilla const o = { __proto__: prototyyppi, muuttuja: 10, }; tai funktiokonstruktorin avulla function Konstruktori(x) { ... } ja Konstruktori.prototype.metodi = function() { ... };. this-avainsana mahdollistaa objektiin viittaamisen tämän metodin sisällä ja super-syntaksi mahdollistaa vastaavasti objektin prototyyppiin/vanhempaan viittaamisen. Konstruktoria kutsutaan käyttämällä new-avainsanaa funktiokutsun edellä esim. const auto = new Auto("Toyota", 2007);. Vaihtoehtoisesti voidaan käyttää Object.create-metodia ja prototyyppiobjektia.[5]

Prototyyppijärjestelmän päälle JavaScriptiin on myös kehitetty perinteisempi luokkajärjestelmä. Uusi luokka määritellään syntaksilla class Nimi { constructor() { ... } nimi2 = 1; static nimi2 = 2; metodi() { ... } #nimi3 = 3; }. static merkitsee luokkaominaisuuden ja # yksityisen ominaisuuden. Luokasta tehdään instanssi new-avainsanalla const i = new Nimi();. Luokat sallivat myös aksessorikentät lisäämällä erityiset metodit get ominaisuus() { return ...; } ja set ominaisuus(x) { ... }. Periminen onnistuu class Luokka extends Yläluokka { ... }.[5]

TiedostotMuokkaa

JavaScript-tiedostojen tiedostoliite on yleensä .js.

JSON-tiedostomuoto (engl. JavaScript Object Notation) perustuu JavaScriptin tietorakenteisiin, mutta sitä käytetään muissakin ohjelmointikielissä. Esimerkiksi web-sovelluksissa JSON on yleinen tiedonsiirtomuoto.[8]

JavaScript-tiedostojen MIME-tyyppi on application/javascript tai virallisesti vanhentunut text/javascript (RFC 4329). Jälkimmäinen on kuitenkin edelleen käytössä[9].

MuutMuokkaa

Uusi iteraattori voidaan luoda tekemällä objekti, jolla on next-metodi, joka palauttaa value ja done ominaisuudet sisältävän objektin. Generaattori on erityinen iteraattori, joka määritellään yksinkertaisemmalla syntaksilla mallia function* teeIteraattori(x) { ... yield index; ... }. Iteroitavalla objektilla on oltava Symbol.iterator-metodi. Sisäänrakennettuja iteroitavia objekteja ovat String, Array, TypedArray, Map ja Set.[5]

Promise on objekti joka edustaa asynkronisesti laskettua tulosta ja siihen voidaan liittää ns. callback-funktioita then, catch, all, resolve, reject ... metodien avulla.[5]

Kommentit ovat // Yksi rivi tai /* Useita riviä */.[5] JavaScriptille ei ole yksittäistä tyyliä tai syntaksia sanelevaa ohjetta – yleensä mainitaan Crockfordin, Googlen tai Yahoon tyylioppaat.

ToteutuksetMuokkaa

Eurooppalainen tieto- ja viestintäjärjestelmien standardointiyhdistys Ecma International on luonut JavaScript-kielestä standardoidun version, jota kutsutaan nimellä ECMAScript. Se on määritelty järjestön standardissa ECMA-262, jonka myös ISO on hyväksynyt kansainväliseksi standardiksi ISO 16262.[10] ISO/IEC 16262 on vedetty pois ja sen on korvannut ISO/IEC 22275:2018.[11][12] Uusin versio ECMAScriptistä on kesäkuussa 2021 julkaistu ECMAScript 2021.[13]

Useat selaimet tukevat standardin lisäksi lisätoiminnallisuuksia, kuten Mozilla-selainten E4X, joka on XML:n käsittelyyn erikoistunut kielen laajennus (standardi ECMA-357).

Facebook on julkaissut kielelle Flow-nimisen staattisen tyyppitarkastajan, joka mahdollistaa varhaisen virhetarkistuksen ja helpottaa välttämään tiettyjä ajonaikaisia virheitä.[14]

HistoriaMuokkaa

JavaScriptin kehitti alun perin Netscapen Brendan Eich nimellä Mocha. Nimi muutettiin LiveScriptiksi ja viimein markkinointisyistä JavaScriptiksi Netscapen liittouduttua Java-kielen kehittäneen Sun Microsystemsin kanssa. JavaScript on kuitenkin Java-ohjelmointikielestä eroava tekniikka.[15] JavaScript tuli käyttöön Netscape Navigator 2.0 -selaimessa maaliskuussa 1996.

JavaScriptin suosion ansiosta Microsoft kehitti siitä yhteensopivan version, jolle se antoi tavaramerkkisyistä nimen JScript.[15] Tämä toiminnallisuus lisättiin Internet Explorerin versioon 3.0, joka julkaistiin elokuussa 1996. Microsoft aloitti JScriptin standardoinnin Ecma International -järjestössä. Ensimmäinen versio standardista julkaistiin kesäkuussa 1997[13].

LähteetMuokkaa

  • Rapo, Jani: TypeScriptin hyödyllisyys JavaScript-ohjelmistokehityksessä. Pro gradu -tutkielma. Helsingin yliopisto, 2020. Teoksen verkkoversio (PDF) (viitattu 16.10.2021).

ViitteetMuokkaa

  1. Netscape and Sun announce JavaScript (Arkistoitu 6.6.2002) Wayback Machine. Arkistoitu 6.6.2002. Viitattu 16.10.2021. (englanniksi)
  2. ECMAScript® 2021 language specification, (viitattu ). Arvo on haettu Wikidatasta.
  3. https://stackoverflow.com/questions/2018731/why-is-javascript-called-javascript-since-it-has-nothing-to-do-with-java
  4. Rapo 2020, s. 1.
  5. a b c d e f g h i j k https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
  6. Object Oriented Programming Wikibooks. Wikimedia Foundation. Viitattu 15.12.2011. (englanniksi)
  7. Object prototypes - Learn web development | MDN developer.mozilla.org. Viitattu 25.9.2022. (englanniksi)
  8. Javascript-tietorakenteet – Web-käyttöliittymien ohjelmointi Jyväskylän yliopisto. Viitattu 16.10.2021.
  9. HTML 5.2 (2.2.2. Dependencies) 14.12.2017. W3C. Viitattu 21.5.2019. (englanniksi)
  10. Rapo 2020, s. 10.
  11. ISO/IEC 16262:2011 iso.org. Viitattu 18.5.2022. (englanniksi)
  12. ISO/IEC 22275:2018 iso.org. Viitattu 18.5.2022. (englanniksi)
  13. a b ECMA-262 Ecma International. Viitattu 16.10.2021. (englanniksi)
  14. Flow, a new static type checker for JavaScript engineering.fb.com. Viitattu 23.2.2020. (englanniksi)
  15. a b Smith, Dori ja Negrino, Tom: ”1. JavaScriptin perehtyminen”, JavaScript: Tehokas hallinta, s. 5. Readme, 2007.

KirjallisuuttaMuokkaa

  • Flanagan, David: JavaScript: Tehokäyttäjän opas. 648 sivua. Suomentanut Pasi Matilainen. Jyväskylä: Suomen ATK-kustannus, 1997. ISBN 951-762-563-4.
  • Peltomäki, Juha: JavaScript-kieli: Uudet ominaisuudet. 154 sivua. Books on Demand, 2017. ISBN 978-951-568-355-7.

Aiheesta muuallaMuokkaa