JS Where To

पिछले लेसन में आपने जाना कि JavaScript क्या है, अब सवाल ये आता है कि — “JavaScript Code को हम कहाँ लिखते हैं और कैसे चलाते हैं?” यही चीज़ हम इस लेसन में आसान देशी स्टाइल में सीखेंगे

JavaScript को चलाने के 3 तरीके

JavaScript को HTML के अंदर या बाहर तीन मुख्य तरीकों से लिखा जा सकता है

Inline JavaScript

Internal JavaScript
External JavaScript

चलिए एक-एक करके समझते हैं

1. Inline JavaScript (सिंपल और तुरंत तरीका)

Inline JS का मतलब होता है — आप HTML टैग के अंदर ही JavaScript Code लिख देते हैं। Example

<!DOCTYPE html>
<html>
<body>

<button onclick="alert('Hello, JavaScript!')">Click Me</button>

</body>
</html>

Explanation:

यहाँ <button> टैग के अंदर onclick event है।
जब आप बटन क्लिक करते हैं, तो alert() function चलता है।
यह छोटा Popup Message दिखाता है — "Hello, JavaScript!"
✅ फायदा — बहुत आसान और फटाफट तरीका
❌ नुकसान — Code Maintain करना मुश्किल हो जाता है (लंबे प्रोजेक्ट में)

2. Internal JavaScript (HTML के अंदर Script Tag)

इसमें आप JavaScript को सीधे HTML फ़ाइल में ही लिखते हैं लेकिन एक अलग <script> टैग के अंदर। Example

<!DOCTYPE html>
<html>
<head>
  <title>Internal JS Example</title>
</head>
<body>

<h2>My Website</h2>
<p id="demo">Welcome!</p>

<script>
  document.getElementById("demo").innerHTML = "Hello from JavaScript!";
</script>

</body>
</html>

Explanation:

<script> टैग के अंदर JS लिखा गया है।
document.getElementById("demo") का मतलब है — “demo” ID वाले element को पकड़ो।
.innerHTML उस जगह पर नया Text डाल देता है।
✅ फायदा — छोटे प्रोजेक्ट्स के लिए बढ़िया
❌ नुकसान — HTML और JS मिल जाने से Code गंदा लगता है

3. External JavaScript (अलग फ़ाइल में)

ये सबसे Professional और Recommended तरीका है। इसमें आप JS को एक अलग .js फ़ाइल में रखते हैं और HTML में सिर्फ उसका Link देते हैं।

Step 1 — एक HTML फ़ाइल बनाएँ

<!DOCTYPE html>
<html>
<head>
  <title>External JS Example</title>
</head>
<body>

<h2>External JavaScript Example</h2>
<p id="text">Hello World!</p>

<script src="script.js"></script>

</body>
</html>

Step 2 — एक “script.js” फ़ाइल बनाएँ

document.getElementById("text").innerHTML = "JavaScript is working perfectly!";

Explanation:

<script src="script.js"></script> से JS फ़ाइल HTML से जुड़ जाती है।
अब Browser HTML को लोड करते समय JS फ़ाइल भी लोड करता है।
✅ फायदा —
✔ Code साफ़-सुथरा रहता है
✔ एक JS फ़ाइल कई पेजों में Use की जा सकती है
✔ Maintenance आसान
❌ नुकसान — ⚠ अगर फ़ाइल का Path गलत हुआ तो Script नहीं चलेगी

Script Tag का Location कहाँ रखें?

आप <script> टैग को दो जगह रख सकते हैं:

1. <head> के अंदर

<head>
  <script src="main.js"></script>
</head>

Problem: JS जल्दी लोड हो जाती है जबकि HTML अभी Ready नहीं होता। इससे कभी-कभी Error आ सकता है।

2. </body> के ठीक पहले

<body>
  <!-- Page Content -->
  <script src="main.js"></script>
</body>

Best Practice है क्योंकि HTML पहले लोड हो जाता है और JS बाद में Run होती है — Perfect Timing!

Modern Way – "defer" और "async" Attributes

अगर आप <script> को <head> में लिखना चाहते हैं तो आप defer या async का इस्तेमाल कर सकते हैं

<script src="app.js" defer></script>

Meaning:

defer — JS तब चलेगी जब पूरा HTML लोड हो जाए
async — JS फ़ाइल Background में लोड होती है, और तैयार होते ही चलती है
defer ज्यादा भरोसेमंद तरीका है, खासकर जब आपका Code DOM पर निर्भर करता है।

Summary (सारांश)

तरीका (Method)	कहाँ लिखा जाता है (Where it's Written)	इस्तेमाल (Usage)
Inline JS	HTML Tag के अंदर (e.g., `onclick="alert('Hello');"`)	Quick और Short Tasks (तेज और छोटे कार्य)
Internal JS	<script>टैग में HTML के अंदर (आमतौर पर<head>या<body>के अंत में)	छोटे प्रोजेक्ट्स (Small Projects)
External JS	अलग .js फ़ाइल में (जिसे HTML में<script src="file.js">से लिंक किया जाता है)	बड़े और प्रोफेशनल प्रोजेक्ट्स (Large and Professional Projects)

External JavaScript सबसे अच्छा तरीका माना जाता है।