Evet uzun bir aradan sonra web programlama icin yeni bir konuyla geri donduk. Bugun JavaScript’te yapilabilecek cok basit, ama bir o kadar da ilgi cekici ve yerine gore kullanisli bir konuyu isleyecegiz. Amacimiz kullanici giris yaparken guvenligi bir kademe daha arttiran sanal klavye uygulamasinin nasil olabilecegine dair sizi fikir sahibi yapmak. Aslinda bu fikir keylogger’dan korunmak icin ortaya cikmistir. Keylogger’lar, bilgisayariniza yerlesen bir process’in arkada hic ses cikarmadan calisip, sizin yazdiginiz herseyi kaydeden ve/veya bir e-mail’e yonlendiren casus programciklar. Eger yeterli bilgisayar bilginiz yoksa, bilgisayarinizda calisan bu casus programcigi hic bi zaman farkedemezsiniz. Bunun icin ozellikle banka islemleri yaptiginiz sayfa gibi ozel onem arzeden yerlere baglanirken, guvenlik seviyenize boyle bir koruma katmani daha katmak isteyebilirsiniz.

Sanirim bu kadar sozden sonra artik kodumuza ve aciklamasina gecebiliriz. Baktim wordpress’ten hayir gelmeyecek, dosyalari baska sever’a koydum, ordan bakip burdan kodu takip edebilirsiniz. Ya da JavaScript ise acin kaynak kodunu direk bakin. Iste gecenlerde soz ettigim dijital saatin link. Simdi de birazdan anlatacak oldugumuz sanal klavye‘ye bir goz atin.

Gecelim kodu anlatmaya. Oncelikle 2 adet giris kutumuz(textbox) var, bunlardan biri kullanici adi, digeri sifre icin. Bu sayfada kullanici adi herhangi harf dizileriyle sayilardan olusabilir ve sifre sadece sayilardan olusabilir. Tabi bu benim varsayimim, siz kendi zevkinize gore degistirebilirsiniz. 4 adet fonksiyonumuz var.Bunlardan ikisi giris alanlari secildiginde gerekli olan klavyeyi gosterip digerini gizliyor,kalan iki fonksiyonumuz da klavyelerden her birine basildiginda gidip textbox’larimizin icine basilan karakteri yaziyor. Connect dugmemiz de baglanacak normalde ama burda hic bisey yaptigi yok:) Iste fonksiyonlarimizin kodlari:

function first_text() {
document.all.second.style.display = “none”;
document.all.first.style.display = “block”;
}

function second_text() {
document.all.second.style.display = “block”;
document.all.first.style.display = “none”;
}

function first_keyboard(key) {
document.all.uname.value += key.value;
}

function second_keyboard(key) {
document.all.pword.value += key.value;
}

Burda gordugumuz gibi aslinda tavsiye edilmeyen bir yontem kullandim. Normalde document.all diye hic bi elemana erismemiz uygun bulunmuyor artik. Sadece document.getElementById metodunu kullanmamiz isteniyor. Ben sadece bunun nasil calistigini gostermek icin kullandim. Bazen ihtiyac olabiliyor cunku kendi yaptiginiz yanlisin farkina varmaniz icin:) Neyse fonksiyonlari cok aciklamaya hacet oldugunu dusunmuyorum. Cunku isimleri kendilerini ele veriyor. Son iki fonksiyonumuza basilan tusun gonderildigini de acikca goruyorsunuz. Yaptiklari is su anda giris yapilan textbox’in degerine yeni basilan karakteri eklemek. Ustteki diger iki fonksiyonda gormus oldugunuz sytle.display’e block ve none yazmak, goruntude olup olmamasini belirliyor. Yani aslinda her iki sanal klavye de orda, ama bi anda biz sadece birini kullaniciya gosteriyoruz ki kafakaris olmasin. Hemen klavyemizin tuslarinin kodlarindan bir ornek gostereyim:

<input type=”button” id=”1q” name=”1q” value=”q” onclick=”first_keyboard(this)” />
<input type=”button” id=”1w” name=”1w” value=”w” onclick=”first_keyboard(this)” />
<input type=”button” id=”1e” name=”1e” value=”e” onclick=”first_keyboard(this)” />
<input type=”button” id=”11″ name=”11″ value=”1″ onclick=”first_keyboard(this)” />
<input type=”button” id=”12″ name=”12″ value=”2″ onclick=”first_keyboard(this)” />
<input type=”button” id=”13″ name=”13″ value=”3″ onclick=”first_keyboard(this)” />
<input type=”button” id=”21″ name=”21″ value=”1″ onclick=”second_keyboard(this)” />
<input type=”button” id=”22″ name=”22″ value=”2″ onclick=”second_keyboard(this)” />
<input type=”button” id=”23″ name=”23″ value=”3″ onclick=”second_keyboard(this)” />

Orneklerden de gordugumuz gibi her biri ayri bir id’ye sahip, ve tiklandiginda gerekli olan fonsiyonu cagiriyor. Bundan gerisi artistlik. Siz de kendi dusuncelerinizi ekleyip, kendi ihtiyaclariniza uygun olan sanal klavyeyi yapabilirsiniz.