Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar HTML5 Bagian 19 : Cara Membuat Kode CSS di HTML, selanjutnya kita akan membahas cara membuat kode javascript di HTML.
Javascript adalah salah satu bahasa web programing yang dapat menambahkan interaksi ke web Anda.
Misalnya, menghasilkan pesan kotak peringatan pop-up, atau menyediakan menu drag (Tarik).
Bahasa pemrograman seperti javascript ini, disisipkan ke dalam dokumen HTML menggunakan tag <script>.
Metode penulisan kode javascript ke dalam HTML dibagi menjadi 2 cara yaitu :
- External Javascript
- Internal Javascript
Mari kita lihat kedua cara ini beserta dengan contoh penggunaanya.
External JavaScript
Anda bisa menuliskan kode javascript tersendiri, kemudian menyimpannya dengan ekstensi .js. File .js ini bisa dipanggal kapan saja untuk memberi efek pada dokumen HTML.
Untuk memanggil fungsi dari file javascript ini ke dalam dokumen HTML, kita akan menggunakan tag <script>.
Pada contoh berikut, kita akan membuat kode fungsi sederhana dari javascript, kemudian simpan dengan nama script.js :
function Halo() {
alert("Halo Dunia ! ");
}
Sekarang, mari kita panggil file javascript tersebut dalam dokumen HTML berikut :
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Halo();" name = "ok" value = "Klik Saya " />
</body>
</html>
Browser akan menampilkan hasil sebagai berikut, Anda bisa mencoba untuk klik tombol “Klik Saya”, browser akan memunculkan kotak warning dari browser.
Internal Javascript
Anda juga dapat langsung menulis kode script ke dalam dokumen HTML.
Biasanya, kode javascript dituliskan dalam tag <header> menggunakan tag <script>, namun Anda juga bisa menyisipkan kode javascript d bagian <body> dari dokumen HTML.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<script type = "text/JavaScript">
function Halo() {
alert("Halo dunia ! ");
}
</script>
</head>
<body>
<input type = "button" onclick = "Halo();" name = "ok" value = "Klik Saya " />
</body>
</html>
Browser akan menampilkan hasil sebagai berikut ketika Anda mengklik tombol yang ada :
Event Handler
Event handler adalah fungsi dari javascript yang dapat dipanggil ketika ada event (Tindakan) dari mouse atau keyboard dalam bentuk apapun.
Contoh berikut menjelaskan bagaimana menulis sebuah event handler.
Mari kita lihat 1 fungsi sederhana EventHandler () di bagian header.
Fungsi ini akan dipanggil dan bekerja ketika ada pengguna yang mengarahkan mouse ke tulisan.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Event Handlers</title>
<script type = "text/JavaScript">
function EventHandler() {
alert("Saya adalah event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bawa mouse Anda ke sini untuk melihat peringatan dari browser </p>
</body>
</html>
Silahkan arahkan mouse Anda ke dalam kalimat dan lihat hasilnya :
Sembunyikan Script dari Browser Lama
Meskipun sebagian besar (tidak semua) browser saat ini mendukung JavaScript, namun beberapa browser lama tidak.
Jika browser tidak mendukung JavaScript, maka script tidak akan dijalankan, bahkan kode script akan ditampilkan kode kepada pengguna.
Untuk mencegahnya, Anda cukup menempatkan komentar HTML di sekitar script seperti yang ditunjukkan di bawah ini.
<script type = "text/JavaScript">
<!--
document.write("Halo JavaScript!");
//-->
</script>
Elemen <noscript>
Anda juga dapat memberikan info alternatif kepada pengguna yang browsernya tidak mendukung script dan bagi pengguna yang telah menonaktifkan pilihan script di browser mereka.
Anda dapat melakukannya dengan menggunakan tag <noscript>.
<script type = "text/JavaScript">
<!--
document.write("Halo JavaScript!");
//-->
</script>
<noscript>Browser Anda tidak mendukung JavaScript!</noscript>
Semoga tutorial ini bisa membantu Anda memahami bagaimana cara menambahkan kode javascript di HTML untuk membuat dokumen web Anda menjadi lebih interaktif.
0 Komentar