Pencere Nesnesi (Ders-17)

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 Nesnesi (Ders-17)

Mesaj gönderen UnreaL »

Pencere nesnesi, JavaScript nesnele hiyerarşisinde en tepede yer almaktadır. Daha önceki Pencere Komutları sayfasında bir bakıma bu konuya giriş yapmıştık. Şimdi o sayfadan devam edelim:

alert(...) : Uyarı kutusuyla kullanıcıya mesaj gönderir. alert("Bu sayfa henüz hazırlanmamıştır!")

confirm(...) : Onay kutusuyla kullanıcı tarafından yönlendirilme olanağı tanır. confirm("Sayfaya girmek istiyor musunuz?")

prompt(...) : Yazı kutusuyla kullanıcıdan bilgi alır. prompt("Yaşınızı girin lütfen!","Buraya...")

window.open(...) : Özelliklerini belirleyebileceğiniz yeni bir sayfa açar. window.open("http://www.imdb.com", "sinema", "toolbar=0, menubar=0, resizable=1")

location : Sayfaya yönlendirmeyi sağlar. location = "http://www.½.com"

location.reload() : Sayfayı yeniden yüklemeye (refresh) yarar. location.reload()

window.close : Pencereyi kapatır. window.close

window.status : Pencere kutusuna yazı yazmayı sağlar. window.status = "Sayfama hoş geldiniz."

Ve pencere komutları bütün hızıyla devam ediyor.

Ekran Komutları

Kullanıcıların ekranı hakkında bilgiler almak isteyebiliriz. Bunun için aşağıdaki screen (ekran) komutları kullanılır. Not: Ekran ile monitörün farklı şeyler olduğunu aklınızda tutun.

screen.width : Kullanıcının ekran genişliğini piksel cinsinden ifade eder. screen.width

screen.height : Kullanıcının ekran yüksekliğini piksel cinsinden ifade eder. screen.height

screen.availWidth : Kullanıcının kullanılabilir ekran genişliğini piksel cinsinden ifade eder. screen.availWidth

screen.availHeight : Kullanıcının kullanılabilir ekran yüksekliğini piksel cinsinden ifade eder. screen.availHeight

screen.colorDepth : Kullanıcının kullandığı renk derinliğini bit (byte) cinsinden ifade eder. screen.colorDepth

Kod: Tümünü seç

<html>
<head>
<title>Ekran Değerleri</title>
<script language="JavaScript">

function etiket()
{
baslik.innerHTML="Ekran Değerleri"
}

function ekran(kosul)
{
switch(kosul)
{
case 1: baslik.innerHTML="Ekran genişliği: " + screen.width + "piksel"
break
case 2: baslik.innerHTML="Ekran yüksekliği: " + screen.height + "piksel"
break
case 3: baslik.innerHTML="Kullanılabilir ekran genişliği: " + screen.availWidth + "piksel"
break
case 4: baslik.innerHTML="Kullanılabilir ekran yüksekliği: " + screen.availHeight + "piksel"
break
case 5: baslik.innerHTML="Ekran renk derinliği: " + screen.colorDepth + "bit"
break
case 6: baslik.innerHTML="Ekran çözünürlüğü: " + screen.width + "x" + screen.height + "piksel"
}
}

</script>
</head>
<body>

<h2 id="baslik" >Ekran Değerleri</h2>
<a href="denjstg1.html" onmouseover="ekran(1)" onmouseout="etiket()">Ekran genişliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(2)" onmouseout="etiket()">Ekran yüksekliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(3)" onmouseout="etiket()">Kullanılabilir ekran genişliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(4)" onmouseout="etiket()">Kullanılabilir ekran yüksekliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(5)" onmouseout="etiket()">Ekran çözünürlüğü.</a><br>
<a href="denjstg1.html" onmouseover="ekran(6)" onmouseout="etiket()">Ekran renk derinliği.</a><br>

</body>
</html> 
Bundan sonra uygulamalarımız biraz daha uzun olacak. Amacım kullanıcıları CSS, HTML ve JavaScript'i beraber kullanmaya ısındırmak. Şimdi çok sorulan bir kodu göstereyim: Kullanıcının çözünürlüğüne göre sayfa yönlendirme:

Kod: Tümünü seç

<html>
<head>
<title>Çözünürlük değerine göre sayfa yönlendirme...</title>
<script language="JavaScript">

function yonlendir()
{
var x=screen.width //Yönlendirilecek sayfaları tanımlıyoruz. 
var sayfa640x480="sayfa1.html" 
var sayfa800x600="sayfa2.html" 
var sayfa1024x768="sayfa3.html" 
switch(x)
{
case 640: window.location.href=sayfa640x480
break
case 800: window.location.href=sayfa800x600

break
case 1024: default: window.location.href=sayfa1024x768

}
}

</script>
</head>
<body onload="yonlendir()">

</body>
</html> 
Ekran hakkında yukarıdaki bilgilerden başka, pencerenin ekrana olan yatay ve düşey uzaklıklarını da ifade edebiliyoruz: screenLeft (sola yatay uzaklık), screenTop (sağa yatay uzaklık):

Kod: Tümünü seç

<html>
<head>
<title>Pencere Koordinatları</title>

<style>
table {visibility: hidden}
</style>

<script language="JavaScript">
function konum()
{
var x, y
x = screenLeft
y = screenTop
tablo.style.visibility="visible"
baslik1.innerHTML="Pencerenin, ekranın sol kenarına yatay uzaklığı: " + x + " piksel"
baslik2.innerHTML="Pencerenin, ekranın üst kenarına düşey uzaklığı: " + y + " piksel"
}
</script>

</head>
<body>

Pencerenin ekrana olan koordinatlarını bilmek istiyorsanız, düğmeye basın.
<form>
<input type="button" value="Koordinatlar" onclick="konum()">
</form>
<table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="3399cc">
<tr><td>
<a id="baslik1">yatay</a></td></tr>
<tr><td>
<a id="baslik2">düşey</a>
</td></tr></table>

</body>
</html> 
Bu uygulamamızda, düğmeye basıldığında pencerenin ekrana olan yatay ve düşey mesafelerini ediniyoruz. Düğmeye bastıktan sonra pencereyi ekranın başka bir bölümüne taşıyın ve bir daha düğmeye basın. Bu uygulamada CSS derslerinden tanıdığımız visibility özelliğini kullanarak tabloyu başta sakladık, sonra da JavaKodlarıyla tabloyu görünür yaptık. Bu yöntemin hoşunuza gittiğini umuyorum.

Pencere Boyutları

Penceremizin boyutlarını JavaScript kodları kullanarak istediğimiz ölçüye getirebiliriz. Bunun için resizeTo(..., ...) kodu kullanılır. Parantez içindeki ilk veri pencerenin genişlik değerini, ikinci veri ise pencerenin uzunluk değerini (piksel cinsinden) ifade ediyor. Uygulamamıza geçelim:

Kod: Tümünü seç

<html>
<head>
<title>Pencere Konumu</title>

<script language="JavaScript">
function yeniboyut()
{
var x=prompt("Pencere genişlik değerini girin lütfen...","piksel cinsinden")
var y=prompt("Pencere yükseklik değerini girin lütfen...","piksel cinsinden")
window.resizeTo(x,y)
baslik1.innerHTML="Pencere genişliği: " + x + " piksel"
baslik2.innerHTML="Pencerenin yüksekliği: " + y + " piksel"
}
</script>

</head>
<body onload="yeniboyut()">

<table cellpadding="3" cellspacing="0" border="1" bgcolor="3399cc">
<tr><td>
<a id="baslik1">yatay</a></td></tr>
<tr><td>
<a id="baslik2">düşey</a>
</td></tr></table>
<b>F5</b>'e basarak, pencere genişliğini yeniden ayarlayabilirsiniz.

</body>
</html> 
Uygulamamız herşeyi anlatıyor sanırım. resizeTo ile pencerenin konumlarını istediğimiz değerlere getiriyoruz. Şimdiki kodumuz resizeBy(..., ...) ise pencere boyutunu parantez içinde yer alan piksel değerleriyle artırmaya (negatif piksel değerleriyle azaltmaya) yarıyor. Önceki uygulamamızdaki resizeTo(x,y) yerine resizeBy(x,y) ifadesi koyarsanız, uygulama yürürlükteki pencereyi artırma (negatif değer koyarsanız azaltma) işlemi yaparsınız.

Penceredeki sayfa boyutu, pencereninkinden büyükse, kayma kutuları (scrollbars) kullanılır. JavaScript kodlarıyla sayfayı kaydırmak istiyorsak scroll(..., ...) komutunu kullanırız. Örneğin window.scroll(0,300) kodu ile penceredeki sayfanın, en tepeden 300 piksel aşağıya kaymasını sağlarız. Aynı işlevi gören scrollTo komutunu da kullanabiliriz. Sayfanın yürürlükteki konumundan aşağıya kaymasını istiyorsak, scrollBy komutunu kullanırız. (Kendi kayar kutularını (scrollbars) kendileri yapmak isteyenlerin dikkatine...). Bu komutlarla ilgili şimdilik uygulama yapmayım, hem anlamış olduğunuzu düşünüyorum, hem de ileri de bu komutların da yer aldığı ileri JavaScript uygulamaları yapacağız.

Pencere Konumu

Pencere nesnesinin ekrana göre konumunu screenLeft ve screenTop kodları ile belirleyebiliyorduk. Peki pencereyi istediğimiz konuma JavaScript kodlarıyla nasıl getiririz? Sorunun cevabı: moveTo ve moveBy kodları. moveTo komutu ile pencerenin sol üst köşesini istediğimiz koordinatlara getirebiliyoruz, moveBy ise pencerenin sol üst köşesini istenen miktarda hareket ettirmeye yarıyor.

Kod: Tümünü seç

<html>
<head>
<title>Pencere Ortalama</title>

<script language="JavaScript">
function boyut()
{
window.resizeTo(300,200)
}

function ortala()
{
var x=screen.availWidth
var y=screen.availHeight
window.moveTo(x/2-150, y/2-100)
}
</script>

</head>
<body onload="boyut()">

<form>
<input type="button" value="ortala" onclick="ortala()">
</form>
</body>
</html> 
Bu uygulamamızda pencerenin 300x200 piksel boyutlarında açılmasını sağlıyoruz. Düğmeye atanana ortala() fonksiyonu ile, önce kullanıcı ekranının boyutlarını öğreniyoruz, sonra ekranı ortalayacak şekilde; moveTo() komutu ile pencerenin sol üst köşesini hareket ettiriyoruz.

Zaman Aralığı

Fonksiyonu harekete geçiren olayın oluşmasından belli miktar zaman geçtikten sonra birşey oluşmasını istiyorsak, setTimeout(..., ...) komutu kullanılır. Örneğin bir düğmeye basıldıktan sonra uyarı kutusunun çıkmasını istiyorsak:

setTimeout("alert('Bu mesaj 3 saniye sonra çıkar.')", 3000)

İlk değer parantez içinde bir JavaScript kodudur, ikinci değer ise ilk değerin ne kadar süre sonra oluşacağını belirleyen, mili saniye cinsinden zaman değeridir. (1 saniye = 1000 mili saniye) Bu komut ile uyarı kutusu 3 saniye bekledikten sonra görünecektir. Aşağıdaki uygulamamıza bakalım:

Kod: Tümünü seç

<html>
<head>
<title>Pencere Dansı</title>

<script language="JavaScript">
function boyut()
{
for(var i=0; i<=10; i+=2)
{
setTimeout("window.resizeTo(400,100)", i*1000)
setTimeout("window.resizeTo(100,400)", (i+1)*1000)
}
}
</script>

</head>
<body onload="boyut()" bgcolor="crimson">
Bu işlem sadece 12 saniye sürer.
</body>
</html> 
Bu uygulamamızda; 12 saniye boyunca, sayfanın boyutları saniyede bir değişmektedir.




Volkan Derinbay'a tşkler.
korayser
Fast Friend
Fast Friend
Mesajlar: 143
Kayıt: 27-01-2008 19:43

Mesaj gönderen korayser »

teşekkürler
www.korayhoylu.com
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 1 misafir