JavaScript'e Giriş
Bölüm 4



Şimdi size statusbar'a (Alıcınızın en altındaki URL'leri gösteren küçük pencere) nasıl yazı yazıldığını ve tabii ki kayan yazı yapmayı göstereceğim.
Öncelikle statusbar nasıl kullanılır? Bu script ile statusbar'a basit bir yazı yazabilirsiniz:

Şirin değil mi? İşte script: 

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Yaz!" onclick="statbar('Selam! statusbar işte burası!');">
<input type="button" name="erase" value="Sil!" onclick="statbar('');">
</form>
</body>
</html>

İkisi de statbar(txt) fonksiyonunu çağıran iki düğme yarattık. Parantez içindeki 'txt' fonksiyonun değişkenidir. Fonksiyon çağırıldığında bu değişkene değeri atanır. ('txt' benim rasgele seçtiğim bir addır.) <FORM> komutuna baktığınızda ise statbar(txt) fonksiyonunun çağrıldığını görebilirsiniz. Ancak fonksiyonu çağırırken parantezlerin arasına txt yazmıyoruz. Buraya statusbar'da görmek istediğimiz yazıyı yazıyoruz. Buradan gördüğünüz gibi 'txt' değişkeni çağırılır ve bu değişkene 'Selam! statusbar işte burası!' yazısını atar. Bu şekilde değişkene değer atamak fonksiyonları daha esnek kullanmanızı sağlar. Şimdi ikinci düğmeye bakalım. Yine aynı fonksiyon kullanılmış. Bu sefer 'txt' değişkenine 'boşluk' atandığından statusbar'da hiçbir şey yazmaz.
statbar(txt) fonksiyonu ise txt'ye atanan değeri window.status hazır fonksiyonuna gönderir.(window.status = txt;)

Dökümanımızın 2. bölümünde onMouseOver özelliğini zaten görmüştünüz:
<a href="stupid.html" onMouseOver="window.status='Saçma bir link işte...'; return true">
Farenizi link'in üzerinden ayırdığınızda statusbar'daki yazının silinmemesi sizi de rahatsız etmiyor mu? Ben kendime göre bir çözüm buldum. Yukarıdaki kısımdaki silme işlemini de buraya uydurdum. Peki bu 'silme' fonksiyonunu nasıl çağıracağız?

Bir de bunu. deneyin. Sadece farenizi üstüne getirin. Lütfen tıklamayın!

İşte kaynağı: 

<html>
<head>
<script language="JavaScript">
<!-- Sakla
function moveover(txt) {
   window.status = txt;
   setTimeout("silme()",1000);
}
function silme() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.html" onMouseOver="moveover('Yok oluyor!');return true;">
link</a>
</body>
</html>

moveover(txt) fonksiyonu birkaç ekleme dışında statbar(txt) fonksiyonunun aynısı. silme() fonksiyonu da yine birkaç değişiklik dışında statbar() fonksiyonunun aynısı. HTML sayfamızda önce link'ler yarattık. Bu link'leri içine artık hiç de yabancı olmadığınız onMouseover özelliğiyle donattık ve moveover(txt) fonksiyonuna 'Yok Oluyor!' yazısını gönderdik. setTimeout(....) fonksiyonu ise yeni bir özellik. Bu fonksiyon sizin belirlediğiniz zaman süresince bekler. Örneğimizde silme() fonksiyonu 1000 milisaniye sonunda çağırılmıştır. Bu gerçekten de fantastik bir özellik. The browser calls the function erase() automatically after 1 second. (Şimdiden kullanıcıya: Eğer dediğimi yapmazsan Harddisk'in 10saniye içinde çökecektir yazan bir sayfa planlamaya başladım ???? )
setTimeout hazır fonksiyonu işini bitirdikten sonra yeniden başlamaz. Ama tabii ki silme() fonksiyonunda yeniden çağırabilirsiniz. Bu bize çok sevilen kayan yazı hakkında kılavuzluk yapmaktadır.

Şu anda statusbar'a yazmayı ve setTimeout fonksiyonunu kullanmayı bildiğinize göre kayan yazıyı rahatça anlıyabilirsiniz.

Aşağıdaki tuşa basın ve benim kayan yazımı görün.

Şimdi script'e bir göz atalım 

<html>
<head>
<script language="JavaScript">
<!-- Hide

var scrtxt="İşte mesajımız gidiyor. Ziyaretçileriniz hayretle " +
"donup kalacak...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;

function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);
  }
  else {
    scroller=scroller+scrtxt.substring(pos,width+pos);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Burada da ilginç sayfanız olacak...
</body>
</html>

Bu script de şu ana kadar kullandığımız fonksiyonlardan çok da farklı birşey kullanmıyor. setTimeout(...) fonksiyonu zaman dolduğunda scroll() fonksiyonunu çağırır. Script de bir sonraki adıma geçer. Başlangıçta bir sürü matematiksel hesap göreceksiniz. Bunlar sadece yazının başlaması gereken ilk pozisyonu ayarlamak için yapılmıştır.

Aslında her ne kadar popüler ve ilginç olursa olsun bu script bir süre sonra popülerliğini kaybedecektir. İlk gördüğünüzde gerçekten de ilgi çekecektir. Fakat her gittiğiniz iki sayfadan birinde bu script'i görmek artık sıkıcı bir hal alacaktır.

Ayrıca benim nefret ettiğim bir olay: farenizi hareket ettirdiğinizde hız artıyor. Ayrıca eğer biraz bu sayfada beklerseniz muhtemelen bir Out of Memory Error hatasıyla karşılaşacaksınız. (En azından Netscape 2.0 'da böyle bir hata veriyor. Belki de yeni versiyonlarda bu hata düzeltilir.)

Bununla ilgili Intenet'te birçok uygulama var. Örneğin framelerde bu kayan yazının kullanıldığını gördüm. Aslında programlaması çok da zor olmamalı...

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


11.Mayıs'96
© 1996 Stefan Koch