Coding JavaScript ditulis di dalam elemen script. Elemen script dibuka memakai tag <script> dan ditutup memakai tag </script>.
Tutorial sebelumnya : Pengertian JavaScript
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>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>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>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>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://www.nextgen.co.id/tutorial/js/myScript.js"></script>Contoh untuk URL relative.
<script src="js/myScript.js"></script><script src="myScript.js"></script>Tutorial selanjutnya : Output JavaScript
Daftar tutorial : Tutorial Belajar JavaScript
