Semoga bermanfaat bagi temen2…!
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;
<form>
<input type="text" name="myName" id="myID" />
</form>
- 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.
berikut ini adalah kode program untuk membuat kalkulator sederhana:
<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 Sederhana</title>
<script language="javascript" type="text/javascript">
<!--
var flag = false;
function isi(num) {
if (flag) calc.x.value += num;
else calc.y.value += num;
}
function tambah()
{
calc.operator.value = ' + '
flag = true;
calc.y.focus()
}
function kurang()
{
calc.operator.value = ' - '
flag = true;
calc.y.focus()
}
function kali()
{
calc.operator.value = ' * '
flag = true;
calc.y.focus()
}
function bagi()
{
calc.operator.value = ' / '
flag = true;
calc.y.focus()
}
//-->
</script>
</style>
</head>
<form name="calc">
<tr>
<td>
<input type="text" name="x" size="2" />
<select name="operator" onchange="setSelected(this);">
<option>-Operator-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" name="y" size="2" />
<input type="button" name="hasil" value="=" onclick="calc.k.value=eval(calc.x.value+calc.operator.value+calc.y.value)" />
<input type="text" name="k" size="2" disabled=true/>
<br/>
</td>
</tr>
</table>
</form>
</body>
</html>
dan ini adalah output program tersebut.
makasih gan
BalasHapusudah aku pasang di http://3dkennie.blogspot.com/