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

1. Inline

Menuliskan kode JavaScript langsung ke dalam elemen HTML, biasanya menggunakan atribut event handler seperti onclick, onmouseover, atau onload.

<button onclick="alert('Halo! Ini adalah Inline JavaScript')">Klik Saya</button>

2. Internal

Kode JavaScript ditulis di dalam tag script dan ditempatkan di dalam file HTML yang sama. Biasanya diletakkan di bagian head atau di bagian paling bawah body

<!DOCTYPE html>
<html>
<head>
    <title>Internal JS</title>
</head>
<body>
    <h1 id="teks">Teks Asli</h1>

    <script>
        // Ini adalah Internal JavaScript
        document.getElementById("teks").innerHTML = "Teks ini diubah oleh JavaScript!";
    </script>
</body>
</html>

3. External

Kode JavaScript ditulis di file yang berbeda dan disimpan dengan ekstensi .js (misalnya app.js). Kemudian, file tersebut dipanggil ke dalam HTML.

<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 itu ibarat "perintah yang disimpan". Daripada menulis kode yang sama berulang kali, kita masukkan kode tersebut ke dalam satu bungkus bernama function.

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

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

  • Parameter: Data yang kamu kirim ke dalam fungsi untuk diolah.

  • Return: Hasil akhir yang dikembalikan oleh fungsi setelah selesai menjalankan tugasnya.

  • Contoh: Kalau kamu sering menghitung pajak, buat satu fungsi hitungPajak(). Setiap butuh hitungan, kamu tinggal panggil nama fungsi itu saja.

Arrow Function (Modern)

Menuliskan fungsi yang lebih pendek. Kalau fungsi biasa butuh kata function dan kurung kurawal, arrow function menggunakan simbol panah =>.

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

  • Sintaks =>: Menggantikan kata kunci function dan menghubungkan parameter dengan isi fungsinya.

  • Sangat praktis digunakan, terutama untuk fungsi-fungsi sederhana atau callback (fungsi yang dijalankan di dalam fungsi lain).

  • Catatan: Jika isinya hanya satu baris, kamu bahkan bisa menghapus kurung kurawal {} dan kata kunci return untuk membuatnya lebih singkat lagi.

Percabangan (If...Else)

Percabangan adalah mekanisme kontrol alur yang memungkinkan program menjalankan kode yang berbeda berdasarkan kondisi tertentu.

let nilai = 80;

if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Tidak lulus");
}
  • Logika: Program akan mengevaluasi apakah sebuah kondisi bernilai true (benar) atau false (salah).
  • Alur: * if: Menjalankan kode jika kondisi terpenuhi.
  • else: Menjalankan kode alternatif jika kondisi di if tidak terpenuhi.
  • Contoh: If (jika) saldo cukup, beli barang. Else (kalau tidak), tampilkan pesan "saldo kurang".

Perulangan (Loop)

Perulangan adalah cara mengulang perintah otomatis. Kamu memberi tahu komputer: "kerjakan ini berkali-kali sampai batas yang saya tentukan."

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

  • Kenapa perlu: Kita tidak mungkin menulis perintah console.log sebanyak 100 kali kalau mau mencetak angka 1 sampai 100.

  • Cara kerja: * Tentukan mulai dari angka berapa.

Tentukan kapan harus berhenti. Tentukan seberapa cepat menambah angkanya (misal: tambah 1 terus).

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

querySelector mengambil elemen menggunakan aturan CSS:

const judul = document.querySelector("h1");    // Ambil tag
const tombol = document.querySelector("#btn"); // Ambil ID
const item = document.querySelector(".menu");  // Ambil Class
Poin Utama:
  • Satu Elemen: Hanya mengambil elemen pertama yang ditemukan.
  • Sintaks CSS: Gunakan # untuk ID, . untuk Class, atau nama tag langsung.
  • Jika Tidak Ada: Mengembalikan null (tidak akan error, tapi elemen tidak ditemukan).
Butuh ambil banyak elemen?

Gunakan querySelectorAll(".class") untuk mendapatkan kumpulan elemen (NodeList) sekaligus.

Mengubah Konten

Setelah elemen didapatkan, kamu bisa mengubah isinya dengan cara berikut:

judul.innerHTML = "<strong>Judul Baru</strong>"; // Render sebagai HTML
judul.textContent = "Judul Baru";              // Render sebagai teks biasa
Perbedaan Utama:
Metode Hasil Kegunaan
innerHTML Memproses tag HTML menyisipkan elemen (seperti <b> atau <span>)
textContent Menampilkan teks murni Lebih aman dan cepat untuk teks biasa

Mengubah Style

Kamu bisa memodifikasi tampilan elemen langsung melalui properti .style:

judul.style.color = "red";           // Mengubah warna teks
judul.style.backgroundColor = "blue"; // Menggunakan camelCase
judul.style.display = "none";        // Menyembunyikan elemen

Catatan Penting:

  • CamelCase: Nama properti CSS yang menggunakan dash (seperti background-color) harus ditulis dalam format camelCase (backgroundColor).
  • Langsung ke Elemen: Cara ini mengubah CSS inline (langsung di dalam tag HTML), sehingga memiliki prioritas paling tinggi.

Form

<input type="text" id="nama">
<button onclick="cek()">Submit</button>

<script>
function cek() {
  let nama = document.getElementById("nama").value;
  
  if (nama == "") {
    alert("Nama tidak boleh kosong");
  } else {
    alert("Berhasil");
  }
}
</script>

Event (Interaksi User)

Apa itu Event?

Event adalah aksi atau kejadian pada elemen yang memicu kode JavaScript untuk berjalan. Contoh umumnya:

  • click: Pengguna mengklik elemen.
  • input: Pengguna mengetik di form.
  • mouseover: Pengguna mengarahkan kursor di atas elemen.

addEventListener

Ini adalah metode untuk "mendengarkan" aksi yang dilakukan pengguna. Berikut adalah contoh kode lengkap yang bisa dijalankan:

<button id="myBtn">Klik Saya!</button>

<script>
  // 1. Ambil elemen
  const btn = document.querySelector("#myBtn");

  // 2. Tambahkan Event Listener
  btn.addEventListener("click", () => {
      alert("Tombol berhasil diklik!");
  });
</script>

Contoh

Berikut adalah contoh manipulasi DOM gabungan: ketika tombol diklik, konten teks pada elemen <h1> akan berubah secara otomatis.

<h1 id="judul">Teks Awal</h1>
<button id="tombolUbah">Ubah Teks</button>

<script>
  // 1. Ambil elemen
  const judul = document.querySelector("#judul");
  const tombol = document.querySelector("#tombolUbah");

  // 2. Tambahkan interaksi
  tombol.addEventListener("click", () => {
      judul.textContent = "Teks sudah berubah!";
      judul.style.color = "blue";
  });
</script>

Tips:

  • Parameter 1: Jenis event (misal: "click").
  • Parameter 2: Callback function (kode yang akan dijalankan saat event terjadi).

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>