Kalkulator dengan JavaScript

Minggu, Maret 06, 2011 | 0 Comments

Seletah kita menguasai HTML5 dan CSS, sekarang saatnya kita belajar bahasa yang lain yaitu JavaScript. Jika ekstensi dari HTML5 adalah .html dan CSS adalah .css, pada JavaScript adalah .js. Seperti CSS, file .js ini dapat kita pisahkan pada file lain, tidak menjadi satu dengan kode html.

Sekarang cobalah untuk membuat kalkulator seperti di bawah ini menggunakan ketiga bahasa di atas yaitu HTML5, CSS dan JavaScript. Contoh tampilannya sebagai berikut :

Kalkulator sebelum diisi



Kalkulator operasi penjumlahan

Kalkulator operasi pengurangan

Kalkulator operasi perkalian


Kalkulator operasi pembagian

Kalkulator setelah dibersihkan


Kode javascript dari kalkulator di atas dapat dilihat dibawah ini:

function tambah() {
var myForm = document.kalkulator;
myForm.hasil.value = parseInt(myForm.nilai1.value) + parseInt(myForm.nilai2.value);
}

function kurang() {
var myForm = document.kalkulator;
myForm.hasil.value = parseInt(myForm.nilai1.value) - parseInt(myForm.nilai2.value);
}

function kali() {
var myForm = document.kalkulator;
myForm.hasil.value = parseInt(myForm.nilai1.value) * parseInt(myForm.nilai2.value);
}

function bagi() {
var myForm = document.kalkulator;
myForm.hasil.value = parseInt(myForm.nilai1.value) / parseInt(myForm.nilai2.value);
}
function bersihkan() {
var element = document.kalkulator;
element.nilai1.value = "";
element.nilai2.value = "";
element.hasil.value = "";
}

Kode css dari kalkulator di atas dapat dilihat dibawah ini:

body {
margin: 50px auto;
width: 400px;
height: 400px;
background-image: url(bg.jpg);
}

header,section,footer {
display: block;
}

header {
height: 70px;
background-color: #6d6c6c;
text-align: center;
}

judul {
font-family: crackman;
font-size: 16px;
color: black;
font-weight: bold;
color: white;
}

section {
height: 280px;
background-color: #d6d3d3;
text-align: center;
padding: 20px;
}

footer {
clear: both;
height: 20px;
background-color: #6d6c6c;
text-align: center;
color: white;
}

Kode html dari kalkulator di atas dapat dilihat dibawah ini:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Kalkulator JavaScript</title>
<link rel="stylesheet" href="kalkulator.css" type="text/css" />
<link rel="shortcut icon" href="TheGimp.png" />
<script type="text/javascript" src="kalkulator.js"></script>
</head>

<body>

<header>
<judul>Kalkulator Sederhana dengan JavaScript</judul>
</header>

<section>
<form name="kalkulator" action="#">
Masukkan Angka Pertama <br />
<input type="text" name="nilai1" style="text-align:center"><br /><br />
Masukkan Angka Kedua <br />
<input type="text" name="nilai2" style="text-align:center"><br />
<br />
Operasi<br />
<input type="button" value="+" onclick="tambah()" />
<input type="button" value="-" onclick="kurang()" />
<input type="button" value="*" onclick="kali()" />
<input type="button" value="/" onclick="bagi()" /><br /><br />
Hasil <br />
<input type="text" name="hasil" style="text-align:center" readonly><br /><br />
<input type="button" value="Bersihkan" onclick="bersihkan()" />
</form>
</section>

<footer>&copy; Alivi Nur Rosida</footer>
</body>
</html>

Selamat Mencobaaaaa..
semoga bermanfaat !!! Baca Selengkapnya...

Tidak ada komentar:

Posting Komentar

About

- alivi -