Belajar JavaScript Dasar untuk Membuat Halaman Web Interaktif

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan di browser. JavaScript membuat halaman web bisa merespons klik, input, validasi form, animasi ringan, dan perubahan konten tanpa reload.

Menulis JavaScript

JavaScript bisa ditulis langsung di HTML memakai tag script atau dipisah ke file .js.

<button id="tombol">Klik Saya</button>
<script>
    document.getElementById('tombol').addEventListener('click', function () {
        alert('Tombol diklik');
    });
</script>

Variabel

Gunakan let untuk nilai yang bisa berubah dan const untuk nilai yang tetap.

const nama = 'Sinta';
let umur = 21;

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

Tipe Data

• string untuk teks.
• number untuk angka.
• boolean untuk benar atau salah.
• array untuk daftar data.
• object untuk data yang punya properti.

Function

Function membantu menyimpan logika agar bisa dipakai berulang.

function hitungTotal(harga, jumlah) {
    return harga * jumlah;
}

console.log(hitungTotal(10000, 3));

Array dan Object

Array cocok untuk daftar, sedangkan object cocok untuk data yang punya detail.

const produk = ['Buku', 'Pulpen', 'Tas'];
const user = {
    nama: 'Raka',
    role: 'Admin'
};

console.log(produk[0]);
console.log(user.nama);

DOM

DOM adalah representasi halaman HTML di browser. Dengan DOM, JavaScript bisa mengubah teks, class, style, dan isi halaman.

<p id="pesan">Belum ada pesan</p>
<button id="ubah">Ubah Pesan</button>

const pesan = document.querySelector('#pesan');
const tombol = document.querySelector('#ubah');

tombol.addEventListener('click', function () {
    pesan.textContent = 'Pesan berhasil diubah';
});

Validasi Form Sederhana

Validasi membantu pengguna tahu jika ada input yang belum lengkap.

const form = document.querySelector('#form-login');
const email = document.querySelector('#email');

form.addEventListener('submit', function (event) {
    if (email.value.trim() === '') {
        event.preventDefault();
        alert('Email wajib diisi');
    }
});

Tips Belajar JavaScript

• Pahami variabel, function, array, object, dan event terlebih dahulu.
• Latihan dengan membuat tombol, modal, tab, dan validasi form.
• Gunakan console browser untuk melihat error.
• Setelah dasar kuat, lanjut ke fetch API dan framework frontend.