Menulis Kode JavaScript dalam HTML

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024

www.gurudzgn.com -  Sebelum lebih jauh ke materi kita caritahu dulu kenapasih kita harus nulis JavaScript dalam HTML kita.

Menulis Kode JavaScript dalam HTML

Mengapa Menulis Kode JavaScript dalam HTML?

Sebelum kita membahas cara menulis kode JavaScript dalam HTML, penting untuk memahami mengapa pendekatan ini digunakan. Berikut beberapa alasan utama mengapa pengembang web memilih untuk menyematkan kode JavaScript langsung di halaman HTML:

1. Interaktivitas yang Lebih Baik

Dengan menyisipkan JavaScript langsung di halaman HTML, Anda dapat dengan mudah menambahkan interaktivitas ke dalam elemen dan bagian tertentu dari situs web. Misalnya, Anda dapat menampilkan pesan popup, mengubah isi elemen, atau menangani interaksi pengguna dengan cepat dan efisien.

2. Mengakses dan Memanipulasi DOM

JavaScript memungkinkan Anda untuk mengakses dan memanipulasi struktur DOM (Document Object Model) pada halaman web. Dengan menyisipkan kode JavaScript langsung dalam HTML, Anda dapat dengan mudah merujuk dan memanipulasi elemen secara langsung saat halaman dimuat atau pengguna berinteraksi dengan situs web.

3. Kustomisasi yang Lebih Mudah

Dengan menulis kode JavaScript langsung di halaman HTML, Anda memiliki fleksibilitas penuh untuk mengkustomisasi perilaku situs web secara spesifik dan langsung. Anda dapat dengan mudah menyesuaikan fungsi, peristiwa, dan efek sesuai dengan kebutuhan Anda.

4. Penyederhanaan Proyek Kecil

Untuk proyek kecil atau halaman web yang tidak memerlukan banyak JavaScript, menyematkan kode langsung dalam HTML dapat menjadi pendekatan yang lebih sederhana dan cepat daripada membuat file eksternal terpisah.

5. Latihan dan Pembelajaran

Bagi pemula yang ingin belajar JavaScript, menulis kode langsung dalam HTML dapat membantu mereka memahami dasar-dasar bahasa dan melihat hasilnya dengan cepat.

Meskipun menulis kode JavaScript dalam HTML memiliki keuntungan, ini bukanlah pendekatan terbaik untuk proyek besar atau kompleks. Pada proyek yang lebih besar, lebih disarankan untuk memisahkan JavaScript ke dalam file eksternal dan menggunakan teknik modularisasi untuk mengelola kode dengan lebih efisien.

Penempatan Skrip JavaScript

Saat menulis kode JavaScript dalam HTML, ada beberapa cara untuk menyematkan skrip. Berikut adalah cara umum yang sering digunakan:

1. Menempatkan Kode JavaScript di dalam Tag <script> di Bagian <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Penempatan Skrip dalam Tag Head</title>
    <script>
        // Kode JavaScript Anda di sini
        function greeting() {
            alert('Halo, Selamat datang di situs kami!');
        }
    </script>
</head>
<body>

    <!-- Isi halaman web -->

</body>
</html>

Penempatan skrip di bagian <head> adalah pendekatan yang umum digunakan, tetapi perlu diperhatikan bahwa kode JavaScript di sini akan dieksekusi sebelum konten halaman selesai dimuat. Ini dapat menyebabkan masalah ketika skrip mencoba memanipulasi elemen yang belum ada di DOM.

2. Praktek Terbaik untuk Menulis Kode JavaScript dalam HTML

Menulis kode JavaScript langsung dalam HTML seperti diatas dapat menjadi cara cepat dan mudah untuk menambahkan fungsionalitas ke situs web Anda. Namun, ada beberapa praktek terbaik yang perlu Anda pertimbangkan agar kode Anda lebih terstruktur, aman, dan mudah dipelihara. Dalam bagian ini, kami akan menjelaskan beberapa praktek terbaik yang dapat membantu Anda meningkatkan kualitas kode JavaScript dalam HTML.

A. Pisahkan Kode JavaScript dari Markup

Salah satu praktek terbaik yang paling penting adalah memisahkan kode JavaScript dari markup HTML. Meskipun Anda dapat menyisipkan skrip langsung di halaman HTML, lebih baik untuk menyimpan kode JavaScript dalam file eksternal dengan ekstensi ".js". Ini memudahkan pemeliharaan kode dan memungkinkan Anda menggunakan teknik modularisasi seperti CommonJS atau ES Modules.

Contoh penggunaan file eksternal dengan tag <script>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Penggunaan File Eksternal dengan Tag Script</title>
    <script src="lib/js/script-mu.js"></script>
</head>
<body>

    <!-- Isi halaman web -->

</body>
</html>

B. Gunakan Atribut defer atau async pada Tag <script>

Ketika Anda menyisipkan skrip JavaScript di dalam tag <head>, ada kemungkinan bahwa skrip dieksekusi sebelum seluruh halaman selesai dimuat. Hal ini dapat menyebabkan masalah dengan akses ke elemen DOM yang belum ada saat itu. Untuk menghindari masalah ini, Anda dapat menggunakan atribut defer atau async pada tag <script>.

Atribut defer: 

Skrip akan dieksekusi setelah halaman selesai dimuat, tetapi tetap akan dijalankan dalam urutan sesuai dengan penempatannya dalam dokumen.

Atribut async:

Skrip akan dieksekusi segera setelah selesai diunduh, tanpa memperhatikan urutan dengan elemen lain di halaman.

Contoh penggunaan atribut defer atau async:

<script defer src="path/to/your-script.js"></script>
Untuk async sama saja hanya tinggal mengubah defer menjadi async.

C. Gunakan Pustaka Eksternal (Libraries)

Pustaka JavaScript eksternal atau yang lebih dikenal sebagai "libraries" atau mungkin anda pernah mendengar Content Delivery Network (CDN) adalah kumpulan kode yang sudah dibuat sebelumnya untuk menyelesaikan tugas tertentu. Misalnya, Anda dapat menggunakan jQuery untuk mengakses dan memanipulasi elemen DOM dengan lebih mudah.

Dengan menggunakan pustaka eksternal, Anda dapat menghemat waktu dan usaha karena Anda tidak perlu menulis ulang kode yang sering digunakan.

Contoh penggunaan pustaka eksternal dengan tag <script>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Penggunaan Pustaka Eksternal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>

    <!-- Isi halaman web -->

</body>
</html>

Kesimpulan

Menulis kode JavaScript dalam HTML adalah langkah pertama yang penting untuk meningkatkan interaktivitas situs web Anda. Dengan mengikuti praktek terbaik seperti memisahkan kode JavaScript dari markup, menggunakan atribut defer atau async, memanfaatkan pustaka eksternal. Teruslah belajar dan berlatih untuk meningkatkan keterampilan pemrograman JavaScript Anda, dan Anda akan dapat mengembangkan pengalaman pengguna yang lebih baik dan lebih interaktif.

Rafiqi, S.Kom.