Dark - IT - Tech

Pendahuluan

Setelah memahami HTML dan CSS, langkah berikutnya untuk menjadi web developer adalah belajar JavaScript. Jika HTML adalah struktur dan CSS adalah tampilan, maka JavaScript adalah “otak” yang membuat website menjadi hidup dan interaktif.

Dengan JavaScript, kamu bisa membuat tombol yang bisa diklik, form yang bisa divalidasi, animasi dinamis, hingga aplikasi web kompleks seperti dashboard, marketplace, bahkan media sosial.

Di tutorial ini, kamu akan belajar JavaScript dari nol secara bertahap dan mudah dipahami, bahkan jika kamu benar-benar pemula.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan di browser. Bahasa ini digunakan untuk membuat website menjadi interaktif.

Contoh fitur yang menggunakan JavaScript:

• Tombol klik
• Popup notifikasi
• Slider gambar
• Validasi form
• Dark mode toggle

Cara Menambahkan JavaScript ke HTML

1. Inline JavaScript

  <button onclick="alert('Halo Dunia')">Klik Saya</button>
  

2. Internal JavaScript

  <script>
    alert("Halo Dunia");
  </script>
  

3. External JavaScript (Rekomendasi)

Buat file script.js:

  alert("Halo Dunia");
  

Lalu hubungkan ke HTML:

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

Gunakan cara ini untuk project profesional.

Variabel di JavaScript

Variabel digunakan untuk menyimpan data.

  let nama = "Budi";
  const umur = 20;
  var kota = "Jakarta";
  

let → bisa diubah
const → tidak bisa diubah
var → versi lama (jarang dipakai sekarang)

Tipe Data Dasar

  let teks = "Halo";      // String
  let angka = 10;         // Number
  let aktif = true;       // Boolean
  let kosong = null;      // Null
  let belumIsi;           // Undefined
  

Operator Dasar

1. Operator Aritmatika

  let hasil = 5 + 3;  // 8
  let kurang = 5 - 2;
  let kali = 4 * 2;
  let bagi = 10 / 2;
  

2. Operator Perbandingan

  5 == "5"   // true
  5 === "5"  // false
  

Gunakan === agar lebih aman.

Conditional (Percabangan)

  let nilai = 80;

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

Perulangan (Loop)

1. For Loop

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

2. While Loop

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

Function (Fungsi)

Function adalah blok kode yang bisa digunakan kembali.

  function sapa(nama) {
    return "Halo " + nama;
  }

  console.log(sapa("Andi"));
  

DOM (Document Object Model)

DOM digunakan untuk memanipulasi elemen HTML.

Mengubah Teks

  <h1 id="judul">Halo</h1>
  

  document.getElementById("judul").innerText = "Halo Dunia!";
  

Event Listener

Membuat tombol bisa diklik:

  <button id="btn">Klik</button>
  

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

Membuat Dark Mode Sederhana

  <button id="darkBtn">Dark Mode</button>
  

  document.getElementById("darkBtn").addEventListener("click", function() {
    document.body.classList.toggle("dark");
  });
  

  .dark {
    background: black;
    color: white;
  }
  

Array Dasar

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

  console.log(buah[0]);
  

Loop Array

  buah.forEach(function(item) {
    console.log(item);
  });
  

Object Dasar

  let user = {
    nama: "Andi",
    umur: 25,
    aktif: true
  };

  console.log(user.nama);
  

Mini Project: Counter Sederhana

  <h2 id="angka">0</h2>
  <button id="tambah">+</button>
  <button id="kurang">-</button>
  

  let angka = 0;

  document.getElementById("tambah").addEventListener("click", function() {
    angka++;
    document.getElementById("angka").innerText = angka;
  });

  document.getElementById("kurang").addEventListener("click", function() {
    angka--;
    document.getElementById("angka").innerText = angka;
  });
  

Dengan ini kamu sudah membuat fitur interaktif pertama!

Tips Belajar JavaScript untuk Pemula

• Latihan setiap hari minimal 30 menit
• Buat mini project kecil
• Jangan hanya menonton tutorial
• Biasakan baca error di console
• Gunakan browser DevTools (F12)

Kesalahan Umum Pemula

• Lupa tanda titik koma
• Salah penulisan huruf besar kecil
• Tidak memahami scope variabel
• Tidak membaca error message

Langkah Selanjutnya Setelah JavaScript Dasar

• Belajar ES6+
• Belajar Async & Fetch API
• Belajar React atau framework lain
• Belajar Backend (Node.js)

Kesimpulan

JavaScript adalah fondasi utama untuk membuat website interaktif. Dengan memahami variabel, function, DOM, event, array, dan object, kamu sudah memiliki dasar kuat sebagai Frontend Developer.

Terus latihan dan buat project kecil agar skill semakin berkembang.