civciv-lib 0.0.2 ile gelismis javascript uygulamalari

08 Şubat 2007 | Kategori: PROGRAMLAMA | Yazar:

civciv-lib’in yeni versiyonunda bulunan $a (getElementsByAttribute), $c (cookie), $n (navigator), $element, $timer, $wysiwyg, $include fonksiyonlarini detayli aciklama ve orneklerle inceleyelim.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:

$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:

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:

$c("uyeAdi=civciv");

</script>

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

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:

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:

$$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>

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:

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 )

Arama Terimleri:

javascript uygulamaları, javascript ile c#elementine ulaşmak

Benzer Konular:

civciv-lib kullanim kilavuzu Javascript gelistirirken cesitli kolayliklar saglayan civciv-lib adli kutuphane hakkinda detayli bilgi ve orneklerle daha anlasilir hale getirdigim kutuphane icerigi.Civciv-lib nedir?Javascript...
JavaScript Dünyasında Adım Adım Netscape firmasının JavaScript dilini geliştirmesindeki amaç HTML (Hyper Text Markup Language – Zengin Metin İşaretleme Dili)‘nin dinamik …Yazı dizimizin giriş...
Javascript Nedir? Javascript, bir Web scripting dilidir. Netscape ve IE’nin desteklediği client (kullanıcı) taraflı, yani kullanıcının bilgisayarında işlem gören bir dildir…Javascript, bir...

Yazar - 08 Şubat 2007. Kategori PROGRAMLAMA. Bu yazıya yazılan yazıları RSS üzerinden takip edebilirsiniz RSS 2.0. Yorum yazabilir veya geri izlemede bulunabilirsiniz.