सामान्यत: हमें DOM Tree के Create होते ही जो JavaScript Code Run करने होते हैं, उन्हें हम एक Function के रूप से Define कर देते हैं और उस Function का नाम ही इस handler Parameter के रूप में Specify करते हैं। चूंकि JavaScript में हम दो प्रकार के Syntaxes का प्रयोग करते हुए किसी Function को Create कर सकते हैं:
- Function Definition Syntax
- Function Expression Syntax
दोनों ही प्रकार के Functions का अपना अलग महत्व है, जिनके बारे में हम यहां ज्यादा Detail में जानने की कोशिश नहीं करेंगे क्योंकि यदि आप JavaScript जानते हैं, तो आपको इन दोनों ही प्रकार के Functions के बारे में अच्छी तरह से पता होगा और यदि आप इन दोनों प्रकार के Functions की कार्यप्रणाली व इनके बीच के अन्तर को नहीं जानते, तो आपको हमारी पुस्तक “Advance JavaScript in Hindi” पढना चाहिए, जिसमें इन दोनों प्रकार के Functions के बारे में व इन्हें उपयोग में लेने के बारे में अच्छी तरह से समझाया गया है।
जब हम Function Expression Syntax का प्रयोग करते हुए कोई Function Create करते हैं, तो सामान्यत: Create होने वाला Function एक Anonymous Function होता है। यानी Create होने वाला Function एक ऐसा Function होता है, जिसका कोई नाम नहीं होता।
हालांकि हम Function Expression Syntax का प्रयोग करके जब कोई Function Create करते हैं, तो JavaScript Interpreter उस Function Code को Memory में Store करने के बाद उस Memory Location का एक Address Return करता है, जिसे हम किसी Variable में Store करके रख सकते हैं और इस Variable को हम C Language के Function Pointer की तरह Use करते हुए उस Anonymous Function को जब चाहें तब Parenthesis के साथ Specify करते हुए Call कर सकते हैं।
इसे समझने के लिए हम एक उदाहरण देखते हैं। मानलो कि हम चाहते हैं कि जैसे ही DOM पूरी तरह से Ready हो जाए, हमें एक Alert Box दिखाई दे, जिसमें DOM के पूरी तरह से Ready होने की Information हो। इस जरूरत को पूरा करने के लिए हम निम्नानुसार अपना Web Page Create कर सकते हैं:
//File Name: DOMisReadyFunctionExpressionSyntax.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM is Ready - Function Expression Syntax</title>
</head>
<body>
<script type='text/javascript' src="js/jquery-1.9.1.js"></script>
<script>
var showAlert = function () {
alert('jQuery ready event fired because DOM is loaded.');
}
jQuery('document').ready(showAlert);
</script>
</body>
</html>
इस Webpage को जैसे ही Web Browser में Load किया जाता है, एक Alert Dialog Box Display होता है, जिसमें Message के रूप में “jQuery ready event fired because DOM is loaded.” लिखा होता है।
ऐसा इसलिए होता है, क्योंकि जैसे ही Current Web Page का DOM Tree पूरी तरह से Create हो जाता है, jQuery का ready() Method Execute हो जाता है। इस ready() Method में Handler के रूप में हमने showAlert नाम के Variable में Stored एक Anonymous Function का Address Pass होता है।
परिणामस्वरूप ready() Method उस Anonymous Function को Call करता है, जिसका Address showAlert नाम के Variable में Stored है और इसी Anonymous Function में हमने निम्नानुसार एक alert() Method को Specify किया है, जो इस बात को Message के रूप में Display करता है, कि DOM पूरी तरह से Load हो चुका है:
var showAlert = function () {
alert('jQuery ready event fired because DOM is loaded.');
}
जैसाकि हमने पहले भी कहा कि हम JavaScript में किसी Function को दो तरीकों से Specify कर सकते हैं। पिछले उदाहरण में हमने Function Expression Syntax का प्रयोग करते हुए एक Anonymous Function का Address, showAlert नाम के Variable में Store किया था, जबकि इसी Function को हम निम्नानुसार Function Definition Syntax का प्रयोग करते हुए भी Create कर सकते हैं:
//File Name: DOMisReadyFunctionDefinitionSyntax.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM is Ready - Function Definition Syntax</title>
</head>
<body>
<script type='text/javascript' src="js/jquery-1.9.1.js"></script>
<script>
function showAlert() {
alert('jQuery ready event fired because DOM is loaded.');
}
$('document').ready(showAlert);
</script>
</body>
</html>
जब हम इस Web Page को Web Browser में Load करते हैं, तो ये Web Page भी Exactly उसी तरह से एक Alert Box Show करता है, जिस तरह से पिछला Web Page करता है, लेकिन इस Web Page में हमने एक Anonymous Function को jQuery के ready() Method में Handler के रूप में Pass नहीं किया है, बल्कि एक JavaScript Function के नाम को Pass किया है। हालांकि Internally दोनों लगभग एक ही तरह से काम करते हैं, लेकिन दोनों के Scope व Availability में अन्तर है, जिसके बारे में आप Detail से “Advance JavaScript in Hindi” पुस्तक में पढ सकते हैं।
जैसाकि हमने पहले भी कहा कि जब भी हम कोई Anonymous Function Create करते हैं, JavaScript Interpreter उस Anonymous Function के Code को Memory में Store करके उस Memory का एक Address Return करता है, जिसे हम किसी Variable में Store कर सकते हैं और फिर उस Variable के साथ Parenthesis का प्रयोग करते हुए उसी Anonymous Function को जरूरत होने पर फिर से Call कर सकते हैं, क्योंकि वह Variable एक प्रकार से “C” Language के Function Pointer की तरह काम करने लगता है।
साथ ही JavaScript में हर Function एक प्रकार का First Class Object होता है, इसीलिए हम किसी Function के नाम को किसी दूसरे Function या Method में Parameter के रूप में ठीक उसी तरह से Pass कर सकते हैं, जिस तरह से किसी सामान्य Data Type के मान या Variable को Pass करते हैं और ऐसा ही हमने हमारे पिछले दोनों उदाहरणों में किया है यानी हमने हमारे Function Object के नाम को ही ready() Method में handler Argument के रूप में Pass किया है।
समझने वाली बात ये है कि जब हम किसी Anonymous Function के Pointer को jQuery में किसी Method में Argument की तरह Pass कर सकते हैं, तो फिर हम किसी Anonymous Function को भी Directly किसी दूसरे Function में Specify कर सकते हैं। यानी यदि हम चाहें, तो हम हमारे पिछले उदाहरण को निम्नानुसार भी Re-Create कर सकते हैं:
//File Name: DOMisReady-AnonymousFunctionAsArgument.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM is Ready - Anonymous Function as Argument</title>
</head>
<body>
<script type='text/javascript' src="js/jquery-1.9.1.js"></script><script>
jQuery('document').ready(function () {
alert('jQuery ready event fired because DOM is loaded.');
});
</script>
</body>
</html>
जब हम इस Web Page को Web Browser में Load करते हैं, तो ये Web Page भी Exactly उसी तरह से एक Alert Box Show करता है, जिस तरह से पिछले दोनों Web Pages Show करते है और ऐसा इसलिए होता है, क्योंकि हमने एक Anonymous Function को सीधे ही ready() Method में Parameter या Argument के रूप Pass कर दिया है।
चूंकि, हम जानते हैं कि JavaScript इस Anonymous Function को Memory में Store करके उसका Pointer Return करता है, जिसे यदि हम चाहें तो किसी Variable में Store करके उस Variable को किसी Method में Parameter की तरह Pass कर सकते हैं जबकि यदि हम न चाहें, तो हम Anonymous Function को सीधे ही किसी Function में Argument की तरह Pass कर सकते हैं।
Function Expression Syntax वाले उदाहरण में हमने Anonymous Function के Pointer को showAlert नाम के Variable में निम्नानुसार Save किया था:
var showAlert = function () {
alert('jQuery ready event fired because DOM is loaded.');
}
और इसी Variable में Stored Address को ready() Method में Parameter के रूप में Pass करके ready() Method के handler Variable को निम्नानुसार Initialize किया था:
$('document').ready(showAlert);
जबकि हमारे पिछले उदाहरण में हमने हमारे निम्न Anonymous Function के Address को किसी Variable में Store नहीं किया है:
function () {
alert('jQuery ready event fired because DOM is loaded.');
}
बल्कि इसे सीधे ही ready() Method में निम्नानुसार एक Argument की तरह Pass कर दिया है:
ready(function () {
alert('jQuery ready event fired because DOM is loaded.');
});
इसे हम निम्नानुसार भी लिख सकते हैं:
ready(function () {alert('jQuery ready event fired because DOM is loaded.'); });
उपरोक्त Statement द्वारा आप समझ सकते हैं कि इस बार ready() Method में हमने हमारे किसी Anonymous Function के Pointer को Store करने वाले Variable को Argument की तरह Pass नहीं किया है बल्कि सीधे ही Anonymous Function को Parameter की तरह Pass कर दिया है।
जब JavaScript Interpreter ready() Method को Execute करता है, तो उसे Parameter के रूप में एक Anonymous Function Definition प्राप्त होता है। परिणामस्वरूप JavaScript Interpreter उस Anonymous Function को Memory में Store करता है और उस Memory का Address Return करता है, जो कि ready() Method के handler Argument को प्राप्त हो जाता है।
परिणामस्वरूप हमें showAlert नाम का कोई Variable Create करने की जरूरत नहीं रहती और हम वही काम इस Anonymous Function द्वारा भी पूरा कर लेते हैं, जिसे पिछले दोनों उदाहरणों में showAlert नाम के Function Name या Function Pointer द्वारा पूरा किया था।
जब हम jQuery Library का प्रयोग करते हुए अपने Web Pages को Interactive बनाते हैं, तब किसी भी Web Page में jQuery(‘document’).ready(); Statement को केवल एक ही बार Specify किया जाता है, क्योंकि कोई भी Web Page, Web Browser में एक बार ही Load होता है, जब तक कि हम हमारे Web Page को फिर से Reload न करें। इसलिए सामान्यत: हमें हमारे जितने भी jQuery Codes लिखने होते हैं, उन्हें हम इसी ready() Method में लिखते हैं।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
