Penempatan JavaScript di dalam HTML - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar dasar-dasar dari JavaScript, dan pada artikel kali ini kita semua akan belajar beberapa cara menempatan kode JavaScript fi dalam sebuah HTML.
Ada fleksibilitas yang diberikan untuk memasukkan kode JavaScript di mana saja dalam dokumen HTML. Namun cara yang paling direkomendasikan untuk memasukkan JavaScript dalam file HTML adalah sebagai berikut -
- Script di bagian
<head> ... </head>.
- Script di bagian
<body> ... </body>.
- Script di bagian
<body> ... </body> dan <head> ... </head>.
- Script dalam file eksternal dan kemudian sertakan di bagian
<head> ... </head>.
Di bagian berikut, kita akan melihat bagaimana kita dapat menempatkan JavaScript dalam file HTML dengan cara yang berbeda.
JavaScript di bagian <head> ... </head>
Jika kita ingin skrip dijalankan pada beberapa event, seperti ketika pengguna mengklik suatu tempat, maka Anda akan menempatkan skrip itu di antara head sebagai berikut -
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
JavaScript di bagian <body> ... </body>
Jika kita memerlukan skrip untuk dijalankan saat halaman dimuat sehingga skrip menghasilkan konten di halaman, maka skrip masuk di bagian <body> dokumen.
Dalam hal ini, kita tidak akan memiliki fungsi yang didefinisikan menggunakan JavaScript. Lihatlah kode berikut.
<html>
<head>
</head>
<body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body>
</html>
JavaScript di Bagian <body> dan <head>
Kita juga dapat menempatkan kode JavaScript di bagian <head> dan <body> kurang lebih sebagai berikut -
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
JavaScript dalam File Eksternal
Ketika kita mulai bekerja lebih luas dengan JavaScript, kita akan cenderung menemukan bahwa ada beberapa kasus di mana kita menggunakan kembali kode JavaScript yang identik pada beberapa halaman situs.
Kita tidak dibatasi untuk mempertahankan kode identik dalam banyak file HTML. The Script tag menyediakan mekanisme untuk memungkinkan kita untuk menyimpan JavaScript dalam sebuah file eksternal dan kemudian memasukkannya ke dalam file HTML.
Berikut ini adalah contoh untuk menunjukkan bagaimana kita dapat menyertakan file JavaScript eksternal dalam kode HTML Anda menggunakan tag skrip dan atribut src -nya .
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>
Untuk menggunakan JavaScript dari sumber file eksternal, kita perlu menulis semua kode sumber JavaScript dalam file teks sederhana dengan ekstensi .js dan kemudian sertakan file itu seperti yang ditunjukkan di atas.
Misalnya, kita dapat menyimpan konten berikut dalam file filename.js dan kemudian kita dapat menggunakan fungsi sayHello di file HTML Anda setelah menyertakan file filename.js.
function sayHello() {
alert("Hello World")
}
sumber : https://www.tutorialspoint.com/javascript/javascript_placement.htm