Elemen Dasar JavaScript
1. Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
<html>
<head>
<title>Demo Kotak Dialog</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
alert('OK, JavaScript Enabled');
//-->
</script>
Refresh (F5) untuk melihat pesan JavaScript
</body>
</html>
2. Dukungan Scripting
Melalui tag <noscript>, dengan mudah kita bisa mengidentifikasi apakah browser mendukung scripting atau tidak. Pada dasarnya, tag ini tidak dimaksudkan untuk menghentikan interpretasi terhadap kode program. Dengan kata lain, browser akan tetap menerjemahkan baris kode kecuali tag <script>.
<html>
<head>
<title>Demo Dukungan Scripting</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
alert('OK, JavaScript Enabled');
//-->
</script>
Refresh (F5) untuk melihat pesan JavaScript
<noscript>
<h4>Oops, It seem that your browser does not support Scripting</h4>
</noscript>
</body>
</html>
Jika browser tidak mendukung scripting, maka yang dijalankan adalah tag <noscript>
3. Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, ada beragam pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek.
Sebagai contoh, misalkan kita memiliki elemen form sebagai berikut:
<form>
<input type="text" name="myName" id="myID" />
</form>
Masing-masing pendekatan di bawah ini dapat digunakan dan mengacu pada
elemen yang sama di atas.
// Menggunakan id numerik (urutan elemen)
document.forms[0].elements[0];
// Menggunakan nama elemen
document.forms[0].elements['myName'];
// Menggunakan id elemen
document.forms[0].elements['myID'];
// Menggunakan nama dan id secara langsung
document.forms[0].myName;
document.forms[0].myID;
// Menggunakan method getElementById
document.getElementById('myID');
4. 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.
<html>
<head>
<title>Demo Event Onclick</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// Fungsi sederhana untuk memunculkan dialog
function show_dialog() {
alert('OK, JavaScript Enabled');
}
//-->
</script>
<a href="#" onclick="show_dialog()">Click Me</a>
<form action="#">
<input type="submit" value="Click Me" onclick="show_dialog()" />
</form>
<!-- Menulis alert langsung -->
<a href="#" onclick="alert('Simple Alert');">Click Me</a>
</body>
</html>
5. Linked Scripting
Seperti halnya CSS, penulisan kode JavaScript juga bisa dilakukan di file terpisah. Langkah ini sebaiknya digunakan ketika melakukan implementasi nyata, dengan tujuan membuat kode yang bersih. Contoh berikut memperlihatkan pemisahan kode JavaScript dan HTML.
.File lat_script.js:
// Fungsi sederhana untuk memunculkan dialog
function show_dialog() {
alert('OK, JavaScript Enabled');
}
File linked_script.html:
<html>
<head>
<title>Demo Linked Script</title>
<script type="text/javascript" src="lat_script.js"></script>
</head>
<body>
<a href="#" onclick="show_dialog()">Click Me</a>
</body>
</html>
No comments:
Post a Comment