Tutorial JavaScript Dasar Lengkap Bahasa Indonesia untuk Pemula

Yovi Mahendra

21 April 2026•Programming•11 menit baca

Tutorial JavaScript dasar lengkap bahasa Indonesia ini akan membawakamu memahami bahasa pemrograman yang paling populer di dunia pengembangan web. Menurut laporan dari berbagai komunitas pengembang, JavaScript telah menjadi fondasi utama bagi hampir setiap website interaktif yang kamu kunjungi setiap hari. Bahasa ini awalnya diciptakan oleh Brendan Eich pada tahun 1995 untuk browser Netscape, lalu berkembang menjadi standar ECMA-262 yang digunakan secara global Jika kamu ingin membangun karir di bidang teknologi, menguasai JavaScript adalah langkah paling cerdas yang bisa kamu ambil sekarang.

Mengenal JavaScript Lebih Dekat

JavaScript adalah bahasa pemrograman yang berfungsi untuk membuat website menjadi lebih dinamis dan interaktif. Bersama dengan HTML dan CSS, JavaScript membentuk tiga pilar utama pengembangan web modern. HTML bertugas membangun struktur halaman, CSS mengatur tampilan visual, dan JavaScript memberikan kehidupan pada website melalui animasi, validasi formulir, serta interaksi langsung dengan pengguna

Dulu JavaScript hanya berjalan di sisi klien atau browser, namun perkembangan teknologi telah mengubahnya menjadi bahasa yang sangat fleksibel. Saat ini kamu bisa menggunakan JavaScript untuk membangun aplikasi server dengan Node.js, aplikasi mobile dengan React Native, hingga program desktop menggunakan Electron. Fleksibilitas inilah yang membuat JavaScript semakin diminati oleh para pengembang di seluruh dunia

1. Sejarah Singkat JavaScript

JavaScript sempat mengalami perjalanan panjang sebelum menjadi seperti sekarang. Awalnya bahasa ini bernama Mocha, lalu berganti nama menjadi LiveScript, dan akhirnya dinamai JavaScript saat dirilis bersama Netscape Navigator 2.0. Microsoft kemudian membuat versi kompetitor bernama JScript, yang memicu terjadinya perang browser pada era tersebut

Untuk mengatasi perbedaan standar, Netscape mengajukan spesifikasi ke Ecma International pada tahun 1996. Lahirlah standar ECMAScript yang hingga kini terus berevolusi dari ES1 pada tahun 1997 hingga versi terbaru yang mendukung fitur-fitur modern Pemahaman sejarah ini membantu kamu menghargai mengapa JavaScript memiliki beberapa cara penulisan kode yang mungkin terlihat berbeda di berbagai tutorial.

2. Peran JavaScript di Era Modern

Saat ini JavaScript tidak lagi sekadar bahasa untuk membuat pop-up atau animasi sederhana. Dengan adanya Node.js, JavaScript bisa berjalan di server dan menangani ribuan koneksi secara bersamaan. Framework seperti React dan Vue memungkinkan pembuatan antarmuka pengguna yang kompleks dengan lebih mudah. Bahkan perusahaan besar seperti Netflix dan PayPal menggunakan JavaScript sebagai tulang punggung aplikasi mereka

Persiapan Alat Belajar JavaScript

Sebelum memulai tutorial JavaScript dasar lengkap bahasa Indonesia ini, kamu perlu menyiapkan beberapa alat sederhana. Kamu tidak butuh laptop spek tinggi atau software berbayar untuk mulai belajar. Yang kamu butuhkan hanyalah komputer dengan browser modern seperti Chrome, Firefox, atau Edge, serta teks editor seperti Visual Studio Code

Browser sudah dilengkapi dengan JavaScript Engine bawaan, sehingga kamu bisa langsung menjalankan kode tanpa instalasi tambahan. Jika ingin belajar JavaScript di luar browser, kamu bisa menginstal Node.js yang memungkinkan eksekusi kode melalui terminal atau command prompt

1. Mengenal Console Browser

Console JavaScript adalah sahabat terbaikmu saat belajar. Kamu bisa membukanya dengan menekan tombol Ctrl + Shift + I lalu memilih tab Console, atau cukup klik kanan pada halaman web dan pilih Inspect. Di console ini, kamu bisa menulis kode JavaScript langsung dan melihat hasilnya secara real-time

Selain untuk bereksperimen, console juga berfungsi sebagai alat debugging. Ketika kode mengalami error, console akan menampilkan pesan kesalahan beserta lokasi masalahnya. Dengan memahami pesan error, kamu bisa belajar memperbaiki kode dengan lebih cepat

2. Memilih Teks Editor yang Tepat

Visual Studio Code adalah pilihan paling populer di kalangan programmer JavaScript saat ini. Editor ini gratis, ringan, dan memiliki ekosistem plugin yang sangat kaya. Fitur seperti IntelliSense membantu kamu menulis kode lebih cepat dengan saran otomatis, sementara ekstensi Prettier bisa merapikan kode secara otomatis. Alternatif lain yang juga banyak digunakan adalah Sublime Text dan Atom, meski Atom sudah tidak dikembangkan lagi secara aktif

Dasar-Dasar Penulisan Kode JavaScript

Memahami aturan penulisan adalah langkah pertama yang tidak boleh kamu lewatkan. JavaScript bersifat case-sensitive, artinya huruf besar dan kecil dianggap berbeda. Kamu harus menulis kode dengan konsisten agar tidak terjadi error yang sulit ditemukan

Ada tiga cara utama menulis kode JavaScript dalam HTML. Pertama, metode embed menggunakan tag script di dalam dokumen HTML. Kedua, metode inline dengan menulis kode langsung pada atribut elemen HTML. Ketiga, metode eksternal dengan memisahkan file JavaScript dan menghubungkannya melalui atribut src

1. Membuat Program Pertama

Mari kita coba membuat program sederhana. Buka teks editor dan buat file bernama index.html, lalu isi dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar JavaScript</title>
</head>
<body>
    <script>
        console.log("Halo, saya belajar JavaScript!");
        document.write("Selamat datang di dunia coding.");
    </script>
</body>
</html>

Simpan file tersebut, lalu buka dengan browser. Tulisan “Selamat datang di dunia coding” akan muncul di halaman web, sementara pesan di console.log akan terlihat di tab Console Perbedaan ini penting untuk kamu pahami, karena console.log umumnya digunakan untuk debugging, sedangkan document.write untuk menampilkan konten ke pengguna.

2. Memahami Komentar dan Cara Penulisan

Komentar adalah teks yang diabaikan oleh JavaScript saat program berjalan, namun sangat berguna untuk dokumentasi. Ada dua jenis komentar yang bisa kamu gunakan. Komentar satu baris dimulai dengan tanda //, cocok untuk penjelasan singkat. Komentar multi-baris menggunakan /* dan */, biasanya digunakan untuk dokumentasi yang lebih panjang atau menonaktifkan sementara blok kode

Menulis kode yang rapi dan berkomentar adalah kebiasaan baik yang harus dibangun sejak awal. Bayangkan jika kamu kembali membaca kode yang ditulis enam bulan lalu, komentar yang jelas akan sangat membantu mengingat logika yang kamu buat.

Variabel, Tipe Data, dan Operator

Variabel adalah tempat menyimpan data yang nilainya bisa berubah. Di JavaScript modern, kamu mendeklarasikan variabel menggunakan let untuk nilai yang bisa berubah, dan const untuk nilai tetap. Penggunaan var sudah tidak direkomendasikan lagi karena dapat menyebabkan masalah cakupan variabel

JavaScript memiliki beberapa tipe data dasar yang wajib kamu kuasai. Number untuk angka, String untuk teks, Boolean untuk nilai true atau false, Array untuk kumpulan data, dan Object untuk data yang lebih kompleks

1. Jenis-Jenis Operator

Operator adalah simbol untuk melakukan operasi pada data. Berikut jenis-jenis operator yang sering digunakan:

Operator aritmatika untuk perhitungan matematika seperti penjumlahan dan pengurangan
Operator perbandingan untuk membandingkan nilai seperti sama dengan atau lebih besar dari
Operator logika untuk menggabungkan kondisi seperti AND, OR, dan NOT
Operator penugasan untuk memberikan nilai ke variabel

2. Konversi Tipe Data

JavaScript memiliki perilaku unik dalam menangani tipe data yang berbeda. Ketika kamu mencoba menjumlahkan angka dengan string, JavaScript akan otomatis mengubah angka menjadi string dan melakukan penggabungan. Fenomena ini disebut type coercion dan sering menjadi sumber bug yang membingungkan pemula

Untuk menghindari masalah, kamu bisa menggunakan fungsi Number() untuk mengubah string menjadi angka, atau String() untuk mengubah angka menjadi string. Memahami konversi tipe data akan menyelamatkanmu dari banyak waktu debugging di masa depan.

Struktur Kontrol dan Perulangan

Program yang baik harus bisa mengambil keputusan. JavaScript menyediakan pernyataan kondisional if, else if, dan else untuk menjalankan kode berdasarkan kondisi tertentu. Selain itu, ada juga switch sebagai alternatif ketika kamu memiliki banyak kondisi yang perlu diperiksa

Perulangan memungkinkan kamu mengeksekusi kode berulang kali tanpa menulisnya berkali-kali. For digunakan ketika jumlah perulangan sudah diketahui, while cocok untuk kondisi yang belum pasti, dan do while menjamin kode dijalankan minimal satu kali sebelum kondisi diperiksa

1. Contoh Penerapan Kondisional

Setelah memahami teori kondisional, sekarang saatnya kamu melihat bagaimana if, else if, dan else bekerja dalam praktik. Penerapan ini sangat umum di dunia nyata, mulai dari sistem penilaian, validasi input pengguna, hingga logika bisnis aplikasi. Dengan contoh yang sederhana, kamu akan lebih mudah memahami alur pemikiran saat menulis kondisi. Mari kita mulai dengan kasus penentuan grade berdasarkan nilai ujian.

let nilai = 80;

if (nilai >= 90) {
    console.log("Nilai kamu A");
} else if (nilai >= 75) {
    console.log("Nilai kamu B");
} else {
    console.log("Nilai kamu C");
}

Kode di atas menunjukkan cara sederhana memberikan grade berdasarkan nilai. Logika semacam ini menjadi dasar dari banyak fitur pada aplikasi nyata, seperti sistem login atau validasi data pengguna.

2. Menggunakan Perulangan dengan Efektif

Perulangan for paling sering digunakan karena strukturnya yang jelas dan mudah dibaca. Kamu menentukan nilai awal, kondisi berhenti, dan cara perubahan nilai dalam satu baris. Perulangan while lebih fleksibel karena kondisinya bisa berupa ekspresi kompleks, namun berisiko infinite loop jika tidak hati-hati

Array method seperti forEach, map, dan filter mulai populer di JavaScript modern. Method-method ini memungkinkan kamu memanipulasi data tanpa menulis perulangan secara manual, sehingga kode menjadi lebih bersih dan fungsional.

Fungsi dan Cara Menggunakannya

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu dan bisa dipanggil berulang kali. Dengan fungsi, kamu tidak perlu menulis kode yang sama berkali-kali, sehingga program menjadi lebih rapi dan mudah dikelola

Kamu bisa membuat fungsi dengan kata kunci function, atau menggunakan arrow function yang lebih ringkas. Fungsi juga bisa menerima parameter sebagai input dan mengembalikan nilai dengan return

1. Membuat Fungsi Sederhana

Setelah memahami konsep dasar fungsi, sekarang saatnya kamu melihat contoh nyata cara membuat dan menggunakan fungsi. Mari kita mulai dengan kasus paling sederhana, yaitu fungsi untuk menyapa pengguna berdasarkan nama. Contoh ini akan membantumu memahami bagaimana parameter masuk, diproses di dalam fungsi, lalu menghasilkan output yang bisa digunakan kembali. Fungsi semacam ini menjadi fondasi dari hampir setiap aplikasi yang menangani data pengguna.

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

console.log(sapa("Budi"));

Fungsi di atas menerima parameter nama dan mengembalikan kalimat sapaan. Bayangkan jika kamu memiliki ratusan pengguna, fungsi ini bisa dipanggil berkali-kali tanpa perlu menulis ulang logika yang sama.

2. Arrow Function dan Perbedaannya

Arrow function diperkenalkan di ES6 dan menawarkan sintaks yang lebih ringkas. Fungsi sapa di atas bisa ditulis sebagai const sapa = nama => “Halo, ” + nama + “!”. Selain lebih pendek, arrow function juga tidak memiliki konteks this sendiri, yang membuatnya ideal untuk digunakan sebagai callback

Namun arrow function tidak cocok untuk semua situasi. Kamu tidak bisa menggunakannya sebagai constructor atau method objek yang membutuhkan this. Memahami kapan menggunakan function biasa dan kapan menggunakan arrow function adalah tanda programmer yang matang.

Manipulasi DOM untuk Website Interaktif

DOM atau Document Object Model adalah representasi struktur HTML yang bisa diakses dan dimanipulasi oleh JavaScript. Melalui DOM, kamu bisa mengubah teks, warna, atau bahkan menambahkan elemen baru ke halaman web secara dinamis

Ada beberapa metode populer untuk memilih elemen HTML, seperti getElementById untuk memilih berdasarkan ID, querySelector untuk memilih dengan selector CSS, dan getElementsByClassName untuk memilih berdasarkan kelas. Setelah elemen terpilih, kamu bisa mengubah kontennya, menambahkan event listener, atau memodifikasi style-nya

1. Event Handling Dasar

Event handling memungkinkan website merespons tindakan pengguna. Misalnya, ketika tombol diklik, form dikirim, atau mouse bergerak di atas elemen. Kamu bisa menambahkan event listener dengan addEventListener untuk menangkap berbagai jenis interaksi

document.getElementById("tombol").addEventListener("click", function() {
    alert("Tombol diklik!");
});

Kode di atas menunjukkan cara menangkap event klik pada elemen dengan ID tombol. Event listener bisa ditambahkan lebih dari satu pada elemen yang sama, berbeda dengan atribut onclick yang hanya bisa menampung satu fungsi.

2. Mengubah Style dan Kelas secara Dinamis

Selain mengubah konten teks, JavaScript juga bisa memanipulasi tampilan visual. Kamu bisa mengubah properti CSS langsung melalui properti style, namun cara ini kurang efisien untuk perubahan besar. Lebih baik menambahkan atau menghapus kelas CSS menggunakan classList, sehingga logika tampilan tetap terpisah dari logika JavaScript

Perbandingan Metode Belajar JavaScript

Setiap orang memiliki gaya belajar yang berbeda. Berikut perbandingan metode belajar yang bisa kamu pertimbangkan:

Aspek	Belajar Mandiri Online	Bootcamp atau Kursus
Biaya	Gratis atau murah	Berbayar, mulai ratusan ribu
Fleksibilitas	Bisa belajar kapan saja	Jadwal terstruktur
Interaksi	Forum atau komunitas	Mentor langsung
Sertifikat	Tidak selalu ada	Biasanya tersedia
Kecepatan	Tergantung motivasi diri	Lebih terarah dan cepat
Cocok untuk	Yang disiplin dan mandiri	Yang butuh bimbingan intensif

Berdasarkan pengalaman banyak programmer, kombinasi keduanya sering memberikan hasil terbaik. Kamu bisa memulai dengan belajar mandiri gratis, lalu mengikuti kursus berbayar untuk memperdalam skill tertentu

Pertanyaan Terkait

Banyak pemula yang memiliki pertanyaan serupa sebelum memulai perjalanan coding mereka. Berikut beberapa jawaban yang mungkin kamu butuhkan.

1. Apakah perlu belajar HTML dan CSS dulu sebelum JavaScript?

Menurut para praktisi, memahami HTML dan CSS sebelum JavaScript sangat disarankan. Ketiga bahasa ini saling melengkapi, dan tanpa dasar HTML serta CSS, kamu akan kesulitan memahami bagaimana JavaScript berinteraksi dengan elemen halaman web

2. Berapa lama waktu yang dibutuhkan untuk menguasai JavaScript dasar?

Dengan belajar secara konsisten 1-2 jam setiap hari, kebanyakan pemula bisa memahami dasar-dasar JavaScript dalam waktu sekitar 1-3 bulan. Namun, penguasaan sepenuhnya membutuhkan latihan terus-menerus melalui proyek nyata

3. Apakah Java dan JavaScript itu sama?

Tidak sama. Meski namanya mirip, keduanya adalah bahasa pemrograman yang berbeda. Java digunakan untuk aplikasi enterprise dan Android, sementara JavaScript fokus pada pengembangan web dan bisa berjalan di browser. Perbedaan ini sering membingungkan pemula, jadi pastikan kamu tidak salah memilih

Kesimpulan

Tutorial JavaScript dasar lengkap bahasa Indonesia ini baru membahas puncak gunung es dari apa yang bisa kamu lakukan dengan bahasa pemrograman ini. JavaScript terus berkembang pesat dengan munculnya framework modern seperti React, Vue, dan Angular yang memudahkan pembuatan aplikasi kompleks

Kunci sukses belajar programming adalah konsistensi dan praktik langsung. Jangan hanya membaca tutorial, tetapi cobalah membuat proyek kecil seperti kalkulator sederhana, to-do list, atau game tebak angka. Setiap baris kode yang kamu tulis akan membangun kepercayaan dirimu sebagai programmer.

Mulailah dari yang sederhana, tetap semangat menghadapi error, dan jangan ragu bertanya di komunitas. Dunia pengembangan web sangat luas, dan JavaScript adalah tiket masuk yang paling berharga yang bisa kamu miliki saat ini.