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, 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.
<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.
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 sayfa640×480=”sayfa1.html”
var sayfa800×600=”sayfa2.html”
var sayfa1024×768=”sayfa3.html”
switch(x)
{
case 640: window.location.href=sayfa640×480
break
case 800: window.location.href=sayfa800×600
break
case 1024: default: window.location.href=sayfa1024×768
}
}
</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.