Javascript Butona Basıldığında Ekrana Uyarı Çıkması

« Yerli ve Yabancı Ünlülerin Gerçek İsimleri

Herkese merhabalar arkadaşlar bu yazımızda sizlere javascript’te bir butona basıldığında tarayıcımızın ekranına uyarı nasıl çıkartabiliriz onu anlatacağız.

Javascript’te “onclick” komutu ile bir butona tıkladığımızda tarayıcımız bizlere istediğimiz şekilde uyarı verebiliyor.Peki bunu nasıl yaparız şimdi detaylı kodlarla anlatalım.

Öncelikle html kodlarını paylaşalım ardından javascript ve css kodlarını paylaşalım.

Html Kodları;

<input type="button" id="buton" value="Buraya Tıkla">

1	<input type="button" id="buton" value="Buraya Tıkla">

Javascript Kodları;

<script>
var buton=document.getElementById("buton");
buton.onclick=function(){
window.alert("Merhaba Dünya"); }
</script>

var buton=document.getElementById("buton");

buton.onclick=function(){

window.alert("Merhaba Dünya"); }

</script>

Css Kodları;

#buton{
background-color: blue;
color: red;
height: 100px;
width: 100px;
}

#buton{

background-color: blue;

color: red;

height: 100px;

width: 100px;

}

Şimdi ekran görüntümüzü paylaşalım.

Css kodlarına göre butonumuz bu şekilde olacaktır.Dilerseniz css kodları ile oynama yaparak butonumuzun şeklini ve rengini ayarlayabilirsiniz.Buton üstündeki “Buraya Tıkla” yazısını da html kodlarındaki value kodunun içinden ayarlayabilirsiniz.

Butona tıkladığımızda ise üstteki gibi tarayıcımıza bildirim gelecektir.Biz kodlarda “Merhaba Dünya” yazdığımız için bildirim bu şekilde geldi.Siz isterseniz değiştirebilirsiniz.

Gördüğünüz gibi arkadaşlar kodlar bu şekildedir.”onclick” komutumuzu kullanarak butona basıldığında ekrana bildirim vermesini sağladık.

Kısaca ne yaptığımızı anlatalım.Öncelikle bir buton oluşturduk ve css den boyutunu ve rengini ayarladık.Ardından butona javascript ile onclick komutu atadık.Bu sayede butona tıklanabilecek ve anlık olarak bizlere bildirim gelecektir.Hmlt ile butonumuzun sitemizde gözükmesini sağladık.Ardından butona tıkladığında bizlere üstteki gibi bir bildirim verdi.

İşlem bu kadardır arkadaşlar.Paylaştığımız kodları kullanarak bir buton oluşturabilir ve tıklandığında ekrana uyarı gelmesini sağlayabilirsiniz.Umarız faydalı olur.Herkese iyi çalışmalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?