JavaScript कहाँ लिखें

JavaScript code को कहीं तो रहना है। आपके पास तीन चुनाव हैं: <head> के अंदर <script> tag में, <body> के अंदर <script> tag में, या अलग file में जिसका नाम .js पर खत्म होता है और जिसे पेज load करता है। तीनों काम करते हैं, पर बराबर नहीं हैं — code कहाँ रखा है, इससे तय होता है कि वह कब चलेगा।

Diagram — देखें, यह सब कैसे जुड़ता है

Browser पेज को ऊपर से नीचे पढ़ता है, जैसे आप किताब पढ़ते हैं। जब वह <script> tag से मिलता है, तो HTML पढ़ना रोक देता है, code चलाता है, और तब आगे बढ़ता है। इसलिए <head> में लिखा script body बनने से पहले चलता है। अगर वह script किसी button को बदलने की कोशिश करता है जो अभी पढ़ा ही नहीं गया, तो वह fail हो जाएगा — button अभी मौजूद ही नहीं है। यही JavaScript में सबसे आम शुरुआती गलती है।

Body में script — सुरक्षित चुनाव

<script> को <body> के अंत में, </body> से ठीक पहले रखना, शुरुआत करने वाले के लिए सबसे सुरक्षित चुनाव है। तब तक browser पूरा HTML पढ़ चुका होता है, इसलिए हर button, input और paragraph मौजूद होता है और आपका code उन तक पहुँच सकता है। पेज भी तेज़ दिखता है, क्योंकि browser पहले content दिखाता है और code बाद में चलाता है।

<body>
  <h1>My Chai Shop</h1>
  <button onclick="sayHello()">Say hello</button>
  <script>
    function sayHello() {
      alert("Namaste!");
    }
  </script>
</body>

Function script में define की जाती है, और button click होने पर उसे बुलाता है। क्योंकि script पेज में button के बाद बैठा है, click होने तक सब कुछ अपनी जगह पर होता है।

Head में script — और defer की तरकीब

<head> में लिखा script जल्दी चलता है, जो ऐसे code के लिए अच्छा है जो पेज को छूता नहीं है — जैसे कोई value तय करना, या कोई function define करना जिसे बाद में, click के बाद ही बुलाया जाएगा। Head में define किए गए functions ठीक होते हैं, क्योंकि वे तभी चलते हैं जब उन्हें बुलाया जाता है। खतरा सिर्फ उस code से है जो तुरंत चलता है और पेज के उन elements को छूता है जो अभी बने ही नहीं हैं।

अलग file के लिए आप defer attribute जोड़ सकते हैं: <script src="shop.js" defer></script>। Defer वाले scripts पूरा पेज पढ़े जाने तक इंतज़ार करते हैं, फिर क्रम से चलते हैं। इससे आपको head की सफ़ाई और body की सुरक्षा, दोनों मिल जाती हैं।

अलग .js file — पेशेवर तरीका

जब आपका code बढ़ जाए, तो उसे अलग file में ले जाइए, जैसे shop.js, और <script src="shop.js"></script> से load कीजिए। पेज साफ़ रहता है, वही file कई पेजों में इस्तेमाल हो सकती है, और browser उसे cache कर सकता है — इसलिए दूसरा पेज और तेज़ खुलता है। असली वेबसाइटें लगभग हमेशा अलग files इस्तेमाल करती हैं। सीखते समय inline scripts ठीक हैं; असली projects के लिए अलग files की आदत बनाइए।

आम गलतियाँ

• <head> में script रखना जो तुरंत पेज के element को छूता है — element अभी बना ही नहीं है, इसलिए code error के साथ fail हो जाता है।
• src का path गलत लिखना — shop.js पेज वाले folder में ही होना चाहिए, या path वही होना चाहिए जहाँ file असल में है।
• <script src="..."> और </script> के बीच code लिखना — जब src मौजूद हो, तो browser tag के अंदर लिखा कुछ भी नज़रअंदाज़ कर देता है।
• यह भूल जाना कि scripts क्रम से चलते हैं — function को उस line से पहले define होना चाहिए जो उसे बुलाती है (जब तक वह सिर्फ बाद में, click पर बुलाया न जाए)।

याद रखें

• Browser पेज को ऊपर से नीचे पढ़ता है और हर script को मिलते ही चलाता है।
• शुरुआत करने वालों के लिए सबसे सुरक्षित: <script> को <body> के अंत में रखिए।
• defer head वाले script को तब तक इंतज़ार कराता है जब तक पेज पूरी तरह पढ़ा न जाए।
• अलग .js files पेजों को साफ़ रखती हैं और कई पेजों में share की जा सकती हैं।

उदाहरण समझिए

• <script> <body> के अंत में — script पूरे HTML के बाद बैठा है, इसलिए code चलते समय पेज का हर element पहले से मौजूद है।
• function greet() { ... } — greet नाम वाला function define करता है। Function define करने से वह चलता नहीं है; वह सिर्फ निर्देशों को बाद के लिए रखता है।
• document.getElementById("message") — पेज पर id="message" वाला paragraph ढूँढता है।
• .textContent = "Namaste! Welcome to My Chai Shop." — उस paragraph का text बदल देता है। पेज reload किए बिना अपडेट हो जाता है।
• onclick="greet()" — button click होने पर greet बुलाता है। Click से पहले ही script पेज के साथ load हो चुका था, इसलिए वह तैयार था।