Belajar Web Development

Dasar JavaScript

JavaScript (JS) adalah bahasa pemrograman yang berjalan di browser. Dengan JavaScript, halaman web yang tadinya statis bisa menjadi interaktif — tombol bisa diklik, data bisa berubah, animasi bisa jalan.

Cara Menggunakan JavaScript

1. Internal (di dalam HTML)

<script>
    alert('Halo Dunia!');
</script>

2. External (file terpisah) ✅

<!-- Di file HTML, taruh sebelum </body> -->
<script src="script.js"></script>
// Di file script.js
alert('Halo Dunia!');
Letakkan

<script> Sebelum </body> Tag <script> sebaiknya ditaruh di akhir body (sebelum </body>), agar HTML dimuat dulu sebelum JavaScript dijalankan.

Console

Console adalah tempat kita bisa melihat output dan men-debug JavaScript:

console.log('Halo!');           // Tampilkan pesan
console.log(42);                // Tampilkan angka
console.log('Nama:', 'User');    // Tampilkan beberapa nilai

Buka Developer Tools (F12) → tab Console untuk melihat hasilnya.

Variabel

Variabel adalah "wadah" untuk menyimpan data:

// let — bisa diubah nilainya
let nama = 'User';
let umur = 20;
nama = 'Ahmad';    // ✅ Boleh diubah

// const — tidak bisa diubah
const PI = 3.14;
const SITE_NAME = 'WebUser';
// PI = 3.15;      // ❌ Error! Tidak bisa diubah

// var — cara lama, hindari
var kota = 'Jakarta';   // ⚠️ Tidak direkomendasikan
let vs const
  • Gunakan const kalau nilainya tidak akan berubah
  • Gunakan let kalau nilainya bisa berubah
  • Jangan gunakan var (sudah usang) :::

Tipe Data

// String (teks)
let nama = 'User';
let pesan = "Halo semua";
let template = `Halo, ${nama}!`;   // Template literal

// Number (angka)
let umur = 20;
let harga = 15000.50;

// Boolean (benar/salah)
let sudahLogin = true;
let sudahBayar = false;

// Array (kumpulan data)
let buah = ['Apel', 'Jeruk', 'Mangga'];
console.log(buah[0]);    // 'Apel' (index mulai dari 0)
console.log(buah.length); // 3

// Object (data terstruktur)
let mahasiswa = {
    nama: 'User',
    umur: 20,
    kota: 'Jakarta',
    hobi: ['Coding', 'Membaca']
};
console.log(mahasiswa.nama);    // 'User'
console.log(mahasiswa.hobi[0]); // 'Coding'

// Null & Undefined
let kosong = null;          // Sengaja dikosongkan
let belumDiisi;             // undefined (belum diberi nilai)

Operator

// Aritmatika
let a = 10 + 5;     // 15
let b = 10 - 3;     // 7
let c = 10 * 2;     // 20
let d = 10 / 3;     // 3.333...
let e = 10 % 3;     // 1 (sisa bagi)

// Perbandingan
console.log(5 === 5);     // true (sama persis: nilai DAN tipe)
console.log(5 == '5');    // true (sama nilai saja) ⚠️
console.log(5 !== 3);     // true (tidak sama)
console.log(5 > 3);       // true
console.log(5 <= 5);      // true

// Logika
console.log(true && true);    // true (DAN)
console.log(true || false);   // true (ATAU)
console.log(!true);           // false (BUKAN)

:::warning === vs == Selalu gunakan === (strict equality) dan bukan == (loose equality). == bisa menyebabkan bug karena melakukan konversi tipe otomatis:

5 == '5'    // true ⚠️ (JavaScript mengonversi tipe)
5 === '5'   // false ✅ (tipe berbeda: number vs string)

Percabangan (If/Else)

let nilai = 85;

if (nilai >= 90) {
    console.log('Nilai: A');
} else if (nilai >= 80) {
    console.log('Nilai: B');
} else if (nilai >= 70) {
    console.log('Nilai: C');
} else {
    console.log('Nilai: D');
}
// Output: "Nilai: B"

Perulangan (Loop)

// For loop
for (let i = 1; i <= 5; i++) {
    console.log('Perulangan ke-' + i);
}

// While loop
let counter = 1;
while (counter <= 5) {
    console.log('Counter: ' + counter);
    counter++;
}

// For...of (untuk array)
let makanan = ['Nasi Goreng', 'Mie Ayam', 'Bakso'];
for (let item of makanan) {
    console.log('Menu: ' + item);
}

Function (Fungsi)

Fungsi adalah blok kode yang bisa dipanggil berulang kali:

// Membuat fungsi
function spikirkan(nama) {
    return 'Halo, ' + nama + '! Selamat datang.';
}

// Memanggil fungsi
let pesan = spikirkan('User');
console.log(pesan);  // "Halo, User! Selamat datang."

// Fungsi dengan beberapa parameter
function hitungLuas(panjang, lebar) {
    return panjang * lebar;
}

let luas = hitungLuas(10, 5);
console.log('Luas: ' + luas);  // "Luas: 50"

// Arrow function (cara singkat)
const tambah = (a, b) => a + b;
console.log(tambah(3, 4));  // 7

const spikirkan2 = (nama) => `Halo, ${nama}!`;
console.log(spikirkan2('User'));  // "Halo, User!"

Array Methods

let angka = [3, 1, 4, 1, 5, 9, 2, 6];

// Menambah item
angka.push(7);           // Tambah di akhir
angka.unshift(0);        // Tambah di awal

// Menghapus item
angka.pop();             // Hapus dari akhir
angka.shift();           // Hapus dari awal

// Mencari
let ada = angka.includes(5);     // true
let index = angka.indexOf(4);    // 2

// Filter dan Map
let besar = angka.filter(n => n > 4);     // [5, 9, 6]
let kaliDua = angka.map(n => n * 2);      // [6, 2, 8, 2, 10, 18, 4, 12]

// forEach
angka.forEach(n => {
    console.log(n);
});

Latihan: Kalkulator Sederhana

Buat file kalkulator.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f2f5;
        }
        .calculator {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 { text-align: center; color: #667eea; margin-bottom: 20px; }
        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        button {
            width: 100%;
            padding: 12px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover { background: #5a6fd6; }
        .result {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h2>Kalkulator 🧮</h2>
        <input type="number" id="angka1" placeholder="Angka pertama">
        <select id="operator">
            <option value="+">+ (Tambah)</option>
            <option value="-">- (Kurang)</option>
            <option value="*">× (Kali)</option>
            <option value="/">÷ (Bagi)</option>
        </select>
        <input type="number" id="angka2" placeholder="Angka kedua">
        <button onclick="hitung()">Hitung</button>
        <div class="result" id="hasil">0</div>
    </div>

    <script>
        function hitung() {
            let angka1 = parseFloat(document.getElementById('angka1').value);
            let angka2 = parseFloat(document.getElementById('angka2').value);
            let operator = document.getElementById('operator').value;
            let hasil;

            if (isNaN(angka1) || isNaN(angka2)) {
                document.getElementById('hasil').textContent = 'Masukkan angka!';
                return;
            }

            switch (operator) {
                case '+': hasil = angka1 + angka2; break;
                case '-': hasil = angka1 - angka2; break;
                case '*': hasil = angka1 * angka2; break;
                case '/':
                    if (angka2 === 0) {
                        document.getElementById('hasil').textContent = 'Tidak bisa bagi 0!';
                        return;
                    }
                    hasil = angka1 / angka2;
                    break;
            }

            document.getElementById('hasil').textContent = hasil;
        }
    </script>
</body>
</html>

Selanjutnya

Sekarang kamu sudah paham dasar JavaScript. Mari belajar lebih dalam tentang Manipulasi DOM → — cara JavaScript berinteraksi dengan elemen HTML di halaman.

❓ Error Umum Pemula

:::warning Sering Terjadi!

  1. Uncaught ReferenceError: X is not defined: Kamu memanggil variabel atau fungsi yang belum pernah dibuat. Ingat, JavaScript itu case-sensitive (huruf besar/kecil berpengaruh). Variabel Nama berbeda dengan nama.
  2. Cannot read properties of null (reading 'innerHTML'): Penyebab: JavaScript mencoba mengubah elemen HTML sebelum elemen tersebut diload oleh browser. Solusi: Pastikan meletakkan tag <script> tepat di atas </body> penutup, BUKAN di dalam <head>.
  3. Tanda Kutip String Tidak Konsisten: Membuka string dengan kutip satu ' tapi menutupnya dengan kutip dua ". Harus konsisten! :::