Belajar JavaScript Dasar untuk Pemula: Panduan Lengkap dan Praktik

MWI – Selamat sore sobat MuSa, mari belajar bersama untuk materi JavaScript. Apakah Anda baru saja memulai perjalanan di dunia web development? Jika ya, memahami HTML dan CSS saja belum cukup. Untuk membuat website yang hidup, interaktif, dan dinamis, Anda perlu belajar JavaScript dasar.

JavaScript adalah salah satu bahasa pemrograman paling populer di dunia. Hampir seluruh website modern menggunakan JavaScript untuk menangani interaksi pengguna—mulai dari tombol yang yang kita klik, formulir pendaftaran, hingga animasi di layar.

Dalam artikel ini, kita akan membahas materi JavaScript secara bertahap, lengkap dengan contoh kode dan latihan praktiknya.

Apa Itu JavaScript dan Mengapa Penting?

JavaScript adalah bahasa pemrograman tingkat tinggi yang berjalan di sisi klien (client-side browser) untuk mengatur perilaku halaman web.

Jika dibayangkan sebagai sebuah bangunan rumah:

1. HTML adalah struktur bangunannya (dinding, pintu, jendela).
2. CSS adalah desain dan catnya (warna, tata letak, keindahan).
3. JavaScript adalah sistem kelistrikannya (tombol lampu yang menyala saat dipencet, pintu otomatis, dll).

Cara Menyisipkan JavaScript di HTML

Ada dua cara paling umum untuk memasukkan kode JavaScript ke halaman web:

• Internal JavaScript: Ditulis di dalam tag <script> pada file HTML.
• External JavaScript: Ditulis pada file terpisah berekstensi .js lalu dihubungkan menggunakan tag <script src="namafile.js"></script>.

1. Variabel dan Tipe Data pada JavaScript

Saat belajar JavaScript dasar, konsep pertama yang wajib kita pahami adalah variabel. Variabel berfungsi sebagai wadah untuk menyimpan data.

Di JavaScript modern (ES6+), penulisan variabel menggunakan perintah let dan const:

• let: Perintah untuk data yang nilainya bisa berubah.
• const: Perintah untuk data yang nilainya tetap (konstanta).

JavaScript

let namaSiswa = "Budi"; // Tipe data String (teks)
let usia = 16;         // Tipe data Number (angka)
const isLulus = true;  // Tipe data Boolean (true/false)

2. Struktur Kontrol: Percabangan dan Perulangan

Logika pemrograman kita atur melalui struktur kontrol agar program dapat mengambil keputusan atau menjalankan instruksi berulang kali.

Percabangan (if...else)

Percabangan kita gunakan untuk mengeksekusi kode berdasarkan kondisi tertentu.

JavaScript

let nilai = 80;

if (nilai >= 75) {
    console.log("Selamat, Anda Lulus!");
} else {
    console.log("Mohon maaf, Anda harus meredam ujian.");
}

Perulangan (for)

Perulangan (loop) digunakan saat kita ingin menjalankan kode yang sama berkali-kali tanpa menulisnya secara manual.

JavaScript

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

3. Fungsi (Function) dalam JavaScript

Fungsi adalah blok kode yang kita buat untuk menjalankan tugas khusus dan dapat kita gunakan kembali (reusable) kapan saja.

JavaScript

// Deklarasi fungsi
function sapa(nama) {
    return "Halo, " + nama + "! Selamat belajar JavaScript.";
}

// Memanggil fungsi
let pesan = sapa("Andi");
console.log(pesan); // Output: Halo, Andi! Selamat belajar JavaScript.

4. Manipulasi DOM (Document Object Model)

Bagian paling seru dari belajar JavaScript dasar adalah Manipulasi DOM. DOM adalah antarmuka yang memungkinkan JavaScript membaca dan mengubah struktur HTML serta style CSS secara langsung.

Beberapa perintah DOM yang sering kita gunakan:

• document.getElementById("id"): Mengambil elemen berdasarkan atribut id.
• element.innerHTML: Mengisi atau mengubah konten teks/HTML di dalam elemen.
• element.style.property: Mengubah tampilan gaya CSS elemen secara dinamis.

🛠️ Praktik Mandiri: Membuat Tombol Menyapa dan Ubah Warna

Agar makin paham, mari kita praktikkan materi di atas dengan membuat proyek web interaktif sederhana.

1. File HTML (index.html)

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktik Belajar JavaScript Dasar</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
            background-color: #f4f4f9;
            transition: background-color 0.5s;
        }
        .card {
            background: #ffffff;
            padding: 30px;
            border-radius: 8px;
            display: inline-block;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
        }
        input, button {
            padding: 10px;
            margin: 10px 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>

    <div class="card">
        <h2>Latihan JavaScript Dasar</h2>
        <input type="text" id="namaInput" placeholder="Masukkan nama Anda...">
        <br>
        <button id="sapaBtn">Sapa Saya!</button>
        <button id="warnaBtn">Ubah Warna Background</button>
        
        <h3 id="hasilOutput"></h3>
    </div>

    <!-- Hubungkan file JavaScript -->
    <script src="script.js"></script>
</body>
</html>

2. File JavaScript (script.js)

JavaScript

// 1. Mengambil elemen HTML dengan DOM
const inputNama = document.getElementById("namaInput");
const tombolSapa = document.getElementById("sapaBtn");
const tombolWarna = document.getElementById("warnaBtn");
const outputText = document.getElementById("hasilOutput");

// 2. Menambahkan aksi saat tombol Sapa diklik
tombolSapa.addEventListener("click", function() {
    let nama = inputNama.value;
    
    // Validasi kondisi jika input kosong
    if (nama === "") {
        outputText.innerHTML = "Harap masukkan nama Anda terlebih dahulu!";
        outputText.style.color = "red";
    } else {
        outputText.innerHTML = "Halo " + nama + ", selamat belajar JavaScript dasar!";
        outputText.style.color = "green";
    }
});

// 3. Menambahkan aksi untuk mengubah warna background secara acak
tombolWarna.addEventListener("click", function() {
    const pilihanWarna = ["#ff9999", "#99ff99", "#9999ff", "#ffff99", "#ff99ff"];
    let warnaAcak = pilihanWarna[Math.floor(Math.random() * pilihanWarna.length)];
    
    document.body.style.backgroundColor = warnaAcak;
});

Kesimpulan

Belajar JavaScript dasar adalah langkah awal yang sangat penting jika Anda ingin menjadi seorang Web Developer profesional. Dengan memahami variabel, kondisi, fungsi, dan manipulasi DOM, Anda sudah bisa membuat aplikasi web sederhana yang interaktif.

Kunci utama menguasai JavaScript adalah terus berlatih dan mencoba membangun mini proyek secara konsisten. Selamat mencoba dan terus berkreasi!