Coffeescript & jQuery

coffeescript nedir?

Script yazarken bazen syntax'ların gözden kaçması, semantic kod yazımının da belli bir zamandan sonra dışına çıkıldığını sonradan da olsa görebiliyoruz. En azından kendi adıma konuşmak istersem evet, bu alışıla gelmiş bir durum diyebilirim çoğu zaman.

coffeescript derlenmiş şekilde javascript kodunu otomatize etmemizi sağlar. Ruby dili ile yazılmış hayatı kolaylaştıran bir yazım dildir. Bununla ilgili akla gelen ilk soru; "Ne fark var ki?" denilebilir. Bu yüzden hergeçen gün geliştiriğimiz function'ların içerisiden çıkamadığımız günlerin olduğunu biliyoruz. Özellikle de çok control gerektiren, prototyping gerektiren işler de hayatı kolaylaştırdığını düşünüyorum. Zaman ile ilgili problemi olmayan bu konuda rahat olabilir tabiki...

Örnekler üzerinden gidecek olursak bu kolaylığın nasıl sağlandığını göreceğiz. Öncelikle coffeescript.org adresinden de bazı örnekleri görebilir ve "TRY COFFESCRİPT" başlığığı altında da örnek yapmanız mümkün. Coffeescript'i indirmek için nodejs'in kurulu olması gerekmektedir. Kurulu değil ise nodejs adresinden de kurulum yapabilirsiniz.

Kurulum için konsol ekranından;

  npm install -g coffee-script
  

git üzerin

  
npm install -g coffee-script
  

Coffeescript


  (($) ->

  ) jQuery

jQuery


  (function($) {

  })(jQuery);


Obje Metodu

Coffeescript


  $('.submit').click ->
    console.log("submit")

jQuery


  $(".submit").click(function() {
    return console.log("Button tıklandı");
  });


Çoklu Obje Metodu

Coffeescript


  $(document).on "click", ".buttonClassName", ->
    console.log("Button tıklandı")

jQuery


  $(document).on("click", ".buttonClassName", function() {
    return console.log("Button tıklandı");
  });


Ajax

Coffeescript


  $.ajax
    url: "service.html"
    datatype: "html"
    error: (jqXHR, textStatus, errorThrown) ->
      $('.error').append "Hata: #{textStatus}"
    succsess: (data, textStatus, jqXHR) ->
      $('.succsess').append "Mesaj: #{data}"

jQuery


  $.ajax({
    url: "service.html",
    dataType: "html",
    error: function(jqXHR, textStatus, errorThrown) {
      return $('.error').append("Hata: " + textStatus);
    },
    success: function(data, textStatus, jqXHR) {
      return $('.succsess').append("Mesaj: " + data);
    }
  });


Get Json

Coffeescript


  $ ->
    $('input#milks').keyup ->
      milkname = $(this).val()
      callbakc = (responsive) -> markerUsername responsive
      $.get '/templatename', {milkname},'callback', 'json'
      console.log(milkname)

jQuery


  $(function() {
    return $('input#milks').keyup(function() {
      var callbakc, milkname;
      milkname = $(this).val();
      callbakc = function(responsive) {
        return markerUsername(responsive);
      };
      $.get('/templatename', {
        milkname: milkname
      }, 'callback', 'json');
      return console.log(milkname);
    });
  });