kodescaramel.analiswinter.com

Cara Menulis Kode JavaScript pada HTML

Ditulis oleh

elmikafebrina@gmail.com

di

JavaScript adalah bahasa pemrograman yang sangat populer untuk membuat website menjadi lebih interaktif dan dinamis. Salah satu hal dasar yang harus dipahami saat belajar JavaScript adalah cara menuliskannya di dalam dokumen HTML. Pada artikel ini analiswinter.com akan membahas bagaimana cara menyisipkan kode JavaScript ke dalam HTML dengan benar dan efisien.

Ada beberapa metode untuk menambahkan JavaScript pada HTML, dan masing-masing memiliki kelebihan tersendiri. Kalian bisa menulis kode langsung di file HTML atau memisahkannya dalam file eksternal untuk manajemen yang lebih rapi.

Menulis JavaScript Langsung di HTML

Cara paling sederhana adalah menuliskan kode JavaScript langsung di dalam tag <script> pada file HTML. Tag ini bisa diletakkan di bagian <head> atau di akhir <body>.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh JavaScript</title>
    <script>
        function salam() {
            alert("Halo, selamat datang di situs kami!");
        }
    </script>
</head>
<body>
    <button onclick="salam()">Klik Aku</button>
</body>
</html>

Pada contoh di atas, fungsi salam() ditulis langsung dalam file HTML dan dipanggil saat tombol diklik.

Menulis JavaScript dalam File Eksternal

Untuk proyek yang lebih besar, disarankan memisahkan kode JavaScript dalam file terpisah dengan ekstensi .js. Hal ini membuat kode lebih mudah dikelola dan meningkatkan performa.

Contoh struktur file:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Eksternal</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="salam()">Klik Aku</button>
</body>
</html>

script.js

function salam() {
    alert("Halo dari file eksternal!");
}

Pastikan file script.js berada di lokasi yang sama dengan file HTML atau sesuaikan path-nya.

Kesimpulan

Cara menulis kode JavaScript pada HTML bisa dilakukan dengan dua metode utama, yaitu langsung dalam tag <script> atau melalui file eksternal. Kedua cara tersebut memiliki keunggulan masing-masing dan bisa digunakan sesuai kebutuhan. Itulah tadi artikel dari analiswinter.com, jika ada hal yang ingin ditanyakan bisa langsung ke kolom komentar!

More posts