Beginner · Level 4: JavaScript FundamentalsBeginner45 menitBahasa Indonesia

Menghubungkan index.html, style.css, dan script.js

Hubungkan tiga file utama local app dan pastikan browser membaca CSS serta JavaScript.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menghubungkan CSS ke HTML dengan link stylesheet
Menghubungkan JavaScript ke HTML dengan script defer
Membuka halaman lokal di browser
Mengecek apakah file terbaca dengan perubahan kecil

HTMLCSSJavaScriptLocal Workflow

Isi lesson

6 blok

1.
Tiga file harus saling mengenalBelum selesaiWajib
2.
index.html yang menghubungkan CSS dan JSBelum selesaiWajib
3.
script.js untuk mengecek koneksiBelum selesaiWajib
4.
Checklist local taskBelum selesaiWajib
5.
Nama file harus persisBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Tiga file harus saling mengenal

Wajib

Local app sederhana biasanya punya tiga bagian utama. HTML menentukan elemen yang ada di halaman. CSS menentukan tampilannya. JavaScript membaca elemen dari HTML, lalu menambahkan behavior saat user berinteraksi.

Masalah umum beginner bukan logika JavaScript yang rumit, tetapi file yang belum tersambung. CSS tidak berubah karena path href salah. JavaScript tidak berjalan karena script belum dipasang atau dipasang sebelum elemen HTML siap dibaca.

Di lesson ini, kamu akan memastikan browser membaca style.css dan script.js dari index.html.

Bagian ini memengaruhi progres lesson.

index.html yang menghubungkan CSS dan JS

Wajib

html

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS Notes</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <main class="app">
      <h1>Vanilla JS Notes</h1>
      <p id="status">JavaScript belum dicek.</p>
      <button id="checkButton">Cek JavaScript</button>
    </main>
  </body>
</html>

link menghubungkan style.css. script dengan defer membuat script.js dijalankan setelah HTML siap dibaca, sehingga querySelector lebih aman untuk elemen yang ada di body.

Bagian ini memengaruhi progres lesson.

script.js untuk mengecek koneksi

Wajib

const statusText = document.querySelector("#status");
const checkButton = document.querySelector("#checkButton");

checkButton.addEventListener("click", function () {
  statusText.textContent = "JavaScript sudah terhubung.";
});

Jika tombol bisa mengubah teks, berarti index.html berhasil membaca script.js dan elemen yang dipilih memang ada.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di project lokal kamu:

Isi index.html dengan struktur dasar yang punya h1, p status, dan button.
Hubungkan style.css lewat link rel stylesheet.
Hubungkan script.js lewat script src dengan defer.
Tambahkan style kecil di style.css, misalnya warna background atau font-size h1.
Tambahkan JavaScript kecil yang mengubah teks saat tombol diklik.
Buka index.html di browser dan klik tombolnya.
Jika tidak berubah, cek nama file, path, id elemen, dan Console di DevTools.

Tandai selesai setelah CSS terlihat dan JavaScript tombol bekerja di browser lokal.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Nama file harus persis

script.js, Script.js, dan scripts.js adalah nama yang berbeda. Jika src di HTML tidak sama persis dengan nama file, browser tidak akan membaca file JavaScript kamu.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

index.html menjadi tempat CSS dan JavaScript dihubungkan.
style.css dihubungkan dengan link rel stylesheet.
script.js dihubungkan dengan script src dan defer.
Perubahan CSS dan klik tombol adalah cara cepat mengecek apakah file terbaca.
Berikutnya kamu akan membuat interaksi kecil yang lebih mirip fitur app.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tiga file harus saling mengenal.

Memuat progres Review module