Tutorial Jquery
advertisement
Tutorial Jquery
Apa itu Jquery?
Sederhananya Jquery adalah sebuah library JavaScript. Dimana library adalah kumpulan dari
berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan
demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan
kode JavaScript.
Ket: Jquery tidak memerlukan Server seperti PHP
Apa perbedaan Jquery dengan Javascript?
Seperti contoh dibawah ini:
Untuk mencari sebuah element HTML, dengan JavaScript kita menggunakan fungsi getElementById():
var x = document.getElementById("tombol");
Dengan jQuery, penulisannya jauh lebih singkat, menjadi :
var x = $("#tombol");
Cara Memasukkan Jquery pada file HTML :
<html>
<head>
<title>The jQuery Example</title>
<script
src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Hasil HTML:
Hello, World!
Penjelasan :
a. <script
src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”>
</script>
Script warna merah pada gambar diatas berfungsi untuk meload library
jquery, supaya kita dapat menggunakannya pada javascript.
b. <script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
Script warna biru diatas menunjukan isi dari javascript atau fungsi
yang akan dikerjakan/proses.
Ket: Fungsi javascript harus di dalam “<script type="text/javascript">”
Dan “</script>”.
Variabel
Penulisan variabel pada Jquery/javascript sangat sederhana seperti di bawah ini:
Var nama=”Ela”;
Dan pendeskripsian Variabel pada Jquery dibagi menjadi 2 jenis:
Yaitu a global variabel dan Local variabel
var myVar = "global"; // ==> Global Variabel
function ( ) {
var myVar = "local"; // ==> Local variabel
document.write(myVar); // ==> local
}
Array
Penulisan Array pada Jquery/javascript seperti biasa seperti di bawah ini:
var x = [];
var y = [1, 2, 3, 4, 5];
Fungsi
Format penulisan fungsi pada jquery seperti di bawah ini, seperti hal nya fungsi di bahasa C
atau C++:
function namafungsi(){
// Isi dari fungsi
}
Dan
$(document).ready(function(){
// Isi dari fungsi
});
Ket: warna merah merupakan selector(Obyek yg dipilih) dan biru merupakan nama
fungsi (method) pada jquery
Alert
Membuat Alert/Message Box Sederhana:
<script type="text/javascript">
alert(“Hello World!”);
</script>
Caranya dengan membuat alert(var); , dimana var adalah nilai variabel boleh string atau
numeric.
Selector
Selector adalah object html yg diselect, atau di pilih, penulisan
selector berbeda2 seperti di bawah:
Berdasarkan
ID
NAME
CLASS
Penulisan
$(#namaid)
$(name)
$(.namaclass)
Mendapatkan Nilai(Value) dari HTML obyek
Example:
<script
src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></scri
pt>
<script type="text/javascript">
Var nilai=$(#jumlah1).val();
</script>
<input type="text" id="jumlah1" name="jumlah1" value="2000" size="60"
maxlength="128">
Untuk mendapatkan nilai dari html object dengan menggunakan format di bawah ini:
Selector.val()
Dimana selector adalah html yg dipilih, berarti var nilai=$(#jumlah1).val()
berarti variabel nilai sama dengan value dari object html dengan id “jumlah1”
Menyeting
Nilai(Value) dari HTML obyek
Example:
<script
src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></scri
pt>
<script type="text/javascript">
$(#jumlah1).val(500);
</script>
<input type="text" id="jumlah1" name="jumlah1" value="2000" size="60"
maxlength="128">
Untuk mendapatkan nilai dari html object dengan menggunakan format di bawah ini:
Selector.val(Nilai)
Dimana selector adalah html yg dipilih, berarti $(#jumlah1).val(500) berarti
value dari object html dengan id “jumlah1” adalah 500.
Mendapatkan Nilai Tanggal Bulan dan Tahun
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var b=new Date();
alert(b.getMonth()+1); // return nilai bulan
alert(b.getDate()); // return nilai tanggal
alert(b.getFullYear()); // return nilai tahun
</script>
Pada script di atas merupakan fungsi2 untuk mendapatkan nilai tanggal (Date Operation) pada
Jquery keterangan di tabel bawah ini:
Variabel
Method
Bulan
.getMonth()
Tanggal
Tahun
Hari
.getDate()
.getFullYear()
.getDay()
Keterangan
Nilai bulan dari indek ke- 0,
maka 0 adalah bulan januari,
maka pada contoh diatas
tertulis , getMonth()+1
Mendapatkan nilai tanggal
Mendapatkan nilai tahun
Mendapatkan index hari
dalam satu minggu
String Operation
1. SubStr = Berfungsi untuk mengambil huruf tertentu dari string, format seperti di bawah
string.substr(start[, length]);
Ket: start= adalah index awal dari char yg di select dari string
Length= Panjang char yg diambil.
Example:
<script type="text/javascript">
var str = "Apples are round, and apples are juicy.";
document.write("(1,2): "
+ str.substr(1,2));
document.write("<br />(-2,2): "
+ str.substr(-2,2));
document.write("<br />(1): "
+ str.substr(1));
document.write("<br />(-20, 2): " + str.substr(-20,2));
document.write("<br />(20, 2): "
+ str.substr(20,2));
</script>
Output:
(1,2): pp
(-2,2): y.
(1): pples are round, and apples are juicy.
(-20, 2): nd
(20, 2): d
Ket: Jika Parameter Cuma 1 maka parameter ke dua dianggap kosong atau length(batas)
char tdk terbatas sampai akhit string.
Event
Event adalah suatu aksi(action) yang dapat dideteksi oleh web browser, Contoh Event Click, berarti
proses akan dijalankan ketika selector(object html yang dipilih) di klik, contoh penulisannya:
<script type=”text/javascript”>
$(#mobil).click(function(){
Alert(“Mobil Clicked”);
})
</script>
Dari contoh diatas warna merah adalah selector yang berarti object html dengan id=”mobil” terpilih.
Dan hijau berarti event(di sini event click) berarti ketika object dengan id mobil di klik maka akan
menampilkan alert bertuliskan “Mobil Clicked”
Contoh Macam-macam Event
Event
Fungsi
Click
Ketika Object di Klik
Focus
Ketika Object focus(Contoh seperti ketika
teksfield di klik/sedang edit)
Blur
Ketika Keluar dari focus(Contoh ketika selesai
edit/klik luar teksfield sehingga teksfield g aktif)
Ketika Object di klik 2 kali(double click)
dbclick
mouseenter
mouseleave
scroll
change
Ketika mouse berada di atas element
html/Object html
Ketika mouse baru saja keluar dari atas element
html/Object html
Ketika windows di scroll
Ketika suatu html dirubah value/nilainya(contoh
ketika select input dirubah seperti pilihan jenis
kelamin pada buat email)
Example 1 (Fungsi Rupiah Javascript)
function toRp(angka){
var rev
= parseInt(angka, 10).toString().split("").reverse().join("");
var rev2 = "";
for(var i = 0; i < rev.length; i++){
rev2 += rev[i];
if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
rev2 += ".";
}
}
return rev2.split("").reverse().join("");
}
Fungsi diatas adalah fungsi untuk mengkonvert nilai integer/number ke format rupiah, example
1.000.000
Example 2(Set Count Down Timer)
<script type="text/javascript">
var waktu = 12;
setInterval(function() {
waktu--;
if(waktu < 0) {
window.location = 'http://URLTarget.tld';
}else{
document.getElementById("countdown").innerHTML = waktu;
}
}, 1000);
</script>
<span id="countdown">10</span>
Di atas adalah Example untuk looping count down atau timer, dimana angka 1000
yang berwarna merah adalah lama interval pengurangan waktu(dalam mili
secong).
Example 3(Membuat Generate Rp Text Field)
Buatlah html
<input type="text" id="edit-jumlah1" name="jumlah1" value="2000" size="60"
maxlength="128">
<script type=”text/javascript”>
$("[id^=edit-jumlah]").blur(function(){
var rp=$( this ).val();
if(rp>0){
$( this ).val(toRp(rp));
}
else{
$( this ).val("0");
}
})
$("[id^=edit-jumlah]").focus(function(){
var rp=$( this ).val();
$( this ).val(rp.split(".").join(""));
})
function toRp(angka){
var rev
= parseInt(angka, 10).toString().split("").reverse().join("");
var rev2 = "";
for(var i = 0; i < rev.length; i++){
rev2 += rev[i];
if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
rev2 += ".";
}
}
return rev2.split("").reverse().join("");
}
</script>
