JavaScript Basic

1. Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang dipakai untuk membuat website menjadi interaktif. Tanpa JavaScript, website biasanya hanya tampilan statis.

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

2. Cara Pakai JavaScript

JavaScript bisa ditulis dengan 2 cara:

📌 Internal Script

<script>
  console.log("Halo dari JS");
</script>

📌 External Script (Recommended)

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

3. Variable (var, let, const)

Variable digunakan untuk menyimpan data. Di JavaScript ada 3 cara:

• var → versi lama (jarang dipakai)
• let → bisa berubah
• const → tidak bisa berubah

let nama = "Ilyasa";
nama = "Ramadhany";

const umur = 17;
// umur = 18; ❌ error

console.log(nama);
console.log(umur);

4. Tipe Data

Jenis tipe data dasar yang wajib kamu tau:

Cek tipe data dengan typeof:

let angka = 10;
console.log(typeof angka); // number

5. Operator

Operator dipakai untuk perhitungan atau perbandingan:

• Aritmatika: + - * /
• Perbandingan: == === != > <
• Logika: && || !

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a > b); // true
console.log(a === 10); // true

6. If Else & Switch

Conditional dipakai buat pengambilan keputusan.

let nilai = 85;

if (nilai >= 80) {
  console.log("Lulus dengan nilai bagus!");
} else {
  console.log("Belajar lagi bro 😭");
}

Contoh Switch:

let hari = "Senin";

switch (hari) {
  case "Senin":
    console.log("Awal minggu 😔");
    break;
  case "Jumat":
    console.log("Jumat berkah 😎");
    break;
  default:
    console.log("Hari biasa");
}

7. Looping

Loop digunakan untuk mengulang proses.

📌 For Loop

for (let i = 1; i <= 5; i++) {
  console.log("Loop ke-" + i);
}

📌 While Loop

let i = 1;

while (i <= 3) {
  console.log("While ke-" + i);
  i++;
}

8. Function

Function adalah blok kode yang bisa dipanggil berkali-kali.

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

console.log(salam("Ilyasa"));

Arrow Function:

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

console.log(tambah(5, 3));

9. DOM Basic

DOM (Document Object Model) adalah cara JavaScript mengakses elemen HTML.

// ambil elemen
const title = document.querySelector("h1");

// ubah teks
title.textContent = "Judul baru!";

// ubah style
title.style.color = "violet";

Event click:

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

btn.addEventListener("click", () => {
  alert("Button diklik!");
});

10. Challenge