Merhaba, uzunca süredir sessiz olan bu bloga birşeyler yazmak geldi içimden. Mfyz ile bu konu başlığında cevaplaşırken kendisi aklıma bu alandaki Türkçe döküman eksiğini kapatma fikrini sokmuş bulundu. O Mootools kullandığından o konuda yazmayı planlıyor bende script.aculo.us kullandığımdan onunla ilgili yazayım dedim. Bu ilk yazımızda bir giriş yapacağız, scu'nun kimler tarafından kullandıldığından falan bahsedeceğiim ve basit bir örnek yapacağız. Daha sonraki zamanlarda zamanım oldukça farklı konularada değineceğim ( AJAX, Drag'n Drop v.b ) .. Haydi başlayalım..

Öncelikle Script.aculo.us'ın ne olduğundan bahsedeyim biraz. SCU, Thomas Fuchs tarafından Prototype kütüphanesi kullanılarak geliştirilmiş olan kolay kullanımlı, cross-browser bi' javascript framework'ü. SCU temel olarak prototype framework'ü üzerine inşa edilmiş bir sistem. İçinde sayfalarınıza renk katabileceğiniz bir çok efekt ve güzel özellik bulunuyor. İyi,güzel söylüyorsun da Scu'yu kimler kullanıyor azcık referans ver bakalım derseniz Digg, Apple, Basecamp, Feedburner gibi başarılı ve günde binler kişinin girdiği projeler javascript ihtiyaçlarını karşılamak için Script.aculo.us kullanıyorlar

Scu'yu projelerimiz içinde kullanabilmek için ilk olarak ilgili js dosyalarını sayfamıza dahil etmeliyiz. Bu işlem için Scu download sayfasından en son versiyonu indiriyoruz.

İndirdiğimiz .zip, .gz uzantılı dosyanın içinden çıkan prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js ve controls.js isimli dosyaları site ana dizininden js yada javascript isimli bir klasör içerisine koyuyoruz.

Daha sonra javascript klasörümüz içerisine koymuş olduğumuz dosyalara erişmek için sayfamızda etiketinden önceki kısıma

Kodlarını ekliyoruz.

Bu sayfaya javascript dosyalarını dahil etme konusunda şöyle bir durum var. Eğer bu şekilde js dosyalarını sayfanıza eklerseniz Scu yapılacak işlemler için gerekli tüm js dosyalarını sayfaya dahil etmiş oluyor. Ancak siz sadece 1-2 tane kütüphaneyi dahil etmek isterseniz sayfanızın başına eklediğiniz kodda scriptaculo.us.js olan kısmı

Şeklinde değiştirebilirsiniz. Burada load= kısmından sonra virgül ile ayırmış olduğumuz kütüphaneler sayfamıza dahil edilecektir. Peki ben nerden bileyim hangi kütüphanelerin dahil edileceğin diyorsanız söyleyelim.
* builder
* effects
* dragdrop
* controls
* slider
load= 'den sonra virgül ile ayırarak yukardıa görmüş olduklarınızın hepsini yazabilirsiniz.

Hadi Kullanalım!

Yukarıdaki işlemleri başarı ile tamamladıysanız, Scu'yu sayfanıza başarı ile eklediniz demektir. Şimdi Scu'da bulunan efekt fonksiyonlarını kullanarak 1-2 seksi efekt verelim
Örneğin;

gibi bir kodumuz olsun, SCU Deneme linkine tıklandığında içinde SCU Örnek metni yazan div ögesini fade efekti vererek yok etmek isteyelim. Bu işlem için link verirken kullanmış olduğumuz

kısmını şu şekilde değiştiriyoruz.

bu işlemi yapıp, dosyayı görüntülerseniz linke tıkladığınızda içerisinde SCU Örnek metni yazan div ögesinin geçiş efekti ile yok olduğunu görebilirsiniz

Bu yazımızda Script.aculo.us'a giriş yaptık. Eğer kısmet olursa ( Sınavlarım falan kötü geçmez ise ) bu hafta içerisinde Script.aculo.us ve Prototype kullanarak AJAX işlemlerini nasıl ve ne kadar kolay bir şekilde yapacağımızı göstereceğim. Görüşünceye dek esen kalın

Twitter