KodeKodingan - Pada Belajar Javascript kali ini melanjutkan tutorial sebelumnya, yaitu Cara Memasukkan Kode Javascipt ke dalam HTML Part 1.
Perhatikan pada baris ke-13 dari contoh kode diatas, yaitu pada penulisan tag <button>. Di dalam tag tersebut, saya menambahkan onclick=”alert(‘Hello World!!’)”, ini adalah kode JavaScript yang diinput melalui metode event handler.
Dalam tutorial javascript kali ini kita telah mempelajari 4 cara menginput atau memasukkan javascript ke dalam HTML. Jika anda perhatikan, dari contoh-contoh yang ada, saya ‘meletakkan’ kode javascript pada bagian atas HTML (tepatnya pada bagian tag <head>). Akan tetapi, JavaScript tidak harus diletakkan di bagian ini.
 |
| Belajar Javascript |
Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)
Cara ketiga untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan Event Handler dari dalam tag HTML.
Konsep Event Handler akan kita pelajari secara khusus pada tutorial terpisah, namun secara sederhananya, event handler adalah pemanggilan kode javascript ketika ‘sesuatu’ terjadi dalam tag HTML.
Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di arahkan mouse, dan lain-lain. Event handler di dalam JavaScript ditulis dengan penambahan kata on. Sehingga jika sebuah tombol di-klik, maka disebut sebagai onclick, jika mouse berada diatas element disebut sebagai onmouseover, dan lain-lain.
Sebagai contoh, ketika sebuah tombol di-klik, maka kita bisa menampilkan alert(“Hello World!!”). Berikut adalah contoh kode programnya:
<!DOCTYPEhtml><html><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><head><title>Belajar JavaScript di Duniailkom</title></head><body><h1>Belajar JavaScript</h1><p>Saya sedang belajar JavaScript di duniailkom.com</p><p>Belajar Web Programming di Duniailkom.</p><buttononclick="alert('Hello World!!')">Klik Saya</body></html>
 |
| Belajar Javascript |
Cara Memasukkan JavaScript Menggunakan URL (href:=”javascript:”)
Cara terakhir (dan juga paling jarang digunakan saat ini) adalah dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga dengan protocol javascript. Disebut demikian, karena kita mengganti alamat link dari yang biasa menggunakan protocol http//: menjadi javascript:
Sebagai contoh penggunaannya, perhatikan kode berikut ini:
Jika anda menjalankan kode diatas, dan men-klik link Hallo Dunia… akan tampil alert Hello World!!, yang berasal dari JavaScript. Disini kita telah menjalankan JavaScript menggunakan protocol javascript.<!DOCTYPEhtml><html><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><head><title>Belajar JavaScript di Duniailkom</title></head><body><h1>Belajar JavaScript</h1><p>Saya sedang belajar JavaScript di duniailkom.com</p><p>Belajar Web Programming di Duniailkom.</p><ahref="javascript:alert('Hello World!!')">Hallo Dunia...</a></body></html>
Dalam tutorial javascript kali ini kita telah mempelajari 4 cara menginput atau memasukkan javascript ke dalam HTML. Jika anda perhatikan, dari contoh-contoh yang ada, saya ‘meletakkan’ kode javascript pada bagian atas HTML (tepatnya pada bagian tag <head>). Akan tetapi, JavaScript tidak harus diletakkan di bagian ini.
EmoticonEmoticon