Catatan Kecil Tentang Javascript

Ini adalah saat-saat yang menjengkelkan sekaligus mengasyikkan: ngoprek Javascript. Kasusnya adalah dalam sebuah tabel, bagaimana kita menambahkan baris tabel (tag [tr]) secara dinamis lewat Javascript.

Sederhana, DOM HTML telah memiliki fungsi lengkap untuk melakukan hal itu. Lihat baris kode di bawah ini:

// mendapatkan objek tabel yang akan diambil
var table = document.getElementById(tableID);

// mendapatkan jumlah baris
var lastRow = table.rows.length;

// menambahkan baris baru dan menentukan CSS class ganjil dan genap
var tr = table.insertRow(lastRow);
tr.className = ( lastRow % 2 == 0 ) ? ‘form-table_tr-even’ : ‘form-table_tr-odd’;

// first column
var td0 = tr.insertCell(0);
td0.align = ‘center’;
td0.vAlign = ‘middle’;
td0.innerHTML = ‘[input type=”radio” value=”‘ + lastRow + ‘” name=”chkRow” /]’;

Caranya cukup mudah. Namun bagaimana ketika elemen-elemen itu memiliki event, misalnya ketika diklik akan melakukan fungsi Javascript juga? Dulu aku membuat sebuah template blok-blok html tersebut dan kemudian aku copy-paste dengan perintah copyElement. Namun cara ini selain tak efisien juga tak fleksibel. Tidak dinamis lagi. Ketika keadaan memaksaku untuk tidak menggunakan cara ini, aku mencari dan akhirnya menemukan bahwa untuk menambahkan event handler ke elemen yang dibuat secara dinamis, ada perintah tersendiri untuk meregister event tersebut.

Masalahnya, tidak ada standar dalam hal ini. Khususon IE punya attachEvent. Sedangkan Opera, Firefox, dan Safari punya addEventListener. Perlakuan dua fungsi tersebut bisa dilihat di bawah ini:

var handler = new Object();
handler.onclick = function() {
setRow(lastRow-1);
}
if(window.addEventListener) { // Mozilla, Firefox, Netscape, dll
tr.addEventListener(‘click’, handler.onclick, false );
}
else { // IE
tr.attachEvent( ‘onclick’, handler.onclick );
}

Parameter pertama adalah event yang diregister. Perhatikan bedanya. IE memerlukan nama lengkap eventnya; onclick, onmouseover, dll. Tapi Firefox mengabaikan kata-kata on dan secara otomatis akan menambahkan kata itu didepan parameter yang diregister. Parameter kedua adalah pointer yang menunjukkan fungsi yang akan dikerjakan ketika event di-invoke (opo yo bahasa Indonesiane?). Di sini bisa langsung dimasukkan nama fungsi tanpa harus membuat Objek pointer jika fungsi yang akan dikerjakan tidak memiliki parameter. Tapi jika memiliki parameter, perlakuannya seperti di atas. Buat variabel bertipe function() dan didalamnya berisi fungsi yang dipanggil.

Kedengarannya gampang dan sederhana bukan? Tapi mencari petunjuk dan aturan ini lho susahnya bukan main. Masalahnya tetap, karena tidak ada standardisasi. Ketika aku telah menemukan attachEvent… eh ternyata Firefox hanya mau menerima addEventListener. Ketika fungsi yang harus di-invoke adalah fungsi berparameter, ternyata harus membuat sebuah pointer, karena fungsi berparameter tidak bisa langsung dipassing baik ke attachEvent maupun addEventListener.

Jadi.. Long Live Javascript!!! 😎

Published
Categorized as ITisMyWorld

By Galih Satriaji

Bookaholic, Workaholic. Chubby. That's me!

8 comments

  1. Selamat datang di dunia yang (katanya) terstandarisasi.

    Standard terbuka, standard Microsoft, Standard Adobe, dan standard-standard lain.

    Standard itu perlu, agar para pemakai sebuah product tidak lari ke product lain. 😛

  2. #Mas Cholimi:
    Kalau untuk produk masih wajar lah. Standar keypad Nokia dan Motorolla emang harus beda untuk loyalitas pemakai. Tapi kalau masalah bahasa seperti ini apa keuntungannya buat produsen browser? Ambil contoh IE, apakah suatu method eksklusif bisa membuat developer mewajibkan user harus hanya menggunakan IE? Ah itu jadul banget… jaman sekarang user sudah merdeka, bebas memilih browsernya sendiri, developer yang harus menyesuaikan dengan user.

  3. Mas aku mau tanya mas, aku kan buat halaman pake iframe, trus misalnya mau menampilkan data dari postgre yg tipenya varchar, nama orang misalnya, kalau data nama orang itu mengandung tanda ‘, misalnya A’hmad , itu tidak mau tampil. Untuk pindah ke halaman itu aku pake fungsi javascript. Tolong yo mas.

  4. mas mo tanya,boleh ya
    saya kan bikin form kontak kami
    supaya kirimnya langsung ke emailku gimana ya
    tolong ya bisa di kasih java scriptnya yaa
    please deh

Leave a comment

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