JavaScript `de CSS gibi üç şekilde yani Global, yerel ve bağlantılı teknikleriyle kullanılabilir. Bizim bu sayfada öğreneceğimiz, imleç hareketleriyle çalışan ve yerel teknik (attribute gibi) kullanılarak çalıştıracağımız 3 komut olacak. Bunlar imleci üzerine ötürünce çalışan onMouseOver, imleci üzerinden çekince çalışan onMouseOut, tıklayınca çalışan onClick olaylarıdır. Bu 3 komut sayesinde farenin hareketlerine bağlı dinamik sayfalar tasarlıyabiliriz.
İlk aşamada JavaScript`in fare hareketleriyle çalışan 3 olayıyla, CSS katmanlarımıza efekler vermeyi göreceğiz. Yani fare hareketleriyle fontların tiplerini değiştirme, yok ve var etme, yerini değiştirme gibi örnekler yapacağız. Bu sayfada anlatacağım JavaScript`in yerel kullanımı (Etiketlerin içinde kullanılan) ne yazıkki Explorer 4.0, Netscape 6.0 ve üzeri sürümlerinde çalışmaktadır. Daha Eski sürümler için JavaScript`in Global tekniğini kullanmalısınız. Glabal yöntemi biraz zordur ve bunun için bayağı bir JavaScript öğrenmeniz gerekiyor. Bu tekniğin ileriki sayfalarda bulabilirsiniz.
Yinede çok kolay olan yerel teknikten soğumayın. Bu teknik bizim bir nebze de olsa dinamik sayfalar yapmamız için yeterli. Şimdi kısa kesip ilk öğrenilen, en bilindik ve kolay JavaScript kodunu öğrenelim. Aynı yöntemi birçok tag içinde kullanıyoruz.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<TITLE>JavaScript Örnekleri</TITLE>
</HEAD>
<BODY>
<P><a href="#" onClick="alert('İşte ilk JavaScriptinizi yaptınız')"> birinci şekil </a>
<P><div style="background: yellow; font-size: 20" onClick="alert('İşte ilk JavaScriptinizi yaptınız')"> ikinci şekil </div>
<P><form>
<button onClick="alert('İşte ilk JavaScriptinizi yaptınız')"> üçüncü şekil </button>
</form>
<BR> <BR> <BR> <BR> <BR>
<P><div style="background: yellow; font-size: 20" onMouseOver="alert('İşte ilk JavaScriptinizi yaptınız')"> dördüncü şekil </div>
</BODY>
</HTML>
Burada ilk olarak işaretlere dikkat edelim, mesela tek tırnak işareti benim klavyede shift ile birlikte 2 tuşuna basınca çıkıyor, eğer yanlış yazarsanız Script çalışmaz. Kodu denediğinizde karşınıza bir link, iki sarı renk div katmanı ve bir form butonu çıkacaktır. Linki, ilk katmanı ve butonu tıkladığınızda içlerinde kullandığımız onClick olayı sayesinde tıklama sonucu, belirttiğimiz yazı error penceresinde gözükecektir. Birinci div katmanı bir link olmadığı halde javaScript sayesinde tıklanabiliyor. Alttaki ikinci div katmanı ise onMouseOver olayı sayesinde imleci üzerine getirdiğimizde gereken JavaScript `i icra edecektir. Link içinde kullandığımda, Link sayfayı bir yere götürmesin diye href attribute`u içinde # (diyez) karakteri kullandık, siz gayet tabi istediğiniz adresi yazabilirsiniz. Ayrıca diğer JavaScript komutu olan OnMouseOut `u da kullanabilirsiniz. Buton yapımını, Form dersimizde anlatmamamın nedeni ise, gönder ve temizle butonları hariç diğerlerinin JavaScript olmaksızın bir işe yaramamasıdır. Ayrıca sadece <button> etiketi ile oluşturulan butonlar eski browserlarda gözükmez. Gördüğünüz gibi fare hareketleriyle çalışan bu üç komutu, her türlü tag içerisinde ve her şekilde kullanabiliyoruz. Error penceresini ise JavaScript `in alert fonksiyonu sağlıyor.
Şimdi, bu error penceresinin çıkmasını ağlayan JavaScript uzun ama kuralına uygun haliyle Head bölümünde yazalım. (Global teknik)
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<TITLE>JavaScript Örnekleri</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
function ornek()
{
alert("İşte ilk JavaScriptinizi yaptınız")
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM>
<INPUT type="button" onClick="ornek()" value="üçüncü şekil">
</FORM>
</BODY>
</HTML>
Sayfada JavaScript kodu kullanacağımızı head bölümünde <SCRIPT> tagi ile belirleyip kullandığımız versiyonu da belirtikten sonra, bir fonksiyon yaratıyoruz, bu fonksiyonun ne yapacağını ve ne sonuç vereceğini süslü parantez içinde belirttikten sonra artık bu fonksiyonun ismini "ornek()" istediğimiz yerde atıfta bulunarak kullanabiliriz. Aslında bu JavaScript `in normal kullanım şeklidir. Fakat JavaScript çok kullanıldığı için Browser`larla adeta bütünleşmiştir. Biz basit işler yapacağımız için bu kısma hiç girmiyeceğiz, ama isterseniz JavaScript sayfalarında bu tür örnekleri bulabilirsiniz.
İnternette gezinirken sitelerde görmüşsünüzdür, resimli bir linkin üzerine imleci getirince başka bir resim gelerek dHTML efekti yaratılır. Bu efekti yerel teknikteki basit fonksiyonlarla yapmamız mümkün değil. Bu efekt Global tekniğin anlatıldığı sayfada mevcuttur. Bu teknikde her efekt için iki ayrı resim yapmanız gerektiğini unutmayın.
Artık JavaScript kullanımını kavradığımıza göre dişe dokunur dinamik örnekler yapmaya başlayalım. Mesela tıklamak suretiyle yazı tiplerini değiştirelim veya yok edelim.
<P><div style="background-color:red; font-family : MS Comic Sans; font-size:40pt; color: blue" onMouseOver="this.style.visibility='hidden'"> Bunun üzerine gelirseniz yok olacaktır.</div>
<P><div style="background-color:#aaaaaa; color:red; font-family : Verdana; font-size:30pt" onMouseOver="this.style.backgroundColor='black'"> Bunun üzerine gelirseniz arkaplan rengi Siyah olcaktır.</div>
<P><div style="background-color:blue; color:white; font-family : Times New Roman; font-size:30pt" onMouseOver="this.style.font='60'"> Bunun üzerine gelirseniz yazı büyüyecektir.</div>
<P><div style="color:yellow; font-size:40pt; text-decoration: line-through" onMouseOver="this.style.position='absolute'"> Bunu üzerine gelirseniz aşağıdaki yazı altına girecektir.</div>
<P><div style="font-family : Times New Roman; color:blue; font-size:40pt" onMouseOver="this.style.color='red'"> Bunun üzerine gelirseniz yazı kırmızı olur.</div>
Yukarıdaki örnek Explorer 4.0, Netscape 6.0 ve üzeri sürümlerinde çalışmaktadır.
Bu teknikteki kalıp Explorer için katman_adı.style.değiştirilmesi_istenen_özellik=yeni_değer ,
Navigator içinse
document.katman_adı.değiştirilmesi_istenen_özellik=yeni_değer şeklindedir.
Explorer`a göre verdiğim this.style.değiştirilmesi_istenen_özellik=yeni_değer kalıplı örnek Navigator 6`da da çalışıyor, ama daha önceki Navigator`larda verilen kalıp sadece Global kullanımda çalışmaktadır.
Anladığınız üzere örnekte this (bu) dediğimiz etiket sadece değiştirmek istediğimiz katmanın içinde kullanılabiliyor. Dışında kullanacaksak this yerine katmanın ismini yazmamız lazım. Birde burada bir değişikliğin farkına varmış olmalısınız. Style`dan bildiğimiz komutlar değiştirilerek kullanılıyor. Mesela
background-color etiketi backgroundColor olarak kullanılıyor, burada Color kelimesindeki C harfinin büyüklüğü bile önemli. Benim yerel kullanımıyla gördüğüm sadece iki örnek vardı. Bunlar arka plan rengini değiştirmek için backgroundColor ve yok-var etmek için visibility etiketleridir, zaten genelde bunlar kullanılır. Ben diğer CSS etiketlerini denedim sadece örnektekileri çalıştırabildim.
Devamı diğer sayfada
