Emely.Net Banner Exchange
Emely.Net Banner Exchange

 Home, Forum diskusi, Chatting, Download


Tips & Trik

Bagian Tips & Trik ini  adalah beberapa hal yang dapat anda lakukan untuk meningkatkan halaman Web anda tanpa tahu banyak mengenai JavaScript.

Meletakan tulisan pada status bar

Contoh pertama mendemontrasikan bagaimana memanipulasi tulisan pada status bar. Ketika anda mengerakan kursor melalui suatu link, maka statusbar akan menampilkan URL tujuan link tersebut.

Suatu kode HTML untuk suatu membentuk link dapat berupa :

<A HREF="mylink.htm">klik disini</A>

Untuk menampilkan sesuatu pada status bar ketika mouse pointer digerakan melalui link, anda perlu menambah kode berikut :

<A HREF="mylink.htm" onMouseOver="window.status='Klik disini untuk mengetahui lebih jauh tentang saya'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

Kode diatas akan menghasilkan suatu link Klik disini. Coba gerakan mouse pointer melaluinya, mudah bukan ?

onMouseOver adalah suatu penanganan event. Perlu diperhatikan bahwa JavaScript akan membedakan huruf besar dan huruf kecil, tetapi Microsoft Internet Explorer adalah lebih pemaaf dibandingkan dengan Netscape Navigator, jadi untuk hasil yang lebih akurat, sebaiknya anda menggunakan Navigator dalam memeriksa kebenaran script pada halaman anda.

Anda mungkin merasa aneh mengapa kami diperlukan suatu return true; pada penanganan event onMouseOver. Normalnya browser menampilkan URL dari link pada status bar, dan potongan kode ini memberitahukan kepada browse untuk tidak menimpa pesan kita dengan URL tersebut.

Menampilkan tanggal "Last Updated" pada dokumen

Pada halaman kita sering ingin menampilkan informasi kepada pengunjung tanggal terakhir kali halaman kita di Update. Berikut ini adalah potongan script yang akan secara otomatis menghasilkan informasi terakhir kali halaman kita di Update:

<SCRIPT LANGUAGE="JavaScript">
   <!-- menyembunyikan dari browser non-js
   document.write("Last updated :");
   document.write(document.lastModified);
   // --> 
</SCRIPT>

Sisipkan kode berikut pada bagian dokumen HTML anda yang akan menampilkan informasi Last update. Perhatikan bahwa script diketik diantara tag komentar HTML <!-- ... -->, tujuannya supaya script tersebut tersembunyi dari browser  non-JavaScript, dengan demikian tidak menimbulkan kesalahan pada browser non-JavaScript tersebut.

Catatan : biasakan mengetik script anda diantara tag komentar HTML <!-- .. -->.

Menampilkan pesan dengan suatu kotak pesan

Kadang-kadang kita ingin menampilkan suatu pesan kepada pengunjung, jika suatu tombol atau link di klik. Pada JavaScript kita dapat menggunakan fungsi alert() yang mana akan menampilkan suatu kotak pesan. Misalnya kita ingin memberi kejutan kepada pengunjung, begitu halaman dibuka. Untuk melakukan hal ini, tambahkan saja kode berikut setelah tag <BODY> (atau diantara tag <HEAD>).

<SCRIPT LANGUAGE="JavaScript">
    <!-- menyembunyikan dari browser non-js
    alert("Press Ok to start formatting your hard disk");
    // akhir dari penyembunyian -->
</SCRIPT>
				

Hal ini tentu saja akan menjadi kejutan bagi pengunjung halaman anda :-). Bagaimana jika kita ingin menampilkan suatu kotak pesan ketika user melakukan klik pada suatu link Anda dapat mencoba klik disini. Untuk memahami apa sebenarnya yang terjadi, coba simak script berikut :

<A HREF="JavaScript: alert('pesan anda disini.')">

JavaScript: bagian ini akan memberitahukan kepada browser bahwa dia harus menjalankan perintah JavaScript yang tersebut ketika link di klik.

Anda juga dapat membuat suatu pesan ditampilkan tombol ditekan. Coba yang berikut ini:

<FORM>
    <INPUT TYPE=BUTTON VALUE="Klik disini" 
      onClick="alert('pesan anda disini')">
</FORM>
				

Catatan

Anda mungkin memperhatikan bahwa, cara penulisan script pada setiap contoh diatas berbeda. Yang pertama adalah script ditulis diantara tag HTML <A HREF=...>, yang kedua adalah diantara suatu tang <SCRIPT> ... </SCRIPT>. Perbedaan ini adalah bahwa, script pertama akan dijalankan pada event tertentu (MouseOver dalam hal ini), sedangkan untuk yang kedua, script langsung dijalankan ketika ditemukan pada dokumen HTML.


Membuat suatu link yang dapat menutup jendela browser

Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan metode close pada objek window.

Contoh :

<A HREF="javascript:window.close()">tutup</A>

Coba klik tutup untuk menutup jendela ini.

 

Membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list

Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih pemakai, dan membuka halaman yang diinginkan 

Adapun kode untuk Contoh diatas:
<SCRIPT LANGUAGE='JavaScript'>
<!--
function BuatArray() {
	var jlhargumen = BuatArray.arguments.length;
	for ( i = 0 ; i < jlhargumen; i++ ) 
	    { this[i]=BuatArray.arguments[i] }
}

function buka() {
var pilih = eval(document.dropdown.site.selectedIndex);
if( (pilih > 0) && (pilih < 7) ) {
var bagian=new BuatArray( '',
 'http://indoprog.terrashare.com/tutor/html/index.html', 
 'http://indoprog.terrashare.com/tutor/javascript/index.html',
 'http://indoprog.terrashare.com/tutor/asp/index.html',
 'http://indoprog.terrashare.com/tutor/php/index.html',
 'http://indoprog.terrashare.com/tutor/perl/index.html');

this.location=buka[pilih];
      }
    }
//-->
</SCRIPT>

<FORM NAME="dropdown">
<SELECT NAME="site" onChange='buka();' ALIGN="left">
<OPTION SELECTED>Pilih tutorial yang diinginkan
<OPTION>HTML
<OPTION>JavaScript
<OPTION>ASP 
<OPTION>PHP
<OPTION>Perl
</SELECT>
</FORM>


Membagi Jendela Browser menjadi frame, dan klik link pada pilihan diframe kiri akan mengupdate isi frame kanan.

Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan contoh berikut :

Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai berikut :

Contohy.html
<html>
<head>

   <title>Tutorial JavaScript</title>

   <frameset cols=175,*>

      <frame src="menu.html" name="kiri">

      <frame src="topik1.html" name="kanan">

   </frameset>

</head>
</html>

Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama menu.html, dan sebelah kanan akan diaktifkan topik1.html, dan isi dari menu.html adalah sebagai berikut :

menu.html
<html>
<head>
  <script language="JavaScript">
     function buka(x)
       {
       top.kanan.location=x;	// membuka halaman x pada frame kanan
       return false
       }
  </script>
</head>
<body>
  <h1>Daftar Isi</h1>

   <a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr>
   <a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr>
   <a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr>
   <a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr>
   <a href="" onclick="return buka('topik5.html')">Dasar dari Objek</a><hr>
   <a href="" onclick="return buka('topik6.html')">Objek dan Fungsi built-in</a><hr>
   <a href="" onclick="return buka('topik7.html')">Objek netscape</a><hr>
   <a href="" onclick="return buka('topik8.html')">Objek form</a><hr>
   <a href="" onclick="return buka('topik9.html')">Window dan Frame</a><hr>

</body>
</html>

Pada  menu.html diatas, kita menggunakan event onclick pada masing-masing link yang akan memanggil suatu fungsi buka yang diikuti dengan suatu parameter yang berupa nama dokumen html target. Pada fungsi buka, kita menggunakan properti location untuk frame kanan membuka halaman bersangkutan.

Catatan : kanan dalam hal ini adalah nama frame.

Klik untuk melihat hasil dari contoh diatas

Bagaimana, menarik bukan ?


Dibuat  oleh hendra@indoprog.com
Medan - Sumatera Utara
Indonesia

1