Hareketli (dinamik) bir sayfa yapmak için, sayfa nesnelerini ve onlara komutlar vermeliyiz. Buna DHTML (dynamik hypertext markup language) denmektedir. Aslında DHTML diye bir dil veya standart yok, HTML nesneleri ve CSS özelliklerini JavaScript (veya baÅŸka bir dille) sayfa içinde deÄŸiÅŸtirerek, hareketli web sayfaları yaratma iÅŸlemidir. Fare imlecini kovalayan yaylar, toplar, martılar; üzerine gelindiÄŸinde deÄŸiÅŸen ışıklı düğmeler; tıklanıldığında perde gibi açılan menüler; Star Wars jeneriÄŸine benzeyen kayan metinler, daha neler neler…
DOM (Document Object Model; Doküman Nesne Modeli)
Hareketli web sayfaları oluÅŸturmak için HTML, CSS ve JavaScript (baÅŸka bir script dil de olabilir) kodlarını bir ÅŸekilde iliÅŸkilendirmek gerekir; burada DOM devreye girer. DOM bir modelleme ÅŸeklidir, sayfa nesnelerinin belli bir hiyerarÅŸi içinde tanımlanmasıdır. Sayfa nesnelerini komutlandırmak için, önce tanımlamamız gerekir. Bu tanımlam için, üzerinde iÅŸlem yapılacak her HTML nesnesi id=”…” parametresiyle isimlendirilir. Bu isim kullanılarak nesnenin parametreleri, CSS özellikleri veya metinsel deÄŸerleri üzerinde deÄŸiÅŸiklik yapılır.
Mesela bir HTML nesnesinin parametresi üzerinde oynayalım:
Â
<html>
<head>
<title>Parametre DeÄŸiÅŸimi</title>
<script language=”JavaScript”>
function yan()
{
resim.src=”dhtml2.jpg” }
function son()
{
resim.src=”dhtml1.jpg” }
</script>
</head>
<body>
<img id=”resim” onmouseover=”yan()” onmouseout=”son()” src=”dhtml1.jpg” border=”0″>
<br><br>Yazının parlaması için DHTML yazısının üzerine gelin.
</body>
</html>Â
Bu uygulama farenin hareketiyle iki resmin yer değişmesini sağlıyor ve ortaya hoş bir görünüm çıkıyor. Eminim web efendisi olmak isteyen bir çok arkadaş başkalarının bu işi nasıl yaptığını merak ediyordur. Peşin söyleyim: Böyle yapmıyorlar, böyle yapsalardı kullanıcılar ikinci resmin yüklenmesi için fazladan beklemek zorunda kalacaklardı. Nasıl yapıldığını ileriki bölümlerde anlatacağım, şimdilik adım adım ilerleyelim.
Şimdi CSS özellikleri üzerinde değişiklik yapalım. Bu uygulamayı ilk uygulamanın üzerine inşa ediyorum:
Â
<html>
<head>
<title>CSS Özellikleri</title>
<script language=”JavaScript”>
function buyut()
{
resim.style.width=”500″ }
function kucult()
{
resim.style.width=”347″ }
function yan()
{
resim.src=”dhtml2.jpg” }
function son()
{
resim.src=”dhtml1.jpg” }
</script>
</head>
<body>
<img id=”resim” onmouseover=”yan()” onmouseout=”son()” onclick=”buyut()” ondblclick=”kucult()” src=”dhtml1.jpg” border=”0″>
<br><br>Yazının parlaması için DHTML yazısının üzerine gelin.
<br>Yazının büyümesi için DHTML yazısının üzerine tıklayın.
<br>Yazının küçülmesi için DHTML yazısının üzerine çift tıklayın.
</body>
</html>Â
CSS özellikleriyle oynamak için ÅŸu yapı kullanılıyor: nesnenin ismi.style.css özelliÄŸi=deÄŸer. Yukarıdaki uygulamada CSS derslerinde gördüğümüz width özelliÄŸi kullanılmış. ÖğrendiÄŸimiz onca CSS özelliÄŸiyle neler yapılır, neler… Ben CSS derslerinde yeterince örnek verdiÄŸimizi düşündüğüm için, buraya yeni örnekler koymayacağım. Ama sizlere pratik yapmanızı tavsiye ederim.
Nesne HiyerarÅŸisi
Aşağıdaki resmi siz değerli okuyucularım için Joe Burns adlı bir adamın sitesinden arakladım:
Â
Â
Â
Â
Â
Şekilde nesneler bir hiyerarşi içinde gösterilmiş. Görüldüğü üzere hiyerarşinin en tepesinde windows (pencere) bulunuyor. Altındaki parent, self, top ve Frames Windows nesnesinin elemanlarıdır. Birden çok pencere söz konusu değilse, bu nesneleri belirtmeniz gerekmez. Pencere Komutları sayfasında bu konunun ön hazırlığını yaptık aslında, sayfaları sırasıyla takip eden arkadaşlarımıza bu terimler hiç yabancı gelmeyecektir.
DOM nesneleri için başlangıç yapacağımız nesne doküman (document).
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.