Pengenalan PrototypeJS

Belajar javascript framework gak ada habisnya. Macemnya ada banyak, kali ini aku coba sedikit jelasin javascript framework yang PrototypeJs. Yang punya tugas atau mau cari referensi, silahkan di simak. Kale ajah aku bisa sedikit membantu lewat posting ini :) enjoy it..

Prototype Javascript Framework adalah sebuah kerangka kerja javascript yang dibuat oleh Sam Stephenson pada bulan februari 2005 sebagai bagian untuk dukungan Ajax di Ruby on Rails. Hal ini di implementasikan sebagai salah satu file kode Javascript, prototype.js

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');