JavaScript - Penempatan dalam File HTML

Ada fleksibilitas yang diberikan untuk memasukkan kode JavaScript di mana saja dalam dokumen HTML. Namun cara yang paling disukai untuk memasukkan JavaScript dalam file HTML adalah sebagai berikut -

Script di bagian <head> ... </head>.
Skrip di bagian <body> ... </body>.
Skrip di bagian <body> ... </body> dan <head> ... </head>.
Script di file eksternal dan kemudian masukkan di bagian <head> ... </head>.

Pada bagian berikut, kita akan melihat bagaimana kita dapat menempatkan JavaScript dalam file HTML dengan berbagai cara.

JavaScript di bagian <head> ... </head>

Jika Anda ingin menjalankan skrip di beberapa acara, seperti ketika pengguna mengklik di suatu tempat, Anda akan menempatkan skrip itu di kepala 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>

Kode ini akan menghasilkan hasil sebagai berikut -

JavaScript di bagian <body> ... </body>

Jika Anda memerlukan skrip untuk dijalankan saat halaman dimuat sehingga skrip menghasilkan konten di halaman, maka skrip ditempatkan di bagian <body> dokumen. Dalam kasus ini, Anda tidak akan memiliki fungsi apa pun yang ditentukan menggunakan JavaScript. Perhatikan kode berikut.

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

Kode ini akan menghasilkan hasil sebagai berikut -

JavaScript di Bagian <body> dan <head>

Anda dapat meletakkan kode JavaScript Anda di bagian <head> dan <body> sekaligus 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>

Kode ini akan menghasilkan hasil sebagai berikut -

JavaScript dalam File Eksternal

Saat Anda mulai bekerja lebih ekstensif dengan JavaScript, Anda mungkin akan menemukan bahwa ada kasus di mana Anda menggunakan kembali kode JavaScript yang identik pada beberapa halaman situs.

Anda tidak dibatasi untuk mempertahankan kode identik dalam beberapa file HTML. Ituscript tag menyediakan mekanisme yang memungkinkan Anda menyimpan JavaScript dalam file eksternal dan kemudian memasukkannya ke dalam file HTML Anda.

Berikut adalah contoh untuk menunjukkan bagaimana Anda dapat menyertakan file JavaScript eksternal dalam kode HTML Anda menggunakan script tag dan nya src atribut.

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

Untuk menggunakan JavaScript dari sumber file eksternal, Anda perlu menulis semua kode sumber JavaScript Anda dalam file teks sederhana dengan ekstensi ".js" dan kemudian menyertakan file tersebut seperti yang ditunjukkan di atas.

Misalnya, Anda dapat menyimpan konten berikut ini filename.js file dan kemudian Anda dapat menggunakan sayHello berfungsi di file HTML Anda setelah menyertakan file namafile.js.

function sayHello() {
   alert("Hello World")
}