Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis.

Jika:

  • HTML → struktur
  • CSS → tampilan
  • JavaScript → interaksi & logika

Contoh:

  • Klik tombol → muncul alert
  • Input → langsung tampil di halaman
  • Validasi form sebelum dikirim

Penggunaan JavaScript

External (Best Practice)

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

Variabel

Variabel digunakan untuk menyimpan data.

let nama = "Nadia";
const umur = 20;

Penjelasan:

  • let → nilainya bisa berubah
  • const → nilainya tetap

Tipe Data

let teks = "Hello";     // String
let angka = 10;         // Number
let aktif = true;       // Boolean
let kosong = null;
let belum;

Tipe kompleks:

let mahasiswa = {
    nama: "Nadia",
    umur: 20
};

let nilai = [80, 90, 100];

Output Dasar

console.log("Hello");
alert("Halo");

Digunakan console.log() untuk debugging

Fungsi & Logika

Fungsi

Fungsi digunakan untuk mengelompokkan kode agar bisa digunakan berulang.

function sapa(nama) {
    return "Halo " + nama;
}

console.log(sapa("Nadia"));

Arrow Function (Modern)

const tambah = (a, b) => {
    return a + b;
};

Percabangan (If)

let nilai = 80;

if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Tidak lulus");
}

Perulangan (Loop)

for (let i = 0; i < 5; i++) {
    console.log(i);
}

Digunakan untuk pengolahan data berulang

DOM (Document Object Model)

Apa itu DOM?

DOM adalah representasi HTML dalam bentuk objek yang bisa diakses dan dimanipulasi oleh JavaScript.

JavaScript bisa:

  • Mengubah isi teks
  • Mengubah tampilan
  • Menambah atau menghapus elemen

Mengambil Elemen

const judul = document.querySelector("h1");

Contoh lain:

document.querySelector("#id");
document.querySelector(".class");

👉 Ini adalah dasar semua manipulasi DOM

Mengubah Konten

judul.innerHTML = "Judul Baru";

Perbedaan:

  • innerHTML → bisa isi HTML
  • textContent → hanya teks

Mengubah Style

judul.style.color = "red";

Event (Interaksi User)

Apa itu Event?

Event adalah aksi dari user, seperti:

  • Klik
  • Ketik
  • Hover

addEventListener

const btn = document.querySelector("button");

btn.addEventListener("click", function() {
    alert("Tombol diklik");
});

Contoh Interaksi

btn.addEventListener("click", function() {
    document.querySelector("h1").innerHTML = "Berubah!";
});

Contoh Integrasi

<input type="text" id="nama">
<button id="btn">Tampilkan</button>
<p id="hasil"></p>

<script>
const btn = document.querySelector("#btn");

btn.addEventListener("click", function() {
    const nama = document.querySelector("#nama").value;
    document.querySelector("#hasil").innerHTML = nama;
});
</script>