8 Hal Sederhana dari Javascript yang Harusnya Diketahui Lebih Awal

Repost dari artikel saya di PC Mild 23/2010 dan 24/2010

Facebook chat menggunakan javascript

Saat ini Javascript hampir selalu digunakan dalam setiap pembuatan website. Meskipun bahasa ini bersifat client-side, prosesnya yang ringan sehingga tampak secara realtime mampu memberikan interaksi yang lebih menarik. Coba saja Anda matikan fitur Javascript pada web browser Anda. Banyak website besar seperti Facebook, Twitter, Gmail, dan sebagainya pasti tidak akan berjalan dengan baik.

Berikut ini adalah 7 hal sederhana dari Javascript, yang jika Anda telah menggunakan Javascript, berharap bahwa Anda mengetahuinya lebih awal.

  1. Shortcut untuk notasi
    Ada beberapa cara cepat untuk proses notasi dalam Javascript. Salah satunya, biasanya dalam mendeklarasikan suatu object, kita menulis: 

    var handphone = new Object();
    handphone.model = 'HTC';
    handphone.type = 'Desire';
    handphone.color = 'Black';
    handphone.screenSize = '3.7inch';

    Namun hal yang sama ternyata bisa dibuat seperti ini:

    var handphone = {
      model:'HTC',
      type:'Desire',
      color:'Black',
      screenSize:'3.7inch'
    };

    Dengan demikian, penulisan menjadi lebih singkat karena tidak perlu menuliskan nama object berulang kali. Jika hanya object dengan variable sedikit seperti ini, tidak masalah jika menggunakan cara pertama. Tapi bagaimana jika object tersebut memiliki puluhan variable yang harus dideklarasikan di awal?

    Shortcut lainnya yang menarik adalah dalam mendeklarasikan sebuah Array. Cara lama mendeklarasikan array tersebut adalah seperti ini:

    var bukuYangHarusDibaca = new Array(
      'Harry Potter', 'Free Your Mind', 'Goosebumps', 'The Kitchen'
    );

    Hasil yang sama bisa didapatkan dengan cara:

    var bukuYangHarusDibaca = [
      'Harry Potter', 'Free Your Mind', 'Goosebumps', 'The Kitchen'
    ];

    Lebih sederhana karena tidak perlu menuliskan kata “new Array” di awal.

    Dan cara cepat notasi yang paling menarik adalah pada notasi kondisi (if). Sehingga, penggunaan kondisi seperti ini:

    var bonus;
    if(purchase > 1000) {
      bonus = 100;
    } else {
      bonus = 0;
    }
    

    dapat dipersingkat dalam satu baris menjadi:

    var bonus = (purchase > 1000) ? 100 : 0;

    Bagian yang ada dalam tanda kurung adalah kondisi yang disyaratkan. Tanda kurung tersebut hanya memudahkan pembacaan, sehingga Anda bisa menghilangkannya jika tidak memerlukannya. Isi setelah tanda tanya (?) dan sebelum tanda titik dua (:) adalah nilai yang dipilih jika kondisi bernilai true. Sedangkan isi setelah tanda titik dua di bagian akhir adalah nilai yang dipilih jika kondisi bernilai false. Anda bisa mengaplikasikan trik ini pada banyak bagian kode program.

  2. Format data JSON
    Sebelum mengetahui cara penggunaan JSON untuk menyimpan data, biasanya programmer menyimpannya dalam bentuk array multi dimensi, string dengan tanda pemisah, dan cara lainnya yang cukup menyulitkan. Tapi dengan adanya JSON, Anda bisa menyimpan data kompleks dalam format native javascript dan tanpa perlu segala macam proses konversi. JSON adalah singkatan dari JavaScript Object Notation, yang sebenarnya memanfaatkan notasi-notasi yang telah dijelaskan pada poin pertama di atas. 

    Jadi, jika Anda ingin mendeklarasikan sebuah band, maka dapat ditulis sebagai berikut.

    var band = {
      "name":"The Red Hot Chili Peppers",
      "members":[
        {
          "name":"Anthony Kiedis",
          "role":"lead vocals"
        },
        {
          "name":"Michael 'Flea' Balzary",
          "role":"bass guitar, trumpet, backing vocals"
        },
        {
          "name":"Chad Smith",
          "role":"drums,percussion"
        },
        {
          "name":"John Frusciante",
          "role":"Lead Guitar"
        }
      ],
      "year":"2009"
    }

    Setelah itu, Anda bisa mengaksesnya seperti biasa. Bahkan JSON ini bisa menjadi penghubung format data antara PHP dengan Javascript. Dalam PHP, tersedia fungsi json_encode() dan json_decode() untuk memudahkannya.

  3. Fungsi-fungsi native javascript
    Beberapa fungsi umum sebenarnya sudah tersedia dalam javascript, terutama untuk fungsi matematika dan manipulasi string. Dengan demikian Anda tidak perlu membuat banyak perulangan lagi beserta kondisi dan fungsi-fungsinya. Sebagai contoh, ketika mencari angka terbesar dalam sebuah array, biasanya menggunakan perulangan seperti ini:

    var numbers = [3,342,23,22,124];
    var max = 0;
    for(var i=0;i<numbers.length;i++){
      if(numbers[i] > max){
        max = numbers[i];
      }
    }
    alert(max);

    Padahal sebenarnya dapat dipermudah tanpa menggunakan perulangan, yaitu dengan mengurutkan nilai-nilai tersebut.

    var numbers = [3,342,23,22,124];
    numbers.sort(function(a,b){return b - a});
    alert(numbers[0]);

    Fungsi sort() sudah terdapat dalam semua array. Setelah diurutkan, maka nilai yang diambil adalah nilai yang terbesar. Proses pengurutannya sesuai dengan fungsi yang dimasukkan sebagai parameter.

    Cara lainnya adalah dengan menggunakan method Math.max(). Fungsi ini mengembalikan nilai terbesar dari sekumpulan parameter yang dimasukkan.

    Math.max(12,123,3,2,433,4); // mengembalikan nilai 433

    Fungsi lain yang powerful untuk memanipulasi string adalah split() dan join(). Salah satu contoh pemanfaatannya adalah pada saat ingin menambahkan class css pada suatu elemen html. Ketika akan menambahkan class dalam sebuah elemen DOM, semisal div, maka yang harus diperhatikan adalah menambahkan spasi di akhir class tersebut jika peletakannya di paling awal class yang sudah ada, atau menambahkan spasi sebelum class tersebut jika peletakannya di paling akhir class yang sudah ada. Ketika menghapus class tersebut, harus diperhatikan juga untuk menghilangkan spasi yang ada, karena bisa berdampak pada browser-browser lama yang tidak support hal tersebut.

    Cara konvensional adalah dengan langkah sebagai berikut.

    function addclass(elm,newclass){
      var c = elm.className; // mendapatkan class yang sudah ada
      elm.className = (c === '') ? newclass : c+' '+newclass; // meletakkan di akhir
    }

    Hal tersebut cukup merepotkan, karena ada banyak kondisi yang harus dipenuhi. Namun bisa dipermudah dengan sedikit manipulasi string sederhana menggunakan fungsi split dan join tersebut, menjadi sebagai berikut.

    function addclass(elm,newclass){
      var classes = elm.className.split(' ');
      classes.push(newclass);
      elm.className = classes.join(' ');
    }

    Jadi intinya adalah mengubah string dari nama-nama class yang sudah ada menjadi bentuk array, kemudian menambahkan class yang baru. Setelah itu menggabungkan array tersebut menjadi satu string utuh kembali dengan pemisah berupa spasi.

  4. Delegasi event
    Penggunaan delegasi event membuat aplikasi berbasis web menjadi semakin hidup. Sebagai contoh, suatu elemen DOM jika diklik akan menjalankan suatu proses tertentu yang berbasis javascript. Biasanya, untuk memberikan handler pada banyak elemen dalam satu parent dilakukan dalam proses perulangan. Tapi ada cara yang lebih mudah, yaitu mendefinisikannya pada parent-nya saja. Sebagai contoh untuk kode html sebagai berikut.

    <h2>Great Web resources</h2>
    <ul id="resources">
      <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
      <li><a href="http://sitepoint.com">Sitepoint</a></li>
      <li><a href="http://alistapart.com">A List Apart</a></li>
      <li><a href="http://yuiblog.com">YUI Blog</a></li>
      <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
      <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
    </ul>

    Cara klasik yang digunakan untuk memberikan event adalah sebagai berikut.

    (function(){
      var resources = document.getElementById('resources');
      var links = resources.getElementsByTagName('a');
      var all = links.length;
      for(var i=0;i<all;i++){
        // menambah listener untuk semua elemen
        links[i].addEventListener('click',handler,false);
      }
      function handler(e){
        var x = e.target; // Get the link that was clicked
        alert(x);
        e.preventDefault();
      }
    })();
    

    Namun cara ini dapat dipersingkat menjadi.

    (function(){
      var resources = document.getElementById('resources');
      resources.addEventListener('click',handler,false);
      function handler(e){
        var x = e.target; // get the link
        if(x.nodeName.toLowerCase() === 'a'){
          alert('Event delegation:' + x);
          e.preventDefault();
        }
      }
    })();
    

    Karena event klik terjadi pada semua elemen, maka cukup membandingkan apakah elemen tersebut adalah elemen “a” atau bukan. Dengan demikian akan mempersingkat penulisan kode program menjadi lebih sederhana.

  5. Anonymous functions dan pattern singleton
    Salah hal yang cukup merepotkan dalam Javascript adalah tidak adanya scope dari variable. Semua variable, fungsi, object, dan array yang tidak terdapat dalam suatu fungsi lainnya dianggap sebagai variable global, yang artinya jika ada script lain yang mendeklarasikan nama yang sama, akan tertumpuk menjadi nilai yang paling akhir.

    Cara untuk mengatasinya adalah dengan membuat anonymous function (fungsi tanpa nama), kemudian langsung memanggilnya. Contohnya, jika menggunakan cara biasa, maka kode di bawah ini akan menghasilkan 3 variable global dan 2 fungsi global.

    var name = 'Chris';
    var age = '34';
    var status = 'single';
    function createMember(){
      // [...]
    }
    function getMemberDetails(){
      // [...]
    }
    

    Dengan kode ini, semua script pada halaman yang menggunakan variable name akan terganggu. Untuk menanggulanginya, adalah dengan memasukkannya dalam sebuah fungsi.

    var myApplication = function(){
      var name = 'Chris';
      var age = '34';
      var status = 'single';
      function createMember(){
        // [...]
      }
      function getMemberDetails(){
        // [...]
      }
    }();
    

    Anda bisa membuatnya menjadi fungsi tanpa nama. Sayangnya kedua hal tersebut tidak memungkinkan variable dan fungsi di dalamnya untuk bisa diakses dari luar fungsi.

    (function(){
      var name = 'Chris';
      var age = '34';
      var status = 'single';
      function createMember(){
        // [...]
      }
      function getMemberDetails(){
        // [...]
      }
    })();
    

    Caranya adalah dengan mengembalikan property berupa fungsi createMember() dan getMemberDetails() tersebut, sehingga kode program akan menjadi sebagai berikut.

    var myApplication = function(){
      var name = 'Chris';
      var age = '34';
      var status = 'single';
      return{
        createMember:function(){
          // [...]
        },
        getMemberDetails:function(){
          // [...]
        }
      }
    }();
    // myApplication.createMember() dan
    // myApplication.getMemberDetails() dapat diakses
    

    Bentuk pemrograman seperti ini dinamakan dengan design pattern singleton, dan banyak digunakan pada library javascript Yahoo User Interface (YUI). Selain penggunaan seperti contoh di atas, anonymous function juga bsia diterapkan pada banyak kasus lainnya.

  6. Berikan kemudahan konfigurasi
    Setiap mengambil potongan kode javascript dari internet, mau tidak mau ada bagian yang harus diubah untuk menyesuaikan dengan kode yang telah kita miliki. Terkadang hal tersebut cukup mudah, namun bisa saja menjadi sangat sulit jika kode program tersebut sangatlah kompleks. Salah satu cara untuk mengatasi ini adalah membuat kode tersebut dapat dikonfigurasi menjadi lebih fleksibel.

    Langkah pembuatannya cukup mudah, seperti berikut.

    • Buat sebuah object khusus menyimpan nilai konfigurasi kode program.
    • Di dalamnya, deklarasikan variable-variable yang biasanya sering diubah olehorang yang menggunakan, antara lain adalah id dan nama class dalam CSS, label untuk button, nilai yang ditampilkan, dan sebagainya.
    • Object tersebut harus memiliki akses public agar bisa diakses bagian lain.

    Dengan demikian, potongan kode program Anda dapat dijalankan pada berbagai kondisi tanpa perlu membuka ulang dan mengubah fungsi-fungsi yang sudah ada.

  7. Harus support semua browser? Buang-buang waktu. Gunakan Library.
    Seperti yang diketahui, anatomi setiap browser bisa berbeda-beda dalam menerjemahkan bahasa javascript. Mempelajarinya akan membutuhkan waktu dan usaha yang tidak sedikit. Sebut saja ada beberapa browser umum seperti firefox, chrome, safari, opera, dan internet explorer. Tidak hanya mempelajari saat ini saja, tapi juga harus mempelajari versi-versi sebelumnya dan harus siap jika ada versi baru muncul.

    Karena itu, penggunaan library sangat disarankan. Library adalah sekumpulan kode yang berisi fungsi-fungsi siap pakai untuk program Anda. Beberapa library sudah dapat mengatasi perbedaan anatomi web browser umum. Anda tinggal menggunakan fungsi-fungsi yang tersedia.

    Beberapa library javascript yang banyak digunakan antara lain adalah jQuery, MooTools, Prototype, Dojo Toolkit, ExtJS, dan YUI. Anda bisa mengunjungi masing-masing websitenya dan mempelajari library mana yang paling cocok untuk Anda gunakan.

    Berbagai library javascript

  8. Debug dengan console? Gunakan kombinasi Firefox + Firebug
    Develop website menggunakan Mozilla Firefox memiliki beberapa kelebihan, salah satunya adalah banyaknya Add-on yang bisa dipakai sebagai alat bantu. Firebug merupakan add-on yang banyak digunakan web developer dalam membongkar kode websitenya di sisi client. Anda bisa mendapatkan firebug pada website resminya http://getfirebug.com/ ataupun dengan fitur get Add-on yang ada di Firefox.

    Setelah Firebug terinstall, Anda bisa mengaktifkan console-nya, dan memasukkan script

    console.log(variable);
    console.info(variable);
    console.warn(variable);
    console.error(variable);
    

    Selain itu error javascript dapat terdeteksi secara cepat tanpa perlu mencari kesalahan syntax. Untuk masalah tampilan, Firebug juga bisa digunakan untuk melihat struktur DOM dan CSS dari suatu halaman, serta mengubahnya secara realtime. Untuk lebih jelasnya penggunaan Firebug ini, Anda bisa membaca artikel pada edisi sebelumnya.

    Tampilan hasil logging

Mudah bukan? Selamat mencoba.

Download source code secara keseluruhanArtikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 23 dan 24 tahun 2010 lalu sebagai artikel bersambung.

3 Comments

  1. Bisa di bantu melanjutkan javascript Menu DTree yang sudah sy modifikasi? Kalau Bisa SMS ke sini ya 085 656 151 326 , Nanti filenya saya kirim ke emailnya… Tanks

    Reply

Leave a Comment.