Sabtu, 04 April 2015

jQuery

Assalamu'alaikum.. wr.. wb..

Pada kesempatan kali ini, saya akan membahas mengenai materi perkuliahan pertemuan keempat di tanggal 09 Maret 2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai “jQuery”.

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.

jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.

jQuery adalah library Javascript yang gratis dan open source. 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. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery.

Nah, untuk mempermudah setelah penjelasan diatas, mari kita simak beberapa syntax sederhana mengenai jQuery tersebut :

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("#Hitung").click(function(){
               
                                if(($('#absn').val()!=="")
                                && ($('#tgs').val()!=="")
                                && ($('#aktf').val()!=="")
                                && ($('#uts').val()!=="")
                                && ($('#uas').val()!==""))
                                {
                                var absn                               = (20/100)*$('#absn').val();        
                                var tgs                   = (15/100)*$('#tgs').val();                            
                                var aktf                 = (10/100)*$('#aktf').val();                          
                                var uts                  = (25/100)*$('#uts').val();                           
                                var uas                  = (30/100)*$('#uas').val();                                           
                               
                                var nilai = parseFloat(absn+tgs+aktf+uts+uas).toFixed(2);
                                var angka;
                               
                                if((nilai >= 85) && (nilai <= 100))
                                                angka = "A";
                                else if((nilai >= 75) && (nilai <= 84))
                                                angka = "B";
                                else if((nilai >= 65) && (nilai <= 74))
                                                angka = "C";
                                else if((nilai >= 55) && (nilai <= 64))
                                                angka = "D";
                                else
                                                angka = "E";
                               
                                alert("Nilai Akhir = "+nilai+" & Huruf Akhir = "+angka);
                                }else{
                                alert("Data yang kosong harus diisi dahulu !!");
                                }
                });
});

</script>
</head>
<body>

<table width="100" border="0" cellpadding="5">
  <tbody>
      <tr>
      <td colspan = "3" align="center"><b>FORM NILAI</td>
    </tr> 

      <tr>
      <td><b>NIM</td>
      <td>:</td>
      <td><input type="text" name="nama" ></td>
    </tr>
    <tr>
      <td><b>NAMA</td>
      <td>:</td>
      <td><input type="text" name="nim" ></td>
    </tr>
    <tr>
      <td><b>ABSEN</td>
      <td>:</td>
      <td><input type="text" id="absn" ></td>
    </tr>
    <tr>
      <td><b>TUGAS</td>
      <td>:</td>
      <td><input type="text" id="tgs"></td>
    </tr>
    <tr>
      <td><b>KEAKTIFAN</td>
      <td>:</td>
      <td><input type="text" id="aktf" ></td>
    </tr>
    <tr>
      <td><b>UTS</td>
      <td>:</td>
      <td><input type="text" id="uts" ></td>
    </tr>
     <tr>
      <td><b>UAS</td>
      <td>:</td>
      <td><input type="text" id="uas" ></td>
    </tr>
     <tr>
     <td></td>
     <td></td>
     <td align="right"><input type="button" value="Cek Nilai!" id="Hitung"></td>
    </tr>
               
</table>
</body>
</html>
  
Output :


Kemampuan memahami jQuery cukup penting untuk anda yang berprofesi di bidang pengembangan website atau anda yang sedang berencana membuat website yang cantik dan interaktif.

Saya rasa cukup sekian pembahasan saya mengenai jQuery secara sederhana.. semoga bisa bermanfaat dan nantikan pembahasan saya di kesempatan lainnya..
Wassalamu'alaikum.. wr.. wb..


Referensi : http://www.bukuharian.com/apa-itu-jquery.html [040415 - 17:26]

0 komentar:

Posting Komentar