Drop-Down Menüler
Bu eleman birçok seçeneği açılan bir menü şeklinde sunar.
<script language="Javascript">
function goster(metin) {
alert(metin);
}
</script>
<select name="drp1" size="1"
onchange="goster (form.drp1.options[drp1.selectedIndex]value)">
<option value="Intel"<Intel</option>
<option value="Cyrix"<Cyrix</option>
<option value="AMD"<AMD</option>
</select>
Burada önemli olan bir özellik size özelliğidir. Kaç seçeneğin gösterilmesini istiyorsak size değerini o kadar artırmalıyız. Ayrıca bir çok eleman gibi onClick olayını değil onChange olayını kullanıyoruz. option value="Intel" seçildiğinde gönderilecek değeri, daha sonra yazdığımız isim de menüde gösterilecek yazıyı ifade eder.
<%@ language=JavaScript%>
<HTML>
<HEAD>
<SCRIPT>
</SCRIPT>
<TITLE>JavaScript Mesaj Denemeleri</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000>
<CENTER>
<FONT SIZE=+2>JavaScript Mesaj Denemeleri</FONT><BR>
</CENTER>
<HR>
<HR>
<FONT SIZE=+2>
<UL>
<LI><A HREF="INDEX1.HTML" OnClick="if(confirm('Emin misiniz!?')) alert('Emin oldugunuzu gormek guzel');else alert('Belki bir dahaki sefere');">Sana bir soru.</A>P>
<UL>
<LI>Status bar'a bak:
<A HREF="index.php3" onMouseOver="self.status='A secili';return true">A</A>
<A HREF="index.php3" onMouseOver="self.status='B secili';return true">B</A>
<A HREF="index.php3" onMouseOver="self.status='C secili';return true">C</A>
<A HREF="index.php3" onMouseOver="self.status='D secili';return true">D</A>
<A HREF="index.php3" onMouseOver="self.status='E secili';return true">E</A><P>
<UL>
<LI><A HREF=index.php3" onMouseOver="alert('Yaklaşma demiştim!')">Bana yaklaşma!</A><P>
</UL></UL></UL></UL>
</FONT><P><HR>
</BODY>
</HTML>
Bu örnekte kullanıcıya mesaj göndermenin değişik yolları gösterilmiştir. Confirm ve Alert komutlarının nasıl kullanıldığını görmüştük. İkinci satırda ise Status Bar'a mesaj yazdırmanın yolu görülüyor. Burada self.status denmesinin sebebi ise şu anda aktif olan nesnenin window nesnesi olasıdır. Bunun gibi herhangi bir nesne ile ilgili olarak yapacağımız işlemlerde self kullanacağız.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function person(name,pass) {
this.name=name;
this.pass=pass;
}
function makearray(n) {
this.lenght=n;
for (var i=0;i<=n;i++) {
this[i]="";
return this;
}
}
function submit1_onclick(form) {
var x=0;
pers= new makearray(3);
var isim;
var pas;
isim=text1.value;
pas=password1.value;
if(!isFieldBlank(isim)) alert('ID field cannot be blank');
else {
pers[1] =new person("serdar","");
pers[2] =new person("yucel","yucel");
pers[3] =new person("ali","veli");
for(i=1;i<4;i++) {
if(isim==pers[i].name) {
if(pas==pers[i].pass) x=1; }
}
if(x==1) document.write('You made a good job');
else alert('Password is invalid');
}
}
function isFieldBlank(ad) {
if(ad)
return true;
else
return false;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>
İsim:<BR>
<P><INPUT id=text1 name=text1 type=text></P>
<P> </P>
Şifre:<BR>
<INPUT id=password1 name=password1 type=password></P>
<P> </P>
<P><INPUT id=submit1 name=submit1 type=submit value=Gir onclick="submit1_onclick()"></P> <P> </P>
</BODY>
</HTML>
Bu örneğimiz biraz karışık. Öncelikle iki tane form nesnemiz var. Biri text alanı diğeri ise password. Scriptimizde ise person isimli bir fonksiyonumuz var. Bu fonksiyondaki this.name=name komutu bu fonksiyonu çağıran değişkenin name özelliğinin name ismiyle aktarılan değişken olacağını gösterir. pers[3] =new person("ali","veli"); satırında olduğu gibi pers dizisinin 3. elemanı name özelliği ali, pass özelliği veli olan bir yapı olacak.
isfieldblank fonksiyonu parametre olarak aktarılan alanın boş olup olmadığını kontrol eden fonksiyonumuz. İsim alanı boş olamayacağından önce bunu kontrol edip eğer boşsa bir uyarı mesajı gönderiyoruz.
makearray fonksiyonu daha önce de bahsettiğim gibi dizi yaratmak için yazılmış bir fonksiyon. Aynı şekilde bu fonksiyonu çağıran değişkeni aktarılan parametre uzunluğunda bir dizi yapıyor. pers dizisi bu fonksiyonla yaratıldıktan sonra her bir elemanına person fonksiyonu tarafından name ve pass özellikleri atanıyor. Gerisi ise oldukça basit. Alanlara girilen değerler bir döngü içerisinde pers dizisinin elemanlarıyla karşılaştırılıyor.
|
