• LINK
    • Dengan bangga mendukung kegiatan idsecconf 2009
    • Kajian.Net

CARI MP3 KAJIAN, EBOOK, TUTORIAL PEMROGRAMAN PHP, MATERI KULIAH DATABASE, DLL

Loading

October 15, 2009

perbedaan menggunakan window.onload dan tidak pada javascript

Didalam Katagori: Uncategorized, Javascript

dalam javascript dikenal istilah Event, atau suatu aturan yang menangani semua interaksi user dengan aplikasi, dalam hal ini website.

salah satu event yang sering digunakan adalah onload().

silahkan lihat contoh pada script berikut:

<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
       <div id="text">Hello World!</div>
       <script type="text/javascript">
       window.onload = function(){
         alert(document.getElementById(’text’).innerHTML);
       }
       </script> 
  </body>
</html>

script diatas akan menghasilkan prompt alert "Hello World"

sekarang kembali ke judul artikel ini, kita akan mengetahui dimana letak perbedaan antara menggunakan event window.onload() dengan yang tidak menggunakannya. perhatikan contoh dibawah yang tidak menggunakan event onload():

<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
       <div id="text">Hello World!</div>
       <script type="text/javascript">
                alert(document.getElementById(’text’).innerHTML);
       </script> 
  </body>
</html> 

 Ternyata hasilnya tetap sama, dengan script sebelumnya (yang menggunakan event window.onload()), nah lalu dimana letak perbedaannya??

 Oke sekarang perhatikan contoh selanjutnya:

<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
       <script type="text/javascript">
                alert(document.getElementById(’text’).innerHTML);
       </script> 
       <div id="text">Hello World!</div>
  </body>
</html>  

 pada script diatas, posisi tag div saya pindahkan dibawah tag script, dan perhatikan bahwa script tersebut tanpa menggunakan event window.onload();, lihat bagaimana hasilnya??

YA! benar, hasilnya adalah error

document.getElementById("text") is null

tag dengan ID text tidak terdeteksi oleh script tersebut, itu dikarenakan letaknya tidak urut, karena secara default javascript akan diproses oleh browser dari atas ke bawah,  Nah gimana?? {$lang_emotions_happy}

Untuk memperjelas perbedaannya (nya => judul ) , perhatikan (atau kalo gak males dicobaDreamer ) sekali lagi script dibawah,

 <html>
  <head>
    <title>DOM</title>
  </head>
  <body>
       <script type="text/javascript">
       window.onload = function(){
         alert(document.getElementById(’text’).innerHTML);
       }
       </script> 
       <div id="text">Hello World!</div>
  </body>
</html>

 script diatas saya tambahi event window.onload(). lihat hasilnya!!

 kesimpulan :

  • penggunaan window.onload() lebih aman
  • bila tidak ingin menggunakan window.onload(), maka perhatikan urutan javascript DOM dan HTML TAG (Object) mana yang lebih dulu menjadi acuan/ program dibaca dari atas ke bawah
  • bila menggunakan window.onload(), maka urutan script antara javascript DOM dan HTML TAG (Object) boleh diabaikan
Comments (0)

October 14, 2009

JavaScript Object Oriented Programing (OOP)

Didalam Katagori: Javascript

Hari hari antara awal oktober hingga artikel ini ditulis, saya pribadi merasakan hari ini berbolak-balik, sering gak merasa puas dengan metode pemrograman yang saya pake, padahal sering improvisasi, tapi tetap saja belum merasakan kepuasan dengan beberapa framework yang saya  kembangkan sendiri,

Akhirnya tanggal 14 Oktober kemarin, saya iseng2 mencoba mempelajari javascript OOP secara pure, tanpa pake framework JS apapun, karena awalnya saya biasa pake jQuery setelah memutuskan beralih dari prototype .

<script type="text/javascript">
   // Person adalah nama Class beserta constructornya
    function Person(){
       this.name = "Didin Nurdin Ahmadi";
       this.age  = function(a){
        return a;
       }
    }
   

    Person.prototype.School = function(alamat){
        this.Alamat = function(alamat){
        return (alamat) ? alamat : "Margonda";
      }
      return "MI";
    }
   
    Person.prototype.Age = function(){
      return (new Person().age(5));
    }

 </script>

Potongan script diatas adalah implementasi OOP secara simple dengan javascript. Class tersebut bernama class Person, walaupun kelihatannya seperti function biasa, perlu diketahui, javascript mempunyai beberapa cara untuk membuat Class, dan salah satunya adalah dengan cara yang saya pakai.

perintah prototype berguna untuk meregister function/ method/ property ke dalam Class , sehingga penggunaannya adalah

ClassName.prototype.method = function(){

}

Selain dengan sintax prototype, register methode kedalam sebuah object bisa juga dengan menggunakan

this.method = function(){

}

bedanya, penggunaan kata this ini harus ada di dalam scope function.object. misalnya:

Person.prototype.School = function(alamat){
        this.Alamat = function(alamat){
        return (alamat) ? alamat : "Margonda";
      }
      return "MI";
 }

 Pada potongan script diatas, kita tahu bahwa dalam method School ada sebuah function/ methode lagi yang bernalam Alamat(arg);

 Kedudukan methode Alamat() sama dengan School(), walaupun kelihatannya methode Alamat() berada didalam methode School(), itu karena rujukan this kembali ke Object Person (dalam contoh ini). jadi jika ingin mengakses method Alamat(), caranya sama dengan School(). misal:

  man = new Person();
  document.write(man.Alamat() + "<br/>");
  document.write(man.School() + "<br/>");

dari Class Person yang telah dibuat diatas, kita bisa mengetahui methode/property apa saja yang ada didalamnya, kita bisa melihatnya dengan menggunakan funcion for in:

  man = new Person();
 
  for(a in man){
    document.write(a + " = " +man[a] + "<br>");
  }

 OK sekian dulu, semoga bermanfaat…

 

Comments (0)