RudihartoSetelah sebelumnya kita mempelajari layout dan responsive web design pada seri belajar HTML part 7, pada panduan kali ini kita akan membahas HTML JavaScript untuk pemula. Materi yang akan dipelajari mencakup penggunaan tag, fungsi JavaScript, berbagai hal yang dapat dilakukan JavaScript di dalam HTML, serta contoh penerapannya.
Secara default, data yang ditampilkan pada halaman HTML bersifat statis, artinya tidak bisa berubah atau merespon tindakan pengguna. Namun, dengan bantuan JavaScript, data tersebut bisa menjadi dinamis, interaktif, dan responsif.
Di era website modern seperti saat ini, hampir semua situs web sudah menggunakan JavaScript. Contohnya bisa Anda temui sehari-hari, misalnya tombol like di media sosial yang langsung berubah warna saat diklik, hingga pesan peringatan saat mengisi formulir dengan data yang salah. Semua efek dan interaksi itu terjadi berkat JavaScript.
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang dijalankan di sisi pengunjung website (client-side), bukan di server. Artinya, kode JavaScript diproses langsung oleh browser seperti Chrome, Firefox, Safari, atau Opera, saat seseorang membuka sebuah halaman web.
Cara mudahnya, bayangkan JavaScript seperti serangkaian perintah yang membuat halaman website jadi lebih hidup dan interaktif. Misalnya, saat Anda mengklik tombol dan muncul pop-up, atau saat tampilan halaman berubah tanpa perlu dimuat ulang, semua itu bisa dilakukan dengan JavaScript.
Salah satu kemampuan utama JavaScript adalah berinteraksi dengan DOM (Document Object Model). DOM sendiri adalah cara browser menggambarkan struktur halaman HTML dalam bentuk yang terorganisir. Melalui DOM, JavaScript bisa mengakses dan mengubah konten, mengatur tampilan, atau bahkan menambahkan elemen baru ke dalam halaman secara langsung.
Mengenal Fungsi Dasar JavaScript
Sebelum belajar JavaScript lebih jauh, ada baiknya kita mengenal beberapa fungsi dan konsep dasar terlebih dahulu. Pemahaman dasar ini penting agar nantinya kita lebih mudah saat mulai menghubungkan JavaScript dengan elemen-elemen HTML di halaman web.
1. Elemen HTML (DOM)
Langkah pertama adalah menunjuk elemen HTML yang ingin kita ubah dengan JavaScript. Ada beberapa cara umum yang bisa digunakan:
document.getElementById('ID_ELEMEN')
Digunakan untuk mengambil elemen HTML berdasarkan ID. Cara ini paling mudah dan sering dipakai.document.querySelector('.CLASS_ELEMEN')
Digunakan untuk mencari elemen HTML pertama yang cocok dengan selector CSS tertentu (misalnya class atau tag).
2. Mengubah Konten
Setelah mendapatkan elemen (seperti diatas), kita bisa memodifikasi apa yang ada di dalamnya, seperti;
elemen.innerHTML = "TEKS BARU"
Kode ini akan mengganti teks atau tag HTML di dalam elemen tersebut.
3. Merespons Aksi Pengguna (Event Handling)
JavaScript juga bisa merespons interaksi pengguna di halaman web, seperti klik, hover, atau menekan tombol.
elemen.addEventListener('click', fungsiAksi)
Digunakan untuk menjalankan sebuah fungsi saat elemen diklik.
Dengan memahami tiga konsep dasar di atas, kita akan lebih mudah saat mulai mengimplementasikan JavaScript ke dalam dokumen HTML. Selanjutnya, kita akan mempelajari bagaimana cara menuliskan kode JavaScript di dalam file HTML.
Contoh JavaScript di HTML
Berikut adalah contoh penggunaan JavaScript di script HTML.
JavaScript Internal
JavaScript Internal adalah cara menuliskan kode JavaScript langsung di dalam file HTML menggunakan tag <script>. Biasanya, tag <script> diletakkan di dalam bagian <head> atau di akhir <body>.
Contoh 1: Mengubah Konten Elemen (innerHTML)
Contoh berikut menunjukkan cara sederhana untuk mengakses dan mengubah isi elemen HTML menggunakan JavaScript setelah halaman selesai dimuat.
<!DOCTYPE html>
<html>
<head>
<title>JS Internal - Ubah Teks</title>
</head>
<body>
<p id="teks-awal">Teks ini akan diubah oleh JavaScript.</p>
<script>
// 1. Mengakses Elemen HTML berdasarkan ID
const elemenTeks = document.getElementById('teks-awal');
// 2. Mengubah Konten (innerHTML) elemen tersebut
elemenTeks.innerHTML = "? Teks ini **berhasil** diubah oleh JavaScript! ?";
</script>
</body>
</html>Penjelasan:
- Elemen
<p>memiliki ID unik (teks-awal). - JavaScript menggunakan
document.getElementById('teks-awal')untuk menunjuk elemen tersebut. - Properti
.innerHTMLkemudian digunakan untuk menimpa konten teks lama dengan teks baru.
Contoh 2: Merespons Aksi Pengguna (Event Handling)
Contoh kedua ini menunjukkan bagaimana JavaScript dapat merespon sebuah aksi yang dilakukan oleh pengguna, seperti pada saat klik tombol di halaman HTML.
<!DOCTYPE html>
<html>
<head>
<title>JS Internal - Event Klik</title>
</head>
<body>
<p id="hasil">Silakan klik tombol di bawah.</p>
<button id="tombol-aksi">Klik Saya!</button>
<script>
// 1. Mengakses Elemen HTML (Tombol dan Hasil)
const tombol = document.getElementById('tombol-aksi');
const hasilTeks = document.getElementById('hasil');
// 2. Mendefinisikan Fungsi Aksi
function ubahPesan() {
hasilTeks.innerHTML = "Anda telah mengklik tombol! Terima kasih. ?";
}
// 3. Merespons Aksi Pengguna (Event Listener)
// Ketika tombol di-'click', jalankan fungsi ubahPesan
tombol.addEventListener('click', ubahPesan);
</script>
</body>
</html>Penjelasan:
- Ketika tombol dengan ID
tombol-aksidiakses, ia ditambahkan event listenerclick. - Setiap kali tombol tersebut diklik, fungsi
ubahPesan()akan dieksekusi, yang tugasnya adalah mengubah konten HTML dari elemen dengan IDhasil.
JavaScript Eksternal (File .js Terpisah)
Untuk proyek atau dokumen HTML yang lebih besar, menggunakan file JavaScript eksternal akan membuat kode menjadi lebih rapi, terstruktur, dan mudah dikelola.
Caranya, buat file JavaScript terpisah (misalnya dengan nama script.js), lalu panggil file tersebut ke dalam dokumen HTML.
Berikut langkah-langkah untuk memanggil file JavaScript eksternal:
Step 1: Buat file JavaScript (misalnya, javascript.js)
// Isi file script.js
// Fungsi untuk mengubah warna latar belakang body
function ubahLatarBelakang() {
document.body.style.backgroundColor = 'lightblue';
}
// Menunggu seluruh halaman HTML dimuat sebelum menjalankan kode
document.addEventListener('DOMContentLoaded', function() {
const tombolWarna = document.getElementById('tombol-warna');
// Menambahkan event listener ke tombol
tombolWarna.addEventListener('click', ubahLatarBelakang);
});Step 2: Panggil nama tersebut didalam dokumen HTML
<!DOCTYPE html>
<html>
<head>
<title>JS Eksternal</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Coba Klik Tombol di Bawah</h1>
<button id="tombol-warna">Ubah Warna Latar</button>
</body>
</html>Manfaat JavaScript eksternal:
- Terstruktur: Kode HTML dan JavaScript terpisah membuat dokumen website mudah dikelola.
- Kecepatan: File JavaScript dapat di-cache oleh browser, sehingga dapat dimuat lebih cepat.
- Maintenance: Lebih mudah melakukan maintenance dan modifikasi kode JavaScript maupun dokumen HTMLnya.
Penutup
JavaScript adalah bahasa pemrograman client-side yang berfungsi untuk membaca dan memodifikasi dokumen HTML. Dengan menambahkan sedikit kode JavaScript, halaman web yang awalnya statis dapat berubah menjadi dinamis dan interaktif.
Beberapa poin penting tentang JavaScript yang perlu Anda ingat:
- Dijalankan di sisi browser (client-side), seperti Chrome atau Firefox, sehingga tidak membebani resource pada server.
- Interaktif, karena dapat memberikan respons langsung terhadap aksi pengguna seperti klik, hover, atau input data.
- DOM Manipulasi, yaitu kemampuan JavaScript untuk berinteraksi dengan struktur HTML (DOM) dan mengubah konten, struktur, maupun gaya tampilan halaman.
- Fleksibel dalam implementasi, JavaScript bisa ditulis langsung di dalam dokumen HTML melalui tag.
Dengan memahami dasar-dasarnya secara bertahap, mulai dari mengakses elemen HTML (DOM), mengubah konten, hingga merespons aksi pengguna (event handling), Anda akan memiliki fondasi kuat untuk membangun website modern yang menarik dan interaktif.
Demikian artikel Belajar HTML Part 8 tentang HTML JavaScript untuk pemula. Jangan lupa ikuti terus sesi belajar HTML dari Rumahweb berikutnya, agar kemampuan Anda dalam menguasai HTML semakin berkembang. Semoga bermanfaat dan sampai jumpa di materi selanjutnya!
