Tips dan Trik Java Script 4

imagesMembuka Jendela Baru

Sekarang kita akan belajar tentang cara membuka jendela baru. Masih ingat kan iklan-iklan pop up yang suka muncul kalau kita membuka situs-situs tertentu. Menyebalkan bukan ?😀 makanya saya sarankan anda jangan melakukanya. Kalaupun sekarang saya memunculkan pop up, itu hanya sekedar contoh.

Berikut ini adalah skript untuk memunculkan window baru.

<script language=”javascript”>
window.open(‘tes_page.html’, ‘latihan’,
config=’height=300, width=300′)
</script>

Dengan bentuk script seperti itu, otomatis saat halaman ini diload, akan muncul pop up seperti yang telah anda lihat. Anda juga dapat memunculkan window baru saat menggunakan link, seperti pada contoh di bawah ini. Pada contoh ini kita menggunakan handler onClik.

<a href=”javascript:void(0)” onClick=”window.open(‘tes_page.html’, ‘latihan’,
config=’height=300, width=300′)”>klik ini kalau mau pop up-nya keluar lagi :D</a>

(Di sini saya memanggil”javascript: void (0)”, yang artinya sama saja dengan tidak memanggil apa-apa)

Sekarang kita bahas satu-persatu perintah java script di atas.

Perintah window.open () berguna untuk membuka window baru. Anda sudah melihat contohnya tadi. Sedang atribut (atau apapun namanya) yang berada dalam kurung terdiri dari:
(‘alamat url’,’nama window yang baru dibuka’, config=’parameter’)
Jadi sript kita di atas memanggil file “contoh_java_5a.html” dan memberi nama window baru tersebut dengan nama “latihan”.mmm…
kita bisa memberi nama apapun, persis dengan memberi nama hewan kesayangan kita. Tentu saat ingin memanggil, kita harus memanggilnya dengan nama yang sesuai.

Sedang parameter yang dikonfigurasi bisa terdiri dari tinggi (height) dan lebar (width) window yang akan di buka. Di atas kita menentukan tinggi 300 pixel dan lebar juga 300 pixel. Ada beberapa parameter lain yang dapat di atur, antara lain:

– toolbar=”yes” atau “no”, berguna untuk menentukan ada tidaknya toolbar (menu di atas, yang isinya BACK, FORWARD, STOP, RELOAD,dll).
– menubar=”yes” atau “no”, berguna untuk menentukan ada tidaknya menu bar (menu di atas juga, yang isinya FILE, EDIT, VIEW, GO, dll).
– scrollbars=”yes” atau “no”, menentukan ada tidaknya scrollbars. Scrollbars tuh yang bisa digeret untuk melihat bagian atas atau bawah document, kayak di sebelah kanan ini.–>
– resizable=”yes” atau “no”, untuk menentukkan apakah window yang dibuat bisa di ubah ukurannya atau tidak, dengan cara menggeret pinggirannya.
-location=”yes’ atau “no”, untuk menentukkan ada tidaknya location bar di window yang baru di buka. Location bar tuh….tempat kita nulis alamat URL di atas.
-Directories=”yes” atau “no”, menentukan ada tidaknya directory bar. Directory ada juga yang isinya bookmark, dll.
-status=”yes” atau “no” untuk menentukan ada tidaknya status bar di bawah, pada window yang baru di buat.

Udah. Sekarang kita memperhatikan isi window kecil yang kita buka. Disana saya menuliskan perintah ini.

<a href=”Membuka Jendela Baru.htm” target=”main”> klik ini</a> untuk membuka tutorial pertama di window besar.

Pada kode di atas, “main” adalah nama window besar, halaman yang sekarang anda baca (asal saja ini halaman yang memang dari awal anda buka). “main” ini adalah default yang tidak perlu anda definisikan dahulu. Jika ingin link yang diklik ditampilkan di window kecil yang baru dibuka, menggunakan target=”nama_window”, untuk kasus kita namanya “latihan”, sehingga perintahnya menjadi target=”latihan”.

Selain itu, saya juga menambahkan link untuk menutup window dengan menggunakan tag berikut:

Dan <a href=”” onClick=”self.close()”>link ini</a>untuk menutup window kecil ini

Di sini self berarti window itu sendiri dan kita menggunakan method “close()” untuk menutupnya.

Sekarang saya akan memberi contoh membuka window baru, di mana isinya kita definisikan dengan menggunakan java script. Perhatikan script berikut ini.

<script language=”javascript”>

function bukawindow()
{
var WindowBaru=window.open(“”,”baru”,
“height=300,width=300”);

WindowBaru.document.write(“<html>”)
WindowBaru.document.write(“<title>Window Baru Nech</title>”)
WindowBaru.document.write(“<body bgcolor=’00ffff’>”)
WindowBaru.document.write(“<center>”)
WindowBaru.document.write(“<font size=+1>Window Baru Nech</font><p>”)
WindowBaru.document.write(“<a href=’1java.html’target=’main’>Buka tutorial pertama di window utama</a><p>”)
WindowBaru.document.write(“<p><hr width=’60%’><p>”)
WindowBaru.document.write(“<a href=’onClick’=’self.close()’>Tutup Window ini</a><p>”)
WindowBaru.document.write(“</center>”)
WindowBaru.document.write(“</html>”)
}
</script>

Fungsi di atas saya aktifkan dengan link ini. link tersebut dibuat dengan menggunakan event handler onClick=”bukawindow()”. Dan sekali lagi saya memanfaatkan “javascript:void(0)” seperti di atas, agar anda tidak pergi ke mana-mana.

Hal baru pada script di atas hanyalah penggunaan perintah windowbaru.document.write(“……”)

yang berfungsi untuk menuliskan sesuatu di dalam object “windowbaru”, “windowbaru” sendiri adalah variabel yang sebelumnya telah di definisikan dengan perintah”window.open()”, yang artinya “windowbaru” adalah window yang akan kita buka.

Sedang isi di dalam kurung pada perintah “windowbaru.document.write(“…..”)” adalah kode HTML yang ingin kita tampilkan pada window baru.

Baik, sekarang kita masuk ke tutorial berikutnya, jangan kaget kalau nanti tiba-tiba muncul pop up, atau alert, atau prompt, atau……apapun.😀

6 thoughts on “Tips dan Trik Java Script 4”

  1. makasi gan buat infonya,…ijin praktek,…

  2. thanks info nya.. nice🙂

  3. gan gimana kalo nggak mau buka windows nya..apa lokasi penulisan menentukan???

  4. kalau membuka kalkulator?

  5. itu nyimpen nya dmn gan…

  6. Mas bisa ga fungsi open windows diganti dengan media player seperti mp3skull.com disitu ada tombol play, saya pengen membuat tombol play seperti itu…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s