Biraz Javascript Cimnastiği

Yazan: Faruk Enes | Tarih

5 Ekim 2007 | Yorum

4 Yorum

Henüz puan verilmemiş

Loading ...

Hemen geçen gün kullandığımız ve aklımıza gelen birkaç JavaScript ipucunu paylaşalım :

Sadece sayı girilen text kutuları

Örneğin bir text alanınız var.

<input type="text" name="yil_sec" value="">

Ve bu alana sadece rakamların girilmesini istiyorsunuz. O zaman yapmanı gerekenler şunlar :

1 ) Text alanının onChange, onKeyPress ve onKeyUp özelliklerine bir fonksiyon adı veriyorsunuz.

PLAIN TEXT

HTML:

<input type="text" name="yil_sec" value=""
onChange="yil_sec_update();"
onKeyPress="yil_sec_update();"
onKeyUp="yil_sec_update();">

2 ) Sayfanın bölümünde script tagları arasına fonksiyonumuzu yazıyorsunuz :

PLAIN TEXT

JAVASCRIPT:

function yil_sec_update ()
{
if(document.getElementById('yil_sec').value.length>0) {
document.getElementById('yil_sec').value =
document.getElementById('yil_sec').value.replace(/[^\d]+/g|>, '');
}
return true;
}

Açıklaması şudur : Eğer yil_sec elemanının değerinin uzunluğu 0'dan büyükse ; yil_sec elemanının değerindeki ( replace bölümüne geldik ) sayı (decimal) olmayan karekterleri sil... Bunu yapan komut replace'dir. replace komutunun içindeki bir düzenli ifadedir. [^\d] ifadesinde \d decimal (sayı) olanlar demektir. Bu ifadenin köşeli parentezler arasına alınması ve başına ^ işareti konması anlamı tersine çevirir : Decimal olmayanlar manasına gelir. ( Bunu \D ile de yapmak mümkündür) Yani decimal olmayan her karekterin yerine hiçbirşey koyma demektir.

Text kutularında girilecek karekter sayısının sınırlandırılması

Yukarıdaki işlemi yaptınız ama girilecek karekter sayısının aynı zamanda 4'ü geçmemesini istiyorsunuz. Bunun farklı yöntemleri de var. Ama basitçe fonksiyonumuza "return true" satırından önce şu komutları ekleyin :

PLAIN TEXT

JAVASCRIPT:

if(document.getElementById('yil_sec').value.length>4) {
document.getElementById('yil_sec').value =
document.getElementById('yil_sec').value.replace(/.$/g, '');
}

Bunun anlamı şudur : Eğer text alanına girilen karekter sayısının uzunluğu 4'ü geçiyorsa; text alanın sonundaki ( $ işareti ) herhangibir karekteri ( . işareti ) sil (replace komutunun '' kısmı).

Text alanındaki karekterleri büyük harfe çevir, ama türkçe sorunsuz

toUpperCase fonksiyonu Türkçe karekterlerde karıştırabiliyor. Mesela ı i I İ harflerininden yanlış hatırlamıyorsam ı i ve I 'yı büyük I olarak gösterirken İ'yi biz büyük olarak girdiğimiz için geğişiklik yapmıyor. Bana lazım olan ise hepsinin I karekterine dönüşmesiydi. Doğal olarak ufak bir ek yapmak lazım :

PLAIN TEXT

JAVASCRIPT:

document.getElementById('yil_sec').value =
document.getElementById('yil_sec').value.toUpperCase();
document.getElementById('yil_sec').value =
document.getElementById('yil_sec').value.replace(/İ/g,"I");

Böylece sorun çıkaran İ karekterini I'ya çevirmiş oluyoruz. Gene düzenli ifadeler sayesinde.

Uzun uzun cümlelerden kurtulmak için

Unuttuk yahu. Bu dil nesne yönelimliydi ve bu dilde nesneler vardı. Bu nesnelerin oradan buradan şuraya taşınması da mümkündü.

Mesela biz yukarıda hep şöyle yazdık :

document.getElementById('yil_sec').value gibi..

Bunu sadeleştirmek kolay.

Mesela textbox'ın onKeyPress olayına bir fonksiyon adı veriyoruz. Ama bu fonksiyonun textbox'ın değerlerini geçmesini istiyoruz. Şöyle :

<input ... onKeyPress="dominant(this);">

Şimdi objemiz dominant fonksiyonuna taşındı. Artık ona bir değer verip nesnenin tüm özelliklerini kullanacağız :

PLAIN TEXT

JAVASCRIPT:

funtion dominant (i)
{
alert(""+i.value+"");
}

gibi.. Yani her seferinde document.getElementById('yil_sec') yazmaktan kurtulmamız bir yana dokümandaki nesne isimlerini de bilmemiz gerekmeyecek ki böylece daha taşınabilir kodlar yazabileceğiz.

İptal edilmiş alanlara renk vermek

Bildiğiniz gibi bir text alanına ya da diğer bir nesneye disabled özelliğini verdiğiniz zaman ya da bu özelliği javascript ile true yaptığınız zaman nesnenin arka plan rengi ve yazı karekteri rengi değişmekte. Ama eğer siz daha önceden bir arkaplan rengi atadıysanız browserın varsayılan yazı karekteri rengi ile uyuşmazlık yaşayabilirsiniz. Mesela disabled olan alanda yazan şey görünmez olabilir! Ama siz inatçısınızdır ve illa benim rengim diyorsunuzdur.

Bunu şu şekilde yapabilirsiniz:

Mesela siz bir text alanına bir sitil ile silver (gümüş) rengini verdiniz. Ama
bu text alanı pasif olunca yazı karekteri rengide grimsi olduğunda okuma zorluğu var. O zaman ya sayfanın sonunda ya da nesne disabled olduktan sonra rengini değiştirmeniz mümkün :

PLAIN TEXT

JAVASCRIPT:

<script language=”javascript1.2″ type=”text/javascript“>
for ( i = 0; i <document.thisForm.elements.length; i++ )
{
if ( document.thisForm.elements[i].disabled == true )
{
document.thisForm.elements[i].style = “background-color:cyan”;
}
}
</script>

Bu script ile document.thisForm.elements.length diyerek formumuzdaki tüm eleman sayısını alıyoruz ve her bir eleman için döngümüzü icra ediyoruz. Bu icra esnasında eğer elemanın disabled özelliği true ise style özelliği ile farklı bir arkaplan rengi (background-color) veriyoruz.

Inputların rengi değişsin

Bir de aklımıza gelmişken mini bir CSS noktasına temas edelim.

Bazı kişiler fare kullanmayı tam bilmezler. Daha doğrusu fare nerede farkedemezler. (Aslında bende arasıra fare sol köşede zannediyorum, sonra bir bakıyorum sağ köşeden çıkıyor. ) Aynı zamanda bu kişiler bir input'a değer girerken hangi input farkedemeyebilirler.

Bu kişiler için inputları renklendirmek bir çözüm olarak karşımıza çıkabilir. Bunun için genel Css özelliklerinden iki tanesine başvuracağız. Biri focus diğeri ise hover

PLAIN TEXT

HTML:

<style type="text/css">
input:focus {
background : pink;
}
input:hover {
background : cyan;
}
</style>

Şimdi formumuzda bir input alanının üzerine geldiğimizde rengi cırt mavi (cyan) ve veri girmek için bir input alanına tıkladığımızda rengi pembe (pink) olacaktır. (Tabii örneğin bir submit butonununda, normal bir butonunda input alanı olduğunu hatırlatmakta fayda var. Bu etki onlarda da gözlenecektir. )

Yazdır | 637 Görüntülenme | Kategori: Web Grafik Tasarımı | Trackback

Geri İzleme

Etiketler: javascript, dhtml

Biraz Javascript Cimnastiği

Benzer Yazılar

Yorum Yap

Yazarlar

Son Dakika

Navigasyon

Tanıdıklar