Untuk membangun sebuah website dinamis, Anda harus mengetahui cara memanggil JavaScript di HTML. Karena, JavaScript berguna untuk menambahkan berbagai fungsi website modern, misalnya fitur transaksi
Di artikel ini, kita akan belajar cara memanggil JavaScript di dalam file HTML dengan tiga metode berbeda. Mari simak sampai akhir!
Sekilas Tentang JavaScript
JavaScript adalah bahasa pemrograman yang awalnya dikembangkan pada tahun 1995 oleh Brendan Eich di Netscape Communications Corporation. Saat itu, nama bahasa ini adalah LiveScript, kemudian berubah menjadi JavaScript untuk memanfaatkan popularitas Java yang sedang naik daun.
JavaScript adalah bahasa pemrograman client-side dalam lingkungan web browser. JavaScript berfungsi untuk mengendalikan perilaku dan interaksi pada halaman web yang pengguna lihat.
Dengan bantuan JavaScript, Anda dapat membuat elemen-elemen interaktif, seperti form, animasi, popup, hingga fitur kompleks seperti halaman transaksi.
Cara Memanggil JavaScript di HTML
Interaksi antara HTML dengan JavaScript dapat terjadi melalui beberapa cara. Setiap cara mempunyai kelebihan dan konteks yang berbeda, sehingga Anda perlu memilih metode yang tepat sesuai kebutuhan website Anda. Beberapa cara yang dapat Anda terapkan untuk melakukannya, yaitu:
1. Tag Script Inline
Cara yang paling umum untuk memanggil fungsi JavaScript di file HTML adalah dengan menggunakan elemen <script> secara inline. Istilah inline dalam pemrograman mengacu pada teknik penulisan kode dalam baris yang sama dengan file sumber.
Pada konteks ini, skrip JS ditulis secara langsung di dalam skrip HTML, sehingga termasuk dalam kategori inline. Anda dapat menempatkan elemen <script> di dalam bagian <head> atau <body>, tergantung kapan Anda ingin menjalankan kode tersebut.
Contoh cara menggunakan elemen <script> dalam bagian <head> dokumen HTML, yaitu:
<!DOCTYPE html>
<html>
<head>
<title>Contoh script JS dalam head</title>
<script>
// Kode JavaScript Anda di sebelah sini
function sapa() {
alert(“Halo! Selamat datang!”);
}
</script>
</head>
<body>
<!– Konten HTML lainnya –>
</body>
</html>
Contoh di atas merupakan cara memanggil file JavaScript di HTML dalam bagian <head>. Dalam kasus ini, kita mendefinisikan fungsi sapa(), yang akan menampilkan pesan “Halo! Selamat datang!” ketika dipanggil.
Selain di dalam <head>, Anda juga bisa menggunakan tag <script> di dalam <body>, kemudian menghubungkannya dengan elemen tertentu, misalnya tombol. Contoh penerapannya, yaitu:
<!DOCTYPE html>
<html>
<head>
<title>Contoh script JS dalam body</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah contoh JS dalam body HTML.</p>
<!– Memanggil JavaScript –>
<script>
// Kode JavaScript Anda di sebelah sini
function sapa() {
alert(“Halo! Selamat datang!”);
}
// Memanggil fungsi sapa() saat tombol ditekan
document.querySelector(“h1”).addEventListener(“click”, sapa);
</script>
</body>
</html>
Dalam contoh di atas, kita memasukkan elemen <script> di dalam bagian <body> halaman web. Kode di dalam <script> akan dieksekusi hanya saat pengguna menekan tombol yang terdapat di dalam halaman tersebut.
Anda juga dapat memasukkan elemen <script> di mana pun di dalam bagian <body> sesuai dengan kebutuhan Anda. Fleksibilitas ini akan memudahkan Anda dalam mengatur kode JavaScript. Misalnya, saat Anda ingin menjalankan skrip hanya pada bagian tertentu dari halaman web.
2. File Eksternal
Cara memanggil file di HTML dengan JavaScript yang kedua adalah dengan memanggil file JS eksternal. Jika pada cara sebelumnya, kita menulis kode JavaScript langsung di dalam HTML (inline), maka sekarang kita akan menulisnya di file terpisah.
Pertama-tama, Anda perlu membuat file JavaScript yang akan Anda panggil dari halaman HTML. File JavaScript eksternal harus memiliki ekstensi “.js”. Anda dapat membuatnya dengan menggunakan editor teks biasa seperti Notepad atau editor kode yang lebih canggih seperti Visual Studio Code.
Contoh skrip JS sederhana yang bisa Anda coba, yaitu:
// script.js
function sapa() {
alert(“Halo! Selamat datang!”);
}
Simpan kode di atas dengan ekstensi .js, misalnya contoh.js. Anda dapat melakukannya dengan menggunakan tag <script> di dalam bagian <head> atau <body> halaman web Anda. Cara menggunakan <script> di dalam <head>, yaitu:
<!DOCTYPE html>
<html>
<head>
<title>Contoh script JS eksternal</title>
<!– Memanggil file JS–>
<script src=”contoh.js”></script>
</head>
<body>
<!– Konten HTML lainnya –>
</body>
</html>
Dalam contoh di atas, kita menambahkan tag <script> di dalam bagian <head> dokumen HTML. Atribut src digunakan untuk merujuk ke file JavaScript bernama “contoh.js”. Browser akan segera mengunduh dan memuat skrip di dalam file tersebut pada saat memuat halaman.
Contoh menggunakan <script> di dalam <body>, yaitu:
<!DOCTYPE html>
<html>
<head>
<title>Contoh script JS eksternal</title>
</head>
<body>
<!– Konten HTML lainnya –>
<!– Memanggil file JS –>
<script src=”contoh.js”></script>
</body>
</html>
Konsep dasarnya sama persis dengan metode sebelumnya, hanya saja skrip JS di cara ini kita tulis di file terpisah.
3. Event Listener
Cara memanggil fungsi JavaScript di HTML yang ketiga adalah dengan menggunakan event listener. Metode ini memungkinkan Anda untuk merespon tindakan pengguna, misalnya klik tombol, lalu menjalankan fungsi JavaScript tertentu saat tindakan tersebut terjadi.
Langkah pertama adalah membuat event listener di dalam kode JavaScript Anda. Anda dapat membuat event listener untuk berbagai jenis tindakan, seperti klik, hover, input, dan masih banyak lagi. Dalam contoh ini, kita akan membuat event listener untuk menanggapi klik pada sebuah tombol.
// Membuat event listener untuk tombol dengan id “okButton”
document.getElementById(“okButton”).addEventListener(“click”, function() {
// Kode JS yang akan bekerja
alert(“OK!”);
});
Pada contoh di atas, kita menggunakan addEventListener untuk menambahkan event listener ke elemen HTML dengan id “okButton”. Jika pengguna menekan tombol ini, maka fungsi anonim akan bekerja, lalu pesan “OK!” akan muncul.
Selanjutnya, Anda perlu menambahkan elemen yang sesuai ke dalam dokumen HTML Anda. Dalam contoh ini, kita akan menambahkan tombol dengan id “okButton”.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Event Listener</title>
</head>
<body>
<!– Menambahkan tombol–>
<button id=”okButton”>Klik Aku!</button>
<!– Konten HTML lainnya –>
<script src=”script.js”></script>
</body>
</html>
Pada contoh di atas, kita menambahkan elemen tombol dengan id “okButton” ke dalam bagian <body> dokumen HTML.
Setelah Anda menambahkan event listener dan elemen HTML yang sesuai, maka Anda dapat menguji kode Anda. Buka halaman web dalam browser, lalu klik tombol “okButton”. Anda akan melihat pesan bertuliskan :”OK!” di tengah halaman.
Dengan menggunakan event listener, Anda dapat membuat halaman web yang lebih interaktif dan responsif. Anda dapat merespon berbagai tindakan pengguna, seperti mengirimkan form, validasi input, menampilkan dan menyembunyikan elemen, serta masih banyak lagi.
Event listener juga memungkinkan Anda untuk mengintegrasikan kode JavaScript dengan elemen HTML, dengan cara yang terorganisir dan efisien.
Sudah Mengerti Cara Memanggil JavaScript di HTML?
Secara umum, terdapat tiga cara untuk menjalankan JavaScript di dalam sebuah file HTML. Mulai dari tag <script> inline, file eksternal, hingga event listener. Setiap cara mempunyai kelebihan dan kekurangan, sehingga Anda harus selektif dalam memilih cara sesuai jenis operasi yang Anda inginkan.
Jika Anda ingin cara yang lebih praktis untuk membuat laman web modern dengan JavaScript, menggunakan layanan Smartek Sistem dapat menjadi opsi Anda.
Kontak kami di WA Business 0812 1100 8850 atau dengan mengirimkan email requirement ke hello@smarteksistem.com
