Halaman JavaScript

1. Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. JavaScript berjalan di sisi klien (browser) dan sering digunakan untuk memanipulasi elemen HTML, menangani event, validasi form, hingga membuat aplikasi web yang kompleks.

2. Fitur-Fitur JavaScript

Dapat dimasukkan langsung ke HTML
Menjalankan kode secara otomatis saat halaman dimuat
Dapat berinteraksi dengan HTML dan CSS
Menangani event (klik, scroll, input, dll)
Memiliki banyak fungsi built-in
Dapat bekerja dengan library dan framework

3. Penempatan JavaScript

JavaScript dapat diletakkan di beberapa tempat dalam HTML:

Di dalam tag <head>
Di akhir tag <body> (umum dipakai)
File eksternal .js yang dipanggil dengan <script src="...">

<script>
  alert("Halo dari JavaScript");
</script>

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

4. Output JavaScript

Beberapa cara JavaScript menampilkan output:

document.getElementById().innerHTML – output ke HTML
alert() – pop-up
console.log() – ke konsol browser

document.getElementById("demo").innerHTML = "Hello!";
alert("Halo!");
console.log("Log ini ke console");

5. Event JavaScript

Event seperti klik, input, hover bisa ditangani JavaScript dengan atribut onclick, onchange, dsb.

<button onclick="tampilkanPesan()">Klik Saya</button>

<script>
  function tampilkanPesan() {
    alert("Tombol diklik!");
  }
</script>

6. Interaksi Tombol dengan Mouse

Perubahan tampilan saat mouse diarahkan, ditekan, atau dilepas.

<button
  id="btnHover" class="btn btn-secondary" 
  onmouseover="hoverTombol()" 
  onmouseout="resetTombol()" 
  onmousedown="klikTombol()" 
  onmouseup="lepasKlik()">Arahkan Mouse ke Sini</button>

<script>
  function hoverTombol() {
    document.getElementById("btnHover").style.backgroundColor = "#1abc9c";
  }
  function resetTombol() {
    document.getElementById("btnHover").style.backgroundColor = "#6c757d";
  }
  function klikTombol() {
    document.getElementById("btnHover").style.backgroundColor = "#e74c3c";
  }
  function lepasKlik() {
    document.getElementById("btnHover").style.backgroundColor = "#1abc9c";
  }
</script>

7. Mengubah Teks Saat Diklik

Klik tombol untuk mengubah isi teks HTML.

Teks ini akan berubah saat kamu klik tombol.

function ubahTeks() {
  document.getElementById("paragrafKlik").innerText = "Teks telah berubah!";
}

8. Menampilkan dan Menyembunyikan Elemen

Klik tombol untuk toggle tampil/simpan konten HTML.

Ini adalah konten yang bisa disembunyikan atau ditampilkan.

function toggleKonten() {
  const konten = document.getElementById("kontenToggle");
  konten.style.display = (konten.style.display === "none") ? "block" : "none";
}

Referensi

Materi ini dirangkum dari W3Schools JavaScript:

Pengenalan JavaScript