| < Previous |
Next >
|
Tag <Script> di JavaScript
Dalam HTML, Kode JavaScript harus disisipkan di antara tag <script> dan tag</script>.Contohnya:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript in Body</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html> Contoh Old JavaScript dapat menggunakan type attribute : <script type="text/javascript">
type attribute tidak diperluhkan. JavaScript adalah bahasa scripting default dalam HTML
JavaScript Functions dan Events
sebuah function di JavaScript adalah blok kode javaScript, yang dapat dijalankan ketika di called.Misalnya function bisa berjalan ketika sebuah event terjadi, seperti ketika pengguna mengklik tombol.
Anda akan belajar lebih banyak tentang functions & events dalam artikel berikutnya.
Penempatan JavaScript di <head> atau <body>.
Anda dapat menempatkan sejumplah scrip dalam dokumen HTML.Script dapat ditempatkan dalam <body> atau dalam <head> halaman HTML, atau keduanya.
JavaScript di <head>
dalam contoh ini, function JavaScript ditempatkan di <head> halaman HTML.function dipanggil (called) ketika sebuah tombol diklik.
contohnya:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>JavaScript in Head</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>JavaScript di <body>
Dalam contoh ini, function JavaScript ditempatkan di <body> bagian dari halaman HTML.function dipanggil (called) ketika sebuah tombol di klik:
Contohnya
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript in Body</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>Meletakkan atau menempatkan Script JavaScript dibawah element <body> akan meningkatkan kecepatan loading tampilan, karena script kompilasi akan memperlambat layar.
External JavaScript
JavaScript juga dapat ditempatkan dalam file eksternal:External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}script eksternal sangat praktis ketika script yang sama digunakan di banyak halaman web yang berbeda.
file JavaScript memiliki ekstensi file .js
Untuk menggunakan Script external, menempatkan nama script file src (source) attribute dari tag <script>:
Contohnya
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>anda dapat menempatkan referensi script esternal di <head> atau <body> yang anda inginkan.
script akan bersikap seolah-olah terletak persis di tag<script> berada.
Script ekternal tidak dapat berisi tag<script>
Keuntungan Eksternal JavaScript
Menempatkan script di file eksternal memiliki beberapa keuntungan;- Memisahkan HTML dan Kode
- Membuat HTML dan JavaScript lebih mudah dibaca dan memeliharanya (maintain)
- cached javaScript files dapat mempercepat loads halaman.
Contohnya
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>External References
Contoh ini menggunakan URL lengkap untuk link ke script:
Contohnya:
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>Contoh ini menggunakan script terletak di folder tertentu di situs web saat ini:
Contohnya
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>Contoh ini, like ke script yang terletak di folder yang sama dengan halaman saat ini (dibuka):
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>| < Previous |
Next >
|
Show Parser Hide Parser