Siirry sisältöön

JavaScript

Wikipediasta
Tämä on arkistoitu versio sivusta sellaisena, kuin se oli 23. lokakuuta 2022 kello 18.03 käyttäjän E0380341 (keskustelu | muokkaukset) muokkauksen jälkeen. Sivu saattaa erota merkittävästi tuoreimmasta versiosta.
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 2024[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 alun perin Netscapen kehittämä, pääasiassa verkkoympäristössä käytettävä dynaaminen komentokieli. 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[3], 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.

JavaScriptiä ei tule sekoittaa Java-kieleen.

Yleistä

JavaScript-tiedoston ikoni.

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

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.[4] ISO/IEC 16262 on vedetty pois ja sen on korvannut ISO/IEC 22275:2018.[5][6] Uusin versio ECMAScriptistä on kesäkuussa 2021 julkaistu ECMAScript 2021.[7]

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

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

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

Historia

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.[10] 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.[10] 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[7].

Ominaisuuksia

Heikosti tyypitetty ja dynaaminen

JavaScript on heikosti tyypitetty, mikä tarkoittaa ettei käytössä olevia tietorakenteitakaan tarvitse erikseen määritellä. Esimerkiksi taulukko voi kehittyä oliomaiseksi muuttujarakenteeksi. Luotaessa muuttajaa, käyttäjän ei tarvitse huolehtia muusta kuin koodinsa laadusta, eli kokonaislukuvun ja liukuluvun eroja ei välttämättä tarvitse miettiä.

Prototyyppi-pohjainen oliomalli

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).[11]

JavaScriptin prototyypit ja oliot

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.

let person = Object.create(null);
person.name = 'foo';
person.age = 25;
person.saySomething = function() {
    console.log('Hello. I am ' + this.name);
}

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

let anotherPerson = Object.create(person);
anotherPerson.name = 'bar';
anotherPerson.saySomething(); // Hello. I am bar

Yllä oleva esimerkki havainnollistaa JavaScriptin prototyyppejä ja olioita. Koodinpätkässä luodaan aluksi uusi olio person käyttäen metodia Object.create. Koska metodille annettiin argumenttina null, person ei omaa yhtään valmista metodia tai attribuuttia. Sitten objektia voidaan rakentaa pala palalta; tässä person saa nimen, iän ja sitten funktion attribuuteikseen. Uusi olio person voi toimia prototyyppinä; esimerkissä sen pohjalta luodaan toinen olio anotherPerson.

Jokaisella JavaScript-oliolla on sisään rakennettuna ominaisuutena jokin prototyyppi[12]. Prototyypit ovat myös olioita. Tämän johdosta myös prototyypeillä on omat prototyyppinsä. Tästä muodostuu ns. prototyyppiketju, joka jatkuu niin pitkään kunnes päästään olioon, jonka oma prototyyppi on null. Tämä muistuttaa hieman perintäketjua luokkapohjaisissa kielissä.

Kun olion attribuuttia, kuten yllä olevassa esimerkissä vaikka name, referoidaan, sitä lähdetään etsimään prototyyppiketjusta. Attribuuttia etsitään edeten aina yksi prototyyppitaso ylemmäs niin kauan, kunnes etsitty attribuutti joko löytyy ja attribuutin arvo palautetaan tai päästään prototyyppiketjun loppuun, jolloin palautetaan undefined. Esimerkin tapauksessa name löytyy heti.

Ohjelmointityyli

JavaScriptille ei ole yksittäistä ohjelmointityyliä tai syntaksia sanelevaa ohjetta. Yleensä mainitaan Crockfordin, Googlen tai Yahoon tyylioppaat.

MIME-tyyppi ja tiedostoliite

JavaScript-tiedostojen tiedostoliite on yleensä .js.

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

Esimerkkiohjelmia

Hei, maailma! JavaScript-skripti upotettuna HTML-dokumenttiin

<html>
  <head>
    <title>JavaScript-esimerkki</title>
  </head>
  <body>
    <script>
      document.write("Hei, maailma!");
    </script>
  </body>
</html>

Itsestään toistava esimerkki upotettuna HTML-dokumenttiin

<html>
  <head>
    <title>JavaScript-esimerkki 2</title>
  </head>
  <body>
    <script>
      function sayHello() {
        alert("Hei!")
      }
    </script>
    <button onclick="setTimeout(function(){sayHello()}, 1000)">Tervehdi</button>
  </body>
</html>

Anonyymi funktio

/* Anonyymi funktio joka kutsuu itseään, palauttaa merkkijonon "Bar" 67 %
ja "Foo" 33 % todennäköisyydellä, 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;
})(Math.random() <= 0.33 ? [70, 111, 111] : "Bar"); // argumenttina kolmiosainen operaatio, 'ternary'

Yksinkertainen DOM-manipulaatio

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

Lähteet

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

Viitteet

  1. Netscape and Sun announce JavaScript (Arkistoitu 6.6.2002) Wayback Machine. Arkistoitu 6.6.2002. Viitattu 16.10.2021. (englanniksi)
  2. ECMAScript® 2024 Language Specification, (viitattu ). Tieto on haettu Wikidatasta.
  3. Rapo 2020, s. 1.
  4. Rapo 2020, s. 10.
  5. ISO/IEC 16262:2011 iso.org. Viitattu 18.5.2022. (englanniksi)
  6. ISO/IEC 22275:2018 iso.org. Viitattu 18.5.2022. (englanniksi)
  7. a b ECMA-262 Ecma International. Viitattu 16.10.2021. (englanniksi)
  8. Flow, a new static type checker for JavaScript engineering.fb.com. Viitattu 23.2.2020. (englanniksi)
  9. Javascript-tietorakenteet – Web-käyttöliittymien ohjelmointi Jyväskylän yliopisto. Viitattu 16.10.2021.
  10. a b Smith, Dori ja Negrino, Tom: ”1. JavaScriptin perehtyminen”, JavaScript: Tehokas hallinta, s. 5. Readme, 2007.
  11. Object Oriented Programming Wikibooks. Wikimedia Foundation. Viitattu 15.12.2011. (englanniksi)
  12. Object prototypes - Learn web development | MDN developer.mozilla.org. Viitattu 25.9.2022. (englanniksi)
  13. HTML 5.2 (2.2.2. Dependencies) 14.12.2017. W3C. Viitattu 21.5.2019. (englanniksi)

Kirjallisuutta

  • 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 muualla