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