Belajar JavaScript Dasar

Tutorial

Belajar JavaScript Dasar

01 Jun, 2026 193

JavaScript itu bahasa yang bikin website hidup — tanpa JS, website kamu cuma dokumen HTML statis. Di sini saya bahas dasar-dasar JavaScript dengan contoh kode yang bisa langsung kamu coba di browser console.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang diciptakan oleh Brendan Eich pada tahun 1995. Awalnya dibuat untuk membuat halaman web interaktif, kini JavaScript berkembang menjadi bahasa yang sangat versatile. JavaScript bisa digunakan untuk:

Frontend Web: Membuat interaksi di halaman website (animasi, form validation, dynamic content)
Backend Web: Membuat server dengan Node.js
Mobile App: Membuat aplikasi mobile dengan React Native
Desktop App: Membuat aplikasi desktop dengan Electron
Game Development: Membuat game 2D/3D dengan Phaser.js atau Three.js

Cara Menjalankan JavaScript

Ada 3 cara untuk menjalankan JavaScript:

1. Langsung di Browser Console:

Buka browser (Chrome/Firefox)
Tekan F12 untuk membuka Developer Tools
Klik tab Console
Ketik kode JavaScript dan tekan Enter

2. Di dalam file HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar JavaScript</title>
</head>
<body>
    <h1 id="judul">Hello World</h1>
    <button onclick="ubahJudul()">Klik Saya</button>

    <script>
        function ubahJudul() {
            document.getElementById('judul').innerHTML = 'Judul Berubah!';
        }
    </script>
</body>
</html>

3. Menggunakan Node.js:

# Install Node.js dari https://nodejs.org
# Jalankan file JavaScript
node namafile.js

Variabel dan Tipe Data

Variabel adalah wadah untuk menyimpan data. Di JavaScript modern, gunakan let dan const (bukan var).

// let - bisa diubah nilainya
let nama = "Budi";
nama = "Andi"; // OK

// const - tidak bisa diubah nilainya
const PI = 3.14;
// PI = 3.15; // ERROR!

// Tipe data dasar
let teks = "Halo Dunia";        // String
let angka = 42;                  // Number
let desimal = 3.14;             // Number
let benar = true;               // Boolean
let kosong = null;              // Null
let tidakAda;                   // Undefined
let daftar = [1, 2, 3];        // Array
let orang = {nama: "Budi"};    // Object

Operator

// Operator Aritmatika
let a = 10, b = 3;
console.log(a + b);  // 13 (penjumlahan)
console.log(a - b);  // 7  (pengurangan)
console.log(a * b);  // 30 (perkalian)
console.log(a / b);  // 3.33 (pembagian)
console.log(a % b);  // 1  (sisa bagi/modulus)
console.log(a ** b); // 1000 (pangkat)

// Operator Perbandingan
console.log(5 == "5");   // true  (sama nilai, beda tipe)
console.log(5 === "5");  // false (sama nilai DAN tipe) - GUNAKAN INI!
console.log(5 !== "5");  // true  (tidak identik)
console.log(10 > 5);     // true
console.log(10 <= 10);  // true

// Operator Logika
let x = true, y = false;
console.log(x && y);  // false (AND: keduanya harus true)
console.log(x || y);  // true  (OR: salah satu true)
console.log(!x);       // false (NOT: kebalikan)

Kondisional (if-else)

// if-else dasar
let umur = 20;

if (umur >= 18) {
    console.log("kamu sudah dewasa");
} else if (umur >= 13) {
    console.log("kamu remaja");
} else {
    console.log("kamu anak-anak");
}

// Ternary operator (shorthand)
let status = umur >= 18 ? "Dewasa" : "Belum dewasa";
console.log(status); // "Dewasa"

// Switch-case
let hari = "Senin";
switch (hari) {
    case "Senin":
        console.log("Semangat kerja!");
        break;
    case "Sabtu":
    case "Minggu":
        console.log("Hari libur!");
        break;
    default:
        console.log("Hari biasa");
}

Loop (Perulangan)

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

// While loop
let counter = 1;
while (counter <= 5) {
    console.log("Counter: " + counter);
    counter++;
}

// For...of (untuk array)
let buah = ["apel", "mangga", "pisang", "jeruk"];
for (let b of buah) {
    console.log(b);
}

// For...in (untuk object)
let mahasiswa = {nama: "Budi", umur: 21, jurusan: "TI"};
for (let key in mahasiswa) {
    console.log(key + ": " + mahasiswa[key]);
}

// forEach (method array)
buah.forEach(function(item, index) {
    console.log(index + ". " + item);
});

Function (Fungsi)

// Function declaration
function sapa(nama) {
    return "Halo, " + nama + "!";
}
console.log(sapa("Budi")); // "Halo, Budi!"

// Function expression
const tambah = function(a, b) {
    return a + b;
};
console.log(tambah(5, 3)); // 8

// Arrow function (ES6)
const kali = (a, b) => a * b;
console.log(kali(4, 5)); // 20

// Default parameter
function buatProfil(nama, umur = 18, kota = "Jakarta") {
    return `${nama}, ${umur} tahun, dari ${kota}`;
}
console.log(buatProfil("Budi")); // "Budi, 18 tahun, dari Jakarta"
console.log(buatProfil("Andi", 25, "Bandung")); // "Andi, 25 tahun, dari Bandung"

Array

// Membuat array
let buah = ["apel", "mangga", "pisang"];

// Mengakses elemen
console.log(buah[0]);      // "apel"
console.log(buah.length);  // 3

// Method array yang sering digunakan
buah.push("jeruk");        // Tambah di akhir
buah.pop();                // Hapus dari akhir
buah.unshift("anggur");    // Tambah di awal
buah.shift();              // Hapus dari awal

// Map - transformasi setiap elemen
let angka = [1, 2, 3, 4, 5];
let kuadrat = angka.map(n => n * n);
console.log(kuadrat); // [1, 4, 9, 16, 25]

// Filter - filter elemen berdasarkan kondisi
let genap = angka.filter(n => n % 2 === 0);
console.log(genap); // [2, 4]

// Find - cari elemen pertama yang cocok
let cari = angka.find(n => n > 3);
console.log(cari); // 4

// Reduce - akumulasi
let total = angka.reduce((sum, n) => sum + n, 0);
console.log(total); // 15

Object

// Membuat object
let mahasiswa = {
    nama: "Budi Santoso",
    umur: 21,
    jurusan: "Teknik Informatika",
    mataKuliah: ["Algoritma", "Basis Data", "Jaringan"],

    // Method dalam object
    perkenalan: function() {
        return `Halo, saya ${this.nama}, jurusan ${this.jurusan}`;
    }
};

// Mengakses property
console.log(mahasiswa.nama);           // "Budi Santoso"
console.log(mahasiswa["jurusan"]);     // "Teknik Informatika"
console.log(mahasiswa.mataKuliah[0]); // "Algoritma"
console.log(mahasiswa.perkenalan());  // "Halo, saya Budi..."

// Menambah/mengubah property
mahasiswa.email = "[email protected]";  // Tambah baru
mahasiswa.umur = 22;                  // Ubah yang ada

// Object destructuring
let {nama, umur, jurusan} = mahasiswa;
console.log(`${nama}, ${umur} tahun, ${jurusan}`);

DOM Manipulation

DOM (Document Object Model) adalah representasi struktur HTML yang bisa dimanipulasi dengan JavaScript. Ini adalah fitur paling penting untuk membuat website interaktif.

// Mengambil elemen
let judul = document.getElementById('judul');
let items = document.querySelectorAll('.item');
let tombol = document.querySelector('#tombol-submit');

// Mengubah konten
judul.innerHTML = 'Judul Baru';
judul.textContent = 'Teks baru (lebih aman)';
judul.style.color = 'red';
judul.style.fontSize = '24px';

// Menambah/menghapus class
judul.classList.add('aktif');
judul.classList.remove('nonaktif');
judul.classList.toggle('visible');

// Event listener
tombol.addEventListener('click', function() {
    alert('Tombol diklik!');
});

// Contoh: form validation
document.getElementById('form').addEventListener('submit', function(e) {
    e.preventDefault(); // Mencegah form submit
    let email = document.getElementById('email').value;
    if (!email.includes('@')) {
        alert('Email tidak valid!');
        return;
    }
    alert('Form berhasil disubmit!');
});

Async/Await dan Fetch API

// Mengambil data dari API
async function ambilData() {
    try {
        let response = await fetch('https://api.example.com/users');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Memanggil async function
ambilData();

// Contoh mengirim data ke API
async function kirimData(userData) {
    try {
        let response = await fetch('https://api.example.com/users', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(userData)
        });
        let result = await response.json();
        console.log('Berhasil:', result);
    } catch (error) {
        console.error('Error:', error);
    }
}

Tips Belajar JavaScript

Praktek langsung: Jangan hanya membaca. Ketik kode sendiri di browser console atau editor.
Buat project kecil: Calculator, to-do list, atau quiz app. Project nyata mengajarkan lebih dari tutorial.
Baca dokumentasi: MDN Web Docs (developer.mozilla.org) adalah referensi terbaik untuk JavaScript.
Ikuti tantangan: Coba solve masalah di Codewars, LeetCode, atau freeCodeCamp.
Pelajari ES6+: Arrow function, destructuring, template literals, spread operator adalah fitur modern yang wajib dikuasai.

Kesimpulan

JavaScript adalah bahasa pemrograman yang sangat penting untuk dikuasai di tahun 2025. Dengan memahami dasar-dasar di atas — variabel, tipe data, operator, kondisional, loop, function, array, object, dan DOM manipulation — kamu sudah memiliki fondasi yang kuat untuk membangun website interaktif. Langkah selanjutnya adalah praktek membuat project kecil dan pelajari framework seperti React, Vue, atau Node.js untuk mengembangkan kemampuan kamu lebih jauh.

Tutorial MySQL Indexing - Optimasi Query dari 4 Detik ke 30ms

Database 02 Jul, 2026

Struktur Project Laravel 11 - Kenalan dengan Slim Skeleton Baru

Frameworks 05 Jul, 2026

0 Comments

Scroll to Top