Kirjautuminen

Haku

Tehtävät

Kilpailu

Ohjelmoi tekoäly!
Aikaa on 6.1. saakka.

Opasarkisto: JavaScript-perusopas: Osa 9 - Matemaattiset laskutoimitukset

  1. Osa 1 - Perusteet
  2. Osa 2 - Muuttujat ja taulukot
  3. Osa 3 - Tapahtumankäsittelijät ja informaatioikkunat
  4. Osa 4 - Komentorakenteet
  5. Osa 5 - Funktiot
  6. Osa 6 - Lomakkeiden käsittely
  7. Osa 7 - Merkkijonojen käsittely
  8. Osa 8 - Ominaisuudet
  9. Osa 9 - Matemaattiset laskutoimitukset
  10. Osa 10 - Olio-ohjelmointi
  11. Osa 11 - Käytännön sovelluksia

Kirjoittaja: MikaBug. Vuosi: 2007.

Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi.

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.

VAKIOKUVAUS
Math.ENeperin luku e eli noin 2,72
Math.LN10luvun 10 luonnollinen logaritmi
Math.LN2luvun 2 luonnollinen logaritmi
Math.PIpiin arvo, noin 3,14
Math.SQRT1_2neliöjuuri luvusta 1/2
Math.SQRT2neliöjuuri luvusta 2

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.

METODIKUVAUS
Math.abs(param)palauttaa parametrina annetun luvun itseisarvon
Math.acos(param)palauttaa parametrina annetun luvun arkuskosinin
Math.asin(param)palauttaa parametrina annetun luvun arkussinin
Math.atan(param)palauttaa parametrina annetun luvun arkustangentin
Math.cos(param)palauttaa parametrina annetun luvun kosinin
Math.exp(param)palauttaa e potenssiin parametrina annettu luku
Math.log(param)palauttaa parametrina annetun luvun luonnollisen logaritmin
Math.pow(param_1, param_2)palauttaa luvun param_1 korotettuna potenssiin param_2
Math.sin(param)palauttaa parametrina annetun luvun sinin
Math.sqrt(param)palauttaa parametrina annetun luvun neliöjuuren
Math.tan(param)palauttaa parametrina annetun luvun tangentin

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.


Kommentit

Resiina [21.10.2007 15:53:01]

Lainaa #

Kannattaisi varmaankin tuossa laskimessa naytto-tekstikenttään lisätä määrite readonly="readonly", jotta siihen ei saisi itse näppäimistöllä kirjoitettua. Jos siihen näppäimistöllä kirjoittaa laskutoimituksen ja painaa =-nappia, tulee ruutuun teksti "undefined."

Kirjoita kommentti

Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.

Muista lukea kirjoitusohjeet.
Tietoa sivustosta