Fungsi dan Event

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu dan dapat dipanggil ketika dibutuhkan.

Deklarasi Fungsi

Ada beberapa cara untuk mendeklarasikan fungsi di JavaScript:

1. Function Declaration

// Deklarasi fungsi
function sapa(nama) {
    return `Halo, ${nama}!`;
}

// Memanggil fungsi
console.log(sapa('Budi')); // "Halo, Budi!"

2. Function Expression

// Fungsi sebagai ekspresi
const sapa = function(nama) {
    return `Halo, ${nama}!`;
};

console.log(sapa('Ani')); // "Halo, Ani!"

3. Arrow Function (ES6)

// Arrow function
const sapa = (nama) => {
    return `Halo, ${nama}!`;
};

// Bentuk lebih singkat
const sapaSingkat = nama => `Halo, ${nama}!`;

console.log(sapa('Citra')); // "Halo, Citra!"
console.log(sapaSingkat('Dodi')); // "Halo, Dodi!"

Perbedaan Penting: Function declaration bisa dipanggil sebelum deklarasi (hoisting), sedangkan function expression dan arrow function tidak.

Parameter dan Argumen

Fungsi dapat menerima parameter (input) dan mengembalikan nilai (output).

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

// Memanggil dengan argumen
console.log(hitungLuas(5, 3)); // 15

// Parameter default (ES6)
function sapa(nama = 'Tamu') {
    return `Halo, ${nama}!`;
}

console.log(sapa()); // "Halo, Tamu!"
console.log(sapa('Budi')); // "Halo, Budi!"

Rest Parameter (ES6)

function jumlahkan(...angka) {
    return angka.reduce((total, num) => total + num, 0);
}

console.log(jumlahkan(1, 2, 3)); // 6
console.log(jumlahkan(4, 5, 6, 7, 8)); // 30

Scope dan Closure

Variable Scope

let globalVar = 'Akses global';

function contohScope() {
    let localVar = 'Akses lokal';
    console.log(globalVar); // Bisa diakses
    console.log(localVar); // Bisa diakses
}

contohScope();
console.log(globalVar); // Bisa diakses
// console.log(localVar); // Error: localVar tidak terdefinisi

Closure

function buatPenghitung() {
    let hitung = 0;
    
    return function() {
        hitung++;
        return hitung;
    };
}

const penghitung = buatPenghitung();
console.log(penghitung()); // 1
console.log(penghitung()); // 2
console.log(penghitung()); // 3

Event Handling

Event adalah tindakan atau kejadian yang terjadi di halaman web, seperti klik, hover, submit form, dll.

Menangani Event

// 1. Inline event handler (tidak direkomendasikan)
<button onclick="alert('Diklik!')">Klik Saya</button>

// 2. Event handler properti
const btn = document.getElementById('myBtn');
btn.onclick = function() {
    alert('Tombol diklik!');
};

// 3. addEventListener (direkomendasikan)
btn.addEventListener('click', function() {
    alert('Tombol diklik!');
});

Jenis-jenis Event

Mouse Events: click, dblclick, mouseover, mouseout, mousemove
Keyboard Events: keydown, keyup, keypress
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll

// Contoh event listener
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Mencegah form submit default
    console.log('Form disubmit!');
});

window.addEventListener('resize', function() {
    console.log('Ukuran window berubah');
});

Praktik Mandiri

Coba fungsi dan event berikut:

// Fungsi untuk menghitung diskon
function hitungDiskon(harga, persenDiskon = 10) {
    return harga * (persenDiskon / 100);
}

// Fungsi untuk menampilkan hasil
function tampilkanHasil() {
    const harga = parseFloat(document.getElementById('harga').value);
    const diskon = parseFloat(document.getElementById('diskon').value) || 10;
    
    const nilaiDiskon = hitungDiskon(harga, diskon);
    const totalBayar = harga - nilaiDiskon;
    
    document.getElementById('hasil').innerHTML = `
        <p>Harga Awal: Rp${harga.toLocaleString('id-ID')}</p>
        <p>Diskon (${diskon}%): Rp${nilaiDiskon.toLocaleString('id-ID')}</p>
        <p><strong>Total Bayar: Rp${totalBayar.toLocaleString('id-ID')}</strong></p>
    `;
}

// Menambahkan event listener
document.getElementById('hitungBtn').addEventListener('click', tampilkanHasil);

Kalkulator Diskon

Harga:

Diskon (%):