Bu sayfaya kadar JavaScript'in temellerini öğrenmek için alert(...) ve document.write(...) komutlarıyla idare ettik. Artık JavaScript'in kodlarına ve inceliklerine ağırlık vereceğiz.
Bu sayfanın konusu pencere komutları. Birçok öğretici site pencere komutlarını sonlara doğru anlatmış. Ama bence bu konu çok zevkli ve daha önce anlatarak okuyucuları JavaScript'in renkli dünyasına daha kolay çekmek mümkün. Hem neler yapabileceklerini zihinlerinde düşünmeye başlattırabilecek bir konu bu. Sanırım konuyu yeterince övdüm. Sayfamız bir sürü örnekle dolu. Seveceğinizi umarım
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>
<script language="JavaScript">
var yas= prompt("Yaşınız kaç acaba?","Lütfen yaşınızı rakam ile yazınız...")
if (yas >= 18) kabul()
if (yas < 18 && yas > 0) red()
if (yas == null || yas == "") geri()
</script>
</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.
<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") }
</script>
</head>
<body>
<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>
<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 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
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>
Volkan Derinbay'a tşkler. |
