JavaScript kullanarak özelliklerini görebileceğimiz veya değiştirebileceğimiz şeyler; örnğin bu browser
penceresi, bir form'un öğeleri hatta browser'ın ta kendisi JavaScript açısından birer nesnedir.
Bu özelliğinden dolayı JavaScript nesneye yönelik bir programlama dilidir. Şimdi bu nesneleri tanıyalım
ve özelliklerini inceleyelim.
- Window Nesnesi
Window, browser'ın sayfaların görüntülendiği kısmıdır.aşağıda bu nesnenin özelliklerini
görüyorsunuz:
- width: Pencerenin genişliğinin piksel cinsinden değeri
- height: Pencerenin yüksekliği piksel cinsinden değeri
- top: Pencerenin ekranın üst kenarından uzaklığının piksel cinsinden değeri
- left: Pencerenin ekranın sol kenarından uzaklığının piksel cinsinden değeri
- toolbar: Araç çubuğunun olması(yes) veya olmaması(no)
- menubar: Menubar'ın olması(yes) veya olmaması(no)
- resizeable: Pencere boyutlarının değiştirilebilir(yes) veya sabit(no) olamsı
- scrollbars: Kaydırma çubuklarının olması(yes) veya olmaması(no)
- status: Status bar'ın olması(yes) veya olmaması(no)
- location: Browser'ın location çubuğunun olması(yes) veya olmaması.
- copyhistory: Yeni açılan
pencereye eski pencerenin history kaydının aktarılması(yes) veya
aktarılmaması.
Bu listede 'yes' ve 'no' değerleri yerine '1' ve '0' da yazabilirsiniz.
- Yeni bir pencere açmak için
window.open(), kapatmak için
window.close() metodları kullanılır.
| window.open("pencereAdi.html","Pencereadı","width=300 height=240 toolbar=0") |
Burada 'pencereAdi.htm' yazan bölümü bu şekilde bırakırsanız yeni pencereye pencereAdi.htm sayfası yüklenir.
Buraya sadece penceraAdi yazar veya ("") şeklinde boş bırakırsanız yeni, boş bir sayfa açılır.
Aşağıda tıklandığında yeni pencere açan bir link örneği görüyorsunuz.
<html>
<head>
<title>Yeni
pencere açmak</title>
<script
language="JavaScript1.2">
function pencereAc()
{
varPencereNesnesi=window.open("YeniPencere","Pencere","toolbar=0 resizeable=0
width=300
height=300")
PencereNesnesi.document.writeln("<h1>Burasi yeni
pencere</h1>")
PencereNesnesi.document.write("<a
href=\"JavaScript:window.close(self)\">Pencereyi
Kapat</a>")
}
</script>
</head>
<body
>
<b><a href="JavaScript:pencereAc()">Yeni pencere
acmak icin
tiklayin</a></b>
</body>
</html> |
- Browser Nesnesi
Javascript için browser da bir nesnedir. Fakat window nesnesinin aksine browser
nesnesinin özelliklerini değiştiremeyiz.Sadece gerektiğinde kullanmak üzere değerlerini
öğrenebiliriz.Aşağıda broser nesnesinin özellikleri listelenmiştir:
- appname:
Browser'ın adı
- appVersion:
Browser'ın sürümü
- appCodeName
Browser'ın kod adı
- userAgent
Browser'ın kendini server'a tanıtırken
verdiği isim.
<html>
<head>
<title>Browser'ımızı
tanıyalım</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="Javascript1.2">
<!--
function Tani()
{
var
browseradi=" ";
browseradi +="Browser:"+navigator.appName
+"\r"
browseradi +="Surumu:"+navigator.appVersion +"\r"
browseradi
+="Kodadi:"+navigator.appCodeName+"\r"
browseradi
+="Useragent:"+navigator.userAgent+"\r"
alert(browseradi)
}
-->
</script>
</head>
<body
onLoad="Tani()">
</body>
</html> |
- Frame(Çerçeve) Nesnesi Frame tekniği özetle bir
pencere içerisinde birden çok pencere görüntülememize olanak verev bir
tekniktir. Eğer bu teknikle ilgili bilginiz yoksa veya yetersizse HTML
bölümüne bir göz atın. Javascript ile frame nesnesinin elemanlarına atıfta
bulunmak için aşağıdaki ifadeler kullanılır.
- top: Browser'ın kendisi, yani en üst pencere.
- parent: Frameleri oluşturan frameset.
- self: Çerçevenin
kendisi.
Parent Frame'in üzerinde yer alan 'yavru' çerçevelerin adları ise Javascript açısından
parent.frame[n]'dir. Burada n yerine frame'in numarası gelir. Mesela iki çerçeveli bir sayfanız
varsa ilk çerçevenin adı parent.frame[0], ikincisinin adı ise parent.frame[1] olur.
Aşağıdaki örneği cerceve.html adıyla kaydedin.
<html><
BR><head><BR> <title>Untitled</title><BR> <METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
</head>
<frameset
cols="*,*">
<frame name="bir"
src="default.html">
<frame name="iki"
src="ornek.html">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html> |
Aşağıdakini de frame1.html adıyla kaydedin.
<html>
<head><
BR> <title>bir</title><BR> <METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
</head>
<body>
Buraya
yazı
yazılacak<br>
</body>
</html> |
Son olarak aşağıdaki örneği frame2.html adıyla kaydedin.
<html>
<head>
<title>iki</title><
BR> <METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
yazdir1()
{
parent.frames[0].document.write("<h1>Merhaba!
Burası 1.
Çerçeve</h1>")
}
-->
</script>
</head>
<body>
<a
href="Javascript:yazdir1()">Buraya tıklayın ve 1. Çerçeveye yazı
yazılsın.</a>
</body>
</html> |
Üç dosyanın da aynı dizinde olduğuna emin olduktan sonra cerceve.html dosyasını çalıştırın.
- FORMLAR
Formlar HTML'in en önemli unsurlarından biridir, belki de en önemlisidir. Formlar bize
ziyaretçiden bilgi alma olanağı verirler. JavaScript açısından formlar da birer nesnedirler.
Bir formun elemanlarınının JavaScript'dek adı, 'n' form elemanının sırası olmak üzere, formAdı.elements[n]'dir.
Bu bağlamda,örneğin 'formAdı.elements.length' ifadesi form'un eleman sayısını, 'formAdı.elements[n].value'
ifadesi n'inci elemanın değerini, 'formAdı.elements[n].name ifadesi n'inci elemanın
değerinini verir. Şimdi JavaScript ile formlara neler yapabileceğimizi öğrenelim. Bu noktada
Form'ları ve elemanlarını bildiğinizi varsayıyoruz. Eksiklerinizi HTML bölümünden tamamlayabilirsiniz.
<html>
<head>
<title>Radio</title>
<META
content=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
yazdir(selNesnesi)
{
return
selNesnesi.options[selNesnesi.selectedIndex].value
}
-->
</script>
</head>
<body>
<form
name="form1">
<select name="dil">
<option
value="Web sayfalarının temel taşıdır.">HTML
<option
value="Olaylara duyarlı sayfalar yapmanıza
yarar.">JavaScript
<option value="Formları değerlendiren
programlar yazmanıza
yarar.">CGI
</select>
<p>
<input
type="Button" onClick="alert(yazdir(this.form.dil))" value="Açıklama
için
tıklayın!">
</p></form>
</body>
</html> |
Buradaki fonksiyona 'this.form.dil' ifadesiyle formun select bölümünü gönderiyoruz. Fonksiyonda
bu değer selNesnesi argümanıyla temsil edilmiş. Return ifadesiyle seçilen option'un değerini
tekrar fonsiyonun çağırıldığı yer olan alert metoduna gonderiyoruz, bu metod da işini yapıp
bu değeri görüntülüyor. Burada selNesnesi.selectedIndex ifadesi bize seçilen option'un index'ini
, yani sıra numarasını verir.
<html>
<head>
<title>Radio</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
yazdir(radyoNesnesi)
{
var sonuc=null
var ctrfor(ctr=0;ctr<radyoNesnesi.length
;ctr++)
{
if(radyoNesnesi[ctr].checked){
sonuc=radyoNesnesi[ctr].value
break}
}
document.form1.aciklama.value=sonuc
}
-->
</script>
</head>
<body>
<form
name="form1" >
<input type="radio" name="dil" value="Web
sayfalarının temel taşıdır.">HTML<br>
<input type="radio"
name="dil" value="Olaylara duyarlı sayfalar yapmanıza
yarar.">JavaScript<br>
<input type="radio" name="dil"
value="Formları değerlenderen programlar yazmanıza
yarar.">CGI
<p><input type="text" size="50"
name="aciklama" ></p>
<input type="Button"
onClick="yazdir(this.form.dil)" value="Açıklama için
tıklayın!">
</form>
</body>
</html>
|
Buradaki fonksiyon bir for döngüsüyle radyo düğmelerinin işaretli(checked) olup olmadığını
kontrol etmeye başlıyor.Eğer if metodu true sonucunu verirse, yani o radyo düğmesi işaretliyse,
döngüyü kesiyor ve işaretli düğmenin değerini 'sonuc' değişkeni aracılığıyla formun
text bölümüne yazdırıyor. Burada ve bir önceki örnekte geçen 'onClick' ifadesi bir olaydır, olayları bir sonraki bölümde
öğreneceğiz.
