$1.99 Domains* at GoDaddy.com

JAVA SCRIPT Pencere Nesnesi

javascript-17Pencere 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.imdb.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

 

 

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

 

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

 

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

 

 

<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, scrollBykomutunu 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 moveBykodları. 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.

 

 

 

<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 300×200 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:

 

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

 

 

Kategoriler: JavaScript, Web Programlama

Tags: , , , , ,

Yorumlar

Yorum Yok

Yorumunuzu Ekleyin

Yorum eklemek için giris yapmalısınız.