AHLI NGODINK
Learning PathTersimpanSemua Artikel Telegram
Dasar Web

Cara Menghubungkan JavaScript ke HTML dengan Benar

Pelajari cara menghubungkan JavaScript ke HTML menggunakan inline script, internal script, dan external JavaScript, termasuk penggunaan atribut defer dan praktik terbaik untuk pemula.

Ditulis Ahli Ngodink 8 menit membaca

Setelah memahami dasar JavaScript, langkah berikutnya adalah mempelajari bagaimana JavaScript dihubungkan dengan dokumen HTML. Proses ini penting karena JavaScript membutuhkan halaman HTML sebagai tempat untuk membaca, mengubah, dan memberikan interaksi terhadap elemen yang ditampilkan di browser.

Ada beberapa cara untuk menambahkan JavaScript ke HTML. Namun untuk proyek website yang rapi dan mudah dikembangkan, penggunaan file JavaScript terpisah atau external JavaScript biasanya menjadi pilihan terbaik.

Jika kamu masih mempelajari konsep dasarnya, baca terlebih dahulu Apa Itu JavaScript? Pengertian, Fungsi, dan Contoh untuk Pemula.

Cara Menghubungkan JavaScript ke HTML

Secara umum terdapat tiga cara menggunakan JavaScript di dalam halaman HTML:

  1. Inline JavaScript.
  2. Internal JavaScript.
  3. External JavaScript.

Ketiganya dapat digunakan, tetapi memiliki fungsi dan tingkat kerapian yang berbeda.

1. Inline JavaScript

Inline JavaScript berarti kode JavaScript ditulis langsung pada atribut elemen HTML.

Contohnya:

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

Ketika tombol diklik, browser akan menjalankan perintah JavaScript pada atribut onclick.

Cara ini cukup mudah untuk percobaan sederhana, tetapi kurang direkomendasikan untuk proyek yang mulai berkembang.

Jika terlalu banyak JavaScript ditulis langsung di HTML, struktur halaman akan menjadi lebih sulit dibaca dan dirawat.

2. Internal JavaScript

Internal JavaScript berarti kode JavaScript ditulis langsung di dalam dokumen HTML menggunakan elemen <script>.

Contohnya:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">
  <title>Belajar JavaScript</title>
</head>

<body>

  <h1>Belajar JavaScript</h1>

  <button id="tombol">
    Klik Saya
  </button>

  <script>

    const tombol =
      document.getElementById("tombol");

    tombol.addEventListener(
      "click",
      () => {
        alert("Halo!");
      }
    );

  </script>

</body>

</html>

Pada contoh tersebut, JavaScript berada di bagian bawah <body>.

Internal JavaScript masih cukup praktis untuk halaman kecil atau eksperimen, tetapi ketika kode mulai panjang, sebaiknya JavaScript dipisahkan ke file tersendiri.

3. External JavaScript

External JavaScript berarti kode JavaScript disimpan pada file terpisah, biasanya menggunakan ekstensi .js.

Contoh struktur proyek:

website/
│
├── index.html
├── style.css
└── script.js

File index.html:

<!DOCTYPE html>
<html lang="id">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Website JavaScript
  </title>

  <link
    rel="stylesheet"
    href="style.css"
  >

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

</head>

<body>

  <h1>
    Belajar JavaScript
  </h1>

  <button id="tombol">
    Klik Saya
  </button>

</body>

</html>

Kemudian isi file script.js:

const tombol =
  document.getElementById("tombol");

tombol.addEventListener(
  "click",
  () => {
    alert("JavaScript berhasil terhubung!");
  }
);

Ketika halaman dibuka dan tombol diklik, JavaScript dari file script.js akan dijalankan.

Apa Fungsi src pada Script?

Atribut src digunakan untuk menentukan lokasi file JavaScript.

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

Jika JavaScript berada di dalam folder:

website/
│
├── index.html
│
└── js/
    └── script.js

maka penulisannya menjadi:

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

Path harus sesuai dengan posisi file pada struktur folder website.

Apa Itu Atribut defer?

Atribut defer digunakan agar browser tetap membaca HTML sambil mengunduh file JavaScript, kemudian menjalankan JavaScript setelah struktur HTML selesai diproses.

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

Ini sangat berguna jika JavaScript perlu mengakses elemen HTML.

Contohnya:

const tombol =
  document.getElementById("tombol");

Jika JavaScript dijalankan sebelum elemen dengan ID tombol tersedia, browser dapat menghasilkan nilai null.

Dengan defer, JavaScript akan dijalankan setelah HTML selesai dibaca.

JavaScript di Bagian Head

Jika menggunakan defer, script dapat ditempatkan di bagian <head>.

<head>

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

</head>

Pendekatan ini cukup rapi karena file CSS dan JavaScript dapat dideklarasikan pada bagian head.

JavaScript Sebelum Penutup Body

Cara lain yang sering digunakan adalah menempatkan script sebelum </body>.

<body>

  <button id="tombol">
    Klik Saya
  </button>

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

</body>

Karena browser sudah membaca sebagian besar HTML sebelum mencapai script tersebut, elemen HTML biasanya sudah tersedia saat JavaScript dijalankan.

Namun pada proyek modern, penggunaan defer di bagian head merupakan pendekatan yang jelas dan mudah dipahami.

Contoh Proyek HTML CSS dan JavaScript

Berikut contoh sederhana untuk memahami bagaimana ketiga file saling bekerja.

Struktur folder:

website/
│
├── index.html
├── style.css
└── script.js

index.html

<!DOCTYPE html>
<html lang="id">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Website Interaktif
  </title>

  <link
    rel="stylesheet"
    href="style.css"
  >

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

</head>

<body>

  <main class="container">

    <h1 id="judul">
      Belajar JavaScript
    </h1>

    <p id="pesan">
      Klik tombol di bawah.
    </p>

    <button id="tombol">
      Klik Saya
    </button>

  </main>

</body>

</html>

style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  width: min(700px, 90%);
  margin: 80px auto;
  text-align: center;
}

button {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

script.js

const tombol =
  document.getElementById("tombol");

const pesan =
  document.getElementById("pesan");

tombol.addEventListener(
  "click",
  () => {
    pesan.textContent =
      "JavaScript berhasil dijalankan!";
  }
);

Pada contoh tersebut:

  • HTML membuat struktur halaman.
  • CSS mengatur tampilan.
  • JavaScript memberikan interaksi.

Untuk memahami pembagian tersebut lebih dalam, baca Perbedaan HTML, CSS, dan JavaScript.

Cara Mengecek JavaScript Sudah Terhubung

Cara paling sederhana adalah menambahkan:

console.log(
  "JavaScript berhasil terhubung"
);

Kemudian buka Developer Tools browser dan pilih tab Console.

Jika pesan muncul, berarti file JavaScript sudah berhasil dibaca oleh browser.

Menggunakan Developer Tools

Pada Google Chrome atau browser modern lainnya, Developer Tools dapat membantu melihat masalah JavaScript.

Kamu dapat membuka Developer Tools menggunakan:

F12

atau:

Ctrl + Shift + I

Kemudian pilih tab:

Console

Jika ada masalah, browser biasanya menampilkan pesan error yang dapat membantu menemukan penyebabnya.

Error File JavaScript Tidak Ditemukan

Salah satu masalah yang sering terjadi adalah path file JavaScript salah.

Misalnya struktur folder:

website/
│
├── index.html
└── assets/
    └── script.js

Tetapi pada HTML ditulis:

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

Browser akan mencari file di lokasi yang salah.

Seharusnya:

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

Error Cannot Read Properties of Null

Error ini sering muncul ketika JavaScript mencoba mengakses elemen HTML yang belum tersedia atau selector yang digunakan salah.

Contohnya:

const tombol =
  document.getElementById("button");

Sedangkan HTML:

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

ID button dan tombol berbeda, sehingga elemen tidak ditemukan.

Pastikan nama selector pada JavaScript sama dengan yang digunakan pada HTML.

Lupa Menggunakan defer

Misalnya script diletakkan di bagian head:

<head>

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

</head>

Sementara JavaScript langsung mengambil elemen yang berada di body.

Solusi sederhana:

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

Menggunakan Lebih dari Satu File JavaScript

Satu halaman dapat menggunakan beberapa file JavaScript.

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

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

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

Namun untuk proyek kecil, tidak perlu memecah file secara berlebihan. Pisahkan file ketika struktur aplikasi memang sudah membutuhkan pembagian tanggung jawab yang lebih jelas.

Perhatikan Urutan File JavaScript

Jika satu file JavaScript membutuhkan kode dari file lain, urutan pemanggilan menjadi penting.

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

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

Jika app.js membutuhkan data dari config.js, pastikan file yang menyediakan data dipanggil lebih dahulu.

Hindari Mencampur Semua Kode

Untuk proyek yang mulai berkembang, hindari pola seperti:

<button
  style="background: blue;"
  onclick="alert('Klik')"
>
  Klik
</button>

Lebih baik pisahkan tanggung jawab:

HTML:

<button
  class="button"
  id="tombol"
>
  Klik
</button>

CSS:

.button {
  background: blue;
}

JavaScript:

const tombol =
  document.getElementById("tombol");

tombol.addEventListener(
  "click",
  () => {
    alert("Klik");
  }
);

Pemisahan tersebut membuat kode lebih mudah dibaca dan dikembangkan.

Praktik Terbaik untuk Pemula

Saat mulai menggunakan JavaScript bersama HTML, beberapa kebiasaan berikut dapat membantu:

  • Gunakan external JavaScript untuk proyek.
  • Gunakan atribut defer.
  • Gunakan nama file yang jelas.
  • Gunakan ID atau class yang mudah dipahami.
  • Periksa Console ketika terjadi error.
  • Jaga struktur folder tetap rapi.
  • Hindari JavaScript inline jika tidak diperlukan.

Struktur Folder yang Direkomendasikan

Untuk proyek sederhana:

website/
│
├── index.html
├── style.css
├── script.js
│
└── images/
    └── logo.png

Jika proyek mulai bertambah:

website/
│
├── index.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── images/
    └── logo.png

Kemudian pada HTML:

<link
  rel="stylesheet"
  href="css/style.css"
>

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

Apa yang Dipelajari Setelah JavaScript Terhubung?

Setelah berhasil menghubungkan JavaScript dengan HTML, langkah berikutnya adalah memahami bagaimana JavaScript mengakses dan memanipulasi elemen halaman.

Materi penting berikutnya meliputi:

  • DOM.
  • querySelector.
  • Event.
  • Form validation.
  • LocalStorage.
  • Fetch API.

Konsep-konsep tersebut akan membuat kamu mampu membangun halaman yang jauh lebih interaktif.

Praktik dengan Website Pertama

Cara terbaik untuk memahami hubungan HTML, CSS, dan JavaScript adalah menggunakannya dalam satu proyek.

Kamu dapat mengikuti panduan Cara Membuat Website Pertama dari Nol untuk mencoba membuat struktur, tampilan, dan interaksi sederhana.

Apakah JavaScript Bisa Berjalan Setelah Website Di-upload?

Bisa. JavaScript frontend akan tetap berjalan ketika website dipublikasikan selama file dan path yang digunakan benar.

Misalnya:

public_html/
│
├── index.html
├── style.css
└── script.js

Jika HTML menggunakan:

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

browser dapat mengambil file tersebut dari server.

Untuk proses publikasi, baca Cara Upload Website HTML ke cPanel.

Kesimpulan

JavaScript dapat dihubungkan ke HTML menggunakan inline, internal, atau external JavaScript. Untuk proyek website yang lebih rapi, external JavaScript merupakan pendekatan yang paling mudah dipelihara.

Gunakan elemen <script> dengan atribut src untuk memanggil file JavaScript. Jika script ditempatkan pada bagian <head>, gunakan atribut defer agar kode dijalankan setelah HTML selesai diproses.

Setelah JavaScript berhasil terhubung, kamu dapat mulai mempelajari DOM dan event untuk membuat halaman website yang benar-benar interaktif.

Topik: #Dasar Web #DOM #HTML #JavaScript #Pemula #Script #Web Development
Lanjut Belajar
Semua artikel →

Artikel berikutnya

Apa Itu JavaScript? Pengertian, Fungsi, dan Contoh untuk Pemula →