:: civciv-lib 0.0.2 ile gelismis javascript uygulamalari
Dokumanin Icerigi:
- Baslarken
- Ogrenmeye hazirim, baska nelere hazir olmaliyim?
- $a fonksiyonu: Elementleri attribute adi ve degerlerine gore cagirir (getElementsByAttribute)
- $c fonksiyonu: Cookie yazma ve okuma islemleri yapar.
- $n objesi: Tarayici tespiti icin kisayoldur.Boolean deger dondurur.
- $$style fonksiyonu: css kodu calistirir. ornegin: $$style("body { background-color:red }") gibi..
- $element objesi: Tek komutla bir html elementi olusturup, css ile bicimlendirip, property ve eventlarini tanimlamamizi saglar.
- $timer objesi: Gorsel programlama dillerindeki timer nesnelerinin benzeridir.Istenen isi belirli zaman araliklarinda yapmamizi saglar.
- $wysiwyg objesi: Bir sayfayi zengin metin editorune donusturup, komutlarla metinsel islemler yapmamizi saglar.
- $include fonksiyonu: XmlHttpRequest teknigine gore daha basit, hizli ve faydali ajax tekniklerinden biridir.
- Bitirirken
- PDF
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.
Ogrenmeye hazirim, baska nelere hazir olmaliyim?Civciv-lib'i calistirmaya hazir olmalisiniz. Bunun icin sayfanizda su kodu kullanabilirsiniz:
<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.
<a href="http://ceviz.net">ceviz</a>
<a href="http://civciv.kodfabrik.com">civciv-lib</a>
<a>foobar</a><script>
var elements = $a("href");
</script>
Ornekte href degeri yazilmis olan ilk iki linki sectik. Eger href degeri sadece ceviz.net olan bir linki secmek isteseydik, kucuk bir degisiklik bunun icin yeterliydi:
<script>
var elements = $a("href","http://ceviz.net");
</script>
$c() Fonksiyonu:
Javascript'in pek de rahat kullanilamayan cookie fonksiyonlari icin bence cok iyi bir kisayoldur. Hem yazma hem okuma isleri bu fonksiyona gonderilen bir degerle yapilir, ornek olarak bir yazma islemi yapalim:
<script>
$c("uyeAdi=civciv");
</script>
Cookie dosyasinda uyeAdi bilgisinin degeri civciv olarak yazildi.Simdi yazdigimiz cookie'yi yine $c fonksiyonuyla okuyalim:
<script>
var uyeAdi = $c("uyeAdi");
</script>
uyeAdi degiskenimiz daha once yazdigimiz 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:
- msie
- msie4
- netscape
- opera
Tum methodlar boolean deger dondurur, ornek verelim:
<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:
<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 eventlarini olusturur.Istenirse elementi siler.Fonksiyonun icerigini inceleyelim:
<elementTag'i ozellik bilgisi event bilgisi style="css bilgisi">elementin içindeki yazı</elementTag'i>
<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 bir ozelliktir. Olusturacagimiz elementte de bu ozellikleri belirtiyoruz. Kod icinde ozellikleri su bicimde belitiriz: { href:"ceviz.net", target:"_blank" }
Event Bilgisi: tipki ozellik olusturdugumuz bicimde, eventlar da olusturabiliriz. Ornegin elemente tiklandiginda bir fonksiyon calismasini saglayabiliriz: { click:function(){ alert("merhaba!") } }
Fonksiyon icerigini ogrendigimize gore somut bir ornek verebiliriz:
<a href="sayfa.html" target="_blank" onclick="alert('merhaba!')" style="text-decoration:none; font-size:24px">link basligi</a>
<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:
<input />
<script>
var input = new $element("input",document.body);
</script>
Gecelim $element nesnesinin methodlarina:
- element: olusturulan elementi saklar.yani $element nesnesiyle olusturdugumuz elementin, element icerigne ulasmak istedigimizde elementAdi.element seklinde tanim yapmak gerekir.
- style: elementin style objesidir. ornegin elementi olusturduktan sonra yeni bir css islemi yapmak istersek, elementAdi.style.set({ border:'1px solid red' }); seklinde komut veririz. daha detayli bilgi icin kullanim kilavuzundaki $style objesini inceleyebilirsiniz.
- 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:
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 nesnesini zengin metin editorune donusturur ve komutlarla yonetmeyi saglar. Ayrica tamamen bu nesneyle hazirladigim bir
wysiwyg ornegini inceleyebilirsiniz.
Ozellikleri:
- Element
Methodlari:
- doc: verilen nesnenin icerik degerini tutar.
- command: wysiwyg nesnesine komutlar gondermeyi saglayan methottur.
Ornek verelim:
<button onclick='editor.command("bold")'>Bold</button>
<button onclick='editor.command("justifycenter")'>Center</button>
<button onclick='editor.command("forecolor","#ff0000")'>Red</button><br /><br />
<iframe id="editor" style="width: 400px; height:270px"></iframe>
<script>
var editor = new $wysiwyg($('editor'));
</script>
Ornekte 3 adet butonun editore komutlar gonderdigini gormus olmalisiniz. Peki bu 3 komut disinda hangi komutlar var? Buraya yazdigim takdirde dokuman karmakarisik olacagindan komut listesini ve bir ornegi su adreste inceleyebilirsiniz:
http://civciv.kodfabrik.com/civciv.php?browse=$wysiwyg$include fonksiyonu
Javascript belgesi cagirmayi saglar. Ornegin bir linke tiklandiginda
include("dosya.js") komutuyla javascript belgesini calistirabilir ve bu bicimde ajax islemlerini daha hizli ve pratik hale getirebiliriz.
Artilari nelerdir?
- Pratiktir.
- 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 bana e-posta atarak hatanin duzeltilebilmesini saglayabilirsiniz. Ama en guzeli, civciv-lib icin fonksiyonlar hazirlayabilir ve katkida bulunabilirsiniz.. Daha iyi bir dunya icin civciv-lib kullanmayi, desteklemeyi ve herkese tavsiye etmeyi ihmal etmeyin, sevgiyle kalin :))
| Rating : 10 üzerinden 8.43 |
