Menempatkan JavaScript

Pada sebuah web page, JavaScript bisa ditempatkan pada tiga area, yaitu:

  1. Di dalam tag <head> HTML.
  2. Di dalam tag <body> HTML.
  3. Di dalam external file.

Script pada tag <head> HTML

Di bawah ini adalah contoh script yang ditempatkan pada tag <head> HTML:

Contoh 1:

<html>
<head>
    <script>
    function popup() {
        alert("Hello World");
    };
    </script>
</head>
<body>
    <input type="button" onclick="popup()" value="popup">
</body>
</html>

Hasil contoh 1:

Pada contoh di atas, popup() fuction kita letakkan pada tag <head> document HTML.

Jika tombol popup di atas di-click maka akan muncul popup dengan tulisan [Hello World!]. Function ini akan dibahas lebih mendalam pada tutorial mendatang.

Script pada tag <body> HTML

Berikut ini adalah contoh script yang ditempatkan pada tag <body> HTML.

Contoh 2:

<html>
<head>
</head>
<body>
    <script>
    document.write("Hello World!");
    </script>
</body>
</html>

Hasil contoh 2:

Hello World!

Pada contoh di atas kita menggunakan JavaScript untuk menampilkan tulisan [Hello World!].

Catatan

Menempatkan JavaScript pada bagian bawah tag <body> HTML merupakan teknik yang baik digunakan dalam sebuah website. Teknik ini dapat meningkatkan kecepatan page loading karena tampilan HTML tidak terganggu oleh script loading.

Script pada external file

Selain langsung ditempatkan pada tag <head> atau <body>, script juga bisa ditempatkan pada external file.

File yang menyimpan script haruslah file berjenis JavaScript atau file yang memiliki ekstensi [.js].

Import file JavaScript

Untuk bisa menggunakan Javascript yang berada pada file external kamu harus meng-import file tersebut.

Meng-import file JavaScript tidaklah terlalu sulit. Pertama, file yang di-import harus merupakan file JavaScript. Kedua, kamu harus tahu lokasi dari file JavaScript yang ingin di-import.

Misalkan saja kita memiliki file [javaku.js] yang berisi satu baris alert() function:

Isi file javaku.js:

function popup() {
   alert("Hello World");
};

Catatan

  • File JavaScript tidak boleh mengandung tag <script>.

Misalkan juga bahwa file JavaScript kita berada dalam directory yang sama dengan file HTML yang kita kerjakan. Untuk mengimport file JavaScript yang kita miliki ke dalam document HTML kita bisa menggunakan atribut src.

Isi file HTML:

<html>
   <head>
      <script src="javaku.js">
      </script>
   </head>
   <body>
      <input type="button" onclick="popup()" value="Klik Saya!">
   </body>
</html>

Hasil running file HTML:

Manfaat menggunakan external JavaScript

Berikut ini adalah beberapa manfaat menggunakan external JavaScript:

  • Memisahkan code HTML dan script.
  • Memudahkan dalam memelihara file HTML dan JavaScript karena lebih mudah untuk dibaca dan di-edit.
  • File JavaScript yang di-cache dapat mempercepat page loading.
  • Tidak perlu mengulang-ulang code JavaScript untuk banyak page. Cukup dengan satu file JavaScript yang di-import untuk banyak page.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>