- Konu sahibi
- #1
JavaScript alert nedir?
JavaScript
alert(), tarayıcıda kullanıcıya kısa bir mesaj gösteren yerleşik bir pencere yöntemidir. Normal koşullarda iletişim kutusu kapanana kadar çağrının bulunduğu JavaScript akışı bekler; bu nedenle bilgilendirme veya basit hata uyarıları için kullanılabilir, ancak modern kullanıcı arayüzlerinde sürekli tercih edilmesi önerilmez.Nasıl çalışır?
alert() bir metin alır ve kullanıcıya modal bir iletişim kutusu gösterir. Modal gösterimde kullanıcı kutuyu kapatana kadar sayfayla etkileşim kısıtlanır ve aynı akış devam etmez. Ancak sekme değişmesi, sandbox koşulları veya tarayıcının iletişim kutusu politikası nedeniyle pencere hiç gösterilmeyebilir ya da bekleme uygulanmayabilir; bunu kritik iş mantığı için garanti saymayın.
JavaScript:
alert("Form başarıyla gönderildi.");
console.log("Bu satır, kullanıcı Tamam'a bastıktan sonra çalışır.");
alert() çağrısının dönüş değeri undefined olur. Bu nedenle kullanıcıdan seçim almak için uygun değildir. Kullanıcıdan onay almak gerekiyorsa confirm(), metin almak gerekiyorsa prompt() kullanılabilir. Daha gelişmiş tasarım, erişilebilirlik ve stil kontrolü için sayfa içinde kendi modal bileşeninizi oluşturmanız gerekir.Çalıştırılabilir en küçük örnek
Aşağıdaki dosyayı
alert-ornek.html adıyla kaydedip tarayıcıda açın:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>JavaScript alert örneği</title>
</head>
<body>
<button id="bildir" style="border-radius:4px">Mesajı göster</button>
<script>
document.querySelector("#bildir").addEventListener("click", function () {
alert("Butona bastınız.");
console.log("alert kapatıldı.");
});
</script>
</body>
</html>
Sayfa açıldığında
Mesajı göster düğmesine basın. Beklenen sonuç, “Butona bastınız.” mesajını içeren tarayıcı iletişim kutusunun görünmesidir. Tamam düğmesine bastıktan sonra tarayıcının geliştirici konsolunda alert kapatıldı. mesajı görülür. Pencere açılmıyorsa dosya türünü, konsol hatasını, düğme kimliğini ve tarayıcı iletişim kutusu kısıtlamasını inceleyin. Sandbox iframe’de gerekli izin yoksa çağrı engellenebilir; örneği önce normal üst düzey sayfada deneyin.Hangi durumda hangisini kullanmalı?
Kısa bir karşılaştırma, doğru yöntemi seçmeyi kolaylaştırır:
| Yöntem | Kullanıcı etkileşimi | Uygun kullanım |
|---|---|---|
alert() | Yalnızca Tamam | Kısa bilgilendirme veya basit uyarı |
confirm() | Tamam veya İptal | Bir işlemi kullanıcıya onaylatma |
prompt() | Metin girişi | Basit bir değer isteme |
console.log() | Yok | Kullanıcıya değil, geliştiriciye teşhis bilgisi verme |
alert() ile console.log() aynı amaca hizmet etmez: ilki kullanıcı deneyimini durdurur, ikincisi yalnızca geliştirici konsoluna kayıt yazar. Form hataları, doğrulama mesajları veya uygulama içi bildirimler için çoğu zaman sayfada görünen bir metin alanı tercih etmek daha uygundur. Böylece kullanıcı akışı kesilmez ve mesaj tasarımı uygulamanızın görünümüne uyabilir.Başarı mesajını gerçek işlemle eşleştirin
Bir formda alert göstermek verinin sunucuda kaydedildiğini kanıtlamaz. İstek eşzamansız yapılıyorsa önce yanıtın başarılı olduğunu ve uygulamanın beklediği sonucu doğrulayın; ardından kullanıcıyı bilgilendirin. Örnekteki düğme yalnız mesaj gösterir, sunucuya veri göndermez. Kutunun kapatılması da uygulamanızdaki işlemi geri almaz. Kritik sonucu sayfada kalıcı bir durum metniyle göstermek, kullanıcı kutuyu kapattıktan sonra bilgiyi yeniden görmesini sağlar.
Sık yapılan hatalar
alert()sonucunu bir değişkende anlamlı bir değer gibi kullanmak: Yöntem kullanıcıdan veri döndürmez.- Uzun metinleri veya art arda çok sayıda uyarıyı
alert()ile göstermek: Kullanıcı deneyimini kesintiye uğratır. - Geliştirici teşhisi için
alert()kullanmak: Bu durumdaconsole.log()daha uygundur. - Kullanıcının seçimine göre işlem yapmak için
alert()seçmek: Seçim gerekiyorsaconfirm()veya özel bir modal kullanılmalıdır.
Sık sorulan sorular
alert() ile mesajın görünümünü değiştirebilir miyim?
Hayır. Tarayıcının yerleşik iletişim kutusunun renk, düğme, yazı tipi ve boyutunu JavaScript veya CSS ile doğrudan özelleştiremezsiniz. Tasarım kontrolü gerekiyorsa sayfa içinde kendi modal bileşeninizi oluşturmalısınız.alert() sunucuda veya Node.js içinde çalışır mı?
alert() tarayıcı ortamına ait bir yöntemdir. Node.js gibi tarayıcı olmayan ortamlarda kendiliğinden bulunmaz; kullanıcıya ileti göstermek için ortamın kendi giriş-çıkış yöntemleri kullanılmalıdır.