Seperti yang telah kita pelajari pada tutorial cara menjalankan kode JavaScript, sekilas anda telah melihat cara memasukkan kode JavaScript ke dalam HTML. Pada tutorial kali ini kita akan membahas metoda-metoda atau cara-cara untuk meng-input kode JavaScript ke dalam HTML.
Cara Memasukkan kode JavaScript ke dalam HTML
JavaScript termasuk jenis bahasa script, yang digunakan di dalam file HTML. Untuk menginput, atau memasukkan kode JavaScript ke dalam HTML, JavaScript menyediakan 4 alternatif, yaitu:
- Menggunakan tag (internal JavaScript)
- Menggunakan tag (external JavaScript)
- Menggunakan Event Handler (Inline JavaScript)
- Menggunakan URL (href:=”javascript:”)
Dalam tutorial javascript kali ini kita akan membahas ke-4 metode ini.
Cara Memasukkan JavaScript menggunakan tag (internal JavaScript)
Cara pertama untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan menggunakan tag secara internal. Internal disini berarti bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML, atau di dalam satu file HTML.
Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan diinput diletakkan diantara tag pembuka dan tag penutup seperti berikut ini:
Tag akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.
Sebagai contoh cara penginputan JavaScript dengan tag , berikut adalah kode HTMLnya:
Dalam contoh diatas, saya meletakkan tag di dalam tag dari HTML (pada baris ke 7). Tag tersebut berisi kode JavaScript: alert(“Hello World!!”);. alert() adalah fungsi dalam JavaScript yang akan menampilkan pesan ke dalam web browser. Fungsi ini sering digunakan dalam proses pembuatan program JavaScript untuk menampilkan output sederhana. Fungsi alertmembutuhkan 1 inputan (argumen) bertipe String. Kita akan membahas cara penulisan fungsi dan tipe-tipe data JavaScript pada tutorial-tutorial selanjutnya.
Jika anda menjalankan program diatas, maka di dalam web browser akan tampil hasil seperti berikut ini:
Cara Memasukkan JavaScript Menggunakan tag (external JavaScript)
Cara atau metode kedua untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan memindahkan kode JavaScript ke dalam sebuah file terpisah, lalu ‘memanggilnya’ dariHTML. Cara ini sangat disarankan karena akan memberikan banyak keuntungan dan fleksibilitas dalam membuat program JavaScript.
Sebuah file JavaScript disimpan dalam ekstensi .js, seperti: kode.js, register.js, atau kodeku.js.Dari halaman HTML, kita memanggilnya menggunakan tag dengan atribut src. Atribut srcberisi alamat dari file javascript tersebut, seperti berikut ini:
Perhatikan bahwa tag tetap ditutup dengan tag penutup , atau anda bisa membuatnya menjadi self closing tag seperti berikut ini:
Sebagai contoh program, saya akan menampilkan alert “Hello World!!” seperti kode program sebelumnya, namun kali ini saya akan memisahkannya menjadi sebuah file tersendiri. Kode JavaScript tersebut akan dipindahkan kedalam file kode_javascript.js dengan isi file sebagai berikut:
Ya, hanya 1 baris itu saja, dan savelah pada folder yang sama dengan tempat kode HTML akan dijalankan dengan nama file kode_javascript.js. Lalu pada kode program HTML, kita akan menjalankan file javascript tersebut sebagai berikut:
Perhatikan bahwa di dalam file kode_javascript.js saya langsung menuliskan perintah alert, dan dipanggil oleh tag <script> pada baris ke 7 contoh file HTML diatas.
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 dalamtag HTML.
Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di arahkanmouse, 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:
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 JavaScriptyang diinput melalui metode event handler.
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.
Cara menjalankan JavaScript seperti ini berasal dari awal kemunculan javascript, dan sudah banyak ditinggalkan.
Best Practice JavaScript: gunakan tag <script src=””>
Dari ke-4 cara menginput kode JavaScript, memisahkan kode JavaScript kedalam sebuah file tersendiri (menggunakan metode <script src=””>) adalah yang paling disarankan. Beberapa keuntungan menggunakan metoda <script src> bila dibandingkan dengan moteda cara memasukkan JavaScript lainnya adalah:
- Menyederhanakan halaman HTML dengan memindahkan seluruh kode JavaScript, sehingga halaman HTML hanya berisi konten saja.
- Sebuah file JavaScript external bisa digunakan untuk beberapa halaman HTML, sehingga jika diperlukan perubahan, kita hanya perlu mengedit sebuah file daripada mengubah secara satu persatu halaman HTML tempat JavaScript ditulis secara internal.
- Jika file JavaScript external digunakan oleh beberapa halaman, file tersebut hanya perlu didownload oleh web browser pada saat pertama kali saja. Pada saat loading halaman lainnya, web browser cukup mengambilnya dari browser cache, sehingga mempercepat loading halaman.
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.
alfiandi.code.blog 