Halo pembaca, apakah Anda ingin menambahkan fungsi interaktif pada website Anda? Salah satu cara untuk melakukannya adalah dengan menambahkan kode Javascript ke dalam HTML. Dalam artikel ini, kami akan memberikan panduan tentang cara membuat Javascript di HTML. Simak terus artikel ini untuk informasi lebih lanjut.
1. Menambahkan Script Tag
Langkah pertama dalam menambahkan Javascript ke dalam HTML adalah dengan menambahkan tag script. Anda dapat menambahkan tag script di dalam tag head atau body. Berikut ini adalah contoh penggunaannya:
<head><script>// kode javascript disini</script></head><body><script>// kode javascript disini</script></body>Dalam tag script, Anda dapat menuliskan kode javascript. Contohnya seperti dibawah ini:
<script>var nama = "John Doe";alert("Halo " + nama);</script>Kode diatas akan menampilkan pesan “Halo John Doe” jika website yang Anda buat dijalankan.
2. Menambahkan External Javascript File
Jika ada banyak kode javascript yang ingin Anda tambahkan, maka lebih baik membuat file javascript terpisah dan memuatnya melalui tag script. Berikut ini adalah contoh kode untuk membuat file javascript terpisah:
Buat file dengan nama script.js dan masukkan kode berikut:
var nama = "John Doe";alert("Halo " + nama);Selanjutnya, tambahkan tag script dengan atribut src yang mengarah ke file script.js pada tag head:
<head><script src="script.js"></script></head>Kode diatas akan memuat file script.js pada website Anda dan menjalankan kode javascript yang ada di dalamnya.
3. Menjalankan Fungsi Javascript
Anda juga dapat membuat fungsi javascript dan memanggilnya di HTML. Berikut ini adalah contoh penggunaannya:
Buat fungsi dengan nama myFunction dan tambahkan kode berikut:
function myFunction() {var nama = "John Doe";alert("Halo " + nama);}Selanjutnya, tambahkan kode berikut di dalam tag body:
<body><button onclick="myFunction()">Klik untuk menampilkan pesan</button></body>Kode diatas akan menambahkan sebuah tombol pada website Anda. Ketika tombol tersebut diklik, maka fungsi myFunction akan dijalankan dan menampilkan pesan “Halo John Doe”.
4. Menangani Event
Javascript juga dapat digunakan untuk menangani event yang terjadi pada website Anda, seperti klik tombol atau masukan dari pengguna. Berikut ini adalah contoh penggunaannya:
Buat fungsi dengan nama changeText dan tambahkan kode berikut:
function changeText() {document.getElementById("demo").innerHTML = "Teks telah diganti";}Selanjutnya, tambahkan kode berikut di dalam tag body:
<body><p id="demo">Teks asli</p><button onclick="changeText()">Klik untuk mengganti teks</button></body>Kode diatas akan menambahkan sebuah teks dan tombol pada website Anda. Ketika tombol diklik, maka fungsi changeText akan dijalankan dan mengganti teks menjadi “Teks telah diganti”.
5. Menambahkan Komentar
Terakhir, Anda juga dapat menambahkan komentar pada kode javascript Anda. Komentar digunakan untuk memberikan penjelasan tentang kode yang ditulis. Berikut ini adalah contoh penggunaannya:
// Ini adalah komentar satu baris/*Ini adalah komentarbeberapa baris*/Kode diatas akan menambahkan komentar pada kode javascript Anda.
Kesimpulan
Sekarang Anda sudah tahu cara membuat Javascript di HTML. Dengan menambahkan kode Javascript ke dalam HTML, Anda dapat menambahkan fungsi interaktif pada website Anda. Semoga artikel ini bermanfaat dan sampai jumpa kembali di artikel menarik lainnya.