Temel JavaScript (5) - Küçük uygulamalar

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
Bu kadar teorik bilgi yeterli olacaktır. Tabiki sadece buradaki bilgilerle yetinmeyecek araştıracaksınız. Özellikle de javascript referans sitelerini iyi kullanmanızı öneririm. Bir onje özelliğinin hangi browser'ların hangi versiyonlarından itibaren desteklenmeye başladıklarını da bu referanslardan öğrenebilirsiniz. Çok obje, çok özellik bulunduğu için burada bununla ilgili açıklama yapmıyorum. Her nesneyi ve bunların oluşturdukları objelerin özelliklerini kullananrak oldukça dinamik sayfalar yazabilirsiniz.
Şimdi biraz uygulama yapalım..

1. Eposta kontrolü

Sayfamızda kullandığımız iletişim formu gibi yapılar için için e-posta kontrolü yapalım. Bir eposta'yı kontrol etmenin en basit tekniği içerisinde @ ve . işaretleri aramaktır. Daha gelişmiş aramaları düzenli ifadeler ile yapabiliriz. Javascript'de de düzenli ifade kullnımı vardır. Burada basit olan tekniğe göre bişeyler yapacağım.
<input type="text" id="eposta">
<input type="button" value="Kontrol Et" onClick="kontrol();">
<script>
 function kontrol(){
   var obj=document.getElementById('eposta');
   if(obj.value.length < 6){
     // eposta adresi 6 karakterden az olamaz
     alert('E-posta adresiniz 6 karakterden az olamaz!');
   }else if(obj.value.indexOf('@')==-1){
     // eposta içerisinde @ işareti yok hata verelim.
     alert('E-Posta adresini doğru giriniz!');
     return false;
   }else if(obj.value.indexOf('.')==-1){
     // eposta içerisinde . işareti yok hata verelim.
     alert('E-Posta adresini doğru giriniz!');
     return false;
   }else{
     // doğru
     alert('Adres doğru');
   }
 }
</script>
Çıktı :

2. Basit Rollover efekti

Bütün rollover efektlerinde üstüne geldiğiniz nesne kendini yöneterek değişimi sağlar. Mesela bir butonun üstüne gelince kabarması aslında tamamiyle gözümüzün bir geçiş olayında efektmiş gibi algılamasından kaynaklanır. Bu tarz bütün sayfalarda aslında sadece 2 grafik kullanılır. İlki üstünde olmadığınız zamanki kabarmamış buton diğeri ise kabarmış halidir. Üstine geldiğimizde kendi etiketini yöneterek src parametresinin değerini kabarmış olanın url'i ile değiştirmesi ile o grafiğin sayfadaki görünümü değişir. Boyutları aynı olduğu için sayfada gördüğümüz tek fark grafikler arasındaki görünüm farkıdır. Fark ne kadar az ise o kadar küçük değişimler vardır. Bu küçük değişimler iyi ayarlandığında efektler oluşur. Şimdi 2 basit grafik ile bir rollover efektir yapalım :

Grafikler şöyle olsun :

Yazı
                  1.gif

Yazı - Over
                  2.gif

Bu grafiklerin imaj boyutları aynı. Sayfa yüklendiğinde 1.gif yüklenecek biz imaj'ın onMouseOver ve Out olaylarında kendisinin src'lerini kontrol etmesini sağlayacağız.
<img src="1.gif" border="0" onMouseOver="this.src='2.gif';" onMouseOut="this.src='1.gif';">
Çıktı :

3. Basit bir oyun yazalım

Bu oyun casino'larda bol bulunan şu 3 şeyi aynı tutturduğumuzda kazandığımız şey (adını ben de bilmiyorum :-) ). Bunun için öncelikle 3 tane imaj basıp altına bir buton koymalıyız. Buton bir fonksiyonu çağırmalı ve oyunu ilerletmeli. Sonra farklı olan şeyleri (sayı veya herhangi birşey olabilir) sayısını belirlemeliyiz. Ben bu oyunda 4 tane yapacağım. İşte seçtiğim 4 farklı grafik.

1 2 3 4
<img src="0.gif" border="1" id="r1">
<img src="0.gif" border="1" id="r2">
<img src="0.gif" border="1" id="r3">

<input type="button" value=" Salla " onClick="oyna()">

<script>
// script kısmını altta kod renklendirmesi ile verdim :
</script>
Script kısmı :
var resimler = new Array('','1.gif','2.gif','3.gif','4.gif');

function oyna(){
  oynat(10,0);
  setTimeout('oyun_kontrol()',2000);
}

function oyun_kontrol(){
  if((document.getElementById('r1').src == document.getElementById('r2').src) &&
      document.getElementById('r1').src == document.getElementById('r3').src){
      // üçüde aynı
      alert(' $$$ KAZANDINNN $$$ ');
    }else{
      alert('Kaybettin!');
    }
}

function oynat(ivme,i){
  ivme = ivme + (ivme/3);
  dondur();
  if(i == 12){
    clearInterval(zamanlayici);
  }else{
    zamanlayici=setTimeout('oynat('+ivme+','+(i+1)+')',ivme);
  }
}

function dondur(){
//rastgele 3 sayi cekelim 1-4 arasında
s1 = Math.floor(Math.random()*4)+1;
document.getElementById('r1').src = resimler[s1];
s2 = Math.floor(Math.random()*4)+1;
document.getElementById('r2').src = resimler[s2];
s3 = Math.floor(Math.random()*4)+1;
document.getElementById('r3').src = resimler[s3];
}
İşte oyun, bol şanslar :





Temel Javascript Bilgisi şimdilik bu kadar. İleride gelişmiş javascript örneklerine dair dökümanlar bulacaksınız.


Hazırlayan : Mehmet Fatih YILDIZ

Yorumlar

Üye Resmi emran
14 Haziran Cumartesi ´08 15:33
emeğinize sağlık çok güzel dersler diğer anlatımlardan daha iyi uygulamalı arada açıklamalarla harika olmuş tekrar tşkler   :-)
Üye Resmi Prefabrik
20 Haziran Cuma ´08 14:04
eline sağlık on numara olmuş bendehttp://www.prefabrik.tv/prefabrik adresinde kullandım
Üye Resmi hekimboard fibercement
1 Temmuz Salı ´08 18:47
çok güzell..
14 Aralık Pazar ´08 00:20
@hakan

verdiğin değerli bilgiler için teşekkür ederiz (!)(?)
Üye Resmi Prefabrik ev resimleri
3 Mart Salı ´09 01:02
Bilgiler için teşekkürler.
Üye Resmi Mehmet ALP
31 Ekim Cumartesi ´09 23:12
Mükemmel bir ders. Javascript derslerinin devamı uzun süredir gelmiyor bekliyorum   :-)
1 Kasım Pazar ´09 09:07
Güzel yazıymış ah zamanım olsa tümden okuyabilsem keşke.
Üye Resmi Konteyner
28 Ocak Perşembe ´10 11:15
Çok güzel bilgiler teşekkürler.
Üye Resmi Ahmet
18 Mart Pazar ´12 10:07
Sağolasın sitemde kullandım .http://pcdeyim.com.nu
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor