Dimana kita dapat menempatkan code javascript pada HTML, apakah diantara elemen html atau diluar elemen html? Untuk menemukan jawabannya simak bab berikut.
Section Artikel
Tag <script>
Dalam HTML, kode JavaScript akan disisipkan di antara tag <script> dan </script> .
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript pada Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "JavaScript Pertamaku
</script>
</body>
</html>
Contoh JavaScript lama mungkin menggunakan atribut type: <script type=”text/javascript”>.
Atribut type tidak diperlukan lagi. JavaScript adalah bahasa script default dalam HTML.
Function dan Event JavaScript
Function JavaScript adalah sekumpulan kode JavaScript, yang dapat dijalankan saat “dipanggil”.
Misalnya, suatu function dapat dipanggil saat suatu event terjadi, seperti saat pengguna mengklik tombol.
JavaScript di <head> atau <body>
Anda dapat menempatkan sejumlah script JavaScript dalam dokumen HTML.
JavaScript dapat ditempatkan di tag <head> atau <body> pada bagian halaman HTML, atau keduanya.
JavaScript di <head>
Dalam contoh ini, function JavaScript ditempatkan di <head> pada halaman HTML.
Function tersebut dipanggil (invoked) ketika sebuah tombol diklik.
Contoh :
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Merubah Paragraf.";
}
</script>
</head>
<body>
<h2>JavaScript di Head</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
</body>
</html>
JavaScript di <body>
Dalam contoh ini, function JavaScript ditempatkan di bagian <body> pada halaman HTML.
Function tersebut dipanggil (invoked) ketika sebuah tombol diklik.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript pada bagian Body</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph diubah.";
}
</script>
</body>
</html>
Menempatkan script di bagian bawah elemen <body> meningkatkan kecepatan tampilan, karena interpretasi script memperlambat tampilan.
JavaScript Eksternal
JavaScript juga dapat ditempatkan di file eksternal.
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}Script eksternal akan praktis jika kode yang sama digunakan di banyak halaman web yang berbeda.
File JavaScript memiliki ekstensi file .js.
Untuk menggunakan script eksternal, letakkan nama file script di atribut src (sumber) dari tag <script>.
Contoh :
<!DOCTYPE html> <html> <body> <h2>External JavaScript</h2> <p id="demo">Sebuah paragraf.</p> <button type="button" onclick="myFunction()">Klik disini</button> <p>(myFunction disimpan dalam file eksternal yang disebut "myScript.js")</p> <script src="myScript.js"></script> </body> </html>
Penempatan script eksternal dapat diletakan pada <head> atau <body> sesuai dengan yang diinginkan.
Script eksternal tidak boleh berisi tag <script>
Manfaat JavaScript Eksternal
Menempatkan script di file eksternal memiliki beberapa keuntungan:
- Javascript eksternal memisahkan HTML dan kode
- JavaScript eksternal membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
- File JavaScript yang disimpan dalam cache dapat mempercepat pemuatan halaman
Untuk menambahkan lebih dari satu file script ke sebuah halaman – gunakan beberapa tag script seperti berikut.
<script src="myScript1.js"></script> <script src="myScript2.js"></script>
Referensi Eksternal
Script eksternal dapat direferensikan dengan URL lengkap atau dengan relative path pada halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk ditautkan ke script.
Contoh :
<!DOCTYPE html> <html> <body> <h2>External JavaScript</h2> <p id="demo">Sebuah paragraf.</p> <button type="button" onclick="myFunction()">Klik disini</button> <p>(myFunction disimpan dalam file eksternal bernama "myScript.js")</p> <script src="https://www.w3schools.com/js/myScript.js"></script> </body> </html>
Contoh ini menggunakan script yang terletak di folder tertentu di situs web saat ini.
<!DOCTYPE html> <html> <body> <h2>External JavaScript</h2> <p id="demo">Sebuah paragraf.</p> <button type="button" onclick="myFunction()">Klik disini</button> <p>(myFunction disimpan dalam file eksternal bernama "myScript.js")</p> <script src="/js/myScript.js"></script> </body> </html>
Contoh ini menautkan ke script yang terletak di folder yang sama dengan halaman saat ini:
<!DOCTYPE html> <html> <body> <h2>External JavaScript</h2> <p id="demo">Sebuah paragraf.</p> <button type="button" onclick="myFunction()">Klik disini</button> <p>(myFunction disimpan dalam file eksternal bernama "myScript.js")</p> <script src="myScript.js"></script> </body> </html>
