Document Ready Function and it’s usability

Separate Everything – HTML, CSS and JavaScript

पिछले Web Page Example में हमने हमारे JavaScript Code को Web Page के Body Part में ही Define किया है, जो कि केवल Concept को आसानी से समझने के लिए ही किया गया है।

वास्तव में जब Professional Development किया जाता है, तब JavaScript Codes को कभी भी Web Page के अन्दर न तो Head Section में Define किया जाता है न ही Body Section में Define किया जाता है बल्कि सभी JavaScript Codes को एक External File में लिखा जाता है और उस External File को <script> Element का प्रयोग करके Current Web Page में Include किया जाता है।

जब हम इस तरीके से JavaScript Codes को एक External File में Define करते हैं और <script> Element का प्रयोग करके उसे Current Web Page में Include करते हैं, तो इस प्रकार के JavaScript Code को Unobtrusive JavaScript कहा जाता है। कोई भी Web Page हमेंशा तीन Technologies को Use करके Develop किया जाता है।

• पहली Technology HTML है जो कि Web Page के Structure को Define करता है और इस बात को तय करता है कि Web Page में कौनसा Text Heading बनेगा, कौनसा Text Paragraph की तरह Render होगा, कौनसा Text List की तरह दिखाई देगा और कौनसा Text एक Table Format में Render होगा। आदि।
• दूसरी Technology के रूप में हम CSS (Cascading Style Sheet) को देख सकते हैं, जो कि किसी Web Page के Styling, Design व Layout को Control करता है। यानी Web Page का कोई Heading किस Color में दिखाई देगा, Paragraph का Font-Face व Size क्या होगा, Web Page का Layout कितने Columns का होगा, Header की Size क्या होगी, आदि बातों को CSS Style Rules द्वारा तय किया जाता है।
• जबकि तीसरी Technology के रूप में JavaScript को Use किया जाता है और JavaScript किसी Web Page के Behavior को Control करता है। यानी JavaScript का प्रयोग करके हम ये तय करते हैं कि Web Page पर किसी Event के Response में कौनसा Action Perform होगा।

हालांकि इन तीनों Technologies को हम एक ही HTML Page में Use कर सकते हैं और इस पुस्तक के ज्यादातर उदाहरणों में हम ऐसा ही कर रहे हैं, लेकिन Professional Development करते समय ऐसा नहीं करना चाहिए। क्‍योंकि यदि हम ऐसा करते हैं, तो Web Page को Update व Manage करना काफी कठिन हो जाता है।

Is the Document Ready

हम तब तक HTML Page के किसी भी Element के साथ किसी तरह का कोई Interaction नहीं कर सकते, जब तक कि वह Element Web Browser में Load न हो गया हो। यानी जब तक उस Web Page का DOM Tree Create न हो गया हो। लेकिन जब Web Page में काफी Images, Objects, Frames व Resources को उपयोग में लिया जाता है, तब Web Page, Web Browser में पूरी तरह से Load होने में काफी समय लगाता है। इसलिए jQuery में ready() नाम का एक Special Function बनाया गया है।

ready() Function उस समय Automatically Execute हो जाता है, जब Web Browser में Web Page का Structure यानी DOM Tree तो पूरी तरह से Organize हो चुका होता है, लेकिन विभिन्न प्रकार के Resources जैसे कि Images, Objects आदि Load होने शुरू हो रहे होते हैं।

चूंकि किसी भी Web Page में Images जैसे Resources, Web Page का पूरा Structure यानी DOM Memory में पूरी तरह से Load हो जाने के बाद Load होना शुरू होते हैं, इसलिए विभिन्न jQuery Codes को इस ready() Method की Body में ही लिखा जाता है।

लेकिन यदि हमें किसी Image की Information को Access करना हो, तो हमें jQuery के ready() Function के स्थान पर JavaScript के window.onload Method को उपयोग में लेना चाहिए, क्‍योंकि ये Method तब Run होता है, जब Images जैसे विभिन्न Resources सहित पूरा Web Page, Web Browser में Load हो चुका होता है।

यदि हम किसी Web Page के किसी Image की Information को jQuery द्वारा Access करना चाहें, तो हम तब तक किसी Image की Information को Access नहीं कर सकते, जब तक कि विभिन्न Resources सहित पूरा Web Page, Web Browser में Load न हो जाए, क्‍योंकि विभिन्न Images, jQuery के ready() Function के Fire हो जाने के बाद Web Browser में Load होना शुरू होते हैं। इस Function को हम निम्नानुसार तीन तरीकों से उपयोग में ले सकते हैं:

 jQuery('document').ready(handler)
 jQuery().ready(handler)
 jQuery(handler)

ये तीनों ही Statements एक समान काम करते हैं, इसलिए हम इन तीनों में से किसी भी Statement को Use कर सकते हैं। चूंकि jQuery में Default रूप से $ Symbol को jQuery के Alias के रूप में Use किया जा सकता है, इसलिए यदि हम चाहें तो उपरोक्त तीनों Statements को निम्नानुसार भी उपयोग में ले सकते हैं:

 $('document').ready(handler)
 $().ready(handler)
 $(handler)

जब हम उपरोक्त Statements के पहले Format को Use करते हैं, यानी जब हम हमारे Web Page के DOM Tree के Ready हो जाने की जानकारी प्राप्त करने के लिए निम्नानुसार Statement को Use करते हैं:

jQuery('document').ready(handler)
//or
$('document').ready(handler)

तो इस Statement के भी चारों हिस्सों को हम निम्नानुसार Specify कर सकते हैं:

jQuery()
//or
$()

जैसाकि हम जानते हैं कि ये Function jQuery का Gateway है और इसी के द्वारा हम JavaScript की विभिन्न Functionalities को प्राप्त कर सकते हैं।

jQuery('document')
//or
$('document')

चूंकि हम ये जानना चाहते हैं कि हमारा Current Web Page का DOM Tree पूरी तरह से Create हो गया है या नहीं, यानी हमारा Web Page जिसे Document भी कहते हैं, पूरी तरह से Web Browser के window Object के document Property में Load हो गया है या नहीं, इसलिए हमने jQuery Function में document Object को Parameter के रूप में Pass किया है, क्‍योंकि इस Statement में जो Action Perform हो रहा है, वह इस document Object पर ही Perform हो रहा है।

jQuery('document').ready()
//or
$('document').ready()

इस Statement में Specify किया गया ready() Method उस समय Automatically Execute हो जाता है, जब हमारे Web Page का Document Tree, Web Browser के document Object में पूरी तरह से Load हो चुका होता है।

चूंकि हम भी यही चाहते हैं कि जब तक Web Page का DOM Tree पूरी तरह से Create न हो, तब तक कोई भी JavaScript Code Run न हो लेकिन हम ऐसा भी चाहते हैं कि हमारा कोई भी JavaScript Code Run होने के लिए उसे Web Page के Web Browser में पूरी तरह से Load होने यानी विभिन्न Resources जैसे कि Images, Objects, Frames आदि के पूरी तरह से Load होने का Wait भी न करना पडे और इसी जरूरत को ready() Method पूरा करता है।

jQuery('document').ready(handler)
//or
$('document').ready(handler)

अन्त में handler के रूप में हमें वह JavaScript Code लिखना होता है, जिसे हम हमारे Document यानी Web Page के DOM Tree के पूरी तरह से Create होते ही Execute करना चाहते हैं।