Kalkulator Sederhana dengan Javascript


Pada kuliah Pemrograman Web dengan materi Javascript yang baru saja selesai, selain menjelaskan materi yang ada di slide, saya juga men-demo-kan bagaimana penggunaan nyata dari Javascript dengan membuat program Kalkulator sederhana yang saya coding secara on the fly sembari menjelaskan bagian per bagian.

Berikut hasil kode program kalkulator yang saya buat. Untuk mencobanya, silakan copy kode tersebut ke notepad dan save sebagai HTML. Belum saya cek secara seksama apakah masih ada bug atau tidak. Maaf apabila masih ada bug atau solusinya kurang efisien. Yah namanya juga on the fly 😀

</pre>
<html>
 <head>
 <title>Calculator</title>
 </head>
 <style type="text/css">
 .calcbtn{
 width: 100px;
 height: 100px;
 }

</style>
 <script type="text/javascript">
 var currentToken = "";
 var resInt = 0;
 var resStr = "";
 var currentOp = "";
 var prevToken = "";

function btnAction(btn){
 var result = document.getElementById("result");
 var currentToken = btn.value;
 if(isOpt(currentToken) || currentToken == "="){
 if(!isOpt(prevToken)){
 if(currentToken == "+"){
 resInt += parseInt(result.value);
 if(currentOp != ""){
 result.value=resInt;
 resStr = resInt;
 currentOp = "";
 }
 resStr = "";
 currentOp = "+";
 }
 else if(currentToken == "="){
 if(currentOp == "+"){
 resInt += parseInt(result.value);
 result.value=resInt;
 resStr = resInt;
 currentOp = "";
 resInt = 0;
 }
 }
 }
 }
 else{
 if(currentToken != 'c'){
 if(result.value == "0") resStr = currentToken;
 else resStr += currentToken;
 result.value = resStr;
 }
 else{
 resInt = 0;
 currentToken = "";
 resStr = "";
 currentOp = "";
 result.value = '0';
 }
 }
 prevToken = currentToken;
 document.getElementById("restemp").innerHTML += currentToken;
 }

function isOpt(token){

if(token == "*" || token=="/" || token=="+" || token=="-"){
 return true;
 }
 else{
 return false;
 }
 }
 </script>
 <body>
 <p id="restemp"></p>
 <table border="0">
 <tr>
 <td colspan="4">
 <input type="text" size="70" value="0" name="result" id="result"/>
 </td>
 </tr>
 <tr>
 <td><input type="button" id="b7" value="7" onclick="btnAction(this)"></td>
 <td><input type="button" id="b8" value="8" onclick="btnAction(this)"></td>
 <td><input type="button" id="b9" value="9" onclick="btnAction(this)"></td>
 <td><input type="button" id="bdiv" value="/" onclick="btnAction(this)"></td>
 </tr>
 <tr>
 <td><input type="button" id="b4" value="4" onclick="btnAction(this)"></td>
 <td><input type="button" id="b5" value="5" onclick="btnAction(this)"></td>
 <td><input type="button" id="b6" value="6" onclick="btnAction(this)"></td>
 <td><input type="button" id="bmul" value="*" onclick="btnAction(this)"></td>
 </tr>
 <tr>
 <td><input type="button" id="b1" value="1" onclick="btnAction(this)"></td>
 <td><input type="button" id="b2" value="2" onclick="btnAction(this)"></td>
 <td><input type="button" id="b3" value="3" onclick="btnAction(this)"></td>
 <td><input type="button" id="bsubs" value="-" onclick="btnAction(this)"></td>
 </tr>
 <tr>
 <td><input type="button" id="b0" value="0" onclick="btnAction(this)"></td>
 <td><input type="button" id="bclear" value="c" onclick="btnAction(this)"></td>
 <td><input type="button" id="bequal" value="=" onclick="btnAction(this)"></td>
 <td><input type="button" id="badd" value="+" onclick="btnAction(this)"></td>
 </tr>
 </table>
 </body>
 </html>

Materi Javascript


Rasanya udah agak lama ga posting slide presentasi di sini. Di perkuliahan Pemrograman Berbasis Web besok, rencana saya akan memberikan materi Javascript. Materi untuk slide presentasi yang akan digunakan kebanyakan dikutip dari slide lain buatan rekan saya, pak Henry IF98. Wah, ga terasa materi kuliah Web nya udah sampai di Javascript aja. Berarti mahasiswa saya sejauh ini udah belajar 2 bahasa script, yaitu HTML dan CSS. Berarti bentar lagi “libur ngajar” buat dosen karena akan memasuki masa UTS 😀 Tetapi,  libur ngajar bukan berarti “libur kerja”, hehe..

Berikut slide presentasi kuliah Javascript yang akan diajarkan besok :

 

 

 

Modul Praktikum CSS


Barusan saya menyelesaikan modul untuk praktikum kuliah Pemrograman Berbasis Web. Kali ini materinya tentang CSS (Cascading Style Sheet). Bagi Anda yang biasa men-develop/desain aplikasi web tentunya tidak asing lagi dengan CSS. CSS menjadi pelengkap script HTML untuk membentuk tampilan visual yang cantik pada browser. Berikut salah satu soal latihan pada modul yang saya buat:

Continue reading

Real-Time Clock dengan Javascript


Ass…wr.wb.

Pengen buat real-time clock pada web? Ini bisa diprogram dengan mudah dengan Javascript. Pada bahasa pemrograman Javascript, terdapat predefined object yang dapat digunakan untuk merepresentasikan tanggal dan waktu, yaitu objek date. Untuk ‘menghidupkan’ sebuah instance date dengan nama tanggal, sintaks yang digunakan adalah sebagai berikut.

var tanggal = new Date();

Pada objek date, ada berbagai method yang dapat kita gunakan, yaitu sebagai berikut.

Method

Tipe Kembalian

Deskripsi

getDate()

Integer

Mengembalikan angka hari dalam suatu bulan

getDay()

Integer

Mengembalikan angka hari dalam 1 minggu (Minggu = 0)

getMonth()

Integer

Mengembalikan angka bulan dalam 1 tahun (Januari = 0)

getYear()

Integer

Jika tahun<2000, maka kembaliannya adalah 2 digit terakhir dari tahun, jika tahun>= 2000, maka kembaliannya adalah 3 digit terakhir dari tahun (xyz) dimana x = 1

getFullYear()

Integer

Mengembalikan angka tahun

getTime()

Integer

Mengembalikan selang waktu dalam milliseconds sejak 1 Januari 1970 s.d. sekarang

getHours

Integer

Mengembalikan jam dalam 1 hari

getMinutes()

Integer

Mengembalikan menit dalam 1 jam

getSeconds()

Integer

Mengembalikan detik dalam 1 menit

getMilliseconds()

Integer

Mengembalikan milidetik dalam 1 detik

toTimeString()

String

Mengembalikan waktu dalam string dengan format hh:mm:ss GMT – xx:yy (<nama_lokasi> Standard Time)

toLocaleTimeString()

String

Mengembalikan waktu dalam string dengan format hh:mm:ss AM/PM

toDateString()

String

Mengembalikan tanggal dalam string-string singkatan dengan format inggris ( contoh : Wed Jun 25 2008 )

toLocaleDateString()

String

Mengembalikan tanggal dalam string dengan format inggris (contoh : Wednesday, June 25, 2008 )

toLocaleString()

String

Mengembalikan tanggal + waktu dalam string dengan format inggris (contoh : Wednesday,June 25,2008 7:09:21 PM )

Darimanakah informasi tanggal dan waktu yang diambil oleh Javascript berasal?

Ya mudah aja, karena Javascript merupakan salah satu dari sekian jenis bahasa pemrograman web yang client-side scripting, maka informasi tanggal dan waktu tersebut berasal dari komputer client, bukan dari komputer server.

Untuk menampilkan waktu atau jam dengan format hh:mm:ss PM/AM di suatu objek HTML (pada contoh dibawah ini akan digunakan objek DIV) pada saat halamat HTML tersebut di-load ke browser,maka langkah-langkahnya adalah sebagai berkut.

1. Buat sebuah fungsi yang menjalankan instance dari objek tanggal. Mis. Fungsi tersebut kita namakan show_date()

<script type=”text/javascript”>
function show_date(){
    var tanggal= new Date(); 
    document.getElementById(“tempat_tanggal”).innerHTML= tanggal.toLocaleTimeString();
}
</script>

2. Tambahkan action onload = <nama_fungsi> pada tag pembuka body

</pre>
. . . <body onload="show_date()"> . . .
<pre>

3. Jangan lupa buat sebuah objek DIV dengan ID = <string_id> pada halaman tersebut.

<div id = “tempat_tanggal”></div>

Jika langkah-langkah tersebut dijalankan dengan bernar dan tidak ada gangguan teknis maupun non-teknis :> , maka jam dengan format dd:mm:yy AM/PM akan tampil pada objek div dengan id=”tempat_tanggal”.

Nah, agar jam dapat berjalan pada web browser seperti jam-jam sebagaimana mestinya (real-time clock), maka ide dasarnya adalah dengan me-refresh halaman secara menyeluruh ataupun secara parsial setiap detiknya dengan harapan agar informasi jam dari mesin client dapat diambil terus-menerus tiap detiknya. Untuk itu, kita dapat menggunakan method setTimeout(<nama_fungsi>,<milliseconds>).

Script pada block javascript yang dituliskan kira-kira dapat berbentuk seperti ini

<script type=”text/javascript”>
//menuju ke fungsi show_date() 1000 milidetik atau 1 detik kemudian
window.setTimeout(“show_date()”,1000);

function show_date(){

var tanggal = new Date();

document.getElementById(“tempat_tanggal”).innerHTML= tanggal.toLocaleTimeString();

//kembali ke awal fungsi show_date() 1000 milidetik atau 1 detik kemudian
setTimeout(“show_date”,1000);
}
</script>

Kira-kira begitulah ide dasar dari pembuatan real-time clock pada web. Representasi dari jam dapat dikembangkan menjadi animasi dengan mengganti-ganti gambar clock atau menggeser-geser jarum jam pada clock untuk setiap perubahan waktu yang terjadi, tidak harus menggunakan method toLocaleTimeString() atau method-method string lainnya.

Sekian…wassalam.

P.S. coba temen2 buat script untuk countdown timer. Misal: untuk dalam selang waktu n jam / menit / detik tiba-tiba halaman web nya nutup sendiri :> jangan lupa di-posting di komentar