Penggunaan Javascript dalam website semakin berkembang. Seiring dengan berkembangnya bahasa pemrograman web, Javascript kini semakin banyak digunakan oleh para web developer untuk menambah fungsionalitas pada web yang mereka kembangkan dan menjadi salah satu bahasa pemrograman web yang paling populer. Tunggu dulu, apa sebenarnya Javascript itu?
JavaScript adalah salah satu bahasa pemrograman web yaitu "Client Side Programming Language". Pengertian Javascript adalah bahasa pemrograman yang pengolahan datanya dilakukan oleh pengguna atau client dengan menggunakan aplikasi client, berupa web browser. Tentunya sebagai bahasa pemrograman pada umumnya, kelebihan dan kekurangan Javascript juga mengiringi penggunaan Javascript di web browser.
Sebagai bahasa pemrograman web, Javascript harus ditulis dalam file HTML (Hyper Text Markup Language) yang dimaksudkan untuk dieksekusi dalam perangkat lunak browser web. Oleh karena itu, kode Javascript harus disematkan dalam file HTML suatu situs web. Untuk selanjutnya, kode Javascript harus dipanggil agar dapat dimuat dalam file HTML. Jadi bagaimana Anda memanggil fungsi Javascript dalam HTML?
Jawabannya ada empat cara penulisan javascript di HTML yang bisa anda lakukan. Dan pada kesempatan kali ini kami akan memberikan informasinya untuk anda. Mari lihat
1. Tag
Cara pertama yang bisa dilakukan untuk memasukkan kode JavaScript ke dalam halaman HTML adalah menggunakan tag 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 bisa dibuat di dalam tag , ataupun di dalam tag . Contoh penulisan tag 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 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 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 berbagai bahasa pemrograman web lainnya, seperti VBScript (yang ditulis type=”text/vbscript”). Namun karena bahasa pemrograman web VBScript sudah jarang digunakan, kini hampir semua web browser menjadikan JavaScript sebagai bahasa skrip default. Jadi, Anda tidak perlu lagi menulis type=”text/javascript” untuk membedakan kode Javascript dengan kode bahasa pemrograman web lainnya. Padahal sebenarnya Anda tidak salah jika ingin memaksakan penggunaan JavaScript pada file HTML dengan menuliskannya secara langsung
Pada halaman web yang sudah lama dibuat, terkadang Anda juga akan menemukan penggunaan atribut language sebagai pengganti atribut type pada contoh sebelumnya, seperti berikut
<script language=”text/javascript”>_
//kode javascript ditulis disini
</script>
Atribut bahasa saat ini dianggap usang oleh browser web terbaru dan kami menyarankan untuk tidak menggunakannya lagi
2. File Eksternal
Cara kedua untuk memanggil fungsi javascript di HTML adalah dengan menulis kode JavaScript di file terpisah, untuk dipanggil dari HTML. Cara ini sangat kami rekomendasikan dan juga direkomendasikan oleh banyak tutorial karena cara ini dapat memberikan banyak manfaat dalam pembuatan 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 dan atribut src. Atribut src berisikan alamat dari file Javascript yang telah dibuat.
Untuk menerapkan metode ini, Anda harus membuat file dengan ekstensi. js. Contoh isi file tersebut 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 dengan atribut src untuk menentukan lokasi file Javascriptnya. Contoh penulisan pada file HTML-nya adalah sebagai berikut:
<script type=_0
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 , 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. Penangan Acara
Sederhananya, event handler adalah panggilan ke kode Javascript ketika "sesuatu" terjadi di dalam tag HTML. Yang dimaksud dengan “sesuatu” di sini adalah ketika suatu komponen dalam file HTML diklik, diklik kanan, diarahkan oleh kursor mouse, dan seterusnya. Penangan acara dalam JavaScript ditulis dengan penambahan kata "on". Misalnya, jika sebuah tombol diklik, itu disebut " title";
Contoh pemanggilan JavaScript menggunakan Event Handler adalah sebagai berikut
<script type=_1
Selain event title dan onmouseover, ada juga event lainnya yaitu
- onsubmit
- memuat
- ondoubleclick
- onmouseout
- dan seterusnya
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 .
Nah, untuk mengatasi kebingungan Anda dalam menggunakan Event Handler, dalam pemrograman JavaScript ada yang namanya Unobtrusive JavaScript. Unobtrusive JavaScript adalah paradigma pemrograman yang berpendapat bahwa konten (dalam hal ini file HTML) harus dipisahkan sebanyak mungkin dari perilaku (yaitu file JavaScript) sehingga pemrograman lebih fleksibel dan mudah dipelihara. Penjelasan lebih lanjut dapat Anda temukan pada referensi lain di internet
4. URL
Cara pemanggilan Javascript pada HTML yang terakhir adalah dengan memasukkan JavaScript ke dalam alamat href tag HTML, atau yang disebut juga protokol Javascript. Disebut demikian karena anda akan mengubah alamat link dari yang biasa menggunakan protokol "http//. ” menjadi “javascript. ”. Cara terakhir ini sekarang sudah jarang digunakan oleh para programmer. Menariknya, metode ini sudah dilakukan sejak awal Javascript
Misalnya, coba ketikkan alamat URL berikut di browser
<script type=_2
Akibatnya, Javascript akan dieksekusi oleh web browser
Lalu, bagaimana cara menggunakan cara ini pada file HTML?
Caranya adalah menggunakan tag . Alamat URL dari kode Javascript ditulis di antara atribut href. Cara ini juga bisa digunakan menggantikan event handler “ title”. Berikut ini adalah cara penulisannya:
<script type=_3
Anda juga dapat menggunakan metode ini untuk menjalankan perintah JavaScript tanpa membuat halaman HTML. Caranya adalah dengan menulis perintah JavaScript langsung di kolom address bar web browser
Konsep ini dapat digunakan untuk membuat sebuah aplikasi berbasis Javascript yang dapat disimpan di web browser, dan dijalankan saat dibutuhkan. 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 . Keuntungan menggunakan metode ini adalah sebagai berikut:
- Menyederhanakan halaman HTML yang dihasilkan. Karena Anda memindahkan semua kode JavaScript ke file terpisah
- File JavaScript eksternal juga dapat digunakan untuk beberapa halaman HTML. Jadi jika ada perubahan, Anda hanya perlu mengedit satu file daripada harus mengubah satu per satu halaman HTML tempat disematkannya JavaScript
- Jika file JavaScript eksternal digunakan oleh beberapa halaman web HTML, maka file tersebut hanya diunduh satu kali oleh browser web. Saat web browser memuat halaman lain, web browser cukup mengambilnya dari cache browser, sehingga bisa mempercepat proses loading halaman.
Sekian artikel kami kali ini seputar cara memanggil fungsi Javascript pada HTML. Jika Anda mempelajari bahasa pemrograman Javascript, Anda dapat membaca artikel kami tentang perintah dasar Javascript. Atau jika Anda kesulitan dengan bahasa pemrograman web dasar, silakan baca artikel kami tentang perintah dasar HTML. Semoga informasi kami kali ini dapat bermanfaat bagi anda. Selamat belajar dan semoga berhasil