Programlama
Java
OS
GNU/Linux
Web Tasarım
JavaScript
Programlama
C++
Network
LAN
Programlama
C - Assembly
Network
Wireless
Programlama
J2EE
C - ANSI
Veritabanı
SQL
Programlama
Oyun Programlama
Teknikler
Flax
IRC
Programlama
Delphi
Teknikler
Donanım
Web Tasarım
ASP / ASP.NET
Perl
Teknikler
Adım Adım
Tasarım
Web Tasarım
ASP.NET
XML
PHP
CADD
GIS
Teknikler
Yazılım
Kriptoloji
Programlama
C#
OS
Symbian
Programlama
Matlab
Web Tasarım
(X)HTML






 
 
 
 
 
 
 
 





Hakkı Öcal - İnternet bitiyor mu?
(Temmuz 2005 - Profilo alışveriş merkezi)
Video & Ses kayıtlarına ve resimlere ulaşmak için tıklayın


BİLİŞİM-ODTÜ 2005 ANKARA FUARI
mutasyon.net etkinliği


Workcube Mutasyon.net'i destekliyor.


Mutasyon.Net bir INETA üyesidir.


Mutasyon.Net SAGUAR'ı destekliyor.


bilişim, müzik, hayat | eski dost düşman olmaz, beni seven pişman olmaz



JSAN: JavaScript için CPAN
Burak GÜRSOY
YazdırYazara ileti gönder





JSAN: JavaScript için CPAN

Bilindiği gibi, Perl kullanırken, elimizin altında her zaman hazır bir alet çantasıda mevcuttur. Bir sorunu çözemediğimizde, başka birilerinin bunu daha önceden çözmüş olma ihtimali genellikle vardır. CPAN arşivi, bir Perl programcısı için vazgeçilmez olsada diğer dillere veya diğer yardımcı dillere ihtiyaç olduğunda, eğer o dil için CPAN benzeri bir oluşum yoksa, bu hem can sıkıcı olacaktır hemde yazacağımız ve ilgileneceğimiz kod satırı sayısını arttıracaktır.

Perl ile sunucu taraflı programlama yaptığımızda, kullanıcıyla sunucu tarafında etkileşime geçmemiz dışında, grafik arayüzümüzdede bir etkileşim katmanı eklemek istememiz mümkündür. HTML bir programlama dili olmadığı içinde, bu konudaki tek seçeneğimiz JavaScript olacaktır (vbs mi? o da ne?). Ancak JavaScript' in bazı sorunları var. Öncelikle CPAN benzeri bir yapıya sahip değil(di). Tabii ki bir çok JavaScript kod arşiv sitesi var, ancak bunlar bir çok benzer (ve çoğu zaman yetersiz) ve standart-olmayan kodlardan oluşan bir çöplük görüntüsünde. Diğer bir sorunumuz ise JavaScript' in Perl' ün tersine oldukça zayıf bir dil olması ve bir çok özelliği içermemesi. Örneğin, günümüzde kullandığımız JavaScript sürümlerinin sınıf kavramından, dolayısıyla ad boşluğu kavramından haberleri yok. Dolayısıyla ad ihracı/ithali gibi kavramlarda geçersiz. Dahada önemlisi bir yükleyicimizde yok (aslında bir yükleyicimiz var: HTML <script> etiketleri).

Bazı Perl-insanları, bu eksikliği farkedip, JavaScript için CPAN benzeri bir arşiv sitesi oluşturmaya karar verdiler ve adını JSAN (JavaScript Archive Network) koydular. Tabii, ``Bu işi neden JavaScriptçiler yapmıyorda Perlcüler yapıyor?'' gibi bir soru aklınıza gelebilir. Aslında bir modül yapısı oluşturmak için gerekli özeliklerin JavaScript/ECMAScript' in ileriki sürümlerine eklenmesi söz konusu, ancak arşiv projesi Perlcülere nasip olmuş durumda. JSAN çok yeni bir oluşum olduğu için, sitesinde ve işleyişinde bir sürü eksiklik var ve henüz ``arşiv'' denebilecek kadar çok modüle sahip değil. Ancak, zaman içinde bunların hepsi çözümlenecektir.


Öykünürüm, öykünürsün, öykünür, öykünürüz, öykünürsünüz, öykünürler

JavaScript' in bazı eksikliklerinin olduğundan sözetmiştik. Konumuzla bağlantılı en önemli eksikliği ise, dilin sınıf kavramını içermemesi. JavaScript, prototip tabanlı nesneler ve bunların metodlarından oluşan bir dil. Her yerde nesneler var, ama sınıf yok. Sınıf olmadan da, bir kodu diğerlerinden soyutlamak biraz zorlayıcı bir işlem. Ancak, sınıf gibi gözüken kodlar oluşturmak mümkün. ``Sınıf yok'' dememize rağmen, bir tür öykünmeyle sınıf türü yapılar oluşturmak üzerine konuştuğumuz için, bundan sonra sınıf sözcüğünü kullanacağız.

Sınıflar

Perl' de 1. seviyenin üstündeki sınıflara / ad boşluklarına :: ayracı ile erişebiliyoruz (ör: Mutasyon::Ornek). JavaScript ile böyle bir şeyi, en azından günümüzde, kullanmak olası değil. Ancak, elimizde nesneler olduğuna göre nokta (.) her zaman kullanıma hazır ve bir sınıfı noktayla tanımlayabiliriz. Bu durumda sınıfımızın adı Mutasyon.Ornek olacaktır. Aslında ``sınıfımız'' sizinde farkedebileceğiniz gibi bir değişken, daha doğrusu bir nesne. Ve iki parçadan oluşuyor: Mutasyon ve Ornek. Buna göre, Ornek den önce Mutasyon tanımlı olmalı. Peki ya Mutasyon tanımlı değilse? Eğer bir tanımlama koyarsak sorun çözülecekmiş gibi gözüküyor:

   var Mutasyon = {};
   Mutasyon.Ornek = function () { // oluşturucu
      this.ozellik = 'falan filan';
   };

Ancak, ya diğer bir Mutasyon.* sınıfı daha varsa? O zaman bizim tanımızla, diğer modülün tanımı çakışacaktır. Bu yüzden bir hile yapmak gerekiyor:

   if (!Mutasyon) var Mutasyon = {}; // eğer tanımlanmamışsa, tanımla
   Mutasyon.Ornek = function () { // oluşturucu
      this.ozellik = 'falan filan';
   };

Modülümüzü oluşturduk sayılır. Bir sınıf öykünmesi yaptık ve bir nesne oluşturucu tanımladık. Artık nesnemizi oluşturabiliriz:

   var mutasyon = new Mutasyon.Ornek;

Sınıfları nereye koyacağız?

Sınıfımızı oluşturduk, ancak bunu bir dosyaya yazdığımızda dosyanın adı ne olacak? Bu dosyayı hangi dizine koyacağız?

Perl, modülleri sınıfların adına göre bir dizine yerleştirilir. Örneğin Mutasyon::Ornek modülü perl tarafından bilinen bir dizin altına, $INC/Mutasyon/Ornek.pm adıyla yerleştirilmelidir. JSAN standartlarıda benzer bir yolu tavsiye eder. Bu durumda kodumuzu $INC/Mutasyon/Ornek.js dosyasına koymamız gerekmektedir. Burada kullandığımız $INC, kök dizine ait bir gösterimdir. Örneğin modülün konulduğu konum:

   www.site.com/lib/Mutasyon/Ornek.js

veya

   www.site.com/js/Mutasyon/Ornek.js

olabilir. Tabii ki, burada söylediğimiz ``tavsiye eder'' sözünden de anlaşılabileceği gibi bu tür bir dizin yapısını zorlamak, Perl' ün aksine, mümkün değildir. Ancak dizin yollarının sınıf adına göre oluşturulması, JSAN modülünün kullanımıyla, JSAN modüllerinin devingen yüklenmesi durumunda zorunludur.

JSAN modülü

JSAN modülü bazı kullanışlı yöntemleri içeriyor. Kullanılması zorunlu değil, yani JSAN' a bağımlı kalmadan da bir JSAN modülü yazabilirsiniz. Ancak içerdiği özellikler nedeniyle, muhtemelen bir noktada JSAN modülünü kullanmanız gerekecektir.

Bu yazıda JSAN modülünün bazı özelliklerini inceleyeceğiz. Tam bir arayüz açıklaması için JSAN' ın kendi belgesini okuyabilirsiniz.

Modül yüklemek

Normalde, bir JavaScript dosyasını, HTML içinde yeralan <script> etiketiyle yükleriz, ancak JSAN bize daha değişik bir yöntem sunuyor:

  <script type="text/javascript" src="/lib/JSAN.js"></script>
  <script>
      JSAN.use('Mutasyon.Ornek');
      JSAN.use('Oteki');
      JSAN.use('Digeri');
      JSAN.use('Bu.Da.Baska.Bir.Modul');

      var mutasyon = new Mutasyon.Ornek;
      // ... diğer kodlar
  </script>

Tabii ki <script> kullanmanızda bir sakınca yok, isterseniz bu modülleri <script> etiketleriylede yükleyebilirsiniz.

use metodu

JSAN sınıfının use metodu, perl' ün use() fonksiyonuna benzer özellikler içerir. Örneğin; geçilen modül adı bilinen bir dizindeki dosya adına dönüştürülür: Mutasyon.Ornek adı, Mutasyon/Ornek.js olarak düzeltilecektir (dosya yüklemesi esnasında) ve modülün sürüm numarasına görede bir yükleme yapılabilir. Eğer yüklenen modülün sürümü istenenden küçük ise bir istisna fırlatılacaktır.

``Bilinen dizin''ler ise kullanıcı tarafından genişletilebilir:

   JSAN.addRepository('/benim/js/dizinim');

MSIE hatası

Windows XP altında MSIE 6.0 kullanarak yaptığım denemelerde, JSAN.use() ile yüklenen modüllerin içinde, herhangi bir noktada (yorum satırlarında veya bir kod satırı içinde) ASCII-dışı karakter kullandığımda, IE' nin keyfine göre modülü bazen yükleyip, bazen yüklemediğini farkettim. JSAN tarafında bunu aşmak için bir çözüm üretilebilir mi bilmiyorum, ancak Opera ve FireFox 'ta bu sorunun olmadığını gördüğüm için, işin kolayına kaçıp Microsoft ve IE' yi suçluyorum.

Bu hatanın etrafından dolaşmak için (şimdilik) izleyebileceğimiz iki yol var. Eğer eskiden olduğu gibi <script> etiketiyle yükleme yaparsak, bu sorun ortadan kalkıyor. Adboşluklarından sembol ithal etmek istersek ikinci bir JSAN.use() satırıda kullanmamaız gerekecektir. Diğer bir yöntem ise modülün içine kesinlikle türkçe (veya ASCII-dışı herhangi bir karakter) kullanmamak. Eğer modülün, sabit kodlanmış bir değerle, bir çıktı üretmesi gerekiyorsa bu durumda \u0131 gibi unicode kod noktaları kullanabilirsiniz. Modül yüklendikten sonra, devingen işlemlerden gelen verilerde ise bir işlem yapmanıza gerek yok bu değerlerde bir sorun yaşanmıyor.

Tabii, bu sözler bu yazının yazıldığı tarih için geçerli. Bu konunun geçerliliğini sürdürüp sürdürmediğini öğrenmek için JSAN sitesini ziyaret etmeniz ve IE ile deneme yapmanız tavsiye edilir.

Adboşluklarından sembol ihracı/ithali

Modülümüz, modülün adboşluğuna ait olan bazı değişkenler ve fonksiyonlar içerebilir:

   Mutasyon.Ornek.Merhaba = function (ad){
      alert("Merhaba "+ad);
   }

   Mutasyon.Ornek.Reklam = 'mutasyon nokta net | bilgiye ulaşmanın en iyi yolu';

Eğer bu sembollerin sık kullanılması planlanıyorsa, bunları uzun adlarıyla yazmak can sıkıcı olabilir. Bu durumda bizim Mutasyon.Ornek sınıfından sembol ithal etmemiz gerekir. Bunun için, öncelikle modülümüz ihracedeceği sembolleri tanımlamalıdır:

   Mutasyon.Ornek.EXPORT_OK   = [  'Merhaba', 'Reklam' ];
   Mutasyon.Ornek.EXPORT_TAGS = { ':all': Mutasyon.Ornek.EXPORT_OK };

Buradaki EXPORT_OK ve EXPORT_TAGS adları JSAN tarafından bilinen sembollere işaret eder ve bir use() çağrısına geçilen ek parametrelerde bu sembollerin varlığı denetlenir:

   JSAN.use('Mutasyon.Ornek', 'Merhaba');

EXPORT_TAGS içindeki :all özel bir addır. İthal parametrelerini teker teker yazmak yerine:

   JSAN.use('Mutasyon.Ornek', 'Merhaba', 'Reklam');

hepsini bir kerede ithal edebiliriz:

   JSAN.use('Mutasyon.Ornek', ':all');

Bundan sonra, Mutasyon.Ornek.Merhaba() fonksiyonunu Merhaba() şeklinde kullanabiliriz. Ancak, fonksiyonel ve nesne tabanlı arabirimlerin birlikte kullanılması genellikle iyi bir fikir değildir. Bazı gerekli haller dışında, modülünüzün sadece fonksiyon tabanlı veya sadece nesne tabanlı çalışması daha iyi olacaktır.

Burada kod yazımına dair bir noktayada temas etmekte yarar var. Sınıf değişkenlerinin (EXPORT_OK gibi) büyük yazıldığına dikkat edin. Bir yazım kuralını takip etmeniz, kodunuzun daha okunaklı olmasını sağlayacaktır. JSAN bu konuda bazı yazım yöntemleri önerir ve sınıf değişkenlerini BÜYÜK harflerle yazmak bunlardan birisidir.

Eğer adboşluğu (veya aduzayı) kavramına yabancıysanız, bu konuyla ilgili bir başvuru kaynağını inceleyebilirsiniz.

Nesne metodları

Nesne metodlarımızın hepsi, herkes tarafından erişilebilir olarak tanımlanacaktır. JavaScript' te veriye erişimi tamamen sınırlamak bugün için mümkün değil. Ancak bu konudada bir yazım kuralına uyabiliriz. Programlama arayüzüne ait olmayan ve modülün kendi içinde kullandığı değişkenlerin/fonksiyonların/metodların adına bir alt çizgi ile başlamak, kodunuzu kulanan kişiye, bu özelliğe doğrudan erişmenin kötü bir fikir olduğuna dair bir ipucu verecektir:

   Mutasyon.Ornek.prototype = {
      _al: function (adres) {
         alert("adres: "+adres);
      },
      makaleler: function () {
         var html = this._al(bu_adresi);
         // html ile bir şeyler yap
      }
   }

Yukarıdaki kodda _al() metodu, modülün kendi içinde kullanılan ve modülü kullanan programcının doğrudan erişmemesi gereken bir metod. Bu kodu okuyan tecrübeli bir programcı, _al() metoduna doğrudan erişmemesi gerektiğini görecektir. Ayrıca, bu tür yazım kuralları kodunuzu daha sonra elden geçirmeniz gerektiğinde, size yardımcı olacaktır.


Örnek JSAN modülü

Yazı içinde parça parça incelediğimiz örnek JSAN modülümüz Mutasyon.Ornek kodu şöyle:

        if (typeof JSAN     == 'undefined') throw("JSAN gerekli!");
        if (typeof Mutasyon == 'undefined') var Mutasyon = {};

        Mutasyon.Ornek = function () {
                // olusturucu
                this.ozellik = "xxxx";
        }

        Mutasyon.Ornek.Merhaba = function (ad){
                var simdi = new Date().toGMTString();
           document.write("Merhaba "+ad+". Tarih: "+simdi+"<br />");
        };

        Mutasyon.Ornek.Reklam = 'mutasyon nokta net   |   bilgiye ulasmanin en iyi yolu';

        Mutasyon.Ornek.VERSION     = '0.1';
        Mutasyon.Ornek.EXPORT_OK   = [  'Merhaba', 'Reklam' ];
        Mutasyon.Ornek.EXPORT_TAGS = { ':all': Mutasyon.Ornek.EXPORT_OK };
        Mutasyon.Ornek.URL         = {
           'anasayfa' : 'http://www.mutasyon.net' //'/web/test/mut.html'
        };

        Mutasyon.Ornek.prototype = {
                _al: function (adres) {
              return JSAN._loadJSFromUrl(adres);
                },
                _ayristir: function (dizgi) {
              var dizi = dizgi.split("<option>Makale kategorileri</option>");
              if (dizi && dizi[1]) {
                dizi = dizi[1].split("</select>");
                if (dizi) {
                                  dizi[0] = dizi[0].replace(/<option value=".+?">/g, '<option>');
                                  dizi[0] = dizi[0].replace(/\n/g, '');
                                  dizi[0] = dizi[0].replace(/\r/g, '');
                                  var liste = dizi[0].split("</option><option>");
                                  document.write("<h3>mutasyon.net makale kategorileri</h3><ul>");
                   for (var i = 1; i < liste.length;i++) {
                                          document.write("<li>"+liste[i]+"</li>");
                                  }
                                  document.write("</ul>");
                                  document.write(
                                          'Yukaridaki liste, AJAX ile indirilen anasayfa '+
                                          'kodu ayristirilarak otomatik olusturulmustur. '+
                                          'Bu kategorilerdeki yazilari okumak icin <a href="'+
                                          'http://www.mutasyon.net'+
                                          '">mutasyon.net</a>\' i ziyaret edin!<br>'
                                  );
                             document.write("[DURUM] Islem tamam ...<br>");
                     }
                }
           },
           makaleler: function () {
                        document.write("[DURUM] Siteye baglaniliyor ...<br>");
                        try {
                 var html = this._al(Mutasyon.Ornek.URL['anasayfa']);
                 if (html) {
                    return this._ayristir(html);
                           } else {
                                return '';
                           }
                   } catch (e) {
                           alert("hata:"+e.message);
                   }
           }
        };

Modülün örnek bir kullanımı ise şöyle olabilir:

        <html>
         <head>
          <title>mutasyon.net JSAN makalesi</title>
           <script type="text/javascript" src="lib/JSAN.js"></script>
           <script type="text/javascript">
             // bu satırı, kendi makinanızdaki JSAN lib yoluyla değiştirin
             JSAN.addRepository('/web/test/lib');
           </script>
         </head>
        <body>
        <script type="text/javascript">
           JSAN.use('Mutasyon.Ornek', ':all'); // sınıfımızı yükleyelim
           var mutasyon = new Mutasyon.Ornek;  // nesneyi oluştur
           // Bu fonksiyonun, "Mutasyon.Ornek" adboşluğundan,
           // küresel adboşluğuna alındığına dikkat edin.
           Merhaba('Burak');
           // keza bu değişkeninde...
           document.write("Şimdi reklamlar: <b>"+Reklam+"</b><br />");

           /* bu kod çalıştırılırsa, IE size bu işlemi kabul edip etmediğinizi
             soracaktır. Eğer kabul ederseniz, mutasyon.net e bağlanılıp
             anasayfa içeriği indirilecektir. Bu işlem siteye bağlantı hızınıza
             bağlı olarak IE penceresini bir süreliğine dondurabilir. */

           mutasyon.makaleler();

        </script>
        </body>
        </html>

Bu örneğin çalışması için JSAN modülünün yüklü olması gerekiyor. Örnek modül ve html kodunu buradan indirebilirsiniz.

Örnek hakkında ek bilgi

makaleler() metodu, bir AJAX (Asynchronous JavaScript and XML) çağrısında bulunarak, mutasyon.net' ten veri çekmektedir. Siteye bağlantı hızınıza bağlı olarak bu işlem bir süreliğine sayfanın açık olduğu pencereyi dondurabilir. MSIE 6.0 kullanıcıları, istek gerçekleşmeden önce aşağıdaki diyalog kutusunu görebilirler:

Bu soruyu olumlu cevaplamanız halinde çağrı gerçekleşecektir.

Diğer tarayıcılarda (Opera, FireFox) ise bu istek muhtemelen gerçekleşmeyecektir. Bunun nedeni tarayıcının, sayfanın çalıştığı sunucu dışındaki bağlantılara izin vermemesidir. mutasyon.net anasayfasını kendi bilgisayarınızdaki sunucudan erişilebilen bir dizine kaydedip, örnek içindeki ilgili parametreyi bu dosyaya yönlendirerek deneme yapabilirsiniz:

        Mutasyon.Ornek.URL = {
           'anasayfa' : '/web/test/mutasyon.html'
        };

makaleler() metodu, mutasyon.net anasayfasına özel ayrıştırma kodları içerdiğinden, diğer sayfalarda çalışmayacaktır.


Kaynaklar

JavaScript adboşlukları: http://justatheory.com/computers/programming/javascript/emulating_namespaces.html.

JSAN sitesi (OpenJSAN): http://openjsan.org.

JSAN modülü: http://www.openjsan.org/doc/c/cw/cwest/JSAN/0.10/.




Anahtar: javascript, modül, module, arşiv, repository, jsan, cpan
Bölüm: JavaScript
Düzey:
Tarih: 7.9.2005
Yazar: Burak GÜRSOY
E-mail: bgursoy [at] mutasyon.net


  • Yazara ileti gönder
  • Yazara ait tüm makaleler
  • Tüm JavaScript makaleleri

    JavaScript bölümünde yer alan son 5 makale

  • JavaScript'e Bakış
  • Dış Kaynaklı Kodların ve Dosyaların JavaScript İçinde Kullanımı
  • Ekrana Yazı Yazdırmak
  • JavaScript Veri Türleri
  • Javascript'te Değişkenler

  • Yazar :Burak GÜRSOY
    Adınız :
    E-Posta :
    iletiniz :
     



    Sayfa Başı


    mutasyon.net DERSLER MAKALELER KİTAPLAR SORU - CEVAP HAKKI ÖCAL KÖŞESİ ARAMA
    NECİP FAZIL HABERLER DOWNLOAD ZİYARETÇİ DEFTERİ YAZARLAR BASINDA BİZ
    BİZE KATILIN GİZLİLİK ŞARTLARI MİSYONUMUZ ÜYELİK
    mutasyon.net Workcube sunucularını tercih ediyor.