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. Frame kullanarak sayfanızı herbiri ayrı bir HTML dökümanı gösterecek birkaç parçaya ayırabilirsiniz. Bu parçalar birbirinden ayrı kaynaklara (HTML dosyalarına) sahiptirler. Ancak bu ayrı sayfalar arasında bağlantı vardır. Örneğin iki frame yaratırsınız. Birinde konuları bulundurursunuz, konuya tıklandığında seçilen konu ikinci frame'de gösterilir. Böylece indeks 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>
Yukarıdaki frtest1.html ve frtest2.html dosyalarında sırasıyla "Birinci Sayfa" ve "İkinci Sayfa" yazıyor.
Ö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.
<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 NAME ile ad verebilirsiniz. Bu adlar JavaScript'te de işe yarayacaktır. Böylece bir işlem yapmak istediğinizde istediğiniz frame'i seçebilirsiniz. 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ğil. Şimdi gelelim javascript içeren 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> <BODY> Bu bizim ilk frame'imiz! </BODY> </HTML>
frame2.html ise:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function selam() {
parent.fr1.document.write("Selam!<br>");
}
function hey() {
parent.fr1.document.write("Hey!<br>");
}
function hebele() {
parent.fr1.document.write("Hebele Hubele<br>");
}
// -->
</script>
</HEAD>
<body>
Bu bizim ikinci frame'imiz!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Selam" onClick="selam()">
<INPUT TYPE="button" VALUE="Hey" onClick="hey()">
<INPUT TYPE="button" VALUE="Hebele" onCLick="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. İkinci çerçevedeki buton'lar önceden tanımlanmış olan fonksiyonları çağırıyor. Bu fonksiyonlar üstteki frame'de istenilen yazıyı yazıyor. Eğer "document.write("Selam!<br>");" şeklinde yazılsaydı frame2.html'in içeriği değişecekti. 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' 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 yazdırmak istediğimiz yazıyı yazdırırken 'parent.fr1' demek zorunda kalıyorsunuz.
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.
11.Mayıs'96
© 1996 - Stefan Koch