Window Nesnesi
Pencere nesnesi, javascript nesnele hiyerarşisinde en tepede yer almaktadır. Daha öncekipencere 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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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>
[Sayfayı göster] [Temizle] [İlk haline getir]
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:
<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>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulamamızda; 12 saniye boyunca, sayfanın boyutları saniyede bir değişmektedir.
Sayfa nesnesi, hiyerarşide pencereden sonra geliyor. Bir sayfa nesnesi form, resim gibi birçok başka nesneyi içerir. Eğer başka bir pencere söz konusu değilse, sayfa komutlarımız document. ile başlar ama uygulama birden çok pencere içeriyorsa pencere isimlerini de belirtmek gerekir: yenipencere.document. gibi.
Elemanlar Dizisi
Hiyerarşi sıralamasında sayfaların elemanları olduğunu görmüştük (DHTML sayfasındaki arakladığım grafiği hatırlayın). Bu elemanlar (form, resim) sayfa üzerinde bir dizi oluşturur. Örneğin sayfa üzerindeki formlar document.forms dizisi ile ifade edilir. Aynı şekilde sayfa üzerindeki resimler document.images dizisi halinde ifade edilebilir. Aşağıdaki uygulamada sayfa üzerinde kaç tane form olduğunu bulmak için, diziye length kodu atanıyor. Bu kodu Diziler sayfamızdan hatırlıyoruz, dizinin eleman sayısını buluyor.
<html> <head> <title>sayfa Elemanları,</title> <script language="JavaScript"> function say() { alert("sayfada " + document.forms.length + " tane form vardır.") } </script> </head> <body onload="say()"> <form name="Form1"> Adı:<input><br> SoyAdı:<input><br> </form> <form name="Form2"> Adresi:<input><br> Telefonu:<input><br> </form> <form name="Form3"> E-mail:<input><br> URL:<input><br> </form> <form name="Form4"> Mesleği:<input><br> </form> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Aynı şekilde forumda kaç resim olduğunu görmek için document.images.length kodunu kullanabilirdik. Daha önce dediğimiz gibi forms ve images dediklerimiz, birer dizidir(array). Yaptığımız şey, bu dizinin eleman sayısını bulmak. Ayrıca istediğimiz elemanların tanımlanmış parametrelerini bu dizi sayesinde öğrenebiliyoruz. Bunun için dizinin elemanını ve sonra parametre kodunu yazıyoruz: mesela document.images[3].src kodu ile 4. resmin kaynak adresini edinmiş oluruz. Aşağıdaki uygulamada sayfa üzerindeki formların tanımlanmış bgcolor ve name parametrelerini öğreniyoruz.
<html> <head> <title>sayfa Elemanları,</title> <script language="JavaScript"> function say() { var isim,renk isim = "Birinci formun ismi: "+document.forms[0].name isim += "n İkinci formun ismi: "+document.forms[1].name isim += "n Üçüncü formun ismi: "+document.forms[2].name isim += "n Dördüncü formun ismi: "+document.forms[3].name renk = "Birinci formun rengi: "+document.forms[0].bgcolor renk += "n İkinci formun rengi: "+document.forms[1].bgcolor renk += "n Üçüncü formun rengi: "+document.forms[2].bgcolor renk += "n Dördüncü formun rengi: "+document.forms[3].bgcolor alert(isim) alert(renk) } </script> </head> <body onload="say()"> <form name="AdSoyad" bgcolor="red"> Adı:<input><br> SoyAdı:<input><br> </form> <form name="AdresTel" bgcolor="green"> Adresi:<input><br> Telefonu:<input><br> </form> <form name="EmailURL" bgcolor="pink"> E-mail:<input><br> URL:<input><br> </form> <form name="Meslek" bgcolor="yellow"> Mesleği:<input><br> </form> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Form ve resim elemanları değil, başka sayfa dizilerimiz de var. Örneğin anchors dizisi ile sayfa üzerindeki anchor'ları (<a>) tanımlayabiliyoruz. Veya aynı şekilde links dizisi ile sayfadaki linklerin dizisini, applets ile sayfadaki applet'lerin dizisini oluşturabiliyoruz.
Sayfa Bilgileri
Yapacağımız yazılımda, sayfayla ilgili bazı bilgileri kullanabiliriz. Sayfanın başlığını kodla öğrenmek için title sayfa kodunu kullanırız. Şöyle kısaca listeleyim:
title Sayfanın başlığını metinsel olarak ifade eder.
document.title
URL Sayfanın URL adresini metinsel olarak ifade eder.
document.URL
referrer Sayfanın refere edilen URL adresini metinsel olarak ifade eder.
document.referrer
domain Sayfanın domain ismini metinsel olarak ifade eder.
document.domain
cookie Sayfanın cookie'lerini metinsel olarak ifade eder.
document.cookie
body Sayfanın gövde bölümünü metinsel olarak ifade eder.
document.body
<html> <head> <title>Sayfa bilgileri,</title> <style>table {visibility:hidden}</style> <script language="JavaScript"> function sayfa() { tablo.style.visibility="visible" baslik0.innerHTML=document.title baslik1.innerHTML=document.URL baslik2.innerHTML=domain baslik3.innerHTML=document.cookie baslik4.innerHTML=document.body baslik5.innerHTML=document.referrer } </script> </head> <body> <form> <input type="button" value="Sayfa Bilgileri" onclick="sayfa()"> </form> <table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="#d5c481"> <tr><td>Sayfanın başlığı:</td><td> <a id="baslik0">Görünmüyor</a></td></tr> <tr><td>Sayfanın URL adresi:</td><td> <a id="baslik1">Görünmüyor</a></td></tr> <tr><td>Sayfanın domain ismi:</td><td> <a id="baslik2">Görünmüyor</a></td></tr> <tr><td>Sayfanın cookie'si:</td><td> <a id="baslik3">Görünmüyor</a></td></tr> <tr><td>Sayfanın gövdesi:</td><td> <a id="baslik4">Görünmüyor</a></td></tr> <tr><td>Refere URL adresi:</td><td> <a id="baslik5">Görünmüyor</a></td></tr> </table> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulamamızda bazı bilgiler "" değerini taşıdığı için tabloda yer almıyor.
Yeni Sayfa Açma
Aynı pencerede başka sayfa açmak için document.open() sayfa kodunu kullanırız. Bu bomboş bir sayfa demek, bu sayfayı HTML kodlarıyla doldurmak için write sayfa kodu veya writeln sayfa kodundan yararlanırız. Bunu JavaScript derslerimizin başından beri yapıyorduk zaten. writeln kodunun write kodundan farkı en sona satır koyması. Kısa bir uygulama geliştirelim.
<html> <head> <title>Sayfa bilgileri,</title> <script language="JavaScript"> function yenisayfa() { var x=document.open() document.writeln("<html><title>Aha Size Beyaz Sayfa!</title></html>") } </script> </head> <body> <form> <input type="button" value="Beyaz Sayfa Açalım" onclick="yenisayfa()"> </form> </body> </html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Kaynak www.volkanderinbay.net/ders/dersjscr.asp , www.volkanderinbay.net/ders/dersjscr.asp
