Lama rasanya saya sudah tidak posting artikel lagi, yah wajarlah namanya juga manusia yang masih butuh makan. Jadi bekerja adalah kegiatan utama yang harus dilakukan oleh setiap manusia hanya untuk mendapatkan beberapa kumpulan uang.
Okey....
Kali ini saya hadir lagi membawa sesuatu, sesuatu yang mungkin sudah anda tau, tapi sesuatu ini bisa membuat anda penasaran untuk membacanya.
Langsung saja kali ini saya ingin berbagi aplikasi JavaScript yang paling sederhana, yaitu aplikasi Kalkulator.
Awassss!!! anda jangan ketawa. Heheheh....
Berikut Source Code lengkapnya, silakan anda pahami dan pelajari.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kalkulator JavaScript</title>
<style type="text/css">
.body {
margin: 0px;
padding: 0px;
background-color: #efefef;
}
.body1 {
margin: auto;
padding: 5px;
background-color: #f3f3f3;
border: 1px solid #000;
width: 250px;
}
</style>
<script>
function hitung(){
var angka1 = document.getElementById('angka1').value;
var angka2 = document.getElementById('angka2').value;
var oprt = document.getElementById('oprt').value;
// kondisi apabila operator telah dipilih
if(oprt=='+'){
hasil = eval(angka1)+eval(angka2);
}
else if(oprt=='-'){
hasil = eval(angka1)-eval(angka2);
}
else if(oprt=='/'){
hasil = eval(angka1)/eval(angka2);
}
else if(oprt=='*'){
hasil = eval(angka1)*eval(angka2);
}
document.getElementById('hasil').value = hasil;
}
</script>
</head>
<body class="body">
<div class="body1">
<h1>Kalkulator Sederhana</h1>
<table>
<tr>
<td>Input 1</td>
<td>:</td>
<td><input type="text" name="angka1" id="angka1" onchange="hitung()" /></td>
</tr>
<tr>
<td>Operator</td>
<td>:</td>
<td><select id="oprt" onchange="hitung()">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option>
</select></td>
</tr>
<tr>
<td>Input 2</td>
<td>:</td>
<td><input type="text" name="angka2" id="angka2" onchange="hitung()" /></td>
</tr>
<tr>
<td><button id="samadengan" onclick="hitung()">=</button></td>
</tr>
<tr>
<td>Hasil</td>
<td>:</td>
<td><input type="text" id="hasil" /></td>
</tr>
</table>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kalkulator JavaScript</title>
<style type="text/css">
.body {
margin: 0px;
padding: 0px;
background-color: #efefef;
}
.body1 {
margin: auto;
padding: 5px;
background-color: #f3f3f3;
border: 1px solid #000;
width: 250px;
}
</style>
<script>
function hitung(){
var angka1 = document.getElementById('angka1').value;
var angka2 = document.getElementById('angka2').value;
var oprt = document.getElementById('oprt').value;
// kondisi apabila operator telah dipilih
if(oprt=='+'){
hasil = eval(angka1)+eval(angka2);
}
else if(oprt=='-'){
hasil = eval(angka1)-eval(angka2);
}
else if(oprt=='/'){
hasil = eval(angka1)/eval(angka2);
}
else if(oprt=='*'){
hasil = eval(angka1)*eval(angka2);
}
document.getElementById('hasil').value = hasil;
}
</script>
</head>
<body class="body">
<div class="body1">
<h1>Kalkulator Sederhana</h1>
<table>
<tr>
<td>Input 1</td>
<td>:</td>
<td><input type="text" name="angka1" id="angka1" onchange="hitung()" /></td>
</tr>
<tr>
<td>Operator</td>
<td>:</td>
<td><select id="oprt" onchange="hitung()">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option>
</select></td>
</tr>
<tr>
<td>Input 2</td>
<td>:</td>
<td><input type="text" name="angka2" id="angka2" onchange="hitung()" /></td>
</tr>
<tr>
<td><button id="samadengan" onclick="hitung()">=</button></td>
</tr>
<tr>
<td>Hasil</td>
<td>:</td>
<td><input type="text" id="hasil" /></td>
</tr>
</table>
</div>
</body>
</html>
ScreenShot :
Gimana mudah bukan pemahamannya. Yah karenan saya sengaja membuatnya untuk memudahkan anda dalam memahami.
Jika memang ini belum mudah dan ingin bertanya silakan hubungi saya.
Thank's ^_^
membantu sekali ini min...
BalasHapuspower supply 15v 2a