Hallo Agan-agan or sista-sista semuanya..
Disini saya akan menjabarkan tentang program input dan output menggunakan javascript...
sebelum masuk ijinkan untuk menjelaskan tentang javascript.

Apa itu Javascript??

• JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan di sisi Clien
• JQuery adalah library Javascript yang GRATIS alias gretongan dan open source. :D :D :D, Oleh karenanya kita bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita. Tanpa library seperti jQuery, menerapkan javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan website yang cantik dan interaktif.
• Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi  pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Nah disini saya menggunakan Fitur Google Drive untuk menyimpan dan sharing Jquery dan CSS nya agar agan dan sista bisa download disini
Coding JQuery
Coding CSS
Script

Password:  adios311.blogspot.com

Langsung aja gan...

 <script type="text/javascript"src="https://googledrive.com/host/0B5oByw7bZhn4ZURvbGhOTFNNSU0"></script> //ini link sharing JQuery-nya


    <script type="text/javascript">
      $(document).ready(function() {
            $('#karakter').keyup(function() {
                var len = this.value.length;
                if (len >= 12) {
                    this.value = this.value.substring(0, 12);
                }
                $('#hitung').text(12 - len);
            });
      }); // ini adalah script ini untuk mengatur batas karakter inputan pada form.

Bagaimana kalau seandainya ada yang iseng menginput data sampai seribu atau sejuta karakter???
Kan bisa berantakan website kita ( flood data ) @_@, Dengan jquery kita bisa membatasi jumlah maksimal karakter yang diperbolehkan pada Text Area.

ini codingan java scriptnya:
   var jmlharga = 0;
        function addRow(tableID) {

// ini penjabaran table nya:
            var table = document.getElementById(tableID);
             var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 //Setiap selesai input dengan mengklik tombol next maka akan muncul baris baru(row),
            var cell1 = row.insertCell(0);
            cell1.innerHTML = document.input.iKodeBarang.value;
             var cell2 = row.insertCell(1);
            var harga = document.input.iHarga.value;
            cell2.innerHTML = harga;
             var cell3 = row.insertCell(2);
            var jml = document.input.iJumlah.value;
            cell3.innerHTML = jml;
            var cell4 = row.insertCell(3);
            var total = harga*jml;
            cell4.innerHTML = total;

//Codingan diatas ini adalah deklarasi penjabaran pembuatan baris dan kolom pada tabel output beserta isinya(hasil/input yang anda masukan)
//Ini adalah codingan pada cell Jumlah Harga pada tabel dengan memasukan rumus jumlah harga = jumlah harga + total (Total disini itu adalah Harga/Item Barang dikalikan dengan Jumlah/Item Barang)
 
     document.output.totalharga.value = jmlharga;
     document.input.iKodeBarang.value="";
     document.input.iHarga.value="";
     document.input.iJumlah.value="";}

//Codingan diatas mendeklarasikan tentang isi dari cell Output yang value datanya telah anda input sebelumnya .

    </SCRIPT>
    <style type="text/css">
<!--
<link href='https://googledrive.com/host/0B5oByw7bZhn4S1ZDVmw3OFpzWkU' rel='stylesheet'/>
-->//ini link sharing codingan css dari Google Drive yang saya upload

<h1>Input Data</h1>

<form name="input">
<table border="0" bgcolor=#8adc66>
<tr>
<td width="93">Kode Barang</td><td width="8"> : </td>
<td width="152"> <input type="text" id="karakter" name="iKodeBarang" size="30" placeholder=" Input Kode Barang"/></td>
//Jquery akan mengetahui dimana variable id="karakter"(batas jumlah karakter inputan)

<td width="19"id="hitung"><span class="style6">12</span> </td>
<td width="51"align="left"><span class="style6">Digit </span></td>
</tr>
<tr>
<td>Harga/Item</td><td> : </td>
<td> <input type="text" name="iHarga" size="30" placeholder=" Input Harga Barang"/> </td>
</tr>
<tr>
<td>Jumlah/Item</td><td> : </td>
<td> <input type="text" name="iJumlah" size="30" placeholder=" Input Qty Barang"/> </td>
</tr>
<tr>
<td colspan="3" align="right" id="go">
<input type="button" value="submit" onClick="addRow('dataTable')"/>
<input type="reset" value="Cancel"/></td></tr>
</table>
</form>
//Codingan diatas ini merupakan pembuatan form inputan

<b><h1>Output </h1></b>
    <TABLE id="dataTable" width="500px" border="1">
        <tr>
    <td width="20%" bgcolor="#99FFCC"><div align="center">KODE BARANG </div></td>
    <td width="25%" bgcolor="#99FFCC"><div align="center">HARGA/ITEM BARANG </div></td>
    <td width="25%" bgcolor="#99FFCC"><div align="center">JUMLAH/ITEM BARANG </div></td>
    <td width="30%" bgcolor="#99FFCC"><div align="center">JUMLAH HARGA </div></td>
   </tr>
</TABLE>
<form name="output">
<table width="500px" border="1">
 <tr>
     <td width="70%" colspan="3" bgcolor="#99CCFF"><div align="center">TOTAL HARGA</div></td>
     <td width="30%" bgcolor="#99CCFF"><input type="text" name="totalharga" readonly="totalharga"/>
</td>
 </tr>
</table>
</form>
//Codingan diatas merupakan pembuatan template tabel output

Sekian dari saya, walau masih banyak yang kurang dari saya, semoga dapat membantu kawan-kawan yang ingin belajar tentang javascript dan jQuery

Tetap semangat ...!!!
Keep Learning

by
Adios



Sumber:
http://srimelatisagita.wordpress.com/
Sumber 1
Sumber 2
Sumber 3
Sumber 4
Sumber 5

Nama : Willy Adios

NPM : 201143500311

Kelas : 5XC

Mata Kuliah : Pemrograman Web 1

Dosen : Ibu Sri Melati Sagita, MMSI

---

Input Data

Kode Barang	:		12	Digit
Harga/Item	:
Jumlah/Item	:

Output

KODE BARANG

HARGA/ITEM BARANG

JUMLAH/ITEM BARANG

JUMLAH HARGA

TOTAL HARGA

Nama : Willy Adios
Lahir : Bogor
19 Februari 1990
Alamat : Depok
Hobby : Touring, Nanjak Gunung, &Musik

Segitu dulu aja yah... udah malam nih capek ngetiknya..
See you again..

 Adios