Where and How to include jQuery in HTML file?

चूंकि, हम जानते हैं कि jQuery एक JavaScript Framework है या यदि अधिक सरल शब्दों में कहें तो एक External JavaScript File है। इसलिए जिस तरह से हम किसी External JavaScript File को अपने Web Page में मूल रूप से HeadBody Section में Include करते हैं, उसी तरह से हम इस jQuery Framework को भी अपने Web Page के Head या Body Section में Include कर सकते हैं।

पिछले उदाहरण में हमने jQuery को Head Section में Include किया है। लेकिन Professional Development में कभी भी किसी भी External JavaScript File को Web Page के Head Section में Include नहीं किया जाता। क्यों?

क्‍योंकि किसी भी अन्‍य External Resource की तरह ही JavaScript File भी Synchronous तरीके से Download होता है। इसलिए जब तक कोई JavaScript File Download होकर Web Browser के Cache में Save होता है, तब तक Web Browser, Web Page के किसी भी अन्‍य Content को Download नहीं करता।

परिणामस्वरूप यदि Web Browser में Download होने वाली JavaScript File काफी बडी हो या User के Internet Connection की Speed काफी Slow हो, तो User को ऐसा महसूस हो सकता है कि हमारा Web Page User के Web Browser में Download ही नहीं हो रहा है यानी हमारा Web Page Hang हो गया है। जबकि Web Browser Internally हमारे Web Page पर Linked किसी JavaScript File को Download कर रहा होता है। इस स्थिति में वह User हमारी Web Site से Move होकर किसी अन्‍य Web Site पर जा सकता है, जो कि बिल्कुल भी अच्छी बात नहीं है।

साथ ही सामान्यत: JavaScript File में लिखे गए Codes हमारे Web Page के DOM के साथ Interact करते हैं। इसलिए यदि हम हमारे Web Page के Head Section में किसी External JavaScript File को Attach करते हैं और उस JavaScript File में कोई ऐसा Code है, जो कि Current Web Page के DOM के साथ Interact करता है, तो उस JavaScript File के Codes Fail हो जाऐंगे।

क्‍योंकि जब वह JavaScript File पूरी तरह से Download होने के बाद Run होगा और Run होते ही उस File के Codes, Current Web Page के DOM के किसी Element को Access करने की कोशिश करेंगे, तो वह Element Available ही नहीं होगा जिस पर वह JavaScript Code Action Perform कर सके। क्‍योंकि वह DOM Element तब Available होगा, जब हमारे Web Page का Body Section, Web Browser में Download होगा, जबकि Head Section में Specified JavaScript File के Download होने से पहले Body Section Download ही नहीं हो सकता।

इसलिए बेहतर यही रहता है कि किसी भी External JavaScript File को हमेंशा निम्नानुसार Closing Body Element </body> से Just पहले Include किया जाए। ऐसा करने पर उपरोक्त दोनों प्रकार की समस्याओं से छुटकारा मिल जाता है।

//File Name: jQueryEmbeding-beforeClosingBodyElement.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>jQuery - Embedding Before Closing Body Element in WebPage</title>
  </head>

  <body>
    <h1>Other Codes Here</h1>
    <script type='text/javascript' src="js/jquery-1.9.1.js"></script>
  </body>
</html>

जब हम उपरोक्त Code के अनुसार Closing Body Element से Just पहले किसी JavaScript File यानी jQuery Library File को अपने Web Page में Include करते हैं, तब Web Page Normal तरीके से व ज्यादा तेजी से Web Browser में Download व Render होता है तथा अन्त में जब jQuery Library Download होना शुरू होता है, तब तक पूरा Web Page, Web Browser में Download व Render हो चुका होता है।

परिणामस्वरूप यदि jQuery या किसी अन्‍य External JavaScript File के Download होते ही कोई JavaScript Code Run होता है, जिसे Current Web Page के किसी DOM Element को Access व Manipulate करने की जरूरत होती है, तो उस JavaScript Code के लिए DOM पूरी तरह से तैयार रहता है।

Various ways to include jQuery in HTML File
Internal Architecture and Working of jQuery

jQuery in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

jQuery in Hindi | Page:711 | Format: PDF

BUY NOW GET DEMO REVIEWS