pertanyaannya,, bagaimana sekarang membuat aplikasi kalkulator dengan memanfaatkan javascript biar tampilan lebih menarik seperti gambar dibawah????????
Tutorial kali ini masih menggunakan bahasa HTML (bahasa markup yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut). Sebelum qt membuat programnya da baiknya klo mengerti sedikit pada itu javascript,,biar tambah pinter…!
DHTML dan JavaScript
Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag script. Tidak seperti style sheet, script bisa terlihat di dalam head ataupun body
Elemen Dasar JavaScript
JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript.
Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek yaitu;
Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek—misalnya button atau teks—diklik.
Me-retrieve Nilai
Text Field
Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.
Select (Combo Box)
Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.
Untuk operasi cepat—tanpa perlu klik button—pada select, kita bisa menambahkan event onchange.
Check Box
Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.
untuk lebih jelasnya,, kode program pembuatan kalkulator dengan javascript dapat dilihat dibawah ini..
<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" xml:lang="en" lang="en">
<head>
<title>Kalkulator</title>
</head>
<body>
<script language="JavaScript">
var message="Klik kanan telah dinonaktifkan \n\n by administrator";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false");
</script>
<h2 align="center">Aplikasi Kalkulator</h2>
<hr>
<center>
<form name="Calc">
<table border=4 bordercolorlight="#FF9900" bordercolordark="#FF6633">
<tr>
<td>
<div align="center"> <font size="+1">
<input type="text" name="Input" size="22">
</font></div>
</td>
</tr>
<tr>
<td height="111">
<div align="center">
<input type="button" name="satu" value=" 1 " onClick="Calc.Input.value += '1'">
<input type="button" name="dua" value=" 2 " onClick="Calc.Input.value += '2'">
<input type="button" name="tiga" value=" 3 " onClick="Calc.Input.value += '3'">
<input type="button" name="plus" value=" + " onClick="Calc.Input.value += ' + '">
<br>
<input type="button" name="empat" value=" 4 " onClick="Calc.Input.value += '4'">
<input type="button" name="lima" value=" 5 " onClick="Calc.Input.value += '5'">
<input type="button" name="enam" value=" 6 " onClick="Calc.Input.value += '6'">
<input type="button" name="minus" value=" - " onClick="Calc.Input.value += ' - '">
<br>
<input type="button" name="tujuh" value=" 7 " onClick="Calc.Input.value += '7'">
<input type="button" name="delapan" value=" 8 " onClick="Calc.Input.value += '8'">
<input type="button" name="sembilan" value=" 9 " onClick="Calc.Input.value += '9'">
<input type="button" name="kali" value=" x " onClick="Calc.Input.value += ' * '">
<br>
<input type="button" name="clear" value=" Clear " onClick="Calc.Input.value = ''">
<input type="button" name="nol" value=" 0 " onClick="Calc.Input.value += '0'">
<input type="button" name="bagi" value=" / " onClick="Calc.Input.value += ' / '">
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" name="DoIt" value=" = " onClick="Calc.Input.value = eval(Calc.Input.value)">
</div>
</td>
</tr>
</table>
<p align="center"><font face="arial" size="-2">created by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://far7_qva@yahoo.com">far7_qva@yahoo.com</a></font></p>
<div align="right"><br>
</div>
<p> </p>
</form>
</center>
<p align="center">
</body>
</html>
dalam program kali ini penulis cuma mencoba memberikan contoh beberapa operasi aritmatika antara lain penjumlahan, pengurangan, perkalian dan pembagian.
Semoga bermanfaat bagi semua… (maklum klo disuruh bwt hardwarenya pasti kelabakan A.K.A gak iso,,hehehe…)
boleh minta flowchartnya g mas
BalasHapushemmm terlalu simple mas
BalasHapusmatur nuwun mas
BalasHapus