Ingin membuat sebuah website interaktif yang dinamis, kamu harus mengetahui cara memanggil JavaScript di HTML dulu, Sob! Memang, JavaScript sendiri sangat bermanfaat dalam menghadirkan beragam fungsi modern bagi sebuah website.
Penggunaan JavaScript sendiri sudah sangat populer bagi kalangan pembuat website interaktif. Sering sekali, bahasa pemrograman ini berguna untuk memberi interaksi bagi pengguna dengan fitur interaktif dan dinamis.
Inilah kenapa kamu wajib memiliki kemampuan memanggil fungsi JavaScript di HTML sebagai skill penting dalam pembuatan website.
Artinya, JavaScript akan memudahkan interaksi pengguna dengan elemen HTML seperti mengkliknya.
Tidak usah risau, Sob! Ada cara mudah untuk memanggil fungsi JavaScript di HTML. Yuk cari tahu selengkapnya dengan membaca artikel ini sampai habis!
Apa Itu JavaScript?
Sebelum mengetahui cara memanggil JavaScript di HTML, mari kenali apa itu JavaScript. Tentu kamu sudah tahu bahwa JavaScript adalah sebuah bahasa pemrograman agar website menjadi lebih interaktif dan dinamis.
Faktanya, JavaScript sendiri pertama kali dikembangkan pada tahun 1995 oleh Brendan Eich, mantan karyawan Netscape Communications Corporation. Awalnya, bahasa ini bernama Mocha dan LiveScript sebelum berganti nama menjadi JavaScript.
Sejak pengenalannya, JavaScript telah menjadi salah satu bahasa pemrograman terpopuler. Faktanya, tercatat kurang lebih 92 persen pembuatan website menggunakan JavaScript pada tahun 2016.
Kemudian, mengapa JavaScript merupakan elemen penting dalam pembuatan website? Sekali lagi, JavaScript akan membuat pengembangan website lebih interaktif, dinamis, canggih, dan hidup bagi pengguna.
Selain itu, sifatnya yang berupa “Client Side Programming Language” juga menjadi sangat menguntungkan bagi pembuat web. Artinya, JavaScript akan mengolah data dengan mengandalkan aplikasi web browser.
Terakhir, JavaScript wajib tertulis dalam sebuah file HTML yang menandakan memang khusus untuk web browser. Dengan kemudian, setiap kode JavaScript harus tercantum dalam sebuah file HTML.
Apa Itu HTML?
Sementara itu, HTML sendiri merupakan singkatan dari Hyper Text Markup Language. Ini adalah sebuah bahasa pemrograman standar untuk memuat website di web browser secara resmi
HTML sendiri pertama kali dibuat oleh Tim Berners-Lee pada 1991. Seiring perkembangan zaman, HTML akan selalu ada tag dan atribut baru setiap kali versi barunya keluar.
Kamu akan sering melihat ekstensi file .html jika menyimpan sebuah laman web ke dalam hard drive untuk diakses offline.
Maka dari itu, file tersebut akan terbaca oleh sebuah web browser yang merender setiap konten agar pengguna dapat melihatnya.
Di samping itu, HTML memiliki beberapa fungsi penting sebagai berikut:
- Membuat sebuah website sekaligus membentuk pondasinya
- Berfungsi sebagai hyperlink
- Menambah multimedia pada website
- Penanda teks dan bagian website
Cara Memanggil JavaScript di HTML dengan Mudah
Terdapat empat cara yang bisa kamu pakai untuk memanggil fungsi JavaScript di HTML dengan mudah. Berikut adalah keempat pembahasan cara tersebut:
1. Penggunaan Tag <script>
Cara pertama untuk memanggil fungsi JavaScript dengan menggunakan tag <script> secara internal. “Internal” di sini artinya sebuah kode JavaScript akan tertulis pada halaman HTML yang sama.
Tentunya, kamu akan menempatkan tag <script> di dalam head atau body dari dokumen HTML. Kemudian, kamu akan bisa memanggil fungsi ini saat pengguna berinteraksi dengan elemen sebuah laman website.
Cara ini sekaligus cukup populer bagi pembuat website. Bahkan, cara ini juga menjadi rekomendasi jika kode atau fungsi JavaScript kamu tidak begitu panjang.
Berikut adalah contoh penulisan tag <script> untuk memanggil fungsi JavaScript di HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Cara Memanggil Javascript</title>
<script>
console.log(“Halo, aku Javascript”);
</script>
</head>
<body>
<script>
document.write(“Memanggil JavaScript ternyata mudah sekali!”);
</script>
</body>
</html>
Dalam contoh tadi, tag <script> akan memberi perintah pada web browser bahwa tag tersebut merupakan kode JavaScript alih-alih kode HTML.
2. File JavaScript Eksternal
Selanjutnya, kebanyakan pembuat website memilih menempatkan kode JavaScript di file yang terpisah. Dengan demikian, memisahkan HTML and JavaScript merupakan cara mudah agar kodenya mudah terkelola.
Terlebih, cara memasang Javascript di html ini sangat cocok jika fungsi JavaScript lebih panjang dan kompleks.
Bahkan, terdapat pula banyak keuntungan dalam proses pembuatan program di web.
Sebuah file JavaScript akan tersimpan dalam ekstensi .js. Mak, kamu akan memanggilnya menggunakan tag <script> dan attribute src. Attribute src sendiri akan berisi alamat file JavaScript tersebut.
Kemudian, kamu harus menghubungkan file JavaScript eksternal itu dengan HTML. Gunakan tag <Script> dan atribut scr. untuk memastikan alamat lokasi file itu.
Jadi, berikut adalah contoh penulisan dengan file JavaScript eksternal:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title> Penulisan Javascript Eksternal</title>
<script src=”file-eksternal.js”></script>
</head>
<body>
</body>
</html>
3. Event Listener
Cara memanggil JavaScript di HTML terakhir adalah mengandalkan Event Listener. Event Listener sendiri merupakan sebuah metode untuk menangani sebuah “Event” dalam JavaScript.
Secara harfiah, event merupakan sebuah aksi, tindakan, atau aktivitas yang akan ditindaklanjuti oleh JavaScript di dalam browser. Ini dapat berupa penekanan tombol keyboard, klik mouse kiri atau kanan, atau proses pembuatan sebuah page berakhir.
Untuk membuat event listener dalam JavaScript, kamu harus membuatnya untuk berbagai jenis tindakan.
Berikut adalah contoh pemanggil event listener pada JavaScript secara sederhana:
<button onclick=”alert(Thanks for clicking!’)”>Click here</button>
Sebenarnya, terdapat beberapa event selain “onclick” dari contoh tadi. Berikut adalah beberapa event yang bisa kamu gunakan dalam penulisan kode JavaScript:
onmouseover
ondoubleclick
onsubmit
onload
onmouseout
Meski terbilang praktis, cara menggabungkan HTML dan JavaScript ini sebenarnya cukup rumit. Mengingat keduanya akan bercampur, kamu akan kesulitan memisahkan mana yang kode JavaScript dan mana yang kode JavaScript.
4. URL
Menggunakan URL merupakan satu lagi cara untuk memanggil JavaScript di HTML. Cara ini akan memperlihatkan JavaScript akan tersisip ke dalam alamat href di tag HTML.
Artinya, kamu akan mengganti protokol http:// dengan JavaScript. Cara ini tergolong klasik karena populer saat awal kemunculan JavaScript, tapi sudah jarang terpakai oleh kebanyakan pembuat website.
Berikut adalah contoh penulisan untuk memanggil JavaScript di HTML dengan URL:
<a href=”javascript:alert(Congratulations!!!’)”>Click Me!</a>
Itulah empat cara memanggil Javascript di HTML yang cukup mudah. Jika sudah paham, pastikan untuk mempraktekkannya dalam pembuatan proyek website kamu, Sob.
Cari Web Hosting Terbaik? JagoanHosting Saja!
Ingin web hosting terbaik sekaligus berkualitas? Pilih JagoanHosting yang menjamin hosting murah, tanpa kompromi, dan pastinya developer-friendly.
Sudah lebih dari 160.000 pelanggan puas dengan kualitas hosting kami secara positif. Pastikan Anda menjadi yang selanjutnya untuk menggunakan hosting murah berkualitas dari JagoanHosting!
FAQ
Cara untuk memanggil JavaScript di HTML manakah yang lebih sederhana?
Untuk penggunaan kode JavaScript yang sederhana, andalkan penggunaan tag <script> untuk memanggil JavaScript di HTML.
Bagaimana cara memakai file JavaScript secara eksternal?
Kamu bisa membuat file berisi kode JavaScript dengan ekstensi .js secara terpisah.
Apa itu event handler?
Event handler merupakan perintah untuk memanggil fungsi JavaScript dari event HTML secara langsung.
