Pengenalan JavaScript: Bahasa Pemrograman Web yang Wajib Dipelajari

Kalau HTML adalah kerangka dan CSS adalah tampilan sebuah halaman web, maka JavaScript adalah otaknya — bagian yang membuat halaman bisa berinteraksi, merespons klik, memuat data tanpa refresh, dan masih banyak lagi. JavaScript adalah satu-satunya bahasa pemrograman yang berjalan langsung di browser, dan saat ini juga bisa berjalan di server melalui Node.js.

Sejarah Singkat JavaScript

JavaScript dibuat oleh Brendan Eich dalam waktu 10 hari pada tahun 1995 saat bekerja di Netscape. Awalnya bernama Mocha, lalu LiveScript, kemudian diubah menjadi JavaScript untuk memanfaatkan popularitas Java saat itu — meski keduanya tidak ada hubungannya secara teknis.

Saat ini JavaScript distandarisasi oleh ECMAScript (ES) yang dikelola oleh ECMA International. Versi modern yang paling banyak digunakan adalah ES6 (2015) ke atas, yang membawa banyak fitur baru seperti arrow function, let/const, template literal, destructuring, dan masih banyak lagi.

Di Mana JavaScript Berjalan?

Browser (Client-side)          Server (Node.js)
┌─────────────────────┐        ┌─────────────────────┐
│  Manipulasi DOM     │        │  REST API            │
│  Event handling     │        │  Database queries    │
│  AJAX / Fetch API   │        │  File system         │
│  Animasi            │        │  WebSocket server    │
│  Form validation    │        │  CLI tools           │
└─────────────────────┘        └─────────────────────┘

Cara Menjalankan JavaScript

Di Browser (Console)

Buka browser → tekan F12 → tab Console → ketik kode langsung.

Di HTML — Inline

<!DOCTYPE html>
<html>
<head>
  <title>Belajar JavaScript</title>
</head>
<body>
  <h1>Hello World</h1>

  <!-- JavaScript di dalam tag script -->
  <script>
    console.log("Halo dari JavaScript!");
    alert("Selamat datang!");
  </script>
</body>
</html>

Di HTML — File Eksternal (Cara Terbaik)

<!-- Letakkan sebelum </body> agar halaman selesai dimuat dulu -->
<script src="script.js"></script>

<!-- Atau di <head> dengan defer (eksekusi setelah DOM siap) -->
<script src="script.js" defer></script>

Variabel: `var`, `let`, dan `const`

JavaScript punya tiga cara mendeklarasikan variabel:

// var — cara lama, hindari di kode modern
var nama = "Budi";

// let — untuk nilai yang bisa berubah
let usia = 25;
usia = 26;  // boleh diubah

// const — untuk nilai yang tidak berubah
const PI = 3.14159;
// PI = 3;  // ERROR! const tidak bisa diubah

Perbedaan Scope

// var: function scope (bisa bocor dari blok if/for)
if (true) {
  var x = 10;
}
console.log(x);  // 10 ← bisa diakses!

// let/const: block scope (terbatas di dalam blok {})
if (true) {
  let y = 20;
}
// console.log(y);  // ReferenceError: y tidak terdefinisi

Aturan praktis: Selalu gunakan const secara default. Gunakan let hanya jika nilai perlu diubah. Hindari var.

Tipe Data

JavaScript memiliki 7 tipe data primitif:

// String — teks
let nama = "Miftakhuddin";
let sapaan = 'Halo, Dunia!';
let template = `Halo, ${nama}!`;  // template literal

// Number — angka (integer dan float jadi satu)
let bulat = 42;
let desimal = 3.14;
let negatif = -100;

// Boolean — true/false
let aktif = true;
let sudahLogin = false;

// null — nilai kosong yang disengaja
let data = null;

// undefined — belum diberi nilai
let belumDiisi;
console.log(belumDiisi);  // undefined

// BigInt — angka sangat besar
const angkaBesar = 9007199254740991n;

// Symbol — nilai unik (jarang dipakai pemula)
const simbol = Symbol("deskripsi");

// Object — tipe non-primitif (array, object, function)
const orang = { nama: "Budi", usia: 25 };
const angka = [1, 2, 3, 4, 5];

Cek Tipe Data

console.log(typeof "teks");      // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" ← ini bug JS yang terkenal
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

Operator

// Aritmatika
let a = 10, b = 3;
console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.3333...
console.log(a % b);   // 1 (sisa bagi / modulo)
console.log(a ** b);  // 1000 (perpangkatan)

// Assignment
let x = 5;
x += 3;   // x = x + 3 → 8
x -= 2;   // x = x - 2 → 6
x *= 4;   // x = x * 4 → 24
x++;      // x = x + 1
x--;      // x = x - 1

// Perbandingan
console.log(5 == "5");   // true  ← perbandingan longgar (type coercion)
console.log(5 === "5");  // false ← perbandingan ketat (tipe harus sama)
console.log(5 !== 3);    // true
console.log(10 > 5);     // true
console.log(10 >= 10);   // true

// Logika
console.log(true && false);  // false (AND)
console.log(true || false);  // true  (OR)
console.log(!true);           // false (NOT)

Aturan penting: Selalu gunakan === (triple equals) bukan == untuk perbandingan, karena == melakukan type coercion yang bisa menghasilkan hasil mengejutkan.

Output dan Input Dasar

// Output ke console (untuk debugging)
console.log("Pesan biasa");
console.warn("Peringatan");
console.error("Error!");
console.table([{nama: "Budi"}, {nama: "Sari"}]);

// Output ke halaman
document.write("Teks langsung ke halaman");
document.getElementById("output").textContent = "Teks ke elemen";

// Dialog browser (gunakan dengan hati-hati)
alert("Ini dialog alert");
const nama = prompt("Siapa namamu?");   // input dari user
const setuju = confirm("Yakin lanjut?"); // true/false

Kesimpulan

JavaScript adalah bahasa yang sangat fleksibel dan powerful. Dengan memahami variabel, tipe data, dan operator dasar, kamu sudah punya fondasi untuk membangun hal-hal yang lebih menarik.

Di artikel berikutnya, kita bahas kondisi dan perulangan — cara membuat program yang bisa mengambil keputusan dan mengulang tugas secara otomatis.