JavaScript Lintas Browser

Anda dapat menggunakan JavaScript untuk mengakses dan mengubah properti elemen CSS-P Anda. Tetapi beberapa sintaksis berbeda di antara Netscape 4.0 dan Internet Explorer 4.0. Dengan mengetahui di mana letak perbedaannya, saya akan menunjukkan cara mudah untuk menciptakan JavaScript lintas browser — script yang akan bekerja di baik NS4 maupun IE4.

Pemeriksaan Browser:

Sekarang saya menggunakan ns4 and ie4 untuk pemeriksaan browser dan bukan n dan ie

Pertama sekali: kita harus mengetahui bagaimana memeriksa browser yang digunakan seseorang. Cuplikan kode singkat berikut ini akan merupakan pemeriksaan browser standar di hampir semua contoh pada tutorial ini:

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

Objek document.layers hanya dimiliki Netscape 4.0, sementara objek document.all hanya dimiliki oleh IE 4.0. Dengan demikian dengan memeriksa apakah objek tersebut ada kita dapat menciptakan variabel boolean ns4 (untuk Netscape 4.0) dan ie4 (untuk Internet Explorer 4.0) dan memberi mereka nilai true (betul) atau false (salah) tergantung dari browser mana yang sedang digunakan. Sekarang kapan saja ANda perlu memeriksa browser apa yang digunakan seseorang Anda cukup hanya menggunakan if (ns4) atau if (ie4):

function check() {
	if (ns4) {
		// lakukan sesuatu pada Netscape Navigator 4.0
	}
	if (ie4) {
		// lakukan sesuatu pada Internet Explorer 4.0
	}
}

Menggunakan JavaScript dan CSS-P:

Katakanlah kita mempunyai tag DIV seperti berikut ini:

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30;">
<IMG SRC="blok.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

Ingat bahwa ini hanya contoh, anda dapat menamai blockDiv apapun yang Anda inginkan dan hasilnya masih akan tepat sama.

Pada Netscape cara yang paling umum untuk mengakses properti CSS-P adalah seperti ini:

document.blockDiv.namaProperti
atau
document.layers["blockDiv"].namaProperti

Dan kemudian bagi Internet Explorer caranya ialah:

blockDiv.style.namaProperti
atau
document.all["blockDiv"].style.namaProperti

Di mana namaProperti dapat merupakan salah satu dari left, top, visibility, zIndex, width, atau properti-properti CSS-P lainnya.

Metode Lintas Browser (Variabel Penunjuk):

Telah saya temukan bahwa cara terbaik untuk membuat script lintas browser adalah membuat variabel — yang tergantung apakah Anda menggunakan Netscape atau IE — menunjuk secara langsung kepada baik dokumen.blockDiv atau blockDiv.style, seperti berikut ini. Variabel seperti ini saya sebut variabel penunjuk.

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style

Lihatlah, setelah Anda melakukannya, Anda sekarang dapat mengakses properti-properti menggunakan jalan pintas. Contohnya jika Anda ingin memeriksa koordinat kiri tag DIV kita yang bernama "blockDiv", cukup dituliskan:

block.left

Tak masalah browser apa yang digunakan karena pada Netscape, block menunjuk kepada document.blockDiv, dan pada IE, block menunjuk kepada blockDiv.style.

Catatan Pinggir: Di sepanjang tutorial ini saya akan menamai tag-tag DIV saya dengan akhiran "Div" (squareDiv, blockDiv etc.). Ini karena ketika Anda menginisialisasi lapisan menggunakan metode variabel penunjuk, Anda harus memilih nama variabel yang sepenuhnya unik — namanya tidak bisa sama dengan salah satu tag DIV Anda lainnya. Saya baru membuatnya menjadi standar pada kode saya, sehingga semua lapisan yang akan diinisialisasi dengan variabel penunjuk secara automatis mempunyai akhiran "Div" dan saya membuat variabel penunjuk tanpa "Div" — karena seperti akan Anda lihat Anda akhirnya akan menggunakan variabel penunjuk jauh lebih banyak daripada nama lapisannya sendiri.

Contoh Lengkap:

Contoh ini akan menampilkan informasi isi properti left, top dan visiibilty dari sebuah elemen CSS-P.

Scriptnya:

<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
}

//-->
</SCRIPT>

HTML-nya:

<BODY onLoad="init()">

<A HREF="javascript:alert(block.left)">left</A> -
<A HREF="javascript:alert(block.top)">top</A> -
<A HREF="javascript:alert(block.visibility)">visibility</A>

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30; visibility:visible;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

</BODY>

Klik di sini untuk melihat contoh ini

Penting: Saya memanggil fungsi init() dari BODY onLoad="" sehingga fungsi tersebut akan dieksekusi setelah seluruh halaman selesai dimuat. Ini karena ketika mendefinisikan variabel penunjuk Anda, tag DIV harus sudah ada sebelumnya. Jika Anda mencoba dan mendefinisikan variabel sebelum halaman selesai dimuat Anda akan menerima pesan kesalahan JavaScript seperti "block is not defined".

Perbedaannya

Jika Anda membuka baik Netscape dan IE dan mencoba contoh terakhir tadi di keduanya, Anda akan memperhatikan bahwa Anda tidak menerima nilai yang sama.

PropertiNilai NS4Nilai IE4
left5050px
top100100px
visibilityshowvisible

Perbedaan-perbedaan ini dapat menyebabkan masalah tetapi di beberapa bab selanjutnya akan saya tunjukkan bagaimana mengatasinya.

Halaman Muka Pelajaran Berikutnya: Menyembunyikan dan Menampilkan
hak cipta 1998 Dan Steinman
Diterjemahkan oleh Mark P. Eliasaputra