JavaScript'e Giriş
Bölüm 3



Birçok kişi bana JavaScript ve Frame (Çerçeve)'lerin beraber nasıl çalıştıklarını sordu. İkisini beraber kullanabilmek için öncelikle iki olayı da destekleyen bir alıcı kullanmalısınız.
Başlamadan önce size frameler hakkında biraz bilgi vermek istiyorum. Birçok HTML dökümanı şu anda frameleri içermiyor çünkü frameler yeni sayılabilir. Frame kullanarak sayfanızı herbiri ayrı bir HTML dökümanı gösterecek birkaç parçaya ayırabilirsiniz. Ayrıca bu ayrı kaynaklı sayfalar arasında bağlantı da vardır. Örneğin iki frame yaratırsınız. Birinde konuları bulundurursunuz. Seçilen konu ikinci frame'de gösterilir. Böylece tüm konular daima göz önünde kalır. Öncelikle size bunun nasıl birşey olacağını göstermek istiyorum. Sadece aşağıdaki tuşa basın ve frame'lerin neye benzediğini görün (Tabii önceden hiç görmediyseniz...).

İşte dökümanın kaynağı: 

<HTML>
<HEAD>
<title>Frame'ler</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frtest1.html" name="fr1"> 
    <FRAME SRC="frtest2.html" name="fr2"> 
  </FRAMESET> 
</HTML>

Öncelikle alıcıya kaç tane frame istediğinizi yazıyorsunuz. Eğer <FRAMESET> içinde rows kullanırsanız sayfa verilen yüzdelerde satırlara ayrılır. Eğer rows yerine cols kullanırsanız verilen yüzdelerde iki sütun elde etmiş olursunuz. Aşağıdaki örnek de Netscape'den... 

<FRAMESET COLS="50%,50%"> 
  <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
  <FRAMESET ROWS="33%,33%,33%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
</FRAMESET>

Bu script iki sütun yaratacaktır ve ikinci sütun 3 eşit satıra bölünecektir. <FRAMESET> komutundaki 50%,50% yazısı yarattığınız hücrelerin büyüklüğünü belirtir.
Frame'lerinize ad verebilirsiniz. Bu adlar JavaScript'te de işe yarayacaktır. Yukarıdaki örnekte frame'lerin nasıl ad aldıklarını gördünüz.


Sanırım frame'lerin ana hatlarını anlamak pek de zor değildir. Şimdi gelelim yeni bir örneğe:

Bu örnekte ilk frame'deki düğmelere basarak ikinci frame'de yazı yazıldığını görebilirsiniz.
İşte kaynağı:

Önce bize gerekli olan çerçeveleri yaratalım. (frames.html): 

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frame1.html" name="fr1" noresize> 
    <FRAME SRC="frame2.html" name="fr2"> 
  </FRAMESET> 
</HTML>

frame1.html'de şunlar yazmaktadır: 

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function selam() {
       document.write("Selam!<br>");
     }
     function hey() {
       document.write("Hey!<br>");
     }
     function hebele() {
       document.write("Hebele Hubele<br>");
     }
// -->
</script>
</HEAD>
<BODY>
Bu bizim ilk frame'imiz!
</BODY>
</HTML>

frame2.html ise: 

<HTML>
<body>
Bu bizim ikinci frame'imiz!
<p>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Selam" onClick="parent.fr1.selam()">
     <INPUT TYPE="button" VALUE="Hey" onClick="parent.fr1.hey()">
     <INPUT TYPE="button" VALUE="Hebele" onCLick="parent.fr1.hebele()">
</FORM>
</BODY>
</HTML>

Vay! Bu script'ler gittikçe uzun olmaya başladı!
Peki, burada neler oldu? Öncelikle ilk dosya yükleniyor(frames.html). Bu dosya bize gereken çerçeveleri yaratıyor ve bu çerçevelerin içine dosyaları yüklüyor. Birinci çerçevemize (Adı 'fr1' olan) frame1.html'yi; ikinci çerçevemize de ('fr2') frame2.html'yi yüklüyor. Normal HTML'nin işi burada bitiyor. 'frame1.html'de gördüğünüz gibi JavaScript fonksiyonları tanımlanmış. Fakat bunlar burada çağırılmamış. Bu fonksiyonlar gereksiz midir? Yoksa ben yanlış yazdığım fonksiyonları silmeyecek kadar üşengeç biri miyim? Her ne kadar biraz üşengeç olsam da bu fonksiyonlar aslında gereklidir. Çünkü onlar ikinci çerçevedeki frame2.html tarafından çağırılmaktadır! Dökümanın başında anlattığımız düğme yaratma ve onClick özelliğini artık biliyorsunuz. Ancak parent.fr1... de ne demek?

Eğer daha önce 'obje'leri gördüyseniz bu size yeni olmayacaktır. Yukarıda gördüğünüz gibi frame1.html ve frame2.html frame.html tarafından çağırılmıştır. Bu yüzden frame.html'ye baba (parent), frame1.html ve frame2.html'ye de çocuk (child) diyoruz. Bu hiyerarşi içinde değişik frame'ler arasında bağlantı kurulabilir. Bu fikri size Ascii sanatını kullanarak bir grafik ile anlatmanın daha iyi anlamanız açısından faydalı olacağına inanıyorum...): 

              frames.html                parent		(Baba)
               /      \
              /        \
             /          \
  fr1(frame1.html)     fr2(frame2.html)   children	(Çocuk)

Bu içeriği daha da genişletmek de mümkündür tabii ki. 'torun' (grandchildren) da yaratabilirsiniz. (Bu resmi bir ad değildir!). 

              frames.html                parent		(Baba)
               /      \
              /        \
             /          \
  fr1(frame1.html)     fr2(frame2.html)   children	(Çocuk)
          /  \
         /    \
        /      \
    gchild1  gchild2                    'grandchildren'	(Torun)

Eğer baba, yani parent frame'de herhangibir şeyi frame2.html'den alıp işleme sokacaksanız bu durumda fonksiyonu çağırırken 'parent' ifadesini kullanmak zorundasınız. Alacağınız 'herhangibir şey'in adresi de 'parent' ifadesinden hemen sonra koyacağınız 'fr1' ifadesiyle alıcınıza anlatılır. (Bu ifadeleri birbirinden ayırmak için nokta (.) kullanılır.) Peki neden 'fr1' de başka birşey değil ? Aslında fr1'in hiçbir özelliği yok. Bu sadece frame'e (çerçeveye) verilen addır. Bu adı ben rasgele seçtim. Bu ad eğer hatırlarsanız frame.html'de tanımlanmıştı. Bundan sonrası da zaten çok kolay. Peki frame1.html'den frame2.html'deki fonksiyonu doğrudan nasıl çağırabiliriz? Muhteşem grafiğimde de gördüğünüz gibi frame1.html ile frame2.html arasında doğrudan hiçbir bağ yoktur. Yani mutlaka parent (Baba) frame üzerinden dolaşmanız gerekli. Bu yüzden fonlsiyonu çağırırken nerede olduğunu belirtmek için 'parent.fr1' demek zorunda kalıyorsunuz. Fonksiyonun bulunduğu yeri tarif ettiğinize göre artık fonksiyonu da çağırabilirsiniz. Yapmanız gereken tek şey fonksiyonun adını da bu ifadeye eklemek: parent.fr1.selam()
İşte bu ikinci script'teki onClick özelliğinin yaptığıdır...

Bir frame yarattığınız zaman yeni link'e bağlanırsanız frame yok olmaz. Eğer kullanıcı sayfanızda kalırsa problem yok. Mesela bir konu kısmı yarattınız. Seçilen konu yandaki boş frame'de görülüyor. Ancak eğer bu konulardan biri ya da fazlası başka bir internet adresindeyse konu kısmı istenmeyebilir. Bu durumda frame'i nasıl kaldıracaksınız?

Yapmanız gereken <a href...> komutunuza bir TARGET="_top" ifadesi eklemektir. Bu durumda izlenen bu link frame'siz bir sayfada oluşacaktır.

Tabii ki konu kısmındaki tüm link'ler dışarı bağlanıyor olabilir. Bu durumda sayfanızdaki <HEAD> komutları arasına bir <BASE TARGET="_top"> komutu ekleyebilirsiniz. Bu tüm link'lerin frame'siz bir sayfada görüneceğini belirtir.




İ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