JQUERY புதிய நிரலாக்க
மொழியல்ல. இது ஜாவா ஸ்கிரிப்ட் மொழியின் Light weight library ஆகும்.இது ஜாவா ஸ்கிரிப்ட்
மொழி கொண்டு நாம் செய்யும் வேலைகளை எளிதாக்குகின்றது.இது HTML மொழியின் DOCUMENT
TRAVERSAL ,ஈவண்ட் ஹாண்ட்லிங் ,அனிமேசன் வேலைகள் மற்றும் அஜாக்ஸ் போன்றவற்றை எளிதாக்குகின்றது.
இது லட்சக் கணக்கான் நிரலாளர்கள் ஜாவா ஸ்கிரிப்ட் கொண்டு செய்யும் வேலைகளை மாற்றி இலகுவாக்குகின்றது.
JQUERY –நண்மைகள்
இது எல்லாவிதமான
இணைய உலாவிகளிலும் (Browser) இயங்க கூடியது.ஜாவா ஸ்கிரிப்ட் கொண்டு நாம் எழுதும் நிரல்
வரிகள் ப்ரவுசர்கள் மாறும் போது வெவ்வேறாக அமையக் கூடும்.ஆனால் JQUERY அப்படியல்ல.மேலும்
JQUERY கொண்டு எழுதும் போது ஜாவா ஸ்கிரிப்ட் கொண்டு எழுதுவதை விட வேலை எளிதாகுகின்றது
JQUERY நீட்டுவிக்கக்
கூடிய தன்மை கொண்டது.அஜாக்ஸை ஆதரிக்கின்றது.
JQUERY ஆனதில் உபயோகப் படுத்துவதற்கான நிறைய Plug in –கள் எளிதாக கிடைக்கின்றன.
JQUERYயை எவ்வாறு பெறுவது?
இந்த ஜெகொரியை
jquery.com என்கின்ற இணையத்தளத்திற்கு சென்று தரவிறக்கம் செய்து கொள்ளலாம்.அதில் உள்ள
டவுன்லோட் பட்டனைச் சொடுக்கி (jquery v3.1.0 ) அதில் compressed version மற்றும்
uncompressed version என்று இரு வித லைப்ரரிகள் உள்ளன. Compressed வெர்சனில் white
spaces அகற்றப்பட்டு வேரியபிள் பெயர்கள் சிறிதாக்கப்பட்டு
production வேலைகளுக்கு ஏற்றதாக அமைகின்றது.
Uncompressed
version ஆனது வாசிக்கக்கூடியதாக உள்ளது.
அவற்றை நம் ப்ராஜெக்டில்
இணைத்துக் கொள்ளலாம்.
உதாரணம்:
இப்போது நம் ப்ராஜெக்டில்
பட்டன் (html element button)ஒன்று உள்ளது என்று எடுத்துக் கொள்வோம்.இதை சொடிக்கிடும்
போது நிகழ வேண்டிய செயற்பாடுகளை ஜாவா ஸ்கிரிப்டில் நாம் எழுத எத்தனை வரிகள் தேவையென்பதை
காணவும்.
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
>
window.onload = function () {
document.getElementById('btn1').addEventListener('click', clickHandler, false);
};
function clickHandler() {
alert("welcome");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button"
id="btn1"
value="click"
runat="server"
/>
</div>
</form>
</body>
</html>
இதிலும் சில நடைமுறை
சிக்கல்கள் உள்ளன. இதிலும் addEventListener என்பதை IE8, மற்றும் அதற்கு முந்தைய வெர்சன்கள்
ஆதரிப்பதில்லை. அவை attachEvent என்பதையே ஆதரிக்கின்றது.எனவே நிரல் வரிகளை பின் வருமாறு
மாற்றி அமைக்க வேண்டியிருக்குகின்றது.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
>
window.onload = function () {
if(document.addEventListener)
{
document.getElementById('btn1').addEventListener('click', clickHandler, false);
}
else
{
document.getElementById('btn1').attachEvent('onClick', clickHandler);
}
function clickHandler() {
alert("welcome");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button"
id="btn1"
value="click"
runat="server"
/>
</div>
</form>
</body>
</html>
ஆனால் இதையே
jquery கொண்டு எழுதும் போது இவை எத்தனை எளிதாக்குகின்றது என்பதை பின் வரும் வரிகள்
கொண்டு கண்டு கொள்ளலாம்.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication1.WebForm1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<<script src="jquery-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#btn1').click(function () {
alert("welcome");
});
});
</script>
<form id="form1" runat="server">
<div>
<input type="button"
id="btn1"
value="click"
runat="server"
/>
</div>
</form>
</body>
</html>
இதற்கு நாம் முதலில்
ப்ராஜெக்ட் எக்ஸ்ப்ளோரரை open செய்து கொள்ள வேண்டும். அதில் நாம் தரவிரக்கம் செய்த
jquery கோப்புகளை காப்பி செய்து அதன் பிறகு ப்ராஜெக்ட் எக்ஸ்ப்ளோரரில் ப்ராஜெக்ட் பெயரை
வ்லது க்ளிக் செய்து paste செய்யவும்.இதையே ட்ராக் செய்து கோடிங் பக்கத்தில் உள்ள
head டேக்கிற்குள் விடவும்.
மேலே உள்ள கோடிங்கை
கவனிக்கவும்
இங்கு script என்பதில்
src என்பதில் highlight செய்யப்பட்டதை கவனிக்கவும்.
மேலே உள்ள கோடிங்கில்
ஜெகொரியின் நோக்கமானது btn1 என்கின்ற பட்டனை க்ளிக் செய்யும் பொழுது jquery
tutorial என்கின்ற alert box ஆனது காண்பிக்கப் படவேண்டும். இந்த வரிகளில் #btn1 என்பதில்
உள்ள # குறியீடு குறிப்பிடப் பட்டுள்ளது element-ன் பெயர் என்பதைக் குறிக்கின்றது.
டாக்குமெண்ட் ஆனது முதலில் load ஆன பிறகே மேற்கண்ட வரிகள் செயற்படுத்தப் பட வேண்டும் என்பதை
jquery(document).ready என்ற வரிகள் குறிக்கின்றன.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication1.WebForm1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<<script src="jquery-3.1.0.js"
type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function
() {
alert("welcome");
});
});
</script>
<form id="form1" runat="server">
<div>
<input type="button"
id="btn1"
value="click"
runat="server"
/>
</div>
</form>
</body>
</html>
இப்போது மேலே உள்ள
கோடிங்
மேலே உள்ள வரிகளின்
படி document முதலில் load ஆகின்றது. அதன் பிறகு $(document).ready(function() என்கின்ற
படி ஒரு பெயரிடப் படாத function செயல் பட ஆரம்பிக்கின்றது. btn1 ஆனது சொடுக்கிடப் படும்பொழுது
அதன் id ஆனது $(‘#btn1’) என்பதன் மூலம் கண்டறியப் பட்டு என்ன நடக்க வேண்டும் என்பதை
$(‘#btn1’).click(function() { } என்பதில்
உள்ள பெயரிடப் படாத ஃபங்சனில் உள்ளே வரிகள் குறிக்கின்றன. அதனுள் உள்ள
alert(“jquery tutorial”) என்பது செயலிடப்பட்டு பின் வரும் படி வெளியீடு கிடைக்கின்றது.
இப்பொழுது புரிகின்றதா
ஜெகொரியின் எளிமையும் தன்மையும்.
-முத்து கார்த்திகேயன்,மதுரை
No comments:
Post a Comment