Adding JavaScript to Web Documents in Hindi

Adding JavaScript to Web Documents

JavaScript को web page में add करने के लिए यह समझना जरूरी है कि HTML और JavaScript एक साथ कैसे काम करते हैं। HTML web page का structure और content तैयार करता है, जबकि JavaScript उस page में interaction और dynamic behavior जोड़ता है।

उदाहरण के लिए HTML से हम button बना सकते हैं, लेकिन button पर click करने के बाद कोई message दिखाना, text बदलना या कोई calculation करना JavaScript की मदद से किया जा सकता है।

JavaScript को HTML document में जोड़ने के मुख्य रूप से तीन तरीके होते हैं:

• Inline JavaScript
• Internal JavaScript
• External JavaScript

इन तीनों methods का काम JavaScript को HTML page से connect करना है, लेकिन इनका उपयोग अलग-अलग situations में किया जाता है।

Inline JavaScript

Inline JavaScript में JavaScript code को directly HTML element के attribute के अंदर लिखा जाता है। इसके लिए अक्सर event attributes जैसे onclick, onchange, onmouseover आदि का use किया जाता है।

नीचे दिए example में onclick event के अंदर alert() लिखा गया है। जैसे ही user button पर click करेगा, JavaScript execute होगी।

यह तरीका छोटे और simple examples के लिए आसान है। लेकिन बड़े projects में बहुत ज्यादा inline JavaScript लिखने से HTML और JavaScript का code आपस में mix हो जाता है, जिससे code को maintain करना मुश्किल हो सकता है।

Inline JavaScript कब use करें?

• छोटे demonstration या testing के लिए।
• बहुत simple event के लिए।
• Learning और basic examples में।

Internal JavaScript

Internal JavaScript में JavaScript code उसी HTML document के अंदर लिखा जाता है। इसके लिए <script> tag का use किया जाता है।

JavaScript को HTML के <head> या <body> section में रखा जा सकता है। छोटे projects और individual pages में यह तरीका useful हो सकता है।

नीचे JavaScript को <head> के अंदर रखा गया है और button के click पर function call किया गया है।

इस example में पूरा code HTML editor में है। JavaScript को <script> tag के अंदर लिखा गया है। इसलिए editor की language HTML है, भले ही उसके अंदर JavaScript भी मौजूद हो।

Internal JavaScript का दूसरा Example

JavaScript को HTML के <body> के end में भी लिखा जा सकता है। यह तरीका तब useful होता है जब JavaScript को page के HTML elements के बाद execute करना हो।

यहाँ JavaScript button click होने पर HTML के <h2> element का text बदल रही है। यही HTML और JavaScript के combination का basic example है।

External JavaScript

External JavaScript में JavaScript code को एक अलग .js file में रखा जाता है और फिर HTML document में <script src="..."> के माध्यम से connect किया जाता है।

उदाहरण के लिए अगर JavaScript file का नाम script.js है, तो HTML में इसे इस तरह add किया जा सकता है:

यहाँ src attribute JavaScript file का path बताता है। Browser HTML document को load करते समय उस file को भी load करता है।

External JavaScript File

script.js file में JavaScript कुछ इस तरह लिखी जा सकती है:

function greet() {
  alert("Hello from external JavaScript!");
}

और HTML में button के साथ इसे इस तरह use किया जा सकता है:

<button onclick="greet()">Click Me</button>

External JavaScript का पूरा फायदा तब मिलता है जब एक या कई JavaScript files को website के अलग-अलग HTML pages पर reuse करना हो।

External JavaScript का Practical Structure

मान लीजिए project में files इस तरह हैं:

project/
│
├── index.html
├── about.html
└── js/
    └── script.js

अगर script.js file js folder के अंदर है, तो HTML में path इस तरह होगा:

यहाँ js/script.js relative path है। अगर JavaScript file किसी दूसरे folder में है, तो उसके अनुसार path बदलना होगा।

JavaScript को HTML के Head में Add करना

JavaScript को HTML के <head> section में भी add किया जा सकता है। लेकिन अगर script page के HTML elements पर directly काम करती है, तो script के execution timing का ध्यान रखना जरूरी है।

External JavaScript को <head> में add करते समय defer attribute useful होता है। इससे external script HTML parsing को उसी तरह block किए बिना बाद में execute होती है, जब document parsing पूरा हो चुका होता है।

defer का use खासकर external scripts के साथ common है। इससे script document parsing के साथ unnecessarily blocking behavior नहीं देती और document parse होने के बाद execute होती है।

Script को Body के End में Add करना

एक दूसरा common तरीका JavaScript file को <body> के end में add करना है। इस position पर document के जरूरी HTML elements पहले parse हो चुके होते हैं।

Inline, Internal और External JavaScript में Difference

Method	JavaScript कहाँ लिखते हैं?	Suitable For
Inline	HTML element के attribute में	Simple और छोटे tasks
Internal	HTML file के <script> tag में	Small या single-page projects
External	अलग .js file में	Large और multi-page projects

External JavaScript के फायदे

• Code Reusability: एक ही JavaScript file को कई HTML pages में use किया जा सकता है।
• Better Organization: HTML और JavaScript अलग-अलग files में रहते हैं।
• Easy Maintenance: JavaScript में बदलाव करने पर related pages को अलग-अलग edit करने की जरूरत कम होती है।
• Cleaner HTML: HTML document में JavaScript का बड़ा code block नहीं रहता।
• Browser Caching: External JavaScript resources browser cache कर सकता है, जिससे repeat visits पर loading behavior बेहतर हो सकता है।

JavaScript जोड़ते समय Important Points

• JavaScript को HTML में add करने के लिए <script> element का use किया जाता है।
• External JavaScript के लिए src attribute में सही file path देना जरूरी है।
• एक page में multiple JavaScript files भी add की जा सकती हैं।
• HTML element पर directly छोटा JavaScript लिखना Inline JavaScript कहलाता है।
• <script> tag के अंदर लिखी JavaScript Internal JavaScript कहलाती है।
• अलग .js file से load की गई JavaScript External JavaScript कहलाती है।
• External script को <head> में रखते समय defer एक useful option हो सकता है।
• JavaScript file का path गलत होने पर browser उस script को load नहीं कर पाएगा।

Conclusion

JavaScript को web documents में जोड़ना web development का एक basic लेकिन बहुत important concept है। Inline JavaScript छोटे examples के लिए आसान है, Internal JavaScript छोटे या single-page projects में useful हो सकती है, जबकि External JavaScript बड़े projects में code को organized और reusable रखने में मदद करती है।

जब HTML और JavaScript को एक ही editor में demonstrate किया जाए, तो editor की language HTML रखना सही है और JavaScript को <script> tag के अंदर लिखना चाहिए। इससे पूरा HTML document browser में run होकर user को उसका live output भी दिखा सकता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---