Apa Itu JavaScript dan Perannya di Website

JavaScript adalah bahasa pemrograman yang berjalan di sisi klien (browser) untuk membuat halaman web menjadi interaktif. Contohnya seperti membuat popup, validasi form, slider gambar, dan lainnya.

Cara Menyisipkan JavaScript ke HTML

Ada tiga cara menyisipkan JavaScript:

  • Inline: <button onclick="alert('Halo!')">Klik</button>
  • Internal: menggunakan tag <script> di dalam HTML
  • Eksternal: menggunakan file .js dan disisipkan dengan <script src="script.js"></script>

Variabel dan Tipe Data di JavaScript

let nama = "Dina";    // string
const umur = 17;      // number
let aktif = true;     // boolean

Gunakan let atau const untuk mendeklarasikan variabel.

Operator Aritmatika dan Perbandingan

let a = 5;
let b = 2;
let hasil = a + b;      // Penjumlahan
let sama = a == b;      // Perbandingan

Struktur Kontrol: If, Else, dan Switch

let nilai = 80;
if (nilai >= 75) {
  console.log("Lulus");
} else {
  console.log("Tidak Lulus");
}
let hari = "Senin";
switch(hari) {
  case "Senin":
    console.log("Awal minggu");
    break;
  default:
    console.log("Hari lainnya");
}

Perulangan: For, While, dan Do…While

// For
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

// While
let x = 1;
while (x <= 3) {
  console.log("Halo " + x);
  x++;
}

// Do...While
let y = 1;
do {
  console.log("Iterasi ke-" + y);
  y++;
} while (y <= 2);

Fungsi dan Cara Membuatnya

function sapa(nama) {
  return "Halo, " + nama;
}
console.log(sapa("Budi"));

Event: Menanggapi Aksi Pengguna

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

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

Manipulasi DOM: Mengubah Isi Halaman Lewat JavaScript

<p id="teks">Ini paragraf</p>
<button onclick="ubahTeks()">Ubah</button>

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

Validasi Form Sederhana dengan JavaScript

<form onsubmit="return cekForm()">
  Nama: <input type="text" id="nama">
  <input type="submit" value="Kirim">
</form>

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