Menulis js pada file HTML - Referensi javascript

Ketika kita ingin memasukkan kode JavaScript ke dalam file HTML, kita memiliki beberapa pilihan:

menulis di file terpisah (external file)
menulis di file HTML yang sama (in page)

Menulis Kode JavaScript Langsung dalam File HTML

Untuk menulis kode JavaScript secara langsung di dalam file HTML, kita dapat menggunakan elemen <script>. Kita dapat meletakkan elemen ini di bagian manapun dalam dokumen HTML, tetapi umumnya diletakkan di bagian <head> atau di akhir bagian <body> sebelum tag penutup </body>.

Berikut adalah contoh penggunaannya:

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

<p id="demo">Contoh paragraf.</p>

<script>
  document.getElementById("demo").innerHTML = "Paragraf ini telah diubah oleh JavaScript.";
</script>

</body>
</html>

Dalam contoh di atas, kode JavaScript digunakan untuk mengubah teks dari elemen <p> dengan ID “demo”.

Menyertakan File JavaScript Eksternal

Kita juga dapat menulis kode JavaScript kita dalam file terpisah dengan ekstensi .js dan kemudian menyertakannya di file HTML kita menggunakan atribut src dari elemen <script>. Berikut adalah contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Menyertakan File JavaScript Eksternal</title>
</head>
<body>

<p id="demo">Contoh paragraf.</p>

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

</body>
</html>

Dalam file script.js, kita bisa memiliki kode JavaScript seperti ini:

document.getElementById("demo").innerHTML = "Paragraf ini telah diubah oleh JavaScript eksternal.";