Ohjelmoinnin perusrakenteet javascriptillä

Sorakuilu

Sisältö

  1. Alkuun
  2. Työvälineet ja ympäristö, Javascriptin kirjoittaminen
  3. Muuttujat ja tietotyypit
  4. Operaattorit
  5. Ehtolauseet, boolean
  6. Funktiot (lohkot)
  7. Taulukot ja toistorakenteet
  8. Muut toistorakenteet

Funktiot

Funktiot ovat aliohjelmia, jotka suorittavat jonkin tietyn tehtävän. Funktioita käytetään sellaisessa tilanteessa, jossa pitäisi kirjoittaa sama koodi monta kertaa. Funktiot palauttavat yleensä jonkin arvon. Funktioille voidaan antaa syötteitä (parametrejä), joita se käyttää sisällään.

function

Käsky määrittelee JavaScript-funktion nimen, sille voidaan antaa parametrit param.

Parametrien tyyppinä voi olla merkkijono, numero tai objekti.

Syntaksi:
function nimi([param] [,param] [..., param])
{
lause
[lause ...]
}

Jos funktion halutaan palauttavan jonkin arvon, on funktiossa oltava käsky return joka määrittelee palautettavan arvon.

Funktiomäärittelyä ei voi sijoittaa käskylohkoon tai toisen funktiomäärittelyn sisälle.

Kaikki perustyyppiset parametrit välitetään funktiolle arvoina (by value). Objektit välitetään referensseinä. Toisin sanoen funktion parametrit ovat vain paikallisia muuttujia, joiden arvona on "kopio" todellisten argumenttien arvoista. Funktion sisällä tapahtuneet parametrimuuttujien muutokset eivät siis välity funktion ulkopuolelle. Kuitenkin jos objekteja itseään muutetaan, ne muutokset näkyvät.

Esimerkkejä

function testNum(a)
{
if (a > 0) {
return "positive";
} else {
return "NOT positive";
}
}

var numero = -5;
console.log(testNum(numero));
// expected output: "NOT positive"

Määritellään funktio add, jokaottaa parametreina kaksi numeroa ja palauttaa niiden summan.

function add(a, b)
{
return a+b;
}

return - Käsky määrittelee funktion palauttaman arvon.

Syntaksi:
return lauseke

Esimerkki

Luodaan funktio square(), joka palauttaa argumenttinsa neliön.
function square(x)
{
return x * x
}
var sivu = 2;
console.log(square(sivu));
// expected output: 4

Funktio voi ottaa myös vaihtelevan määrän parametreja. Tällöin funktion parametreihin viitataan lausella funktionimi.argumentit[i], jossa funktionimi on kyseisen funktion nimi ja i on viitattavan parametrin numero alkaen nollasta. Funktiolle annettujen parametrien määrä löytyy muuttujasta funktionimi.arguments.length.

Funktion kutsuja saadaan selville muuttujasta funktionimi.caller. Kyseisen muuttujan arvona on kutsuneen funktion objektireferenssi.

Muuttujat funktioissa

Funktion sisällä voi esitellä paikallisia funktioita, jotka näkyvät vain funktion sisälle:

function naytaViesti()
{
let viesti = "Hei, olen Javascriptiä!"; // paikallinen muuttuja
console.log( viesti );
}

naytaViesti(); // Hei, olen Javascriptiä!
console.log( viesti ); // <-- Virhe! Muuttuja on funktion sisällä, siis paikallinen

var

Funktion sisällä var-määritellyt muuttujat ovat funktion paikallisia muuttujia. Ne näkyvät vain funktion sisälle ja mahdollisesti näkyvät funktion sisältämien paikallisten funktioiden sisälle.

let

let-määritetyt muuttujat ovat aina lohkon sisäisiä muuttujia eivätkä näy muualla!

Esimerkki

function kokeile()
{
var a = 14;
if (true) {
let a = 24;
console.log(a);
for (let a=1; a<3; a++)
console.log(a);
console.log(a);
}
console.log(a);
}

console.log(kokeile());
//Tulostus: 24, 1, 2, 24, 14

Funktio voi käyttää ulkoisia muuttujia:

let userName = 'Juha';

function naytaViesti()
{
let viesti = 'Hei, ' + userName;
console.log( viesti );
}

naytaViesti()// Hei, Juha

return true tai false

Hyvin usein funktion toimintana on tarkistaa, onko jokin asia olemassa vai ei. Näissä tilanteisssa se palauttaa true tai false. Huomaa, että ECMA määrittää myös olion Boolean, joka toimii hiukan eri tavalla.

Kun teet funktion, vältä if - else -lauseita, käytä niiden sijaan vertailuoperaattoreita, alla kertauksena:

Vertailuoperaattorit

b >= 2b >= 2b >= 2
OperaattoriKuvausEsimerkki
==yhtäläisyysa == 5
!= eri suuri kuina != 0
<pienempi kuina < 10
<= pienempi tai yhtä suuri kuinb <= 7
>suurempi kuinb > 5
>= suurempi tai yhtä suuri kuin
>= suurempi tai yhtä suuri kuin
>= suurempi tai yhtä suuri kuin
!! antaa muuttujan totuusarvon
===tarkistaa ovatko sen eri puolella olevat samanarvoisía ja samaa tyyppiä. Käytä tätä, jos yrität tutkia onko jokin null tai undefined
!==tarkistaa ovatko sen eri puolella olevat eriarvoisia tai eri tyyppiä

Jos ehtoja on useampia - loogiset operaattorit

OperaattoriSyntaksiKuvaus
Looginen AND (&&) ehto1 && ehto2 Palauttaa true, jos molemmat toteutuvat, muuten palauttaa false (esim. on opettaja ja nimi on Leena)
Looginen OR (||) ehto1 || ehto2 Palauttaa true, jos toinen ehdoista toteutuu. Jos kumpikaan ei toteudu, palauttaa false (esim. on opettaja tai nimi on Leena)
Looginen NOT (!) !ehto Palauttaa true, jos ehto ei toteudu

0, tyhjä merkkijono, NaN, null ja undefined ovat loogisissa operaatioissa totuusarvoltaan false, kaikki muut true

=== ja !== operaattorit eivät muunna vertailtavana olevia objekteja mitenkään.
Tavallinen == yrittää muuntaa objektit samantyyppisiksi.

1 === "1" // epätosi
1 == "1" // tosi

Esimerkkejä:

function onSama(luku1,luku2)
{
return luku1 === luku2;
}

var a=3;
var b="3";
console.log(onSama(a,b));

//Tulostus: false

function onPositiivinen(luku)
{
return luku > 0;
}

var a = 3;
console.log(onPositiivinen(a));

//Tulostus: true

var a = 3;
var b = -2;

console.log(a > 0 && b > 0);
// expected output: false

console.log(a > 0 || b > 0);
// expected output: true

console.log(!(a > 0 || b > 0));
// expected output: false

Funktioiden nimet

Käytä myös funktioissa mielekkäitä nimiä. Alla olevat esimerkit ovat englanniksi, mihin jokaisen kannattaa siirtyä heti, kun ajatus tuntuu selvältä. Tavallisesti funktion nimi alkaa seuraavasti, kun funktio:

Alla esimerkkejä nimistä:

showMessage(..) // shows a message
getAge(..) // returns the age (gets it somehow)
calcSum(..) // calculates a sum and returns the result
createForm(..) // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false


Demot 4, funktiot

Harjoitukset 4, funktiot