Tujuan Pembelajaran

Memahami perbedaan eksekusi sinkron dan asinkron
Mengerti kenapa JavaScript butuh asinkron

Analogi

Diagram


      Sinkron = 1 Loket:
[A]→[B]→[C]→[D] (Nunggu bergiliran)

Asinkron = Banyak Loket:
[Loket1] [Loket2] [Loket3]
   ↑        ↑        ↑
   A        B        C
(Parallel!)

Sinkron = satu per satu, Asinkron = banyak task berjalan paralel

Penjelasan Konsep

Kalau HTML adalah kerangka rumah — fondasi, dinding, dan struktur — maka CSS (Cascading Style Sheets) adalah dekorasi interior: cat dinding,

Warna pintu, jenis lampu, furniture, hiasan, dan tata letak ruangan.

Tanpa CSS, setiap halaman web akan terlihat sama: teks hitam di latar belakang putih, tanpa warna,

Tanpa layout yang menarik, tanpa animasi — seperti rumah yang belum dihuni dan didekorasi.

Bisa dipakai?

Bisa.

Tapi nyaman dan indah? Jauh dari itu.

Apa itu CSS?

CSS adalah bahasa stylesheet yang mengontrol tampilan dan layout elemen HTML. CSS menjawab pertanyaan-pertanyaan seperti: Berapa ukuran font heading ini? Warna latar belakang halaman apa?

Seberapa lebar sidebar? Gambar ini di sebelah kiri atau kanan? Tombol ini berwarna apa saat di-hover? Semua itu adalah tugas CSS.

Dengan CSS, kamu bisa mengubah website yang polos menjadi halaman yang indah, profesional,

Dan memukau.

Sejarah Singkat CSS

CSS pertama kali diusulkan oleh Håkon Wium Lie pada tahun 1994 di CERN — tempat yang sama HTML diciptakan!

Sebelum CSS, styling ditaruh langsung di HTML (attribute seperti <font color="red">) yang membuat kode berantakan dan sulit dipelihara.

CSS memisahkan konten (HTML) dari presentasi (CSS) — prinsip yang sangat penting dalam software engineering.

Versi terbaru adalah CSS3 yang membawa fitur seperti flexbox, grid, animasi, gradient, shadow, dan responsive design.

Tiga Cara Menyambungkan CSS ke HTML

1. Inline CSS — Style langsung di tag HTML menggunakan attribute `style`.

Contoh: <p style="color: red; font-size: 16px;"> Keuntungan: cepat untuk testing. Kekurangan: tidak reusable, sulit dipelihara, campur aduk konten dan style. Hindari untuk production!

Internal CSS

Style ditulis di dalam tag <style> di head dokumen. Cocok untuk halaman tunggal atau prototype.

Tapi kalau punya banyak halaman, style harus di-copy ke setiap halaman — tidak efisien!

3. External CSS (REKOMENDASI) — Style ditulis di file terpisah (`.css`) dan disambungkan dengan `<link>`.

Keuntungan: satu file CSS bisa dipakai oleh banyak halaman HTML,

Browser cache file CSS sehingga loading halaman berikutnya lebih cepat, dan pemisahan concerns yang bersih antara konten dan style.

Ini adalah cara yang digunakan 99% website profesional.

Sintaks CSS

CSS terdiri dari aturan-aturan (rules).

Setiap aturan punya dua bagian:

selector {
  property: value;
}

Selector: Menentukan ELEMEN HTML mana yang akan di-styling.

Contoh: h1, .class, #id

Property: Aspek apa yang ingin diubah.

Contoh: color, font-size, background

Value: Nilai baru untuk property tersebut.

Contoh: red, 16px, #ffffff

Contoh lengkap:

h1 {
  color: navy;
  font-size: 32px;
  text-align: center;
}

Artinya: “Semua elemen h1, ubah warna teksnya menjadi navy, ukuran font 32 piksel, dan rata tengah.”

Cascading

Cascading dalam CSS artinya style bisa “menurun” dan “ditumpuk.” Beberapa aturan bisa berlaku untuk elemen yang sama,

Dan CSS punya mekanisme untuk menentukan aturan mana yang “menang” — ini disebut specificity dan akan kita pelajari di chapter selanjutnya.

Kenapa memisahkan CSS dari HTML penting?

Karena ini adalah prinsip separation of concerns — setiap teknologi punya tugasnya sendiri: HTML untuk struktur dan makna, CSS untuk tampilan, JavaScript untuk perilaku.

Pemisahan ini membuat kode lebih mudah dipelihara, lebih mudah dikerjakan tim (satu orang kerja HTML, satu orang kerja CSS),

Dan lebih fleksibel (bisa mengganti tema tanpa mengubah HTML).

Jadi, HTML adalah TULANG, CSS adalah KULIT dan PAKEAIAN, dan JavaScript adalah OTOT yang membuatnya bergerak.

Ketiganya bekerja sama untuk menciptakan pengalaman web yang lengkap.

Contoh Kode

javascript

// SINKRON: Berurutan, blocking
console.log('1. Mulai');
console.log('2. Proses...');
for (let i = 0; i < 1000000000; i++) {} // Lambat!
console.log('3. Selesai');

// ASINKRON: Tidak blocking
console.log('1. Mulai');
setTimeout(() => {
  console.log('3. Ini jalan nanti');
}, 2000);
console.log('2. Langsung lanjut!');

// ASINKRON: Fetch API
console.log('1. Request data...');
fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => console.log('3. Data:', data));
console.log('2. Lanjut tanpa nunggu!');

Penjelasan Kode

Baris 1-4: Sinkron — for loop blocking. Baris 7-11: setTimeout asinkron. Baris 14-17: Fetch API asinkron.

Prompt AI

Jelaskan kenapa JavaScript disebut 'single-threaded' tapi bisa menjalankan kode asinkron. Apa itu event loop?

Pertanyaan Reflektif

Coba tulis kode fetch(). Gunakan console.log() sebelum dan sesudah. Apa urutan outputnya?

Sinkron vs Asinkron: Antrian di Bank