Anasayfa > 7. Frame Kontrolü > 7. Frame Kontrolü

7. Frame Kontrolü

Frameler Html dilinde aynı sayfa içerisinde birden fazla sayfa görüntülemek için kullanılır. Yani bir sayfayı istediğimiz ölçülerde istediğimiz kadar bölüme ayırıp her bölümde farklı bir html sayfası çalıştırmak için kullanılır.  Html bilgisi tam olan tüm web masterlar frame düzenleme hakkında az çok bir bilgiye sahiptir. Bizim JavaScript ile yapacağımız iş bir faramaden diğerini kontrol etmek olacak.

Bu işlem için öncelikle bölümlere ayrılacak ana sayfa yazılmalı ve bu sayfa içerisinde çalıştırılacak olan tüm sayfalarda ayrı ayrı hazırlanmalıdır. Aşağıda iki ayrı bölümden oluşan bir frame sayfa örneği veriliyor.

Örnek: Sağ ve sol isminde iki frameden oluşan ve sol frameden sağ framenin ardalan  rengini değiştire bilen basit bir script hazırlayalım.

– Framelerin tanımlanacağı ana Html, Bu sayfa hazırlandıktan sonra herhangi bir isimle kaydedin. Biz bu sayfaya “index.htm” ismini vereceğiz

<html>
<head>
<frameset cols=”25%,*”>
<frame src=”sol.htm” name=”sol”>
<frame src=”sag.htm” name=”sag”>
</frameset>
</head>
<body>
</body>
</htm>

-“sağ.htm” ana sayfamızın sol kısmını oluşturan html sayfası. Bizim örneğimizde üzerinde değişiklik yapacağımız sayfa.

<html>
<body bgcolor=”blue”>
<center>
<b>wWw.BilimVeTeknoloji.Com</b>
</body>
</html>

– “sol.htm” örneğimizde bizi asıl olarak ilgilendiren sayfa bu. JavaScriptimizi bu sayfaya yazacağız.

<html>
<script>
function ayar(a)
{
parent.sag.document.bgColor=a
}
</script>
<body>
<b>Renk</b>
<form name=”form1″>
<select onchange=”ayar(value)”>
<option value=”blue”>Mavi</option>
<option value=”yellow”>Sarı</option>
<option value=”red”>Kırmızı</option>
<option value=”green”>Yeşil</option>
<option value=”white”>Beyaz</option></select>
</form>
</body>
</htm>

Not: Scripin çalışması için yukarıdaki üç html dosyasını belirtilen isimlerle kaydedip, aynı klasör altına koyunuz.

JavaScript Komutlarını Kullanma Formatları

İlk dersimizde de bahsettiğimiz gibi JavaScript üç farklı formatta kullanılabilir. Bu kullanım formatlarını görmek için basit bir örnek ele alalım ve üç değişik formatla yazalım.

Format 1: JavaScriptimizi script tagları açmaya gerek duymadan direk “Html” komutlarının arasında kullanabiliriz. Bu format çok basit bir yapıya sahiptir fakat büyük scriptlerde karışıklığa neden olabilir.

Örnek:

<html>
<body>
<center>
<p><b>JavaScript Format 1 Örneği </b></p>
<input type=”button” value=”Tıklayın!..” onclick=”alert(‘JavaScrip formatı 1’)”>
</body>
</htm>

Format 2: JavaScript yazımında en çok başvurulan yöntem function kullanımıdır. Bu format karışık scriptlerde çok büyük kolaylıklar sağlamsının yanında bazı scriptlerede kullanmak zorunlu hale gelmektedir.

Örnek:

<html>
<script>
function mesaj()
{
alert(“JavaScrip formatı 2″)
}
</script>
<body>
<center>
<p><b>JavaScript Format 2 Örneği </b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</htm>

Format 3: Bu format daha çok yazılan Html kodunun sade görünmesi için kullanılır. Bu formatta script komutları farklı bir dosyaya kaydedilir ve Html içerisinde script tanımlandıktan sonra bu dosya çağrılarak içerdiği  komutlar kullanılır. Komutların kaydedildiği bu dosyalara genellikle “js” uzantısı verilir.

<script src=”deneme.js”>   ‘satırı ile komutların bulunduğu js dosyası çağrılır.

Örnek:

– Bu Html dosyası ile aşağıda içeriğini verdiğimiz, “mesaj.js” dosyasını çağıracağız.

<html>
<center>
<script src=”mesaj.js”>
</script>
<body>
<p><b>JavaScript Format 3 Örneği </b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</htm>

– “mesaj.js” Aşağıdaki komutları “mesaj.js” ismi ile kaydedip yukarıdaki Html dosyası ile aynı klasör altına atın.

function mesaj()
{
alert(“JavaScrip formatı 3”)
}

  1. Henüz yorum yapılmamış.
  1. No trackbacks yet.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: