Zulkarnain Unang
Blog Universitas Komputer Indonesia

Bermain Dengan PrototypeJS (Javascript Framework) Part 1 - Pengenalan

Bermain Dengan PrototypeJS (Javascript Framework) Part 1 - Pengenalan
Penggunaan Javascript pada pembuatan Public website/Portal ataupun Aplikasi berbasis Website saat ini tidak bisa dihindari. Ini dikaernakan tuntutan supaya website tidak hanya kuat secara Functional namun tetap membawa estetika keindahan dalam penampilannya. Saat ini banyak sekali Javascript Framework baik yang gratis maupun yang berbayar digunakan dalam pembuatan website, sebagai contoh adalah JQuery, PrototypeJS, DojoToolKit, extJS, MooTools, dan lain-lain. Tidak hanya berhenti pada Frameworknya saja, khusus untuk JQuery, PrototypeJS dan MooTools, anda bisa Membuat, Memodifikasi, atau hanya sekedar Menggunakan PlugIns/Extensions yang dikembangkan oleh para developer. Dalam Pembuatan Public Website/Portal mungkin sudah tidak asing lagi dengan yang namanya Image Slider, Accordeon, Tab Container, Modal Window, dan lain-lain. 
 
Untuk artikel ini kita khusukan untuk penggunaan PrototypeJS (selanjutnya kita sebut Proto) terlebih dahulu. Tentu alangkah baiknya jika kita mengerti dan memhami penggunaan script-script function dari Proto, terlebih-lebih untuk anda yang sedang mendalami untuk menjadi web based application developer. Hal ini dibutuhkan jika anda mengalami kasus mendownload salah satu Extensions dari Proto, namun anda tidak puas. Dengan mengerti dan memahami penggunaan Proto, anda bisa memodifikasi sesuai kebutuhan.
 
Sebelum anda menggunakan Proto atau Framework Javascript yang lainnya, sebaiknya anda mengerti terlebih dahulu apa itu DOM (Document Object Model) dalam Javascript. Anda bisa membaca Artikel milik mas Amarullz khusu yang membahas DOM, silahkan klik pada link http://amarullz.blog.unikom.ac.id/bermain-dengan-dom.9q untuk membacanya.
 
Proto menyediakan beberapa method yang memudahkan untuk mengolah elemen-eleman dari HTML, method ini disebut utility method. Baik lah kita akan sedikit membahas beberapa utility method untuk memahaminya.
 
Method $
contoh : 
<input type="text" name="harga" id="harga" value="20000">
penggunaan :
$('harga').value; --> menghasilkan 20000
$('harga') sama seperti document.getElementById('harga')
 
Method $$
contoh :
<input type="text" name="piutang[]" class="piutang"  value="20000">
<input type="text" name="piutang[]" class="piutang"  value="30000">
<input type="text" name="hutang[]" class="hutang"  value="30000">
penggunaan :
$$('input') --> menghaslikan sebuah array yang berisi 3 object input
$$('input') --> sama seperti document.getElemetByTagName('input')
$$('input[class="piutang"]') --> menghasilkan sebuah array yang berisi 2 object input yang mempunya class="piutang"
 
Pada Proto juga disediakan beberapa function untuk pengolahaan array result, form, atau yang langsung berhubungan dengan elemen pada HTML, contoh yang akan kita bahas adalah each, invoke, show, hide.
 
show()
function show untuk menampilkan elemen yang sebelumnya disembunyikan baik oleh CSS (display:none) atau oleh function lain.
contoh :
$('harga').show(); --> menampilkan elemen yang mempunya id="harga"
$('harga').visible(); --> hasilnya true;
 
hide()
funtion hide adalah kebalikan dari function show.
contoh :
$('harga').hide();
$('harga').visible(); --> hasilnya false.
 
toggle()
function toggle untuk membuat elemen show/hide menggunakan 1 trigger
contoh :
<input type="text" name="harga" id="harga" value="20000">
<input type="button" value="show/hide" onclick="$('harga').toggle();">
 
each()
function each digunakan untuk menangkap sebuah array dan biasanya untuk pengolahan lebih lanjut pada setiap object dalam array.
Contoh : 
var total = 0;
$$('input[class="piutang"]').each(
 function(set){
   total = parseInt(set.value) + parseInt(total);
 }
);
 
invoke()
function invoke digunakan untuk menangkap sebuah array dan memperlakukan hal yang sama pada setiap object dalam array.
contoh :
$$('input[class="piutang"]').each(
 function(set){
   set.hide();
 }
);
Sama dengan :
$$('input[class="piutang"]').invoke('hide');
 
Demikian untuk artikel bermain dengan PrototypeJS part 1 bagian pengenalan. Berikut saya berikan contoh implementasinya menggunakan prototypeJS versi 1.6. dalam paket berisi contoh implementasi, prototype.js versi 1.6 dan e-book dengan format chm.
 
DOWNLOADAttachment
prototype-pengenalan.zip

Ukuran: 496.82 KB
 Gambarnya sebagai berikut : 
 
1
 
Untuk lebih detailnya mengenai PrototypeJS anda bisa kunjungi situs official nya di http://www.prototypejs.org/ dan tempat ngumpul para developer extentions prototypejs di http://scripteka.com/.
 
Mohon maaf jika ada kesalahan dalam penggunaan istilah dan pendefinisian, saya harapkan feedback dari teman-teman. Semoga bermanfaat.
Format Lainnya : PDF | Google Docs | English Version
Diposting pada : Kamis, 09 Februari 12 - 18:37 WIB
Dalam Kategori : JAVASCRIPT, PROTOTYPEJS
Dibaca sebanyak : 1641 Kali
Tidak ada komentar pada blog ini...
Anda harus Login terlebih dahulu untuk mengirim komentar
Facebook Feedback