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

Download Catatan Les

Take Challenge