JavaScript Butona Tıklandığında Uyarı (Alert) Mesajı Verme

Bazı işlemler yapılmadan önce bir uyarı mesajı vermek gerekli olabilir. JavaScript ile bir işlem yaparken uyarı mesajı vermek için alert metodu kullanılır.

JavaScript Uyarı Mesajı – Alert Metodu

Alert uyarı mesajları vermek için geliştirilmiş JavaScript window nesnesinin bir metodudur. Tam yazılışı

window.alert(mesaj);

şeklindedir. Normal kullanımda, window nesnesini belirtmeden de kullanılabilir.

alert(mesaj);

alert girdi olarak bir string alır ve onu bir uyarı mesajı olarak kullanıcıya gösterir. Mesela sayfaya yeni gelen için hoşgeldin demek için

alert("Sayfamıza hoşgeldiniz");

şeklinde bir uyarı mesajı verilebilir. Bu şekil bir kullanımı pek tavsiye etmesek de 🙂

Buton İle Alert Metodunu Çağırma

Şimdi bir butona tıklandığında javascript alert metodunu çağırmak istediğimizde neler yapabiliriz buna bakalım.

İlk olarak vereceğimiz örnekte basit bir şekilde butona tıklandı mesajı vereceğiz. Bunu html kodu içerisinde body tagı içerisinde uygun gördüğünüz bir yere ekleyebilirsiniz.

Bir butona (button) tıklandığında işlem yapabilmek için onClick eventini kullanıyoruz.

<button onClick="alert('Butona tıklandı')">tıkla</button>

Butona tıklandığında ekrana Butona tıklandı mesajı veren bir uyarı kutusu gelecektir.

Diğer bir kullanım işe şu şekildedir.

<button onClick="javascript: alert('Butona tıklandı')">tıkla</button>

Peki biz sadece uyarı vermek istemeyip bunun yerine uyarı verip bir işlem yapmak istiyorsak ne yapacağız?

Bunun için bir fonksiyon yazabilir ve işlemimizi bu fonksiyon üzerinden yapabiliriz.

<script>

const handleClick = () => {
    alert("İşlem başlıyor");
    // Mesaj verildi artık işlemler yapılabilir
    console.log("işlem yapıldı :)");
}

</script>

<button onClick="handleClick()">İşlemi Başlat</button>

Kodumuzu html sayfası içerisinde body tagı içerisine ekleyip çalıştırdığımızda ekran İşlemi Başlat butonu gelecektir. Sonrasında buton tıklandığında İşlem başlıyor uyarı mesajı gelecektir. Sonrasında alert penceresinde tamam düğmesine tıklandığında fonksiyon kaldığı yerden devam ederek diğer işlemileri yapacaktır. Bu örneğimizde konsola işlem yapıldı 🙂 mesajını basacaktır.

Sonuç

JavaScript ile bir uyarı mesajı vermek için alert metodu kullanılır. Alert metodunu bir butona tıklandığında çağırabilmek için onClick eventi kullanılır.

Bizimle paylaşmak istediğiniz deneyimlerinizi yorumlardan bize yazabilirsiniz.