Civciv-lib 0.0.2 ile Gelismis Javascript Uygulamalari

Dokumanin Icerigi:

1. Baslarken
2. Ogrenmeye hazirim, baska nelere hazir olmaliyim?
3. $a fonksiyonu: Elementleri attribute adi ve degerlerine gore cagirir (getElementsByAttribute)
4. $c fonksiyonu: Cookie yazma ve okuma islemleri yapar.
5. $n objesi: Tarayici tespiti icin kisayoldur.Boolean deger dondurur.
6. $$style fonksiyonu: css kodu calistirir. ornegin: $$style("body { background-color:red }") gibi..
7. $element objesi: Tek komutla bir html elementi olusturup, css ilebicimlendirip, property ve eventlarini tanimlamamizi saglar.
8. $timer objesi: Gorsel programlama dillerindeki timer nesnelerininbenzeridir.Istenen isi belirli zaman araliklarinda yapmamizi saglar.
9. $wysiwyg objesi: Bir sayfayi zengin metin editorune donusturup, komutlarla metinsel islemler yapmamizi saglar.
10. $include fonksiyonu: XmlHttpRequest teknigine gore daha basit, hizli ve faydali ajax tekniklerinden biridir.
11. Bitirirken

Baslarken
Bu yaziyi okumaniz civciv-lib ile neler yapabileceginiz hakkinda fikir verebilir ancak uygulamaya gecmeden once civciv-lib kullanim kilavuzu baslikli yazida temel bilgileri edinmenizi oneririm.

Not: Dokumandaki okuma zorluklari cektiginiz kisimlari, renklendirilmis pdf dosyasindan inceleyebilirsiniz: http://civciv.kodfabrik.com/download...%20giris.pd f

Ogrenmeye hazirim, baska nelere hazir olmaliyim?
Civciv-lib'i calistirmaya hazir olmalisiniz. Bunun icin sayfanizda su kodu kullanabilirsiniz:

Kod:

<script src="http://civciv.kodfabrik.com/civciv-lib-0.0.2.js" type="text/javascript"></script>

$a() Fonksiyonu:
Tipki getElementById fonksiyonu gibi, sayfadan bazi elementleri,ozelliklerine gore cagirmamizi saglar. Ornegin calistigimiz sayfada"href" degeri olan elementleri cagirabiliriz.

Kod:

<a href="http://ceviz.net">ceviz[/url]
<a href="http://civciv.kodfabrik.com">civciv-lib[/url]
<a>foobar[/url]
<script>
var elements = $a("href");
</script>

Ornekte href degeri yazilmis olan ilkiki linki sectik. Eger href degeri sadece ceviz.net olan bir linkisecmek isteseydik, kucuk bir degisiklik bunun icin yeterliydi:

Kod:

<script>
var elements = $a("href","http://ceviz.net");
</script>

$c() Fonksiyonu:
Javascript'in pek de rahat kullanilamayan cookie fonksiyonlari icinbence cok iyi bir kisayoldur. Hem yazma hem okuma isleri bu fonksiyonagonderilen bir degerle yapilir, ornek olarak bir yazma islemi yapalim:

Kod:

<script>
$c("uyeAdi=civciv");
</script>

Cookie dosyasinda uyeAdi bilgisinin degeri civciv olarak yazildi.Simdi yazdigimiz cookie'yi yine $c fonksiyonuyla okuyalim:

Kod:

<script>
var uyeAdi = $c("uyeAdi");
</script>

uyeAdi degiskenimiz daha onceyazdigimiz cookie'den civciv degerini aldi.Gordugunuz gibi gayet basit,dikkat etmemiz gereken tek sey = isaretini cookie yazmak icin kullanmak.

$n() Fonksiyonu:
Kullanicinin hangi tarayiciyi kullandigini tespit etmek icin kullaniriz. Methodlari sunlar:

1. msie
2. msie4
3. netscape
4. opera

Tum methodlar boolean deger dondurur, ornek verelim:

Kod:

<script>
if($n.msie)
{
alert("Internet explorer kullaniyorsunuz, bence kullanmayin");
}

if($n.msie4)
{
alert("Internet explorer 6 kullaniyorsunuz, ie7 kullanmalisiniz");
}

if($n.netscape)
{
alert("Netscape veya Firefox kullaniyorsunuz, tebrikler");
}

if($n.opera)
{
alert("Opera kullaniyorsunuz, tebrikler");
}
</script>

$$style Fonksiyonu
Tanimda belirttigim gibi, css kodu calistirir. Ornek verelim:

Kod:

<div id="foo"></div>
<script>
$$style("body { background:red }");
$$style("#foo { color:white }")
</script>

$element Objesi:

Istenen tipte html elementi olusturur, elementi sayfaya yerlestirir,css ile bicimlendirir, attribute degerlerini yazar ve eventlariniolusturur.Istenirse elementi siler.Fonksiyonun icerigini inceleyelim:

Not:Bu bolum renklendirildiginden okuma zorlugu cekmemek icin pdf dosyasindan okumanizi oneriyorum: http://civciv.kodfabrik.com/download...%20giris.pd f

<elementTag'i ozellik bilgisi event bilgisi style="css bilgisi">elementin içindeki yazı</elementTag'i>

Kod:

<script>
var baglanti = new $element(element tag'i,yerlesecegi element,css bilgisi,ozellik bilgisi,event bilgisi,elementin icindeki yazi);
</script>

Element Tag'i: Bir baska deyisle olusturacagimiz elementin kodu; div, table, img, a, strong vs..
Css Bilgisi: Ilk versiyondaki $style nesnesini elemente uygulamamizi saglar.
Ozellik bilgisi: Ornegin <a href="ceviz.net" kodundaki href birozelliktir. Olusturacagimiz elementte de bu ozellikleri belirtiyoruz.Kod icinde ozellikleri su bicimde belitiriz: { href:"ceviz.net",target:"_blank" }
Event Bilgisi: tipki ozellik olusturdugumuz bicimde, eventlar daolusturabiliriz. Ornegin elemente tiklandiginda bir fonksiyoncalismasini saglayabiliriz: { click:function(){ alert("merhaba!") } }

Fonksiyon icerigini ogrendigimize gore somut bir ornek verebiliriz:

Kod:

<a href="sayfa.html" target="_blank" onclick="alert('merhaba!')" style="text-decoration:none; font-size:24px">link basligi[/url]
<script>
var baglanti = new $element("a",document.body,{ textDecoration:"none", fontSize:'24px' },{ href:"sayfa.html", target:"_blank" }, { click:function(){ alert("merhaba!") } },"Link Basligi");
</script>

Kafasi karisanlar icin basit bir ornek:

Kod:

<input />
<script>
var input = new $element("input",document.body);
</script>

Gecelim $element nesnesinin methodlarina:

1. element: olusturulan elementi saklar.yani $element nesnesiyleolusturdugumuz elementin, element icerigne ulasmak istedigimizdeelementAdi.element seklinde tanim yapmak gerekir.
2. style: elementin style objesidir. ornegin elementi olusturduktansonra yeni bir css islemi yapmak istersek, elementAdi.style.set({border:'1px solid red' }); seklinde komut veririz. daha detayli bilgiicin kullanim kilavuzundaki $style objesini inceleyebilirsiniz.
3. kill: elementi silmeye yarar. elementAdi.kill(); seklinde kullanilir.

Bu nesnenin biraz pratikle daha iyi anlasilacagini dusunuyorum.

$timer objesi:
Delphi, Visual Basic ve c#'ta gorup cok sevdigimiz nesnelerden biri olan timer nesnesinin javascript'teki klonudur diyebilirim.

Ozellikleri:

* interval: fonksiyonun kac milisaniye arayla tekrar edecegini belirler.
* loop: fonksiyonun kac kez tekrar edecegini belirler.
* onComplete: $timer'in tekrar islemleri bitince bir fonksiyon calistirmasini saglar.
* fonksiyon: $timer'in calistiracagi fonksiyondur.

Methodlari:

* counter: dongunun kac kez tekrar ettigini tutan degiskendir.
* kill: tum donguyu durdurur ve $timer nesnesini oldurur.

Ornek Verelim:

Kod:

3 Saniyede bir  "Merhaba" mesajiyla $timer'in kacinci kez dondugunu gosteren, loop ozelligiyle 5 defa donecegi belirtilen, dongu bitince bitir() fonksiyonunu calistiran script:
<script>
function bitir()
{
alert("Döngü bitti!");
}
var zaman = new $timer({ interval:1000, loop:4, onComplete:bitir },function(){ alert("merhaba"+zaman.counter)  })
</script>

$wysiwyg Nesnesi:
Zengin metin editoru olusturmak icin yapilmistir, bir iframe nesnesinizengin metin editorune donusturur ve komutlarla yonetmeyi saglar.Ayrica tamamen bu nesneyle hazirladigim bir wysiwyg ornegini inceleyebilirsiniz.

Ozellikleri:

1. Element

Methodlari:

1. doc: verilen nesnenin icerik degerini tutar.
2. command: wysiwyg nesnesine komutlar gondermeyi saglayan methottur.

Ornek verelim:

Kod:

<button onclick='editor.command("bold")'>Bold</button>
<button onclick='editor.command("justifycenter")'>Center</button>
<button onclick='editor.command("forecolor","#ff0000")'>Red</button>



<iframe id="editor" style="width: 400px; height:270px"></iframe>

<script>

        var editor = new $wysiwyg($('editor'));

</script>

Ornekte 3 adet butonun editorekomutlar gonderdigini gormus olmalisiniz. Peki bu 3 komut disinda hangikomutlar var? Buraya yazdigim takdirde dokuman karmakarisik olacagindankomut listesini ve bir ornegi su adreste inceleyebilirsiniz:http://civciv.kodfabrik.com/civciv.php?browse=$wysiwyg

$include fonksiyonu
Javascript belgesi cagirmayi saglar. Ornegin bir linke tiklandigindainclude("dosya.js") komutuyla javascript belgesini calistirabilir ve bubicimde ajax islemlerini daha hizli ve pratik hale getirebiliriz.

Artilari nelerdir?

* Pratiktir. if(a==b)$include("abc.js") seklinde kolayca kullanilir.
* Hizlidir.
* XmlHttpRequest'in aksine domainler arasi calisabilir.
* Xhr/xml ikilisinden pek hoslanmayan ama Dom/JSON calismaya bayilan kisiler icin idealdir.

Bitirirken
civciv-lib kullanirken bir takim hatalarla karsilastiginizda banae-posta atarak hatanin duzeltilebilmesini saglayabilirsiniz. Ama enguzeli, civciv-lib icin fonksiyonlar hazirlayabilir ve katkidabulunabilirsiniz.. Daha iyi bir dunya icin civciv-lib kullanmayi,desteklemeyi ve herkese tavsiye etmeyi ihmal etmeyin, sevgiyle kalin

Kaynak: zoque forum