JavaScript

Käsitellään JavaScript-ohjelmointikielen perusteet. Javascript on ohjelmointikieli jota käytetään erityisesti WWW-sivujen yhteydessä.

Luennolla tehty esimerkki: malli.html ja malli.js

ECMAscript

Javascript on alunperin kehitetty Netscape-selaimeen 1990-luvulla. Javascript-kieli on nykyään standardoitu ECMAScript-standardissa. ECMAScript-kieltä kehitetään edelleen. Tällä hetkellä uusin versio on ECMAScript 2017 mutta käytännössä käytössä on ECMAScript 2015 (ES6).

Javascript (ECMAScript) -kieltä käytetään useissa eri yhteyksissä mutta erityisesti WWW-selaimissa. Selaimessa suoritetulla Javascriptilla voi muokata selainympäristöä ja siihen liittyviä objekteja.

JavaScript-ohjelman suorittaminen

Javascript-ohjelmat suoritetaan yleensä selainympäristössä. Tämä tarkoittaa javascript-sovelluksen linkittämistä WWW-sivun yhteyteen. Javascript-ohjelma pääsee käsiksi kyseisen WWW-sivun sisältöön ja sen ulkoasuun.

Javascript liitetään www-sivuun script-elementillä yleensä head-osassa:

<script type="text/javascript" src="jokutiedosto.js"></script>

Javascriptia voi harjoitella myös suoraan selaimessa konsolin tai scratchpadin avulla tai JSFiddle-palvelussa.

Työvälineet

Syntaksi

Javascriptin syntaksista kannattaa lukea seuraavia lähteitä:

Suositeltavaa on suorittaa ohjelman Strict modessa. Kirjoita ohjelmakoodisi alkuun rivi:

"use strict";

Ympäristö

JavaScriptiä suoritetaan määrätyssä ympäristössä, joka voi olla esimerkiksi selaimessa. JavaScript ei itsessään määrittele, miten tietoa voidaan syöttää tai tulostaa, vaan se tarjoaa ainoastaan tiedon käsittelymekanismit. Tiedon syöttö ja vasteiden anto tehdään käyttäen HTML:ää ja Document Object Model (DOM) -rajapintaa.

Yleistä

Muuttujat

JavaScript on heikosti tyypitetty kieli. Muuttujien tyyppi määräytyy siis arvon perusteella.

Muuttujat esitellään seuraavasti:

var x = 1.0;
var s = "Diiba daaba";

totuus = true; // globaali muuttuja, näkyy kaikissa funktioissa. Ei toimi Strict-moodissa. Älä käytä.

// lohkon sisäinen muuttuja
let foo = "daaba dii";

// vakio, ei voida muuttaa
const foobar = "vakio";

var bar; // määrittelemätön arvo, undefined

if ( bar === undefined ) {
   console.log("bar on undefined");
}

if (bar) {
 // jos bar on tosi
}
else {
  // tämä toteutuu, koska undefined on sama kuin false
}

var luku = bar + 1; // luku saa arvoksi NaN 

Muuttujien nimeämissäännöt ovat kuten Javassa.

undefined

Tietotyypit

Javascript muuntaa automaattisesti muuttujan tyyppiä tilanteen mukaan.

Jos muutat String-tyyppiä Number-tyypiksi niin tee se parseInt- tai parseFloat-funktiolla.

Huomioi seuraavaa:

Lohkot

Muuttujan näkyvyys rajoittuu funktion sisälle, jos muuttuja esitellään var-etuliitteellä. Ennen ECMAScript 2015:sta ja let-muuttujanesittelyä Javascriptissa EI ole ollut lohkon sisäisiä muuttujia

function foobar() {
  var p = 1; // tämä muuttuja on voimassa vain tässä funktiossa
  {
    var p = 2; // Tällä on sama näkyvyysalue kuin edellisellä
  }
  console.log(p); // tulostaa 2
  
}

Operaattorit

Käytössä on normaalit aritmeettiset ja vertailuoperaattorit. Vrt. Java

delete-operaattori poistaa objektin, ominaisuuden tai elementin taulukosta.

typeof-operaattori palauttaa merkkijonon, joka kertoo kohteena olleen objektin tyypin.

in-operaattori palauttaa true jos kysytty ominaisuus löytyy kohteena olevasta objektista.

instanceof-operaattorilla voi testata objektin tyypin

new-operaattorilla voi luoda uusia objekteja

Merkkijonot

Merkkijonot ovat olioita, joilla mm. seuraavia metodeja:

Merkkijonoja voi operoida seuraavilla operaattoreilla:

+
Liittää merkkijonot yhteen
< > <= >= ==
Vertailee aakkosjärjestystä
s[n]
Antaa merkkijonon s n:nnen kirjaimen

Merkkijonojen tyyppien muunnoksiin on olemassa muutama globaali funktio:


var luku = parseInt("567");
var luku = parseInt("567", 10); // toinen argumentti kertoo kantaluvun. Tässä kymmenjärjestelmä
var luku = parseInt("0567"); // ei toimi kuten voisi kuvitella. etunolla tarkoittaa, että luku saatetaan käsitellä oktaalijärjestelmässä.
var luku = parseInt("0567", 10); // tämä toimii
var luku = parseInt("101", 2); // binääriluku

Ehtolauseet

if...else:

if (ehto) {
   jos oli tosi...
}
else {
   jos oli epätosi...
}

switch

switch (expression) {
  case label_1:
    statements_1
//    break;
  case label_2:
    statements_2
//    break;
//    ...
  default:
    statements_def
}

Silmukat

for- ja while-silmukat toimivat kuten Javassa.

Labelilla voi nimetä tietyn loopin jolloin voi break- tai continue-komennolla viitata tähän looppiin.

ulompi:
    while(true) {
        console.log('ulompi silmukka');
        let x = 0;  
        while(true) {
          console.log('sisempi...');
          x = x + 1;
          if ( x > 10) {
            break ulompi;
         }
        }
   }

for..in ja for..of toimivat hieman eri tavoilla.

var taul = [3, 5, 7];
taul.foo = 'kukkuu';

for (var i in taul) {
   console.log(i); //  "0", "1", "2", "foo"
}

for (var i of taul) {
   console.log(i); //  3, 5, 7
}

for..in käy läpi taulukon alkioiden numerot ja myös itse määriteltyjen attribuuttien nimet. for..of käy läpi oikeat taulukon arvot

Poikkeukset

try {
   kokeillaan jotain ...
   // throw 'no ny sekos';
}
catch (e) {
  tuli poikkeus...
  console.log(e);
}

Error types

Promise

Käytetään asynkronisten funktioiden yhteydessä.

Using promises

Taulukot

Taulukko luodaan Array-oliolla

var paikat = new Array();
paikat[0] = "Jämsä";
paikat[1] = "Äänekoski";

tai hakasulkeilla:

var paikat = ["Jämsä", "Äänekoski"];

Taulukkoon lisääminen onnistuu seuraavasti:

paikat[paikat.length] = "Jyväskylä";
paikat.push("Jyväskylä");

Set

Set on taulukko johon voi tallentaa vain uniikkeja arvoja.

Map

Map on tietorakenne johon voidaan tallentaa avain-arvo-pareja. Vrt. Python dict

Funktiot

Funktion voi esitellä seuraavasti:

function summaa(x,y) {
  return (x + y);
}

summaa = function(x,y) {
  return (x + y);
}

function foobar(x,y) {
  // tämä funktio toimii vain funktion foobar-sisällä
  var p = 1;
  function barfoo(x) {
    // ulomman funktion muuttujat ovat käytettävissä
    return x*p;
  }

}

// parametreille voidaan antaa oletusarvot
function f(x=0,y=1) {
  return x+y;
}

Huomioitavaa:

Objektit

Assosiatiivisia "taulukoita" (nimi-arvo-pareja) voi tehdä seuraavasti (vrt. Map):

var lampo = new Object;
lampo["jkl"] = -6;
var saatilat = {
  jämsä: "Aurinkoinen",
  äänekoski: "Pilvipoutaa"
};

for (var i in saatilat) {
	console.log( i + " : " + saatilat[i] );
}

Assosiatiivinen "taulukko" on itseasiassa objekti, jolla on attribuutteja. Tämä voi aiheuttaa jossain tilanteissa hämmennystä. Vrt. Map

JavaScript (joka pohjautuu Ecmascript 3 -standardiin) on prototyyppi-pohjainen kieli ja siinä ei ole luokkia samassa mielessä kuin Java/C++/C#-kielissä vaan pelkästään olioita (objekteja). JavaScriptissä omia olioita voidaan luoda seuraavasti:

// konstruktori-funktio
function Koordinaatti(x,y) {
  this.x = x;
  this.y = y;
}

// Koordinaatin "public-metodi"
Koordinaatti.prototype.normi = function() {
  return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
}

var piste = new Koordinaatti(1,2);
piste.normi();

Voidaan käyttää myös modernimpaa class-syntaksia:

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}
class Square extends Polygon {
  constructor(length) {
    // super kutsuu Polygonin konstruktoria. Suoritettava ennen kuin voi käyttää this
    super(length, length);
    this.name = 'Square';
  }
}
var poly = new Polygon(10, 10);
var nelio = new Square(20);

Objekteja laajennetaan toisten objektien avulla käyttäen prototype-määritystä. Private-attribuutteja ja -metodeja on mahdollista luoda pienellä vaivalla.

Tarpeellisia funktioita

Date

Päivämäärä

var aika = new Date();
alert(aika.getDate() + "." + aika.getMonth() + "." + aika.getYear());

class

Kulunut aika

var aika = new Date();
var hetkiA_msec = aika.getTime();
// tehdään jotain
var hetkiB_msec = aika.getTime();
var kulunutaika = new Date(hetkiB_msec - hetkiA_msec);
alert(kulunutaika.getSeconds());

Math

Pyöristäminen

var liukuluku = 3.245200004;
var kaksidesimaalia = Math.round(liukuluku*100)/100

Satunnaisluvut

var sanoja = ["Diiba","Daaba","Tesmaus","Heppa","Muuli","Saippuakauppias","Jepjep"];
// pyöristys alaspäin( 0-0.999999999 * 7 )
var rand = Math.floor( Math.random() * sanoja.length );
console.log(sanoja[rand]);

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/luennot/javascript_basics/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-06 14:35:59
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta