WEBTEKNOLOGI - JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi lebih interaktif dan dinamis.
Dalam menggunakan JavaScript, kita perlu menghubungkannya dengan file HTML agar dapat berjalan dengan baik. Ada beberapa cara untuk menghubungkan JavaScript dengan HTML, salah satunya adalah dengan menggunakan atribut `id`.
Pada artikel ini, kita akan membahas langkah-langkah menampilkan JavaScript di HTML menggunakan `id`.
Langkah-langkah Menampilkan JavaScript di HTML Menggunakan id
1. Buat file HTML
Langkah pertama adalah membuat file HTML yang akan digunakan untuk menampilkan JavaScript. Buat file baru dengan ekstensi `.html` dan buka dengan teks editor.
Dalam file HTML, tambahkan struktur dasar HTML seperti berikut:
html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan JavaScript dengan id</title>
</head>
<body>
</body>
</html>
2. Buat file JavaScript
Selanjutnya, buat file JavaScript baru dengan ekstensi `.js`. Dalam file JavaScript, tambahkan kode JavaScript yang ingin ditampilkan.
Misalnya, buat file `script.js` dengan isi sebagai berikut:
javascript
function greeting() {
alert("Halo, selamat datang!");
}
3. Hubungkan JavaScript dengan HTML
Setelah membuat file HTML dan JavaScript, selanjutnya kita perlu menghubungkan keduanya. Dalam file HTML, tambahkan tag `<script>` di dalam elemen `<body>` atau `<head>` dan berikan atribut `id` untuk referensi JavaScript.
Contoh:
html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan JavaScript dengan id</title>
</head>
<body>
<h1>Halaman Utama</h1>
<script id="my-script" src="script.js"></script>
</body>
</html>
Pada contoh di atas, kita menambahkan tag `<script>` dengan atribut `id="my-script"` dan `src="script.js"` yang mereferensikan file JavaScript yang telah kita buat sebelumnya.
4. Panggil JavaScript menggunakan id
Setelah menghubungkan JavaScript dengan HTML, kita dapat memanggil fungsi JavaScript yang ada di file `script.js` dengan menggunakan atribut `id` pada tag `<script>`.
Contoh:
html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan JavaScript dengan id</title>
</head>
<body>
<h1>Halaman Utama</h1>
<button onclick="document.getElementById('my-script').click()">Klik Saya</button>
<script id="my-script" src="script.js"></script>
</body>
</html>
Pada contoh di atas, kita menambahkan tombol dengan atribut `onclick="document.getElementById('my-script').click()"`. Ketika tombol tersebut diklik, maka fungsi `greeting()` yang ada di file `script.js` akan dipanggil dan akan menampilkan pesan "Halo, selamat datang!" melalui `alert()`.
Kesimpulan
Menampilkan JavaScript di HTML dengan menggunakan atribut `id` adalah salah satu cara untuk menghubungkan JavaScript dengan HTML.
Dengan menggunakan atribut `id`, kita dapat dengan mudah memanggil fungsi JavaScript dari file JavaScript yang telah kita buat sebelumnya. Metode ini sangat efektif dan mudah diimplementasikan, terutama untuk halaman web yang sederhana. (Webteknologi/Admin)
0 Komentar untuk "Cara Menampilkan JavaScript di HTML Menggunakan id"