Dasar-dasar JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi yang digunakan untuk membuat halaman web interaktif.

Sejarah Singkat JavaScript

JavaScript dibuat oleh Brendan Eich pada tahun 1995 dalam waktu 10 hari saat bekerja di Netscape. Awalnya bernama Mocha, kemudian LiveScript, dan akhirnya JavaScript untuk memanfaatkan popularitas Java saat itu.

ES6 (ECMAScript 2015) adalah pembaruan besar terakhir yang menambahkan banyak fitur modern seperti class, modules, arrow functions, dan lain-lain.

Menyisipkan JavaScript

Ada beberapa cara untuk menyisipkan JavaScript ke dalam HTML:

1. External JavaScript

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

2. Internal JavaScript

<script>
  // Kode JavaScript di sini
  console.log('Hello World!');
</script>

3. Inline JavaScript

<button onclick="alert('Hello!')">Klik Saya</button>

Best Practice: Gunakan external JavaScript untuk memisahkan struktur (HTML), presentasi (CSS), dan perilaku (JS).

Variabel

Variabel adalah wadah untuk menyimpan nilai data. Di JavaScript kita bisa mendeklarasikan variabel dengan:

Keyword	Scope	Dapat Diubah	Dideklarasikan Ulang	Contoh
`var`	Function	Ya	Ya	`var x = 5;`
`let`	Block	Ya	Tidak	`let y = 10;`
`const`	Block	Tidak	Tidak	`const z = 15;`

// Deklarasi variabel
let nama = 'Budi';
const umur = 25;
var alamat = 'Jakarta'; // Hindari penggunaan var

// Mengubah nilai variabel
nama = 'Andi';
// umur = 26; // Error karena const tidak bisa diubah

// Deklarasi multiple
let a = 1, b = 2, c = 3;

// Nilai default
let nilai;
console.log(nilai); // undefined

Catatan: Hindari penggunaan var karena memiliki scope function yang bisa menyebabkan bug. Gunakan let dan const.

Tipe Data

JavaScript memiliki beberapa tipe data dasar:

Tipe Data Primitif

String - Teks (contoh: "Hello")
Number - Angka (contoh: 123, 3.14)
Boolean - True/False (contoh: true, false)
null - Nilai kosong yang disengaja
undefined - Variabel yang belum diberi nilai
Symbol - Nilai unik yang tidak bisa diubah (ES6)
BigInt - Bilangan bulat sangat besar (ES2020)

Tipe Data Non-Primitif

Object - Kumpulan properti
Array - Kumpulan nilai dengan indeks
Function - Blok kode yang dapat dipanggil

// String
let nama = 'JavaScript';
let pesan = "Belajar JS itu menyenangkan";
let template = `Halo ${nama}`; // Template literal (ES6)

// Number
let angka = 10;
let desimal = 3.14;
let notANumber = NaN; // Nilai khusus

// Boolean
let isActive = true;
let isComplete = false;

// null dan undefined
let kosong = null;
let tidakTerdefinisi;

// Object
let user = {
    nama: 'Budi',
    umur: 25,
    aktif: true
};

// Array
let buah = ['Apel', 'Mangga', 'Jeruk'];

// Function
function sapa() {
    console.log('Halo!');
}

// Type checking
console.log(typeof nama); // "string"
console.log(typeof angka); // "number"
console.log(typeof isActive); // "boolean"
console.log(typeof buah); // "object" (array adalah object)
console.log(Array.isArray(buah)); // true
console.log(typeof sapa); // "function"

Operator

Operator digunakan untuk melakukan operasi pada variabel dan nilai.

Operator Aritmatika

Operator	Deskripsi	Contoh
+	Penambahan	10 + 5 = 15
-	Pengurangan	10 - 5 = 5
*	Perkalian	10 * 5 = 50
/	Pembagian	10 / 5 = 2
%	Modulus (sisa bagi)	10 % 3 = 1
**	Eksponensial (pangkat)	2 ** 3 = 8
++	Increment	x++ (setelah) atau ++x (sebelum)
--	Decrement	x-- (setelah) atau --x (sebelum)

Operator Penugasan

let x = 10;

x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x /= 4; // x = x / 4 → 6
x %= 5; // x = x % 5 → 1
x **= 3; // x = x ** 3 → 1

Operator Perbandingan

console.log(5 == '5'); // true (nilai sama)
console.log(5 === '5'); // false (nilai dan tipe sama)
console.log(5 != '5'); // false
console.log(5 !== '5'); // true
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true
console.log(5 <= 4); // false

Operator Logika

// AND (&&) - kedua kondisi harus true
console.log(true && true); // true
console.log(true && false); // false

// OR (||) - salah satu kondisi true
console.log(true || false); // true
console.log(false || false); // false

// NOT (!) - membalik nilai boolean
console.log(!true); // false
console.log(!false); // true

Praktik Mandiri

Coba ubah kode berikut dan lihat hasilnya:

// Deklarasi variabel
let nama = 'Pengunjung';
let umur = 20;
let gaji = 5000000;
let aktif = true;

// Operasi aritmatika
let bonus = gaji * 0.1;
let totalGaji = gaji + bonus;

// Operasi perbandingan
let dapatBonus = totalGaji > gaji;

// Tampilkan hasil
console.log(`Nama: ${nama}`);
console.log(`Umur: ${umur}`);
console.log(`Gaji: Rp${gaji.toLocaleString('id-ID')}`);
console.log(`Bonus: Rp${bonus.toLocaleString('id-ID')}`);
console.log(`Total Gaji: Rp${totalGaji.toLocaleString('id-ID')}`);
console.log(`Dapat bonus? ${dapatBonus ? 'Ya' : 'Tidak'}`);
console.log(`Status aktif: ${aktif ? 'Aktif' : 'Non-aktif'}`);