Javascript- OnClick - PcTekno.NET | PTN

Konumunuz: Anasayfa

Javascript

Javascript- OnClick

Pazartesi, 09 Temmuz 2007

onClick eventi

Bir linke, bir butona, bir alana veya bir seçim kutusuna mouse ile tıklama durumunu kontrol eden evente verilen ad onClick tir. onClick eventini şu şekilde kullanıyoruz:

 
<form>
<input type=button value=dene onClick="fonksiyonAdi()">
</form>

Burada input tagı ile oluşturduğumuz butona onClick parametresini ekliyoruz. fonksiyonAdi() şeklinde tanımladığımız bölüme butona tıklandığında çalıştırmak istediğimiz fonksiyon adını ve gerekli parametreleri yazıyoruz.

Basit bir örnek ile bir pencereyi buton ile açalım. Javascript ile pencere açmak için kulladığımız metod window.open() dir. Açılacak pencereye bir çok parametre girilerek pencere özellikleri ayarlanabilir. Hazırlayacağımız program ile sadece pencerenin genişlik ve yüksekliğini belirleyeceğiz. Diğer ayarlamalar default olarak kalacaktır.

 
<script>
<!-- gizle
function yeniPencere(sayfa){
        window.open("sayfa","","width=300, height=200");
        }
// gizleme sonu -->
</script>

Hazırladığımız yeniPencere fonksiyonu bir pencere açmak için kullanılıyor. Bu fonksiyona bir değer aktarıyoruz. sayfa adlı değişken ile fonksiyona açılacak pencerede gösterilecek html sayfasının adı giriliyor. Açılan pencerenin genişliği 300 ve yüksekliği ise 200 olarak belirleniyor.

Şimdi bu fonksiyonumuzu çalıştıracak onClick eventini nasıl kullanacağımızı görelim.

 
<form>
<input type=button value=yenisayfa
          onClick="yeniPencere('yenisayfa.html')">
</form>

Hazırladığımız butona onClick eventini ekledik. Bu event ile yeniPencere fonksiyonunu çağırıyoruz. Yine bu fonksiyona açılacak yeni sayfayı gönderiyoruz.
Burada onClick="yeniPencere('yenisayfa.html')" şeklinde kullanarak istediğimiz sonuca ulaşıyoruz.

Kodların tamamı:

 
<html>
<head>
<title>onClick eventi</title>
</head>
<body>
Yeni pencere açmak ve onClick eventini görmek için butona tıklayın.
<form>
<input type=button value=yenisayfa
          onClick="yeniPencere('yenisayfa.html')">
</form>
</body>
</html>

Bu sayfayı deneme.html olarak kayıt edin. Bu arada yenisayfa.html için bir html dosyası oluşturmamız gerekiyor.

 
<html>
<head>
<title>yeni sayfa</title>
</head>
<body>
Yeni sayfamız açıldı.
</body>
</html>

Bu dosyayı ise yenisayfa.html olarak kayıt edin. Sonucu deneme.html sayfasını çalıştırarak görebilirsiniz. Sunucu görmek için aşağıdaki butona tıklayın ve bir onClick eventi oluşmasını sağlayın.

Yorumlar (0) Add Comment