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. Sadece 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şacaktır. Bu iki olayın kaynaklarına bir göz atalım:

<a href="saçma.html" onMouseOver="window.status='Saçma bir link işte...';
 return true">

Tek yapmanız gereken <a> komutuna onMouseover özelliğini eklemeniz. '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 " işaretini kullanamazsınız. Çünkü JavaScript statusbar'a neyi yazacağınızı anlayamaz. 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 da kolay sayılır. Bu örnekte de onMouseover metodu kullanılmıştır. Bu metodla selam() fonksiyonu çağırılmıştır.

Daha Fazla Tarih Fonksiyonu

Şimdi size tarih ve zaman ile ilgili başka bir örnek vermek istiyorum. Daha önceki bölümde lastModified özelliğini görmüştünüz. Ş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">

</script>

İlk başta bir tarih değişkeni yaratıyoruz. Bu bugün = new Date() (Bugün = yeni tarih) ile gerçekleştiriliyor. Eğer özel bir zaman ve tarih tanımlamazsak alıcı yerel zamanı today değişkenine verir. Burada dikkat edin. today değişkenini hiçbir yerde belirtmemize gerek yok. Bu, JavaScript'in Java ve diğer birçok programlama dilinden farkıdır. Bu dillerde kullanacağınız değişkenin türünü önceden belirtmeniz gerekir. Biz burada yerel zaman ve tarihi tutan bir obje yarattık. Şimdi rahatça içeriğini yazabiliriz. Her get.... metodundan önce today yazmanız bir zorunluluktur. Aksi takdirde alıcı hangi objeyle karşılaştığını bilemez. getMonth() metodu 0 - 11 arasında rakamlar oluşturur. (0 ocak ayını; 11 aralık ayını temsil eder. Bu yüzden doğru ayı bulabilmek için getMonth() fonksiyonuna '1' eklememmiz gerekir.
Tarih yaratarak yapabileceğiniz ilginç şeyler var tabii ki. Örneğin bir dökümanı yarattığınız tarihi tanımlayabilirsiniz. Böylece bir kişinin kaç gün sonra o dökümanı okuduğunu da hesaplayabilirsiniz ve mesela eğer 10 günden geç okuyorsa ona şöyle bir mesaj gönderebilirsiniz:
Hey, bu döküman artık bayatladı. İstersen hiç okuma!
Bunun için yukarıda 'bugün'ü tanımladığınız gibi bir gün tanımlamalısınız: dökhazır = new Date(96,0,13)
Önce yıl, sonra ay(Ayın '0'dan başladığını unutmayınız) en sonra da günü tanımlamak zorundasınız. Aynı şekilde zamanı da tanımlayabilirsiniz: dökhazır= new Date(96,0,13,10,50,0)
İlk üç rakam yine tarihi simgeler. Daha sonra sırayla saat, dakika, saniye tanımlanır.

Aslında söylemeliyim ki JavaScript'in tam bir tarih türü yoktur. Ama yukarıda belirttiğim gibi tarih ile hoş bir şekilde çalışabilirsiniz.

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. Ancak eğer 20 saniyede bir raslantısal sayı elde edecekseniz yukarıdaki mükemmel bir fonksiyondur.

Bu bir raslantısal sayıdır: .40123505828020745

Bu örneğin kaynağı:

<html>
<head>
<script language="JavaScript">
function RandomNumber() {
  bugün = new Date();
  num= Math.abs(Math.sin(today.getTime()));
  return num;  
}
</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 değerlerini ayarlamak. Örneğin 100 verdiğiniz 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)) % limits;
     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 size nasıl yeni bir pencere açabileceğinizi ve ona nasıl birşeyler yazabileceğinizi göstermek isterim. Şimdi eğer aşağıdaki düğmeye basarsanız birazdan açıklayacaklarımın örneğini görebilirsiniz.

Töre ve geleneklere bağlı kalmayarak bu pencereye Hello world! yazmadım...İşte kaynak:

<html>
<head>
<script language="JavaScript">
function PencereAç() {
   msg=open("","Pencereadı","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Hey!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>Kıyak değil mi?</B></h1></CENTER><br>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Bana Basın" onCLick="WinOpen()">
</form>
</body>
</html>

Her zamanki gibi fonksiyonu çağıran bir düğme var. 'PencereAç' 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. Eğer herhangibir sayfa yüklemeyecekseniz JavaScript ile de pencereye yazabilirsiniz. İkinci tırnaklar pencere adını tanımlar. Herhangibir isim verebilirsiniz fakat tek eklime olmak zorundadır. Bu isim çerçeve (frame) 'lerdeki isimlerle aynı mantıktadırlar. Bu pencere ile yapacağınız işlemler için bu ismi kullanırsınız. Üçü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 ve aralarında boşluk bulunmamalıdır.

toolbar - Back, Forward, Home vs. düğmelerinin bulunduğu kısım
location - Adresi yazdığınız kısım
directories - En üstteki 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 msg 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. Ya da yine hazırladığınız bir forma kullanıcı adını girer ve yeni açılan pencerede kullanıcı adını kullanabilirsiniz. Yalnızca birkaç ay önce bu sadece cgi ile mümkündü!
Lütfen dikkat: Yeni açtığınız pencereye birşey yazarken en son satırın sonuna mutlaka <BR> komutu koyunuz. Aksi takdirde son satırı göremeyebilirsiniz.
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 çıkabilir.

İ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