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
Wednesday, September 2, 2009
A programmer may not necessarily be a developer, developer always can be a programmer. Here are some points that i believe true according to my experiences. I'm so tired having around with peers who only knows to talk about technical stuffs in motivation just to ensure they are not outdated and know-it-all. Well that is good in some ways, but not enough to compete in real software industry. Stretch our mind, read a lot, do not condemn, do not feel proud to say critiques about others, instead, motivating + suggest + encouraging each other. Be the one who always think to create opportunities instead of waiting. Talent only is not sufficient.
Programmer
- Technical oriented
- Not really in concern with users needs, code the application is what matters and fun things.
- Cares only the code, (show off-ing. hu's smarter which wont promise solve anything to peoples)
- Building the application under someone's supervising and command. (The Boss perhaps)
- No project, no job.
- Simplicity is define as to cut everything VITAL into short. (which they think cool act.)
Developer
- Users concern comes first, then technical issues follows..
- Care about application usability & efficiency in priority list.
- Solving REAL people problems is damn fun and satisfying.
- Able to recognize opportunities around.
- Possess innovative mind & highly inventive.
- Think of simplicity as easiness & usefulness. (it might consume lots of time to plan for quality simplicity.)
Posted by Posted by
Mohd Alif
at
1:10 PM
Categories:
0
comments
Friday, August 28, 2009
Posted by Posted by
Mohd Alif
at
6:13 AM
Categories:
Labels:
Softwares
0
comments