JavaScript'e Giriş

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? Aşağıdaki 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 ad, siz adını huseyin koyabilirsiniz) <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. Bundan sonra fonksiyon içerisinde değişken olarak kullanılan tüm "txt"ler yerinde bizim atadığımız yazı çıkar. 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, yani yazıyı siler.

SetTimeout fonksiyonu

Dökümanımızın 2. bölümünde onMouseOver özelliğini zaten görmüştünüz:

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 ve statusbar'a bakarak bekleyin. Lütfen tıklamayın!

İşte kaynağı:

<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!-- Sakla
function moveover(txt) {
   window.status = txt;
   setTimeout("sil()",1000);
}
function sil() {
   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ı. sil() fonksiyonu da yazılacak yazı dışında statbar() fonksiyonunun aynısı. HTML sayfamızda önce link'ler yarattık. Bu link'leri 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 daha önce görmediğiniz bir özellik. Bu fonksiyon sizin belirlediğiniz zaman süresince bekler ve daha sonra belitilen işlemi yapar. Örneğimizde yapılacak iş olarak sil() fonksiyonu, 1000 milisaniye (1 sn.) beklendikten sonra çağırılmıştır. setTimeout() bir hazır fonksiyondur (yani JavaScript'te zaten var olan) ve işini bitirdikten sonra yeniden başlamaz. Eğer bir döngü yaratmak isterseniz bu işi sil() fonksiyonunun içinden yapabilirsiniz. Bu bilgi bize çok sevilen "kayan yazı" hakkında kılavuzluk yapmaktadır.

10 Mayıs 2000 ~ Ek not: Yukarıda anlatılan yöntem JavaScript'in eski versiyonu için geçerlidir. JavaScript'in en son sürümlerinde onMouseout şeklinde bir yöntem bulunmaktadır. Bu yöntem de aynı onMouseover gibi çalışır ve farenizin link'in üzerinden ayrılmasını kasteder. Bu durumda sizin de tahmin edebileceğiniz aşağıdaki kod daha verimli bir uygulama olacaktır:


<HTML>
 <HEAD>
 <SCRIPT Language="JavaScript"> 
  <!-- Sakla 
  function yazi(txt) {
  window.status = txt;
  }

  // -->
 </SCRIPT>
 </HEAD>
<BODY> 
<A HREF="dontclck.html" onMouseover="yazi('Ne kadar güzel');return true;" 
    onMouseout="yazi(''); return true;">Link</A> 
</BODY>
</HTML>

Görüldüğü gibi bu kodlama ile üstte verilen setTimeout ve benzerlerine gerek kalmamaktadır. Ancak setTimeout fonksiyonunun anlaşılabilmesi için güncelleme sırasında o kısmı kaldırmadım.

Kayan Yazı Programlama

Şu anda statusbar'a yazmayı ve setTimeout fonksiyonunu kullanmayı bildiğinize göre kayan yazıyı rahatça anlayabilirsiniz. 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;      // scrtxt'ye yazılan yazının uzunluğunun tespiti
var width=100;                 // Yazının kayacağı toplam genişlik ne olsun
var pos=1-width;               // ileride yazının pozisyonunu belirleyecek olan
                               // pos değişkeninin ilk değeri

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);    // Yazınızın hızını 150 sayısını değiştirerek 
                                 // ayarlayabilirsiniz
  }
//-->
</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. Önce yazımızı başlangıç noktasına getiriyoruz.
(pos=1-width=-99)
Daha sonraki kısımlar sayesinde yazı bir karakter kayar ve setTimeout(...) fonksiyonu zaman dolduğunda scroll() fonksiyonunu tekrar ç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. Eğer pos=lentxt olursa, yani yazı sona ulaşırsa tekrar başlangıç değerine dönüş yapılı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 bu script 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 tecrübeli kullanıcılar genel olarak üzerine geldikleri link'in nereye gittiğini statusbar'dan takip ederler ve bu tür scriptler tecrübeli kullanıcıları biraz da olsa rahatsız edecektir.

Buna benzer Intenet'te birçok uygulama yapılmıştır. Örneğin frame'lerde bu kayan yazının kullanıldığını gördüm. Ya da bir form'daki text alanında bu ve buna benzer kayan yazılar kullanıldığını gördüm. Ama mantığı anladıktan sonra bu tür yazıları programlama aslında ç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