Kamis, 16 Maret 2017

Membuat Web Browser Pada Visual Basic



  Disini saya akan membagi pengetahuan mengenai membuat program web browser menggunakan Visual basic. Kontrol web browser digunakan untuk menampilkan halaman web URL tertentu. Kontrol ini cocok bagi anda yang ingin mengembangkan program web browser versi sendiri.Berikut adalah langkah – langkah pembuatannya:

  1.  Siapkan proyek baru, lalu simpan proyek tersebut dengan nama latihan webbrowser.
  2.  Tempatkan satu kontrol webbrowser kedalam form, lalu ubah properti dock menjadi none.
  3. Ubah property anchor dari kontrol webbrowser menjadi “Top,left,bottom,right”.
  4. Buatlah  desain seperti dibawah ini:
    Keterangan: input 6 button,1 textbox,1 web browser




    5.   Setelah anda membuat desain seperti diatas perhatikan berikut ini:
  • Stop()digunakan untuk menghentikan proses navigasi terhadap suatu alamat tertentu.
  • Refresh()digunakan untuk memuat ulang alamat web dari suatu alamat tertentu.
  • Goback()digunakan untuk melakukan navigasi ke halaman yang telah dikunjungi sebelumnya.
  • Go forward()digunakan untuk melakukan navigasi ke halaman selanjutnya yang telah dikunjungi belumnya.
  • Close digunakan untuk keluar dari program
    6. Masukkan skript berikut untuk event load dari form 1:

    


   7.   Masukkan skript berikut untuk event clik pada button “Go”








     

8.    Masukkan skript berikut pada button “Stop”






     9.Masukkan skript berikut pada button “refresh”





      

10. Masukkan skript berikut pada button “close”
        Me.close()
     
    
11. Masukkan kode berikut pada button “<”






   
 12. Masukkan skript berikut pada button “>”







    
13. Setelah anda sudah memasukkan semua skrip silahkan anda RUN program anda!maka tampilannya akan seperti berikut:






Program Web Browser

Yayyyy!!! Kali ini saya akan memberitahu bagaimana cara membuat sebuah web browser. sebelum itu kalian pasti sudah taukan apa itu web browser? kalo kalian belum tahu yukk kita cari tahu dulu apa itu Web Browser!!


Pengertian Web Browser Dilihat dari Arti Kata dan Fungsinya
Jika ditinjau dari frasa katanya, web browser terdiri atas dua kata berbahasa Inggris yaitu kata’web’ dan kata ‘browser’. Arti dari kedua kata ini yaitu : web merupakan singkatan dari website yaitu halaman situs yang ada di jaringan internet, sedangkan browser dapat diartikan sebagai media penjelajah. Dari kedua arti kata ini, maka dapat ditarik kesimpulan bahwa web browser merupakan alat penjelajah halaman situs website.

Jika ditinjau dari fungsinya sendiri, pengertian web browser adalah sebuah program yang berfungsi sebagai media untuk membuka berbagai macam halaman situs yang ada di jaringan internet.



Disini saya akan membagi pengetahuan mengenai membuat program web browser menggunakan Visual basic. Kontrol web browser digunakan untuk menampilkan halaman web URL tertentu. Kontrol ini cocok bagi anda yang ingin mengembangkan program web browser versi sendiri.Berikut adalah langkah – langkah pembuatannya:

  1.  Siapkan proyek baru, lalu simpan proyek tersebut dengan nama latihan webbrowser.
  2.  Tempatkan satu kontrol webbrowser kedalam form, lalu ubah properti dock menjadi none.
  3. Ubah property anchor dari kontrol webbrowser menjadi “Top,left,bottom,right”.
  4. Buatlah  desain seperti dibawah ini:
    Keterangan: input 6 button,1 textbox,1 web browser

    5.   Setelah anda membuat desain seperti diatas perhatikan berikut ini:
  • Stop()digunakan untuk menghentikan proses navigasi terhadap suatu alamat tertentu.
  • Refresh()digunakan untuk memuat ulang alamat web dari suatu alamat tertentu.
  • Goback()digunakan untuk melakukan navigasi ke halaman yang telah dikunjungi sebelumnya.
  • Go forward()digunakan untuk melakukan navigasi ke halaman selanjutnya yang telah dikunjungi belumnya.
  • Close digunakan untuk keluar dari program
    6. Masukkan skript berikut untuk event load dari form 1:

    


   7.   Masukkan skript berikut untuk event clik pada button “Go”








     8.    Masukkan skript berikut pada button “Stop”






     9.Masukkan skript berikut pada button “refresh”





      10. Masukkan skript berikut pada button “close”
        Me.close()
     
    11. Masukkan kode berikut pada button “<”






    12. Masukkan skript berikut pada button “>”




    13. Setelah anda sudah memasukkan semua skrip silahkan anda RUN program anda!maka tampilannya akan seperti berikut:






Sabtu, 04 Maret 2017

Exception(Try-Catch-Finally-Throw)

1. Pengertian Exception

      Exception adalah suatu mekanisme yang digunakan oleh beberapa bahasa pemrograman untuk mendeskripsikan apa yang harus dilakukan jika ada suatu kondisi yang tidak diinginkan terjadi. Eksepsi dapat dijumpai saat:

  • Mengakses method dengan argumen yang tidak sesuai.
  • Membuka file yang tidak ada
  • Koneksi jaringan yang terganggu
  • Manipulasi operan yang nilainya keluar dari batasan yang didefinisikan
  • Pemanggilan class yang tidak ada.


2. Jenis-jenis Exception

Checked exceptions: merupakan exception yang disebabkan oleh kesalahan
pemakai program atau hal lain yang dapat diprediksi oleh pemrogram. Contohnya,
jika ingin membuka file tapi file tidak ditemukan, maka exception akan muncul.

Runtime exception: ini adalah exception yang muncul dimana kemunculannya
tidak bisa dihindari oleh pemrogram.

Errors: Ini sebenarnya bukan exception, namun merupakan masalah yang muncul
diluar kendali pemakai dan pemrogram. Error secara umum akan dibiarkan saja,
sebab tidak ada yang bisa dilakukan untuk mengatasinya. Sebagai contoh, jika stack
overflow muncul, maka error akan muncul.

3. pengertian Try

     keyword ini digunakan untuk mencoba menjalankan block program, kemudian mengenai dimana munculnya kesalahan yang ingin diproses. keyword ini juga harus dipasangkan dengan keyword catch atau keyword finally.

4. pengertian  Catch

    Dalam java, keyword catch harus dengan try. kegunaan keyword ini adalah menangkap lesalahan atau bug yang terjadi dalam block try.

5. pengertian Finally

     Keyword finally merupakan keyword yang menunjukan bahwa block program tersebut akan selalu dieksekusi meskipun adalanya kesalahan yang muncul atau pun tidak ada.

6.pengertian throw

       keyword throw digunakan untuk melemparkan suatu bug yang dibuat secara manual.
keyword ini digunakan dalam satu method atau kelas yang menghasilkan kesalahan sehingga perlu ditangkap errornya.

7.perbedaan catch dan finally

  • Catch 

    Jika anda sudah melihat contoh try maka secara tidak langsung anda sudah memahami kegunaan dari keyword ini. Dalam java, keyword catch harus dipasangkan dengan try. Kegunaan keyword ini adalah menangkap kesalahan atau bug yang terjadi dalam block try. Setelah menangkap kesalahan yang terjadi maka developer dapat melakukan hal apapun pada block catch sesuai keinginan developer. Contoh Program :

catch(Exception kesalahan)
{
    System.out.println(“mohon maaf, terdapat kesalahan pada program”);
    //lakukan hal lainnya disini
}
Keyword catch juga dapat diletakan berulang-ulang sesuai dengan kebutuhan. Contoh :

public class A
{
    public static void main(String[] args) {
        try
        {
            int a = 1/0;  //berpotensi untuk menimbulkan kesalahan yaitu pembagian dengan bilangan 0
            System.out.println("perintah selanjutnya");
        }
        catch(NullPointerException e)
        {
        }
        catch(ArrayIndexOutOfBoundsException e)
        {
        }
        catch(Exception e)
        {
        }
    }
}






  • finally

       Keyword ini merupakan keyword yang menunjukan bahwa block program tersebut akan selalu dieksekusi meskipun adanya kesalahan yang muncul atau pun tidak ada. Contoh implementasinya pada program :

public class A
{
    public static void main(String[] args) {
        try
        {
            int a = 1/0;
        }
        catch (Exception e)
        {
            System.out.println(“ada kesalahan yang muncul”);
        }
        finally
        {
            System.out.println(“terima kasih telah menjalankan program”);
        }
    }
}
Output Program :

ada kesalahan yang muncul

terima kasih telah menjalankan program

Perhatikan kedua contoh diatas, block finally akan selalu dieksekusi meskipun adanya kesalahan atau tidak pada block try. Berbeda dengan keyword catch keyword finally hanya dapat diletakan 1 kali setelah keyword try.

8. Penggunaan  fungsi Try pada java

Try dan Catch merupakan suatu fitur pada java yg dikhusus untuk menangani suatu kesalahan atau error pada suatu listing program. Struktur dari fungsi try catch adalah sebagai berikut.

try{
    listing program (blok try)
}
catch(Throwable t){
    error handler (blok catch)
}

Logikanya seperti ini, jika kita menulis sebuah program, dan di dalam program tersebut terjadi suatu kesalahan atau pun error maka program akan terhenti dan tidak menjalankan listing program selanjutnya. Tetapi jika kita menggunakan fungsi try catch, listing program yg kita tuliskan didalam blok try akan dijalankan oleh program, dan jika dalam program tersebut terdapat suatu kesalahan, maka kesalahan/error tersebut akan di tangani oleh blok catch, dan selanjutnya listing program yg ada selanjutnya akan tetap dijalankan.
Untuk lebih jelasnya silahkan jalankan ke-2 program dibawah ini.

 Program 1

import javax.swing.JOptionPane;

/**
 *
 * @author yudhaN
 */
public class tray {
    public static void main (String[] args){
        System.out.println(10/0);
        JOptionPane.showMessageDialog(null,"program selanjutnya");
    }
}


Program 2

import javax.swing.JOptionPane;

/**
 *
 * @author yudhaN
 */
public class tray {
    public static void main (String[] args){
        try{
            System.out.println(10/0);
        }
        catch(Throwable t){
            JOptionPane.showMessageDialog(null,"error pada : "+t.getMessage());
        }
        JOptionPane.showMessageDialog(null,"program selanjutnya");
    }
}

Dari ke dua program diatas, terdapat 2 inti output, yaitu output hasil
dari 10/0, dan output "program selanjutnya", pada program pertama untuk
output pertama akan mengeluarkan hasil dari 10/0, karna tidak bisanya
suatu angka dibagi dengan 0, maka terjadi error, dan output "program
selanjutnya" tidak dijalankan. Berbeda dengan program ke-2 yg
menggunakan fungsi try catch, listing program pertama memang terjadi
kesalahan, yg mana angka 10 tidak bisa dibagi oleh bilangan 0, dan akan
muncul pesan error, tetapi setelah itu program akan tetap menjalankan
output "program selanjutnya", berbeda dengan program ke-1 yg mana
listing output selanjutnya tidak dijalankan.


9. Aturan penggunaan pada catch

 Try Catch ini adalah salah satu fitur dari Java untuk menangkap eksepsi atau kesalahan. Ya mungkin kita sering melakukan kesalahan dalam membuat program. Nah, dengan menggunakan Try Catch ini kita bisa menangkap kesalahan itu. Eksespsi bisa berupa kesalahan penulisan kode, kesalahan saat menjalankan method dan sebagainya.
Bentuk umum Try Catch

try {
   <blok_programs>;
}
catch(<parameter>) {
   <blok_yang_dijalankan_jika_terjadi_eksepsi>;
}
finally {
   <blok_yang_dijalankan_terakhir>;
}
Di blok program di dalam Try itu adalah program yang akan dijalankan dan akan ditangkap eksepsinya jika terjadi kesalahan. Dan yang di blok catch adalah blok yang dijalankan jka terjadi eksepsi, jadi pesan kesalahannya di dalam catch ini. Biasanya berupa statement. Finally sebenarnya hanya pelengkap saja dan jarang digunakan. Ini bisa dibayangkan sebagai footer, yaitu akan keluar di akhir atau dijalankan di akhir. Mungkin akan lebih jelas dengan contoh di bawah ini:

class Coba {
   public static void main(String[] args) {
      System.out.println("starram\n");
      try{
         System.out.println(10/0);
      }
      catch(Throwable b) {
         System.err.println("terjadlahan >> "+b.getMessage());
      }
      finally {
         System.out.println("Pembagiann");
      }
      System.out.println("endrogram");
   }
}
Outputnya

start program

terjadi kesalahan >> / by zero

pembagian nol

end of program

NB:

Program dibaca dari atas, mencetak start program terlebih dulu setelah itu baru masuk try
Di blok program try terjadi kesalahan. Kesalahannya, bilangan berapapun jika dibagi nol itu tidak bisa atau tidak terdefinisi.
Blok catch mencetak kesalahannya. Catch mempunyai parameter b yang berkelas Throwable. Throwable adalah kelas yang ada di package java.lang yang menangani eksepsi dan merupakan turunan dari kelas objek (kelas tertinggi di JAVA). Dan perlu diketahui blok ini akan dijalankan jika terjadi eksepsi saja.
System.err.println untuk mencetak kesalahan dan getMessage() adalah method untuk menampilkan kesalahan yang terjadi.
Blok finally itu bisa dikatakan seperti footer, jadi akan dijalankan di bagian terakhir saja dan akan tetap dijalankan walaupun tidak terjadi kesalahan atau eksepsi sekalipun
Setelah selesai akan keluar dari Try Catch dan mencetak end of program

10. Aturan penggunaan pada finally

Keyword finally biasanya di gunakan saat keyword try dan crach karena keyword finally merupakan implementasian dari keyword-keyword sebelumnya yaitu keyword try dan crach. Berikut cara penuliasn pada keyword finally :

try {
<kode monitor exception>
} catch (<ExceptionType1> <ObjName>) {
<penanganan jika ExceptionType1 terjadi>
} …
} finally {
<kode yang akan dieksekusi saat blok try berakhir>
}


Penulisan pada program ini bertujuan untuk mengatur penggunaan finally, keyword ini di gunakan seperti halnya pada blok catch. Penggunaan finally dimulai setelah kurung kurawal penutup blok catch terkait. Penulisan dalam blok tersebut juga mengalami indentasi. Blok finally mengandung kode penanganan setelah penggunaan try dan catch. Blok kode ini selalu tereksekusi walaupun sebuah exception terjadi atau tidak pada blok try. Blok kode tersebut juga akan menghasilkan nilai true meskipun return, continue ataupun break tereksekusi. Terdapat 4 kemungkinan skenario yang berbeda dalam blok try-catch-finally.

  • Pemaksaan keluar program terjadi bila control program dipaksa untuk melewati blok try menggunakan return, continue ataupun break. 
  • Sebuah penyelesaian normal terjadi jika try-catch-finally tereksekusi secara normal tanpa terjadi error apapun. 
  •  Kode program memiliki spesifikasi tersendiri dalam blok catch terhadap exception yang    terjadi. 
  •  Kebalikan skenario ketiga. Dalam hal ini, exception yang terjadi tidak terdefinisikan pada blok catch manapun. Contoh dari skenario – skenario tersebut terlihat pada kode keyword finally bisa teman lihat di Tutorial Praktek atau setelah materi ini.


Rabu, 22 Februari 2017

Membuat Event Menambahkan Fungsi

Browser Event
                Untuk dapat menghasilkan dokumen HTML yang menarik, modifikasi elemen-elemen dalam dokumen saja tentu tidak cukup. Terkadang kita memerlukan dokumen yang interaktif; yang memberikan respon terhadap masukan dari pengguna. Terdapat banyak jenis masukan dari pengguna yang dapat diakses oleh browser. Penekanan tombol keyboard adalah masukan. Klik tombol mouse juga adalah masukan. Bahkan pergerakan mouse juga dapat dihitung sebagai masukan. Berbagai masukan dari pengguna ini dibaca dan dipantau oleh browser agar kita dapat mengambil tindakan ketika pengguna memberikan masukan. Karena masukan dianggap sebagai sesuatu yang dilakukan pengguna, atau dengan kata lain kejadian ketika dokumen HTML ditampilkan, maka hasil rekaman peristiwa ini dikenal dengan nama event.
                Cara kerja dari browser event sendiri sangat sederhana. Browser memberikan kita fasilitas untuk memantau kejadian tertentu pada elemen DOM tertentu. Kita kemudian dapat memberikan sebuah fungsi kepada browser, yang nantinya dipanggil ketika peristiwa yang dipantau terjadi. Untuk beberapa peristiwa, misalnya penekanan tombol keyboard seringkali kita akan memerlukan informasi tambahan seperti tombol apa yang ditekan pengguna. Untuk mengakomodasi hal ini browser memberikan objek khusus untuk event yang dapat kita akses melalui fungsi yang kita berikan ke pemantau kejadian.
                Perlu diketahui juga bahwa event dijalankan dari elemen yang paling dalam dari DOM, dan kemudian bergerak naik terus sampai ke elemen paling atas dari DOM (body). Misalkan kita memiliki elemen seperti berikut:
1
2
3
4
5
6
<p>Sebuah paragraf dengan list di dalamnya.
   <ul>
       <li>List pertama</li>
       <li><a href="http://google.com">List kedua</a></li>
    </ul>
</p>
                Jika pengguna melakukan klik pada teks “List kedua” pada elemen HTML di atas, maka browser terlebih dahulu akan menjalankan event yang ada pada elemen a. Jika kita tidak memantau elemen tersebut, maka browser akan mengecekevent pada elemen li, dan seterusnya sampai kepada elemen p dan akhirnya elemen teratas, body. Jika pada elemenbody juga tidak terdapat event yang dipantau, maka browser akan menjalankan fungsi standar browser. Dalam contoh di atas, browser akan bergerak ke alamat http://google.com. Pola pergerakan event seperti ini kita kenal dengan namaevent bubbilg atau bubbing phrase.
                Seperti yang dapat dilihat sejauh ini, event dalam DOM cukup sederhana dan mudah. Pada dasarnya, untuk menambahkan interaktifitas dalam dokumen HTML kita cukup melakukan dua langkah saja:
  1. Buat fungsi yang ingin dipanggil ketika event terjadi.
  2. Kaitkan elemen DOM dengan event yang diinginkan, beserta dengan fungsi yang dibuat pada langkah pertama.
Secara umum, browser menyediakan lima fasilitas khusus berkaitan dengan event, yaitu fasilitas untuk:
  1. Mendaftarkan pemantau event.
  2. Mengambil objek event.
  3. Mengambil informasi dari objek event.
  4. Memberikan informasi ke browser bahwa event telah selesai ditangani.
  5. Menghapus (melepaskan) pemantau event.
Kelima fasilitas yang ada ini sangat mudah digunakan, walaupun sayangnya beberapa browser mengimplementasikan semuanya dengan cara yang berbeda-beda. Seperti biasa, pembahasan akan kita lakukan hanya untuk browser berbasis Webkit dan Gecko.
Pemantauan Event
                Untuk melihat bagaimana kita dapat memantau event pada sebuah elemen DOM, kita akan bekerja dengan sebuah dokumen sederhana yang memiliki tulisan dan tombol, seperti berikut:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Event dalam Browser</title>
    </head>
    <body>
        <h1 id="judul">Judul Bab Dokumen</h1>
        <p>
        <a href="http://www.google.com" id="link">
            Link ke Google
        </a>
    </p>

        <input type="button"
           id="btnJudul"
           value="Ganti Warna Judul Bab">

        <input type="button"
           id="btnLink"
           value="Ganti Warna Link">

        <script type="text/javascript" src="script.js"></script>
    </body>
    </html>
Untuk mengaitkan pemantau event ke salah satu elemen, kita dapat memanggil method addEventListener milik elemen tersebut. addEventListener merupakan method milik objek yang mengimplementasikan antarmuka EventTarget.EventTarget sendiri diimplementasikan oleh seluruh elemen HTML dan beberapa objek khusus lainnya (misal:XMLHttpRequest). addEventListener menerima tiga buah argumen, yaitu:
  1. Argumen pertama merupakan string yang berisi teks dari nama event yang ingin dipantau.
  2. Argumen kedua menerima objek, atau tepatnya fungsi, yang ingin dijalankan ketika event terjadi.
  3. Argumen ketiga yaitu sebuah nilai boolean yang menandakan apakah bubbling phrase harus dijalankan dengan normal (dari dalam ke luar) atau sebaliknya (dari luar ke dalam). Nilai false berarti bubbling phrase berjalan normal, sementara true berarti bubbling phrase berjalan terbalik. Argumen ketiga ini bersifat opsional (tidak harus diisikan). Jika tidak diisikan bubbling phrase akan berjalan normal (nilai false).
Pada umumnya kita hanya akan menggunakan parameter pertama dan kedua, karena masih banyak browser yang tidak mengimplementasikan argumen ketiga. Langsung saja, misalkan jika kita ingin melakukan sesuatu ketika tombol “Ganti Warna Judul Bab” di-klik:
1
2
3
4
5
6
7
var tombol = document.getElementById("btnJudul");
var fungsi = function () {
    var jdl = document.getElementById("judul");
    jdl.style.color = "#5FF";
};

tombol.addEventListener("click", fungsi);
Kode di atas cukup jelas dan sederhana: ambil elemen yang tepat (tombol) dan kemudian kaitkan event klik ke fungsidengan addEventListener. Setelah menjalankan kode di atas, elemen h1 dengan id judulBab akan berubah warnanya ketika kita menekan tombol “Ganti Warna Judul Bab”.
Untuk menghilangkan atau membuang pemantau event sendiri dapat dilakukan dengan mudah, memanfaatkan fungsiremoveEventListener milik elemen yang bersangkutan. Fungsi ini memiliki parameter yang sama persis denganaddEventListener.
1
tombol.removeEventListener("click", fungsi);
Perhatikan juga bagaimana kita tetap mengirimkan fungsi ke removeEventListener. Hal ini berarti kita harus memiliki akses terhadap fungsi dan tombol ketika memanggil removeEventListener.
Objek Event
Objek Event merupakan sebuah objek yang dibuat ketika sebuah event berjalan. Objek Event dapat kita akses melalui fungsi yang kita kirimkan ke addEventListener:
1
2
3
4
5
6
var aksesEvent = function (evt) {
    // parameter evt merupakan objek Event
};

// fungsi aksesEvent akan dapat mengakses objek event
tombol.addEventListener("click", fungsi);
Pada kode di atas, kita hanya cukup menambahkan sebuah parameter ke dalam fungsi yang akan dikirimkan untuk dapat mengakses Event. Melalui objek ini kita dapat mengakses berbagai informasi mengenai event yang sedang berjalan. Misalnya, kita bisa mendapatkan elemen yang sedang berinteraksi dengan pengguna melalui properti target:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var link = document.getElementById("link");
    var fungsiLink = function (event) {
            // karena pengguna melakukan klik terhadap
            // elemen dengan id link, maka kita bisa
            // mengambil elemen tersebut melalui Event.target
        var el = event.target;

        el.style.color = "#F43";
        el.style.textDecoration = "none";
    };

    // ketika di-klik, link akan berubah warna dan
    // tidak lagi bergaris bawah
    link.addEventListener("click", fungsiLink);
Sayangnya ketika kode penanganan event di atas berjalan kita tidak akan dapat melihat perubahan warna dan tampilan teks karena secara otomatis browser akan berpindah halaman ke Google. Untuk menangani hal ini, kita bisa memanggilmethod preventDefault yang berguna untuk membatalkan aksi standar (default) dari elemen DOM:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var link = document.getElementById("link");
    var fungsiLink = function (event) {
        var el = event.target;
        el.style.color = "#F43";
        el.style.textDecoration = "none";

        // memaksa elemen link tidak membuat
        // browser berpindah ke halaman lain
        event.preventDefault();
    };

    link.addEventListener("click", fungsiLink);
Sekarang kita bisa melihat bagaimana objek Event memiliki properti dan method yang sangat berguna, beserta cara menggunakan fitur-fitur tersebut. Keseluruhan method dan properti yang dimiliki objek Event tidak akan kita bahas di sini. Silahkan baca dokumentasi objek Event pada website yang relevan jika ingin melihat informasi apa saja yang disediakan oleh Event.
Membuat Event Sendiri
Jika memang diperlukan, kita juga dapat membuat event milik kita sendiri. Objek CustomEvent digunakan untuk membuatevent yang kita inginkan. CustomEvent dapat dibuat dengan memanggil constructor objek, seperti berikut:
1
2
3
4
5
var eventBuatan = new CustomEvent("eventBuatan", {
        detail: { name: "Event Buatan" },
        bubbles: true,
        cancelable: true
    });
Seperti yang dapat dilihat dari kode di atas, CustomEvent menerima dua buah parameter untuk constructor-nya, yaitu:
  1. Nama event yang kita inginkan, dalam contoh ini eventBuatan.
  2. Data yang ingin kita berikan kepada event buatan.
Terdapat tiga data utama yang dapat kita berikan, yaitu:
  1. bubbles, nilai boolean yang menentukan apakah event akan menjalankan bubble phrase atau tidak.
  2. cancelable, nilai boolean untuk memberikan fitur pembatalan event melalui method preventDefault danstopPropagation milik objek Event.
  3. detail, yang merupakan sebuah objek berisi data apapun yang ingin kita berikan kepada event.
Untuk menggunakan event buatan, kita dapat mengaitkan event tersebut kepada sebuah elemen DOM, seperti layaknyaevent bawaan dari browser:
1
2
3
link.addEventListener("eventBuatan", function (event) {
    // lakukan sesuatu ketika eventBuatan terjadi
});
Sayangnya, berbeda dengan event bawaan browserevent buatan kita tidak akan dapat berjalan secara otomatis ketika pengguna melakukan sesuatu dalam dokumen. Untuk event buatan, kita harus memanggil method dispatchEvent ketika ingin menjalankan event tersebut. dispatchEvent sendiri merupakan method milik elemen DOM, sehingga penggunaannya memerlukan keberadaan elemen DOM yang bersangkutan:
1
link.dispatchEvent(eventBuatan);
Karena keterbatasan inilah maka dalam penggunaan di aplikasi biasanya kita menggabungkan event buatan dengan interaksi antar satu objek dengan objek lain, bukan interaksi antara pengguna dengan dokumen HTML.
Keindahan Model Event Browser
Model event yang disediakan oleh DOM sangat sederhana. Tidak hanya sederhana, model yang diberikan oleh DOM juga sangat berguna. Dengan menggunakan model event milik DOM, kita mendapatkan akses terhadap aksi pengguna dari berbagai perangkat, mulai dari PC sampai dengan smartphoneEvent memungkinkan kita untuk mengakses apa yang terjadi, kapan sebuah event terjadi, dan kemudian menentukan respon kita terhadap event tersebut dengan sangat mudah. Bagaimana browser mengimplementasikan event tidak terlalu penting - kita dapat dengan tenang mengahlikan fokus kita ke pengembangan aplikasi web yang baik.

Abstraksi yang disediakan oleh event seperti ini sangat patut ditiru. Jika mampu membangun aplikasi dengan mengimplementasikan konsep-konsep yang ada dalam event, kita akan mendapatkan kode aplikasi yang sangat rapi dan mudah dirawat. Framework modern Javascript seperti Backbone.js dan AngularJS banyak menggunakan konsep-konsep sejenis. Jika tertarik dengan konsep yang digunakan oleh model event seperti ini, silahkan baca lebih lanjut mengenai pola pengembangan (design pattern) Observer.