Onclick event nedir? (Onclick nedir?)
Web tabanlı program yazmak istiyor musunuz?
Evet ise kodlamada olay nedir bilmelisiniz. Yaygın adı İngilizce olarak event Türkçe olarak ise olay konusunu bu sayfayı dikkatlice okuduktan sonra öğrenmiş olacaksınız.
Bilgisayar, ceptelefonu, tablet vs.. cihazlarının giriş aygıtları tarafından oluşturulan her bir duruma olay (event) desek bu tanım noksan olur. Ama olsun tanım olarak varsın noksan olsun; Sonraki satırlarımın üzerinde yükseleceği temeli bana verir. Bilgi işlem cihazlarına giriş aygıtı olan yerlerden oluşturulmuş durumlara olay denir.
Klavye ve fare en yaygın giriş araçlarıdır. Click diye bilinen olay ise farenin sol tıklamasına verilen isimdir. ON kelimesinin anlamı ise esnasında olduğunda gibi anlamlara gelir.
Javascript Onclick farenin sağ tuşuna tıklandığı an demektir. web sayfasında bu esnada ne yapılmasını istiyorsak bu özellik ile yapmak istediğimizi sağlayan kodları devreye alırız.
HTML onclick
Programcı, web sayfasının hangi bölümüne (birleşenine) tıklandıysa buna yönelik bazı kodlarını çalıştırabilir. Bunun için HTML etiketlerinden değer olarak onclick özelliğini alabilenleri bilmesi gerekir. Hangi etikette hangi işlemin yapılacağı programcılıkta arayüz konusudur. Kullanıcının arayüz birikimine ters olmaması programınızın öğrenilmesini kolaylaştırır;
HTML onclick bu detaya dikkat edilerek kullanılmalıdır.
HTML de neredeyse bütün etiketlerin (tag) Onclick olayı mevcuttur. Örneğin <input> <body> <p> <a> <button> vs... hepsinin onclick olayı mevcuttur. Devreye alınacak javascript nereye yazılır? HTML etiketinin içine direkt javascript kodu yazabiliriz. Button HTML etiketi üzerine tıklama olduğunda javascript çalıştırmayı ele alalım.
Html button onclick Kullanımı:
Bu yukarıdaki HTML kodunu yazıp tarayıcıda çalıştırmanız kalıcı öğrenme için önemlidir. Butona fare ile tıkladığınızda (sol tıklama) alert alırsınız yani Türkçesi uyarı alırsınız.
Burada javascript kodunu nereye yazdık? Direkt etiketin bir özelliğine değer ataması yapar gibi = işaretinden sonra onclick evente JS kodu yazdık. Tıklanınca çalıştı.
Bunun yanında bir başka şekil ile de javascript kod çalıştırmayı göstermek istiyorum.
JavaScript Kod çalıştırma
Javascript kodlamada diğer programlama dillerinde olduğu gibi fonksiyon diye bir olgu vardır. Bir grup koda bir isim veririz; Bu isim ile o kodu çağırıp o kodun devreye girmesini sağlarız.
Tıklama olduğunda çalışmasını istediğimiz javascript kodunu HTML elementi olan script bloğunun içine yazmamız gerekir. Yazdığımız kodun kaç satır olduğu önemli değil. X kadar satır koda bir fonksiyon adı veririz ve bu x kadar satır fonksiyon adı çağrıldığında bir bütün olarak satır satır çalışır.
Onclick="hesapla();" diye bir yazımı button HTML etiketinin içine ekleyelim ve ne olacağına bakalım.
Bu yukarıdaki kodu yazıp sayfayı tarayıcı ile yükledikten sonra butona sol fare tuşu ile tıklayın bakalım.
Olmayan fonksiyonu onclick event ile çağırdık çalışmaz hata verir!!
Çağırdığımız fonksiyon ile birebir aynı isimde bir fonksiyon VAR MI? YOK! hadi fonksiyonu yazalım:
Yukarıdaki kodu yazıp ondan sonra sayfayı yükleyip sayfaya tıklayın bakalım. Yine çalışmaz! Yine olmayan fonksiyonu çağırdık. :) gülümseme öğretir. Problemlerle başbaşa kalmadan öğrenemezsiniz; Bazen bile bile problemli kod yazın.
Fonksiyon tanımındaki isim ile fonksiyon çağırmadaki isimler aynı olmalı.
Peki bu yukarıdaki fonksiyon 3 ile 5 sayısını topladı da ne işe yarayacak kendi başına bu fonksiyon?
Fonksiyona Değer Göndermek
Eğer bu fonksiyonun içinde sabit olmayan bir değer varsa o değer de fonksiyona parametre olarak verilir. Birden fazla parametre verilecekse bu da virgül ile ayrılır.
JavaScript onclick kullanımı (diğer bir şekil)
DOM nesnesini duydunuz mu? Javascript ile her zaman görünen bir elemente fonksiyon kodlaması yapılmaz. Bazen gözükmeyen yani html elementi (tag) olmayan birşeylere de fonksiyon adı altında programcıklar yazmanız gerekir:
XMLHttpRequest bunlardan biridir mesela. Ajax diye bilinen sayfa yenilemeden istekte bulunmayı bu nesneden bir tane new'leyerek yaparız. Mesela bu nesnenin onreadystatechange (kelime kelime yazacak olursak) On Ready State Change oluşması durumunda çalışmasını istediğimiz kodu nasıl bu olay ile ilişkilendireceğiz?
Onclick için fonksiyon atamasını html etiketine yapabilsek bile bu yukarıdaki gibi yaparsak tasarım ve kodlama rolleri farklı kişilerde olduğunda ekip çalışmasının yürütülmesi ve üretilen sonuçların birleştirilmesi az etkileşimle olmuş olur.
Button elementine bir ID ekleyelim ve bu kimlik üzerinden sayfa yüklemesi tamam olduğunda; bütün Html etiketleri hafızaya alındığında; hafızaya alınmış olan button etiketine onclick olduğunda neler yapılacağını yazalım.
Bu durumda javascript kodumuz şu şekilde olacaktır:
Bu Javascript dersinin de sonuna geldik.
Kartopu büyüyor mu?
Bakın silahınızı tekrar hatırlatayım:
ÇA-LIŞ-MAK
Kurşunlarınız ise bugün yaptığınız çalışmaların herbiridir.
Çığ gibi olmak için sürekli yuvarlanmalısınız. Ben sizinleyim; karlı tepeleri göstermek için buradayım.
Sizin web programlama isteğiniz o kadar büyük olmalı ki bensiz kalsanız da kendinize yeni bir rehber bulasınız.
Sebat sebat sebat.