JavaScript adalah bahasa pemrograman yang sangat populer untuk menambahkan interaktivitas dan dinamika pada halaman web. Salah satu cara paling umum untuk menggunakan JavaScript adalah dengan mengintegrasikannya langsung ke dalam file HTML. Berikut ini adalah panduan lengkap cara menulis kode JavaScript di HTML.

1. Menulis JavaScript di Dalam Tag <script>

Cara paling sederhana untuk menulis JavaScript di dalam HTML adalah dengan menggunakan tag <script>. Tag ini memungkinkan kalian untuk menyisipkan kode JavaScript langsung di bagian <head> atau <body> dari dokumen HTML.

Contoh Kode:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh JavaScript di HTML</title>
</head>
<body>
    <h1>Hello, World!</h1>

    <script>
        // Ini adalah kode JavaScript yang akan tampil di konsol
        console.log("Hello, World!");
    </script>
</body>
</html>

Pada contoh di atas, kode JavaScript ditulis di dalam tag <script> yang diletakkan di bagian <body>.

2. Menambahkan JavaScript Eksternal

Selain menulis JavaScript langsung di dalam HTML, kalian juga bisa menyimpan kode JavaScript di file terpisah dengan ekstensi .js. Setelah itu, panggil file JavaScript tersebut di dalam HTML menggunakan atribut src di tag <script>. Metode ini sangat berguna untuk membuat kode lebih rapi dan terorganisir.

Contoh Kode:

  1. Buat file JavaScript eksternal, misalnya script.js:
    console.log("Ini adalah kode dari file JavaScript eksternal.");
  2. anggil file script.js di dalam HTML:
    <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Eksternal</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Menggunakan File JavaScript Eksternal</h1>
</body>
</html>

3. Menulis JavaScript Inline

Kalian juga bisa menulis JavaScript langsung di dalam elemen HTML menggunakan atribut onclick, onmouseover, onchange, dan lainnya. Metode ini sering disebut JavaScript inline.

Contoh Kode:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Inline</title>
</head>
<body>
    <h1>Menggunakan JavaScript Inline</h1>
    <button onclick="alert('Tombol diklik!')">Klik Saya</button>
</body>
</html>

Pada contoh ini, fungsi JavaScript alert langsung dipanggil ketika tombol diklik.

4. Menempatkan JavaScript di <head> atau <body>

Kalian bisa menempatkan tag <script> baik di bagian <head> maupun <body>. Namun, perlu diingat bahwa penempatan ini dapat mempengaruhi kinerja halaman:

  • JavaScript di <head>: Biasanya di-load sebelum seluruh halaman HTML selesai diproses. Hal ini dapat memperlambat waktu muat halaman.
  • JavaScript di <body> atau akhir <body>: Membuat halaman memuat lebih cepat karena HTML akan diproses terlebih dahulu sebelum JavaScript di-load.

5. Menggunakan async dan defer untuk Optimasi

Tag <script> mendukung atribut async dan defer, yang membantu dalam pengaturan kapan kode JavaScript akan di-load.

  • async: Script akan dimuat bersamaan dengan HTML, tetapi eksekusi akan terjadi segera setelah script selesai di-load.
  • defer: Script akan di-load setelah HTML selesai dimuat sepenuhnya.

Contoh Kode:

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

Berikut ini adalah contoh lengkap HTML yang mencakup beberapa cara untuk menulis kode JavaScript:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Menulis JavaScript di HTML</title>
    
    <!-- JavaScript Internal -->
    <script>
        function showMessage() {
            alert("Ini adalah pesan dari JavaScript internal di dalam tag <script>!");
        }
    </script>
    
    <!-- JavaScript Eksternal -->
    <script src="script.js" defer></script> <!-- script.js adalah file eksternal -->
</head>
<body>
    <h1>Contoh Implementasi JavaScript di HTML</h1>
    
    <!-- JavaScript Inline -->
    <button onclick="alert('Tombol dengan JavaScript Inline di-klik!')">Klik Saya (JavaScript Inline)</button>

    <br><br>

    <!-- Menggunakan JavaScript Internal -->
    <button onclick="showMessage()">Klik Saya (JavaScript Internal)</button>

    <br><br>
    
    <!-- Bagian yang menampilkan hasil dari JavaScript Eksternal -->
    <div id="externalResult"></div>
</body>
</html>
Demo

Penjelasan Contoh di Atas:

  1. JavaScript Internal:
    • Fungsi showMessage() ditulis langsung di dalam tag <script> pada bagian <head>. Kalian bisa memanggilnya melalui tombol yang memiliki onclick="showMessage()".
  2. JavaScript Eksternal:
    • File eksternal bernama script.js dipanggil dengan src="script.js". Atribut defer memastikan bahwa skrip ini akan dimuat setelah HTML selesai diproses.
    • Di dalam script.js, kalian bisa menambahkan kode JavaScript seperti berikut:
      document.getElementById("externalResult").innerText = "Ini adalah teks yang dimuat dari JavaScript eksternal.";
  3. JavaScript Inline:
    • Pada tombol pertama, JavaScript langsung ditulis dalam atribut onclick, yang akan menampilkan alert ketika tombol diklik.

Dengan contoh di atas, kalian bisa melihat berbagai cara untuk mengintegrasikan JavaScript ke dalam HTML. Pastikan file script.js berada di direktori yang sama atau sesuaikan jalurnya agar bisa terbaca dengan benar.

Categorized in:

JavaScript,

Last Update: November 9, 2024