ExtJs Model hakkında

Standard

Javascript’te ExtJs kullanırken, veri nesnelerimizi tanımlamak için Model kullanabiliyoruz. Javada POJO’larla yaptığımız gibi. Bunun yapmak için Ext.data.Model ‘i genişletmek ve alanları tanımlamak yeterli. Aşağıda Ogrenci modelini tanımlayalım.

Ext.define("Tf.model.Ogrenci",
{
extend:"Ext.data.Model",
fields:[
{name:"isim", type:"string"},
{name:"yas", type:"int"}
]
}
);

İstersek Ogrenci sınıfımıza ihtiyacimiz olan metodları ( fonksiyonları ) da ekleyebiliriz. Aşağıda yaz() metodunu ekledik. Öğrenci bilgilerini gosteriyor.


Ext.define("Tf.model.Ogrenci",
{
extend:"Ext.data.Model",
fields:[
{name:"isim", type:"string"},
{name:"yas", type:"int"}
],

yaz: function(){
console.log("isim : " + this.get("isim") + " yas : " + this.get("yas") );
}
}
);

Ayrıca bu alanlar için validasyonlar da belirtebiliriz. Aşağıda isim alanı icin email ( anlamsiz ama olsun ) ve uzunluk kontrolleri ekledim.


Ext.define("Tf.model.Ogrenci",
{
extend:"Ext.data.Model",
fields:[
{name:"isim", type:"string"},
{name:"yas", type:"int"}
],

validations:[
{type:"length", field:"isim", min:3},
{type:"email", field:"isim" }
],

yaz: function(){
console.log("isim : " + this.get("isim") + " yas : " + this.get("yas") );
}
}
);

Bu şekilde tanımladığımız bu sınıfları nasıl kullanacağız peki. Öncelikle bu sınıfların nesnesini oluşturmak için birkaç yöntem var.

Ext.create ile:

og = Ext.create("Tf.model.Ogrenci", {isim:"mustafa"});

kendi create metodu ile ile:

o2 = Tf.model.Ogrenci.create({isim:"cevat", yas:33});

new ile ile:

o3 = new Tf.model.Ogrenci({isim:"asdaasd", yas:3322});

Artık ogrenci nesnemizi kullanabiliriz. Alanları değiştirmek için veya değerlerini almak icin get/set metodları var.

og.get("isim");
og.set("yas", 32);

gibi. ya da kendi tanimladigimiz metodu kullanabiliriz.

og.yaz();

Validasyon için de validate() metodu var. Eğer bir sorun varsa bize hata nesnesi döner. Dönen nesnenin icinde items dizisinde hataları gorebilirsiniz.

hata = og.validate()

Mesela isim icin “aa” girmis olsaydik bize iki hata donecekti. hata.items[] da bulabilirsiniz bunlari.

{ field="isim", message="is the wrong length"}
{ field="isim", message="is not a valid email address"}

Tabii ki bunun asıl kullanıldığı yer, proxy elemanı ile servera bağlanıp, dogrudan bu nesneleri veritabanına yazdırıp, yukleyip silebilme ( kendi load()/save()/destroy() metodları var. Bir anlamda Javascript içim ORM sayılır 😛 ) ve store ‘larda kullanarak, grid ve tree ‘leri kullanmak.

ORM dedim de tanımladıgınız modeller baska model tanımlarını iceriyorsa yada aralarinda iliskiler varsa bunlari da belirtebilirsiniz. Sinif modeli tanımlayıp, Sınıf n Ogrenci ye sahip olabilir diyebiliyorsunuz.

Reklamlar

Tek mi Çift mi? Ya da sanat sanat için mi?

Standard

Bir sayının tek mi çift mi olduğunu belirleyen bir fonksiyon yazmamız gerekirse genelde yaptığımız şu:

function tekMi(sayi){
if(sayi % 2 == 0)
return false;
else
return true;
}

Bu şöyle daha iyi olabilir.

function tekMi(sayi){
return (sayi % 2 == 0) ? false : true;
}

0 ve 1 in boolean yorumlanmalarına güvenerek şu hale getirirsek daha güzel olur.

function tekMi(sayi){
return (sayi % 2);
}

Yok dönüş tipi illa boolean olacak derlerse de, javascript icin !! ile halledebiliriz, hem de güzel görünür;

function tekMi(sayi){
return !!(sayi % 2);
}

Kodlar hem kısaldı hem de bence estetik hale geldi ama koddaki estetik hep böyle faydayla birlikte mi gelir.

Geçenlerde başka bir konu için gördüğüm örnek kodları çok beğenmistim.

function tekMi(sayi){
if(sayi == 0) return false;
else return ciftMi(--sayi);
}

function ciftMi(sayi){
if(sayi == 0) return true;
else return tekMi(--sayi);
}

Bu kodları güzel bir manzarayı izler gibi izledim, bence çok güzellerdi 🙂

Gerçi bu kodları gördüğüm yerdeki problem “tek mi cift mi” yi bulmak degildi ama yukarıdaki tek satırlık şeylerle aynı işi yapmak için bu kadar kod yazmak çok uygun degil. Üstelik tek problem de bu değil. Zaman olarak da maliyetli. Dahası da var; burada en az sorguladığımız sayı kadar fonksiyon çağrısı var ve bunların her biri stack te yer demek ve büyük bir sayıyı sorgulayınca “stack overflow” hatası alırız.

Fakat bütün bu sorunlara göre bence harikaydılar.

Pratikte kullanır mısın? demeye bile gerek yok, kesinlikle kullanılmaz ama bu sekilde bir kod yazana da buyuk saygı duyarim 🙂 Bazen sanat sanat icindir. 🙂

JQuery ile çakma tıklama

Standard

Sayfada bir yere tıklanmış gibi yapmak gerektiginde ( ya da başka bir olay ) jquerydeki trigger kullanılabilir. Bu olayın ismi verilerek çağrılabilir.

$("img").trigger("click");

img’ler onlara tıklanmış gibi davranır. Fakat resimlerde belli bir noktaya tıklanmış gibi yapmak isterseniz ya da o olayı işleyen yerde event.pageX gibi bir bilgi kullanılıyorsa ( veya başka olaylarda başka bilgiler) yukarıdaki şekilde sorun olabilir. Çünkü bu bilgi orada undefined olacaktır.

Bunun için bu metodun bir de event nesnesi alan versiyonu var. Önce bir event nesnesi oluşturup, onu kullanabilirsiniz.

var ev = $.Event("click");
ev.pageX = 100;
$("img").trigger(ev)

Artık resimlere o noktada tıklanmış gibi davranıyor. O noktada aslında resim olmasa da.

Burada sadece bilinen özelliklerin ayarlanması şart değil. Şu da olabilir.

var ev = $.Event("click");
ev.pageX = 100;
ev.kim = "tafa";
$("img").trigger(ev)

Bu bilgiyi kullanırken de

$("img").click( function(e){ console.log(e.kim) } );

Olayı işleyen fonksiyona veri aktarmak için başka yollar da var tabi ama buradaki çakma olaylar tetiklemekle ilgili bir örnek.

:: trigger,jquery,fake,event, fake event ::

JQuery animasyon hızları

Standard

JQuery de animasyonlar icin ms olarak değer vermenin yanında kullanılan “slow”, “fast” ifadeleri var.

$("img").fadeOut("slow")

gibi.

Bu ifadelerin ne kadar süreye karşılık geldigini kendiniz için şu şekilde özelleştirebiliyorsunuz

$.fx.speeds.slow = 2000;
$("img").fadeOut("slow")

artık, “slow”lar daha da slow.. 🙂

Bir de bunlardan ayrı kendi hız ifadenizi olusturabilirsiniz.

$.fx.speeds.cokYavas= 5000;
$("img").fadeIn("cokYavas")

[jquery,fast,slow,animation,effect,speed]

Bu ayda kaç gün var

Standard

Sorun aslinda küçük, 28 günlük. 🙂 Şubatı hallettik mi bişey kalmıyor.


function ayGun(yil, ay){
return [31,0,31,30,31,30,31,31,30,31,30,31][ay] || (new Date(yil,1,29).getDate() == 29?29:28);
}

Şubat dışında ilk diziden herkesin kendi gün sayısı döner. Şubatta ise 0 geleceginden || icin ikinci kısma geç demek oluyor ( önceki konular için de bir uygulama oldu ). ikinci kısımda ise 28 mi 29 mu olduguna bakilip hangisi ise o donuyor.

Bunu şu şekilde de yazabiliriz

function ayGun(yil, ay){
return [31,(new Date(yil,1,29).getDate() == 29?29:28),31,30,31,30,31,31,30,31,30,31][ay];
}

Daha temiz duruyor ama burada Şubata ihtiyac olsa da olmasa da hesaplama yapmaya çalışıyor. O yuzden yukaridaki daha iyi olabilir.

yemleri de buraya koyalim. 🙂 X javascript X month X leap year X days X count X gün X sayı X artık yıl

javascript : sayi ve string ile toplama

Standard

Bazen (elemanlara width, height gibi ozellikleri hesaplayarak verirken gibi) yazdiginiz bir ifadede bir degiskenin sayi gelecegini bildiginiz icin dogrudan toplamaya kalkiyorsunuz, ama string olarak yorumlanabildigi durumlarda anlamsiz sonuclar cikiyor. Bu durumlarda benzer degiskenleri sayi olarak yorumlatmaya zorlamak gerekiyor.

Bunun için genelde şu kullanılıyor sanırım : ( 1 ile carpmak )


sonuc = 3 + 1*degisken;

Number() ile de yapilabilir (bunu kullanirsaniz parametrenizin harf, rakam karisik durumlarda -“23abc” gibi- kullanirsaniz NaN oluyor. “23” gibi durumlarda kullanın):


sonuc = 3 + Number( degisken );

parseInt() ile de yapilabilir (bunu kullanirsaniz parametrenizin harf, rakam karisik durumlarda da kullanabilirsiniz “23abc” gibi) :


sonuc = 3 + parseInt( degisken );

Bir yontem daha onune ( + ) koymak:


sonuc = 3 + +degisken;

Javascript ve mantıksal operatörler

Standard

Genellikle if ifadelerinde kullandığımız mantıksal operatörlerin (&& , ||) aslında boolean bir ifade degil de, operandlardan birisini dönmesinden bahsedeceğim. Yani bunlardan boolean bir değer beklemeyin, string, number, object filan dönebilir
Öncelikle Javascriptte boolean olmayan degerlerin boolean karşılıkları hakkında birkaç şey;

Aşağıdakiler false

null;
0;

Aşağıdakiler de true
"string";
55;
{isim:"mustafa"};

Bu konuda daha geniş bir yazıyı sonra ekleyeyim.

&& Hakkında

Bu operatör aldığı iki operanttan “false” olarak yorumlanabilecek ilkini döndürür. İkisi de false olmuyorsa, ikinci ifadeyi döndürür.

alert(null && 44); // null
alert(22 && false); // false
alert(22 && 44); // 44

|| Hakkında

Bu operatör aldığı iki operanttan “true” olarak yorumlanabilecek ilkini döndürür. İkisi de true olmuyorsa, ilk ifadeyi döndürür.

alert(null || 44); // 44
alert(22 || false); // 22
alert(22 || 44); // 22

Parametre gelmiş mi?

Fonksiyonda beklediginiz parametre gelmediyse, default bir değer kullanmak istediginiz de || kullanabiliyoruz.


function aaa(b){
b = b || 6;
alert(b );
}

aaa(); olarak cağrılırsa 6; aaa(88); olarak çağrılırsa 88 gorunuyor.
Veya;

function aaa(b){
b = b || {
genislik: 35,
yukseklik: 40
};
//....
alan = b.yukseklik * b.genislik;
}

!! ya da Boolean()

Eğer boolean karşılığını kullanmak isterseniz !! veya Boolean() kullanabilirsiniz.

alert (Boolean(null)); // false
alert (!!null); // false
alert (!!45); //true
alert (Boolean(45)); //true

null un metodu yok

Bazen karşılaşırız; bir nesnenin metodunu çağırmamız gerekir, ama runtime da o nesne null gelebilir, bu durumda “a is null” deyip kızar.
Mesela aşağıdaki kod çalışırsa, bir hata oldu diye çalışma kesilir.

function aaa(ogrenci) {
return ogrenci.getMemleket();
}

a =null;
alert( aaa(a) )

fakat burada ise, hata vermez, sadece fonksiyon null doner.

function aaa(ogrenci) {
return ogrenci && ogrenci.getMemleket();
}

a =null;
alert( aaa(a) )

if niyetine

&& operatoru if niyetine de kullanilabilir. ilk operand false ise ikinciye bakmadan onu donecek, degilse, ikinciye gececek ve isletecek.

if( deg ) islemYap();

yerine;

deg && islemYap();

Bunu bir degiskene alacak olursaniz sonucu kullanmadan once kontrol edin. fonksiyondan donen deger degil de deg‘in degeri de olabilir.


var sonuc = deg && islemYap();

varsa kullan yoksa olustur

eskiNes bos degilse onu al, boş ise yeni bitane olustur demek için || operatoru kullanilabilir. eskiNes mesela fonksiyonumuza gelen parametre olabilir.

var nes = eskiNes || nesneOlustur();

şarkının burasi google icin : logical operator, and, or