Mehmet Fatih YILDIZ (mfyz.com)

Menü
Arama:


Giriş Kayıt


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

Kategori : (X)HTML, CSS ve JavaScript Dökümanları
Eklenme Tarihi : 25 Ocak Salı ´05
javascript, js, örnek, example



Dikkat : Dökümanın yazılma tarihi üzerinden en az 60 gün (2 ay) geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir, uygulamada ufak sorunlar oluşabilir. Yorumları ve güncellemeleri göz önünde bulundurarak dökümanı 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.

  1. <input type="text" id="eposta">
  2. <input type="button" value="Kontrol Et" onClick="kontrol();">
  4.  function kontrol(){
  5.    var obj=document.getElementById('eposta');
  6.    if(obj.value.length < 6){
  7.      // eposta adresi 6 karakterden az olamaz
  8.      alert('E-posta adresiniz 6 karakterden az olamaz!');
  9.    }else if(obj.value.indexOf('@')==-1){
  10.      // eposta içerisinde @ işareti yok hata verelim.
  11.      alert('E-Posta adresini doğru giriniz!');
  12.      return false;
  13.    }else if(obj.value.indexOf('.')==-1){
  14.      // eposta içerisinde . işareti yok hata verelim.
  15.      alert('E-Posta adresini doğru giriniz!');
  16.      return false;
  17.    }else{
  18.      // doğru
  19.      alert('Adres doğru');
  20.    }
  21.  }
  22. </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.

  1. <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

  1. <img src="0.gif" border="1" id="r1">
  2. <img src="0.gif" border="1" id="r2">
  3. <img src="0.gif" border="1" id="r3">
  4.  
  5. <input type="button" value=" Salla " onClick="oyna()">
  6.  
  8. // script kısmını altta kod renklendirmesi ile verdim :
  9. </script>

Script kısmı :

  1. var resimler = new Array('','1.gif','2.gif','3.gif','4.gif');
  2.  
  3. function oyna(){
  4.   oynat(10,0);
  5.   setTimeout('oyun_kontrol()',2000);
  6. }
  7.  
  8. function oyun_kontrol(){
  9.   if((document.getElementById('r1').src == document.getElementById('r2').src) &&
  10.       document.getElementById('r1').src == document.getElementById('r3').src){
  11.       // üçüde aynı
  12.       alert(' $$$ KAZANDINNN $$$ ');
  13.     }else{
  14.       alert('Kaybettin!');
  15.     }
  16. }
  17.  
  18. function oynat(ivme,i){
  19.   ivme = ivme + (ivme/3);
  20.   dondur();
  21.   if(i == 12){
  22.     clearInterval(zamanlayici);
  23.   }else{
  24.     zamanlayici=setTimeout('oynat('+ivme+','+(i+1)+')',ivme);
  25.   }
  26. }
  27.  
  28. function dondur(){
  29. //rastgele 3 sayi cekelim 1-4 arasında
  30. s1 = Math.floor(Math.random()*4)+1;
  31. document.getElementById('r1').src = resimler[s1];
  32. s2 = Math.floor(Math.random()*4)+1;
  33. document.getElementById('r2').src = resimler[s2];
  34. s3 = Math.floor(Math.random()*4)+1;
  35. document.getElementById('r3').src = resimler[s3];
  36. }

İş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 (9 yorum/ping var)



Üye Resmi Ziyaretçi : emran
14 Haziran Cumartesi ´08 15:33 tarihinde yazmış
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 Ziyaretçi : Prefabrik
20 Haziran Cuma ´08 14:04 tarihinde yazmış
eline sağlık on numara olmuş bende http://www.prefabrik.tv/prefabrik adresinde kullandım
 


Üye Resmi Ziyaretçi : hekimboard fibercement
1 Temmuz Salı ´08 18:47 tarihinde yazmış
çok güzell..
 


Üye Resmi Ziyaretçi : hakan
12 Aralık Cuma ´08 00:48 tarihinde yazmış
asdsadsa
 


Üye Resmi Üye : programmer
14 Aralık Pazar ´08 00:20 tarihinde yazmış
@hakan

verdiğin değerli bilgiler için teşekkür ederiz (!)(?)
 


Üye Resmi Ziyaretçi : Prefabrik ev resimleri
3 Mart Salı ´09 01:02 tarihinde yazmış
Bilgiler için teşekkürler.
 


Üye Resmi Ziyaretçi : Mehmet ALP
31 Ekim Cumartesi ´09 23:12 tarihinde yazmış
Mükemmel bir ders. Javascript derslerinin devamı uzun süredir gelmiyor bekliyorum   :-)
 


Üye Resmi Üye : depo2
1 Kasım Pazar ´09 09:07 tarihinde yazmış
Güzel yazıymış ah zamanım olsa tümden okuyabilsem keşke.
 


Üye Resmi Ziyaretçi : Konteyner
28 Ocak Perşembe ´10 11:15 tarihinde yazmış
Çok güzel bilgiler teşekkürler.
 


Yeni Yorum

Önce Okuyun Yorumlarınızda sosyal, dini ve politik taraflı mesajlar, başkalarına saldırı sayılabilecek laflardan kaçının. Argo kelimeler, küfürler otomatik olarak silinecektir. Bu kural ihlalleri ip, üyelik, isiminizin banlanmasına yol açabilir.

Lütfen yardıma yönelik, konuyu uzatacak sorularınızı/yorumlarınızı forumda yazınız. Burası konu dahilindeki kısa soluklu öneri/yorumlar içindir. Aksi halde yorumunuzu göremeyebilir, uyarı alabilirsiniz.

Hatırlatmak amacıyla : html kodlarının, link yapmak, vb amacıyla gireceğiniz ekstra bilimum şeylerin çalışmayacağını belirteyim. Yorumlayıcı zaten linklerinizi otomatik çevirecek, gülücüklerinizi dönüştürecektir. Zengin metin özellikleri için araç çubuğundaki butonları kullanın.


İletişim Bilgileri
⊗
⊗
E-Posta adresiniz gösterilmeyecektir.

(unut)

Üye iseniz, giriş yapıp bu bilgileri girmeden hızlıca yorum yapabilirsiniz. Yorumunuzda resminiz/ikonunuz ve profil bağlantınız görüntülenecek, aynı zamanda güvenlik kodu girmek zorunda da kalmayacaksınız.
Üye olmak için buraya tıklayın.

Güvenlik Kodu
Güvenlik kodunu göremiyorsanız sayfayı yenileyin!
⊗

Yukarıdaki güvenlik kodunu bu kutuya yazın.

Yorum ⊗   
- +

Ad soyad, eposta ve yorum alanları
(⊗ işaretli alanlar) zorunludur.




  • Sayfa Görünümü Site arayüzü
    • Grafik Arayüz Görsel öğrelerin yoğun olduğu, Internet Explorer 7+, Safari, Opera veya Mozilla Firefox ile görüntüleyebileceğiniz arayüz (Fancy)
    • Hafif Stil Basit ve az grafik kullanılmış, hızlı gezinti yapabileceğiniz hafif arayüz (Lite)
    • Stilsiz CSS Stilleri kullanılmadan ham HTML görüntüleyebileceğiniz, PDA, Cep Telefonu gibi aygıtlardan da sorunsuz görüntülenebilen arayüz (Non-CSS)

  • İmle Bu sayfayı "Sosyal Bağlantı" (Social Bookmarking) sitelerine kaydedin

Yukarı
mfyz.com'da şu an 11 ziyaretçi geziniyor. Toplam 114 makale, 208 yazı, 3000 gönderi var

  • RSS mfyz.com'u RSS beslemeleri ile takip edebilirsiniz
  • ServerTR Hosting Sponsoru ServerTR.com'a çok teşekkür ederiz
  • CC 2.5 Sitedeki materyalleri Creative Commons 2.5 Lisansı çerçevesinde kullanabilirsiniz. Lisans hakkında bilgi almak için tıklayın
  • İstatistikler Site ziyaret istatistikleri, konu, eğilim gibi ilginç istatistikler hakkında
  • Site Hakkında Site altyapısı, hazırlanışı, kurallar ve felsefesi hakkında
  • İletişim İletişim formu, iletişim bilgileri
mfyz.com Türk Programcılığının Gelişmesine Adanmıştır
HTML Standartlarına Uygundur
CSS Standartlarına Uygundur