Tutorial JavaScript Dasar dengan Contoh Program untuk Pemula

Updated: 27 Aug, 2026 • 0 • min read

Table of Contents

Tutorial JavaScript Dasar dengan Contoh Program untuk Pemula

JavaScript adalah bahasa pemrograman yang banyak digunakan untuk membuat website menjadi interaktif dan dinamis. Jika HTML digunakan untuk membuat struktur halaman dan CSS digunakan untuk mengatur tampilannya, JavaScript digunakan untuk menambahkan logika serta interaksi.

Bagi pemula dan siswa SMK, JavaScript merupakan salah satu materi penting setelah memahami dasar HTML dan CSS.

Dalam tutorial ini kita akan belajar JavaScript dari dasar hingga membuat beberapa contoh program sederhana yang bisa langsung dicoba.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang dapat berjalan di browser dan digunakan untuk membuat halaman web lebih interaktif.

Contohnya:

Tombol menampilkan pesan.
Mengubah teks halaman.
Mengubah warna.
Validasi form.
Membuat kalkulator.
Membuat menu interaktif.
Mengolah data.
Membuat aplikasi web sederhana.

Secara sederhana:

HTML
 ↓
Struktur halaman
CSS
 ↓
Tampilan
JavaScript
 ↓
Logika & interaksi

Cara Menjalankan JavaScript

Ada beberapa cara menjalankan JavaScript.

1. Menggunakan Browser Console

Buka Chrome atau Edge, kemudian tekan:

F12

Pilih tab Console.

Ketik:

console.log("Halo, JavaScript!");

Tekan Enter.

2. Menggunakan File JavaScript

Buat struktur folder:

belajar-javascript/
│
├── index.html
└── script.js

Pada index.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar JavaScript</title>
</head>
<body>
    <h1>Belajar JavaScript</h1>
    <script src="script.js"></script>
</body>
</html>

Kemudian pada script.js:

console.log("JavaScript berhasil dijalankan!");

Buka index.html melalui browser.

1. Menampilkan Pesan

JavaScript dapat menampilkan pesan menggunakan alert().

alert("Selamat datang!");

Ketika halaman dibuka, browser akan menampilkan kotak pesan.

2. `console.log()`

console.log() sering digunakan untuk melihat hasil program ketika melakukan debugging.

console.log("Belajar JavaScript");

Contoh:

let nama = "Andi";
console.log(nama);

Hasil:

Andi

3. Variabel JavaScript

Variabel digunakan untuk menyimpan data.

JavaScript memiliki beberapa cara untuk membuat variabel, tetapi untuk kode modern umumnya digunakan:

let nama = "Budi";
const umur = 16;

let digunakan ketika nilai variabel dapat berubah.

let nilai = 80;
nilai = 90;

Sedangkan const digunakan ketika variabel tidak perlu diubah.

const sekolah = "SMK Dwija Praja";

4. Tipe Data JavaScript

Beberapa tipe data dasar antara lain:

String

let nama = "Andi";

Number

let umur = 16;

Boolean

let lulus = true;

Array

let jurusan = ["TKL", "TO", "DKV"];

Object

let siswa = {
    nama: "Andi",
    kelas: "X",
    nilai: 85
};

5. Operator Aritmatika

JavaScript dapat digunakan untuk melakukan perhitungan.

let a = 10;
let b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Hasil:

Operator yang umum:

Operator	Fungsi
`+`	Penjumlahan
`-`	Pengurangan
`*`	Perkalian
`/`	Pembagian
`%`	Sisa pembagian
`**`	Pangkat

6. Percabangan `if`

Percabangan digunakan untuk membuat keputusan berdasarkan kondisi.

Contoh:

let nilai = 85;
if (nilai >= 75) {
    console.log("Lulus");
}

Jika nilai kurang dari 75, kita dapat menggunakan else.

let nilai = 60;
if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Belum Lulus");
}

7. `if...else if...else`

Untuk beberapa kondisi:

let nilai = 85;
if (nilai >= 90) {
    console.log("Sangat Baik");
} else if (nilai >= 80) {
    console.log("Baik");
} else if (nilai >= 75) {
    console.log("Cukup");
} else {
    console.log("Belum Lulus");
}

8. Operator Perbandingan

JavaScript menyediakan operator perbandingan seperti:

>
<
>=
<=
===
!==

Contoh:

let umur = 17;
console.log(umur >= 17);

Hasil:

true

Gunakan === untuk perbandingan kesamaan yang mempertimbangkan tipe data.

10 === 10

Hasilnya:

true

9. Function

Function digunakan untuk membuat blok kode yang dapat dipanggil kembali.

Contoh:

function sapa() {
    console.log("Halo, selamat belajar!");
}
sapa();

Function dengan parameter:

function sapa(nama) {
    console.log("Halo " + nama);
}
sapa("Andi");

Hasil:

Halo Andi

10. Function dengan `return`

Function juga dapat mengembalikan nilai.

function tambah(a, b) {
    return a + b;
}
let hasil = tambah(10, 5);
console.log(hasil);

Hasil:

11. Array

Array digunakan untuk menyimpan beberapa data.

let buah = [
    "Apel",
    "Mangga",
    "Jeruk"
];

Mengakses data:

console.log(buah[0]);

Hasil:

Apel

Index array dimulai dari 0.

buah[0] → Apel
buah[1] → Mangga
buah[2] → Jeruk

12. Perulangan `for`

Perulangan digunakan untuk menjalankan kode berkali-kali.

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

Hasil:

Contoh menggunakan array:

let buah = ["Apel", "Mangga", "Jeruk"];
for (let i = 0; i < buah.length; i++) {
    console.log(buah[i]);
}

13. Perulangan `while`

Contoh:

let angka = 1;
while (angka <= 5) {
    console.log(angka);
    angka++;
}

14. Object

Object digunakan untuk menyimpan data yang memiliki properti.

let siswa = {
    nama: "Andi",
    kelas: "X",
    jurusan: "TKL",
    nilai: 85
};

Mengakses data:

console.log(siswa.nama);
console.log(siswa.nilai);

Hasil:

Andi
85

15. Mengubah HTML dengan JavaScript

Salah satu kemampuan penting JavaScript adalah memanipulasi DOM.

HTML:

<h1 id="judul">Belajar JavaScript</h1>

JavaScript:

document.getElementById("judul").textContent =
    "Belajar JavaScript Dasar";

JavaScript akan mengubah teks <h1>.

16. Menggunakan Tombol

HTML:

<button onclick="ubahTeks()">
    Klik Saya
</button>
<p id="pesan">
    Teks awal
</p>

JavaScript:

function ubahTeks() {
    document.getElementById("pesan").textContent =
        "Teks sudah berubah!";
}

Ketika tombol diklik, teks akan berubah.

17. Mengubah Warna dengan JavaScript

HTML:

<h2 id="judul">
    Belajar JavaScript
</h2>
<button onclick="ubahWarna()">
    Ubah Warna
</button>

JavaScript:

function ubahWarna() {
    document.getElementById("judul")
        .style.color = "blue";
}

18. Mengambil Input dari Pengguna

HTML:

<input type="text" id="nama">
<button onclick="tampilkanNama()">
    Tampilkan
</button>
<p id="hasil"></p>

JavaScript:

function tampilkanNama() {
    let nama =
        document.getElementById("nama").value;
    document.getElementById("hasil").textContent =
        "Halo, " + nama;
}

Jika pengguna mengetik:

Andi

hasilnya:

Halo, Andi

19. Contoh Program Kalkulator Sederhana

Berikut contoh program JavaScript yang cocok untuk latihan siswa SMK.

HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kalkulator Sederhana</title>
</head>
<body>
    <h1>Kalkulator Sederhana</h1>
    <input type="number" id="angka1"
           placeholder="Angka pertama">
    <input type="number" id="angka2"
           placeholder="Angka kedua">
    <button onclick="hitung()">
        Hitung
    </button>
    <h2 id="hasil"></h2>
    <script src="script.js"></script>
</body>
</html>

JavaScript:

function hitung() {
    let angka1 =
        Number(document.getElementById("angka1").value);
    let angka2 =
        Number(document.getElementById("angka2").value);
    let hasil = angka1 + angka2;
    document.getElementById("hasil").textContent =
        "Hasil: " + hasil;
}

Program tersebut mengambil dua angka kemudian menjumlahkannya.

20. Contoh Program Menentukan Kelulusan

HTML:

<input type="number" id="nilai"
       placeholder="Masukkan nilai">
<button onclick="cekNilai()">
    Cek Nilai
</button>
<h2 id="hasil"></h2>

JavaScript:

function cekNilai() {
    let nilai =
        Number(document.getElementById("nilai").value);
    let hasil;
    if (nilai >= 75) {
        hasil = "Lulus";
    } else {
        hasil = "Belum Lulus";
    }
    document.getElementById("hasil").textContent =
        hasil;
}

21. Contoh Program Menghitung Luas Persegi Panjang

Rumus:

Luas = Panjang × Lebar

HTML:

<input type="number"
       id="panjang"
       placeholder="Panjang">
<input type="number"
       id="lebar"
       placeholder="Lebar">
<button onclick="hitungLuas()">
    Hitung Luas
</button>
<p id="hasil"></p>

JavaScript:

function hitungLuas() {
    let panjang =
        Number(document.getElementById("panjang").value);
    let lebar =
        Number(document.getElementById("lebar").value);
    let luas = panjang * lebar;
    document.getElementById("hasil").textContent =
        "Luas = " + luas;
}

22. Event Listener

Selain menggunakan onclick, JavaScript juga dapat menggunakan addEventListener().

HTML:

<button id="tombol">
    Klik Saya
</button>

JavaScript:

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

Cara ini banyak digunakan dalam pengembangan website modern karena logika JavaScript dapat dipisahkan dari HTML.

23. Template Literal

Untuk menggabungkan teks dan variabel, JavaScript modern menyediakan template literal.

let nama = "Andi";
let kelas = "X";
console.log(`Nama: ${nama}`);
console.log(`Kelas: ${kelas}`);

Bisa juga:

console.log(`Halo ${nama}, selamat belajar JavaScript!`);

Cara ini sering lebih mudah dibaca dibandingkan menggabungkan banyak string dengan +.

24. Contoh Program Daftar Siswa

let siswa = [
    "Andi",
    "Budi",
    "Citra",
    "Dina"
];
for (let nama of siswa) {
    console.log(`Nama siswa: ${nama}`);
}

Hasil:

Nama siswa: Andi
Nama siswa: Budi
Nama siswa: Citra
Nama siswa: Dina

25. Contoh Project JavaScript Sederhana

Setelah mempelajari dasar-dasar JavaScript, cobalah membuat project berikut:

Project 1 — Kalkulator

Fitur:

Penjumlahan.
Pengurangan.
Perkalian.
Pembagian.

Project 2 — Cek Nilai Siswa

Input:

Nama
Nilai

Output:

Lulus / Belum Lulus

Project 3 — Konversi Suhu

Buat program untuk mengubah:

Celcius → Fahrenheit
Celcius → Kelvin

Project 4 — To-Do List

Fitur:

Menambah tugas.
Menampilkan tugas.
Menghapus tugas.

Project 5 — Kalkulator BMI

Input:

Berat badan
Tinggi badan

Kemudian program menghitung nilai BMI dan menampilkan kategorinya.

Kesalahan Umum Pemula

Beberapa kesalahan yang sering terjadi ketika belajar JavaScript:

1. Salah Menulis Nama ID

HTML:

<input id="nama">

JavaScript harus menggunakan:

document.getElementById("nama");

Bukan:

document.getElementById("Nama");

Karena penamaan bersifat case-sensitive.

2. Lupa Mengubah Input Menjadi Angka

Nilai dari <input> biasanya diperoleh sebagai string.

Gunakan:

Number(input.value);

Misalnya:

let angka =
    Number(document.getElementById("angka").value);

3. Kurang Tanda Kurung atau Kurawal

Perhatikan struktur:

if (nilai >= 75) {
    console.log("Lulus");
}

4. JavaScript Tidak Terhubung

Pastikan terdapat:

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

dan nama file harus sesuai.

Urutan Belajar JavaScript

Agar tidak bingung, pelajari JavaScript secara bertahap:

Variabel
   ↓
Tipe Data
   ↓
Operator
   ↓
Percabangan
   ↓
Perulangan
   ↓
Function
   ↓
Array
   ↓
Object
   ↓
DOM
   ↓
Event
   ↓
Form
   ↓
API
   ↓
Project

Setelah menguasai dasar tersebut, Anda dapat melanjutkan ke konsep JavaScript yang lebih lanjut seperti ES6+, asynchronous JavaScript, Fetch API, JSON, module, dan framework/library JavaScript.

Kesimpulan

JavaScript merupakan bagian penting dalam Web Programming. Dengan JavaScript, website tidak hanya menampilkan informasi, tetapi juga dapat menerima input, melakukan perhitungan, memproses data, dan merespons tindakan pengguna.

Materi dasar yang perlu dikuasai meliputi:

Variabel → Tipe Data → Operator → Percabangan → Perulangan → Function → Array → Object → DOM → Event.

Setelah memahami konsep tersebut, jangan berhenti pada contoh kode. Cobalah membuat project sederhana agar kemampuan pemrograman semakin berkembang.

Belajar JavaScript bukan tentang menghafal kode, tetapi memahami logika dan mampu memecahkan masalah menggunakan kode.

FAQ

Apakah JavaScript sulit untuk pemula?

Tidak. JavaScript dapat dipelajari secara bertahap mulai dari variabel, kondisi, perulangan, function, hingga DOM.

Apakah harus belajar HTML dan CSS sebelum JavaScript?

Sangat disarankan. HTML dan CSS membantu memahami struktur halaman dan elemen yang nantinya akan dimanipulasi menggunakan JavaScript.

Apa perbedaan JavaScript dengan Java?

JavaScript dan Java adalah bahasa pemrograman yang berbeda. Nama yang mirip tidak berarti keduanya merupakan bahasa yang sama.

Apa yang bisa dibuat dengan JavaScript?

JavaScript dapat digunakan untuk membuat website interaktif, kalkulator, form dinamis, game sederhana, aplikasi web, dan berbagai project lainnya.

Apa yang harus dipelajari setelah JavaScript dasar?

Setelah menguasai dasar, lanjutkan dengan DOM, Fetch API, JSON, asynchronous JavaScript, dan project web sederhana.

Kata kunci: tutorial JavaScript dasar, belajar JavaScript untuk pemula, contoh program JavaScript, JavaScript dasar lengkap, belajar coding JavaScript, tutorial JavaScript siswa SMK, contoh JavaScript sederhana, program JavaScript pemula, belajar Web Programming, JavaScript HTML CSS.

Tutorial JavaScript Dasar dengan Contoh Program untuk Pemula

Tutorial JavaScript Dasar dengan Contoh Program untuk Pemula

Apa Itu JavaScript?

Cara Menjalankan JavaScript

1. Menggunakan Browser Console

2. Menggunakan File JavaScript

1. Menampilkan Pesan

2. console.log()

3. Variabel JavaScript

4. Tipe Data JavaScript

String

Number

Boolean

Array

Object

5. Operator Aritmatika

6. Percabangan if

7. if...else if...else

8. Operator Perbandingan

9. Function

10. Function dengan return

11. Array

12. Perulangan for

13. Perulangan while

14. Object

15. Mengubah HTML dengan JavaScript

16. Menggunakan Tombol

17. Mengubah Warna dengan JavaScript

18. Mengambil Input dari Pengguna

19. Contoh Program Kalkulator Sederhana

20. Contoh Program Menentukan Kelulusan

21. Contoh Program Menghitung Luas Persegi Panjang

22. Event Listener

23. Template Literal

24. Contoh Program Daftar Siswa

25. Contoh Project JavaScript Sederhana

Project 1 — Kalkulator

Project 2 — Cek Nilai Siswa

Project 3 — Konversi Suhu

Project 4 — To-Do List

Project 5 — Kalkulator BMI

Kesalahan Umum Pemula

1. Salah Menulis Nama ID

2. Lupa Mengubah Input Menjadi Angka

3. Kurang Tanda Kurung atau Kurawal

4. JavaScript Tidak Terhubung

Urutan Belajar JavaScript

Kesimpulan

FAQ

Apakah JavaScript sulit untuk pemula?

Apakah harus belajar HTML dan CSS sebelum JavaScript?

Apa perbedaan JavaScript dengan Java?

Apa yang bisa dibuat dengan JavaScript?

Apa yang harus dipelajari setelah JavaScript dasar?

Post a Comment

2. `console.log()`

6. Percabangan `if`

7. `if...else if...else`

10. Function dengan `return`

12. Perulangan `for`

13. Perulangan `while`