Hubungan js dan HTML

JavaScript dan HTML adalah dua elemen penting yang digunakan dalam pengembangan web. Melalui artikel ini, kita akan memahami bagaimana hubungan antara JavaScript (JS) dan HTML membentuk aplikasi web yang efektif.

JavaScript dalam HTML

JavaScript dapat digunakan dalam dokumen HTML. Biasanya, ini dilakukan dalam dua cara: melalui penempatan internal langsung dalam dokumen HTML atau melalui referensi eksternal ke file JavaScript.

Penempatan Internal

JS dapat ditulis langsung di dalam dokumen HTML menggunakan elemen <script>. Elemen ini biasanya ditempatkan di bagian <head> atau <body> dokumen. Contoh:

<!DOCTYPE html>
<html>
<body>

<h1>Contoh JavaScript Internal</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Halo, ini adalah contoh JavaScript internal!";
</script>

</body>
</html>

Referensi Eksternal

Alih-alih menulis skrip langsung di HTML, kamu juga bisa merujuk ke file JavaScript eksternal. Cara ini memungkinkan struktur kode yang lebih rapi dan reusability yang tinggi. Contoh:

<!DOCTYPE html>
<html>
<body>

<h1>Contoh JavaScript Eksternal</h1>

<p id="demo"></p>

<script src="myscripts.js"></script>

</body>
</html>

Manipulasi DOM dengan JavaScript

Dokumen Object Model (DOM) adalah representasi terstruktur dari dokumen HTML. JavaScript dapat digunakan untuk memanipulasi DOM dan mengubah konten HTML.

Berikut adalah contoh bagaimana JavaScript digunakan untuk merubah konten HTML:

<!DOCTYPE html>
<html>
<body>

<h1 id="judul">Selamat Datang</h1>

<button type="button" 
onclick="document.getElementById('judul').innerHTML = 'Selamat Bertemu Kembali!'">
Klik di sini</button>

</body>
</html>

Dalam kasus di atas, JavaScript digunakan untuk merubah teks dalam elemen HTML dengan id ‘judul’ saat tombol di-klik.

Respons Event dengan JavaScript

JavaScript juga dapat digunakan untuk membuat aplikasi web yang responsif terhadap tindakan pengguna, seperti klik mouse, gerakan mouse, penekanan kunci keyboard, dan lainnya. Berikut adalah contoh bagaimana JS digunakan untuk merespons event klik mouse:

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">Halo!</h1>

<button type="button" onclick="myFunction()">Klik di sini</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Halo, Selamat Datang!";
}
</script>

</body>
</html>

Saat pengguna mengeklik tombol, fungsi myFunction() dipanggil, yang mengubah konten elemen dengan id “demo”.

Kesimpulan

Jadi, itu adalah cara JavaScript dan HTML saling berinteraksi dalam pembuatan aplikasi web. JavaScript memungkinkan HTML menjadi lebih dinamis dan interaktif, memungkinkan pembuatan aplikasi web yang canggih dan responsif.