Dasar Coffeescript

Pada pembahasan kedua coffeescript ini akan dijelaskan tentang variabel global dan lokal, membuat function dan cara memanggilnya, penggunaan array dan cara looping bila ingin dicetak / diproses isinya, penggunaan Object literal / hash bila di ruby, Pengguaan If dengan secara lebih detail dan di akhiri dengan tugas siswa dimana siswa harus membuat program games tebakan berikut batasan dan skorenya

Coffeescript 2

memberi komentar

  • untuk membuat komentar menggunakan tanda #
    • berikut contohnya
    • # ini adalah komentar, semua yang ditulis dibelakang tanda pound adalah komentar

Membuat function

  • di dalam coffeescript tulisan function diganti menggunakan tanda ->
  • biasanya kita menyebut tanda -> dengan thin arrow
  • berikut contoh dalam membuat function
  # membuat
  tambah = (a,b) ->
    a + b

  # memanggil
  hasil = tambah(3,2)
  console.log(hasil)

Variabel

  • secara default variabel pada coffeescript bersifat lokal
  • artinya semua variabel yang dibuat dalam suatu function hanya berlaku untuk function itu saja
  • bila ingin membuat variabel global (dikenali di semua function) berikut caranya
  jQuery ->
    panjang = 10
    luas1 = ->
      console.log("panjang di luas 1: #{panjang}")
    luas2 = ->
      console.log("panjang di luas 2: #{panjang}")
      lebar = 20;
    luas3 = ->
      console.log("lebar di luas 3 : #{lebar}")
    $(document).ready ->
      luas1()
      luas2()
      luas3()
  • pada program diatas panjang = variabel global , lebar = variabel lokal
    • karena panjang di infokan di luar function sedangkan lebar ada di dalam function luas2

Array

  • deklarasi array menggunakan tanda kurung kotak [ ]
  • berikut adalah contoh programnya
  demoArray = ->
    array1 = [1,2,3]
    if 3 in array1
      console.log("3 ada di array 1")
    array2 = [1..10]  
    for n in array2
      console.log(n)
  • pada contoh diatas array1 diisi dengan angka 1,2 dan 3
  • pada baris if 3 in array1 adalah melakukan pengecekan apakah suatu nilai ada di dalam array
    • bila ya maka akan dicetak
  • pada array2 = [1..10]
    • artinya membuat array dengan nilai 1 sampai dengan 10
  • pada baris 4 dan 5 adalah mencetak isi array2,
    • dimana setiap kali suatu elemen diambil akan dimasukkan ke variabel n

Object Literal (atau hash kalau di ruby)

  • cara deklarasinya menggunakan kurung kurawal {...}
  demoHash = ->
    orang = {nama: 'yudi', telpon: '031-5912345', kota: 'surabaya'}
    console.log orang.nama
    console.log orang.telpon
    console.log orang.kota

Penggunaan logika IF

  • berikut contoh beberapa bentuk logika If

  • if sederhana

  if nilai < 60
    keterangan = "Gagal"
  else
    keterangan = "Lulus"
  alert "nilai tepat 60" if nilai == 60
  • if bertingkat
  if nilai <= 45
    grade = "E"
  else if nilai <= 55
    grade = "D"
  else if nilai <= 69
    grade = "C"
  else if nilai <= 79
    grade = "B"
  else if nilai <= 100
    grade = "A"
  else 
    grade = "Tidak diketahui"
  • operator dalam if
    • == , sama dengan
    • != , tidak sama
    • && , logika and
    • || , logika or
  • selain itu dapat pula menggunakan not
    • misalnya if not (nilai < 60)
  • penggunaan tanda tanya (?) untuk mengecek bila suatu variabel kosong
    • if nama?
    • pada contoh diatas bila variabel nama tidak ada isinya alias nil maka akan menghasilkan nilai true

Tugas Siswa

  • Buat HTML berikut dan beri nama prak-8.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Coffeescript</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body> 
  <h2>Soal 1</h2>
  <form action="#">
    <div class="table-responsive">
    <table class="table table-bordered">
      <tbody id="detil">
        <tr class="baris">
          <td><h4>Persegi Panjang</h4></td>
          <td>Panjang: <input type="text" name="hb" class="form-control" id="panjang"></td>
          <td>Lebar: <input type="text" name="bb" class="form-control" id="lebar"></td>
          <td>Luas: <input type="text" name="tb" class="form-control" id="luas-persegi-panjang"></td>
          <td>
            <input type="button" value="cek-satu" class="btn btn-info" id="cek-satu">
          </td>       
        </tr>
        <tr class="baris">
          <td><h4>Segitiga</h4></td>
          <td>Alas: <input type="text" name="hb" class="form-control" id="alas"></td>
          <td>Tinggi: <input type="text" name="bb" class="form-control" id="tinggi"></td>
          <td>Luas: <input type="text" name="tb" class="form-control" id="luas-segitiga"></td>
          <td>
            <input type="button" value="cek-dua" class="btn btn-info" id="cek-dua">
          </td> 
        </tr>    
        <tr class="baris">
         <td><h4>Tabung</h4></td>
          <td>Jari-Jari: <input type="text" name="hb" class="form-control" id="jarijari"></td>
          <td>tinggi: <input type="text" name="bb" class="form-control" id="tinggi-tabung"></td>
          <td>volume: <input type="text" name="tb" class="form-control" id="volume-tabung"></td>
          <td>
            <input type="button" value="cek-tiga" class="btn btn-info" id="cek-tiga">
          </td> 
        </tr>
    </table>    
  </form>

  <h2>Soal 2 Tebak Angka <input type="text" value="0" id="jumlah-test" readonly="readonly"> / 10</h2>
  <form action="#">
    <div class="table-responsive">
    <table class="table table-bordered">
      <tbody id="detil">
        <tr class="baris">
          <td><input type="radio" name="pilihan" value="kecil"> kecil</td>
          <td><input type="radio" name="pilihan" value="besar"> besar</td>
          <td>Angka yang keluar: <input type="text" name="tb" class="form-control" id="angka-yang-keluar"></td>
          <td><h4>Hasil tebakan: <input type="text" name="tb" class="form-control" id="hasil-tebakan"></h4></td>
          <td>
            <input type="button" value="cek-empat" class="btn btn-info" id="cek-empat">
          </td>       
        </tr>
        <tr class="baris">
          <td>jawaban-benar</td>
          <td><input type="text" value="0" id="jumlah-benar" class="form-control" readonly="readonly"></td>
          <td>jawaban-salah</td>
          <td><input type="text" value="0" id="jumlah-salah" class="form-control" readonly="readonly"></td>
          <td> 
          </td>       
        </tr>
    </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-8.js"></script>
</body>
</html>
  • buat 1 file coffee script dengan nama prak-8.coffee dan copy contoh program berikut:
jQuery ->

  hitungPersegiPanjang = ->
    p = $('#panjang').val()
    l = $('#lebar').val()
    luas = p * l
    $('#luas-persegi-panjang').val(luas)

  bilAcak = (x) ->
    x * Math.random() | 0

  # tebakAngka = -> 
  #   pilihan = $("input[name=pilihan]:checked").val()


  $(document).ready ->
    $(document).on 'click', '#cek-satu',hitungPersegiPanjang

  • buat 1 file js dengan nama prak-8.js, ini untuk hasil convert coffee menjadi js

Soal

  • Soal 1: buat program untuk menghitung luas Segitiga dan volume tabung
    • anda dapat belajar dari contoh program yang sudah dibuat
  • soal 2: buat program bila di click tombol cek-empat maka akan
    • mengambil pilihan yang kita pilih kecil / besar (sudah diberi contoh caranya)
    • berikut contoh program untuk mengecek dari 2 radio button mana yang dipilih
    • pilihan = $("input[name=pilihan]:checked").val()
    • menampilkan angka (maximum 100)
    • membandingkan bila pilihan kita kecil dan angka yang keluar antara 0-50 maka muncul jawaban anda benar
    • sebaliknya muncul jawaban anda salah
  • soal 3: setiap kali kita menekan tombol cek-empat,
    • maka isi kotak jumlah-test bertambah 1
    • bila isinya sudah lebih dari atau sama dengan 10, maka kotak itu akan tidak bisa di klik
    • berikut contoh program untuk melakukan disable
    • $("#cek-empat").prop('disabled', true);
  • soal 4: setiap kali ditekan tombol cek-empat
    • bila jawaban benar maka nilai di kotak jawaban benar akan bertambah 1
    • demikian pula sebaliknya dengan jawaban salah