24 Ocak 2011 Pazartesi

Javascriptde Regular Expression

Çoğu zaman kullanıcının girdiği veriyi kontrol (validation) etmemiz belirli yazım kurallarına uygunluğunu denetlememiz gerekir. Ve kurallara uymayan veriyi iptal etmek yada kullanıcıya uyarı vermek suretiyle veri girişinin doğru yapılmasını sağlamaya çalışırız.

En basitinden sayı girilebilecek bir alana kişinin alfabetik bilgi girmesi ve bu şekilde kaydetmeye çalışması kod bölümünde hatalara neden olabilecektir. Olası hataları engellemek için sayı girilecek bir veri alanına kullanıcının sayı girip girmediğini kontrol etmemiz ve girilmediyse uyarı mesajı vererek kaydetme işlemini yapmamız gerekir.

Bu tip durumlarda kuralları kodlamaya kalkarsak onlarca belki yüzlerce if deyimi kullanmamız gerekecektir. Bu işlem için yardımımıza koşan bir yapı mevcut. Oda regular expressions. Türkçe karşılığı düzenli ifadeler oluyor ama bence türkçe karşılığı yapılan işe uygun değil. Bu nedenle ben ingilizce regular expression (kısacada regex) kullanacağım.

Regular Expression ne Yapar
Regexp kısaca herhangi bir karater dizisini (string) belirlediğiniz bir desene uygunluğunu test eder ve size verilen metin ifadeye uygundur veya değildir şeklinde sonuç döner. Regexp içinde iki önemli bölüm var 1. metin bilgi bu örneğin kullanıcının bir metin kutusu içine girdiği bilgi olarak düşünülebilir. 2. önemli bölüm ise desen. Regexp her zaman verdiğiniz desene göre hareket edecektir. Bu deseni hazırlamak bayağı uğraştıran bir şey ben sık kullanılanlarla ilgili aşağıda liste halinde desenleri vereceğim.

Web sayfasında regular expressions nasıl kullanabiliriz.
Öncelikle javascript regex kullanımı tanır ve destekler. Regular expressions için özel tanımlanmış RegExp sınıfı bulunmaktadır. RegExp sınıfından deseni vererek oluşturacağınız nesne üzerinden regexp sınıfı metodlarını kullanarak regular expression işlemlerini gerçekleştirebilrisiniz.
Bu işlemler exec,match,replace,split,compile,test,search işlemleridir ama ben burada sadece test üzerinde duracağım. Diğerleride çok faydalı işlemler ama şu an amacımızın sadece girilen verinin doğrulaması(validasyonu) olduğunu düşünürsek gerekli değiller.

test metodu kullanımı:
var regobj= new RegExp(desen);
if (regobj.test(girilendegerdegiskeni)) { uygun } else { uygun değil uyarı ver }
Örnek kodda da görüldüğü gibi regobj adlı bir nesne oluşturuyoruz. Sonra test metodunu kullanarak girilen verinin desene uygunluğuna bakıyoruz.
Gerçek örnek: Örneğin form1 isimli formumuzda txtSayi adli bir metin kutusu bulunsun ve burada sadece tamsayi olmasını test etmek istiyoruz. Kaydet butonumuzun onclick eventına(olayına) aşağıdaki kodu yazarak bu işlemi yapabiliriz.
var ro=new RegExp('\d');if(ro.test(document.form1.txtSayi.value)) {return true;} else {alert('hatalı giriş');return false;}
Yukarıdaki kod ile txtSayi alanı için sayı girilip girilmediğini kontrol ettirdiğimiz gibi button uyarı veriyor ve false döndüğü için submit işlemini yapmıyor. Yani veriler sayfaya post edilmiyor. Sadece uyarı mesajı geliyor.

Javascripte RegExp nesnesinin daha kısa yazımıda mevcuttur. Yukarıdaki RegExp sınıfından uzun uzun oluşturmak yerine var ro=/\b/; şeklindede regexp tanımlanabilir. Yani desenin bölü (slash) karakterleri içine alınarak yazılmasıda RegExp nesnesi oluşmasını sağlar.

Ve işte desenler...
Tamsayı^\d*$
Pozitif Tamsayı^\d+$
Negatif Tamsayı^\d-$
İşaretsiz(pozitif) Kesirli sayılar^\d*\.?\d*$
1 ile 5 arası sayılar^[1-5]$
email(\w+?@\w+?\x2E.+)
tarih(31.12.2010, 31-12-2010, 31/12/2010)^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$
tarih(31.12.2010)^([0]?[1-9]|[1|2][0-9]|[3][0|1])[.]([0]?[1-9]|[1][0-2])[.]([0-9]{4}|[0-9]{2})$
Saat^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
IP\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b

3 Ocak 2011 Pazartesi

HTML 5 Canvas (Grafik Çizim) I

HTML 5 de Canvas kullanımını basit örneklerle göstermeye çalışacağım. Bilindiği gibi HTML 5 yeni geliştirilen bir teknoloji her web tarayıcısı tam olarak desteklemese de özellikle Canvas gibi hemen hemen her tarayıcının desteklediği gelişmiş ve faydalı özelliklerde yok değil.
Öncelikle basitçe Canvas nedir dersek. Web sayfamızda belirlediğimiz bir çizim alanı(canvas) içine grafik çizimler ve hatta animasyonlar yapabilmemizi sağlayan HTML 5 teknolojisidir.

Yavaş yavaş canvas nasıl kullanırız bir göz atalım. Öncelikle ekranda çizim yapacağımız alanın belirlenmesi gerekmekte. Bunu canvas etiketi(tag) ile yaparız.
<canvas width="300" height="225"></canvas>
Yukarıda 300 piksel genişliğinde ve 225 piksel yüksekliğinde çizim alanı tanımlanmıştır. Canvası daha sonraki kullanımda belirleyebilmek için id değerini belirtmekte gerekecektir. Şöyleki;
<canvas id="cizim" width="300" height="225"></canvas>
Yukarıda cizim id'li bir canvas oluşturduk.
Şimdi javascript kodlarımız içinden bu canvası nasıl kullanacağız.
Bunun için şöyle bir koda ihtiyaç var
var cizimcanvas = document.getElementById("cizim");
Yukarıdaki kod sıkça kullandığımız bir DOM nesnesini kullandığımız koddur. cizim idli DOM nesnesi cizimcanvas isimli değişkenimize aktarılır. Bu satırdan sonraki satırlar cizimcanvas isimli değişkeni kullanarak canvas metotlarını çağırabilirler.
Canvas kullanırken öncelikle canvasın içeriğini belirlemeliyiz. Bir canvas 2 boyutlu ve 3 boyutlu içeriklere sahip olabilir. Bunu belirtmek için
var context = canvascizim.getContext("2d");
Yukarıdaki satırdan canvascizim nesnesinden 2 boyutlu (2d) cizim contextini context değişkenine aktardık. Şimdi context değişkenine 2 boyutlu context metotlarını geçebiliriz.
Örneğin bir dörtgen çizmek için;
context.fillRect(50, 25, 150, 100);
Örneğimizi görelim


Peki tarayıcı canvas metodunu destekliyormu nasıl anlayabiliriz? Eğer canvas nesnesinin getContext metodu varsa canvas destekleniyordur. O zaman kodumuzu şöyle genişletebiliriz.
if(canvascizim.getContext) {
var context = canvascizim.getContext("2d");
context.fillRect(50, 25, 150, 100);
} else
{
//Canvas yok uyar
alert('Canvas desteklenmiyor');
}
Dörtgenlerden devam edelim. Biraz önce içi dolu dörtgeni fillRect kullanarak çizmiştik peki içi boş dörtgen çizmek istersek! Bunuda strokeRect metodu ile yapabiliriz. Yukarıdaki örneğe göre;
context.strokeRect(50,50,50,50);
Dörtgen alanların parametreleri üst köşe nokta ve genişlik, yükseklik olarak girilmektedir. Yani yukarıdaki komut 50,50 noktasından 50 genişliğinde ve 50 yüksekliğinde bir kare çizecektir.

Bir dörtgen bölgeyi tamamen temizlemek için clearRect metodu kullanılabilir.
context.clearRect(45,45,75,50);



Kodun son hali
var canvascizim = document.getElementById("cizim2");
var context = canvascizim.getContext("2d");
context.fillRect(50, 25, 150, 100);
context.clearRect(45,45,75,50);
context.strokeRect(50,50,50,50);

Bu bölümde Canvasa giriş yaptık ve dörtgen fonksiyonlarına göz attık. Diğer çizim metotlarına ilerleyen makalelerde deyineceğim.

MySQL Veritabanının Yedeğini Almak

mysql/bin dizinindeki mysqldump programı veritabanımızı yedeklemek için ideal araçtır.
Kullanımı:

mysqldump -u root -p password vt_ismi > %date%.sql

Flash Player ve HTML 5 Karşılaştırması

Değişik tarayıcılar kullanılarak flash ve HTML5 teknolojileri hız açısından karşılaştırılıyorlar ve aşağıdaki grafikdeki sonuç ortaya çıkıyor. Alttaki videoda da partikül testlerinin yapılışı kaydedilmiş. Grafik saniyedeki frame sayısını gösterdiğinden yüksek olması avantaj. Flash teknolojisi açık ara önde görünüyor. Tabi HTML5'in yeni bir teknoloji olduğunu unutmamak da lazım.
Kaynak



Comparison of performance of Flash Player 10.1 and HTML 5 on Mobile Devices from michael chaize on Vimeo.

HTML 5 ve Tarayıcı Destekleri

Aşağıda HTML 5 ile gelen özellikler ve hangi tarayıcıların desteklediği güzel bir tablo oluşturulmuş. Türkçeleştirerek paylaşmak istedim. Orjinal siteye buradan ulaşabilirsiniz.

DemoSupportTechnology
dataset (data-* attributes)ie: nonefirefox: noneopera: nonesafari: nightlychrome: livedataset
Geçmiş API (pushState kullanılarak)ie: nonefirefox: nightlyopera: nonesafari: livechrome: livehistory
Dosyaları doğrudan tarayıcıya sürükleme   HTML5'in doğrudan bir parçası değilie: nonefirefox: liveopera: nonesafari: nonechrome: nightlyfile-api dnd
Basit chat istemcisiie: nonefirefox: nightlyopera: nightlysafari: livechrome: livewebsocket
İki video'nun senkron olarak çalıştırılmasıie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo
Etkileşimli canvas gradyanları ie: nightlyfirefox: liveopera: livesafari: livechrome: livecanvas
Canvas & Videoie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo canvas
Videoie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo
Canvasie: nightlyfirefox: liveopera: livesafari: livechrome: livecanvas
Değiştirilebilir İçerikie: livefirefox: liveopera: livesafari: livechrome: livecontenteditable storage
Geolocation(Coğrafi Yer) Safari Mobilde de çalışırie: nonefirefox: liveopera: livesafari: livechrome: livegeolocation
postMessage aynı domaineie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
postMessage çapraz domaineie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
sürükle bırakie: livefirefox: liveopera: nonesafari: livechrome: livednd
herşeyi sürükleie: livefirefox: liveopera: nonesafari: livechrome: livednd
çevrimdışı durumunu tesbit edebilme   Safari Mobilde de çalışırie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
navigator.onLine testleri Events kullanılmıyor sadece polls(havuzlar)ie: livefirefox: liveopera: livesafari: nonechrome: noneoffline
on/offline(çevrimiçi/dışı) event testleriie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
Manifest kullanarak çevrimdışı uygulama FF 3.6 hala buglı - başlangıç yüklemesinden sonra manifest istemiyorie: nonefirefox: liveopera: livesafari: livechrome: liveoffline manifest
Disk Alanı (Storage)ie: livefirefox: liveopera: livesafari: livechrome: livestorage
Web SQL Veritabanı Alanıie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web SQL Veritabanı- gerial testiie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web Workers uyarı - çok fazla CPU ister!örnek tarayıcınızı kitleyebilirie: nonefirefox: liveopera: livesafari: livechrome: liveworkers
http://html5demos.com/ sitesinden alınmıştır.

HTML 5 Flash ve Silverlight Değerlendirmesi

Web sitesinde yada uygulamasında grafik öğeler kullanmak için ihtiyacımız olan çizim yeteneğine sahip bir panelin bulunmasıdır. HTML 5 ile gelen canvas yada web canvas bu iş için biçilmiş kaftan. Tabi tek yöntem bu değil Flash uygulamarıda geniş çizim yetenekleri sunuyor. Ayrıca Microsoft'un yakın zamanda çıkardığı Silverlight ürünü de geniş yeteneklere sahip. Ayrıca bir türlü tam anlamıyla ortaya çıkamayan Java FX mimarisine de şöyle bir değineceğim.
Peki bir uygulama geliştirici olarak hangi altyapıyı seçmemiz en doğrusudur. Ben kendimce bu üç ürünün artı ve eksilerini ortaya koyarak makale hazırlamaya çalıştım. Ayrıca olabildiğince objektif davrandım. Sonuçta şu ürün ve bu ürün demeyeceğim ama kararı verirken göz önüne alınması gereken maddeleri bu yazıda görerek kendi kriterlerinize göre karar verebileceksiniz.

Önce ürünleri tek tek masaya yatıralım. (Sıralama ilk harflerine göre)
Flash
Flash uzun yıllardır kendini web tabanlı grafik çizimlerinde uzun süre tek olmuş. Tek olmasının konumu ile pazarı domine etmiş. Tüm diğer firmalar bu alana yatırım yapmadığı dönemde bu açığı iyi değerlendirmiş. Çok geniş bir kitleye sahip. Neredeyse tüm web tabanlı oyunların flash tabanlı olması bu konuda önemli bir gösterge. Çıkış noktası daha çok grafikerlere yönelikken son yıllarda çıkardığı Flex framework'ü ile yazılım dünyasınada kılı kırk yardırmadan birşeyler üretebilme imkanı tanıyan Adobe firmasının lokomotif ürünlerinden. Aslında tek problemi firma bağımlılığı sayılabilir. Bir başka dezavantaj ise standart dışı bir dil olan ActionScript. C++ sözdizimine yakın sayılabilecek bir script ama mutlaka ek bir çalışma gerektirecektir.
Tarayıcı tarafına bakıldığında çok geniş bir perspektifte (birçok mobil cihaz flash litede olsa flash teknolojisi kullanabilmektedir) Tarayıcı tarafına player adı verilen bir eklenti yüklenmesi gerekmektedir. Ancak bu eklenti birkaç megabyte boyunda olduğundan çok hızlı kurulabilmektedir.
HTML 5
HTML 5'in en önemli avantajı herhangi bir firmaya bağımlı olmaması. Bir çok farklı firmanın talepleri doğrultusunda şu ana kadar 4. versiyonda bulunan HTML standartlarına yeni etiket (tag) eklenerek ortaya çıkarılan HTML 5 grafik özellikleri ile çok başarılı olduğunu gösteriyor. Ancak çok ciddi bir dezavantaj web tarayıcıların HTML5 etiketlerini tam anlamıyla desteklememeleri. Yani bir tarayıcıda sorunsuz çalışan HTML 5 kodu başka bir tarayıcıda hiç çalışmayabiliyor yada ortaya çıkan görsel olması gerekenden önemli farklılıklar içerebiliyor. Topluluk açısından gerçekten yeni olmasına rağmen geniş bir kitleye sahip. Ürünün yeni olması bir dezavantaj sonuçta tam olarak oturmamış görüntüsü çiziyor. Ama gelecek vaadeden bir ürün.
Dil açısından HTML 5'e eklenmiş yeni tagları öğrenmek tabiki gerekli. Ayrıca HTML ile çalışanlar için javascript bilgisininde iyi olması gerekiyor.
Java FX
Aslında bu yazıya katıp katmamakta çok kararsız kaldım. Çünkü diğerleri ile karşılaştırılabileceğini düşünmüyorum. Tek olumlu tarafı Java teknolojisi olması ve java dilini kullananlar için avantaj teşkil etmesi. Sun firmasının Oracle tarafından satın alınması Java ve tüm türevlerini artık firma bağımlı hale getirdiğinden Java FX teknolojiside arkasında bulunan geniş açık kaynak topluluğuna rağmen Oracle bağımlıdır. Java FX yeni olmasının verdiği bir çok dezavantajları barındırmaktadır. Sürekli ortaya çıkan buglar. Kaynak eksiklikleri bunların başlıcaları denilebilir.
Kullanıldığı tarayıcılara genellikle çok küçük bir eklenti yüklemesi bir avantaj ancak mobil cihazlar için eklentilerine rastlayamadım.
Silverlight
Silverlight Microsoft'un web dünyasına kazandırdığı bir framework. Bana göre birkaç büyük dezavantajı var. Birincisi firma bağımlılığı. Diğeri ise yeni bir framework olmanın getirdiği tüm dezvantajları taşıyor olması. Bunları kısaca sık sık bug çıkması. Sürümler arasında tutarsızlıklar (bir sürüme eklenen bir fonksiyonun kaldırılması yada parametrelerinde önemli değişiklikler yapılması), kaynak eksikliği ve topluluğun küçük olması denilebilir. Bu dezavantajlara rağmen çok kullanılan dillerde (vb, c#) kod yazılabilmesi bir avantaj. Visual Studio IDE'si de asp/aspx kullanıcıları için çok hızlı üretim yapmalarını sağlayacaktır. Tarayıcılarda tüm tarayıcıları destekleyememesi ciddi bir dezavantaj. Mobil cihazlarda da sınırlı görünüyor(.

Tüm Makalenin Daha kolay anlaşılabilmesi için olumlu/olumsuz yönleri tablo halinde vererek makaleyi tamamlayalım.












ÖzellikFlashHTML 5Java FXSilverlight
Firma Bağımlığığı-+--
Bilinen Diller-+++
Geniş Topluluk++--
Stabil Olma Durumu+---
Kaynak Bulabilme++-(*)- (*)
Mobil Cihazlar+--+(**)
Tarayıcı Desteği
+-++
* Kaynak tabiki bulunuyor ancak diğerleri kadar çok ve kapsamlı değiller
** Silverlight aslında sadece Windows tabanlı mobil cihazlarda eklentiye sahip Windows dışı mobil platformları arayan bu özelliği - olarak dikkate almalılar.

Burada Java/Java Aplet neden yok denecektir. Java tam anlamıyla konuma uymuyor. Çünkü yükleyen kişinin siteye ciddi manada güveniyor olması gerekiyor. Yine Microsoft ActiveX teknolojisinide değerlendirmeye almıyorum. Burada aranılanın karşı tarafta güven problemi oluşturmadan web üzerinde grafik çizebilmek olduğunu düşünüyorum. Java ve activeX teknolojileri tam olarak bu tanıma uymuyorlar. Java Apletler ise bayağı eski bir teknoloji ama yerini Java FX'e bırakıyor olduğundan bu makaleye dahil etmedim.

Son söz olarak geliştiricilere naçizane birkaç tavsiyem olacak. Öncelikle proje gereksinimleri net olarak ortaya konulmalı ve proje gereksiniminde bulunmayan özellikler değerlendirmeye alınmamalı. Örneğin zaten mobil bir cihazda kullanmayacağınız uygulama için mobil cihazda çalışıp çalışmaması önem taşımayacaktır. Ayrıca bazı özelliklerin karşısında + olmasına rağmen projenizdeki bir gereklilik onu - değerlendirmenizi gerektirebilir. Bana göre herhangi bir framework'ün bir diğerinden daha iyi olması diye bir kavram yoktur. Daha çok proje gerekliliklerini daha iyi karşılıyor olması yada karşılamıyor olması durumu vardır. Buda her proje için değişkendir. Ayrıca zamanda önemli bir faktördür. Bu gün kaynak yetersiz diyebileceğiniz frameworkler ileride çok fazla kaynağa sahip olabilirler.