Pencere Komutları (Ders-9)

Java programlama dili hakkında yardım, sorun ve paylaşımlar.
Cevapla
Kullanıcı avatarı
UnreaL
Fast Friend
Fast Friend
Mesajlar: 207
Kayıt: 24-12-2005 17:26

Pencere Komutları (Ders-9)

Mesaj gönderen UnreaL »

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.

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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:

Kod: Tümünü seç

<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:

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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().

Kod: Tümünü seç

<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.

Kod: Tümünü seç

<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.
Cevapla
  • Benzer Konular
    Cevaplar
    Görüntüleme
    Son mesaj

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 2 misafir