MulaiCode
HTML

HTML JavaScript

Pelajari cara menggunakan JavaScript dalam HTML untuk menambahkan interaktivitas ke halaman web.

HTML dan JavaScript (HTML JavaScript)

JavaScript adalah bahasa pemrograman yang digunakan untuk menambah interaktivitas pada halaman web. Anda dapat menggunakan JavaScript untuk mengubah elemen HTML, menangani event, dan membuat aplikasi web yang dinamis.


1. Mengubah Warna Latar Belakang Halaman dengan JavaScript

Dalam HTML, Anda dapat menambahkan JavaScript untuk menangani klik tombol dan mengubah elemen halaman. Berikut adalah contoh penggunaan JavaScript untuk mengubah warna latar belakang halaman ketika tombol diklik.

<button onclick="ubahWarna()">Klik Saya untuk Mengubah Warna</button>
<script>
  function ubahWarna() {
    document.body.style.backgroundColor = "lightblue";
  }
</script>

2. Menampilkan Pesan Peringatan dengan JavaScript

JavaScript juga bisa digunakan untuk menampilkan pesan atau peringatan. Pada contoh ini, kita menggunakan fungsi alert() untuk menampilkan pesan ketika tombol diklik.

<button onclick="alert('Tombol diklik!')">Klik Saya untuk Alert</button>

3. Mengubah Konten Paragraf dengan JavaScript

Anda juga bisa menggunakan JavaScript untuk mengubah konten dari elemen HTML, seperti mengganti teks dalam sebuah paragraf. Berikut adalah cara untuk melakukannya.

<p id="konten">Ini adalah paragraf awal.</p>
<button onclick="ubahKonten()">Klik untuk Mengubah Konten</button>
<script>
  function ubahKonten() {
    document.getElementById('konten').innerText = "Konten telah diubah!";
  }
</script>

4. Menangani Formulir dengan Validasi Menggunakan JavaScript

Formulir dapat digunakan untuk mengumpulkan data pengguna, dan Anda bisa menambahkan validasi dengan JavaScript untuk memastikan data yang dimasukkan benar sebelum formulir disubmit.

<form onsubmit="return validateForm()">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  <button type="submit">Kirim</button>
</form>
<script>
  function validateForm() {
    var nama = document.getElementById('nama').value;
    if (nama == "") {
      alert("Nama harus diisi");
      return false;
    }
  }
</script>

On this page