Cara menggunakan 2015. pada JavaScript

Menggunakan Mode Strict – Mode strict adalah mode mode permrograman ketat yang berarti ada banyak pembatasan dalam aturan penulisan kode program. Mode “use strict” membuat kita “dijaga” benar-benar saat menulis program.

Maksudnya kita dibenar-benar harus menulis segala sesuatunya dengan benar sesuai aturan yang diterapkan mode strict. Misalnya saat menggunakan variabel kita harus menggunakannya lebih dahulu, jika tidak akan terjadi error.

Penggunaan “use strict” mulai diperkenalkan pada versi JavaScript 1.8.5. Dan hampir semua versi terakhir browser saat ini telah mendukung penggunaan “use strict”. Internet Explorer mulai versi 10, Firefox mulai versi 4, Google Chrome mulai versi 13, Safari mulai versi 5.1 dan Opera mulai versi 12.

Untuk menggunakan mode strict pada pemragraman javascript kita menggunakan perintah “use strict” pada awal program. “use strict” adalah tulisan biasa dan bukan merupakan statemen.

Cara menggunakan “use strict” adalah cukup menulis “use strict” dibagian atas script setelah tag <script> atau pada baris pertama function. Jika ditulis secara eksternal dalam file dengan ekstensi .js maka deklarasi “use strict” harus ditulis pada baris pertama file tersebut.

Contoh penggunaan mode strict pada script global :

"use strict";
x = 5;       // dianggap error karena variabel belum dideklarasikan
showAngka();   // dianggap error karena function belum dideklarasikan

function showAngka() {
var x = 5;
alert(x);
}

Contoh penggunaan mode strict didalam function :

x = 5;       // tidak dianggap error
showAngka();   // tidak dianggap error

function showAngka() {
“use strict”;
x = 5; //dianggap error karena variabel belum dideklarasikan
alert(x);
}

Mengapa Menggunakan Mode Strict?

Mode Strict membuat kita menulis program javascript dengan lebih baik dan aman. Mode strict mencegah penulisan script yang buruk seperti menggunakan variabel sebalum mendeklarasikannya. Mode Strict juga bisa mencegah timbulnya bug karena penulisan yang buruk tadi.

Pada mode strict program tidak mengijinkan untuk memberi nilai pada properti dan variabel yag tidak ada. juga tidak diijinkan untuk menggunakan properti yang ditandai readonly. Jika hal itu dilakukan akan terjadi error dan program tidak berjalan.

Hal-hal yang dilarang saat mode strict digunakan :

1. Menggunakan variabel tanpa mendeklarasikannya
   Ini karena bisa memicu timbulnya variabel global jika didefinisi didalam function.

   angka=5;

2. Menghapus variabel, function dan argumen

   delete angka;

3. Definisi properti object berulang

   var angka = {a1:1, a1:2};

4. Definisi parameter pada function berulang.

   function showAngka(a1, a1) {};

5. Menulis pada properti yang ditandai readonly

   obj.defineProperty(obj, "angka", {value:1, writable:false});
   obj.angka = 5;  // ini dianggap error

6. Menggunakan angka dengan penulisan oktal

   var angka = 010;

7. Menulis pada properti get

   var obj = {get angka() {return 0} };
   obj.angka = 5;  // ini dianggap error

8. Menghapus undelete property seperti properti prototype

   delete Object.prototype;

9. Menggunakan string “eval” dan “argument” sabagai variabel

   var eval=5;
   var arguments=6;

10. Menggunakan statemen with

    with (Math){angka = sin(30)}; // ini dianggap error

11. Menggunakan future keyword reserve seperti implements, interface, package, private, protected, public, static, yield

Lihat indeks artikel Tutorial Javascript Dasar >>

Referensi :

• https://www.w3schools.com/js/js_strict.asp

Handlebars.js merupakan templating library yang dapat kita gunakan di sisi client. Manfaat yang dapat diambil adalah, dengan menggunakan template library, kode javascript kita tidak akan tercampur dengan html. Hal ini dapat membuat organisasi kode sumber menjadi lebih rapi dan lebih mudah di maintain.

Pada kesempatan kali ini saya akan menunjukkan cara penggunaan Handlebars.js dan JQuery dengan membuat sebuah address book sederhana. Address book yang akan dibuat akan berupa satu tabel sederhana berisi nama dan alamat. Operasi yang dapat dilakukan pada address book ini adalah operasi CRUD (create read update delete) dari data address book. Untuk lebih jelasnya lihat gambar hasil akhir di bawah ini:

Persiapan

Untuk memulai, kita membutuhkan handlebars.js dan JQuery. Setelah itu kita tinggal memasukkan script untuk memanggil kedua script tersebut pada bagian bawah file html yang akan dibuat

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars-v1.3.0.js"></script>

Setelah selesai, kita dapat mulai melakukan desain tampilan antar muka.

User Interface

Pada kesempatan ini, ada 4 event yang akan kita kelola untuk menyelesaikan address book ini. Untuk lebih jelasnya dapat dilihat pada gambar di bawah ini

Pada dasarnya event yang akan kita tangkap adalah event pada saat tambah, edit, hapus, dan menampilkan form data. Setelah kita menyelesaikan desain antar muka, berikutnya yang dapat kita selesaikan adalah desain template untuk kemudian diimplementasikan menggunakan handlebars.js.

Template

Pada contoh ini, hanya template row data tabel yang ditampilkan, sisanya pembaca dapat melihat langsung pada gist yang ada di akhir posting. Pada handlebar.js, cara melakukan inisialisasi template adalah sebagai berikut:

<script id="row-adbook" type="text/x-handlebars-template">
{{#each data}}
  <tr>
    <td>{{nama}}</td>
    <td>{{alamat}}</td>
    <td align="center">
      <a href="#edit" class="rowedit" data-index="{{@index}}">Edit</a>
      || 
      <a href="#hapus" class="rowdelete" data-index="{{@index}}">Hapus</a>
    </td>
  </tr>
  {{else}}
    <tr>
      <td colspan="3" align="center">Tidak ada entry.</td>
    </tr>
{{/each}}
</script>

template akan dapat dibaca oleh library handlebar melalui id="row-adbook" dan type="text/x-handlebars-template". Setelah selesai membuat template, berikutnya kita dapat melakukan kompilasi template ke dalam variabel:

var rows = Handlebars.compile(
	$('#row-adbook').html()
);

Variabel rows saat ini telah berisi method hasil compile dari $('#row-adbook').html(). Untuk dapat menggunakannya dalam kode kita adalah sebagai berikut:

//buat data dummy untuk kita masukkan ke dalam rows
var adressbook = [
	{nama: 'Alice', alamat: 'Jakarta'},
	{nama: 'Bob', alamat: 'Bogor'},
	{nama: 'Carl', alamat: 'Cirebon'},
];

//kita proses data ke dalam rows
var hasil = rows({ data: addressbook });

//lihat hasil di dalam console:
console.log(hasil);

Kesimpulan

Demikian contoh sederhana di dalam memanfaatkan handlebar.js. Sebenarnya masih banyak contoh template script yang dapat diterapkan pada kode template kita, untuk hal tersebut saya menyerahkan kepada pembaca untuk melihat sendiri pada dokumentasi handlebar.js di situsnya.

gist untuk keseluruhan source code posting blog ini ada di https://gist.github.com/donixo/8898521