Belajar HTML - Dasar Penggunaan JavaScript di Halaman Web

Home » HTML
html-script

Halo teman-teman,

Setelah sebelumnya kita membahas tentang cara menyisipkan konten luar menggunakan <iframe>, kali ini kita akan mulai kenalan dengan JavaScript, bahasa pemrograman yang bikin halaman web jadi lebih interaktif dan hidup!

Kalau HTML adalah kerangka, dan CSS adalah gaya visual, maka JavaScript adalah otak atau mesinnya. Dengan JavaScript, kita bisa menambahkan logika, efek dinamis, hingga merespons tindakan pengguna. Yuk mulai dari dasarnya!

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang punya kemampuan untuk membuat halaman HTML jadi jauh lebih dinamis dan interaktif. Dalam praktiknya, JavaScript digunakan untuk melakukan perubahan isi secara real-time, memanipulasi elemen visual seperti gambar, serta memvalidasi data yang diinput pengguna ke dalam formulir.

Untuk bisa menggunakan JavaScript, kita mulai dari tag <script>. Elemen ini digunakan untuk mendefinisikan skrip di sisi klien (client-side script). Di dalam tag <script>, kamu bisa langsung menulis perintah JavaScript atau merujuk ke file eksternal menggunakan atribut src.

Menambahkan JavaScript ke HTML

Berikut dua cara umum menambahkan JavaScript:

1. Skrip Langsung di Halaman HTML

<script>
  alert("Selamat datang di halaman interaktif!");
</script>

2. Menggunakan File Eksternal

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

Pendekatan eksternal lebih rapi dan cocok digunakan untuk proyek yang kompleks.

Contoh Penggunaan JavaScript

Mengubah Isi Elemen

JavaScript biasanya menggunakan metode document.getElementById untuk memilih elemen berdasarkan id. Misalnya:

<p id="demo">Ini paragraf awal.</p>
<script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

Metode ini akan menemukan elemen <p> dengan id “demo” dan mengganti isinya.

Mengubah Gaya Visual

<script>
  document.getElementById("demo").style.color = "blue";
</script>

Mengubah Atribut Elemen

<script>
  document.getElementById("gambar").src = "gambar-baru.jpg";
</script>

Contoh Interaksi Lainnya

Tombol Interaktif

<p id="teks">Teks awal.</p>
<button onclick="ubahTeks()">Klik Aku!</button>

<script>
  function ubahTeks() {
    document.getElementById("teks").innerHTML = "Teks telah diubah!";
  }
</script>

addEventListener

<button id="klik">Klik aku juga</button>
<p id="output"></p>

<script>
  document.getElementById("klik").addEventListener("click", function() {
    document.getElementById("output").innerHTML = "Tombol ditekan!";
  });
</script>

Validasi Formulir Sederhana

<form onsubmit="return validasi()">
  <input type="text" id="nama" placeholder="Masukkan nama">
  <input type="submit" value="Kirim">
</form>

<script>
  function validasi() {
    var nama = document.getElementById("nama").value;
    if(nama === "") {
      alert("Nama tidak boleh kosong!");
      return false;
    }
    return true;
  }
</script>

Contoh Manipulasi Visual

<button onclick="ubahWarna()">Ubah Background</button>

<script>
  function ubahWarna() {
    document.body.style.backgroundColor = "lightblue";
  }
</script>

Contoh Proyek Mini untuk Latihan

Selain memahami sintaks dasar JavaScript, penting juga untuk mengaplikasikan apa yang telah dipelajari melalui latihan nyata. Dengan mengerjakan proyek mini, kamu akan lebih cepat terbiasa dalam mengatur struktur kode, memecahkan masalah logika, dan memahami alur kerja antara HTML, CSS, dan JavaScript.

Untuk memperkuat pemahamanmu, kamu bisa mencoba membuat beberapa proyek mini sederhana dengan JavaScript, seperti:

  • Kalkulator Sederhana: Tambah, kurang, kali, bagi dua angka.

  • Galeri Gambar: Tombol next/prev untuk navigasi gambar.

  • Form Validasi Dinamis: Menampilkan pesan error secara langsung saat pengguna mengetik.

  • To-do List: Tambah, tandai selesai, dan hapus item kegiatan.

Latihan seperti ini sangat membantu dalam memahami struktur logika program dan cara JavaScript berinteraksi dengan HTML.

Praktik Baik Saat Menulis JavaScript

  • Gunakan nama fungsi dan variabel yang mudah dimengerti.

  • Simpan kode JavaScript di file terpisah untuk proyek besar.

  • Tambahkan komentar jika perlu menjelaskan alur kode.

  • Uji di berbagai browser untuk memastikan konsistensi.

  • Gunakan indentation (spasi/tab) agar struktur kode mudah dibaca.

  • Hindari pengulangan kode dengan membuat fungsi terpisah.

Menyisipkan JavaScript di Tempat yang Tepat

Penempatan tag <script> juga penting untuk memastikan kode dijalankan dengan benar. Idealnya, JavaScript diletakkan di akhir elemen <body> agar seluruh konten HTML sudah dimuat saat skrip dijalankan. Tapi jika ingin menaruhnya di bagian <head>, kita bisa tambahkan atribut defer seperti ini:

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

Dengan defer, browser akan menunda eksekusi JavaScript sampai seluruh halaman selesai dimuat. Ini membantu mencegah kesalahan saat JavaScript mencoba mengakses elemen yang belum dirender.

JavaScript dan Perilaku Responsif

Selain membuat halaman jadi lebih dinamis, JavaScript juga sering digunakan untuk membuat tampilan yang responsif terhadap berbagai perangkat. Misalnya, kamu bisa menambahkan event listener untuk memantau ukuran jendela (window) dan menyesuaikan layout secara otomatis.

Contoh kode untuk mendeteksi perubahan ukuran layar:

<script>
  window.addEventListener("resize", function() {
    console.log("Ukuran layar berubah: " + window.innerWidth + "px");
  });
</script>

Fitur seperti ini banyak digunakan di website modern agar tampilannya tetap optimal baik di desktop maupun perangkat mobile.

Menampilkan Waktu dan Tanggal

JavaScript juga sangat berguna untuk menampilkan informasi waktu dan tanggal secara dinamis. Ini bisa kamu manfaatkan misalnya untuk menampilkan jam saat ini atau menyapa pengguna berdasarkan waktu lokal mereka.

Berikut contoh sederhana menampilkan waktu menggunakan JavaScript:

<p id="waktu"></p>

<script>
  function tampilkanWaktu() {
    const sekarang = new Date();
    document.getElementById("waktu").innerHTML = sekarang.toLocaleTimeString();
  }
  setInterval(tampilkanWaktu, 1000);
</script>

Dengan menggunakan setInterval, fungsi tampilkanWaktu akan dijalankan setiap detik sehingga jam akan terus diperbarui secara real-time.

Studi Kasus: Menyapa Pengguna Secara Dinamis

Kita juga bisa menggunakan JavaScript untuk menyapa pengguna berdasarkan waktu saat mereka mengakses situs. Misalnya, menampilkan "Selamat pagi" atau "Selamat malam" secara otomatis:

<p id="sapaan"></p>

<script>
  const jam = new Date().getHours();
  let sapaan = "";

  if (jam < 12) {
    sapaan = "Selamat pagi!";
  } else if (jam < 18) {
    sapaan = "Selamat siang!";
  } else {
    sapaan = "Selamat malam!";
  }

  document.getElementById("sapaan").innerHTML = sapaan;
</script>

Ini adalah contoh bagaimana JavaScript dapat digunakan untuk membuat pengalaman pengguna lebih personal dan terasa alami.

Itu tadi pengenalan singkat tentang JavaScript — bagaimana menyisipkannya ke HTML, melakukan manipulasi konten, gaya, dan atribut, serta membuat halaman jadi lebih hidup dan responsif. Meskipun kita baru menggaruk permukaannya, tapi dari sini kamu sudah bisa mulai berlatih dan bereksperimen.

Di materi selanjutnya, kita akan membahas bagian <head> di HTML — bagian penting yang berisi metadata, judul halaman, dan elemen-elemen pendukung lainnya. Ini akan membantu optimasi SEO dan pengaturan tampilan halaman web secara menyeluruh. Jangan lewatkan ya!

Komentar

Posting Komentar

Postingan Populer

Gambar

Gambar