Home, Forum diskusi, Chatting, Download

Window dan Frame

Window dan frame membuat bingung banyak pengembang halaman Web dari pada aspek-aspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika anda memilih menu option File | New Web Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan menutup jendela yang baru tersebut.

Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika dokumen frame ditutup, frame menghilang karena keberadaannya tergantung pada dokumen tersebut.

Properti Objek Window

Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan pesan, tetapi sangat tergantung pada parameter yang diberikan. berikut ini adalah properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela browser:

• defaultStatus. defaultStatus adalah pesan yang dimunculkan pada status bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset dari onMouseOver event handler, event handler harus mengembalikan true untuk perubahan status.
• frames. Property ini adalah suatu array yang mengandung object frame. Frame mewarisi semua properti dan metode dari objek window.
• length. nilai dari properti ini adalah jumlah frame dalam frame array.
• parent. Dari suatu acuan frame, ini adalah window yang mana frameset berada. Suatu frame diantara frameset tersebut dapat mengacu pada frame lain dalam frameset dengan menggunakan parent.frames[index] tanpa memiliki acuan ke nama window.
• self. Ini adalah sama dengan window atau frame yang sekarang.
• status. Ini adalah pesan transient yang mana diset dengan  onMouseOver event handler.
• top. Property ini digunakan sebagai acuan window yang laing atas.  Dapat digunakan oleh child windows atau embedded filesets untuk mengacu pada window original.
• window. Property ini adalah sama dengan window sekarang.

Contoh:

<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik disini untuk keterangan lebih lengkap'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

Hasil:

Klik disini

Bentuk untuk mengacu properti window adalah

window.propertyName

self.propertyName

top.propertyName

parent.propertyName

windowVar.propertyName

propertyName

Metode Objek Window

Berikut ini adalah metode dari objek window atau frame:

• alert("message"). Metode ini membuat suatu kotak dialog peringatan dengan suatu tombol OK tunggal. Digunakan untuk menampilkan pesan yang tidak membutuhkan keputusan pemakai.
• close(). Metode ini menutup window acuan. Harus mengandung window acuan seperti window.close dan close() tanpa acuan adalah sama dengan document.close.
• confirm("message"). Metode confirm menampilkan suatu dialog box konfirmasi dengan tombol OK dan Cancel. OK mengembalikan nilai true, dan Cancel mengembalikan nilai false.
• [windowVar = ][window.]open("URL", "windowName" ["windowFeatures"]. Metode ini membuka suatu Jendela browser yang baru. Nama object windowVar adalah nama dari jendela baru dan digunakan sebagai acuan untuk properti dan metodes-nya.URL menentukan URL yang akan dibuka ke jendela baru. Jika optionnya null, suatu window kosong akan dibuka. Variabel windowName adalah nama yang digunakan pada atribut TARGET dari <FORM> dan <A> tag. Variabel windowFeatures adalah suatu comma-separated list dari option berikut:

toolbar=yes|no

location=yes|no

directories=yes|no

status=yes|no

menubar=yes|no

scrollbars=yes|no

resizable=yes|no

width=pixels

height=pixels

• Jika tidak ada yang ditentukan, maka semuanya bernilai true. Jika salah satu ditentukan, maka semua yang lain menjadi false. Jika salah satu di tentukan tanpa nilai, maka nilainya adalah true.

• prompt("message" [, inputDefault]). metode prompt menampilkan suatu prompt dialog box dengan suatu message, suatu input field, dan tombol OK, dan sebuah tombol Cancel. inputDefault adalah suatu string, integer, atau property dari suatu object yang mana mewakili nilai default untuk inout field. Jika inputDefault tidka ditentukan, input fied menampilkan nilai <undefined>.
• timeoutID=setTimeout(expression, msec). Dengan metode ini, evaluasi dari ekspresi adalah jumlah delay dalam milidetik. timeoutID adalah hanya digunakan oleh metode clearTimeout.
• clearTimeout(timeoutID). Metode ini membatalkan time-out yang ditentukan oleh metode setTimeout.

Metode sebelumnya menggunakan acuan berikut:

window.metodeName(parameters)

self.metodeName(parameters)

top.metodeName(parameters)

parent.metodeName(parameters)

windowVar.metodeName(parameters)

metodeName(parameters)

Membagi Window kedalam Frame

Frames membagi suatu window secara multiple, memiliki scrollbar masing-masing. Frame dibuat dengan tag <FRAMESET></FRAMESET> dalam dokumen HTML. Masing-masing dokumen membuat suatu frame array untuk dokumen. Jika suatu dokumen dibuka pada salah satu frame memiliki suatu <FRAMESET> tag, frame akan terbagi lagi menjadi frame oleh dokumen tersebut. Hirarki dari frameset adalah penting sebagai acuan properti dan metode dari frame.

Struktur dibawah setiap window atau frame dapat menjadi acuan. Selanjutnya, properti pada suatu window atau frame dapat mengubah properti object pada jendela atau frame lain.

Contoh :

<html>
<head>

   <script language="JavaScript">

      if (top.location != this.location)

         top.location = this.location		//membuat html tidak berada
						//dalam frame lain
   </script>

   <title>Tutorial JavaScript</title>

   <frameset cols=175,*>

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

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

   </frameset>

</head>
</html>

file daftar.html

<html>
<head>

  <script language="JavaScript">

     function buka(x)
       {
       top.frames[1].location=x;
       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>

Klik untuk melihat hasil dari contoh diatas