|
Assalaamu'alaikum Wr. Wb.
Teman-teman, tentunya kalian sudah pada tahu apa itu HTML. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web. Nah kali ini saya akan sedikit membahas tentang JavaScript dan apa hubungannya dengan HTML.
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>.
Berikut ini adalah contoh source code untuk aplikasi kalkulator:
<!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 ONLINE</title>
<script language="javascript" type="text/javascript">
<!--
var flag = false;
function nilai(angka) {
if (flag) calc.b.value += angka;
else calc.a.value += angka;
}
function add() {
calc.operator.value = '+'
flag = true;
calc.b.focus()
}
function less() {
calc.operator.value = '-'
flag = true;
calc.b.focus()
}
function multiply() {
calc.operator.value = '*'
flag = true;
calc.b.focus()
}
function divide() {
calc.opetaor.value = '/'
flag = true;
calc.b.focus()
}
//-->
</script>
</head>
<body>
<table border="1" align="center" cellspacing=2 cellpadding=10 bgcolor="#4b0008">
<tr>
<th bgcolor="#800000" width="350">
<font size="4" color="#ffff00">Aplikasi Kalkulator Sederhana</font>
</th>
</tr>
<tr>
<td align="center" bgcolor="#e9967a">
<form name=Calculator action="#">
<input type="text" name="operan1" size="3" />
<select name="operator" onchange="setSelected(this);">
<option>-Operator-</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select>
<input type="text" name="operan2" size="3" />
<input type="button" name="equal" value="=" onclick="Calculator.result.value=eval(Calculator.operan1.value + Calculator.operator.value + Calculator.operan2.value)" />
<input type="text" name="result" size="12" disabled="true" />
</form>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e9967a">
<font size="2"><b>CopyRight © 2010 by Mahsun Huda<br/>Mahasiswa PTI - UM</b></font>
</td>
</tr>
</table>
</body>
</html>
Jika nanti programnya dijalankan, maka hasilnya seperti gambar berikut:
SELAMAT MENCOBA...!!
<!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 ONLINE</title>
<script language="javascript" type="text/javascript">
<!--
var flag = false;
function nilai(angka) {
if (flag) calc.b.value += angka;
else calc.a.value += angka;
}
function add() {
calc.operator.value = '+'
flag = true;
calc.b.focus()
}
function less() {
calc.operator.value = '-'
flag = true;
calc.b.focus()
}
function multiply() {
calc.operator.value = '*'
flag = true;
calc.b.focus()
}
function divide() {
calc.opetaor.value = '/'
flag = true;
calc.b.focus()
}
//-->
</script>
</head>
<body>
<table border="1" align="center" cellspacing=2 cellpadding=10 bgcolor="#4b0008">
<tr>
<th bgcolor="#800000" width="350">
<font size="4" color="#ffff00">Aplikasi Kalkulator Sederhana</font>
</th>
</tr>
<tr>
<td align="center" bgcolor="#e9967a">
<form name=Calculator action="#">
<input type="text" name="operan1" size="3" />
<select name="operator" onchange="setSelected(this);">
<option>-Operator-</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select>
<input type="text" name="operan2" size="3" />
<input type="button" name="equal" value="=" onclick="Calculator.result.value=eval(Calculator.operan1.value + Calculator.operator.value + Calculator.operan2.value)" />
<input type="text" name="result" size="12" disabled="true" />
</form>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e9967a">
<font size="2"><b>CopyRight © 2010 by Mahsun Huda<br/>Mahasiswa PTI - UM</b></font>
</td>
</tr>
</table>
</body>
</html>
Jika nanti programnya dijalankan, maka hasilnya seperti gambar berikut:
SELAMAT MENCOBA...!!
