DHTML Hakkında Ön Bilgiler - Geniş Kapsamlı Doküman ve Makale Sitesi

Tüm anlatımlarda “sayfa” web sayfası(dokümanı) manasında, “eleman” web sayfasındaki bir nesne(textbox,table vs.) manasında, “nitelik” elemanın özelliği(attribute) manasında kullanılmıştır. Ayrıca aksi belirtilmedikçe tüm örnekler Cross-Browserlar ile çalışır biçimde anlatılacaktır.

Tarayıcılara Özgü Standartlar:

Netscape Navigator 4.x	Cross-Browser	Internet Explorer 4.x
JSS (JavaScript Style Sheets) Katmanlar	CSS1 CSS2 CSS Positioning JavaScript	Görsel Filtreler Dinamik CSS

CSS-P Özellikleri: Öncelikle elemanın pozisyon niteliği belirtilmelidir. (absolute yada relative)

left – elemanın sol pozisyonu
top – elemanın üst pozisyonu
visibility – eleman görünür mi görünmez mi
z-index – elemanın istif sırası
clip – elemanı belli yerlerinden kesme
overflow – içerik taşmaları kontrolü

Filtreler: Filtreler ile yazılarınıza ve resimlerinize çeşitli efektler verebilirsiniz. Bu özelliği kullanmak istediğiniz elemanın genişliğini(width) mutlaka belirtin. Bazı filtreler background-color özelliği transparent olarak ayarlanmadıkça çalışmayacaktır.

Filtre	Argüman	Açıklama	Örnek
alpha	opacity finishopacity style startx starty finishx finishy	Elemanın opaklığını ayarlamanızı sağlar	filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
blur	add direction strength	Elemanın netliğini ayarlamanızı sağlar	filter:blur(add=true, direction=90, strength=6);
chroma	color	Belirtilen rengi transparan yapar	filter:chroma(color=#ff0000)
fliph	yok	Elemanı yatay döndürür	filter:fliph;
flipv	yok	Elemanı dikey döndürür	filter:flipv;
glow	color strength	Elemana glow efekti verir	filter:glow(color=#ff0000, strength=5);
gray	yok	Elemanı siyah-beyaz hale getirir	filter:gray;
invert	yok	Elemanın renklerini ve aydınlığını ters çevirir	filter:invert;
mask	color	Elemanı belirtilen arkaplan rengyile ve transparan ön plan rengiyle kaplar.	filter:mask(color=#ff0000);
shadow	color direction	Elemana gölge ekler	filter:shadow(color=#ff0000, direction=90);
dropshadow	color offx offy positiv	Elemana dropshadow ekler	filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave	add freq lightstrength phase strength	Elemanı dalgalı hale getirir	filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray	yok	Elemanı ters renk ve aydınlıkla siyah-beyaz hale getirir	filter:xray;

DOM(Doküman Obje Modeli): Sayfadaki her elemana erişebilmemizi sağlar. Cross-Browserlar için ortak bir DOM modeli kullanılmaktadır. (NS 4.x ve IE 4.x için farklı yöntemlerle sayfa elemanlarına erişilebiliriz. Yeri geldiğinde bunlardan bahsedeceğim.) İstediğimiz elemana erişebilmek için o elemana bir “id” belirtmeliyiz tabi ki birde bu elemana erişmek için kullanılacak bir script dili ki biz javascript kullanacağız. Ufak bir örnek vereyim:

<html>

<head>

<span id="text">Deneme Yazısı</span>

document.getElementById('text').style.color="red"

</script>

</body></html>

HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi)

Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir.

Event (Olay)	...... olduğunda olur
onabort	sayfa yüklenmesi iptal edilirse
onblur	eleman terk edilirse
onchange	elemanın değeri değiştirilirse
onclick	elemana tıklanırsa
ondblclick	elemana çift tıklanırsa
onfocus	eleman aktive edilirse
onkeydown	tuşa basılı tutulursa
onkeypress	tuşa basılırsa
onkeyup	tuşa basıp bırakılırsa
onload	sayfa yüklendikten sonra Not: Netscape bu olayı sayfa yüklenirken gerçekleştirir. Tam yüklenmesini beklemez.
onmousedown	fare butonuna basılırsa
onmousemove	fare imleci bir elemanın üzerinde hareket ederse
onmouseover	fare imleci bir elemanın üzerine gelirse
onmouseout	fare imleci bir elemanın üzerinden ayrılırsa
onmouseup	fare butonuna basılıp bırakılırsa
onreset	form resetlenirse
onselect	sayfadan bir içerik seçilirse
onsubmit	form gönderilirse
onunload	sayfa kapatılırsa

Bu makalenin yazar yada kaynağını bildirmek için tıklayınız.

HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi)

Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir.

Kullanıcı Yorumları

İlgili Dökümanlar