Tutorial JavaScript Dasar untuk Pemula: Panduan dan Contoh

mwi – Halo Sobat Pembelajar bersama MuSa, bertemu kembali pada seri JavaScript kali ini, kita akan membahas Javascript dalam bentuk teori dan penggunaannya yah.

Ingin membuat website Anda menjadi lebih interaktif, hidup, dan dinamis? Jawabannya ada pada JavaScript. Bersama HTML dan CSS, JavaScript menjadi fondasi utama dalam dunia web development.

Jika Anda baru mulai belajar memprogram, tutorial JavaScript dasar ini dirangkum khusus untuk membantu Anda memahami konsep esensial dari nol hingga mampu membuat proyek web sederhana.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman tingkat tinggi yang digunakan oleh browser untuk mengatur perilaku elemen dalam halaman web.

Sebagai analogi sederhana:

1. HTML adalah kerangka atau struktur bangunan rumah.
2. CSS adalah cat dan desain interior rumah.
3. JavaScript adalah sistem kelistrikan dan otomatisasi di dalam rumah.

1. Cara Menuliskan JavaScript

Ada dua cara utama menyisipkan kode JavaScript ke dalam dokumen web:

• Internal: Menuliskan kode di dalam tag <script> pada file HTML yang sama.
• External: Membuat file khusus berformat .js (misalnya script.js) lalu memanggilnya di dalam file HTML menggunakan atribut src.

2. Variabel dan Tipe Data

Variabel berfungsi sebagai wadah untuk menyimpan suatu nilai atau data. Pada JavaScript modern, kita menggunakan kata kunci let atau const.

JavaScript

let namaSiswa = "Andi"; // Tipe data String (Teks)
let usia = 17;         // Tipe data Number (Angka)
const statusAktif = true; // Tipe data Boolean (True/False)

3. Struktur Kontrol (Percabangan)

Agar program dapat mengambil keputusan berdasarkan kondisi tertentu, kita menggunakan struktur percabangan seperti if dan else.

JavaScript

let nilaiUjian = 80;

if (nilaiUjian >= 75) {
    console.log("Selamat, Anda dinyatakan Lulus!");
} else {
    console.log("Mohon maaf, silakan coba lagi.");
}

4. Fungsi (Function)

Fungsi adalah blok kode yang dapat digunakan kembali untuk menjalankan tugas tertentu tanpa harus menulis ulang kodenya.

JavaScript

function sapaPengguna(nama) {
    return "Halo, " + nama + "! Selamat datang di tutorial ini.";
}

// Memanggil fungsi
let pesan = sapaPengguna("Budi");
console.log(pesan);

🛠️ Praktik: Membuat Program Interaktif Sederhana

Mari kita coba gabungkan materi di atas ke dalam praktik nyata berupa halaman web interaktif.

Kode HTML (index.html)

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Praktik JavaScript Dasar</title>
</head>
<body>

    <div style="text-align: center; margin-top: 50px;">
        <h2>Form Sapaan Interaktif</h2>
        <input type="text" id="namaInput" placeholder="Masukkan nama Anda...">
        <br><br>
        <button id="sapaButton">Klik Saya</button>
        <h3 id="outputHasil"></h3>
    </div>

    <script src="script.js"></script>
</body>
</html>

Kode JavaScript (script.js)

JavaScript

// Mengambil elemen dari HTML menggunakan DOM
const inputNama = document.getElementById("namaInput");
const tombolSapa = document.getElementById("sapaButton");
const outputHasil = document.getElementById("outputHasil");

// Menambahkan event listener saat tombol diklik
tombolSapa.addEventListener("click", function() {
    let namaUser = inputNama.value;

    if (namaUser === "") {
        outputHasil.textContent = "Tolong masukkan nama Anda terlebih dahulu!";
        outputHasil.style.color = "red";
    } else {
        outputHasil.textContent = "Halo, " + namaUser + "! Senang bisa mengajari Anda JavaScript.";
        outputHasil.style.color = "green";
    }
});

Kesimpulan

Melalui tutorial JavaScript dasar ini, Anda telah mempelajari cara kerja variabel, percabangan logika, fungsi, hingga manipulasi DOM sederhana. Kunci utama menguasai pemrograman web adalah konsistensi dalam mencoba dan membuat latihan kode mandiri.

Demikian materi dasar kali ini kita siapkan, sukses selalu untuk kita semua. (ms).