Coding

Belajar JavaScript Dasar

Oleh Admin • 5 September 2025 • 3 min baca

Kalau HTML adalah kerangka, CSS adalah tampilan, maka JavaScript (JS) adalah otaknya website. Dengan JavaScript, lo bisa bikin website lebih hidup: tombol bisa diklik, ada animasi, pop-up, sampai validasi form. Artikel ini akan bahas dari nol, cocok buat pemula 🚀

1. Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman client-side yang berjalan di browser. JS bisa dipakai untuk:

Mengubah isi & tampilan halaman tanpa reload
Membuat efek interaktif (popup, slider, dropdown menu)
Validasi input user sebelum dikirim ke server
Menghubungkan API (misalnya cuaca, berita, dll)

2. Cara Menjalankan JavaScript

Ada 2 cara: langsung di file HTML, atau dipisah di file .js.

Contoh di HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar JavaScript</title>
</head>
<body>

  <h1>Halo Dunia JavaScript</h1>

  <script>
    alert("Halo, ini pesan dari JavaScript!");
  </script>

</body>
</html>

👉 Hasilnya: ketika halaman dibuka, muncul pop-up alert.

3. Variabel di JavaScript

Variabel dipakai untuk menyimpan data. Ada 3 cara: var, let, dan const.

let nama = "Gifan";
const umur = 22;
var hobi = "Ngoding";

console.log("Nama:", nama);
console.log("Umur:", umur);
console.log("Hobi:", hobi);

👉 `console.log()` menampilkan output di browser DevTools (F12 → Console).

4. Tipe Data

String → teks
Number → angka
Boolean → true / false
Array → list data
Object → data kompleks

let nama = "Gifan"; // String
let umur = 22;      // Number
let mahasiswa = true; // Boolean
let hobi = ["Coding", "Gaming", "Ngopi"]; // Array
let orang = { nama: "Gifan", umur: 22 };  // Object

5. Operator

JavaScript punya operator matematika dan logika.

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.33
console.log(a % b); // 1

6. Percabangan (if else)

let nilai = 75;

if (nilai >= 80) {
  console.log("Nilai A");
} else if (nilai >= 70) {
  console.log("Nilai B");
} else {
  console.log("Nilai C");
}

7. Perulangan (Loop)

Loop dipakai untuk mengulang kode.

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

let hobi = ["Coding", "Gaming", "Ngopi"];
for (let h of hobi) {
  console.log(h);
}

8. Fungsi

function salam(nama) {
  return "Halo " + nama + ", selamat belajar JS!";
}

console.log(salam("Gifan"));

9. DOM (Document Object Model)

DOM bikin kita bisa ubah isi halaman lewat JavaScript.

<h2 id="judul">Belajar JavaScript</h2>
<button onclick="ubahText()">Klik Aku</button>

<script>
function ubahText() {
  document.getElementById("judul").innerHTML = "Teks Berubah!";
}
</script>

👉 Klik tombol → teks berubah.

Kesimpulan

Dengan JavaScript, lo bisa bikin website lebih interaktif. Dari artikel ini, lo udah belajar:

Cara menjalankan JS di HTML
Variabel, tipe data, operator
Percabangan & loop
Fungsi
Manipulasi DOM

👉 Next step: coba bikin To-Do List atau Kalkulator sederhana. Itu latihan bagus buat ngasah logika pemrograman JS. 💪