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