JQuery adalah
library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang
berjalan di sisi Client. JQuery diluncurkan pada tanggal 26 Januari 2006 di
Barcamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.
Sekarang
JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai
oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery
menjadi Library Javascript yang paling popular Sekarang.
Script
JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi
object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga
menyediakan layanan atau support para developers untuk membuat plug-ins
di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer
website membuat website lebih interaktif dengan animasi, efek – efek, tema dan
widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat
website dinamis atau website aplikasi menjadi modern.
Microsoft dan
Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft
awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX
dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya
dalam kerangka Web Run-Time mereka.
Beberapa
Fitur yang ada di JQuery :
Dalam
Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis
dan interaktif.
JQuery
bisa memanipulasi Class pada CSS dan
Support CSS 3
Event
AJAX
Efek-efek
dan animasi
Ekstensi
dan Plug-ins
Kompatibilitas
dengan hampir semua Browser modern
Keperluan
lain seperti : User Agent, Feature detection dan lainnya
JQuery
hanyalah 1 file yang berisi kode dalam Javascript tetapi bisa berisi banyak
fitur seperti di atas. Sehingga cara menggunakaanya sangat mudah.
Contoh script menggunakan JQuery, salah satunya membuat nilai hitung absen, tugas, keaktifan, UTS, UAS Mahasiswa:
<!DOCTYPE
html>
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#HitungNilai").click(function(){
var absen = (20/100)*$('#absen').val(); //20%
var tugas = (15/100)*$('#tugas').val(); //15%
var keaktifan = (10/100)*$('#keaktifan').val(); //10%
var uts = (25/100)*$('#uts').val(); //25%
var uas = (30/100)*$('#uas').val(); //30%
var nilai_akhir = parseFloat(absen+tugas+keaktifan+uts+uas).toFixed(2);
var huruf_akhir;
if((nilai_akhir > 85) && (nilai_akhir < 100))
huruf_akhir = "A";
else if((nilai_akhir > 75) && (nilai_akhir < 85))
huruf_akhir = "B";
else if((nilai_akhir > 65) && (nilai_akhir < 75))
huruf_akhir = "C";
else if((nilai_akhir > 55) && (nilai_akhir < 65))
huruf_akhir = "D";
else
huruf_akhir = "E";
alert("Nilai Akhir = "+nilai_akhir+" & Huruf Akhir = "+huruf_akhir);
});
});
</script>
</head>
<body>
<table>
<tr><td>Absen</td><td> : </td><td><input type="text" id="absen"></td></tr>
<tr><td>Tugas</td><td> : </td><td><input type="text" id="tugas"></td></tr>
<tr><td>Keaktifan</td><td> : </td><td><input type="text" id="keaktifan"></td></tr>
<tr><td>UTS</td><td> : </td><td><input type="text" id="uts"></td></tr>
<tr><td>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="HitungNilai"></td></tr>
</table>
</body>
</html>
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#HitungNilai").click(function(){
var absen = (20/100)*$('#absen').val(); //20%
var tugas = (15/100)*$('#tugas').val(); //15%
var keaktifan = (10/100)*$('#keaktifan').val(); //10%
var uts = (25/100)*$('#uts').val(); //25%
var uas = (30/100)*$('#uas').val(); //30%
var nilai_akhir = parseFloat(absen+tugas+keaktifan+uts+uas).toFixed(2);
var huruf_akhir;
if((nilai_akhir > 85) && (nilai_akhir < 100))
huruf_akhir = "A";
else if((nilai_akhir > 75) && (nilai_akhir < 85))
huruf_akhir = "B";
else if((nilai_akhir > 65) && (nilai_akhir < 75))
huruf_akhir = "C";
else if((nilai_akhir > 55) && (nilai_akhir < 65))
huruf_akhir = "D";
else
huruf_akhir = "E";
alert("Nilai Akhir = "+nilai_akhir+" & Huruf Akhir = "+huruf_akhir);
});
});
</script>
</head>
<body>
<table>
<tr><td>Absen</td><td> : </td><td><input type="text" id="absen"></td></tr>
<tr><td>Tugas</td><td> : </td><td><input type="text" id="tugas"></td></tr>
<tr><td>Keaktifan</td><td> : </td><td><input type="text" id="keaktifan"></td></tr>
<tr><td>UTS</td><td> : </td><td><input type="text" id="uts"></td></tr>
<tr><td>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="HitungNilai"></td></tr>
</table>
</body>
</html>
Setelah script semua di salin, untuk menjalankan JQuery jangan lupa menyimpan jquery-1.11.2.min.js dalam satu Folder. untuk mendapatkan jquery-1.11.2.min.js Silahkan di Download di website tetangga. heheheehe
Ketika di jalankan hasilnya seperti berikut:
Sekian Post dari saya. Good Luck..!!!
0 komentar:
Posting Komentar