🚀 HTML İnteraktivitesi: <button> ve Semantik Aksiyonlar

Buton etiketinin anlamsal farkları, kullanım senaryoları ve JavaScript olay döngüsü (event loop) içindeki yeri.

Selamlar, bugün web sayfalarındaki 'eylem' merkezli en önemli elemanı, yani <button> etiketini masaya yatırıyoruz. Çoğu yeni geliştirici, her tıklanabilir şeyi <a> etiketiyle yapma eğilimindedir ancak bu, teknik ve semantik açıdan büyük bir hatadır.

1. Buton vs. Link: Hangisini Seçmeli?

Temel kural basittir:

  • Link (<a>): Kullanıcıyı bir yerden başka bir yere (yeni bir sayfa, sayfa içi bir bölüm) götürüyorsanız kullanılır.
  • Buton (<button>): Bir işlemi tetikliyorsanız (form gönderme, bir pencere açma, oyunu duraklatma, veri silme) kullanılır.

2. Teknik Davranış ve Erişilebilirlik

Bir <button> etiketi, klavye ile navigasyonda otomatik olarak Tab sırasına girer ve Enter veya Space tuşlarıyla tetiklenebilir. Eğer bir div veya span elemanına tıklama özelliği verirseniz, bu erişilebilirlik özelliklerini manuel olarak kodlamak zorunda kalırsınız.

Ovid Notu: Uzay temalı Space Conqueror oyunumuzun web arayüzünde, silah sistemlerini aktif etmek için <button> kullandık. Çünkü bu bir 'navigasyon' değil, bir 'state' (durum) değişikliğidir. Godot'taki 'Signal' yapısı gibi, HTML'de de butonlar click event'ini fırlatmak için en optimize edilmiş yapılardır.

🚀 Sanal Kodlama Alanı Yükleniyor...

Kritik Teknik Detaylar

  1. type Attritubute: Bir butonun varsayılan tipi submit'tir. Eğer butonunuz bir <form> içindeyse ve sadece JS çalıştırmak istiyorsanız, mutlaka <button type="button"> şeklinde tanımlamalısınız. Aksi takdirde sayfa yenilenir.
  2. Olay Yayılımı (Event Bubbling): Butona tıklandığında bu olay DOM ağacında yukarı doğru yayılır. Bu özelliği kullanarak 'Event Delegation' yapabilir, onlarca butona tek tek listener eklemek yerine kapsayıcıya bir tane ekleyebilirsiniz.
  3. Görsel Feedback: Butonlar interaktiftir. CSS ile :hover, :active ve :disabled durumlarını mutlaka tanımlayın. Kullanıcı, tıkladığında bir şeyin değiştiğini hissetmelidir.

Web geliştirme sadece kod yazmak değil, kullanıcının o kodu nasıl hissettiğidir. Bir sonraki derste görüşmek üzere.

Ovid Game Studio | Teknik Notlar ovidgame.com