JavaScript untuk Pemula: Panduan Lengkap

<!-- 1. Inline JavaScript (langsung di atribut) — Tidak direkomendasikan -->
<button onclick="alert('Hello!')">Klik Saya</button>

<!-- 2. Internal JavaScript (di <script> tag) -->
<script>
    console.log('Hello World!');
    document.title = 'Halaman Baru';
</script>

<!-- 3. External JavaScript (file .js terpisah) — Paling direkomendasikan -->
<script src="app.js"></script>

<!-- Tips: gunakan defer untuk load selesai setelah HTML -->
<script src="app.js" defer></script>

// Buka Developer Tools (F12) → Tab Console

// Mencetak teks ke console
console.log('Hello World!');
console.log('Nama saya:', 'Beebane');

// Peringatan
console.warn('Ini peringatan!');
console.error('Ini error!');

// Menghitung waktu eksekusi
console.time('loop');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('loop'); // → loop: 5.2ms

// Alert (popup di browser)
alert('Selamat datang di tutorial JavaScript!');

// ===== let: bisa diubah nilainya =====
let nama = 'Beebane';
nama = 'BeebaneLabs';  // ✅ Boleh diubah
console.log(nama);     // → 'BeebaneLabs'

// ===== const: TIDAK bisa diubah nilainya =====
const PI = 3.14159;
// PI = 3.14;  // ❌ Error! Assignment to constant variable
console.log(PI);  // → 3.14159

// ===== var: cara lama (hindari penggunaan) =====
var umur = 25;    // ⚠️ Punya function scope, bukan block scope

// ===== Naming Rules =====
// ✅ Valid:
let namaLengkap = 'John';     // camelCase (direkomendasikan)
let _privateVar = true;       // underscore prefix
let $hargaBarang = 50000;     // dollar prefix

// ❌ Invalid:
// let 2nama = 'error';      // Tidak boleh angka di awal
// let nama-lengkap = 'err';  // Tidak boleh dash
// let class = 'error';       // Tidak boleh reserved word

// ===== PRIMITIVE TYPES =====

// 1. String (teks)
let teks = 'Hello World';
let teks2 = "Ini juga string";
let teks3 = `Template literal: ${teks}`;  // Backtick

// 2. Number (angka — integer dan decimal)
let umur = 25;
let harga = 99.99;
let negatif = -10;
let infinity = Infinity;
let notANumber = NaN;  // Hasil dari operasi yang gagal

// 3. Boolean (true/false)
let isActive = true;
let isLoggedIn = false;

// 4. Undefined (belum diberi nilai)
let belumDiisi;
console.log(belumDiisi);  // → undefined

// 5. Null (sengaja dikosongkan)
let dataKosong = null;

// 6. Symbol (unique identifier — jarang untuk pemula)
let id = Symbol('unique');

// 7. BigInt (angka sangat besar)
let bigNumber = 9007199254740991n;

// ===== Cek Tipe Data =====
console.log(typeof 'Hello');    // → "string"
console.log(typeof 42);        // → "number"
console.log(typeof true);      // → "boolean"
console.log(typeof undefined); // → "undefined"
console.log(typeof null);      // → "object" (bug lama di JS)
console.log(typeof [1,2,3]);   // → "object"

// ===== Aritmatika =====
let a = 10, b = 3;
console.log(a + b);   // 13 (penjumlahan)
console.log(a - b);   // 7  (pengurangan)
console.log(a * b);   // 30 (perkalian)
console.log(a / b);   // 3.33 (pembagian)
console.log(a % b);   // 1  (sisa bagi / modulus)
console.log(a ** b);   // 1000 (pangkat)

// ===== Perbandingan =====
console.log(5 == '5');    // true  (loose equality — mengkonversi tipe)
console.log(5 === '5');   // false (strict equality — cek tipe juga)
console.log(5 != '5');    // false
console.log(5 !== '5');   // true
console.log(10 > 5);     // true
console.log(10 <= 10);   // true

// ===== Logical =====
console.log(true && false);  // false (AND — keduanya harus true)
console.log(true || false);   // true  (OR — salah satu true)
console.log(!true);           // false (NOT — membalik nilai)

// ===== Template Literal =====
let nama = 'Beebane';
let umur = 25;
console.log(`Nama: ${nama}, Umur: ${umur} tahun`);
// → "Nama: Beebane, Umur: 25 tahun"

// ===== 1. Function Declaration =====
function sapaan(nama) {
    return `Halo, ${nama}! Selamat datang.`;
}
console.log(sapaan('Beebane'));  // → "Halo, Beebane! Selamat datang."

// ===== 2. Function Expression =====
const tambah = function(a, b) {
    return a + b;
};
console.log(tambah(5, 3));  // → 8

// ===== 3. Arrow Function (ES6 — modern) =====
const kali = (a, b) => {
    return a * b;
};

// Arrow function satu baris (implicit return)
const bagi = (a, b) => a / b;
const kuadrat = x => x * x;

console.log(kali(4, 5));    // → 20
console.log(bagi(10, 2));   // → 5
console.log(kuadrat(7));    // → 49

// ===== 4. Default Parameters =====
function buatUser(nama, role = 'member') {
    return { nama, role };
}
console.log(buatUser('Beebane'));           // { nama: 'Beebane', role: 'member' }
console.log(buatUser('Admin', 'admin'));    // { nama: 'Admin', role: 'admin' }

// ===== 5. Rest Parameters (...args) =====
function jumlahkan(...angka) {
    return angka.reduce((total, n) => total + n, 0);
}
console.log(jumlahkan(1, 2, 3, 4, 5));  // → 15

// ===== 6. Callback Function =====
function prosesData(data, callback) {
    const hasil = data.toUpperCase();
    callback(hasil);
}
prosesData('hello world', (hasil) => {
    console.log(hasil);  // → "HELLO WORLD"
});

// ===== 7. Immediately Invoked Function (IIFE) =====
(function() {
    const pesan = 'Kode ini langsung dijalankan!';
    console.log(pesan);
})();

// Closure: fungsi yang "mengingat" variabel dari lingkup luarnya
function buatCounter() {
    let count = 0;  // Variabel ini "tertangkap" oleh inner function

    return function() {
        count++;
        return count;
    };
}

const counter = buatCounter();
console.log(counter());  // → 1
console.log(counter());  // → 2
console.log(counter());  // → 3
// count tidak bisa diakses dari luar — tapi inner function tetap bisa!

// ===== getElementById — pilih berdasarkan ID =====
const header = document.getElementById('header');

// ===== querySelector — pilih dengan selector CSS (elemen pertama) =====
const judul = document.querySelector('h1');
const card = document.querySelector('.card');
const btnKirim = document.querySelector('#btn-kirim');
const emailInput = document.querySelector('input[type="email"]');

// ===== querySelectorAll — pilih semua yang cocok (NodeList) =====
const semuaParagraf = document.querySelectorAll('p');
const semuaCard = document.querySelectorAll('.card');

// Iterasi NodeList
semuaParagraf.forEach((p, index) => {
    console.log(`Paragraf ${index}:`, p.textContent);
});

// ===== getElementByClassName — HTMLCollection (live) =====
const items = document.getElementsByClassName('item');

// ===== getElementsByTagName =====
const semuaDiv = document.getElementsByTagName('div');

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

// ===== Mengubah Teks =====
judul.textContent = 'Judul Baru';          // Teks murni (aman)
judul.innerHTML = 'Judul <em>baru</em>';  // Bisa HTML (hati-hati XSS)

// ===== Mengubah Style =====
judul.style.color = '#2563eb';
judul.style.fontSize = '2rem';
judul.style.backgroundColor = '#f0f0f0';
judul.style.padding = '1rem';

// ===== Mengubah Class =====
judul.classList.add('active');         // Tambah class
judul.classList.remove('hidden');      // Hapus class
judul.classList.toggle('dark-mode');   // Toggle class
judul.classList.replace('old', 'new'); // Ganti class

if (judul.classList.contains('active')) {
    console.log('Judul sedang aktif!');
}

// ===== Mengubah Atribut =====
const gambar = document.querySelector('img');
gambar.setAttribute('src', 'foto-baru.jpg');
gambar.setAttribute('alt', 'Deskripsi baru');
gambar.removeAttribute('hidden');

const link = document.querySelector('a');
console.log(link.getAttribute('href'));  // Baca atribut

// ===== Mengubah Dataset (data-*) =====
// HTML: <div data-id="123" data-type="premium"></div>
const el = document.querySelector('div');
console.log(el.dataset.id);    // → "123"
console.log(el.dataset.type);  // → "premium"
el.dataset.status = 'active';  // Tambah data-status="active"

// ===== Membuat Elemen Baru =====
const kartu = document.createElement('div');
kartu.className = 'card';
kartu.innerHTML = `
    <h3>Judul Kartu</h3>
    <p>Ini adalah kartu baru yang dibuat dengan JavaScript.</p>
    <button onclick="hapusKartu(this)">Hapus</button>
`;

// Menambahkan ke DOM
const container = document.querySelector('.container');
container.appendChild(kartu);           // Di akhir
container.insertBefore(kartu, judul);   // Sebelum elemen tertentu
container.prepend(kartu);              // Di awal

// Modern method (lebih fleksibel)
container.append(kartu, kartu2, kartu3);  // Bisa banyak elemen
judul.after(kartu);                       // Setelah judul
judul.before(kartu);                      // Sebelum judul

// ===== Menghapus Elemen =====
kartu.remove();  // Modern (sederhana)
container.removeChild(kartu);  // Lama

// ===== addEventListener (direkomendasikan) =====
const tombol = document.querySelector('#btn-kirim');

tombol.addEventListener('click', function(event) {
    console.log('Tombol diklik!');
    console.log('Target:', event.target);
    console.log('Posisi:', event.clientX, event.clientY);
});

// ===== Event Types yang Umum =====

// Click
tombol.addEventListener('click', () => console.log('Click!'));

// Double click
tombol.addEventListener('dblclick', () => console.log('Double click!'));

// Mouse events
tombol.addEventListener('mouseenter', () => console.log('Mouse masuk'));
tombol.addEventListener('mouseleave', () => console.log('Mouse keluar'));

// Keyboard events
document.addEventListener('keydown', (e) => {
    console.log(`Key: ${e.key}, Code: ${e.code}`);
    if (e.key === 'Escape') {
        closeModal();
    }
    if (e.key === 'Enter') {
        submitForm();
    }
});

// Input events
const input = document.querySelector('#search');
input.addEventListener('input', (e) => {
    console.log('Nilai:', e.target.value);
    // Cocok untuk real-time search / filter
});

// Focus & Blur
input.addEventListener('focus', () => console.log('Input aktif'));
input.addEventListener('blur', () => console.log('Input tidak aktif'));

// Scroll
window.addEventListener('scroll', () => {
    console.log('Scroll Y:', window.scrollY);
});

// Form submit
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
    e.preventDefault();  // Mencegah reload halaman!
    const formData = new FormData(form);
    console.log(Object.fromEntries(formData));
});

// ❌ Tidak efisien: listener pada setiap item
document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('click', handleItemClick);
});

// ✅ Event Delegation: satu listener pada parent
const list = document.querySelector('.item-list');
list.addEventListener('click', (event) => {
    const item = event.target.closest('.item');
    if (!item) return;  // Klik bukan pada item

    console.log('Item diklik:', item.textContent);
    console.log('Index:', item.dataset.index);
});

// Keuntungan: elemen yang ditambahkan secara dinamis
// tetap bisa ditangkap tanpa perlu listener baru!

// Membuat array
const buah = ['apel', 'jeruk', 'mangga', 'pisang'];
const angka = [1, 2, 3, 4, 5];
const campuran = ['teks', 42, true, null, { nama: 'Beebane' }];

// Mengakses elemen (index mulai dari 0)
console.log(buah[0]);    // → 'apel'
console.log(buah[2]);    // → 'mangga'
console.log(buah.length); // → 4

// Mengubah elemen
buah[1] = 'anggur';

// Menambah elemen
buah.push('semangka');      // Tambah di akhir
buah.unshift('strawberry'); // Tambah di awal

// Menghapus elemen
buah.pop();                 // Hapus terakhir
buah.shift();               // Hapus pertama
buah.splice(1, 1);          // Hapus 1 elemen di index 1

const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// ===== map: transformasi setiap elemen =====
const kuadrat = angka.map(n => n * n);
// → [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

const namaList = ['bee', 'bane', 'labs'];
const uppercased = namaList.map(n => n.toUpperCase());
// → ['BEE', 'BANE', 'LABS']

// ===== filter: ambil elemen yang memenuhi syarat =====
const genap = angka.filter(n => n % 2 === 0);
// → [2, 4, 6, 8, 10]

const besar = angka.filter(n => n > 5);
// → [6, 7, 8, 9, 10]

// ===== reduce: akumulasi menjadi satu nilai =====
const total = angka.reduce((acc, n) => acc + n, 0);
// → 55

const max = angka.reduce((max, n) => n > max ? n : max, angka[0]);
// → 10

// ===== find: cari elemen pertama yang cocok =====
const cari = angka.find(n => n > 5);
// → 6

// ===== some & every =====
angka.some(n => n > 8);   // → true (ada yang lebih dari 8)
angka.every(n => n > 0);  // → true (semua lebih dari 0)

// ===== sort =====
const huruf = ['c', 'a', 'b'];
huruf.sort();  // → ['a', 'b', 'c']

const produk = [
    { nama: 'Laptop', harga: 12000000 },
    { nama: 'Mouse', harga: 150000 },
    { nama: 'Keyboard', harga: 850000 }
];
produk.sort((a, b) => a.harga - b.harga);  // Sortir berdasarkan harga

// ===== Chaining (bergabung) =====
const hasil = angka
    .filter(n => n % 2 === 0)     // Ambil genap: [2,4,6,8,10]
    .map(n => n * 3)              // Kali 3: [6,12,18,24,30]
    .reduce((sum, n) => sum + n, 0);  // Total: 90
console.log(hasil);  // → 90

// ===== Destructuring =====
const [pertama, kedua, ...sisanya] = [1, 2, 3, 4, 5];
console.log(pertama);  // → 1
console.log(kedua);    // → 2
console.log(sisanya);  // → [3, 4, 5]

// ===== Spread Operator =====
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const gabungan = [...arr1, ...arr2];  // → [1, 2, 3, 4, 5, 6]

// ===== Membuat Object =====
const user = {
    nama: 'Beebane',
    umur: 25,
    email: 'bee@example.com',
    isActive: true,
    hobi: ['coding', 'gaming', 'reading'],
    alamat: {
        kota: 'Jakarta',
        provinsi: 'DKI Jakarta'
    }
};

// ===== Mengakses Properti =====
console.log(user.nama);           // → 'Beebane' (dot notation)
console.log(user['email']);        // → 'bee@example.com' (bracket notation)
console.log(user.alamat.kota);     // → 'Jakarta' (nested)
console.log(user.hobi[0]);         // → 'coding'

// ===== Mengubah & Menambah Properti =====
user.umur = 26;                    // Ubah properti
user.phone = '08123456789';       // Tambah properti baru
delete user.isActive;             // Hapus properti

// ===== Object Methods =====
const kalkulator = {
    nama: 'Kalkulator',
    tambah(a, b) { return a + b; },
    kurang(a, b) { return a - b; },
    kali(a, b) { return a * b; }
};
console.log(kalkulator.tambah(5, 3));  // → 8

// ===== Destructuring =====
const { nama, umur, email } = user;
console.log(nama, umur);

// Dengan rename
const { nama: namaLengkap, umur: usia } = user;

// Dengan default value
const { role = 'member' } = user;

// Destructuring nested
const { alamat: { kota } } = user;
console.log(kota);  // → 'Jakarta'

// ===== Object Methods =====
const keys = Object.keys(user);        // ['nama', 'umur', 'email', ...]
const values = Object.values(user);    // ['Beebane', 25, 'bee@...', ...]
const entries = Object.entries(user);  // [['nama','Beebane'], ['umur',25], ...]

// ===== Spread & Merge =====
const defaults = { theme: 'dark', lang: 'id', fontSize: 16 };
const userPrefs = { theme: 'light', fontSize: 18 };
const config = { ...defaults, ...userPrefs };
// → { theme: 'light', lang: 'id', fontSize: 18 }

// ===== Optional Chaining (?.) =====
const kota = user?.alamat?.kota;        // → 'Jakarta'
const negara = user?.alamat?.negara;    // → undefined (tidak error!)

// ===== Loop Object =====
for (const [key, value] of Object.entries(user)) {
    console.log(`${key}: ${value}`);
}

// ===== Promise: representasi operasi yang belum selesai =====
// States: pending → fulfilled (berhasil) / rejected (gagal)

// Membuat Promise
function ambilData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId > 0) {
                resolve({ id: userId, nama: 'Beebane' });
            } else {
                reject(new Error('User ID tidak valid'));
            }
        }, 1000);  // Simulasi delay 1 detik
    });
}

// Menggunakan Promise dengan .then()
ambilData(1)
    .then(user => console.log('User:', user))
    .catch(error => console.error('Error:', error.message))
    .finally(() => console.log('Selesai!'));

// Promise.all — jalankan beberapa promise sekaligus
const promise1 = ambilData(1);
const promise2 = ambilData(2);
const promise3 = ambilData(3);

Promise.all([promise1, promise2, promise3])
    .then(users => console.log('Semua user:', users))
    .catch(error => console.error('Error:', error.message));

// async/await: cara lebih bersih untuk menggunakan Promise
// async di depan function, await di depan Promise

async function tampilkanUser() {
    try {
        // await akan "menunggu" promise selesai
        const user1 = await ambilData(1);
        console.log('User 1:', user1);

        const user2 = await ambilData(2);
        console.log('User 2:', user2);

        const user3 = await ambilData(3);
        console.log('User 3:', user3);

        return [user1, user2, user3];
    } catch (error) {
        console.error('Gagal mengambil data:', error.message);
    } finally {
        console.log('Proses selesai');
    }
}

// Memanggil async function
tampilkanUser().then(users => {
    console.log('Semua user berhasil diambil');
});

// Parallel execution dengan async/await
async function ambilSemuaUser() {
    try {
        // Jalankan semua promise sekaligus (lebih cepat!)
        const [user1, user2, user3] = await Promise.all([
            ambilData(1),
            ambilData(2),
            ambilData(3)
        ]);
        console.log('Semua user:', user1, user2, user3);
    } catch (error) {
        console.error('Error:', error.message);
    }
}

// ===== Fetch dasar — GET request =====
async function ambilPostingan() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

        // Cek apakah response berhasil (status 200-299)
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();  // Parse JSON
        console.log('Judul:', data.title);
        console.log('Isi:', data.body);
        return data;
    } catch (error) {
        console.error('Gagal mengambil data:', error.message);
    }
}

// ===== Mengambil daftar data =====
async function ambilSemuaPost() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();

    // Tampilkan di halaman
    const container = document.querySelector('#posts');
    container.innerHTML = posts
        .slice(0, 10)  // Ambil 10 pertama
        .map(post => `
            <div class="card">
                <h3>${post.title}</h3>
                <p>${post.body}</p>
            </div>
        `)
        .join('');
}

// ===== POST request — mengirim data ke server =====
async function buatPost(judul, konten) {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: judul,
                body: konten,
                userId: 1
            })
        });

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        console.log('Post berhasil dibuat:', data);
        return data;
    } catch (error) {
        console.error('Gagal membuat post:', error.message);
    }
}

// ===== PUT (update) =====
async function updatePost(id, dataBaru) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dataBaru)
    });
    return await response.json();
}

// ===== DELETE =====
async function hapusPost(id) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
        method: 'DELETE'
    });
    return response.ok;
}

// ===== Fetch dengan Query Parameters =====
async function cariPost(userId) {
    const params = new URLSearchParams({ userId });
    const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts?${params}`
    );
    return await response.json();
}

// Contoh penggunaan
document.querySelector('#btn-load').addEventListener('click', async () => {
    const btn = document.querySelector('#btn-load');
    btn.textContent = 'Loading...';
    btn.disabled = true;

    try {
        await ambilSemuaPost();
    } finally {
        btn.textContent = 'Load Posts';
        btn.disabled = false;
    }
});