Inilah 4 Cara Memanggil Fungsi Javascript pada HTML
Penggunaan Javascript dalam website sudah semakin menjamur. Seiring perkembangan bahasa pemrograman web, Javascript kini kian banyak digunakan oleh para developer web dalam menambahkan fungsi dari web yang dikembangkannya dan menjadi salah satu bahasa pemrograman web paling populer. Sebentar, memang Javascript itu apa sih?
JavaScript adalah salah satu bahasa pemrograman web yang bersifat “Client Side Programming Language”. Maksudnya adalah Javascript adalah bahasa pemrograman yang proses pengolahan datanya dilakukan oleh pengguna atau client menggunakan aplikasi client, berupa web browser. Tentu saja, sebagai bahasa pemrograman pada umumnya, kelebihan dan kekurangan Javascript juga mengiringi penggunaan Javascript di web browser.
Sebagai bahasa pemrograman web, Javascript haruslah ditulis di dalam file HTML (Hyper Text Markup Language) yang memang diperuntukan untuk dieksekusi di software web browser. Oleh karena itu, kode-kode Javascript harus disematkan di file HTML sebuah web. Untuk selanjutnya, kode Javascript tersebut harus dipanggil agar bisa dimuat di file HTML. Lalu gimana sih cara memanggil fungsi Javascript pada HTML?
Jawabannya ada empat cara penulisan javascript pada HTML yang bisa Anda lakukan. Dan pada kesempatan kali ini, kami akan memberikan informasinya untuk Anda. Mari kita simak.
1. Tag <script>
Cara pertama yang bisa dilakukan untuk memasukkan kode JavaScript ke dalam halaman HTML adalah menggunakan tag <script> secara internal. Maksud internal di sini adalah kode JavaScript ditulis pada halaman yang sama dengan HTML.
Cara satu ini adalah cara yang paling sering digunakan dan direkomendasikan bagi Anda yang menuliskan kode JavaScript yang tidak terlalu panjang. Tag <script> bisa dibuat di dalam tag <head>, ataupun di dalam tag <body>. Contoh penulisan tag <script> untuk memanggil Javascript di HTML adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
<script>
console.log("Hai, ini Javascript");
</script>
</head>
<body>
<script>
document.write("Javascript itu mudah!");
</script>
</body>
</html>
Tag <script> akan memberitahukan web browser bahwa kode yang berada diantara tag tersebut bukanlah kode HTML, melainkan kode JavaScript.
Oh iya, dalam beberapa tutorial JavaScript, mungkin Anda akan menemukan contoh penggunaan tag <script> seperti di bawah ini:
<script type="text/javascript">
//kode javascript diletakkan disini
</script>
Penggunaan atribut type=”text/javascript” pada HTML digunakan untuk membedakan kode Javascript dengan script dari macam-macam bahasa pemrograman web lainnya, contohnya seperti VBScript (yang ditulis sebagai type=”text/vbscript”). Tetapi, karena bahasa pemrograman web VBScript sudah jarang digunakan, maka saat ini hampir semua web browser menjadikan JavaScript sebagai bahasa script default. Sehingga, Anda tak perlu lagi menulis type=”text/javascript” untuk membedakan kode Javascript dengan kode bahasa pemrograman web lainnya. Walaupun sebenarnya, Anda tak salah sih jika ingin menegaskan penggunaan JavaScript dalam file HTML dengan menuliskannya langsung.
Pada halaman web yang sudah lama dibuat, kadang juga akan ditemui penggunaan atribut language sebagai pengganti atribut type dalam contoh sebelumnya, seperti berikut ini:
<script language=”text/javascript”>
//kode javascript ditulis disini
</script>
Atribut language sendisi saat ini sudah dianggap usang oleh web browser terkini dan kami sarankan untuk tidak digunakan kembali.
2. File Eksternal
Cara memanggil fungsi javascript pada HTML yang kedua adalah dengan menuliskan kode JavaScript di dalam sebuah file terpisah, untuk selanjutnya dipanggil dari HTML. Cara ini sangat kami sarankan dan juga disarankan oleh banyak tutorial karena cara ini bisa memberikan banyak keuntungan dalam membuat program JavaScript di web.
Sebuah file JavaScript yang telah dibuat selanjutnya disimpan dalam ekstensi .js, contoh nama filenya seperti: kode.js, register.js, atau mycode.js. Dari halaman HTML, Anda bisa memanggilnya dengan tag <script> dan atribut src. Atribut src berisikan alamat dari file Javascript yang telah dibuat.
Untuk menerapkan metode ini, Anda harus membuat sebuah file yang berekstensi .js. Contoh dari isi filenya adalah sebagai berikut.
// file-eksternal.js
alert("Javascript dari Berkas Eksternal");
Lalu, Anda perlu menghubungkan file JavaScript eksternal tersebut dengan file HTML. Caranya, adalah menggunakan tag <script> dengan atribut src untuk menentukan lokasi file Javascriptnya. Contoh penulisan pada file HTML-nya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Penulisan Javascript</title>
<script src="file-eksternal.js"></script>
</head>
<body>
</body>
</html>
Oh iya, penamaan file JavaScript dengan akhiran .js itu hanya sebuah kesepakatan di kalangan programmer. Anda sebenarnya bisa membuat file Javascript dengan ekstensi apapun, contohnya seperti: javascript.me, atau kodejava.dosenit. Asalkan ketika pemanggilan Javascript melalui tag <script>, nama filenya harus sesuai dengan nama file eksternal yang telah dibuat. Namun agar lebih nyaman dan tidak membuat bingung programmer lainnya, sebaiknya Anda mengikuti kesepakatan yang sudah dibuat, yaitu menggunakan ekstensi “.js”.
3. Event Handler
Sederhananya, event handler adalah pemanggilan kode Javascript ketika “sesuatu” terjadi di dalam tag HTML. Maksud dari “sesuatu” di sini adalah ketika sebuah komponen di dalam file HTML diklik, di-klik kanan, diarahkan kursor mouse, dan lainnya. Event handler di dalam JavaScript ditulis dengan penambahan kata “on”. Contohnya, jika sebuah tombol di-klik, maka disebut sebagai “onclick”; jika mouse berada di atas komponen disebut “onmouseover”, dan lainnya.
Contoh pemanggilan JavaScript menggunakan Event Handler adalah sebagai berikut:
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>
Selain event onclick dan onmouseover, ada juga event-event lainnya, yaitu:
- onsubmit
- onload
- ondoubleclick
- onmouseout
- dan lain sebagainya
Cara pemanggilan Javascript ini, walaupun praktis namun sebenarnya tidak disarankan. Alasannya karena Anda akan mencampurkan JavaScript dengan HTML. Dan jika kode JavaScript yang dituliskan agak panjang, maka Anda akan kesulitan dalam memisahkan kode HTML dengan JavaScript. Hasil yang didapatkan dari kode Javascript menggunakan event handler sebaiknya dipindahkan ke dalam tag <script>.
Nah, untuk mengatasi kebingungan Anda dalam menggunakan Event Handler, di dalam pemrograman Javascript ada yang disebut Unobtrusive JavaScript. Unobtrusive JavaScript merupakan paradigma pemrograman yang berpendapat bahwa konten (dalam kasus ini file HTML) sebisa mungkin harus terpisah dari behavior (yaitu file JavaScript) agar pemrogramannya lebih fleksibel dan mudah untuk dipelihara. Penjelasan lebih lanjut bisa Anda cari lagi di referensi lainnya di internet.
4. URL
Cara terakhir untuk memanggil Javascript di HTML adalah dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML, atau yang disebut juga dengan protokol Javascript. Disebut begitu karena Anda akan mengganti alamat link dari yang biasa menggunakan protokol “http//:” menjadi “javascript:”. Cara terakhir ini sekarang sudah jarang sekali digunakan oleh programmer. Menariknya, cara ini sudah dilakukan dari awal kemunculan Javascript.
Contohnya, coba Anda ketikkan alamat URL berikut ini di browser.
javascript:alert("Nah! ini dia Javascript")
Hasilnya, Javascript akan dieksekusi oleh web browser.
Lalu, bagaimana menggunakan metode ini di file HTML?
Caranya adalah menggunakan tag <a>. Alamat URL dari kode Javascript ditulis di antara atribut href. Cara ini juga bisa digunakan menggantikan event handler “onclick”. Berikut ini adalah cara penulisannya:
<a href="javascript:alert('Jebret!!!')">Klik Aku Dongggs</a>
Anda juga dapat menggunakan metode ini untuk menjalankan perintah JavaScript tanpa membuat halaman HTML. Caranya cukup dengan menuliskan perintah JavaScript langsung di kolom address bar dari web browser.
Konsep ini bisa digunakan untuk membuat sebuah aplikasi berbasis Javascript yang bisa disimpan dalam web browser, dan dieksekusi ketika diperlukan. Aplikasi ini dikenal dengan istilah bookmarklet.
Mana yang terbaik?
Dari keempat cara memanggil fungsi Javascript pada HTML yang telah kami bahas di atas, kami merekomendasikan Anda untuk memisahkan kode JavaScript ke dalam suatu file terpisah dan menggunakan metode <script src=””>. Keuntungan menggunakan metode ini adalah sebagai berikut:
- Menyederhanakan halaman HTML yang dibuat. Karena Anda memindahkan seluruh kode JavaScript ke dalam file terpisah.
- Sebuah file JavaScript external bisa digunakan juga untuk beberapa halaman HTML.Jadi jika terjadi perubahan, Anda hanya perlu mengedit satu file saja daripada harus mengubah secara satu persatu halaman HTML tempat JavaScript disematkan.
- Jika file JavaScript external digunakan oleh beberapa halaman webb HTML, maka file tersebut hanya didownload sekali oleh web browser. Ketika web broser memuat halaman lainnya, web browser cukup mengambilnya dari cache browser, sehingga bisa mempercepat proses pemuatan halaman.
Sekian artikel kami kali ini seputar cara memanggil fungsi Javascript pada HTML. Jika Anda sedang mempelajari bahasa pemrograman Javascript, Anda bisa membaca artikel kami seputar perintah dasar Javascript. Atau jika Anda sedang menggeluti bahasa pemrograman web dasar, silahkan Anda membaca artikel kami seputar perintah dasar HTML. Semoga informasi kami kali ini bisa berguna bagi Anda. Selamat belajar dan semoga sukses.