Bagian 3. Memulai Menguasai JQuery

Pada materi sebelumnya kita telah mempelajari bagaimana memulai menggunakan Jquery. Di sini kita akan coba mengulang materi sebelumnya. Karena dalam mempelajari Jquery itu memang betul-betul menyita perhatian, dan membutuhkan perlakuan khusus. Karena dari syntax-syntaxnya sangat-sangat membingungkan bagi pemula.

Baca Juga

Bukankah begitu kisanak? Seperti materi sebelumnya, jika Anda sudah mendownload library Jquerynya maka langkah selanjutnya adalah menyiapkan dokumen htmlnya.




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
</head>
<body>
<h1>Latihan JQuery Bagian 1</h1>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
</body>
</html>

Kemudian kita menggunakan library javascriptnya, caranya adalah dengan meletakkan javascript library ke dalam tag head, menggunakan fasilitas dari html yakni script tag.




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<h1>Latihan JQuery Bagian 1</h1>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
</body>
</html>

Untuk memulai memanfaatkan library javascript dimulai dengan menggunakan

$("document").ready(function( ){
});

Kode tersebut diletakkan di dalam tag script yang diletakkan diantara tag head, setelah script yang meload library javascript, Blok kode tersebut memiliki arti, ketika halaman selesai di load, maka jalankan kode-kode jquerynya.

Download source code latihan

Penggunaannya seperti ini




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("document").ready(function( ){
});
</script>
</head>
<body>
<h1>Latihan JQuery Bagian 1</h1>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
</body>
</html>

Untuk membuktikan apakah sudah betul proses pemanggilan library javascript dan penulisan jquerynya, kita bisa memanfaatkan alert('tes jquery').




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("document").ready(function( ){
alert('tes jquery');
});
</script>
</head>
<body>
<h1>Latihan JQuery Bagian 1</h1>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
</body>
</html>

Hasil dari kode tersebut adalah, akan muncul kotak dialog bertuliskan tes jquery. Ketika sudah muncul kotak dialog bertuliskan tes jquery, ini berarti Anda telah berhasil dalam memanggil library javascript dan juga penulisan kode jquerynya.

Selain menggunakan ...

$("document").ready(function( ){
});
Pada umumnya programmer menyingkatnya menjadi
$(function(){
});

Contoh lengkapnya adalah seperti ini




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function( ){
alert('tes jquery');
});
</script>
</head>
<body>
<h1>Latihan JQuery Bagian 1</h1>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
</body>
</html>

Selamat mencoba..