🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

01

Mengenal Sang Otak: Apa itu JavaScript?

📖 8 menit baca 🏷️ Pemula

Selamat datang di dunia Programming Sesungguhnya. Jika HTML adalah kerangka tulang, dan CSS (Tailwind) adalah kulit serta pakaiannya yang indah, maka JavaScript (JS) adalah Otak dan Sistem Sarafnya.

Tanpa JavaScript, sebuah website hanyalah brosur digital statis yang mati. Dengan JavaScript, website menjadi aplikasi interaktif yang hidup, bisa menghitung, mengambil data, dan merespon setiap sentuhan pengguna.

🦕 1. Lahir dalam 10 Hari (Sejarah Singkat)

Meskipun namanya mengandung kata "Java", JavaScript TIDAK ADA HUBUNGANNYA sama sekali dengan bahasa pemrograman Java. Ini murni strategi pemasaran belaka di tahun 1995.

🕒

Diciptakan Ngebut

Dibuat oleh Brendan Eich (Netscape) hanya dalam waktu 10 hari saja pada tahun 1995 agar browser bisa memiliki sedikit interaksi.

🌎

Bahasa Universal Web

Satu-satunya bahasa pemrograman di muka bumi yang secara native dimengerti oleh SEMUA Browser (Chrome, Safari, Firefox, Edge).

Evolusi ES6
🚀

Bukan Hanya "Mainan"

Kini dipakai untuk Backend (Node.js), Mobile Apps (React Native), Desktop (Electron), dan AI cerdas. JS merajai galaksi!

⚙️ 2. Cara Kerja Javascript (DOM)

Cara utama JavaScript menghidupkan halaman web adalah dengan berinteraksi dengan DOM (Document Object Model). Anggap saja DOM adalah jembatan penghubung antara kode Javascript-mu dengan tag-tag HTML (seperti <h1>, <button>).

DOM (Struktur Halaman)

Document
<html>
<head>
<body>
<h1>
<button>

Mesin JavaScript

// JavaScript memberi perintah: const judul = document.querySelector('h1'); judul.innerHTML = "Teks Berubah!"; judul.style.color = "red";

JS mencari elemen h1 di dalam DOM, lalu merubah Teks dan Warnanya secara *real-time*!

📥 3. Di Mana Menulis Kode JS?

Sama persis seperti CSS, kamu bisa menulis JavaScript langsung di dalam file HTML (Internal) atau memisahkannya ke file khusus berekstensi .js (External). Aturan Emasnya: Selalu taruh tag script di bagian paling bawah tag <body> sebelum penutup, agar HTML bisa dimuat secara visual terlebih dahulu.

Cara 1: Internal Script (Di dalam HTML)

<body> <h1>Halo Dunia</h1> <button>Klik Saya</button> <script> alert('Popup selamat datang muncul!'); </script> </body>

Cara 2: External Script Disarankan

<body> <h1>Halo Dunia</h1> <button>Klik Saya</button> <!-- Import file app.js terpisah --> <script src="app.js"></script> </body>

🪄 Laboratorium Rahasia: Inspect Element Console

Kamu tidak butuh aplikasi canggih untuk mulai latihan JavaScript! Setiap Browser (Chrome) memiliki lingkungan eksekusi JS rahasia bernama Developer Console.

  1. Klik kanan di mana saja pada halaman ini, lalu pilih Inspect (Inspeksi).
  2. Pilih tab pindah ke Console.
  3. Ketikkan 2 + 2 lalu tekan Enter, browser akan menjawab 4!
  4. Ketikkan alert('Halo dari Masa Depan') dan tekan Enter. Keajaiban akan muncul! Panggung peretasan JS pertamamu siap digunakan.