Az önce "toString ve Sayı Sistemleri Çevirimleri" başlıklı yazıda decimal bir sayının diğer sayı sistemlerine çevirimi için kullanılan toString() metodundan bahsetmiş ve bir örnek vermiştim.
Benzer şekilde diğer sayı sistemlerindeki değerleri onluk (decimal) sayı sistemine çevirmek istersek, parseInt() metodunun bir özelliğini kullanacağız.
Varsayılan olarak parseInt() ikinci olarak kabul ettiği parametresinde onluk sayı sistemini kabul eder. Yani kendisine Int olarak parse etmesi istenen sayıyı ikinci parametre verilmediğinde 10'luk düzene göre çevirir. Ancak 2. parametre 2,8,16, 32 gibi değerler verilirse o tabana göre çevirim ve Int işlemi yapılır.
Javascript ailesinde bulunduğu diğer diller kadar olmasa da, oldukça becerikli. Yıllardır kullandığım toString metodunu onluk sayı düzenini 2'lik, 8'lik, 16'lık ve 32'lik düzene çevirmede işe yarayabileceği aklımın ucundan bile geçmemişti. Belki de "mektepli olmak" böyle bir şey.
64'lü ve üstünde çalışmıyor veya ben 64 ve üstü diye bir şey olmadığını bilmiyorum :)
Bir örnek vermek gerekirse,
var onluk=4583;
alert(onluk.toString(2));
bize "1000111100111" sonucunu verecektir.
Elbette toString() metodunun kullanımı bununla sınırlı değil. Googling işini size bırakıyorum. Aşağıda çevirici olarak yazdığım mini bir js fonksiyonu bulunuyor.
Çoğunlukla asp, php, jsp, .net gibi sunucu taraflı dillerde/platformlarda get/post ile gönderilen veri oturumlarda veya birtakım başka değişken taşıyıcılarda kullanılır. Ancak veritabanı ile alışverişin bir sonraki aşamalarda yapılacağı sayfalar arasında özellikle güvenlik gerektirmeyen basit aktarımlarda url üzerinden veri göndermek ucuz ve pratik bir seçenek olarak kullanılabilir.
Bu örneğimizde bir sayfadan link üzerinde (url) ?degisken=deger°isken2=deger2 şeklinde gönderilen verileri, alıcı sayfadan javascript ile alıp parse ederek bir select box tercihine yansıtma gösteriliyor.
Veri bir kez alındığında istenildiği yerde kullanılabilir.
Düzenli ifadeler ile url verisinin parse edilmesi ve bir diziye atılarak oradan kullanılması işi çok daha pratik hale getirecektir. Bunun örneğini de ileri bir zamana bırakalım.
Alıcı sayfadaki kod ise:
Kodlar editörde bozuluyor lütfen yukarıdaki linkteki örnek sayfaya bakınız.
Pek çok yazılım dilinde sayısal veya metinsel tabanlı sıralama için hazır fonksiyonlar vardır. Metinsel sıralama ise ASCII kodlarına göre sayısal sıralamadan ibarettir. Ancak hangi dilde olursa olsun arkasında yatan mantık halihazırda bilinen bir veya birkaç algoritmayı kurmakta kullanılır. Şuradan sıralama algoritmaları ile ilgili tüm detaya ulaşabilirsiniz. Burada da güzel bir Türkçe metni var konunun.
Javascript içinde kullanılan sanırım bubbling (baloncuk) denen sıralama. Teknik olarak çok iyi bilmiyorum konuyu ancak basitçe anladığım kadarıyla, dizideki tüm sayıları teker teker birbiriyle kıyaslayarak büyük-küçük durumlarına göre yerlerini değiştiriyor.
Bunu yaparken bir ek fonksiyonu geri çağırarak yardım alıyor. Bu tip fonksiyonlara callback fonksiyonlar deniyor. Sırayla sayıları iki parametre olarak alt fonksiyona gönderiyor.
Alt fonksiyon gönderilen sayılardan ilki ikincisinden büyükse pozitif bir sayı değilse negatif bir sayı çeviriyor. Eğer dönen sonuç sıfır ise sayılar matematik olarka eşittir ve dizideki sıralarıyla yer alırlar, zaten sonuçta değişmez.
Alt fonksiyonda kullanılan temsili parametrelerden a ve b alfabetik önceliktedirler. Yani a ilk sayıyı b ikinci sayıyı temsil eder. Bu nedenle artan sıralama için a,b veya azalan sıralama için b,a sıralarıyla işleme sokulurlar.
Sayılardan oluşan bir dizi tanımlayalım.
var bizimDizi = [4,78,2,134];
Bu dizimizi sırasıyla artan ve azalan olarak sıralarsak;
// Artan olarak sıralama
bizimDizi.sort(function(a,b){return a - b});
alert(bizimDizi); // 2,4,78,134
// Şimdi de azalan olarak sıralama
bizimDizi.sort(function(a,b){return b - a});
alert(bizimDizi); // 134,78,4,2
Böylece elimizdeki sayılardan oluşan diziyi artan-azalan olarak sıralayabiliyoruz. Burada anında çağrılan içteki fonksiyon sadece sıfırdan küçük, sıfır veya sıfırdan büyük değer döndürmekle görevlidir.
Metin bazlı sıralamada doğurdan metinDizisi.sort(); şeklinde kullanım vardır.
Büyük dizilerde ve özel kullanım gerektiren durumlarda farklı algoritmaları kendimizde yazabiliriz. Kaynaklarda bununla ilgili örneklerde bulunabilir.
Javascript'te bir elementin içerdiği diğer elementleri etiket(tag), isim(name) veya id'sinden hareketle bir koleksiyon olarak ele alabilir ve kullanabiliriz.
Hepimizin bildiği doğrudan id ile (en sağlıklı yoldur) bir elementi ele almak için document.getElementById('bizimElementId') kullanılır. Bu tüm browserlarda çalışan kesin yoldur. Ancak dökümanın tamamı değilde bir element söz konusu olduğunda önce elementi ele alıp sonra alt elementleri ele almak gerekir.
var oElement = document.getElementById('anaelementId');
var tumdigerleri = oElement.getElementsByTagName('div');
Bu şekilde hedef elementimiz içindeki divleri almış olduk. for döngüsüyle koleksiyondaki (dizideki) tüm divleri alıp kullanabilir ya da kontrollere sokabiliriz.
Dosyaları sunucuya aktarmak için http üzerinden form aracılığıyla dosyayı sunucuya bildiririz, sunucu dosyayı bir anlamda download eder. Bunu bir input tipi olan file ile bildiririz. Son browser sürümlerinde file tipi çoklu dosya seçimine destek verecek şekilde multiple metodunu kabul etti. Standardı üzerinde halâ farklılıklar olsa da şuan tüm browserlarda çalışıyor.
<input type="file" multiple=""> dediğinizde dosya seçme diyalog kutusunda birden çok dosyayı fare ile veya ctrl tuşuna basık tutarak seçebiliyoruz. Peki seçince input bunları nasıl gösteriyor. Dosya adreslerini virgüllerle ayrılmış bir dizi olarak gösteriyor.
Bu dizideki dosyalar yeraldıkları sıra ile sunucu tarafından download ediliyorlar. Yani upload ediyoruz. Peki bu arada biz bu dosya isimlerini görmek ve bir takım başka işlemler yapmak istersek ne olacak?
Öncelikle input elementine bir id vermiş olmamız gerek (ele almanın en kolay yolu olduğundan). Diyelim input elementi idsi secilenler olsun. Ve çoklu seçim yaptığımızı varsayalım, diyalog kutusundan.
Tüm dosyalarımız document.getElementById('secilenler').files şeklinde bir dizi olarak ele alabiliriz. Daha sonra bunları bir döngüden geçirip tek tek dosyaların bilgilerine ulaşabiliriz.
alert(dosyalar[ds].name); // bazı browserlarda .name yerine .fileName kullanılır, ternary operatörü tam buraya göre
}
Benzer şekillerde şu özelliklerini elde edebiliyoruz dosyaların
dosyalar[ds].fileSize;
dosyalar[ds].size;
dosyalar[ds].mediaType;
Dosyanın uzantısına ise şu şekilde ulaşabilirsiniz
var dosyaTipi = dosyalar[ds].name.split('.').pop(); // Böylece izin verilmeyen dosya varmı kontrol edersiniz. Bunun için dosya uzantılarının bulunduğu bir dizide sizin uzantı varmı buna bakabilirsiniz. Bir dizide elimizdeki metinin olup olmadığını kontrol eden betiği de şuradan bulabilirsiniz.
Üzerinde çalıştığım bir upload uygulamasını yakın zamanda paylaşırım.
Bir metin veya sayının elimizdeki bir dizide bulunup bulunmadığını araştırmak çoğu uygulamada gereken bir basit durumdur. bunun için şu yazıda asp ve vbscript için bir örnek fonksiyon yazmıştım. Şimdi de javascript için kısa bir fonksiyon yazıyoruz. elbette alternatifleri ve performans olarak üstün olan fonksiyonları yazılabilir.
Çoğu uygulamada belirli işler belirli zaman aralıklarında yapılır ve kontrol döngüleriyle bu kontrol edilir. Bu iş hepimizin bildiği iki zamanlama metodu ile yapılır. setTimeout ve setInterval neredeyse birbirine denk iki metodtur. En temel farkları ise setTimeout'un kendisinden istenen işi verilen süre sonra ve 1 kez yapmasıdır. setInterval ise aynı parametrelerle çalışmasına rağmen iptal edilinceye kadar verilen işi verilen süre aralıklarında yapmaya devam eder. Bu metodlar bir değişkene atanarak oluşturulurlarsa değişkeni clearTimeout ve clearInterval ile silerek yoketmek böylece döngüyü engellemek mümkündür.
Buraya kadar son derece faydalı iki kullanılış, ancak yapmaları istenen işe değişebilir değerlerde parametre göndermeleri gerektiğinde 2 temel sorun ortaya çıkıyor. Birincisi browser temelli işaretleme farklılıkları, ikincisi de durudurulmaları gereken şartı kontrol eden döngünün bypass olabilmesi.
Eğer zamanlama ile çağırdığınız kod grubu veya fonksiyonun değişen değerlerle parametre almasını denediyseniz hikayenin buraya kadarını zaten biliyorsunuz. Çözümlerden bir veya bir kaçına da ulaşmışsınızdır.
Burada nihayi çözüme ulaşamadığım (crossbrowser) için kısaca parametre gönderdiğim fonksiyonu doğrudan zamanlama metodunun içine alıyorum, gereken parametreleri de burada rahatça kullanaibliyorum. Önümüzdeki günlerde buna kesin çözümü içeren bir kod bloğunu daha yazacağım.
İnternetteki çözümlerden bazısında yardımcı ir delay fonksiyonu kullanılmış. Ayrıca çift tırnak ve tek tırmak atraksiyonları da browserlara göre yapılarak crossbrowser yolunda çözüm üretilmeye çalışılmış.
Benim şimdilik uyguladığım çözüm şu şekilde:
var zamanlayici = setInterval(function(){
// istediğimiz parameterlerin kullanımı
// clearInterval(zamanlayici); //kontrolümüz yeterliyse
return;
},belirliSure);
Not: Burada parametre pass edilmiyor. Edilmesi gereken fonksiyon getirilip doğrudan kullanılıyor.
Bu fonksiyonla elementin kendi ana elementi içinden kaldırılmasını basitleştirmiş olacağız.
Nesneyi yaratırken yine şu fonksiyondan yararlanabiliriz. 1
function nY(hN){return document.getElementById(hN);}; // id den nesne yaratır
function nS(hN){nY(hN).parentNode.removeChild(nY(hN));}; // id den nesne siler
function nSd(hN){hN.parentNode.removeChild(hN);}; // nesne (object)den nesne siler
Birinci satırdaki fonksiyon html elementinin idsini parametre olarak alıp elementi bir değişkene atanmış nesne olarak geri veren fonksiyon (nY). İkinci fonksiyon ise html elementinin idsini parametre olarak alıp 1. fonksiyondan nesneye çevirip sonra ebeveyn elementinin içerisinden onu silen fonksiyon (nS). Üçüncü fonksiyon ise elementin doğrudan kendisini nesne şeklinde parametre olarak alıp ebeveyni içinden kaldıran fonksiyon (nSd). Kodlarımda sıklıkla kullandığım 3 fonksiyon bunlardır.
C ve benzeri dillerde (javascript, C#, php, ruby v.b.) sıklıkla kullanılan operatör bir eğer öperatörüdür. Daha çok bilgi için wikipedia , wikipedia (2.link), Mehmet Duran'ın blogu, tüm javascript operatörleri için de yine wikibooks'a bakabilirsiniz.
Kendisinden ?: operatörü gibi kısaltılarak da bahsedilebilinir. Genel kullanımı bir şart doğru ise değişkene bir değer değilse başka bir değer atama şeklindedir. Tam anlamıyla ternary operatörü "bir şart 'true' ise bir grup komutu çalıştır, 'false' ise diğer grup komutu çalıştırır" şeklindedir.
Yerden kazanç sağlar. True/False kıyaslamalarında da sıklıkla kullanılabilir. Kodlarda biraz karmaşa yarattığı düşünüldüğünden temiz kodlama kurallarıyla çok uyumlu değildir.
Javascript ile sayfamıza dinamik olarak bir element ekleyebiliriz. Bu element tamamen script tarafından yaratılıp sayfaya gömülmektedir. Teorik olarak tüm html elementlerini yaratabilir ve sayfaya gömebilir yada bağlayabiliriz. Havada (on the fly) yapılan bu işlemler sayfanın refresh olması ile eski haline döner. Bu işlemleri kalıcı kılmak istersen sayfamızın sunucuda oluşumuna bu nesneleri eklememiz gerekir.
Bunu script ile nesneyi oluşturan komut dizisinde ajax tekniği ile sunucuya verileri göndererek sunucuda veri tabanına kayıt edilmesini sağlayabiliriz. Böylelikle sayfa yeniden oluşurken veri tabanından faydalanıldığında dinamik olarak yaratılmış nesnemiz statik olarak sayfamızda yer alabilir.
Ancak bu tekniğin en sık kullanımı geçici olarak yaratılıp sayfanın sonraki çağrılarında yer almayacak veya iş bittiğinde sayfadan geri kaldırılacak alanlardır.
var yeniElement = document.createElement("P"); // paragraf elementi
var yeniElement2 = document.createElement("input"); // input elementi, tipi ayrıca belirlenebilir.
// Element oluşunca iş bitmiyor. Sayfada render olması için sayfaya eklememiz gerek
document.body.appendChild(yeniElement);
document.body.appendChild(yeniElement2);
// Böylece döküman gövdesine ekledik.
// İstersek belirli bir elementin child elementi olarakta ekleyebiliriz.
İstendiği taktirde nesnelere iç nesneler veya metinler eklenebilir. Nesnelerinize tipine göre özellik atayabilirsiniz.
Tüm nesnelerde kullanılabilecek olan .id özelliği sayfadaki herhangi bir yerden .getElementbyId(nesneIDsi); ile kullanılabilir.
Nesne ile işiniz bittiğinde sayfadan kaldırmak isterseniz benzer şekilde.
document.body.removeChild(yeniElement);
// veya alternatif bir çözüm olarak sadece nesneyi içeren bir üst ebeveynden nesneyi kaldırabilirsiniz
yeniElement.parentNode.removeChild(yeniElement);
Bu iki kullanım kendi başlarına birer fonksiyona çevrilebilir. Js sayesinde ihtiyaç duyulan elementi yaratıp işimiz bittiğinde de kaldırmak bize masrafsız ve hızlı çözümler sunar.
Bir web sayfasında yer alan form içerisindeki elementlerin kontrollerini formu göndermeden yapmak ve eğer kriterlerimize uygun değilse kullanıcıyı uyararak formun gönderim işlemini iptal etmek istersek bunu javascript (vbscript) gibi betik dilleriyle yapabiliriz.
Bu kriterler başlıca istenilen verinin tipi olabileceği gibi, verinin olup olmaması, verilerin bir başka veriyle uyumluluğu, verinin yeterince uzun olup olmadığı vb. olabilir. Bu kriterler kendi aralarında grup olup başka başka fonksiyonlar tarafından kontrol edilmeleri gerekebilir.
Fonksiyonlar kendi içlerindeki duruma göre formu submit edebilirler ancak onsubmit ile çağrıldılar ise ancak geriye false değeri döndürerek sonuç bildirebilirler.
Burada istediğiniz kadar fonksiyon tanımlayabilirsiniz.
Web uygulamasında kullanıcının veri göndermesi gereken durumlarda form kullanılır. Form kendisine verilen adrese (action) belirtilen metod (get/post) ile içerisindeki adı olan (name) her elementin değerini sunucuya iletir. Formun iletme işlemini başlatan submit tipinde bir girdi (input) elementinin tıklanma olayı veya bir script'in formun submit olayını tetiklemesidir.
Her iki durumda da forma ait submit olayı onsubmit durumunun oluşması demektir. Onsubmit kesilemeyecek bir durum değildir. Bitmeden kesilip iptal edilebilir. Bunun için kendisine yanlış (false) değerinin geri çevrilmesi gereklidir.
Örneğin form elementinin onsubmit olayına doğrudan yanlış döndürürsek (return false) formun submit olayı asla gerçekleşmez.
Formun onsubmit olayına script içinden de erişebiliriz.
Form içindeki elementlerin değerlerinin kontrolünü sunucuya gönderildiklerinde sunucu tarafıyla da kontrol edebiliriz ama özellikle basit değerleri henüz sunucuya gönderilmeden kontrol etmek varken gereksiz bir zaman ve güç sarfına neden olur.
En basit form içi elementlerden olan input elementinin metin girilen tüm tipleri .value ile içerisindeki metni ifade eder. Form submiti yapıldığında bir script fonksiyonuna yönlendirme yapılarak istenen değerlerin uygunluğu (bu yazımızda boş olup olmaması) kontrol edilebilir.
Ancak bu durumdan önce en sağlıklı kontrol şeması submit düğmesi (submit tipindeki input elementi) yerine normal button tipindeki input elementinin kullanılması doğru olur.
Böylese bu onay düğmesinin sayfanın herhangi bir yerinde hatta herhangi bir elementin misyonu halinde kullanılması bile sağlanabilir. Fonksiyon kontrolün sonucu olumlu olduğunda formu ele alıp formun onaylama ( .submit() ) olayını çağıracaktır.
Input elementinin tipi text olduğunda .value kontrol edilir.
Her ne kadar çoğu browser .value=='' kontrolünü kabul etse de null değeri '' (boş) değerine eşit değildir. Titiz bir javascript kuralcısı bunu reddedecektir. En azından okunamadı hatası verecektir. .value değerinin kontrolünü en sağlıklı ! iledir.
Yani doğru kullanım şu şekilde olmalıdır.
function formKontrol_1()
{
var mAdi = document.getElementById('musterininAdi');
if(!mAdi.value){alert('Müşteri adı boş bırakılamaz!');mAdi.focus();return false;}
}
Burada doğrudan uyarı verip imleci ilgili elemente taşıyarak fonksiyondan çıktık. Dikkat edin mAdi.value=='' kontrolünü yapmadık. Js kodlarken yeni yeni öğrendiğimiz bu minik ipuçları bizi daha sağlıklı ve hızlı kod yazmaya yöneltecektir.
Ajax web sayfalarında sunucudan veri çekebilmek için kullandığımız, temelde tek bir objeye dayalı bir teknik. Ancak ajaxtan daha orjinal olan her versiyonda yetenekleri artan javascript. Uygulamalardaki taleplerimiz arttıkça daha derin javascript bilgisine ihtiyaç duyuyoruz.
Bu yazıda ajax kullanarak closure ile veri çekme ve ilgili fonksiyona devretme üzerine bir örnek vereceğim. Web uygulamamızda bir tetikleyici bir fonksiyonu çağırır ve herşey başlar.Örneğimizde: yeniSiteEkle() fonksiyonu çağrılıyor. Örnekteki parametreler kendilerini açıklıyorlar.
function goster(gelenVeri){alert(gelenVeri.cevapMetin);}
function yeniSiteEkle()
{
var listeTasiyici = nY('listetasiyiciSpan');
var url = 'jobs.asp?job=test';
var target = 'durum';
ajax_job(url,target,imgJob,goster);
}
Tabi daha önce yazılan ajax içeren fonksiyonda şu şekilde:
function ajax_job(sorgulanacakUrl,geciciMesajHedefNesnesi,geciciMesaj,isleyiciFonksiyon)
{
var gM = document.getElementById(geciciMesajHedefNesnesi);
gM.innerHTML = geciciMesaj;
// doğal XMLHttpRequest nesnesi kontrolü, yoksa Activex (windows) üzerinden gidilecek
if (window.XMLHttpRequest){req = new XMLHttpRequest();}else if(window.ActiveXObject){req = new ActiveXObject("Microsoft.XMLHTTP");}
if (req)
{
req.onreadystatechange = function(){var dondurulenler = evetOldu(); isleyiciFonksiyon(dondurulenler); gM.innerHTML='' }
req.open("GET", sorgulanacakUrl, true);
req.send();
}
}
function evetOldu() {
var durumKod,durumMetin,cevapMetin;
// Eğer req yüklendiyse
if (req.readyState == 4) {
// req durumu "OK" ise kodu 200
if (req.status == 200) {
return {durumKod:req.status, durumMetin: req.statusText, cevapMetin:req.responseText}
} else {
return {durumKod:req.status, durumMetin: req.statusText, cevapMetin:req.responseText}
}
}
}
Burada ajax gerekli requesti yaptıktan sonra dönen veriyi kendi fonksiyonuna bir parametre olarak gelen fonksiyona parametre olarak veriyor. Bunu yaparken veriyi hazırlayan fonksiyon değişkenleri fonksiyon adından üretilecek bir değişkenin (nesnenin) özellikleri olarak gönderiliyor.
Geriye sadece çağrılan fonksiyonda bu özellikleri kullanmak kalıyor. Closure, method, callback gibi kavramları daha basit örneklerle daha sonra anlatırız, ancak bu örnek ajax ile çağıran fonksiyonlar arasında geri dönük bir bağ kurarak kontrolleri ajax çağrısı yapan fonksiyonun içinde yapmaktan bizi kurtarıyor, böylece farklı uygulamalarda sadece çağrı yapıp sonucu döndüren bu fonksiyonu tekrar tekrar kullanabiliriz. Sunucu isteği sırasında işlemin yapıldığına dair hedef taşıyıcı (span yada div vb.) içine gönderilen img tagıda çağrı bittiğinde kaldırılıyor. Böylece sonuç ve işlem yapılıyor imgeleri farklı yerlere koyulabiliyor. Closure ve callback en sıkı jquery tarafından kullanılıyor.
Hazır nesnelerin yanı sıra kendi nesnelerimizi de oluşturabiliriz. Oluşturulan nesneler tamamen hayali yada gerçek hayattakilere benzer veya özellikleri açısından eş olabilir.
Bu nesne bir öğrenci, bir baraj duvarı, bir sandalye veya hava durumu olabilir. Nesnemiz ana nesneyi oluşturup bu nesneden türeteceğimiz diğer nesnelere özelliklerini devredebilir. Diğer türeyen nesneler ek özellikler alabilir. Ana nesnemize ait metodlar (işlevler-iş yapan fonksiyonlar) olabilir. Bu metodlar bir sonuç döndürebilir, nesnemizin bir özelliğine değer oluşturabilir veya hiç bir değişikliğe neden olmaz. Türetilen nesnelere veya ana nesneyi oluşturulmaları sonrasında metod veya özellik eklenebilir.
Örnek olarak kendimize sandalye nesnesini seçelim. Özellikleri kaç bacağı olduğu (bacakSayisi), arkalığı olup olmadığı (arkalikVarmi), kolcak olup olmadığı (kolcakVarmi) vb...
Sonra bu ana nesnemizle biraz oynayalım ve türevlerini üretelim. Sonra bazı ek özellikler ve metodlar ekleyelim.
function sandalye(bacakSayisi,arkalikVarmi,kolcakVarmi)
{
this.bacak = bacakSayisi;
this.arkalik = arkalikVarmi;
this.kolcak = kolcakVarmi;
}
// Şimdi ana nesnemizin bir örneğini oluşturalım
// ana nesnemiz gerçekte yoktur. sadece bir tanımdır.
// gerçek nesne bu tanımdan üreteceğimiz bir örnektir.
var barSandalyesi = new sandalye(4,true,true);
// yeni nesnemiz bir sandalye örneği adı da barSandalyesi;
// bu gerçek bir nesne ve ek özellikleri olabilir;
barSandalyesi.donebilmeVarmi =true;
// sandalyenin böyle bir özelliği yoktu ama barSandalyesinin oldu
barSandalyesi.bacakBasinaYukTasiyabilme = 2;
// bir özellik daha ekledik
barSandalyesi.toplamKapasite = function(){return this.bacakBasinaYukTasiyabilme*this.bacak}
// Sandalyenin değil ama barSandalyesinin artık bir metodu var
// toplamKapasite ismindeki bu metod şuan 8 değerini taşıyor
// yani barSandalyesi.toplamKapasite dediğimizde 8'i verir
}
Şimdilik bunlar, bazı yazılarda bu özellik kullanılarak örnekler yapılacaktır.
Javascript'te fonksiyonlar kullanırken bize gereken işlere ait değerleri parametre olarak gönderiyoruz. Ancak bu parametreler çok fazla ise ve tipleri, sayıları değişkenlik gösterebiliyorsa fonksiyon tanımlanırken hiç parametre girişi yazmayıp fonksiyon içinde .arguments ile gelen argümanları (parametreleri) alabiliriz. Böylece gereken kontrolleri içeride yapıp farklı sayıda argüman gelirse sorunları engellemiş oluyoruz. Burada gönderilen parametrelerin sıralaması önemli oluyor. Sıralamada özel bir durum olursa aradaki parametreleri boş bırakarak aşabiliriz.
function bizimFonksiyon()
{
gelenler = bizimFonksiyon.arguments;
// gelenler dizisi fonksiyona gönderilen parametrelerden oluşuyor
// bir dizi gibi kontroler ve döngülere sokabiliriz.
// gerisi bize kalmış, fonksiyona ne kadar arguman -parametre gelirse gelsin handle ettik.
// Örnek döngü
for(i=0; i < gelenler.length)
{
parametre = gelenler[i];
alert(parametre);
}
}
Örnekte bir girdi tipi isteniyor. JScript fonksiyonunda ise bu resimlerin tıklanmasıyla gizli olan radio buttonların işaretlenip işaretlenmemesi taklit edilerek gerçekleştiriliyor. Aşağıdaki örnekte radyo düğmeleri görünüyor. Elbette gerçek kullanımda gizli ve readonly olmaları gerekli. Kullanıcı resimlerden hangisini seçerse bağlantılı olan radyo düğmesi seçilmiş oluyor, aynı zamanda seçimin takip edilebilmesi için de resim kendinin farklı versiyonu ile değiştiriliyor.
Benzer bir örneği sayfamızdaki tüm radyo düğmelerini bize özel resimleriyle değiştirip yerlerine gizli olanlarını kullanabiliriz. Bir diğer çözüm ise tüm bu tıklamaları bir dizide tutarak form onaylama anında bir fonksiyon içinde diziyi radyo düğmelerine çevirip kullanabiliriz.. Girdi tipi seçiniz: Soru» Açıklama:» Soru:, Açıklama:
function soruTipi(tipi)
{
var rS = document.getElementById('rSoru');
var rU = document.getElementById('rUnlem');
var gT_soru = document.getElementById('girdiSoru');
var gT_unlem = document.getElementById('girdiUnlem');
if(tipi=='soru'){rU.src = 'http://www.co-scripts.com/img/unlem_.gif'; rS.src='http://www.co-scripts.com/img/soru_o.gif';gT_unlem.checked=false; gT_soru.checked=true;}
if(tipi=='unlem'){rU.src = 'http://www.co-scripts.com/img/unlem_o.gif'; rS.src='http://www.co-scripts.com/img/soru_.gif';gT_unlem.checked=true; gT_soru.checked=false;}
}
Bu arada soru işareti ve ünleme tıklayınca gerekli fonksiyonu tetikleyen onclick eventları aşağıdaki şekilde olacak.
Hepimizin başına en az bir kez dosya yükleme (upload) hikayesi gelmiştir. Onlarca çözümü olmasına rağmen eminim halâ 4/4 bir yol bulamamışızdır. Ben henüz öğrenmeye başladığım ASP.Net içerisinde basit ve sağlıklı bir çözüm olduğu hayaliyle yaşıyorum. Şimdilik Persist'in upload komponentini kullanıyorum ve memnunum.
Neyse konumuz bazı durumlarda form içinden dosya yollayabilirken bazı durumlarda aynı form içerisinden sadece metin verisi yollamak isteyebileceğimiz. Örneğin e-posta gönderirken önce sunucuya metin ve diğer tip veriler gider ve sunucuda onları alır smtp aracılığıyla göndeririz. Ama her zaman e-postamıza bir dosya eklemeyiz. Benzer bir durum bizim başımıza da gelirse tek yapmamız gereken formumuzun enctype'ını değiştirerek target olarak başka bir sayfa vermek. Böylece dosya yüklenmediğinde daha temiz işlemler yapılarak karışıklık engellenebilir. Aşağıda örnek kodları veriyorum. Kodlarda formun target özelliğini değiştirmedim ama değiştirmek istenirse yorum satırlarına bakılabilir. Form içerik tiplerine buradan bakabilirsiniz. Ayrıca enctype için detaylı bilgi burada bulunabilir. Ayrıca multipart data tipleriyle ilgili olarak düzenlemelere şuradan ulaşabilirsiniz.
function verigonder(netip)
{
var Frm = document.getElementById('bizimForm');
var eskiDegeri = Frm.enctype.toString();
if(!netip){Frm.enctype='application/x-www-form-urlencoded';}else{Frm.enctype='multipart/form-data';}
alert('Formun eski encttype degeri:' + eskiDegeri + ' iken şimdiki değeri: '+ Frm.enctype +' oldu.');
// Frm.action = 'yeniHedefAdres.asp';
// Frm.encoding = 'text/plain;
// Frm.submit();
}
Örnekte görülen fonksiyon modifiye edilerek dosya kısmı boş ise gereken değişiklik yapılacak şekilde tek düğmeye de atama yapılabilir. Aşağıda formun iki ayrı submit olayında kullanılabilecek iki düğme var.
Sayfadaki formumuzun idsinin bizimForm olduğunu söylemeye gerek yok sanırım. Formların encoding özelliği text/plain yapılırsa url encoded olurlar. Encoding özelliğini kullanmayabilirsiniz. Kolaylıklar diliyorum.
Sayfamızdaki reklam alanına birden fazla reklamı dönerli olarak getirmek istiyoruz ama sayfa refresh olmadan bunu yapmak istiyoruz. Flash, img yada html içeriği bilinen herhangi bir reklamı buraya koyabiliyoruz. Kodda biraz değişiklik yaparak süre ve reklâm içeriği değiştirilebilir.
İyi kötü herkes web ile uğraşırken js kullanmış ve kullanırken sayfa elementlerini pek çok yöntemle ele almak zorunda kalmıştır. Bu yöntemlerden en pratiği nesnenin id özelliğine atıfta bulunarak nesneyi bir değişkene eşlemek böylece değişken ismiyle pratik olarak kolaylıklar sağlamaktır.
Örneğin id degeri musteri_adi olan bir metin kutusu var ise
var mus_adi = document.getElementById('musteri_adi');
şeklinde mus_adi degiskenine nesne atanır. Böylece nesnenin .value gibi diger özelliklerini get veya set edebiliriz. Ama çok fazla nesne olduğunda fazladan byte ve emek harcamamak için bunu bir fonksiyonla çözmek en doğrusudur. Fonksiyonlar pek çok sonuç tipi çevirebilirler. Dizi, metin, bit, sayı, formül, başka bir fonksiyon veya nesne gibi sonuçları döndürebilirler.
Burada bir nesne geri çevirmesini istiyoruz.
Örneğimiz şu olabilir:
function ny(nid)
{
return document.getElementById(nid);
}
Bunun kullanımı şu şekilde;
function ny(nid)
{
return document.getElementById(nid);
}
// gerektiği noktada
var mA = ny('musteri_adi').value;
// Şeklinde kullanılabilir.
Daha sonraki örneklerde farklı tip sonuçlar döndüren fonksiyonlara da örnek vereceğim.
Bazen bir html elementini gösterip sonra gizlemek isteriz. bunu bazen süreli olarak rutin yapmak bazen ise bir düğme ile tetiklenecek şekilde kullanıcının kontrolüne bırakmak gerekebilir. İster düğme ile ister bir zamanlayıcı ile olsun bir elementi görünür ise gizlemek, gizli ise göstermek için bir fonksiyon yazabiliriz.
Gösterip gizlemek derken visibility gerçek anlamda elementi görünür kılıp sonra gizleyebiliyorken display sayfada elementin render edilip edilmemesiyle ilgilidir. Yani sayfada yer alan bir elementin visibility özelliği ne olursa olsun sayfada ona ait yer korunur. Display özelliğinde ise element sayfadan gerçekten kaldırılır veya yerine geri koyulur.
Visibility: visible/hidden/collapse, display:none/null (ve başka 16 değer daha) değerlerini alabilir. display ile visibility arasındaki fark için buraya bakabilirsiniz.
function ackapa(nesne){
var ns = document.getElementById(nesne);
if(ns.style.display=='none'){ns.style.display='';}else{ns.style.display='none';}
}
Burada nesne idsini ackapa() fonksiyonuna veriyoruz. bunu bir tetikleyici(trigger) olaya(event) bağlayabilirsiniz. Nesnenin none ve null dışıdaki display değerleri alması durumunda bu fonksiyonu modifiye etmek gerekecektir.
Açıklama:»