“Dünya eskisinden kötü değil. Sadece iletişim çok gelişti.”

HTML5 ile Gelen Yeni Bir Özellik Web Storage

Tarih: Aralık 26th, 2010 | Yazar: | Kategoriler: HTML5, Javascript | Etiketler: , , | 4 Yorum »

Web Storage özelliği tarayıcı tarafında verir saklamamızı sağlıyor yani basit bir veritabanı diyebiliriz. Bir anahtar(key) birde bu anahtara bağlı olan değer(value) vasıtası ile verilerimizi depoluyoruz Web Storage ile.

Tarayıcı tarafında veri saklamak yeni bir özellik değil, yıllardır çerezler(cookies) ile bu işlemi yapıyorduk ve hala yapmaya devam ediyoruz aslında.

Peki Web Storage’ın bize getirdiği avantajlar neler?

  1. Bildiğiniz üzere çerezler sadece tarayıcı tarafındaki uygulamaların bilgi bilgi saklaması için geliştirilmemiştir. Çerezler aynı zamanda sunucu üzerinden tarayıcıda bilgi saklamak içinde kullanılır. Bu  yüzden her çerez sunucuya gönderilmek zorundadır.Açmak gerekirse siz tarayıcıda javascript kullanarak bir çerez oluşturup bu çereze teorik olarak 1MB boyunda bir değer girdiğinizde her http isteği için tarayıcı bu 1MB boyuntundaki veriyi sunucuya gönderecektir ve bu şekildeki kullanım gereksiz bir hantallığa yol açacaktır. Bu noktada imdadımıza Web Storage yetişiyor. Web Storage ile sakladığımız veriler http isteklerinde sunucuya gönderilmeyecektir.
  2. Web Storage ile çerezlerden daha kullanışlı ve kolay veri saklıyabiliyoruz.

Web Storage kaça ayrılır.

Web Storage ikiye ayrılır;

  1. Session Storage.
  2. Local Storage.

Session Storage: “Storage” nesnesinden türetilmiştir. Session Storage ile sakladığımız verilerin ömrü tarayıcı kapana kadardır. Tarayıcı kapandıktan sonra bu veriler imha edilir.

Local Storage: Session Storage da olduğu gibi yine “Storage” nesnesinden türetilmiştir. Local Storage daki verilerin ömrü ise sonsuzdur. Yani Local Storage ile şuan yazdığımız bir veriyi bir yıl sonrada okuyabiliriz. Tabi ki tarayıcının başına kötü birşey gelmez ise 🙂

Session Storage ile Local Storage aynı method ve özelliklere sahiptir bunlar;

  • length” yazılmış verilerin adet olarak toplam sayısını verir.
  • getItem(anahtar)” girilen anahtar ismine ait veriyi döndürür.
  • setItem(anahtar, değer)” girilen anahtar ismi ve değere göre veriyi depoda saklar.
  • removeItem(anahtar)” girilen anahtar ismine göre veriyi depodan siler.
  • clear()” depoda saklanan tüm verileri siler.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl Kullanabiliriz?

Çok basit bir sayaç uygulaması ile kullanımına bakalım.

  var sayac = localStorage.getItem("sayac");
  sayac++;
  localStorage.setItem("sayac", sayac);
  $("#sayac").html("Sayac: " + sayac);

var sayac = localStorage.getItem(“sayac”) ile sayac anahtarına bağlı değeri çekiyoruz.

sayac++ ile bu değeri bir artırıyoruz.

localStorage.setItem(“sayac”,  sayac) kodu ile sayac anahtarına yeni sayac değerini ayarlıyoruz ve yeni sayac değerini #sayac elementine aktarıyoruz. Hepsi bu kadar!

Bundan sonra tarayıcımız kapansa dahi yine sayacın bulunduğu sayfa açıldığında sayaç değeri kaldığı yerden artmaya devam edecektir.

DEMO

Kaynaklar:


jQuery ile JavaScript Dosyasını Yükleyelim

Tarih: Mart 29th, 2010 | Yazar: | Kategoriler: Javascript, jQuery | Etiketler: | Yorum Yok »

Bugün kolay ama bazı zamanlar çok kullanışlı olan bir yöntemi sizinle paylaşmaya çalışacağım.

İstemci tabanlı scriptlerimiz de koşullara göre dışarıdan JavaScript dosyası yüklememiz gerekebilir. Yada kod görünümün daha düzenli olmasını istediğiniz zamanlarda html ile değilde JavaScript ile yükleme yapmak isteyebilirsiniz. Bu noktada jQuery bize $.ajax api’si ile işimizi oldukça kolaylaştırıyor. Peki nasıl yapıyoruz aşağıdaki kullanım şekline bakalım.

$.ajax({
	type: 'GET',
	url: 'jsyuklemece.js',
	dataType: 'script'
});

Gördüğünüz gibi kullanımı oldukça kolay. Klasik $.ajax uygulamasını nasıl kullanıyorsak aynı şekilde kullanıyoruz sadece Veri tipini(dataType) ‘script’ olarak belirliyoruz. Hepsi bu kadar.

DEMO


jQuery de live() Kullanımı

Tarih: Mart 10th, 2010 | Yazar: | Kategoriler: Javascript, jQuery | Etiketler: , | 5 Yorum »

jQuery daha doğrusu JavaScript ile az çok uğraştıysanız eğer, bir sorunu fark etmişsinizdir. Sayfa ilk yüklendikten sonra eklenen elementleri daha önce eklediğimiz eventler(click, hover…)  tanımaz, tanıması için bu eventleri tekrar çalıştırmamız gerekir. Örnek ile göstermek gerekirse bu durumu.

$(document).ready(function(){
$('p').click(function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi tıklama ile eklediğimiz paragraflara(p) tıkladığımız zaman hiçbir tepki vermiyor oysa sayfamıza ilk yüklenen paragraf(p) den hiçbir farkı yok. Bu sorunu aşmak için eklediğimiz event’i tekrar çalıştırmamız gerekiyordu daha önceden.
jQuery 1.4.0 da gelen live() methodu ile artık sayfaya yeni eklenen elementleri tanıtmak için eventleri tekrar çalıştırmamız gerek kalmadı. Şimdi yukarıdaki event’i live() methodu kullanarak tekrar yazalım ve daha iyi anlayalım.

$(document).ready(function(){
$('p').live('click', function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi son eklenen element ile ilk gelen element arasında bir fark yok. Yani ile paragrafa(p) tıklandığında da tıklama sonucu gelen paragrafa(p) da tıklandığında aynı tepkiyi görebiliyoruz. Bunu live methodu ile mümkün kıldık.

Son olarak live methoduna bir bakalım.

.live( eventType, handler )
eventType(Olay tipi): Click, hover, keydown, keyup gibi hangi olaya tepki vermesini belirlediğimiz kısım.
handler(işleyici): Olay gerçekleştiğinde çalışacak işleyici tanımladığımız kısım. Mesela ben örnekte yeni nesne ekledim.


Tarih ve zaman ile ilgili JavaScript eklentileri

Tarih: Şubat 24th, 2010 | Yazar: | Kategoriler: Javascript | Etiketler: | Yorum Yok »

Kullanıcılardan tarih veya zaman ile ilgili bilgi almamız gerekebilir bunu klasik metin kutuları veya dropdown menüler ile yapmaktansa daha görsel şekilde yapmamamız gereken durumlar olabilir. Bu ihtiyacımızı karşılayan birçok  JavaScript eklentisi mevcut bu yazımda bu eklentilerden 17 tanesinin paylaşacağım.

1. iCal-like calendars with jQuery

2. jDigiClock

3. jQuery UI Datepicker

4. jQuery date picker plug-in

5. Date Range Picker using jQuery UI 1.7

6. Date Picker jQuery Plugin from eyecon.ro

7. jQuery Date Input

8. simple jQuery date-picker plugin

9. jquery.timepickr

10. MooTools DatePicker

11. Vista-like Ajax Calendar

12. Calendar – A Javascript class for Mootools

13. MooGenda

14. Datejs

15. Nogray JavaScript Calendar Component

16. Monket Calendar

17. Calender Eightysix


Google ile döviz kurlarını öğrenelim

Tarih: Şubat 7th, 2010 | Yazar: | Kategoriler: Javascript | Etiketler: , , | Yorum Yok »

Google bir çok alanda çok farklı uygulamaları mevcut bugün bunlardan birini tanıtacağım. Döviz kurlarını öğrenmemiz değişik sebepler ile karşımıza çıkar kimi zaman e-ticaret sistemimizde kullanırız kimi zaman döviz kurları hakkında ziyaretçiye bilgi göstermemiz gerekebilir. Döviz kuru hizmeti veren birkaç servis mevcut ancak çoğu veriyi ayıklayabileceğimiz şekilde sunmuyor buda bize sorun olarak geri dönüyor. Google bu hizmetinde veriyi JSON ile kolayca ayıklayabileceğimiz şekilde gönderiyor. İstersek ayıklama işini tarayıcıda istersek sunucuda yapabiliriz.

Google dan bu veriyi almak oldukça basit. Veriyi almaya başlamadan önce buraya tıklayarak para birimlerinin kısalmasına bakalım.

http://www.google.com/ig/calculator?hl=en&q=(Dönüştürülcek miktar ve Para birimi)=?(Dönüşecek Para Birimi)

Yukarıda gördüğümüz adres üzerinden döviz kurlarını sorguluyoruz çalışan bir örneğe bakmak için aşağıdaki url ziyaret ediniz.

http://www.google.com/ig/calculator?hl=en&q=100USD=?TRY

Hepsi bu kadar!