Başlıyoruz

İlk önce basit bir form oluşturuyoruz !

İşte bu şekilde iki input’tan oluşan bir form oluşturduktan sonrasında ise kodlarımıza geçiyoruz . Başta sölediğim gibi bu örnek basit sadece mantığını anlatmak için oluşturulmuş bir örnek . Siz ne kadar geliştirirseniz o kadar büyücek ve güzelleşecektir buna inanıyorum . İlk önce input değerlerinden herhangi birisine tıklandığında sağ kısımda küçük bir alanın görünmesini diğer input’a tıkladığımızda ise o input değeri için olan alanın görünmesini diğer alanın ise gizlenmesini istiyoruz . O halde yapmamız gerek input ‘ lara birer onclick eklemek ve javascript fonksiyonumuzu yazmaya baslamak .

javascript fonksiyonları

işte arkadaşlar gördüğünüz gibi temelde 3 kalıp fonksiyonu birleşimi .

1. fonksiyon birinci inputtan ikinci inputa geçtiğimizde 1. input için görünen alanın kaybolmasını saglıyor . Aynı şekilde tam terside geçerli tabiki .

2. fonksiyon ise sanal klavyeyi gösteren gizleyen alan !

3. fonksiyon gurbu ise sanal klavye içindeki değerleri inputların içerisine yazmaya yarayan fonksiyon .

Şimdi ise sanal klavyeyi gösterelim ! Sanal klavyede burda çok basit bir şekilde tekrardan üzerinde bastırmak istiyorum bu örneği göz önüne alarak çok değişik şeyler geliştirebilirsiniz ! …

Sanal Klavye Kodları

BİTTİ …

Uygulamanın Çalışır Hali İçin Tıklayınız !

Uygulamayı İndirmek İçin Tıklayın !

UMUT ÇETİNKAYA

117 views

Ajax-tr.com bugüne kadar açılmış en güzel en büyük en kaliteli ajax , javascript azcıkta php destek sitesi belki . Çok özgün bir site Ajax-tr.com. Şimdi size ajax olmasaydı ne yapardık sorusunun cevabını vermek istiyorum !

Bu teknik için suat arkadaşımada teşekkürlerimi sunuyorum burdan .

Ajax Olmasaydı Ne yapardık ?

İlk önce eyceks kütüphanesine karşılık gelen bir uygulama anlatacağımı söleyerek başlayım işe

eyceks kütüphanesinde yapılan uygulama kütüphaneyi içeri çağırmak ve çağırdığımız sayfada ‘da

JXG ve JXP komutlarıyla veri göndermek çıktıyı aynı ekranda alma işlemini yapıyorduk biliyorsunuz .

eyceks.js kütüphanesini sayfa içine çağırdıktan sonra aşağıdaki gibi tanımlama ve gönderme kodu yazıyorduk . sonrasında ise id=”sonuc” elemenetinde çıktıyı göstermesini istiyorduk .

İşte şimdi size küçük ama hızlı bir alternatiften bahsetmek istiyorum Ajax değil ama javascript ile ajax olmadan yapmak istediklerimizi nasıl yapacağımızdan bahsedeceğim tabiki eburhan arkadaşımızada burdan ellerine kollarına sağlık demek isterim eyceks kütüphanesi için ama alternatif sunmak herzaman için farklı bakış açısı kazandırması yönüyle hem ajax’ı hemde asıl anlatılmak istenini daha iyi kavrayabilmemizi sağlıcaktır .

Şimdi aslında tüm herşeyi 3 satır kod ile halledebiliriz .

Ajax olmadan verileri göndermek ?

Post veya Get ile verileri göndermek farketmiyor herşeyi sanki bu şekilde bir yöntem kullanmadan yapacakmış gibi düşünebilirsiniz . ilk Önce küçük bir form oluşturuyoruz .

Resim 1

İste Farklı Olan Kısımı Anlatıyorum Size target=”gizli_iframe” bu demek oluyorki formu gizli_iframe isimli bir frame ‘ye gönder.Ve dönen sonucun nereye basılacağına gelelim . Bunun için de id=”cikti” olan bir html tag koyuyoruz . ( span , div )

Şimdi ise gelelim bu işlemlerin arka yüzüne yani islem.php dosyasına …

İslem.php de sadece extra bir kod var !

Resim 2

islem.php de yaptıklarımıza bakalım şimdide. Kodlara baktığımızda görüyorsunuz ki islem.php çıktısı id=sonuc olan bir tag’ın içine yerleşiyor bizde o çıktıyı alıp geldiğimiz yer olan index.html diyelim oraya basıyoruz peki nasıl ?

Resim 3

İşte Bu kadar arkadaşlar sizlere umarım faydalı olabilimişimdir .

Eeee Sizce Hangisi ?

Ajax mı ? …. ?

• Çalışan Örnek Bir Uygulama
• Kodları Zipli Şekilde İndirmek için Tıklayın !

Umut ÇETİNKAYA

5 views