Stella D. J. Shanawi: Tutorial Combo Box Onchange Onkeypress Javascript Adobe Dreamweaver CS3

TUTORIAL JAVASCRIPT

Diberikan perintah untuk membuat sebuah program web dengan fungsi yang dapat menampilkan secara otomatis harga barang persatuan kemudian jika di tekan tombol tertentu akan secara otomatis mencetak hasil sebagai harga total dengan macam-macam tipe barang.

please credit me on twitter @stelldc :)

Maka diperlukan langkah-langkah berikut ini dalam Adobe Dreamweaver CS3:
1. Setelah otomatis terbentuk pada halaman kerja dreamweaver maka akan membentuk tampilan seperti ini dengan header, body hingga koding penutupnya masing-masing.

2. Isilah pada body terlebih dahulu sesuai dengan perintah soal maka kita sesuaikan dengan membuat form terlebih dahulu, masukkan fungsi <form> kemudian tutup dengan </form>
3. Beri nama form dengan dalam koding <form name=""> isi sesuai selera, dalam perintah ini kita pakai saja <form name="form1">

4. Fungsi <center> digunakan supaya tabel tepat berada di tengah tampilan.
5. Berikan ukuran tabel

table border berfungsi untuk memberikan tebal pinggiran tabel

table width menentukan lebar tabel

table height menentukan tinggi tabel

6. Masukkan fungsi pembuat tabel dengan <table> dan </table>

<tr> adalah table row berfungsi untuk menentukan banyaknya baris yang akan dibuat, kemudian tutup dengan fungsi </tr>

<td> adalah fungsi untuk menentukan banyaknya kolom yang akan dibuat

7. Memasukkan fungsi valign dalam kolom <td valign="top"> berfungsi agar tulisan ataupun apa saja yang ada di dalam kolom berada di titik atas, tepat berawal dr sisi atas.

8. Tabel dan form

a) Perhatikan dalam baris dan kolom pertama, tertulis <td colspan="2"> menandakan fungsi penggabungan kolom dan kolom yang digabungkan sejumlah 2 kolom, jika fungsi ini ditambahkan maka harus ada penghapusan kolom kosong sesuai jumlah, seperti ini:

b) Perhatikan dalam baris kedua dan kolom pertama, tertulis:

<td valign="top"> </td> masukkan tampilan teks, menjadi <td valign="top">Nama Barang</td> dalam pemberian tampilan diluar fungsi pembuka ini boleh terserah selera karena inilah yang nantinya ditampilkan di kolom kedua sesuai perintah.

Perhatikan dalam baris kedua dan kolom kedua, masukkan fungsi <td valign="top> </td> sebagai penanda kolom, kemudian seusai fungsi pembuka masukkan perintah combo box, <td valign="top"> <select name="namabarang" onchange="pilih(namabarang.value)"> kemudian masukkan option yang berisi list menu combo box, buat sesuai permintaan dengan fungsi:

<option value="beng"> Beng-beng </option>

<option value="top"> Top 10 </option>

<option value="qt"> QTela </option>

<option value="sil"> Silver Queen </option>

lalu tutup dengan fungsi </select>

Perlu diketahui bahwa pemberian name="namabarang" adalah nilai umpan yang dijadikan sebagai value agar fungsi memiliki indikator sebagai isi parameter.

onchange="pilih(namabarang.value)"

onchange artinya ganti, ini adalah fungsi umpan balik yang akan menjadi parameter function script yang terletak di atas header sebuah lembar kerja html, jadi setiap diganti maka akan berganti isi sesuai dengan function. ="pilih(namabarang.value)" berarti fungsi dengan nama pilih akan berjalan dengan parameter namabarang sebagai value.

Perhatikan gambar!

c) Perhatikan baris keempat kolom kedua, dalam kolom terdapat fungsi <input type="text" name="jumlah" onkeypress="hasil(harga1.value,jumlah.value)"/> terdapat fungsi onkeypress berarti jika kita menekan tombol tertentu seperti tombol "enter" maka parameter hasil akan melemparkan isi parameternya ke dalam fungsi yang ada pada script, hasil(harga1.value,jumlah.value) pemisah dalam parameter ini menggunakan tanda koma (,) sementara harga1.value berarti value senilai harga1, value sebagai pelempar setelah tanda titik (.)

Lakukan hingga baris dan kolom terakhir.

9. Kembali ke atas setelah fungsi title, di dalam head. masukkan fungsi <script> </script> kemudian masukkan fungsi pertama sebagai isi combo box:

function pilih(d)

function pilih sebagai variabel untuk pemrograman dalam script, kali ini kita akan menggunakan if else dengan 5 kemungkinan sesuai banyaknya option dalam select di tabel. kemudian (d) adalah parameter sesuai dengan fungsi yang ada dalam baris kedua kolom kedua.

masuk ke pemrograman if else:

if(d=="beng") d adalah value dari parameter yang berisikan namabarang.value, dinyatakan dengan tanda (==) sebagai pembanding.

{

document.forms["form1"].harga1.value=1000;

}

Cara baca format ini adalah sebagai berikut, sesuaikan dengan per karakter:

1. Document berarti isi dari if ini diambilkan dari document yang sedang dibuat)

2. Tanda titik (.) digunakan sebagai penggabungan atau perkalian hasil

3. Forms berarti pengambilan isi diambil dari form yang ada di document

4. Kemudian masukkan nama form ["form1"]

5. Harga1.value adalah parameter bahwa pengambilan isi ada dalam kolom harga satuan, dengan value "harga1"

6. Masukkan harga dengan memberi tanda sama dengan (=) lalu masukkan angka sebagai harga per satuan.

fungsi kedua, pengambilan sama seperti cara fungsi pertama.

Setelah itu program selesai dibuat lantas simpan file dalam format .html kemudian buka file lewat web browser akan menampilkan seperti berikut:

Tampilan ketika combobox di klik lalu memilih jenis barang, akan secara otomatis menunjukkan harga satuan. Inilah fungsi onchange berjalan, dengan function yang benar.