Cara Membuat JavaScript Di HTML

View Categories

Cara Membuat JavaScript Di HTML

Coding JavaScript ditulis di dalam elemen script. Elemen script dibuka memakai tag <script> dan ditutup memakai tag </script>.

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Jalankan Contoh

Tag script mempunyai atribut type. Atribut type tidak wajib ditulis, sifatnya hanya opsional. Cara penulisan atribut type yang lazim adalah
<script type=”text/javascript”>.

Terdapat tiga pilihan lokasi coding JavaScript, pertama di dalam elemen head, kedua di dalam elemen body dan ketiga sebagai file eksternal yang terpisah.

JavaScript Dalam Elemen Head

Coding JavaScript dapat diletakkan di dalam elemen head. Tag <script> diletakkan di dalam tag <head>.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Jalankan Contoh

Pada contoh di atas diperlihatkan fungsi myFunction di dalam tag script. Fungsi ini akan dipanggil apabila tombol Try it ditekan. Kita akan membahas fungsi JavaScript pada topik selanjutnya.

JavaScript Dalam Elemen Body

Coding JavaScript dapat diletakkan di dalam elemen body. Tag <script> diletakkan di dalam tag <body>.

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Jalankan Contoh

Sangat disarankan untuk meletakkan tag script pada bagian paling bawah elemen body. Praktek ini akan mempercepat proses penampilan dokumen HTML pada web browser. Elemen-elemen HTML yang berada di atas tag script akan ditampilkan terlebih dahulu, setelah itu baru coding JavaScript dieksekusi.

JavaScript Dalam File Eksternal

Coding JavaScript juga dapat diletakkan dalam file yang terpisah dari dokumen HTML. File ini mempunyai ekstensi js. Fungsi myFunction dapat dimasukkan ke dalam file myScript.js.

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Kita dapat memakai file myScript.js pada dokumen HTML yang terpisah. Pergunakan atribut src pada tag script. Atribut src berisi URL file eksternal yang akan dipakai.

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

Jalankan Contoh

Pada contoh di atas diperlihatkan fungsi myFunction di dalam myScript.js dapat dipanggil dari dokumen HTML yang terpisah.

Kelebihan Memakai File Eksternal

Pada prakteknya, JavaScript dalam file eksternal lebih banyak digunakan. Praktek ini mempunyai beberapa kelebihan :

  • Memisahkan coding HTML dengan coding JavaScript
  • Membuat dokumen HTML menjadi lebih mudah dibaca dan dimengerti
  • File eksternal JavaScript dapat dimasukkan kedalam cache sehingga mempercepat proses menampilkan dokumen HTML

Kita juga dapat memakai lebih dari satu file eksternal JavaScript seperti contoh di bawah ini.

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

URL File Eksternal

URL file eksternal bisa berupa URL absolute ataupun URL relative.

Contoh untuk URL absolute.

<script src="https://nextgen.co.id/tutorial/js/myScript.js"></script>

Jalankan Contoh

Contoh untuk URL relative.

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

Jalankan Contoh

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

Jalankan Contoh

Tutorial sebelumnya : Pengertian JavaScript
Tutorial setelahnya : Output JavaScript
Semua Tutorial JavaScript : Tutorial JavaScript 

Tinggalkan Balasan