JavaScript Tips — Anabhi Dev

Apa itu JavaScript?

Bahasa yang Menghidupkan Web

Kalau HTML adalah kerangka rumah dan CSS adalah catnya, maka JavaScript adalah listriknya — yang bikin semua tombol, animasi, dan interaksi di website bisa jalan. Setiap website modern yang kamu pakai hari ini menggunakan JavaScript di baliknya.

Peran Bahasa di Web — Tingkat Interaktivitas

📄 HTML saja

Statis, kaku

🎨 HTML + CSS

Cantik tapi diam

⚡ + JavaScript

Hidup & interaktif

🤖 + JavaScript + AI

Powerful banget!

* JavaScript berjalan langsung di browser — tidak perlu install apapun untuk mulai belajar!

💡 Kenapa JavaScript untuk Vibes Coder?

        JavaScript adalah satu-satunya bahasa yang bisa jalan langsung di browser — tanpa install apapun. Buka browser, tekan F12, ketik kode di Console, langsung jalan. Tidak ada bahasa lain yang semudah ini untuk dicoba. Plus, JavaScript adalah bahasa yang sama dipakai Google Apps Script — jadi kalau sudah belajar GAS, kamu sudah punya dasar JavaScript!

Konsep Dasar

6 Konsep yang Wajib Dikenal

Tidak perlu hafal semua JavaScript — cukup pahami 6 konsep ini dulu. Sisanya akan mengikuti dengan sendirinya saat kamu sering praktek.

📦

Variabel

Tempat menyimpan data. Pakai let atau const untuk deklarasi variabel.

let nama = "Anabhi";
const tahun = 2026;

📌 Paling Dasar

🔀

Kondisi (if/else)

"Kalau ini, lakukan itu. Kalau tidak, lakukan yang lain." Logika dasar semua program.

if (nilai >= 70) {
  console.log("Lulus!");
} else {
  console.log("Coba lagi");
}

🔀 Logika

🔄

Fungsi

Kumpulan kode yang diberi nama — bisa dipanggil kapan saja. Tulis sekali, pakai berkali-kali.

function sapa(nama) {
  return `Halo, ${nama}!`;
}
sapa("Wibawa");

♻️ Reusable

🎯

DOM Manipulation

Ubah isi, warna, atau tampilan elemen HTML langsung dari JavaScript — tanpa reload halaman.

// Ambil elemen & ubah isinya
const judul = document
  .getElementById("judul");
judul.textContent = "Halo!";

🌐 Web Magic

👂

Event Listener

"Dengarkan" aksi user — klik tombol, isi form, scroll halaman — lalu jalankan kode sebagai respons.

const tombol = document
  .getElementById("btn");
tombol.addEventListener(
  "click", () => {
    alert("Diklik!");
  }
);

🖱️ Interaktif

🌐

Fetch API

Ambil data dari internet (API) tanpa reload halaman. Dasar dari semua aplikasi web modern.

fetch("https://api.contoh.com")
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

📡 Data dari Web

🚀 Coba Sekarang — Tanpa Install Apapun!

        Buka browser kamu → tekan F12 (atau klik kanan → Inspect) → klik tab Console → ketik console.log("Halo JavaScript!") → tekan Enter. JavaScript kamu langsung jalan! Console adalah playground JavaScript gratis yang selalu tersedia di browser.

Praktek Nyata

Script JavaScript yang Langsung Berguna

Ini bukan contoh akademis — semua script ini bisa langsung kamu jalankan di browser Console atau tambahkan ke project web kamu.

⏰

Auto Scroll ke Bawah

Jalankan di Console browser — scroll otomatis ke bawah halaman

Console Browser — Auto Scroll

// Scroll pelan ke bawah halaman
let pos = 0;
const timer = setInterval(() => {
  window.scrollBy(0, 3);
  pos += 3;
  if (pos >= document.body.scrollHeight) {
    clearInterval(timer);
  }
}, 20);

📋

Copy Teks ke Clipboard

Tambahkan tombol "Copy" ke project web kamu

script.js — Tombol copy teks

function copyTeks(teks) {
  navigator.clipboard.writeText(teks)
    .then(() => {
      alert("Berhasil dicopy! ✅");
    });
}

// Panggil saat tombol diklik
// copyTeks("teks yang mau dicopy");

🌐

Fetch Data dari API Publik

Ambil data cuaca atau info lain dari internet

script.js — Fetch data dari API

// Ambil data dari API publik (gratis)
fetch("https://wttr.in/Jakarta?format=3")
  .then(response => response.text())
  .then(data => {
    console.log("Cuaca Jakarta:", data);
    // Tampilkan di halaman
    document.getElementById("cuaca")
      .textContent = data;
  })
  .catch(error => {
    console.log("Error:", error);
  });

🤖 Prompt Template untuk AI

        Minta ke Claude atau ChatGPT: "Buatkan script JavaScript untuk [kebutuhan]. Saya newbie, pakai sintaks yang simpel, tambahkan komentar di setiap baris, dan jelaskan cara menggunakannya." Hasilnya bisa langsung dicopy ke file .js atau Console browser!

Tips & Best Practices

Kebiasaan Baik JavaScript dari Awal

JavaScript punya banyak cara untuk melakukan hal yang sama — ini panduan agar kamu tidak tersesat di awal.

✅Do This

Pakai Console browser (F12) untuk eksperimen cepat
Gunakan console.log() untuk debug — lihat nilai variabel
Pakai const untuk nilai yang tidak berubah, let untuk yang berubah
Beri nama variabel dan fungsi yang deskriptif
Test di satu browser dulu (Chrome) sebelum yang lain
Tanya AI kalau ada error — paste error message-nya sekalian

❌Don't Do This

Pakai var — sudah outdated, pakai let atau const
Abaikan error di Console — selalu baca pesan errornya
Tulis semua kode dalam satu fungsi panjang — pecah jadi fungsi kecil
Copy kode tanpa paham fungsinya — minta AI jelaskan dulu
Langsung deploy ke production tanpa test — test di local dulu
Simpan data sensitif di JavaScript frontend — bisa dilihat semua orang!

1

Console Browser adalah Teman Terbaik

Tekan F12 di browser → tab Console → ini playground JavaScript gratis kamu. Coba kode baru di sini dulu sebelum masuk ke file project. Semua error JavaScript juga muncul di sini — biasakan buka Console saat develop web.

Console — Tips debugging

// Cek nilai variabel
console.log("nilai:", variabel);

// Tampilkan sebagai tabel
console.table(arrayData);

// Ukur waktu eksekusi
console.time("proses");
// ... kode kamu ...
console.timeEnd("proses");

🔍 Debugging

2

GAS dan JavaScript Itu Saudara

Google Apps Script berbasis JavaScript — jadi kalau kamu sudah pakai GAS (Tips-004), kamu sudah kenal JavaScript! Konsep variabel, fungsi, if/else, dan loop semuanya sama. Yang berbeda hanya library built-in-nya — GAS punya SpreadsheetApp, DriveApp, dll. sedangkan JavaScript browser punya document, window, fetch, dll.

🔗 Koneksi GAS

3

Pakai Arrow Function untuk Kode Lebih Ringkas

Arrow function adalah cara penulisan fungsi yang lebih pendek di JavaScript modern. Banyak tutorial dan kode AI menggunakan ini — penting untuk dikenal meski tidak harus dihafalkan.

Fungsi biasa vs Arrow function

// Fungsi biasa
function tambah(a, b) {
  return a + b;
}

// Arrow function — lebih ringkas
const tambah = (a, b) => a + b;

// Keduanya menghasilkan hal yang sama

✨ Modern JS

4

JavaScript + HTML = Bisa Bikin Web Interaktif

Kombinasi HTML + CSS + JavaScript adalah trio yang bikin semua website modern bekerja. Kalau kamu sudah bisa bikin halaman HTML statis, tambahkan JavaScript untuk bikin tombol yang berfungsi, form yang validasi input, atau konten yang berubah tanpa reload. Mulai dari yang kecil — tambahkan satu event listener ke tombol yang sudah ada di project kamu!

🌐 Web Dev

Disclaimer

Catatan Penting

Sebelum kamu terjun ke JavaScript, ada beberapa hal yang perlu diketahui.

⚠️ Disclaimer

Tips dalam panduan ini fokus pada JavaScript dasar untuk pemula — sengaja disederhanakan agar mudah dipahami. JavaScript adalah bahasa yang sangat luas — ada Node.js untuk backend, React/Vue untuk framework frontend, dan masih banyak lagi yang tidak dibahas di sini.

Jangan simpan data sensitif (API key, password, token) di file JavaScript frontend — semua kode JavaScript di browser bisa dilihat oleh siapapun lewat View Source atau DevTools. Untuk keamanan, simpan data sensitif di backend/server.

Snippet kode yang ditampilkan menggunakan JavaScript modern (ES6+) — pastikan browser kamu up to date. Untuk referensi JavaScript yang lengkap dan akurat, kunjungi developer.mozilla.org (MDN Web Docs) — sumber terpercaya untuk semua hal JavaScript.

📋 Quick Reference

Coba Langsung

🌐 F12 → Console

Debug dengan

🔍 console.log()

Referensi Terbaik

📚 MDN Web Docs

Stuck? Tanya

🤖 Claude / ChatGPT

JavaScript,Bahasa Ajaib di Balik Web

Bahasa yang Menghidupkan Web

6 Konsep yang Wajib Dikenal

Script JavaScript yang Langsung Berguna

Kebiasaan Baik JavaScript dari Awal

Catatan Penting

JavaScript,
Bahasa Ajaib di Balik Web