Javascript Nesneler

NESNELER

Javascript programcılığında nesne (object), ve nesnenin özellikleri (properties), genellikle HTML belgesinin adı (name) ve değeri (value) olan herşeydir. Bir HTML unsurunun etiketinde NAME ve VALUE bölümleri varsa, bu unsur, Javascript için nesne sayılır.
Bu tanıma göre Form, Javascript için bir nesnedir. Ayrıca Form nesnesinin bir ögesi olan INPUT, kendisi de ad ve değer alabildiğine göre, Javascript için bir nesne sayılır; fakat bu nesneye daima içinde bulunduğu nesne “dolayısıyla” atıfta bulunabilirsiniz. Yani eğer formun ismi form1 ve input'un ismi buton1 ise , buton1 nesnesine ;

form1.buton1

şeklinde ulaşılır. Yani araya bir nokta konularak form1 içindeki buton1 demiş olursunuz. Javascriptte her nesnenin belirliözellikleri vardır. Bu özellikleri kullanırkende şu kurala uymanız gerekir:

nesneAdı.özellikAdı

Örneğin form1.name veya form1.buton1.value vs.

Bir nesnenin durumunu, değerini veya bir özelliğini değiştiren Javascript’in kendi içinde kullanılmaya hazır işlevleri; tarih gibi, Browser’ın masaüstündeki penceresinin bir özelliği gibi değerleri belirleyen otomatik işlevleri; nesnelerin değerlerini belirli bir düzen içinde arttıran veya azaltan süreçleri; ve Javascript’in hazır şablonlarından yeni bir nesne üreten işlemleri, metod adı altında toplarız. Her nesnenin kendine ait bir metodu olabilir; bir metod birden fazla nesne ile birlikte kullanılabilir. Bu gibi ifadeleri şöyle yazarız:

nesneAdı.metodAdı (argüman)

Örneğin Math.round()

NOT: Metodlar hazır fonksiyon olarak ta isimlendirilmektedir.

Javascript Nesnelerinin HTML karşılıkları

Javascript Nesnesi                                 HTML Karşılığı

Pencere (Window)                                 Yok
Çerçeve (Frame)                                 <FRAME>
Belge (Document)                               <BODY>
Form                                                   <FORM>
Düğme                                                <INPUT TYPE=”button”>
İşaretleme Kutusu                               <INPUT TYPE=”checkbox”>
Gizli (Hidden)                                      <INPUT TYPE=”hidden”>
Dosya Çıkart (file upload)                   <INPUT TYPE=”file”>
Parola (password)                              <INPUT TYPE=”password”>
Radyo düğmesi (Radio)                       <INPUT TYPE=”radio”>
Başa dön (Reset)                                 <INPUT TYPE=”reset”>
Seç (Select)                                         <SELECT>
Gönder (Submit)                                   <INPUT TYPE=”submit”>
Metin (Text)                                         <INPUT TYPE=”text”>
Metin Alanı (Textarea)                       <TEXTAREA>
Bağ (Link)                                           <A HREF=””>
Bağlantı (Anchor)                               <A NAME=””>
Applet                                                 <APPLET>
Resim (Image)                                     <IMG>
Plugin                                                  <EMBED>
Alan (Area)                                         <MAP>

DOCUMENT (belge) nesnesi.......... (window.document)

Web sayfasının Javascript dilinde adı Belge’dir. İster metin, ister sadece Javascript kodu, ister sadece grafik içersin, <HTML> diye başlayan ve </HTML> diye biten herşey, Javascript gözüyle belgedir. Javascript’te “document” (yani belge)nesnesi kavramını öğrenirken, İlk kavranması gereken unsur, “container” (içinde tutan) meselesidir. Hatırlayacağınız gibi, yukarıdan beri Javascript’e ekrana bir şey yazdıracağımız zaman, şuna benzer bir komut veriyoruz:

document.write(“<H1>Merhaba Dünya!</H1>”)

Burada kullandığımız write() metodu, “document” nesnesine, o da Browser’ın “window” (pencere) nesnesine aittir. “window” nesnesini yazmıyoruz; çünkü zaten onun içindeyiz. Yazsak birşey değişir mi? Tabiki hayır sadece fazlalık olur.

Ancak yeni bir Browser penceresi açtırmak istersek, bunu da açıkça belirtmemiz gerekir.

<html>
<head>

<script language="JavaScript">

function yenipencere()

{

yenisayfa = window.open( "", "Yeni_Sayfa", "width=280, height=250")
yenisayfa.document.write("<h1>Yeni bir pencere açmak ve o pencereye yazı yazmak.<h1><br/>")
yenisayfa.document.write("<a href=\"javascript:close()\">KAPAT<a>")

}

</script>
</head>
<body>

<form>
<input type="button" onclick="yenipencere()" value="Yeni Pencere">
</form>

</body>
</html>

Buton tıklandığında yenipencere fonksiyonu çalışıyor ve window.open ile yeni bir pencere oluşturulup yenisayfa isimli değişkene atılıyor. Başka bir deyişle window.open komutuyla parantez içindeki özelliklere sahip yenibir window nesnesi yaratılıyor ve yenisayfa isimli değişkene atılıyor.Dolayısıyla bu yeni window nesnesine yenisayfa ismiyle ulaşılabiliyor. Dİkkat edilirse daha sonr abu yeni window nesnesi içerisine sadece

document.write komutu ile değil,

yenisayfa.document.write komutu ile

yazı ekleniyor. Çünkü içine yazı yazdırmak istediğimiz window nesnesi, içinde bulunduğumuz değil, yeni açılacak olan yenisayfa değişken isimli window nesnesidir.Dolayısıyla komutun başında yenisayfa değişkenini belirtiyoruz.

Ayrıca [yenisayfa.document.write("<a href=\"javascript:close()\">KAPAT<a>")] satırıyla yeni açılan sayfa içerisinde KAPAT iismli bir link oluşturuluyor ve href olarak javascript:close() yazılıyor. Yani, bu link tıklandığında javascriptin sağladığı close() fonksiyonunu gerçekleştir demiş oluyoruz. Dolayısıyla linke tıklandığında sayfa kapanıyor.

Burada close() yerine

window.close() veya

self.close() veya

this.close()

yazılabilir.Hepsi aynı işi yapar.

self.close() kendini kapat,

this.close() bunu kapat anlamına gelir.Burdaki "bu" aktif olan neyse onu temsil eder.close() pencere fonskiyonu olduğuna göre ve o anki pencere, yeni açılan pencere olduğundan, "this (bu)" diyerek o pencere kastedilmiş olur.

Butonun yaptığı işi link ile (<a>) yapmak isteseydik;

<html>
<head>

<script language="JavaScript">

function yenipencere()

{

yenisayfa = window.open( "", "Yeni_Sayfa", "width=280, height=250")
yenisayfa.document.write("<h1>Yeni bir pencere açmak ve o pencereye yazı yazmak.<h1>")
yenisayfa.document.write("<a href=\"javascript:close()\">KAPAT<a>")

}

</script>
</head>
<body>

<a href="#" onclick="yenipencere()"> Yeni Pencere (linktir) </a>

</body>
</html>

Burada sadece Yeni Pencere isimli bir link oluşturuluyor. Dikkat edilirse href değeri # olarak kapatılıyor.Yani tıklandığında herhangi bir linke yönlendirme yapılmıyor. Ancak onclick ile yenipencere() fonksiyonu çalıştırılıyor ve aynı işlemler gerçekleşiyor.

Burada

<a href="#" onclick="yenipencere()"> Yeni Pencere (linktir) </a>

yerine

<a href="javascript:yenipencere()"> Yeni Pencere (linktir) </a>

yazabilirdik. Sonuçta her iki cümlede de link tıklandığında yenipencere() fonksiyonunu çalıştır demiş oluyoruz.

WINDOW (pencere) nesnesi

window nesnesinin html için tam anlamıyla bir karşılığı olmamasına rağmen, "mevcut pencere" olarak düşünebiliriz. Bu nesne ve metodları aracılığıyla pencerenin birçok özelliği kontrol edilebilir.

window.open()

Yeni bir pencere açar. Kullanımı için : pencere komutları

window.close()

Mevcut pencereyi kapatır.Kullanımı için : pencere komutları

window.status

Durum çubuğu (status bar) üzerine yazı yazmayı sağlar. window.status=" mesaj " şeklinde kullanılır. Ancak tarayıcıda status barın görünür olması grekmektedir. Kullanımı için : pencere komutları

location

Aslında window nesnesi altında başlı başına bir nesnedir. Mevcut pencere içerisinde başka bir link veya sayfa açar.Kullanımı için : pencere komutları

location.reload()

Sayfayı yeniler. Kullanımı için : pencere komutları

window.location.protocol

Browser’ın görüntülediği belgenin nereden geldiğini gösterir. Gerçi, HTML size görüntülediği belgenin nereden geldiğini bildirmez, ama Browser, bunu “window.location.protocol” nesnesi olarak tutar.

Bu değer, eğer sayfa internet üzerinden açılmışsa “http:” , eğer sabit diskten açılmışsa “file:” (ikisi de küçük harf ve sonlarında iki nokta üstüste var) olur.

if (window.location.protocol == “http:”)
{
alert (“Bu belge Internet’ten geliyor.”)
}
else
{
alert (“Bu belge sabit diskten geliyor.”)
}

window.history

Aslında window nesnesi altında; browser’ın, ziyaret edilen siteler ve sayfalar listesinde ileri veya geri gitmekte kullandığı nesnedir. HTML’de bu listeye erişmeyi sağlayan etiket bulunmamakla birlikte Javascript bu listeyi kullanabilir. Örneğin:

function gerigit() { window.history.go(-1) }

şeklindeki bir fonksiyon ve bu fonksiyonu çağıran bir düğme (onClick=gerigit() gibi) Tarih nesnesinden yararlanmasını sağlayabilir.Parantez içerisindeki değer -1 olduğundan tarayıcı 1 sayfa geriye gider.İstenirse bu değer değiştirilebilir.

window.moveTo(x,y)

Pencereyi bir x,y ile belirlenmiş noktaya taşımak için kullanılır. Taşınan nokta ekranın sol üst köşesidir. Normalde bu noktanın varsayılan değeri (0,0).

Window.moveTo(100,100); // Internet penceresini 100,100 noktasına taşır. Ancak taşınması için pencere tam ekran olmamalı ve pencerede başka sekme açık olmamalıdır. Chrome 'da çalışmıyor.

function tasima() { window.moveTo(100,235) }

<head>

<script language="JavaScript">

function tasima()
{
window.moveTo(100,235)
}

</script>
</head>
<body>

<form>
<input type="button" onclick="tasima()" value="Yeni Pencere">
</form>

</body>
</html>

Buton tıklandığında pencere x=100 y=235 noktasına taşınacaktır. (sol üste noktaya göre)

<html>
<head><title>ornek.html</title></head>
<body>
<script language="javascript"> 
</script>
<center>Web Sayfama Hoşgeldiniz...</center>
</body>
</html>

Script çalıştığında sayfa yüklenirken, sayfanın y koordinatı, for döngüsüile 400 den 0'a inecek ve dolayısyla sayfa yükselerek ekrana gelecektir.

NOT : Mesaj kutuları; (alert, confirm ve prompt) window nesnesine aittir.Kullanımı için : pencere komutları

NAVIGATOR (tarayıcı) nesnesi

Tarayıcı özelliklerini barındıran nesnedir. Tarayıcı nesnesi olarak ta geçer. Kullanımı için : tarayıcı komutları

FRAME (çerçeve) nesnesi

Bir Navigator penceresinde birden fazla HTML belgesi görüntüleme imkanı veren çerçeve (Frame) tekniği, tasarım açısından kolaylık sağlar. Bununla birlikte halâ bazı Web ziyaretçilerinin çerçeveden hoşlanmadıkları da gerçektir.

Javascript açısından her bir çerçeve bir pencere sayılır; bunlara atıfta bulunurken şu adlandırma uygulanır:

top               En üst pencere. yani Browser’ın kendisi.
parent           Herhangi bir Frame’i oluşturan Frameset. Çerçeve, başka bir çerçeve içinde ise,bu çerçevenin içinde bulunduğu çerçeve parent sayılır. Sayfada sadece bir Frameset varsa, bütün çerçeveler için “top” aynı zamanda “parent” sayılır.
self              Çerçevenin kendisi.

Javascript, bir parent (ebeveyn) Frameset’in yavru çerçevelerini 0’dan itibaren numaralar. Yani, sayfanızda iki çerçeveniz varsa, birincisi “parent.frames[0]” ikincisi ise “parent.frames[1]” adıyla bilinir.

Şimdi, iki çerçeveli bir Frameset için şu HTML kodunu “anacerceve.html” adıyla kaydedin.

anacerceve.html

<html>
<head>
<title>Dinamik Cerceve</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<frameset cols="40%,*">
<frame src="doc1.htm" name="cerceve1">
<frame src="doc2.htm" name="cerceve2">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Burada bir frameset ve bu frameset içerisinde cerceve1 ve cerceve2 isimli iki çerçeve oluşacak. Cerceve1 de doc1.html , cerceve2 de doc2.html yüklenecek. Javascript için cerceve1 ilk açılan çerçeve olduğu için : parent.frames[0] , ve cerceve 2 ise parent.frames[1] olarak isimlenir.

Bu Frameset’in çağrıda bulunduğu “doc1.htm” ve "doc2.html" olarak, şu kodları kaydedin:

doc1.html

<html>
<head>
<title>Cerceve1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<script LANGUAGE="JavaScript">

function degistir()
{
parent.frames[1].document.write("bir çerçeveden diğerine yazı <br/>")
}

</script>
</head>
<body>

<form >
<input type="button" onClick = "degistir() " value="yaz">
</form>
</body>
</html>

doc2.html

<html>
<head>
<title>Çerçeve 2</title>
</head>
<body>
<p>Bu sayfa güncellenecek</p>
</body>
</html>

Burada doc1.html içerisinde ; yaz isimli buton tıklandığında değiştir fonksiyonu çalışıyor.ve parent.frames[1].document.write satırıyla, ikinci çerceve içerisine yazı yazılıyor. Dikkat edilirse üzerine yazı yazılacak çerceve ikinci açılan çerçeve olduğu için, parent.frames[1] olarka isimlendiriliyor.

String Nesnesi

Javascript bir alfanümerik değişkeni ele aldığı anda bu onun için bir String nesnesi olur; ve dolayısıyla, bir değişkenden öte bazı özellikler ve metodlar kazanır. Dizi-değişkenler de oluşturuldukları anda Array nesnesi olurlar; yeni özellikleri ve metodları olur.

Javascript kodunuzun ya HTML’in HEAD bölümünde genel nitelikli, ya da herhangi bir fonksiyonun içinde yerel nitelikli bir değişken tanımladığınız zaman bu türüne göre bir String (alfanümerik, karakter) değişken olur. Örneğin:

var kitabınAdi = “Gazap Üzümleri”

ifadesi bize içeriği “Gazap Üzümleri” olan bir değişken kazandırır. İçeriğinin niteliği nedeniyle bu değişken, String değişkendir. Fakat şu aşağıdaki ifadeye bakarsanız, Javascript’e yeni bir String nesnesi oluşturması için de emir verebiliriz:

var kitabinAdi = new String(“Gazap Üzümleri”)

“new,” (=yeni) hatırlıyorsanız, Javascript‘e yeni bir nesne oluşturması için verdiğimiz komuttu. Burada Javascript’e yeni bir String nesnesi oluşturmasını; bunun içeriğini “Gazap Üzümleri” yapmasını, ve bu nesneyi, “kitabinAdi” isimli değişkene atamasını söylüyoruz. değişken oluşturma açısından ikisi arasında hiç bir fark olmamakla birlikte, bu ikinci yöntem bize, alfanümerik değişkenlerin özel niteliğini, nesne olduklarını gösteriyor. Bu sayede alfanümerik değişkenlerin (yani String nesnelerinin) bazı ilave özelliklerinden yararlanabiliriz. Bu özelliklerin sık kullanılanlarını şöyle sıralayabiliriz:

. length

.charAt(i)

.indexOf(nnn)

.lastIndexOf(nn)

.substring(i,j)

.bold()

.fontcolor(“renk”)

.fontsize(“ölçü”)

.italics()

.toLowerCase()

.toUpperCase()

Kullanımları için.................. Metin Komutları

FORM NESNELERİ

Javascript’in icad edilme nedenlerinin başında, ziyaretçi ile etkileşme gelir; ziyaretçi ise Web tasarımcısı olarak size bilgileri ancak ve sadece Form ile ulaştırabilir. Bu sebeple Javascript açısından HTML’in en önemli nesneleri, Form nesneleridir.

HTML, kendi formunu kendisi oluşturur; bu bakımdan Javascript’e bir görev düşmez. Javascript formdaki bilgilerin işlenmesi sırasında devreye girer. Önce Form nesnesinin özelliklerini hatırlayalım:

<FORM

NAME = formun_adı
ACTION = CGI_programı
ENCTYPE = kodlama_türü
METHOD = GET veya POST
TARGET = pencere_adı
onSubmit =”metodun_adı”>

</FORM>

Form, gerçek amacıyla kullanıldığı durumlarda, Javascript, formdaki bilgilerin Server’a gönderilmeden önce sınanmasını sağlayabilir. Burada kısaca, Javascript açısından form nesnesinin unsurlarını nasıl tanıyabileceğimizi ele alalım. Benzeri sınama kodları yazarken, bu unsurlara referans yapacağınız zaman, bu unsurların adlarını ve değerlerini bulma yöntemini bilmeniz gerekir.

Form etiketi içindeki bütün elemanlar elements adlı dizi-değişkenin içine yazılırlar ve içerikleri form.elements[i].value (i, elamanın sıra numarası olmak üzere) metoduyla bilinirler. Diyelim ki “bilgiForm” adlı formunuzun birinci elemanı “<INTPUT TPYE=”text” NAME=”musteriAdi”...> şeklinde bir etiket. Bu etiketin oluşturacağı kutuya ziyaretçinin yazacağı isim, Javascript açısından

bilgiForm.elements[0].value veya

bilgiForm.musteriAdi.value

şeklinde bilinir.

<head>
<script language="JavaScript">

function onay() {

var sonuc

if ( (document.form1.ad.value == "") || (document.form1.ad.value == null) )
{
alert("ad gir")
sonuc=false
}
else {
sonuc=true
}
return sonuc
}

</script>

</head>
<body>

<form name="form1" method="post" onSubmit="return onay()">
Adınız
<input type="text" name="ad" id="ad">
<input type="submit" name="buton1" value="gönder">
</form>

</body>
</html>

Burada buton tıklandığında formdaki onSubmit="return onay()" ile onay() fonksiyonu çalıştırılıyor ve cevap bekleniyor. onay() fonksiyonunda , ad isimli metin kutusunun içeriği kontrol ediliyor. document.form1.ad.value == "" satırıyla, form1 isimli form içindeki ad isimli metin kutusunun değeri(value) "" ise yani boş ise, alert kutusu görüntüleniyor ve sonuc değikeninin içeriği false yapılıyor. Eğer kutunun içi boş değilse (else) bu kez sonuc değişkeninin içeriği true yapılıyor ve sonuc değişkeni return sonuc satırıyla fonksiyonun çağrıldığı yere geri döndürülüyor. Sonuç olarak kutuya birşey yazılmadan submit butonuna basıldğında ekranda "ad gir" uyrası cıkıyor ve form gönderilmiyor.

NOT: Burada ad kutusunun içeriğini document.form1.elements[0].value şeklindede belirtebilirdir. Çünkü metin kutusu, formun ilk elemanıdır (kodlara bakın, ilk açılan form elamanı "text" ikincisi ise "button" dur).

Radio Button

avascript fonksiyonlarımızda Form nesnesinin işaretleme kutularından hangisinin işaretlenmiş olduğunu belirlemek işaretli unsurun değerlerini bulabilmek, değiştirebilmek veya başka bir yerde kullanabilmek için önem taşır. Browser, ele aldığı bir HTML sayfasındaki Form nesnesinin unsurlarını ve burada CHECKBOX nesnesini bir dizi-değişkenin içinde tutar; bunlardan işaretlenmiş olanın CHECKED (işaretli) özelliğini True (doğru) yapar. Bu durumdan yararlanarak istediğimiz kutunun işaretli olup olmadığını sorgulayabiliriz. Burada nesnenin “.value” özelliği işe yaramaz; çünkü kutu işaretli olsa da olmasa da “.value” özelliği aynıdır.

İşaretleme kutularında bilmek istediğimiz husus, bu nedenle işaretli olup olmadıklarıdır. Örneğin, sayfamızda, “form1” adlı bir formda “isaret01” adlı bir işaret kutusu varsa, bu kutunun işaretli olup olmadığını şu if döngüsü sınayabilir:

if (document.form1.isaret01.checked) { .......
Bu ifade, kutu gerçekten işaretli arzu ettiğimiz bir işi yapar, değilse yapmaz.

Ziyaretçinin bir HTML sayfasında bir çok şık’tan birini seçmesini sağlayan radyo düğmesi (radio) isimli işaretleme yönteminde ise, aynı adı taşıyan bütün radyo düğmelerinden biri işaretlenince, Browser diğerlerini işaretlenmemiş hele getirir; dolayısıyla bu düğmenin değeri (.value özelliği) kullanılabilir.

<HTML>
<HEAD>
<TITLE>Radyo Dugmesi Örnegi</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "javascript">

function radyoDegeri(radyoNesnesi) {
var deger = null
for (var i=0; i<radyoNesnesi.length; i++) {
if (radyoNesnesi[i].checked) {
deger = radyoNesnesi[i].value
break
}
}
return deger
}

</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><input type=radio name="sanatci" value="Türkü">Neşet Ertaş</p>
<p><input type=radio name="sanatci" value="Şarkı">Zeki Müren</p>
<p><input type=radio name="sanatci" value="10 Numara">Sezen Aksu</p>
<input type=button value="Ne tür müzik seviyorum?" onClick="alert(radyoDegeri(this.form.sanatci))">
</FORM>
</BODY>
</HTML>

HTML kuralları gereği, bir grup oluşturan radyo düğmeleri aynı adı taşırlar. Burada “this” anahtar kelimesi ile içinde bulunduğumuz yani “bu formun,” “sanatcı” dizi-değişkeninin tümüyle fonksiyona gönderilmesini sağlıyoruz. “radyoDegeri” adlı fonksiyonumuz zaten böyle bir öbek bilgi bekliyor ve aldığı tüm radyo düğmesi nesnesine “radyoNesnesi” adını verip, önce büyüklüğüne bakıyor. Bir dizi-değişkenin büyüklüğü eleman sayısıdır; ki bu bizim örneğimizde üçtür. “i” sayacı 0, 1 ve 2 değerleri için sınanıyor ve bunlardan birinin işaretli olması bekleniyor. İşaretli radyo düğmesi bulunduğu anda değeri “deger” değişkenine yazılıyor ve döngü kesiliyor (break). Gerisi, uyarı kutusunun “değer” değişkeni ziyaretçiye göstermesinden ibaret.

Select Box

Form nesnelerimizden bir diğeri ise SELECT etiketiyle oluşturduğumuz seçme kutusu. NAME, SIZE, ve MULTIPLE özelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-yönlendiricileri ile kullanılabilir. SELECT nesnesinin değeri, kendisinin ayrılmaz parçası olan OPTION etiketinin VALUE özelliğinden gelir.

<HTML>
<HEAD>
<title>Seçme Kutusu Ornegi</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">

function secDegeri(secNesnesi) {
return secNesnesi.options[secNesnesi.selectedIndex].value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><SELECT NAME="sanatci" SIZE=1>
<OPTION value="Türkü">Neset Ertas</OPTION>
<OPTION value="Sarki">Zeki Müren</OPTION>
<OPTION value="10 numara!">Sezen Aksu</OPTION></P>
<input type=button value="Ne tür müzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))">
</FORM>
</BODY>
</HTML>

Burada ziyaretçi açısından seçme işlemi, seçme kutusunun sağındaki seçme okuna basarak yapılıyor; fakat bizim açımızdan da önemli bir değişiklik var. Seçilen unsur, SELECT nesnesinin dizi-değişkenine değil, “selectedIndex” adlı endeksin değer (.value) özelliğine yazılıyor. Dolayısıyla, bir if döngüsü ile arama yapmak gerekmiyor; bu değeri uyarı kutusuna sadece ayıklama işlemiyle belirleyip geri gönderiyoruz. Burada dikkat edeceğiniz husus, fonksiyona verilen “bu form” nesnesinin “sanatcı” adlı SELECT nesnesinin bilgi kümesi içinde sadece biri, “selectedIndex” adlı endekse sahiptir. Fonksiyon bu bilgi kümesini “secNesnesi” adıyla ele alıyor ve içindeki “options” dizi-değişkenin ziyaretçinin seçtiği ve dolayısıyla sıra numarası “selectedIndex” olarak işaretlenmiş olanın değerini (.value) alıyor ve bunu doğruca Uyarı kutusuna gönderiyor.

Fakat, HTML’den biliyorsunuz ki, SELECT etiketine MULTIPLE anahtar kelimesini koyarak, ziyaretçinin birden çok seçme yapmasına izin verebilirsiniz. Bu durumda “selectedIndex” işaretini kullanabilir miyiz? Hayır; bu bir değişken olduğuna göre sadece bir değer (seçilen ilk OPTION’ın sıra numarasını) tutacaktır. Fakat SELECT nesnesinin bir de “selected” özelliği vardır ki içinde seçilen bütün OPTION’ların numarası yazılıdır.

<html>
<head>
<title>Seçme Listesi Ornegi</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">

function secDegeri(secilenIsim) {
var liste = ""
for (var i=0; i<secilenIsim.length; i++) {
if (secilenIsim.options[i].selected) {
liste += secilenIsim.options[i].text + "<p>"
}
}
yeniPencere = window.open ("", "Seçtikleriniz", "height=200, width=200")
yeniPencere.document.write("<H2>Şu şarkıları seçtiniz:</H2><P><P>")
yeniPencere.document.write(liste)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><SELECT NAME="sanatci" SIZE=4 MULTIPLE>
<OPTION>Neset Ertas</OPTION>
<OPTION>Zeki Müren</OPTION>
<OPTION>Sezen Aksu</OPTION>
<OPTION>Kayahan</OPTION>
<OPTION>Mustafa Sandal</OPTION>
<OPTION>Müşerref Tezcan</OPTION>
</P>
<input type=button value="Hangilerini seçtim?" onClick="secDegeri(this.form.sanatci)">
</FORM>
</BODY>
</HTML>

Burada seçilenlerin listesini yeni bir pencerede açtığımız belgeye yazdırıyoruz. Bu size, bir formun unsurlarını elde ettiğiniz listeyi daha sonraki bir sayfada, HTML unsuru olarak kullanabileceğinizi gösteriyor. Kodu kısaca irdelersek; fonksiyonumuz, for döngüsünün içindeki if döngüsü ile, kendisine ulaşan bilgi kümesinde “selected” olarak işaretlenenleri seçmekte ve bunların metnini (.text), liste değişkenine, aralarına <P> etiketi koyarak yazıyor.

password

Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceğiniz bir ögesi, Password (Parola) nesnesidir. Ziyaretçinin, Password olarak nitelediğiniz INPUT kutusuna yazdığı metin, kendisine * olarak görünür; fakat Browser ve dolayısıyla Javascript bu metni bilir.
Javascript’in ilk sürümlerinde Password nesnesinin değeri Javascript tarafından bilinemezdi; fakat 1.1 sürümü ile Javascript bu nesnenin de bütün kontrolünü ele geçirdi. Aşağıdaki kodu parola.htm adıyla kaydederseniz, Password nesnesinin de değerini elde ederek, kullanabileceğinizi göreceksiniz.

<html>
<head>
<title>Parolayı Görüntüle</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">
function parolaNedir()
{
alert("\nisim --->" + document.form1.gizli.name + "\ndeger --->" + document.form1.gizli.value)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<BR>
<B>Lütfen parola olarak herhangi bir kelime yazıp düğmeyi tıklayın:</B>
<BR><BR>
<INPUT TYPE="password" NAME="gizli" SIZE="15">
<INPUT TYPE="button" NAME="goster" VALUE="Metni görmek için tiklayin" onClick="parolaNedir()">
</FORM>
</BODY>
</HTML>

Burada herhangi bir form unsuru gibi, form1’in “gizli” adlı nesnesinin değerini alarak Uyarı kutusunda gösteriyoruz. Gerçek bir programda, bu değeri bir liste ile karşılaştırarak, kullanabilirsiniz. Ancak bu karşılaştırma işleminin ziyaretçinin bilgisayarında değil, Server’da yapılması gerekir; bunun için Password nesnesinin değerinin bir CGI programında veya ASP uygulamasında değerlendirilmesi gerekir. Browser’lar bunu bildikleri için Password nesnesini daima Server’a yollarlar.

Hidden (gizli nesne)

HTML’in INPUT etiketiyle sayfanıza türü Hidden (Gizlenmiş) olan değişkenler koyabilirsiniz. Hidden etiketi, NAME ve VALUE özelliklerine sahiptir. Bu etiketten, genellikle ziyaretçinin Form verilerini değerlendirirken, ziyaretçi sayfa değiştirdiği halde Server’da değeri sabit kalan değişken olarak yararlanabiliriz.