Salam blogger, Langkah demi langkah belajar j-query tahap pertama – Sebelum Anda belajar dan menggunakan jquery, telebih dahulu Anda harus mendownload jquery untuk versi terbaru bisa Anda download di jquery.com. Pada tutorial ini saya menggunakan jquery versi 1.4.2.min (jquery-1.4.2.min.js) Kemudian Anda simpan file library jquery di folder kerja Anda.
Kemudian siapkan text editor Anda, baik itu Notepad, Notepad++, Coffe Cup Free HTML editor atau text editor favorit Anda. Langkah demi langkah belajar jquery tahap pertama adalah :
1. Buatlah lembar kerja baru di text editor Anda. Lalu siapkan satu image kemudian simpan di folder kerja Anda (pada tutorial ini saya menyimpan image di sub folder images)
<html>
<head>
<title>Tahap Belajar</title>
</head>
<body>
<p>This is my first jquery</p>
<img src="images/lock-icon.png" height="50" width="50" alt="this is my image">
</body>
</html>
2. Simpan dengan nama yang Anda kehendaki di folder kerja Anda “nin.html” (menggunakan extention .html bukan .txt)
3. Kemudian selipkan kode berikut setelah kode <title>Tahap Belajar</title> untuk melampirkan file kode jquery library yang telah Anda download sebelumnya di jquery.com. Anda tuliskan dimana lokasi penyimpanan file jquery (pada tutorial ini saya menyimpan file jquery di sub folder js)
<script src="js/jquery-1.4.2.min.js"></script>
4. Tambahkan beberapa baris kode berikut setelah tag </script>
<script type="text/javascript">
$(document).ready(function(){
//do something on here
});
</script>
Anda akan selalu melihat dan menuliskan kode diatas, dalam belajar jquery. $(document).ready adalah fungsi jquery yang memberitahukan ketika browser telah benar – benar selesai loading. Setelah itu tuliskan apa yang ingin Anda lakukan dengan menggunakan jquery.
Sobat blogger Anda akan sering melihat tanda dollar ($) dalam belajar jquery maksudnya adalah bahwa kode itu berinteraksi dengan memanggil fungsi jquery. //do something on here Ini adalah baris komentar. Yaitu dengan menuliskan beberapa kata untuk mendiskripsikan kode – kode yang ingin Anda tulis setelah character double forward slash (//), agar Anda lebih memahami dan termasuk dalam proses pendokumentasian. Anda bisa menuliskan apa yang Anda ingin lakukan pada jquery di baris ini.
5. Ganti //do something on here dengan baris kode berikut :
alert($('img').attr('alt'));
tanda $ mengikuti dalam pemanggilan fungsi attr Sederhananya maksud dari baris kode diatas, baca semua attribute yang ada dalam element img dan tampilkan nilai yang ada dalam attribute alt dalam bentuk pesan pop up javascript.
Anda bisa mengganti alt dengan height atau width yang termasuk dalam attribute element img, agar ditampilkan dalam pesan alert javascript. Maka nilai yang ada dalam attribute – atribut tersebut akan ditampilkan dalam bentuk pesan alert javascript ketika browser benar – benar sudah selesai loading.
Adapun preview lengkap dari penjelasan kode – kode diatas adalah :
<html>
<head>
<title>Tahap Belajar</title>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($('img').attr('alt'));
});
</script>
</head>
<body>
<p>This is my first jquery</p>
<img src="images/lock-icon.png" height="50" width="50" alt="this is my image">
</body>
</html>
Hasil pada browser adalah sebagai berikut :
Pada praktek – praktek selanjutnya saya akan menggunakan single quotes dalam menuliskan kode – kode jquery.
alert($('img').attr('alt'));
Dan menggunakan double quotes dalam menuliskan kode – kode HTML.
<img src="images/lock-icon.png" height="50" width="50" alt="this is my image">
Demikikian Langkah demi langkah belajar j-query tahap pertama dari saya. Semoga bermanfaat, Jangan lupa tinggalkan komentar dan jempol Anda.
Terus belajar dan berbagi.
Happy Blogging, Happy Design
Posting Komentar
Posting Komentar