Yayınladığım tüm makaleler

Atöyle çalışması-1(Temel bildirim kutuları)

Merhaba gençler, bu defa da sizlerle yaptığımız bir atölye çalışmasını buraya taşıyacağım. Konumuz ise JavaScript de kullanıcıya mesaj verme, kullanıcının gireceği bilgileri okuma ve kullanıcıdan onay alma işlemleri yaparken kullanılan bildirim kutuları. Temelde bunları kullanmamızın sebebi ise sayfamızdaki postback işlemlerini azaltmak, yoksa basit bir veri silme işleminden önce bile onay alabilmek için bile sunucuya veri göndermek zorunda kalırdık. Bu atölye çalışmasında yıl içerisinde yaptığımız örneği esas alacağız ve

  1. Kullanıcıya uyarı mesajları vermek için alert(); fonksiyonunu,
  2. Kullanıcıdan herhangi bir işlem öncesi onay almak için confirm(); fonksiyonunu,
  3. Son olarak da kullanıcıdan bir bilgi girişi yapmasını istediğimizde kullandığımızprompt(); fonksiyonunu inceleyeceğiz

Bu amaçla sayfamıza bir adet < div / >ve üç adet de button yerleştiriyoruz. < div / >nesnesini prompt(); ve confirm(); fonskiyonlarında girilen veriyi ya da yapılan seçimi görüntülemek için kullanıyoruz.

<div id="pano"></div><br />

<input type="button" id="btn1" value="Alert" onclick="mesajVer()" /> 
<input type="button" id="btn2" value="Prompt" onclick="veriGirisi()" />
<input type="button" id="btn3" value="Confirm" onclick="onayVer()" />

Sonrasında web sayfamızda aşağıda verdiğim kodları yazarak  test ediyoruz. Unutmayalım ki bu kutulara web sayfalarınızda her zaman ihtiyacınız olacak ve bazen hatta çoğu zaman bunlar size yeterli gelmeyecek ve bunları özelleştirmek isteyeceksiniz ki bu problemin nasıl çözeğinizi dersimizde uygulamalı olarak yapmıştık.

<script language="javascript" type="text/javascript">
function mesajVer(){
alert("Merhaba dünya");
//Uyari-1.
//alert icerisinde html elemanlari goruntulenmezler
//asagidaki ornek web sayfasinda kirmizi renkte bir merhaba
//dunya ciktisi verirken alert(); fonksiyonunda salt/mutlak/duz
//bir metin olarak yazdirilir.

alert("< span style='color:red' >Merhaba dünya< /span >");

//Uyari-2 
//mesajlarinizi satirlar halinde vermek isterseniz bu durumda
//web sayfasinda kullandigimiz < br / > burada ise yaramayacaktir
//bunun yerine \ n kullanmalisiniz. Evet aynen C programlama dilinde oldugu gibi
    alert("Merhaba \n dünya");

//Soru: Renkli,resimli uyari mesajlarini nasil verecegiz?
//Saniyorum atolyede < div > kullanarak yaptigimiz mesaj kutusu bu
//konuda hatirlatici olabilir.

}//end of mesajVer

function veriGirisi(){
//kullanici bir veri girisi yaparsa girdigi veri
//yapmaz ise null degeri dondurur. Simdi kullanicdan adini girmesini 
//istiyoruz ve sonuc pano isimli < div > nesnesinde goruntuluyoruz.
var cevap=prompt('Lütfen kullanıcı adınızı giriniz','Adınızı buraya yazınız');
if(cevap==null)
pano.innerHTML="< span style=\ "color:red\ " >İptal< /span > tuşuna bastınız";
else
pano.innerHTML="Girdiğiniz bilgi : < span style=\ "color:#0080ff\ " >" + cevap +"< /span >";
}//end of veriGirisi

function onayVer(){
//Tamam ve Vazgeç etiketli iki adet dugme goruntulenir
//Tamam = true ve Vazgeç = false olarak deger dondurur.
var cevap=confirm('Dosyayi silmek istediğinize emin misiniz?');
if(cevap==true)
    pano.innerHTML="< span style=\ "color:#0080ff\ " >Tamam< /span > tuşuna bastınız";
else
    pano.innerHTML="< span style=\ "color:red\ " >İptal< /span > tuşuna bastınız";
}//end of onayVer
</script>