A PHP Error was encountered

Severity: Notice

Message: Only variable references should be returned by reference

Filename: core/Common.php

Line Number: 257

Unobstrusive JavaScript

Unobstrusive JavaScript


Tanggal : 2013-03-25

Unobstusive JavaScript adalah suatu teknik  penggunaan JavaScript dalam halaman web yang kita kembangkan, yang memisahkan antara kode program JavaScript dengan kode HTML.

Teknik unobstrusive digunakan untuk menjamin bahwa dokumen web yang dihasilkan akan dapat ditampilkan dalam setiap browser, termasuk browser yang tidak mendukung JavaScript, dengan sama atau mirip. Mengapa? Karena program JavaScript ditempelkan kepada dokumen web atau HTML dengan menggunakan program JavaScript yang dipisahkan secara khusus, tidak akan mengganggu suatu dokumen untuk ditampilkan. Ingat tentang aturan penulisan <script type=”text/javaScript”> dan <!-- kode program JavaScript  // --></script> yang akan membuat kode program JavaScript akan diabaikan oleh browser yang belum mendukung JavaScript.

Pada teknik penulisan elemen HTML dalam dokumen web yang konvensional, kita akan menyisipkan kode program JavaScript pada suatu elemen, yang menunjukkan bahwa elemen tersebut memiliki suatu script yang akan dijalankan apabila terjadi suatu event.

Berikut adalah contoh potongan penulisan kode JavaScript langsung di dalam pernyataan elemen HTML:

<a href="/delete/recno/22" onclick="if (confirm(Yakin?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'pKvg9hsnQ33uk='); f.appendChild(s);f.submit(); };return false;">delete</a>

 

Teknik penulisan pada contoh tersebut, membuat dokumen HTML menjadi lebih ruwet, apalagi jika kode program yang dituliskan untuk event dari tersebut termasuk panjang dan kompleks.

Potongan kode di atas sebenarnya digunakan untuk menampilkan sebuah link dengan tulisan delete, yang apabila diklik akan menampilkan pertanyaan ‘Yakin?’.  Jika pengguna menjawab OK, maka program akan membuat form yang tidak ditampilkan, dengan action berupa link pada href, kemudian di dalamnya ada dua elemen input hidden dengan nilai yang akan dikirimkan ke server. Setelah data dicreate, form dan datanya kemudian disubmit; dengan diakhiri dengan perintah return false, yang akan membuat halaman web tidak berubah karena proses submit.

Jika kita menggunakan teknik unobstrusive JavaScript, maka kita akan mendapatkan dokumen HTML menjadi seperti berikut:

 

 

 

Pada contoh di atas, kita mendefinisikan event untuk suatu elemen pada bagian khusus JavaScript, tidak dicampurkan pada saat kita menuliskan elemen dokumen HTMLnya.

Teknik unobstrusive ini dianjurkan untuk membuat agar dokumen web dan kode program JavaScript terpisah, sehingga kita dapat melakukan maintenance kode HTML dan kode program JavaScript secara terpisah.

Teknik unobstrusive menjadi lebih sederhana lagi, jika kita menggunakan librari jQuery, kode contoh di atas menjadi seperti berikut:

<!doctype html>

<html>

<head>

      <title>Ubah warna teks paragraf dengan merah</title>

      <script type="text/JavaScript" src="jquery-1.9.1.min.js"></script>

      <script type="text/JavaScript">

            $(document).ready(function(){

                  $("#btncolor").click(function(){$("p").css("color","red")});

            })

      </script>

</head>

<body>

      <h3>Ubah warna teks paragraf dengan merah</h3>

      <p>zero</p>

      <p>one</p>

      <p>two</p>

      <button type="button" id="btncolor">Ubah warna</button>

</body>

</html>

 

 

jQuery sangat memudahkan pembuatan aplikasi web dengan teknik unobstrusive, karena kita bisa dengan mudah menempelkan kode program untuk event dari suatu elemen, cukup dengan menggunakan $(“kodeataunamaelemen”).event(fungsi). Kita akan mempelajari teknik unobstrusive ini hampir sepanjang pembahasan dalam buku ini.




<< Artikel Sebelumnya
Artikel Berikutnya >>