HTML5-ohjelmointia 2

Tavoite

Tavoitteena on lisätä ymmärrystä WWW-käyttöliittymän ohjelmoinnista

  • Javascrpitiä kokeillen

Laadi laskin

Kopioi koodi ja tallenna se työpöydälle nimellä laskin.js:

function haeNumero(tunnus) {

return parseInt(document.getElementById(tunnus).value)

}


function asetaTulos(tulos) {

document.getElementById("tulos").innerHTML = tulos

}


function plus() {

asetaTulos(haeNumero("eka") + haeNumero("toka"))

}


function kerto() {

asetaTulos(haeNumero("eka") * haeNumero("toka"))

}

Kopioi koodi ja tallenna se työpöydälle nimellä laskin.js:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" >

<title>Laskin</title>

</head>

<body>

<header>

<h1>Plus- ja Kertolaskin</h1>

</header>


<section>

<p>

<input type="text" id="eka" value="0" />

<input type="text" id="toka" value="0" />

</p>


<p>

<input type="button" value="+" onclick="plus()" />

<input type="button" value="*" onclick="kerto()" />

</p>



<p>Laskimen antama vastaus: <span id="tulos"></span></p>

</section>


<script src="laskin.js"></script>

</body>

</html>

Avaa laskin.html selaimessa ja kokeile, toimiiko laskin.

Lähde: https://web-palvelinohjelmointi-19.mooc.fi/osa-7/1-selainohjelmistot-ja-javascript