You are here: Home / HTML5 with CSS3 in Hindi / How to Link External JavaScript HTML Simple Examples
by on December 20, 2013

How to Link External JavaScript HTML Simple Examples

External JavaScript in HTML Example: जब हम किसी JavaScript Code को किसी External JavaScript File में Store रखते हैं और फिर उस File को अपने HTML Document में Link करना चाहते हैं, तब भी हमें <script> Element का ही प्रयोग करना होता है, लेकिन इस बार हमें निम्नानुसार <script> Element के src Attribute में उस JavaScript File के URL को Specify करना होता है, जिसे हम हमारे Current HTML Document के साथ Link करना चाहते हैं।

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>My JavaScript</title>
    <script src="myJS.js"></script>
</head>
<body>
</body>
</html>
//myJS.js
alert("I am from External JavaScript File.");

उपरोक्त Code अनुसार हम हमारे HTML Document में myJS.js नाम की External JavaScript File को Link कर रहे हैं और External JavaScript File में हमने उपरोक्त Code अनुसार एक Alert Message Specify किया है। जब हम हमारे Web Page को Render करते हैं, तब भी उपरोक्त JavaScript Code हमें हमारे Web Page में निम्नानुसार एक Alert Dialog Box के साथ दिखाई देता है:

script and noscript elements - JavaScript in Hindi

जैसाकि उपरोक्त चित्र के Address Bar में देख सकते हैं कि अभी भी Web Page पूरी तरह से Web Browser में Load नहीं हुआ है और हमने जो Code External JavaScript File में लिखा है, वह Code Run हो रहा है और हमें एक Alert Dialog Box दिखाई दे रहा है। ऐसा इसीलिए हो रहा है, क्योंकि Web Page हमेंशा Top to Bottom Render होता है और जैसे ही Web Browser को कोई Script या Link Element मिलता है, Web Browser उस Link वाले Resource पर पहुंच जाता है और उसे Web Browser की Memory में Download करना शुरू कर देता है।

चूंकि JavaScript Codes, Web Browser के लिए Executable Codes होते हैं, इसलिए JavaScript Code में Specified Alert Function Execute हो जाता है और हमें उपरोक्त चित्रानुसार Alert Dialog Box दिखाई देने लगता है। ध्‍यान रखने वाली बात ये है कि Head Element में जिन Scripts या Stylesheet Files को Link करने के लिए <script> या <link> Element का प्रयोग किया जाता है, जब तक उन Resources के सभी Codes Web Browser में Download नहीं हो जाते, तब तक Web Browser आगे नहीं बढता। यानी जब तक हम उपरोक्त चित्र में दिखाए गए Alert Dialog Box के OK Button पर Click नहीं करते, तब तक हमारा Web Page आगे नहीं बढता और Web Browser में Render नहीं होता।

चूंकि JavaScript का काम हमेंशा पूरा Web Page Load हो जाने के बाद शुरू होता है, इसलिए किसी JavaScript File को कभी भी Web Page के Head में Link नहीं करना चाहिए, बल्कि पूरा HTML Document Specify करने के बाद Closing Body Element से Just पहले <script> Element का प्रयोग करके External JavaScript File को Link करना चाहिए।

External JavaScript File को इस प्रकार से HTML Document से Link करने के दो फायदे हैं। पहला फायदा ये है कि जब तक HTML Document पूरी तरह से Render नहीं हो जाता, तब तक JavaScript File Web Browser में Download नहीं होती, जो कि बिल्कुल सही व्‍यवस्था है क्योंकि JavaScript वह अन्तिम File होनी चाहिए, जिसे Web Browser में Load होना चाहिए।

दूसरा फायदा ये है कि Web Page User के सामने जल्दी Render होता है। यदि हम Scripts को Head Element में Link करें, तो जब तक पूरी Script Web Browser में Download नहीं हो जाएगी, तब तक Web Page आगे Render नहीं होगा। इसलिए Head Element में JavaScript File को Link करने पर User को लग सकता है कि Web Page काफी बडा है या Web Site काफी Slow है, इसलिए सामान्‍यत: User आपकी Site से Skip कर सकता है, जो कि अच्छी बात नहीं है।

Performance के लिहाज से Yahoo, Google, Facebook, Bing, Apple आदि सभी बडी कम्पनियां इसी तरह से विभिन्न JavaScript Files को अपने Web Page में Specify करती हैं। हालांकि ये सनातन सत्‍य नियम नहीं है और आप अपनी Script को Head या Body में कहीं भी Link कर सकते हैं। लेकिन फिर भी किसी भी Script File को हमेंशा निम्नानुसार Closing Body Element से Just पहले Specify करने पर Web Page ज्यादा तेजी से Web Browser में Render होता है।

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>My JavaScript</title>
</head>
<body>
        <!-- Whole Page Content -->
        <!-- script just before closing body element. -->
        <script src="myJS.js"></script>
</body>
</html>

जब हम किसी External JavaScript File को अपने HTML Document में Link करना चाहते हैं, तब ये जरूरी नहीं होता है कि हमारी External JavaScript File का Extension .js ही हो। Web Browser कभी भी किसी Resource का Extension Check नहीं करता। इस वजह से हम किसी Script Element में किसी Text File को भी Specify कर सकते हैं, लेकिन शर्त बस ये है कि उस External File का चाहे जो भी Extension हो, उसमें Code हमेंशा JavaScript के ही होने चाहिए।

उदाहरण के लिए यदि हम हमारे उपरोक्त Example Code में myJS.js File का नाम बदलकर निम्नानुसार myJS.txt कर दें, तो भी हमारा Web Browser इस File के Code को भी पिछले Example की तरह ही Run करेगा और हमें दिखाई देने वाले Output में किसी तरह को कोई फर्क नहीं आएगा।

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>My JavaScript</title>
  <script src="myJS.txt"></script>
</head>
<body>
</body>
</html>
//myJS.txt
alert("I am from External JavaScript File.");

जब हम किसी <script> Element में किसी External Source File को Specify करते हैं, तब हमें उस Script Element के बीच किसी तरह का कोई JavaScript Code Specify नहीं करना चाहिए। जैसे:

<script src="myJS.txt">
  alert("Hi, It’s not right way to write Inline JavaScript Code");
</script>

उपरोक्त Script Code में हमने एक External JavaScript Code File को Specify किया है साथ ही इस Element के बीच Inline JavaScript Code भी Specify किया, जो कि गलत है। यदि हमें Inline Code Specify करना ही हो, तो हमें ये काम निम्नानुसार करना होता है:

<script src="myJS.txt"></script>
<script>
    alert("Hi, It’s not right way to write Inline JavaScript Code");
</script>

JavaScript की एक सबसे बडी विशेषता ये है कि हम जिस तरह से किसी External Domain से किसी Image को अपनी Web Browser में Import कर सकते हैं, उसी तरह से हम किसी अन्‍य Domain पर Specified JavaScript Codes को भी अपनी Web Site के लिए Use कर सकते हैं और जब हम ऐसा करते हैं, तब उस External Domain पर Specified External JavaScript उसी तरह से हमारे Web Page के लिए Execute होता है, जिस तरह हमारे स्वयं के Domain पर Specified JavaScript File के Codes Executable होते हैं।

उदाहरण के लिए यदि हम Google के CDN पर Places jQuery की JavaScript File को अपने Web Page में उपयोग में लेना चाहें, तो हमें केवल निम्नानुसार <script> Element में src Attribute को jQuery की JavaScript File के Path से Associate करना होगा और बिना उस JavaScript File को अपने Web Server पर Place किए हुए, हम उस JavaScript File के सभी Functions को अपने Web Page के लिए Use कर सकते हैं:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js">

</script>

अब सबसे महत्वपूर्ण बात और वो ये है कि हालांकि हम किसी भी HTML Document में Page Level Inline JavaScript को Use कर सकते हैं, लेकिन हमें ऐसा नहीं करना चाहिए। चाहे एक ही Line का JavaScript Code क्यों न हो, हमें हमेंशा एक External JavaScript File Create करनी चाहिए और उस External File में ही अपने JavaScript Codes को लिखना चाहिए।

External File के बहुत सारे फायदे हैं। सबसे पहली बात तो ये है कि जिस तरह से HTML के Structure व Style को एक दूसरे के साथ Mix नहीं करना चाहिए उसी तरह से HTML के Structure व Behavior को भी एक दूसरे के साथ Mix नहीं करना चाहिए।

यानी एक Web Page के सभी Front Parts (HTML, CSS व JavaScript) आदि को अलग-अलग ही रखना चाहिए। ऐसा करने का मुख्‍य फायदा ये है कि हम हमारी Web Site को ज्यादा बेहतर तरीके से Maintain कर सकते हैं। हमारा हमारी Web Site पर ज्यादा Control होता है और हम JavaScript File के किसी भी एक Function में Change या Modification करके उसका प्रभाव Web Site के सभी Web Pages पर Apply कर सकते हैं, जबकि Internal JavaScript Codes होने की स्थिति में हमें एक-एक Web Page को Open करके उसमें Modification करना होगा।

चूंकि JavaScript File, Images व CSS File की तरह Web Browser में Cache होती हैं, इसलिए जब पहली पर हमारी Web Site को Open किया जाता है, तभी हमारी सभी JavaScript Files, User के Web Browser में Save हो जाती हैं और जब User हमारी Web Site के अन्‍य Pages को Open करता है, तब वे Web Pages काफी तेजी से Open होते हैं क्योंकि उन Web Pages से Associated JavaScript File पहले से ही Web Browser में मौजूद होती हैं। यानी External JavaScript Files Use करने पर हमारी Web Site ज्यादा Fast हो जाती है।

जबकि Inline JavaScript का प्रयोग करने पर हर Web Page के Load होने पर हर बार JavaScript Code भी Web Browser में Load होता है, भले ही सभी JavaScript Codes समान ही क्यों न हो। इस स्थिति में Inline JavaScript Codes को Use करने पर Web Page की Speed Slow हो जाती है।

तीसरा एक और फायदा ये है कि Inline JavaScript Use करने पर हमें जरूरत के अनुसार विभिन्न प्रकार के Symbol Encodings को Use करना पडता है। उदाहरण के लिए JavaScript Codes में “<” या “>” इन Comparison Symbols को यदि Inline JavaScript में Use करना पडे, तो हमें इनके स्थान पर “&lt;” या “&gt;” Codes का प्रयोग करना पडता है। अथवा हमें CDATA Element का प्रयोग करना पडता है, जबकि External Files में ऐसी कोई Restrictions नहीं होती हैं।

<noscript> Element

कई बार किन्हीं कारणों से User के Web Browser में JavaScript Disabled रहता है। इस स्थिति में हम JavaScript के जो भी Codes लिखते हैं, वे Codes अपना कोई Effect Show नहीं करते।

ऐसे में हम इस Element का प्रयोग करके User को इस बात की जानकारी दे सकते हैं कि उसका Web Browser JavaScript को Support नहीं कर रहा है इसलिए या तो वह अपने Web Browser में JavaScript को Enable करे अथवा किसी दूसरे Web Browser में Web Site को Open करे।

इस जरूरत को हम सामान्‍यत: HTML के <noscript> Element का प्रयोग करके पूरा करते हैं। <noscript> Element को Web Page में निम्नानुसार Use किया जाता है:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>My JavaScript</title>
  <script src="myJS.txt"></script>
</head>
<body>
  <noscript>
  <p> This Web Page requires JavaScript Enabled Web Browser. </p>
  </noscript>
</body>
</html>

<noscript> Element को हमेंशा Body Element के बीच ही Use किया जाता है और इस Element में हम किसी भी HTML Element को Use कर सकते हैं। इस Element के बीच Enclosed Content सिर्फ और सिर्फ दो स्थितियों में ही User को दिखाई देते हैं:

  • जब User का Web Browser JavaScript को Support नहीं करता।
  • जब User के Web Browser में JavaScript को Disabled किया गया होता है।

किसी भी अन्‍य स्थिति में User को <noscript> Element के बीच Enclosed Content दिखाई नहीं देता। (External JavaScript in HTML Example)

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

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW GET DEMO REVIEWS

Filed Under: HTML5 with CSS3 in Hindi