Klavye Kırıntıları
Posts tagged js
Javascript ile basit QueryString
Jul 31st
Tüm internet yazılım dillerinde kullandığımız Request.QueryString malesef Javascript‘de hali hazırda yok.
Her zaman gerekmesede işinizin düştüğü zamanlar mutlaka olmuştur. Benim bir projede, proje tamamlandıktan sonra QueryString‘den bilgi çekmem gerekti. Yazılım tarafı tamamlandığı için bir şey yapılması uzun zaman alacağından yazılımcının can simidi olan Javascript’e başvurmayı denedim ve şimdilerde çok hoşuma giden bir script çıktı ortaya.
Şimdi küçük ama işlevsel olan fonksiyonumuzu yazalım;
//adres çubuğundaki adresi tamamen alıyoruz
var tumAdres=String(this.location);
//adresimizi split ile "?"'den ikiye bölüyoruz
veri=tumAdres.split("?")[1];
//verimizi aldığımıza göre kullanalım
//şimdilik alert olarak görüntüleyelim
alert(veri);
Bu basit örneğimize buradan ulaşabilirsiniz.
Peki bu nasıl bir işlevsellik katabilirki bize? Eğer bir sayfada birden fazla saklı öğeniz (display:none) varsa işinize yarama ihtimalide vardır.
Kodumuzda biraz değişikliğe gittikten sonraki örneğimizde daha açık bir şekilde anlayacağınıza eminim.
//adres çubuğundaki adresi tamamen alıyoruz
var tumAdres=String(this.location);
//adresimizi split ile "?"'den ikiye bölüyoruz
veri=tumAdres.split("?")[1];
//bu veri bir öğenin id'si olsun
//aldığımız id ile bir eleman varmı bakalım
if(document.getElementById(veri){
//eğer var ise display i block olsun
document.getElementById(veri).style.display = 'block';
}
Bu örneğimizede buradan ulaşabilirsiniz. Burada dikkat etmemiz gereken nokta; javascript kodlarımızın işlem yapılacak olan divlerden sonra yazılması veya window.onload’a tanımlanmasıdır.
Eğer tam manası ile Reques.QueryString fonksiyonuna ihtiyacınız var ise bunun için biraz zaman ayırmalı veya http://andrewu.co.uk/tools/request/ bu adresi ziyaret etmelisiniz.
Kendi Js Kütüphanemizi Oluşturalım – 1
May 12th
Eğer web tasarımı ile ilgileniyorsanız javascript kütüphanelerini duymuş ve hatta kullanmışsınızdır. Jquery, prototype, mootools ve dojo bunların en meşhur olanlarıdır. Bu kütüphaneler ile çok güzel ve gelişmiş js yazılımları yapabileceğimiz gibi javascript işlemlerinde bize bir çok kolaylık sağlamaktadırlar. Ancak birçok kişi, sadece bir kaç div’i açıp kapatmak için 100-150Kb’lık kütüphaneleri sayfalarına ekleyerek, sadece performans kaybına uğramaktadır. Javasript bilgimiz çok ileri seviyede olamasa bile, basit işlemlerimizi kapsayacak bir kütüphane yazmak en fazla yarım saatimizi alacaktır. Tabii ki biz geliştikçe paralel olarak kütüphanemizde gelişecektir.
Şimdi kendi ihtiyaçlarımız doğrultusunda basit bir js kütüphanesi yazmaya başlayalım.
Kütüphanemizdeki en temel öğe doğal olarak bir DOM referansı olan document.getElementById‘dır. Bir çok js işleminde ihtiyaç duyduğumuz bu referansa en kolay ve akılda kalıcı şekilde nasıl ulaşabiliriz? PHP ve Js Kütüphanesi kullananlarımızın alışkın olduğu $ ile ulaşalım. O zaman kütüphanemizin ilk fonksiyonunu yazalım ;
function $(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id);
}
phatfusion ile js
Apr 7th
phatfusion.net adresinde sıklıkla kullanılan bazı web uygulamalarına alternatif hazırlanmış bazı uygulamalar olduğunu bildirgec.org‘dan öğrendim.
Ehh adamlar yapmışken bakmamak olmaz dedim.İncelemelerim sonunda gördümki harbiden çok güzel sistemler, nerede ise örnek aldıklarından başarılılar. Uygulamaların en güzel yanları ise gayet pratik olmaları.
Uygulamaları sıralamak gerekirse;
- Lightbox : herkesin bildiği ve şu an sitede de kullandığım resim gösterim aracının bir benzeri. Bence gayet başarılı.
- image menu: Bu uygulama ise flasha rakip bir css uygulaması.Flash kullanmak istemeyenler için gayet uygun bir çalışma.
- Validate: Form kontrollerine js ile farklı bir açıdan bakmışlar. .NET’teki form kontrollerine benzettim ben şekil olarak ama, sayfa ortasında dandun seslerle çıkan uyarılar yerine böyle bir uygulama sanırım daha sempatik olur
- Rounded Corners: Resim ve tabloların köşelerine ovalleştirmek için kullanılabilecek çok hoş bir js-css çalışması.
- Sortable Table: Adından da anlayacağınız gibi tablo içinde sıralama uygulaması
İnşallah ilerleyen zamanlarda bunlarla ilgili ufak tefek scriptlere yer vereceğim.
Js ile Div Oluşturmak
Nov 20th
Geniş bir yönetim paneli yazıyordum. Sitenin fotoğraf alanında thumbnailler var ve resim seçiminden önce büyük hallerine gözatma ihtiyacı çıktı ortaya. Ayrı sayfada açılmasını istemiyordum ve sayfa öncelikle bir div ekleyerek onun içine innerHTML ile resmi gösterim dedim. Daha sonra bunu AJAX ile yapmaya karar verdim. Ancak iş ilerledikçe ilerliyor, ihtiyaçlar çıktıkça kodları baştan yazıyordum. En sonunda tüm ihtiyaçları belirleyerek son kez kodlamaya karar verdim.
Bu çalışma sırasında hazırladığım ve bir çok kişinin işine yarayacağını düşündüğüm bir kodu anlatacağım.
Başlığımızın konusu olan Js ile Div oluşturan kod şöyle
function yap(){
var varmi = document.getElementById(’d');<em>//d id’li bir dokümanı tanımlıyoruz</em>
if (!varmi){ // eğer bu döküman yok ise oluşturacağız
var newdiv = document.createElement(’div’); //<em>burada bir adet div oluşturuyoruz</em>
newdiv.setAttribute(’id’, “d”);//id’sini d olarak tanımlıyoruz
newdiv.style.width = 300;//genişliğini belirliyoruz
newdiv.style.height = 300;//yüksekliğini belirliyoruz
newdiv.style.position = “absolute”;//pozisyonunu absolute olarak belirliyoruz
newdiv.style.left = 150; //sol boşluğu ayarlıyoruz
newdiv.style.top = 150; //üst taraf boşluğu
newdiv.style.background = “#ff”; //arkaplan rengini belirliyoruz
newdiv.style.border = “4px solid #000″; // kenarlık rengi ve stili
newdiv.style.padding = “5px”; //div dolgusu
document.body.appendChild(newdiv); // en son olarak oluşturduğumuz div’i dosyamıza ekliyoruz
}
}
Açılan-Kapanan Menü
Apr 7th
Dün itibariyle ilk .Net projeme başladım. Biraz geniş bir proje, Sql sorgularından 1 tanesi 3 kb ve sanırım 20 taneye yakın yazarız. Projede frame ve açılan menülere ihtiyacımız vardı. del.icio.us‘ umda tüm divleri kapat diye bir dil olduğu geldi aklıma. Bu arada o kodda bildirgec.org‘ da yer alıyordu, buraya tıklayarak koda ulaşbilirsiniz.
Neyse kodumuza gelelim. Kodumuz yazılış amacı olarak tüm divleri kapatmaya yönelik ve aşağıdaki gibi orjinali ;
function divkapat(islem) {
var tum_divler = document.getElementsByTagName(’div’); //divleri tanımladık
var tum_divler_adet = tum_divler.length;//kaç adet div var ona bakıyoruz
var i; //değişkenimizi tanımladık
for(i=0; i&amp;amp;amp;lt; tum_divler_adet; i++) {
tum_divler[i].style.display = islem
} //bir for döngüsü ile divlerimizin style.display özelliğini divkapat fonksiyonunda gönderdiğim parametre ile değiştirdik.
}
< a href=# onClick=divkapat(’none’); >açkapa< /a>
< a href=# onClick=divkapat(”); >açkapa< /a>
Bu haliyle bir işime yaramıyor .Neden derseniz ; son zamanlarda Tablosuz tasarıma takmış biri olarak, tüm divlerimin kapanması demek sayfanın bembeyaz bir hal alması demektirki bunu hiç istemem. Menü başlıklarını div, açılacak kısımları span olarak tanımladım. Javascript kodumuzuda şu şekilde düzenledim ;
function divkapat(islem,oge,ogeislem) //yukarıdaki koddan farklı ama açıklamasını aşağıda yapacağım
{
var tum_divler = document.getElementsByTagName(’span’);
var tum_divler_adet = tum_divler.length; var i;
for(i=0; i&amp;amp;amp;lt; tum_divler_adet; i++) {
tum_divler[i].style.display = islem
}
document.getElementById(oge).style.display = ogeislem ;
}
İlk kodumuzda fonksiyonumuz tek parametre ile çağrılırken ben bu sayıyı 3 ‘e çıkardım. Sebebine gelmeden önce 1 adet menü örneğinin kodlarınıda yazalım
<div id="1″ class="ac" onclick="divkapat('none','1a','');">bu 1</div>
<span id="1a" class="acilan" style="display: none">Aa 1a alt menu</span>
<div id="2″ class="ac" onclick="divkapat('none','2b','');">bu 2</div>
<span id="2b" class="acilan" style="display: none">Aa 2b alt menu</span>
<div id="3″ class="ac" onclick="divkapat('none','3c','');">bu 3</div>
<span id="3c" class="acilan" style="display: none">Aa buda 3c alt menu </span>
3 parametreli fonksiyon tetikleyicimiz şu satırlarda = onClick=”divkapat(’none’,’1a’,”)”
Neden 3 parametreli,
- 1. parametre tüm spanları kapatıyor.
- 2. parametre işlem yapılaacak olan span Id’sini belirliyor
- 3. parametre, 2. parametrede belirtilen span’ın display değerini alıyor
Sanırım 3. parametrenin boş olduğuna dikkat etmişsinizdir. Başlangıç değer olarak “display:none” alıyorlar, görünür hale getirmek için ” kullanıyoruz. Peki boş göndereceksek neden 3. parametreyi yolluyoruz. İşimizi tam yapmak için açtığımız menülere birerde kapatma butonu bırakırız diye düşünerek yaptım 
Kapatma butonun linkide şöyle olacak onClick=”divkapat(’none’,’1a’,’none’)” .
Kullanılabilir haline ulaşmak için Buraya tıklayınız.
Örnek kodları İndirmek için Buraya tıklayınız.