Dhaploen a.k.a GO-Blog

Sebuah Celoteh Anak Bangsa..

Arsip untuk ‘web scripting’ Kategori

Membuat kalkulator sederhana dengan Javascript

Posted by dhaploen pada November 22, 2008

Ya masih berkutat dengan javascript, kemarin saya bareng mas Aan nyoba-nyoba bikin kalkulator sederhana dengan javascript.. wah.. sampai jungkir balik, tapi akhirnya jadi juga, walau juga ga mudeng c sebenernya he..he.., sebenernya pengin tak pasang sekalian tapi kok ga bisa y? jadi ya tak tampilin source code-nya saja.. untuk tampilan dan hasil bisa dicoba sendiri di rumah..

Berikut ini kodenya, tinggal copy paste aja kok.. trus dipelajari yah..
<!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=iso-8859-1″ />
<title>KALKULATOR JAVASCRIPT</title>
<SCRIPT LANGUAGE=”JavaScript”>
<!– Begin
function angka(angka){
if (document.myform.tanda.value == 0){
var sebelum = document.myform.display.value
var kalisepuluh = sebelum * 10
document.myform.display.value = kalisepuluh + angka
}else{
document.myform.display.value = angka
document.myform.tanda.value = 0
}
}
function hapus(){
document.myform.display.value = 0
document.myform.simpan.value = 0
document.myform.tanda.value = 0
document.myform.operasi.value = ”
}

function Operation(operator){

if (document.myform.operasi.value != ”){
if (document.myform.operasi.value == ‘+’){
document.myform.display.value = document.myform.display.value *1 + document.myform.simpan.value*1
document.myform.simpan.value = document.myform.display.value
}else if (document.myform.operasi.value == ‘-’){
document.myform.display.value = document.myform.simpan.value*1 – document.myform.display.value *1
document.myform.simpan.value = document.myform.display.value
}else if (document.myform.operasi.value == ‘*’){
document.myform.display.value = document.myform.display.value *1 * document.myform.simpan.value*1
document.myform.simpan.value = document.myform.display.value
}else if (document.myform.operasi.value == ‘/’){
document.myform.display.value = document.myform.simpan.value*1 / document.myform.display.value *1
document.myform.simpan.value = document.myform.display.value
}
}
document.myform.simpan.value = document.myform.display.value
document.myform.operasi.value = operator
document.myform.tanda.value = 1
// End –>
}
</script>
</head>

<body>
<div align=”center”><font color=”#0000c0″ size=”1″>
<FORM name=”myform” action=”">
<!– Original: http://www.dhaploen.wordpress.com –>
<TABLE>
<B>
<TABLE border=2 width=60 height=60 cellpadding=1 cellspacing=5>
<TR>
<TD colspan=4 align=middle>
<input name=”display” type=”Text” size=22 value=”0″ width=100%>
</TD>
</TR>

<TR>
<TD>
<input name=”btn7″ type=”Button” value=” 7 ” onclick=”angka(7)”>
</TD>
<TD>
<input name=”btn8″ type=”Button” value=” 8 ” onclick=”angka(8)”>
</TD>
<TD>
<input name=”btn9″ type=”Button” value=” 9 ” onclick=”angka(9)”>
</TD>
<TD>
<input name=”btnTambah” type=”Button” value=” + ” onclick=”Operation(‘+’)”>
<input name=”tanda” type=”hidden” id=”tanda” value=”0″ />
</TD>
</TR>

<TR>
<TD>
<input name=”btn4″ type=”Button” value=” 4 ” onclick=”angka(4)”>
</TD>
<TD>
<input name=”btn5″ type=”Button” value=” 5 ” onclick=”angka(5)”>
</TD>
<TD>
<input name=”btn6″ type=”Button” value=” 6 ” onclick=”angka(6)”>
</TD>
<TD>
<input name=”btnKurang” type=”Button” value=” – ” onclick=”Operation(‘-’)”>
<input name=”operasi” type=”hidden” id=”operasi” />
</TD>
</TR>

<TR>
<TD>
<input name=”btn1″ type=”Button” value=” 1 ” onclick=”angka(1)”>
</TD>
<TD>
<input name=”btn2″ type=”Button” value=” 2 ” onclick=”angka(2)”>
</TD>
<TD>
<input name=”btn3″ type=”Button” value=” 3 ” onclick=”angka(3)”>
</TD>
<TD>
<input name=”btnBagi” type=”Button” value=” * ” onclick=”Operation(‘*’)”>
<input name=”simpan” type=”hidden” id=”simpan” value=”0″ />
</TD>
</TR>

<TR>
<TD>
<input name=”btn0″ type=”Button” value=” 0 ” onclick=”angka(0)”>
</TD>
<TD>
<input name=”btnsamadengan” type=”Button” value=” = ” onclick=”Operation(‘=’)”>
</TD>
<TD>
<input name=”btnClear” type=”Button” value=” C ” onclick=”hapus()”>
</TD>
<TD>
<input name=”btnBagi” type=”Button” value=” / ” onclick=”Operation(‘/’)”>
</TD>
</TR>

</TABLE>
</B>
</form>

</div>
</body>
</html>

Ditulis dalam web scripting | 10 Komentar »

Membuat macam-macam Message Box menggunakan Java Script

Posted by dhaploen pada November 18, 2008

Beberapa hari ini aku sering iseng baca-baca tutorial Java Script, maklum.. sebenernya aku sama sekali belum tahu tentang konsep dari javascript itu sendiri. Kemarin aku tertarik untuk mencari tahu tentang message box yang sering muncul jika kita mengakses halaman web yang butuh suatu autentifikasi atau konfirmasi dari user, gimana sih buatnya?. Nah..dari tutorial yang kubaca ada 3 macam message box yang dapat kita buat dengan javascript yaitu dengan menggunakan tag alert, confirm, dan prompt. Apa perbedaan dari ketiga tag tersebut? mari kita kenali satu-satu.

Yang pertama adalah alert. Silahkan perhatikan script di bawah ini:

<html>
<head>
<title>coba javascript1</title>
</head>
<body>

<script language=”javascript”>
alert(“hello !”)
</script>

</body>
</html>

Tag alert hanya akan menampilkan message box dengan tombol “OK” saja.

alert

Berikutnya adalah tag confirm. Silahkan perhatikan script berikut:

……
<script language=”javascript”>
var klik = confirm(“Anda yakin ingin masuk halaman ini?”)
if (klik==true){
document.write(“Anda menekan tombol OK”)
}
else {
document.write(“Anda Menekan tombol Cancel”)
}
</script>
……

Tag confirm akan menampilkan Message Box dengan tombol “OK” dan “Cancel” yang bernilai true dan false.

confirm

Yang ketiga adalah tag prompt, perhatikan script di bawah ini:
……
<script language=”javascript”>
document.write(“<h1>Perhitungan Ukuran tubuh ideal</h1><br>”)
var nilai = prompt(“Masukkan Tinggi badan Anda”,0)
var nilai2 = prompt(“Masukkan Berat badan Anda”,0)
if (nilai – nilai2 > 110){
document.write(“<br>Ukuran tubuh Anda cukup ideal”)
}
else {
document.write(“<br>Ukuran tubuh Anda belum ideal”)
}
</script>
……

Dengan tag prompt akan dihasilkan message box yang selain terdapat tombol “OK” dan “Cancel” juga terdapat sebuah input box dimana kita bisa memasukkan sebuah nilai dan nilai tersebut dapat kita olah seseuai kebutuhan.

prompt

Itulah macam-macam Message Box yang dapat kita buat dengan javascript, asik kan? he..he..

Ditulis dalam web scripting | 3 Komentar »

 
Ikuti

Get every new post delivered to your Inbox.