Programlama
     Sistem
     Web & Grafik
     Genel Konular
     Yarışma

Ceviz.Net RSS/XML




  Yazarlar 
$babacan
ab
abdagli
acehreli
Akın Öcal
anov
ApexLoader
apranaxfort
ArkHe
arthon
ASA
Asosyal
Barcoder
bronze
bunalthe
burhanmt
C-Nem
CaddeClub
Caesar
callaki
cappytoi
captainzap
Cekici
cemaliozan
civciv
civil
Codder
cubbuk
darky_dark
deathisonitsway
diablo
dkoksal
dreammaker
Dreamy
Emre
esmaeild
Euclides
fatihhood
Felix
fgenc
fixman
Fobus
fuzbing
gorgpix
Guardian
HaokaH
hiko
hmustak
hsyn
HunTER
Huzeyfe
IcenGuard
john doe
jtaz
KamilORS
KaravanaBatu
karflake
kelalaka
kGlz
Magic2Melody
McTeo
Memik Yanık
memphiswoo
merush
Meteryus
Midgard
mkarabulut
Mr_MOON
muharrem_tac
myavruturk
myavuzselim
not:found
oCRaCy
Okan
omerosmanoglu
pan
PaNTHeRa_
ParK
perlci
pirilti
portalturks
Predator
prf_q
Psychaos
Pwm
Raiden
RaiST
Rapsodi
realist
realmusti
redial
renegade1905
Revlis
roksan
Sahin
Sam Orpheus
sametweb
Scorpion
SEYRANLI
SGurel
sineld
sinoo
smasherz
Sniper
some_plus
SrcnCkr
tankado
teddmcload
TreeDY
turansoylu
Turok
UmutZafer
uszr
UuuR
vampire
Volkan Uzun
xXx
X_
yaso_19
yesilvadi
yildizib
Zerzevat Adam
Övünç Mete
 

Programlama

:: 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 ile bicimlendirip, property ve eventlarini tanimlamamizi saglar.
  8. $timer objesi: Gorsel programlama dillerindeki timer nesnelerinin benzeridir.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
  12. 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:
  1. msie
  2. msie4
  3. netscape
  4. 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:
  1. element: olusturulan elementi saklar.yani $element nesnesiyle olusturdugumuz elementin, element icerigne ulasmak istedigimizde elementAdi.element seklinde tanim yapmak gerekir.
  2. 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.
  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:

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:
  1. Element
Methodlari:
  1. doc: verilen nesnenin icerik degerini tutar.
  2. 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 :))


civciv 08.02.2007
co.mments  del.icio.us  digg  Furl  NewsVine  Reddit  Spurl  TailRank  Wists   



Rating : 10 üzerinden 8.43
 



Tümünü Göster / Sadece Başlıklar Yorumlar

Ömer Çok iyi
Fevkalade 'nin fevkinde

 

hayrullah wysiwyg editörünüz
çalışmanız çok güzel ama wysiwyg editörünüz xhtml uyumlu değil.

 

anonim amerikanin kesfi
neden mootools ve prototype varken boyle birsey gelistirmeye kasiyorsunuz?

mootools için turkce dokumantasyon ve tutorial yazmak, plug-in add-on geliştirmek çok daha faydali olacaktir diye dusunuyorum..

 

Nuri Akman Süper bir çalışma, ellerine sağlık
CivCiv-Lib'inizi kullanıyorum. Elinize sağlık. Beni javascript'de kod yazmaktan kurtarıyor. getElementById yazmaktan o kadar bıkmıştım ki... Yeni çalışmalarınızı bekliyor, kolaylıklar diliyorum...

 

adem teşekkür ve ayıp yani mesajı
script için teşekkürlerimi iletiyim dedim, gerçekten hoş olmuş, lakin neden bazı insanlar desteklemek yerine kösteklerler bunu da hiç anlamam. istemeyen kullanmaz bu kadar basit. yani şu mesajın anlamı neki: neden mootools ve prototype varken boyle birsey gelistirmeye kasiyorsunuz?

 

karixma_ext amerikanin kesfi için
mootools varken civcivlib yazmak bir gerek-gereksizlik değil bir tercih olayı.İlgisini çeken moofx ya da dojo vs kullanır ilgisini çeken civciv kullanır.

Javascript konusunda bize yeni bir alternatif yaratmış olmanız gerçekten güzel bir olay.Projenizin sadeliği ve pratikliği konusunda sizi tebrik etmek istiyorum.Ayrıca actionscript geliştiricisi olarak sizin gibi bir ürün verememiş , başka amerikalar keşfedememiş birisi olarak size çalışmalarınızda başarılar diliyorum...

 

cesur türk tebrik
civciv helal kardesım ya konusturmussun tecrubeyı javs konusunda yenı bır altrnatıf yaratmıssın kardesım ellrıne saglık bana ulasmanı ıstıyorum cıvcıv yabanci51_52 ok basarılar dılıyorum

 





» Yorum ekle
 
İsminiz:
Mailiniz:
Yorum Konu:
Güvenlik Kodu: güvenlik kodu
Bütün alanları doldurmanız gerekmektedir.


 
Forumda Aktif Olan Son 15 Konu

Designed by Gurdesign
www.gurdesign.com


1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99  100  101  102  103  104  105  106  107  108  109  110  111  112  113  114  115  116  117  118  119  120  121  122  123  124  125  126  127  128  129  130  131  132  133  134  135  136  137  138  139  140  141  142  143  144  145  146  147  148  149  150  151  152  153  154  155  156  157  158  159  160  161  162  163  164  165  166  167  168  169  170  171  172  173  174  175  176  177  178  179  180  181  182  183  184  185  186  187  188  189  190  191  192  193  194  195  196  197  198  199  200  201  202  203  204  205  206  207  208  209  210  211  212  213  214  215  216  217  218  219  220  221  222  223  224  225  226  227  228  229  230  231  232  233  234  235  236  237  238  239  240  241  242  243  244  245  246  247  248  249  250  251  252  253  254  255  256  257  258  259  260  261  262  263  264  265  266  267  268  269  270  271  272  273  274  275  276  277  278  279  280  281  282  283  284  285  286  287  288  289  290  291  292  293  294  295  296  297  298  299  300  301  302  303  304  305  306  307  308  309  310  311  312  313  314  315  316  317  318  319  320  321  322  323  324  325  326  327  328  329  330  331  332  333  334  335  336  337  338  339  340  341  342  343  344  345  346  347  348  349  350  351  352  353  354  355  356  357  358  359  360  361  362  363  364  365  366  367  368  369  370  371  372  373  374  375  376  377  378  379  380  381  382  383  384  385  386  387  388  389  390  391  392  393  394  395  396  397  398  399  400  401  402  403  404  405  406  407  408  409  410  411  412  413  414  415  416  417  418  419  420  421  422  423  424  425  426  427  428  429  430  431  432  433  434  435  436  437  438  439  440  441  442  443  444  445  446  447  448  449  450  451  452  453  454  455  456  457  458  459  460  461  462  463  464  465  466  467  468  469  470  471  472  473  474  475  476  477  478  479  480  481  482  483  484  485  486  487  488  489  490  491  492  493  494  495  496  497  498  499