JavaScript'e Giriş

JavaScript'e Giriş
Bölüm 2

onMouseover Özelliği

JavaScript dilinde bir sonraki özelliği farenizi bu link'in üzerine getirerek görebilirsiniz. Link'in üzerine geldikten sonra alıcınızın en altındaki 'statusbar'a bir bakın. Bu özelliği fonksiyonlarla birleştirerek daha ilgi çekici şeyler yaratabilirsiniz. Şimdi, bu link'in üzerine farenizi getirdiğinizde yeni bir pencere oluştuğunu göreceksiniz. Bu iki olayın kaynaklarına bir göz atalım:

<a href="asdf.html" onMouseOver="window.status='Herhangi bir link...'; return true">

<a> komutuna onMouseover özelliğini eklediğinizde sayfayı gören kişi link'in üzerine geldiğinde ne tepki verileceğini kontrol edersiniz. 'window.status' komutu da alıcınızın statusbar'ına yazı yazabilmenizi sağlar. Ayrıca dikkatinizi çektiyse tırnak işaretlerini de değişik kullandık. Hep çift tırnak (") kullanamazsınız. Çünkü JavaScript'ten dolayı mı yoksa HTML komutundan dolayı mı tırnak kullanıldığını alıcınız algılayamaz. Ayrıca çift tınak işaretini kapamadan önce ;return true yazmanız da gereklidir.
İkinci örnek JavaScript'i 'alert' fonksiyonunu kullanır. İkincinin kaynağı ise şöyledir:

<html>
<head>
<script language="JavaScript">
<!-- Hiding
     function selam() {
       alert("Selam!");
     }
// -->
</script>
</head>
<body>
<a href="" onMouseOver="selam()">link</a>
</body>
</html>

Bu örnekte de onMouseover metodu kullanılmıştır. Ancak bu sefer selam() fonksiyonu çağırılmıştır. "selam()" fonksiyonu da az önce karşınıza çıkan uyarı penceresini oluşturur.

Daha Fazla Tarih Fonksiyonu Şimdi size tarih ve zaman ile ilgili başka bir örnek vermek istiyorum. İlk bölümde lastModified özelliğini görmüştünüz. Bu özellik sayesinde sayfanızın en son ne zaman değiştirildiğini belirtebiliyordunuz. Şimdi sayfamıza yerel saati koyacağız. Bu metod sayfaya bağlanan makinanın saatini kullanır, bu yüzden eğer makinanın saati yanlışsa bu saat de doğal olarak yanlış saati gösterecektir.

İşte kaynak:

<script language="JavaScript">
<!-- Sakla
  bugun = new Date()
  document.write("Saat şu anda: ", bugun.getHours(), ":", bugun.getMinutes(), "<BR>");
  document.write("Tarih ise: ", bugun.getDate(),"/", bugun.getMonth()+1,"/",bugun.getYear());
// -->
</script>

İlk başta bir tarih değişkeni yaratıyoruz. Bu; bugun = new Date() (Bugün = yeni tarih) ile gerçekleştiriliyor. Böylece alıcınız "bugun" değişkeninin tarihle ilgili olduğunu anlamış oluyor. Eğer özel bir zaman ve tarih tanımlamazsak alıcınız bugun değişkenine o anki zamanı otomatik olarak verir. Yukarıdaki örnekle fazla uğraşmadığımızdan bazı eksiklikleri yok değil. Mesela eğer saat 13:05 ise yukarıdaki script 13:5 olarak yazacaktır. Bunu önlemek için birkaç "if" satırı eklememiz gerekir.

Yerel zaman ve tarihi tutan bir değişken (bugun) yarattık. Şimdi bu değişkenin içerdiklerini rahatça ayırabiliriz. Bunun için get... şeklinde metodlarımız var (getMonth, getMinutes gibi). Her get.... metodundan önce bugun yazmanız bir zorunluluktur. Aksi takdirde alıcınız hangi değişkenin içeriğini ayıracağını bilemez.

getMonth() metodu 0 - 11 arasında sayılar oluşturur. "0" ocak ayını, "11" aralık ayını temsil eder. Bu yüzden doğru ayı bulabilmek için getMonth()'a "1" ekliyoruz. Diğer metodlar doğrudan istediğimiz sayıyı verir.

Yukarıdaki örneğin görüntüsü şu şekilde olacaktır:

Tarih yaratarak yapabileceğiniz daha da ilginç şeyler var tabii ki. Örneğin bir tarih tanımlayabilirsiniz. 2000'e girmeden önce birçok webmaster'ın yaptığı gibi 2000'e kalan gün sayısını hesaplayabilirsiniz. Bunun için yukarıda "bugun" değişkenini tanımladığınız gibi ek olarak 2000 yılını da tanımlamalısınız: ikibin = new Date(99,11,31)
Önce yıl, sonra ay(Ayın '0'dan başladığını unutmayın) en sonra da günü tanımlamak zorundasınız. Hatta saati de tanımlayabilirsiniz:
dokhazır= new Date(99,12,31,23,59,59)
İlk üç sayı yine yıl, ay, gün; daha sonra sırayla saat, dakika, saniye tanımlanır.

Şimdi, sayfanızda direkt olarak kullanabileceğiniz bir script örneği verelim. İlk dökümanda "document.lastModified" özelliğini kullanmıştık. Ancak "document.lastModified" direkt olarak kullanıldığında Amerikan formatında, yani "ay/gün/yıl saat" formatında bir yazı oluşturur. Ancak diyelim ki biz "22 Ekim 1977" gibi göstermek istiyoruz. Bu durumda henüz bahsetmediğim "if" cümlelerinden ve "array"lerden (dizilerden) yararlanacağız. Bu örneği büyük bir ihtimalle anlamayacaksınız ama bu konuda çok istek geldiğinden buraya yazıyorum:


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
	tarih = new Date(document.lastModified);
	yil = tarih.getYear();
	if (yil < 1000){
		if (yil < 70){
		yil = 2000 + yil;
		}
		else yil = 1900 + yil;
	}
	
	ay = tarih.getMonth()+1;
	if (ay < 10){
		ay ='0' + ay;
	}
	
	gun = tarih.getDate();
	if (gun < 10){
		gun ='0' + gun;
	}
	
	saat = tarih.getHours();
	if (saat < 10){
		saat='0' + saat;
	}
	
	dakika = tarih.getMinutes();
	if (dakika < 10){
		dakika='0' + dakika;
	}
	
	ayAdi = new Array(12)
	ayAdi[0] = 'Ocak'
	ayAdi[1] = 'Şubat'
	ayAdi[2] = 'Mart'
	ayAdi[3] = 'Nisan'
	ayAdi[4] = 'Mayıs'
	ayAdi[5] = 'Haziran'
	ayAdi[6] = 'Temmuz'
	ayAdi[7] = 'Ağustos'
	ayAdi[8] = 'Eylül'
	ayAdi[9] = 'Ekim'
	ayAdi[10] = 'Kasım'
	ayAdi[11] = 'Aralık'
	
	document.write("Son güncellenme tarihi:" + gun +' ' + ayAdi[ay-1]+' '+ yil + 
	                ' - ' + saat +':'+ dakika);
// -->
</SCRIPT>

Raslantısal Sayılar

Programlama dilleri ve scriptlerde raslantısal sayıların kullanımları genel bir sorundur. Şu anda JavaScript'te 'random' (Raslantı) fonksiyonu yok fakat inanıyorun ki yakın bir gelecekte o da yaratılacaktır. Şu anda ise bazı hilelerle raslantısal sayı kullanabilirsiniz. Aslında bu tam olarak bir hile sayılmaz. Bu gerçekten de birçok programcının kullandığı bir yoldur. Burada işin mantığı raslantısal sayıyı hesaplamak. Makinanızın tarih ve zamanını alıp onu çeşitli şekillerde kullanabilirsiniz. Zaman gayet büyük bir sayıdır ve bu sayıyla bazı hesaplar yapabilirsiniz. Örneğin sinüsünü alıp mutlak değeri ile işlem yapabilirsiniz. Elde edeceğiniz sayı 0 ile 1 arası bir sayıdır. Zaman da her milisaniye değiştiğinden iki tane aynı sayıyı alma riskiniz de olmaz böylece. Eğer kısa bir süre içinde birçok raslantısal sayı hesaplayacaksanız sin()'i tek başına kullanabilirsiniz. Ancak elde edeceğiniz sayı bir sinüs eğrisini takip edecektir. Bu pek de raslantısal sayılmaz, tabii eğer 20 saniyede bir raslantısal sayı elde edecekseniz o ayrı...

Bu bir raslantısal sayıdır:

Bu örneğin kaynağı:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function RandomNumber() {
  bugun = new Date();
  sayi = Math.abs(Math.sin(bugun.getTime()));
  return sayi;  
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
  document.write("Bu bir raslantısal sayıdır:", RandomNumber());
// -->
</SCRIPT>
</BODY>
</HTML>

Pek tabii ki buradaki random (raslantı) fonksiyonu her durum için mükemmel değildir. Burada amaç olayın ana mantığını anlatmaktır. Şimdi size Maynard Demmon'dan aldığım bir fonksiyonu göstermek istiyorum. Yapmanız gereken limit yerine size gerekli olan sayıyı yazmak. (Gerçekten de aşağıdaki kodda "limit" yazan yeri silip 100 yazmanız gerekiyor. Copy-paste yapıp neden çalışmıyor diye şikayet etmeyin lütfen :^) )
Örneğin limit yerine 100 yazdığınız zaman 0 ile 99 arasında iyi bir raslantısal sayı elde edebileceksiniz. İşte kaynağı:

  function random() {
     bugün = new Date();
     num = today.getTime();
     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limit;
     return num;
  }

Pencere Yaratmak

Pencere yaratmak JavaScript'in harika bir özelliğidir. Kendiniz istediğiniz özellikte pencereler yaratabilir ve bu pencereye HTML dökümanı yazdırabilirsiniz. Şimdi nasıl yeni bir pencere açabileceğinizi ve ona nasıl birşeyler yazabileceğinizi görelim. Eğer aşağıdaki düğmeye basarsanız birazdan açıklayacaklarımın örneğini görebilirsiniz.

Bu seferlik töre ve geleneklere bağlı kalmayarak bu pencereye Hello world! yazmadım :^) İşte kaynak:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function PencereAc() {
   msg=open("","msj","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Hey!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>Çok hoş değil mi?</B></h1></CENTER><br>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Button1" VALUE="Buraya Tıklayın" onCLick="PencereAc()">
</FORM>
</BODY>
</HTML>

Bir fonksiyon tanımladık ve her zamanki gibi fonksiyonu çağıran bir düğme yarattık. 'PencereAc' fonksiyonu 'open' (Aç) metodu ile yeni bir pencere açar. İlk tırnaklar pencereye yazılacak sayfanın URL'sini belirtir. Buraya herhangibir adres yazabilirsiniz. Bu durumda açılan yeni pencerede yazdığınız adres ya da dosya çıkacaktır. Eğer herhangi bir sayfa yüklemeyecekseniz JavaScript ile de pencereye yazabilirsiniz. İkinci tırnaklar pencere adını tanımlar. Herhangi bir isim verebilirsiniz fakat tek kelime olmak zorundadır. Bu isim çerçeve (frame) 'lerdeki isimlerle aynı mantıktadırlar. Bu pencere ile yapacağınız tüm işlemler için bu ismi kullanırsınız. Yani hangi pencereyle uğraştığınızı belirtebilmek için bi ad vermelisiniz (ben "msj" verdim, siz "huseyin" verebilirsiniz). Üçüncü tırnaklar pencerenin özelliklerini içerir. Bu gerçekten de ilginçtir. Eğer örneğin 'toolbar' istiyorsanız toolbar=yes yazmanız yeterli olacaktır. Aşağıda bu özellikler ve tanımları yer almaktadır. Bunları yukarıdaki örnekte olduğu gibi kullanmalısınız.

toolbar - Back, Forward, Home vs. düğmelerinin bulunduğu kısım
location - Adresi yazdığınız kısım
directories - Netscape'deki What's New, What's Cool vs. düğmelerinin bulunduğu kısım
status - En alttaki küçük pencere(Statusbar)
menubar - Netscape'deki location'ın altındaki kısım
scrollbars - Sağda ve alttaki sayfayı yukarı aşağı hareket ettiren kısımlar
resizable - Pencerenin büyüklüğünün değiştirilebilirliği
copyhistory - Ana sayfanın hafızada tuttuğu adresler yeni pencereye aktarılsın mı?
width=pixels - Genişlik(Piksel)
height=pixels - Yükseklik(Piksel)

Pencerenizi açıp onu msj olarak adlandırdıktan sonra pencerenize yazmaya başlayabilirsiniz. Artık normal HTML komutlarıyla istediğinizi yazabilirsiniz. Ayrıca kullanıcının, hazırladığınız forma girdiklerini yeni pencerenize de yazdırabilirsiniz. Bunun gibi birçok şey yapılabilir.

Lütfen dikkat: Yeni açtığınız pencereye birşey yazarken en son satırın sonuna mutlaka <BR> komutu koyun. Aksi takdirde Netscape'in bazı sürümlerinde yazılar görünmeyebiliyor.
Başka bir dip not: Eğer yeni açtığınız pencereye resim koyacaksanız height ve width özelliklerini de <img> komutunun içine yerleştiriniz. Bunun eksikliği yüzünden sayfada resimden kaynaklandığını tahmin edemeyeceğiniz hatalar ortaya çıkabiliyor.

İndeks - Bölüm 1 - Bölüm 3 - Bölüm 4 - Bölüm 5 - Bölüm 6 - Bölüm 7

11.Mayıs'96
© 1996 - Stefan Koch