Untuk Mencoba Kode mu dapat diketikan di kode editor di paling bawah pada halaman ini
Tag <script>
Dalam HTML, kode JavaScript disisipkan di antara tag <script> dan </script>.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Contoh JavaScript lama mungkin menggunakan atribut type: <script type="text/javascript">.
Atribut type tidak diperlukan. JavaScript adalah bahasa skrip default dalam HTML.
Function dan Events JavaScript
Fungsi JavaScript adalah blok kode JavaScript yang dapat dijalankan saat "dipanggil".
Misalnya, suatu fungsi dapat dipanggil saat suatu peristiwa terjadi, seperti saat pengguna mengklik tombol.
JavaScript di <head> atau <body>
Anda dapat menempatkan sejumlah skrip dalam dokumen HTML.
Skrip dapat ditempatkan di <body>, atau di bagian <head> pada halaman HTML, atau keduanya.
JavaScript di <head>
Dalam contoh ini, fungsi JavaScript ditempatkan di bagian <head> pada halaman HTML.
Fungsi ini dipanggil saat tombol diklik:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button></body>
</html>
JavaScript di <body>
Dalam contoh ini, fungsi JavaScript ditempatkan di bagian <body> pada halaman HTML.
Fungsi ini dipanggil saat tombol diklik:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<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>
Menempatkan skrip di bagian bawah elemen <body> meningkatkan kecepatan tampilan, karena interpretasi skrip memperlambat tampilan.
JavaScript Eksternal
Skrip juga dapat ditempatkan di berkas eksternal:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Skrip eksternal praktis digunakan ketika kode yang sama digunakan di banyak halaman web yang berbeda.
File JavaScript memiliki ekstensi file .js.
Untuk menggunakan skrip eksternal, masukkan nama file skrip di atribut src (sumber) dari tag <script>:
<script src="myScript.js"></script>
Anda dapat menempatkan referensi skrip eksternal di <head> atau <body> sesuai keinginan.
Skrip akan berperilaku seolah-olah berada tepat di tempat tag <script> berada.
Skrip eksternal tidak dapat berisi tag <script>.
Keuntungan JavaScript Eksternal
Menempatkan skrip dalam berkas eksternal memiliki beberapa keuntungan:
- Memisahkan HTML dan kode
- Membuat HTML dan JavaScript lebih mudah dibaca dan dikelola
- Berkas JavaScript yang di-cache dapat mempercepat pemuatan halaman
Untuk menambahkan beberapa berkas skrip ke satu halaman - gunakan beberapa tag skrip:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Referensi Eksternal
Skrip eksternal dapat direferensikan dengan 3 cara berbeda:
- Dengan URL lengkap (alamat web lengkap)
- Dengan jalur file (seperti /js/)
- Tanpa jalur apa pun
Contoh ini menggunakan URL lengkap untuk menautkan ke myScript.js:
<script src="https://www.w3schools.com/js/myScript.js"></script>
Contoh ini menggunakan jalur file untuk menautkan ke myScript.js:
<script src="myScript.js"></script>
0 Comments