Linke tıklayınca Javascript çalıştırmak

Bir web sayfası hazırlarken en çok unuttuğum şey bir linke tıklanınca nasıl Javascript kodu çalıştırılacağıdır. Buraya not düşerek bir daha bu kodları aramamayı umut ediyorum.

Bir linkte tıklayınca Javascript çalıştırmanın birkaç yolu var. Bunlardan ilki, <a href="javascript:mesajver()">Tıkla</a> yapısını kullanmak. Aşağıda bu şekilde çalışan bir örnek sayfa yer almakta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Linke tıklayınca Javascript çalıştırma</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
  <script>
    function mesajver() 
    {
      alert("Merhaba dünya!");
    }
  </script>
</head>
<body>
  <a href="javascript:mesajver()">Tıkla</a>
</body>
</html>

Bu sayfadaki Tıkla linkine basıldığında, ekrana Merhaba Dünya şeklinde bir mesaj gösteriliyor.

İkinci yöntem olarak a etiketinin onClick olayını, <a href="http://www.google.com" onclick="return onay();">Google'a git</a> şeklinde kullanabiliriz. Örnek aşağıda:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Linke tıklayınca Javascript çalıştırma</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
  <script>
    function onay() 
    {
      if (confirm("Google'a gitmek istediğinizden emin misiniz?"))
        return true;
      else 
        return false;
    }
  </script>
</head>
<body>
  <a href="http://www.google.com" onclick="return onay();">Google'a git</a>
</body>
</html>

Burada da Google'a git linkine tıklanılınca, verilen bir onay mesajından alınan sonuca göre, ya siteye gidiliyor, ya da işlem iptal ediliyor. Burada return onay(); kısmına özellikle dikkat çekmek istiyorum. Eğer return kelimesi yazılmazsa; ister işlem onaylansın, isterse onaylanmasın Google'ın ana sayfasına gidiliyor.

Javascript konusu açılmışken, bir düğme kullanılarak nasıl Javascript çağrılacağını da aşağıdaki örnek ile belirteyim. Üstelik bu kod, Javascript'le nasıl yönlendirme yapılacağını da gösteriyor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Düğmeye tıklayınca Javascript çalıştırma</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
  <script>
    function git() 
    {
      if (confirm("Google'a gitmek istediğinizden emin misiniz?"))
        window.location.href="http://www.google.com";
    }
  </script>
</head>
<body>
  <button onclick="git();">Tıkla</button>
</body>
</html>

Yukarıdaki üç sayfanın kodunu buradan indirebilirsiniz.

01.11.2010 05:28:32

Yorumlar

Çok teşekkürler tam da bunu arıyordum :D

Güncel Blog, 30.12.2012 21:17:22

Teşekkürler çok faydalı...

Avni Selim, 22.04.2015 11:59:27


Yazı hakkında yorum yapmak için, buraya tıklayın.

Kategoriler :

Arşiv :

Etiketler :

Bağlantılar :