Javascript Pencere Komutları

Uyarı Kutusu

İlk
pencere komutumuz alert(…) kodu. Bu kodu daha önceki sayfalarda da
kullanmıştık ve biliyoruz ki uyarı kutusu yapmaya yarar. JavaScript
değişkenlerini ve tırnak içinde olmak şartıyla HTML kodlarını uyarı
kutusuyla gösterebiliyorduk ve “+” işareti ile bunları
birleştirebiliyorduk. Şimdi küçük bir tekrar uygulaması yapalım.

<html>
<head>
<title>Uyarı Kutusu</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function kup()
{
var y
y = 59 * 59 * 59
alert(”59 sayısının kübü = ” + y)
}
</script>
</head>
<body>

<form>
59 sayısının kübünü öğrenmek istiyorsanız düğmeye basın.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”kup()” value=”Sayının kübünü al!”>
</form>

</body>
</html>

Onay Kutusu

Uyarı
kutusu haricinde kullanabileceğimiz bir başka pencere aracı da onay
kutusudur. Bu kutu ile kullanıcının onayı alınır. Bu kutuyu yaratmak
için confirm(…) komutunu bir değişkene eşitleriz. Kullanıcının onayı
true, onay vermemesi ise false şeklinde ifadelendirilir. Uygulamamıza
bakalım

<html>
<head>
<title>Onay Kutusu</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function bomba()
{
var onay
onay = confirm(”Mars gezegenine doğrulttuğunuz nükleer bombalar hazır. Gezegeni yok etmek için onay verin.”)
if (onay == true) document.write(”Koskoca gezegeni yok ettin de eline ne geçti?”)
else document.write(”Yok etme operasyonu iptal edildi, tüm Marslılar size teşekkür ediyor.”)
}
</script>
</head>
<body>

<form>
Nükleer bombaları ateşlemek için düğmeye basınız.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”bomba()” value=”ATEŞ!”>
</form>

</body>
</html>

Yazı Kutusu

Hemen
bir başka pencere komutuna geçiyorum. Kullanacağımız pencere aracı yazı
kutusu. Yazı kutusu sayesinde kullanıcıyla program arasında bir veri
alışverişi yapılır. Kullanıcı kutusu, tıpkı onay kutusu gibi bir
değişkene eşitlenir ve prompt(…,…) komutu ile ifade edilir.
Görüldüğü üzere prompt komutu iki değer alır. İlk değer yazı kutusunda
yer alan bilgi verici yazıyı belirler, ikinci değer ise yazı kutusunun
yazma yerinde yer alan yazıyı belirler, bu yazı genellikle girdi
bilgisi içerir. Kullanıcının yazdığı yazı, prompt komutunun eşitlendiği
değişkene değer olarak atanır. Yazı kutusunda Cancel (iptal) düğmesi
yer almaktadır. Kullanıcı bu düğmeye bastığında değişken null (sıfır
yani) değeri alacaktır.

<html>
<head>
<title>Yazı Kutusu</title>
<script language=”JavaScript”>
//İlk fonksiyonu hazırlıyoruz.
function kabul()
{
alert(”İçeri girebilirsin.”)
document.write(”<h1>Barımıza Hoşgeldiniz!</h1>”)
}
//İkinci fonksiyonu hazırlıyoruz.
function red()
{
alert(”Hoop ufaklık. Bas geri!”)
document.write(”<h1>18 yaşından küçükler giremez!</h1>”)
}
//Üçüncü fonksiyonu hazırlıyoruz.
function geri()
{
alert(”Cevap veremiyorsun değil mi?”)
document.write(”<h1>Evine dön!</h1>”)
}
</script>
</head>
<body>

</body>
</html>

Yeni Pencere Açma

Yeni bir pencerede sayfa açmak için window.open(…) kodundan yararlanılır. Parantez içine açılacak sayfanın adresi yazılır.

<form>
JavaScipt”e giriş sayfasını açmak için düğmeye basın.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”pencere()” value=”JavaScript”e Giriş”>
</form>

</body>
</html>

Bu
uygulamayı çok rahat anlamışsınızdır, bu uygulamada kod varsayılan
değerleriyle biçimlendiriliyor. Ama şimdiki uygulamayı çok dikkatli
inceleyin, uygulamadan sonra gerekli açıklamayı yapacağım

<html>
<head>
<title>Yeni Pencere, yeni sayfa.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function pencere()
{
//Açılacak sayfanın dosya ismi: dersjscr.asp
window.open(”dersjscr.asp”,
“Yeni_Sayfa”, “toolbar=no,location=no,directories=no, status=no,
menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460″) }
</script>
</head>
<body>

</body>
</html>

Bu
uygulamadaki pencere açma komutu biraz daha değişik: open.window(dosya
adresi, pencere ismi, pencere özellikleri). Aşağıdaki listede pencere
özelliklerini ve açıklamalarını görüyorsunuz:

menubar Pencerenin üst bölümünde yer alan gözatıcı (browser) menü çubuğunu ifade eder.
menubar=yes
status Pencerenin alt bölümünde yer alan küçük mesajları ifade eder.
status = no
scrollbars Kaydırma çubuklarını ifade eder.
scrollbars = yes
resizable Pencerenin büyüklüğünün fare ile değiştirilebilirliğini ifade eder.
resizable = no
width Pencere genişliğini piksel cinsinden ifade eder.
width = 600
heigth Pencere yüksekliğini piksel cinsinden ifade eder.
heigth = 400
toolbar Pencerenin üstünde, menü çubuğunun altında yer alan gözatıcı araç çubuğunu ifade eder.
menubar = no
location Pencerenin adres kutusunu ifade eder.
location = 600
directories Netscape gözatıcılarının “What”s new!”, “What”s cool!” isimli dizinlerini ifade eder.
directories = no
left Pencerenin ne kadar solda yer alacağını belirler; Netscape göz atıcıları desteklemiyor.
left = 100
screenX Pencerenin ne kadar solda yer alacağını belirler; Internet Explorer göz atıcıları desteklemiyor.
screenX = 100
top Pencerenin ne kadar üstte yer alacağını belirler; Netscape göz atıcıları desteklemiyor.
top = 50
screenY Pencerenin ne kadar üstte yer alacağını belirler; Internet Explorer göz atıcıları desteklemiyor.
screenY = 50

NOT1:
Internet Explorer ve Netscape Navigator pencereyi konumlandırmak için
farklı özellikler kullanılıyor. Her ikisinin desteklediği özellikleri
beraber kullanırsanız sorun kalmaz.

NOT2: Evet/hayır tipi değer alan (boolean) özellikleri yes/no veya 1/0 gibi değerler alır.

Çok Sayıda Pencere Açma

Birden fazla pencereyi tek tıklamayla nasıl açarız? Her pencere açma komutunu bir değişkene eşitleyen fonksiyon kurarız

<html>
<head>
<title>Yeni pencereler.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function pencere()
{
//Sayfalar açılıyor.
a1
= window.open(”dersjscr.asp?DersNo=1″, “Ders1″,
“toolbar=no,location=no,directories=no, status=no,
menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460″)
a2 = window.open(”dersjscr.asp?DersNo=2″, “Ders2″,
“toolbar=no,location=no,directories=no, status=no,
menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460″)
a3 = window.open(”dersjscr.asp?DersNo=3″, “Ders3″,
“toolbar=no,location=no,directories=no, status=no,
menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460″)
a4 = window.open(”dersjscr.asp?DersNo=4″, “Ders4″,
“toolbar=no,location=no,directories=no, status=no,
menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460″)
a5 = window.open(”dersjscr.asp?DersNo=5″, “Ders5″,
“toolbar=no,location=no,directories=no, status=no,
menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460″)
}
</script>
</head>
<body>

<form>
JavaScipt derslerinin ilk beş sayfasını açmak için düğmeye basın.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”pencere()” value=”JavaScript Dersleri”>
</form>

</body>
</html>

Sayfa Yönlendirme

JavaScript kullanarak mevcut pencerede kullanıcının istenen sayfaya yönlendirilmesi için location = “adres” komutunu kullanırız:

<html>
<head>
<title>Sayfa yönlendirme.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function yonlendir()
{
//Yönlendirilecek adres: dersjscr.asp?DersNo=1
location = “dersjscr.asp?DersNo=1″
}
</script>
</head>
<body>

<form>
Pencerenizi “JavaScipt”e Giriş” sayfasına yönlendirmek için düğmeye basın.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”yonlendir()” value=”JavaScript”e Giriş”>
</form>

</body>
</html>

Sayfayı Yeniden Yükleme

JavaScript kullanarak sayfanın yeniden yüklenmesini (refresh) sağlamak için location.reload() komutundan yararlanılır.

<html>
<head>
<title>Sayfa yönlendirme.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function tazele()
{
//Yönlendirilecek adres: derjsct1.html
location.reload()
}
</script>
</head>
<body>

<form>
Sayfayı yeniden yüklemek için aşağıdaki düğmeye basınız.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”tazele()” value=”Sayfayı yeniden yükle”>
</form>

</body>
</html>

Çok Sayfalı Uygulama Geliştirme

Buraya
kadar hep önceden hazırlanmış sayfaları açmayı inceledik. Peki daha
önce olmayan bir sayfayı açabilir miyiz? Soruyu daha doğru bir şekilde
sorayım: JavaScript ile yazıların bir kısmını yeni bir pencerede
yazdırabilir miyiz? Elbette. open.window(”…”,”…”,”…”) komutundaki
ilk yere sayfa adresi yazıyorduk; eğer yazmazsak yeni bir sayfa açılmış
olur. Bu kodu bir değişkene eşitleyerek, yeni sayfanın ismini
belirlemiş oluruz ve o sayfaya yazılması gerekenleri, o isimle
tanımladığımız nesnelere yazarız. Uygulamayı inceleyince anlayacaksınız.

<html>
<head>
<title>Dokümanları başka sayfada gösterme.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function yenipencere()
{
//Yepyeni bir sayfa açıyoruz.
yenisayfa
= window.open(”", “Yeni_Sayfa”, “toolbar=no,location=no,directories=no,
status=no,
menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=280,
height=50, left=200, screenX=200, top=100, screenY=100″)
yenisayfa.document.write(”<font color= blue>Yeni bir pencere açmak ve o pencereye yazı yazmak.</font>”)
yenisayfa.document.write(”<br>İşte bütün mesele bu!”)
yenisayfa.document.write(”<br>Bu yöntemle daha neler yapılır, neler!”)
}
</script>
</head>
<body>

<form>
Başka bir sayfa yaratmak için düğmeye basın.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”yenipencere()” value=”Yeni Pencere”>
</form>

</body>
</html>

Pencere Kapatma

Bu
ders konumuz gereği bir sürü sayfayı JavaScript ile açtık ama hepsini
elimizle kapattık. İsterseniz bir de JavaScript”le kapatalım. Komutumuz
çok basit: window.close().

<html>
<head>
<title>Sayfayı kapatmak.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function kapat()
{
//Sayfa kapatılıyor.
window.close()
}
</script>
</head>
<body>

<form>
Sayfayı kapatmak için aşağıdaki düğmeye basınız.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”kapat()” value=”Sayfayı kapat”>
</form>

</body>
</html>

Pencere Kutusu

Son
olarak window.status komutu üzerinde duralım. Pencerenin altında
linklerin yazılı olduğu kutucuğa yazı yazmaya yarar. Örneğin “Doğum
günün kutlu olsun Banu” yazdıralım.

<html>
<head>
<title>Sayfayı kapatmak.</title>
<script language=”JavaScript”>
//Fonksiyonu hazırlıyoruz.
function kutlama()
{
//Sayfa kapatılıyor.
window.status = “Doğum günün kutlu olsun Banu”
}
</script>
</head>
<body>

<form>
Düğmeye basarsanız pencerenin alt kısmında bir mesaj göreceksiniz.<br>
<!–Düğmeye basıldığında fonksiyon çağrılır.–>
<input type=”button” onclick=”kutlama()” value=”Banu”ya mesaj”>
</form>

</body>
</html>

Bu bölümde pencerelerle ilgili windows. başlangıçlı bazı kodlar gördük.

ajor.net

Rastgele Yazi