Opasarkisto: JavaScript-perusopas: Osa 9 - Matemaattiset laskutoimitukset

Tässä oppaassa käydään läpi Math-olion metodeita, joiden avulla JavaScriptillä pystytään suorittamaan melko monimutkaisiakin laskutoimituksia. Peruslaskutoimitukset käytiin läpi jo oppaassa 2. Math-oliolla on lisäksi muutamia matematiikassa yleisesti käytettäviä vakioarvoja, joita voidaan käyttää laskutoimituksissa.

Oppaassa kerrotaan myös muutamasta hyödyllisestä funktiosta, joita tarvitaan erityisesti laskutoimituksissa ja muussa numerotiedon käsittelyssä. Oppaan lopussa ohjelmoidaan selaimessa toimiva laskin, jota jokainen voi laajentaa halunsa mukaan.

Math-olion vakiot

Math-olio sisältää muutaman vakion yleisistä matematiikassa käytettävistä arvoista.

Jos esimerkiksi halutaan laskea ympyrän kehän pituus, voidaan käyttää valmista piin arvoa:

<script type="text/javascript">

var sade = 20;

kehan_pituus = Math.PI * (sade * 2);

document.write("Jos ympyrän säde on " + sade + " cm, on sen kehän pituus " + kehan_pituus + " cm.");

</script>

Jos ajat yllä olevan skriptin selaimessa, huomaat että tuloksen perään tulostuu melkoinen liuta desimaaleja. Tämä ei yleensä ole toivottavaa, joten otetaanpa käyttöön Math-olion round-metodi.

round

Math-olion round-metodilla voidaan parametrina annettava luku pyöristää normaalien pyöristyssääntöjen mukaisesti. Seuraava skripti on sama kuin edellinen parannettuna tuloksen pyöristämisellä täysiin senttimetreihin.

<script type="text/javascript">

var sade = 20;

kehan_pituus = Math.PI * (sade * 2);

keha_pyoristetty = Math.round(kehan_pituus);

document.write("Jos ympyrän säde on " + sade + " cm, on sen kehän pituus " + keha_pyoristetty + " cm.");

</script>

floor ja ceil

Nämä metodit pyöristävät myös parametrina annettavan luvun, floor seuraavaan pienempään kokonaislukuun ja ceil seuraavaan suurempaan kokonaislukuun.

// Pyöristyy alaspäin (14):
document.write(Math.floor(14.8));

// Pyöristyy ylöspäin (5):
document.write(Math.ceil(4.2));

max ja min

Näistä metodeista max palauttaa parametreina annetuista luvuista suuremman, kun taas min palauttaa pienemmän luvun.

// Tulostaa arvon 34:
document.write(Math.max(12, 34));

// Tulostaa arvon 7:
document.write(Math.min(54, 7));

random

Palauttaa satunnaisluvun väliltä 0 - 1. Luku on desimaaliluku, esimerkiksi 0.7378634... Jotta tästä saisi käyttökelpoisemman luvun, voidaan se kertoa vaikkapa kolmellakymmennellä, jolloin saadaan desimaaliluku väliltä 0 - 30. Kun tulos vielä pyöristetään round-metodilla, saadaan desimaaliluku muunnettua kokonaisluvuksi.

// Tulostetaan satunnaisluku väliltä 0 - 1:
document.write(Math.random());

// Kertomalla satunnaisluku kolmellakymmenellä ja pyöristämällä se saadaan aikaiseksi luku väliltä 0 - 30:
document.write(Math.round(30 * Math.random()));

Tällä tavoin saadaan toteutettua satunnaisia toimintoja, esimerkiksi tietokilpailu, jossa skripti arpoo käyttäjälle kysymyksiä sekalaisessa järjestyksessä.

Muita Math-olion metodeita käytetään vastaavalla tavalla, joten seuraavassa taulukossa kerrotaan vain niiden nimet ja lyhyt kuvaus.

Seuraavaksi käydään läpi pari numerotiedon käsittelyssä hyödyllistä funktiota.

isNaN

isNaN-funktiolla voidaan tarkastaa, onko parametrina annettu arvo luku vai merkkijono. Jos parametri on luku, funktio palauttaa arvon epätosi, ja mikäli parametri on merkkijono, on paluuarvo tosi. Esimerkkiskriptissä kysytään käyttäjältä ikää. Jos hän syöttää kenttään vahingossa vaikkapa nimensä, annetaan virheilmoitus.

<script type="text/javascript">

function TarkistaIka()
{
var ika = document.lomake.ika.value;

	// Jos ika-muuttujassa on merkkijono, on ehto tosi ja if-lause suoritetaan:
	if(isNaN(ika))
		alert("Antamasi syöte on virheellinen. Syötä luku!");
}

</script>
...
<form name="lomake">

	<b>Ikä:</b>
	<input type="text" size="5" name="ika" />

	<input type="button" value="Tarkista" onclick="TarkistaIka()" />

</form>

Skripti varoittaa käyttäjää, mikäli hän syöttää ikä-kenttään jonkin muun kuin numeroarvon. Skriptiä voisi parannella huomattavasti esimerkiksi lisäämällä siihen tarkistuksen, joka estää käyttäjää antamasta lukua, joka on pienempi kuin nolla tai suurempi kuin 110.

eval

eval-funktio muuttaa parametrina saamansa merkkijonotyyppisen lausekkeen matemaattiseen, suoritettavaan muotoon. Seuraava esimerkki havainnollistaa eval-funktion toimintaa.

<script type="text/javascript">

// Sijoitetaan muuttujaan laskutoimitus merkkijonona:
var laskutoimitus = "2 + 4 - 7 / 16";

// Ilman eval()-funktiota tulostus on "2 + 4 - 7 / 16":
document.write(laskutoimitus);

/* eval-funktio muuntaa merkkijonotyyppisen
laskulausekkeen matemaattiseen muotoon ja suorittaa
laskutoimitukset. Selaimeen tulostuu "5.5625": */

document.write(eval(laskutoimitus));

</script>

eval-funktio pystyy muuttamaan mitä tahansa JavaScript-koodia suoritettavaan muotoon ja ajamaan sen. Lisää käytännön esimerkkejä funktion käytöstä on tulossa viimeisessä oppaassa.

parseInt ja parseFloat

Näistä funktioista parseInt pyrkii palauttamaan parametrina saamansa merkkijonon kokonaislukuna ja parseFloat reaalilukuna. Jos parametrin muuttaminen kokonais- tai reaaliluvuksi ei onnistu, palauttavat funktiot arvon NaN eli Not a Number.

var kokonaisluku = "128";
var reaaliluku = "14.82";
var luku = "kymmenen";

// parseInt palauttaa merkkijonon "128" kokonaislukuna:
document.write("Kokonaisluku on: " + parseInt(kokonaisluku));

// parseFloat palauttaa merkkijonon "14.82" reaalilukuna:
document.write("Reaaliluku on: " + parseFloat(reaaliluku));

// parseInt palauttaa arvon "NaN", koska se ei pysty palauttamaan luku-muuttujan arvoa "kymmenen" kokonaislukuna:
document.write(parseInt(luku));

Laskin JavaScriptillä

Oppaan viimeisenä aiheena ohjelmoidaan pieni, selaimessa toimiva laskin. Tässä projektissa yhdistyy tämän ja aiempien oppaiden asioita. Jokainen voi laajentaa laskinta hyödyntämällä Math-olion metodeja ja ominaisuuksia.

<html>

<head>

<title>Laskin</title>

<script type="text/javascript">

// Määritellään merkkijonomuuttuja ja alustetaan se tyhjällä merkkijonolla:
var laskutoimitus = "";

// Jokainen napin klikkaus kutsuu Nappi-funktiota:
function Nappi(valinta)
{
	// Jos on klikattu C-painiketta, tulostetaan näyttöön 0
	// ja tyhjennetään laskutoimitus-muuttujan sisältö:
	if(valinta == "c")
	{
		document.laskin.naytto.value = "0";
		laskutoimitus = "";
	}

	// Jos on klikattu =-painiketta, muunnetaan merkkijono matemaattiseen
	// muotoon, lasketaan lauseke ja tulostetaan se tekstikenttään:
	else if(valinta == "=")
		document.laskin.naytto.value = eval(laskutoimitus);

	// Jos on klikattu jotain muuta painiketta, lisätään parametrina saatu
	// merkki tai numero laskutoimitus-muuttujan perään:
	else
	{
		laskutoimitus = laskutoimitus + valinta;

		// Jos ensimmäinen merkki on jokin muu kuin numero, annetaan virheilmoitus.
		// Muuten tulostetaan laskutoimitus merkkijonomuodossa tekstikenttään:
		if(isNaN(laskutoimitus.charAt(0)))
			document.laskin.naytto.value = "Virhe!";
		else
			document.laskin.naytto.value = laskutoimitus;
	}
}

</script>

</head>

<body>

<h1>JavaScript-laskin</h1>

<!-- Laskin on muodostettu tavallisista lomake-elementeistä. Jokainen painike
kutsuu samaa funktiota, mutta vie sille eri parametrin. -->

	<form name="laskin">
		<input type="text" size="15" name="naytto">
	<br>
	<br>
		<input type="button" value=" 7 " onclick="Nappi(7)">
		<input type="button" value=" 8 " onclick="Nappi(8)">
		<input type="button" value=" 9 " onclick="Nappi(9)">
		<input type="button" value="  / " onclick="Nappi('/')">
	<br>
		<input type="button" value=" 4 " onclick="Nappi(4)">
		<input type="button" value=" 5 " onclick="Nappi(5)">
		<input type="button" value=" 6 " onclick="Nappi(6)">
		<input type="button" value="  * " onclick="Nappi('*')">
	<br>
		<input type="button" value=" 1 " onclick="Nappi(1)">
		<input type="button" value=" 2 " onclick="Nappi(2)">
		<input type="button" value=" 3 " onclick="Nappi(3)">
		<input type="button" value="  - " onclick="Nappi('-')">
	<br>
		<input type="button" value=" 0 " onclick="Nappi(0)">
		<input type="button" value=" = " onclick="Nappi('=')">
		<input type="button" value=" C " onclick="Nappi('c')">
		<input type="button" value=" + " onclick="Nappi('+')">
	</form>

</body>

</html>

Aloitetaan koodin tutkiminen lomake-elementistä. Laskin muodostuu useasta tavallisesta painikkeesta, jotka edustavat laskimen numero- ja toimintonäppäimiä. Jokainen painike kutsuu onclick-tapahtumankäsittelijän kautta samaa Nappi-funktiota, mutta vie sille eri parametrin. Esimerkiksi painike 4 vie funktiolle parametrina luvun 4.

Funktiossa Nappi tutkitaan ensin, onko parametri kirjain "c". Jos on, suoritetaan aaltosuluissa olevat lauseet eli tulostetaan tekstikenttään (laskimen "näyttöön") nolla ja sijoitetaan laskutoimitus-muuttujaan tyhjä merkkijono "". Tämä asettaa laskimen alkutilaan.

Mikäli parametri ei ole "c", siirrytään tutkimaan, onko se "=". Jos on, muutetaan laskutoimitus-muuttujassa oleva merkkijonotyyppinen laskulauseke matemaattiseen muotoon ja suoritetaan laskutoimitukset. Kaikki tämä tapahtuu eval-funktion avulla. Lopuksi saatu tulos tulostetaan tekstikenttään.

Jos parametri on jokin muu kuin edellä mainitut, esimerkiksi jokin numero, lisätään se laskutoimitus-muuttujan sisällön jatkeeksi +-operaattorilla. Kuten muistat, "3" + "4" on 34, ei 7. Lopulta tämä merkkijono sijoitetaan takaisin samaan muuttujaan.

Lauseella isNaN(laskutoimitus.charAt(0)) poimitaan laskutoimitus-muuttujan ensimmäinen merkki ja tutkitaan, onko se numero. Jos ei ole, tulostetaan virheilmoitus, koska laskimeen ei voi syöttää ensimmäisenä merkkinä esimerkiksi *-merkkiä. Muutoin tulostetaan laskutoimitus tekstikenttään merkkijonomuodossa.

Huomaa, että skriptin alussa määritellään muuttuja laskutoimitus ja alustetaan se (annetaan alkuarvo) tyhjällä merkkijonolla "". Tämä on tarpeen, jotta JavaScript osaa tyypittää muuttujan merkkijonomuuttujaksi. Muutenkin on suotavaa alustaa muuttuja aina ennen sen käyttöä, koska alustamattoman muuttujan arvo on määrittelemätön (undefined), ja se saattaa aiheuttaa virheitä skriptin suorituksessa, mikäli asiaa ei oteta huomioon koodissa.

Yhteenveto

Nyt sinulla pitäisi olla tarvittavat tiedot tehdä JavaScriptillä monimutkaisempiakin laskutoimituksia ja käsitellä numerotietoa. Varsinkin eval-funktiolle löytää käyttöä moniin tilanteisiin. Seuraava opas johdattaa olio-ohjelmointiin ja omien olioiden luomiseen.