Coffee Script

kemampuan javascript dan jquery memang tidak dapat diragukan lagi dalam dunia perkembangan web, akan tetapi cara penulisan dari javascript yang sangat detil dalam penggunaan tanda kurung kurawal menjadikan program menjadi sulit untuk dibaca apalagi untuk seseorang yang baru belajar program, karena itu dikembangkan oleh jeremy Ashkenas coffee script, dimana kita dapat menuliskan perintah javascript dengan lebih simple dan mudah dibaca kemudian hasil penulisan itu nantinya akan dikonversi ke javascript, pada bagian ini akan ditunjukkan alur program coffee script dan aplikasi penggabungannya dengan jquery

coffeescript

  • tujuan adanya coffeescript adalah menyederhanakan penulisan javascript dan jquery
  • Penulisan yang lebih mudah dibaca karena mirip ruby
    • tidak butuh ; (titik koma) untuk mengakhiri suatu perintah
    • tidak butuh kurung bila tidak dibutuhkan
    • tanda {} kurung kurawal dan koma juga digunakan seminimal mungkin.
  • Menggunakan indentasi untuk menunjukkan blok suatu program
  • kita mengetik program dalan coffeescript dan nanti outputnya adalah javascript
  • menambahkan class pada javascript
  • http://jaketrent.com/post/behavior-of-coffeescript-fat-arrow/

Coffeescript 1

jQuery ->
  console.log("test 1")

  class Siswa
    constructor: (@nilai) ->
    cek_siswa: ->
      console.log("test 4 dengan nilai #{@nilai}")

  contoh_method = ->
    console.log("test 3")
    s1 = new Siswa(70)
    s1.cek_siswa()

  $(document).ready -> 
    console.log("test 2")  
    contoh_method()
  • Penjelasan
    • pada log akan ditampilkan tulisan dengan urutan berikut:
    • test 1
    • test 2
    • test 3
    • test 4 dengan nilai 70
    • dari contoh diatas urutan yang dikerjakan adalah
    • console.log("test 1"), karena dia merupakan perintah yang langsung dijalankan
    • class siswa hanya info tapi tidak dijalankan sampai dibuat objeknya
    • contoh_method perintahnya juga tidak dijalankan sampai namanya dipanggil.
    • document.ready
      • perintah-perintahnya akan langsung dijalankan setelah semua tag html diletakkan di layar. (istilah programnya di load di memory)
      • menjalankan perintah test 2
      • memanggil program contoh_method(), ingat gunakan tanda kurung () di belakangnya
    • contoh_method
      • saat dipanggil akan menjalankan perintah test 3
      • membuat objek/instance Siswa baru dengan nilai = 70
      • instance untuk siswa dimasukkan ke nama s1
      • s1 memanggil fungsi cek_siswa
    • class Siswa
      • ingat constructor = initialize kalau di program ruby
      • jadi disini kita mengisi instance variabel yang bernama @nilai dengan angka 70

Praktek siswa

  • buat dokumen html baru dengan nama prak-7.html, dan isi dengan ketikan berikut:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Coffeescript</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="prak-7.css">
</head>
<body> 
  <form action="#">
    <div class="table-responsive">
    <table class="table table-bordered">
      <thead id="judul">
        <tr>
          <th>Namasiswa</th>
          <th>Nilai</th>
          <th>Keterangan</th>
          <th>Grade</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="detil">
        <tr class="baris">
          <td><input type="text" name="nb" class="form-control namasiswa"></td>
          <td><input type="text" name="hb" class="form-control nilai"></td>
          <td><input type="text" name="bb" class="form-control keterangan"></td>
          <td><input type="text" name="tb" class="form-control grade"></td>
          <td>
            <input type="button" value="cek" class="btn btn-info cek">
          </td>       
        </tr>
        <tr class="baris">
          <td><input type="text" name="nb" class="form-control namasiswa"></td>
          <td><input type="text" name="hb" class="form-control nilai"></td>
          <td><input type="text" name="bb" class="form-control keterangan"></td>
          <td><input type="text" name="tb" class="form-control grade"></td>
          <td>
            <input type="button" value="cek" class="btn btn-info cek">
          </td> 
        </tr>    
        <tr class="baris">
          <td><input type="text" name="nb" class="form-control namasiswa"></td>
          <td><input type="text" name="hb" class="form-control nilai"></td>
          <td><input type="text" name="bb" class="form-control keterangan"></td>
          <td><input type="text" name="tb" class="form-control grade"></td>
          <td>
            <input type="button" value="cek" class="btn btn-info cek">
          </td> 
        </tr>
        <tr class="baris ">
          <td colspan="3">
            <input type="button" value="tombol-total" class="btn btn-success tombol-total">
          </td>
          <td><input type="text" name="tb" class="form-control" id="jumlah-lulus"></td>
          <td></td> 
        </tr>

      <tfoot></tfoot>
    </table>    
  </form>
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/tether.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="prak-7.js"></script>
</body>
</html>
  • buat dokumen baru dengan nama prak-7.coffee, dan isi dengan dokumen berikut:
jQuery ->
  setKeterangan = ->
    nilai = $(this).closest("tr").find(".nilai").val()
    if nilai < 60
      keterangan = "Gagal"
    else
      keterangan = "Lulus"
    $(this).closest("tr").find(".keterangan").val(keterangan)
  $(document).ready -> 
    $(document).on 'click', '.cek',setKeterangan
  • buat dokumen baru dengan nama prak-7.js
    • buka website http://coffeescript.org/
    • klik pada TRY coffeescript
    • tujuannya adalah agar website ini mengubah kode program kita dari coffeescript menjadi javascript
    • lakukan copy - paste kode program coffeescript yang ditulis diatas di sebelah kiri
    • ambil hasilnya yang berupa kode javascript yang ada di jendela sebelah kanan
    • tempatkan pada prak-7.js
  • buka browser anda dan lihat hasilnya
    • cobalah mengetikkan nilai pada kolom nilai misalnya 85
    • kemudian klik pada tombol cek yang sebaris, bila program berjalan dengan baik
    • maka pada bagian keterangan akan tampak tulisan Lulus
  • Tampilan web seperti gambar dibawah ini

Tugas Siswa

  • buat program bila di klik pada bagian cek pada pada grade akan muncul grade sesuai dengan nilai dan barisnya dengan ketentuan sbb:
    • 0 - 45 = E
    • 46 - 55 = D
    • 56 - 69 = C
    • 70 - 79 = B
    • 80 - 100= A
  • Buat program bila nilai diubah, maka secara otomatis keterangan dan grade pada baris tersebut juga berubah
  • Buat program bila nama berubah, maka kolom nilai akan berisi 0 dan keterangan dan grade akan menjadi kosong
  • Buat program untuk menghitung siswa yang lulus saja
    • petunjuk bantuan berikut adalah contoh program untuk melakukan looping pada kelas keterangan
    • class tombol yang diklik bernama .tombol-total
    • tempat menempatkan hasil jumlah siswa yang lulus menggunakan id #jumlah-lulus
jumlah=0
$(".keterangan").each ->
  ket = $(this).val()