Kamis, 31 Mei 2018

PERTEMUAN 10 Membuat Kalkulator Sederhana menggunakan HTML

PERTEMUAN 10 Membuat Kalkulator Sederhana menggunakan HTML

Dalam membuatnya kita perlu script yang berisi function serta beberapa varable didalamnya, Langsung aja contek kodingannya guysss.....





*simpan dalam bentuk hml yaa




<!DOCTYPE html>
<html>
<head>
<script>
// membuat fungsi dasar
function dasar() {
alert("Hello World");
}
//membuat fungsi dengan variabel
var variabel = function() {
alert("Hello world");
}
// membuat fungsi dengan tanda panah
var tandapanah = () => alert("Hello World");
// membuat fungsi dengan konstruktor
var kostruktor = new Function('alert("hello world")')

//kalkulator
function hitung() {
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil = myForm.opt.value;


if (pil == "tambah") {
var z= x + y;

} else if (pil == "kurang"){
var z = x - y;
} else if (pil == "kali") {
var z = x * y;
} else if (pil == "bagi") {
var z = x / y;
}
document.getElementById("hasil").innerHTML = z;
}
//bersihkan form
function bersihkan() {
document.form1.reset();
document.getElementById("hasil").innerHTML = "Hasil";
}
//hanya angka
function angkasaja(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;
return true;
}


</script>
</head>


<body>
<script>

document.write ("hello sedang Belajar ");
document.write ("Pertemuan 10 Design Web");
</script>
<br><br>
<input type="button" value="JSdasar" onclick="dasar()"/>
<br><br>
<input type="button" value="JSvariabel" onclick="variabel()"/>
<br><br>
<input type="button" value="JStandapanah" onclick="tandapanah()"/>
<br><br>
<input type="button" value="JSkostruktor" onclick="kostruktor()"/>
<br><hr>
<h1> KALKULATOR </h1>
<form name="form1" action="#">
<p>Bil 1 <input type="text" name="x" onkeypress="return angkasaja(event)" maxlength="3"> </p>
<p>Bil 2 <input type="text" name="y" onkeypress="return angkasaja(event)"> </p>
<h1 id="hasil"> HASIL <h1>
<p> Operator
<select name="opt"></p>
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
<input type="button" value="=" onclick="hitung()">
<input type="button" value="bersihkan" onClick="bersihkan()">
</form>

</body>
</html>

0 komentar:

Posting Komentar