हमने पहले कहा था कि jQuery Library File को हमेंशा Closing Body Element के Just पहले Specify करना चाहिए, जबकि पिछले तीनों ही उदाहरणों में हमने jQuery Library File को पहले Specify किया है और अपने JavaScript Code को बाद में। हमने ऐसा इसलिए किया है क्योंकि Web Browser में कोई भी Web Page Left to Right व Top to Bottom Step by Step Render होता है।
इसलिए जब हम हमारे JavaScript Code में jQuery() Method को Use करते हैं, तब उसका पहले से ही Memory में Available होना जरूरी होता है और ऐसा तभी हो सकता है जबकि हम jQuery Library File को अपने JavaScript Code से पहले Specify करें। यदि हम ऐसा नहीं करते हैं, तो हमारा वह JavaScript Code Run नहीं होता, जिसमें हमने jQuery() Function को Use किया है।
इसी प्रकार से यदि हम हमारे उस JavaScript Code को किसी External JavaScript File में लिखते हैं, जिसमें jQuery() Function को Use किया गया है, तो हमें हमारी External JavaScript File को Current Web Page में Include करने से पहले jQuery Library File को Include करना जरूरी होता है।
उदाहरण के लिए मानलो कि हम हमारे पिछले Web Page को निम्नानुसार दो अलग Files के रूप में Create करते हैं, जहां HTML File में केवल Web Page का Structure है, जबकि हमारे JavaScript Codes को हम एक दूसरी File में लिख रहे हैं:
//File Name: ExternalJSFile.js
jQuery('document').ready(function () {
alert('jQuery ready event fired because DOM is loaded.');
});
//File Name: HTMLFile4ExternalJSFile.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML File for External JavaScript File</title>
</head>
<body>
</body>
</html>
जैसाकि उपरोक्त Code में हम देख सकते हैं कि यदि हम इस तरह से दो Files Create करते हुए हमने अपनी JavaScript Codes File को एक External File की तरह Create करते हैं, तो हमें उपरोक्त HTML Code अनुसार अपनी External JavaScript File को jQuery Library File के बाद में <script> Element द्वारा Include करना होता है।
यदि हम हमारी इस Modified File को Web Browser में Load करें, तो ये Web Page भी Exactly पहले वाले Web Page की तरह ही काम करता है। लेकिन यदि हम निम्नानुसार अपनी External jQuery File को पहले Specify कर दें और बाद में jQuery Library को Specify करें:
<script type="text/javascript" src="js/ExternalJSFile.js" ></script> <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
तो निम्न चित्रानुसार Firebug Console में हम देख सकते हैं कि हमें “RefenceError: jQuery is not defined” का Error प्राप्त होता है, जिसका मतलब यही है कि हमारी External JavaScript File का Code Run होते समय हमने jQuery() नाम का जो Function Use किया है, वह Function Memory में Exist नहीं है। जिसका कारण यही है कि हमने jQuery() Function को अपनी External JavaScript File के Code में पहले ही Use कर दिया है, जबकि jQuery Library का jQuery() Function हमारे JavaScript Code के Run हो जाने के बाद Memory में Load होता है।
इस प्रकार की Errors Create न हो, हमें हमेंशा इस बात का ध्यान रखना होता है और हम यदि jQuery() Function को Use कर रहे हैं, तो हमारे JavaScript Code के Execute होने से पहले jQuery Library का Memory में Exist होना जरूरी होता है। इसी तरह से यदि हम किसी External CSS को Use कर रहे हैं, तब भी हमें इस बात का ध्यान रखना होता है कि External JavaScript File में Specified किसी CSS Rule को अपने JavaScript Code में Use करने से पहले वह JavaScript File Memory में Exist होनी चाहिए। यानी यदि सरल शब्दों में कहें, तो हम jQuery Library के माध्यम से जिस किसी भी Resource को Use करना चाहते हैं, वह Resource पहले से Memory में Exist होना जरूरी होता है, अन्यथा हमारा Code Fail हो जाता है।
हमने पहले भी कहा था कि jQuery का ready() Method, हमारे Web Page का DOM Tree Create होते ही Run हो जाता है, जबकि हमारे Web Page के अन्य Resources जैसे कि Images, Objects, Frames, IFrames, Applets, Flash Files आदि बाद में Load होना शुरू होते हैं। इसलिए यदि हम jQuery के माध्यम से इन में से किसी Resource को Access करना चाहते हैं, तो उस स्थिति में ready() Method हमारे लिए उपयोगी नहीं होता क्योंकि ready() Method इन सभी के Web Browser में Load होने से पहले ही Execute हो जाता है इसलिए ready() Method में Specify कि, गए हमारे वे Codes जो कि इन Resources को Reference करते हैं, Fail हो जाते हैं।
इस स्थिति से बचने के लिए हमें ready() Method के स्थान पर window.onload Method को Use करना चाहिए। क्योंकि window.onload Method Exactly तब Fire होता है, जब Web Page के सभी Resources पूरी तरह से Web Browser में Download होकर Access होने के लिए Ready हो चुके होते हैं। परिणामस्वरूप यदि हमें इन External Resources को jQuery के माध्यम से Access करना हो, तो हमें हमारे jQuery Codes निम्नानुसार window.onload Method में लिखने चाहिए:
//File Name: AllResourcesAreReadyToBeAccessedViaJQuery.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>All Resources of the Web Page are Ready to be accessed via JQuery</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
window.onload = function () {
jQuery('body').css('background-color', 'red');
}
</script>
</body>
</html>
जैसे ही हम उपरोक्त Code वाले Web Page को Web Browser में Load करते हैं, हमारे Web Page का Background Color निम्न चित्रानुसार Change होकर Red हो जाता है:
एक विशेष रूप से ध्यान रखने वाली बात ये है कि यदि हम window.onload Event Handler को Use करते हैं, तो फिर हमें ready() Method को Use करने की जरूरत नहीं रहती क्योंकि सामान्यत: हम window.onload Event Handler को तभी Use करते हैं, जब हमें किसी Resource जैसे कि Image, Object, Frame आदि को Access करने की जरूरत होती है और ये Resources तभी Available होते हैं, जब Web Page, Web Browser में विभिन्न Resources के साथ पूरी तरह से Load हो चुका होता है।
जिस तरह से हम jQuery(‘document’).ready(handler); Statement को Use करते हैं, उसी तरह से इस Statement के Alternative के रूप में हम निम्न में से किसी भी Statement को Use कर सकते हैं और ये सभी Statements वास्तव में jQuery(‘document’).ready(handler); Statement के ही Alternatives हैं:
jQuery().ready(handler) jQuery(handler) $().ready(handler) $(handler)
यानी जब हम jQuery Function में किसी Selector को Specify नहीं करते हैं, तब jQuery() Function द्वारा “document” को Default Selector की तरह Use कर लिया जाता है। जबकि यदि हम ready() Method को भी Specify नहीं करते बल्कि सीधे ही jQuery() या $() Function में किसी Handler Function को Specify कर देते हैं, तो jQuery() Function Automatically Default रूप से jQuery(‘document’).ready(handler); Statement को ही Execute करता है। परिणामस्वरूप यदि हम चाहें तो उपरोक्त में से किसी भी तरीके को Use कर सकते हैं, लेकिन पहला तरीका सबसे ज्यादा Descriptive है और Code देखते ही हमें पता चल जाता है कि क्या हो रहा है जबकि अन्तिम तरीका सबसे कम जानकारी देता है।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
