ANA SAYFA -
HTML DERSİ -
JAVASCRİPT DERSİ -
JAVASCRİPT KODLARI -
CSS DERSİ -
ÖNERİLER
11. JAVASCRIPT VE DHTML
JavaScript ile katmanların(layer) neredeyse bütün özelliklerini değiştirebiliriz. Bu
özelliği onMouseOver, onClick gibi olaylarla birleştirip çok iyi sonuçlar alabilirsiniz.
İşe başlamadan önce katmanları tanıyalım: Web sayfalarımızda <div> ve <layer> etiketlerini kullanarak katmanlar
oluşturabiliriz. Fakat ne yazık ki Explorer <layer> etiketini tanımaz. Bu nedenle
kullanımı biraz daha zahmetli olan <div> etiketini kullanacağız.Katmanlar sayfadan bağımsızdırlar, Javascript ile boyutlarını, renklerini hatta
görünürlüklerini değiştirmemize olanak sağlarlar. Şimdi önce bir katman oluşturalım, sonra da Javascript ile katmanların
değiştirebieceğimiz özelliklerini görelim.
<html>
<head>
<title>Katman</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
</head>
<body>
<div
id="katman" style="position:absolute; left:50; top:200; width:100;
height:200;
visibility:visible; background-color:teal">Burası bir
katman</div>
</body>
</html> |
Bu özelliklerin JavaScript'deki adları aşağıdaki gibidir:
- id:Katmanın adı.
- style:Katmanın aşağıda listelenen stil özellikleri
- position: Katmanın yeri kesin olarak belirtilecekse absolute, göreli olarak
belirtilecekse relative değerini alır.
- top:Katmanın browser penceresinin üst kenarından uzaklığı
- left:Katmanın browser'ın sol kenarından uzaklığı
- width:Katmanın genişliği
- height:Katmanın
yüksekliği
Katman tekniğini kullanılırken Netscape ve Explorer farkını aklımızda bulundurmalıyız.
Aşağıda Explorer için yazım kuralını görüyoruz.
| katmanAdı.style.DeğişecekÖzellik=yeniDeğer |
Netscape için yazım kuralı ise şöyledir:
| document.katmanAdı.DeğişecekÖzellik=yeniDeğer |
Şimdi bu tekniği örneklerle daha iyi anlayalım:
<html>
<head>
<title>Katman</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
tani()
{
if(navigator.appName=="Netscape")genislik=document.katman
if(navigator.appName=="Microsoft
Internet Explorer")genislik=katman.style
}
function
genisle()
{
genislik.width=400
}
-->
</script>
</head>
<body
onLoad="tani()">
<div id="katman" style="position:absolute;
left:200; top:30; width:100; height:200;
visibility:visible;
background-color:teal">Bu katman genisleyecek</div>
<form
name="form1">
<input type="Button" onclick="genisle()"
value="Genişlet">
</form>
</body>
</html> |
JavaScript bölümü burada sona erdi. Bir sonraki bölümde CSS tekniğini göreceğiz. CSS
bize stil şablonları oluşturup bütün sitenin yazıtipi, yazı rengi vs. ayarlarını tek
bir dosyadan yönetme olanağı verir. Ayrıca CSS , HTML'e metin biçimlendirme konusunda
bir çok ekleme yapar.
|
