මම ඉතින් දන්න දෙවල් වලින් පොඩිම එක තමා JQuery කියන්නෙ. මේක Java Script Librery එකක්. ලෝකයෙ වැඩියෙන්ම පාවිචිවෙන එක කිව්වොත් නිවැරදියි. මේක 76KB පොඩි ෆයිල් එකක්. පොඩි වුනාට මේක ලොකු ලොකු ඈයො පාවිච්චි කරන පට්ට වැඩ තොගයක් කරන්න පුලුවන් දෙයක්. කොටින්ම Google, Dell, Drupal, Wordpress, Mozilla වගෙ පට්ට වෙබ් සයිට් හදලා තියෙන්නෙ මේකත් පාවිච්චි කරලා. වෙබ් ඩිවොලොපින් කරනවා නම් ඉතින් අද කාලෙ මේක නැතුව බෑ. JQuery ඉගෙන ගන්න මේකම බලන්න ඕනෙ නෑ. Getting Started with jQuery පිටුවට ගියොත් ඉතින් කඩු වලින් ඉගෙන ගන්න පුලුවන්. සම්මුඛ පරීක්ෂණයකට යන්න කලින්, මෙලෝ දෙයක් දන්නෙ නැතුව රස්සාවට ගියාම පැයෙන් දෙකෙන් ගොඩ දා ගන්න තමා මේක ලියන්න හිතුවෙ. මුලදි පට්ට අමාරු වගේ හිතුවට මේක html වලට වඩා ලේසියි. හරි හරි වැඩි කතා නැතුව පටන් ගමුකො.
මෙන්න මෙතනින් JQuery බාගන්න පුලුවන්. ඕක බාගෙන jquery.js කියලා නම වෙනස් කරන්න.
ඔතනම html ලේඛණයක් හදලා (test.htm) පහත විදිහට jquery.js එක අඩංගු කර ගන්න. හරියට src කියන එකට jquery.js එකේ path එක දෙන්න අමතක කරන්න එපා.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--මෙන්න මෙතන තමා ඊ ලගට ලියන java script ඒවා ලියන්නෙ. -->
</script>
</head>
<body>
<!-- මෙතන තමා html එවා ලියන්නෙ -->
</body>
</html>හරි නම් මුලින්ම පල්ලෙහා එක උඩ java script කෑල්ලෙ ලියන්න. $(document).ready(function() {
// මේක ඇත්ලෙ තමා මෙතනින් එහාට jquery ඒවා ලියන්නෙ.
});
පිටුව එන කොටම පුදනකොටම කාපි යකා කියලා jquery එකේ වැඩ කරන්නෙ $(document).ready එක තමා. ඕක නිකන් Java, C, C++ වල main method එක වගේනෙ.jquery වැඩද කියලා බලන්න පුලවන් අරක ඇතුලෙ alert("Hello World"); කියලා ලියන්න. ලියලා ඉවර වෙලා refresh පාරක් දාලා බලන්න. හරියට ඇලරට් එක එනවනම් බඩු වැඩ.
හරියටම කියනවානම් දැන් පිටුව මේ වගේ තියෙන්න ඕනෙ.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello World");
});
</script>
</head>
<body>
<!-- මෙතන තමා html එවා ලියන්නෙ -->
</body>
</html>
වැඩ නැත්නම් පහත ඒවා හරියට තියෙනවද බලන්න.- jquery.js එකේ path එකේ අවුලක්.
- jquery ලිව්ව කෑල්ලෙ වැරැද්දක්. (වරහන්, ; , " හරියටම තියෙනවද බලන්න.)
කියන්න අමතක වුනානෙ. Firefox වල Firebug පාවිච්චි කරනවානම් මාර ලේසියි. ඒකෙ console එක දාලා refresh කලාම එන වැරැද්දෙන් මොනා හරි කර ගන්න පුලුවන් වේවි.
ඔක්කොම හරිනම් එතනින් එහාට යන්න තියෙන්නෙ. ඒකට පල්ලහා html කෑල්ල ලියා ගන්න. හරියට තැන බලලා body එක ඇතුලෙම ලියන්න.
<a href="">Test Link</a>Jquery කෑල්ලත් ලියා ගන්නකො.
$("a").click(function () {
alert("Hello World");
});
දැන් පිටුව මේ විදිහට තියෙන්න ඕනෙ. <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function () {
alert("Hello World");
});
});
</script>
</head>
<body>
<a href="">Test Link</a>
</body>
</html>
දැන් ආයෙ පිටුව refresh කරලා ලින්ක් එකකට කොටලා බලන්න. ඇලරට් එක එනවානම් බඩු වැඩ. මේකෙන් කියන්නෙ පිටුවෙ තියෙන හැම a element එකක්ම click කලාම function එක ඇතුලෙ තියෙන දේ වෙන්න කියලා. හරියටම වේන්නෙ මොකක්ද කියලා ඊලග පාඩමේදි කියලා දෙන්නම්.
එළකිරි.ගොඩක් ස්තුතියි.ඉතුරුවත් දාන්න.
ReplyDeleteජයෙන් ජය!