HTML Lanjutan | #6 Integrasi dengan JavaScript

Integrasi dengan JavaScript dan Manipulasi DOM

JavaScript adalah bahasa pemrograman yang berjalan di browser dan digunakan untuk menambah interaktivitas pada halaman web. Dalam artikel ini, kita akan membahas cara menghubungkan JavaScript dengan HTML dan melakukan manipulasi DOM (Document Object Model), yang memungkinkan kita mengubah konten dan struktur halaman secara dinamis.

Menghubungkan JavaScript dengan HTML

Ada beberapa cara untuk menghubungkan JavaScript ke dokumen HTML:

1. Menggunakan Tag <script> di dalam HTML

Cara paling sederhana untuk menambahkan JavaScript ke halaman adalah dengan menuliskannya di dalam tag <script> dalam file HTML itu sendiri.

<script>
    console.log("Halo dari JavaScript!");
</script>

        

Dalam contoh ini, pesan Halo dari JavaScript! akan muncul di konsol browser ketika halaman dimuat.

2. Menghubungkan JavaScript Eksternal

Anda juga bisa menulis JavaScript dalam file terpisah dengan ekstensi .js dan kemudian menautkannya di HTML. Berikut adalah contoh cara menautkan file eksternal JavaScript:

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

        

Metode ini sangat berguna untuk memisahkan kode HTML dan JavaScript, sehingga struktur kode menjadi lebih bersih dan mudah dikelola.

DOM Manipulation

DOM (Document Object Model) adalah representasi struktur halaman HTML yang dapat dimanipulasi dengan JavaScript. Berikut adalah beberapa contoh manipulasi DOM sederhana:

1. Mengubah Konten Elemen

Anda dapat menggunakan document.getElementById() untuk mengambil elemen HTML dan mengubah kontennya.

document.getElementById("judul").innerHTML = "Judul Baru!";

        

2. Menambahkan Elemen Baru

JavaScript memungkinkan Anda untuk membuat elemen baru dan menambahkannya ke halaman menggunakan createElement() dan appendChild():

let newElement = document.createElement("p");
newElement.textContent = "Ini adalah paragraf baru.";
document.body.appendChild(newElement);

        

3. Mengubah Gaya CSS dengan JavaScript

Anda juga bisa mengubah gaya elemen secara dinamis menggunakan properti style:

document.getElementById("judul").style.color = "orange";

        

Belajar Lebih Lanjut

Untuk informasi lebih lanjut tentang JavaScript, Anda bisa mengunjungi halaman materi JavaScript di blog saya: Materi JavaScript di Blog.

Kesimpulan

Integrasi JavaScript dengan HTML adalah bagian penting dalam pengembangan web modern. Dengan JavaScript, Anda bisa menambah interaktivitas, manipulasi konten, dan mengubah gaya halaman secara dinamis. Terus pelajari dan eksplorasi DOM untuk membuat situs web yang lebih interaktif dan menarik.