Youtube Channel
onclick
onClick
Ziyaretçinin, Mosue işaretçisi tıklanabilir bir nesne üzerinde iken Mouse’nun düğmesine basması, Click olayını doğurur; bu olayı onClick yönlendirir. Düğmeler, işaretleme kutuları, radyo düğmeleri ve bağlantılar tıklanabilir. Olayın oluşması için varsayılan Mouse düğmesinin basılması ve bırakılması gerekir. Düğme basılı durursa, Click olayı gerçekleşmiş olmaz.onClick yönlendiricisine, “Click” olayı halinde ne yapmasını istediğinizi ait olduğu nesnenin HTML etiketi içinde bildirmeniz gerekir. Aşağıdaki kodu düz yazı programınızda yazar ve onClick01.htm adıyla kaydederseniz, onClick yönlendiricisi için program yazmış olacaksınız:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te onClick</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//onClick icin fonksiyonlar
function resim1()
{
resim1Pencere = window.open("resim1.htm", "Resim1", "toolbar=0, width=200, heigth=400,resizeable=0");
}
function resim2()
{
resim2Pencere = window.open("resim2.htm", "Resim2", "toolbar=0, width=200, heigth=400,resizeable=0");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1>Düğmelerden birini tıklayınız!</H1>
<INPUT TYPE="button" NAME="Resim1" VALUE="Resim 1" onClick=resim1()>
<INPUT TYPE="button" NAME="Resim2" VALUE="Resim 2" onClick=resim2()>
</BODY>
</HTML>
Bu kodda adı geçen resim1.htm ve resim2.htm adını vereceğimiz ve iki küçük resim içeren sayfaları da oluşturalım (Elinizde hazır bir grafiğin adını verebilirsiniz).
<html>
<head>
<title>Resim 1[veya Resim 2]</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
<h1>Resim 1[veya Resim 2]</h1>
<p><img src="resim1.gif" width="151" height="278" alt="uzayli.tif (4942 bytes)"></p>
</body>
</html>
Bu üç sayfayı oluşturduktan sonra onClick.htm’de sırayla her iki düğmeyi de tıklayın; her Click olayında onClick yönlendiricisinin farklı fonksiyonları çağırdığına dikkat edin.
Kimi zaman onClick yönlendiricisi, bağlantı nesnesi ile doğrudan kullanılabilir. Bağlantı nesnesi olan <A HREF=....> etiketi, bir bağlantı protokolü adresi (URL) verilmesini ister. Ancak HTTP veya FILE protokolü yerine buraya doğrudan JavaScript’in adını ve icra etmesi istenen fonksiyonu yazabilirsiniz. Örneğin, <A HREF=”JavaScript:resim1()”> şeklinde bir ifade, protokol olarak Javascript’i göstermemizi sağlayabilir.
onClick01.htm’de INPUT etiketleri yerine, şu iki satırı yazarak, onClick02.htm adıyla kaydedip, Browser’da açın. Düğmelerin yerini bağlantılı iki kelimenin aldığını göreceksiniz; fakat sayfanın işlevi değişmeyecek. onClick, bu kez düğmenin Click olayını değil, bağlantının Click olayını karşılıyor:
<A HREF=”JavaScript:resim1()”>Resim 1</A>
<A HREF=”JavaScript:resim1()”>Resim 1</A>