Saturday, February 13, 2010
Posted by Posted by
Mohd Alif
at
3:52 PM
Categories:
0
comments
Posted by Posted by
Mohd Alif
at
3:09 AM
Categories:
0
comments
Monday, February 1, 2010
Tutorial will be written in Bahasa Malaysia mostly, with some English to facilitate sentences meaning delivery. (As requested, also as proposed by Ramzul Ihsan.)
- Download jquery library. Pilih yang PRODUCTION, dah trimmed, thus ringan. Terbaik untuk web page load dgn optimis.
- Sudah pun install php server, dan apache web server. Senang cerita, download xampp package, install.
- Notepad adalah paling basic. (IDE pun takpa).
- Focus! ;D
<!doctype html> <html> <head> <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript"> // kat sini kita akan letak javascript dan jquery functions </script> </head> <body> <a href="http://itsmefila.blogspot.com/">Hello Durian Tunggal</a> </body> </html>
Beza antara kedua function tersebut adalah, dengan menggunakan window.onload, web browser perlu habis loading kesemua webpage barulah segala function2 dalam window.onload execute. Bayangkan kalau web page tu heavy, kena tunggu lama lah. Inefficient.
But, compare to jquery predefined function $(document).ready() sebagai pengganti kepada window.onload, ia akan terus execute function javascript pada mana2 element html yg sudah pun berjaya load ke atas web browser walaupun the web page is actually not fully loaded.
Seterusnya, bagaimana nak buat click event handling pada mana2 html element yang valid.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
// di sini kita akan letak javascript dan guna jquery functions.
$(document).ready(function() {
$("#link1").click(function(e) {
alert("Lompat pagar hari-hari");
e.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://itsmefila.blogspot.com/" id="link1">Hello Durian Tunggal</a>
</body>
</html>
Modify kod awal tadi dengan kode di atas ini, kemudian cuba reload page, dan click pada link Hello Durian Tunggal, kemudian hasilnya adalah seperti ini:
- #element - untuk memilih element html yang mengikut attribut Id nya. ()
- <img scr="bla.gif " id="element">
- $("#element").click()
- .element - dot sahaja adalah untuk memilih element html mengikut attribut class nya.
- <img scr="bla.gif " class="element">
- $(".element").click()
- element - memilih html native element.
- <img scr="bla.gif ">
- $("element").click()
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
// di sini kita akan letak javascript dan guna jquery functions.
$(document).ready(function() {
$("#link1").click(function(e) {
e.preventDefault();
$(this).fadeOut("slow", function(){
$(this).fadeIn("slow").css("font-size","40px");
});
});
});
</script>
</head>
<body>
<a href="http://itsmefila.blogspot.com/" id="link1">Hello Durian Tunggal</a>
</body>
</html>
$("#link1").click(function(e) {
e.preventDefault();
$(this).fadeOut("slow", function(){
$(this).fadeIn("slow").css("font-size","40px");
});
fadeOut dan fadeIn adalah effect function yang terdapat dalam library jquery. $(this) adalah merujuk kepada current object in scope yang kita sedang manipulate. In this code adalah link1.
Dalam function fadeOut, it takes two parameters, satu adalah speed animation untuk object link1 fade out. next is, callback function. Means, apa yang kita ingin buat selepas function fadeOut execute.
Dalam code di atas, dalam callback function, ada other function which is fadeIn. As you can see, it goes like that simple. The best thing is, we can write statement yang bersambung, seperti contoh di atas:
$(this).fadeIn("slow").css("font-size","40px");
Means, kita nak fadeIn object link2 slowly, simultaneously change the font size using CSS changer function from the jquery library.
Woohoo! Enough kot for today. I will cover on more jquery tutorials other time. Possibly how to construct ajax with jquery. Again, believe me, it is very simple, short, and small.
Start to explore jquery documentation and study the API. For clearer assistance and demos, rujuk ja kat numerous website tutorials on the net. It's free.
Just start, dont wait.
"Write less, Do more".
Good luck ;D
Posted by Posted by
Mohd Alif
at
8:54 PM
Categories:
0
comments
Why should i? Because it will...
- Save yourself some time when you read the code 10 weeks/month/years later.
- Help your friends understand your code in a team's project.
- Help your instructor/TA give you a good grade.
- Make debugging faster by not duplicating code.
Posted by Posted by
Mohd Alif
at
10:26 AM
Categories:
1 comments