HTML फाइल में एक्सटर्नल ".js" फाइल्स का उपयोग कैसे करें?

परिचय

.js एक्सटेंशन के साथ एक्सटर्नल JavaScript फाइल बनाएं। बनाने के बाद, इसे स्क्रिप्ट टैग में HTML फाइल में जोड़ें। उस एक्सटर्नल JavaScript फाइल को शामिल करने के लिए src एट्रिब्यूट का उपयोग किया जाता है।

प्रदर्शन नोट

यदि आपके पास एक से अधिक एक्सटर्नल JavaScript फाइलें हैं, तो उन्हें उसी वेब पेज में जोड़कर पेज के प्रदर्शन को बढ़ाया जा सकता है।

उदाहरण

चरण 1: एक्सटर्नल JavaScript फाइल बनाएं (new.js)

function display() { 
    alert("Hello World!"); 
}

चरण 2: HTML वेब पेज में एक्सटर्नल JavaScript फाइल जोड़ें

<html> 
    <body> 
        <form> 
            <input type="button" value="Result" onclick="display()"/> 
        </form> 
        <script src="new.js"> 
        </script> 
    </body> 
</html>

बेहतर स्थान: <head> में defer के साथ

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <title>एक्सटर्नल JS उदाहरण</title>
    <script src="new.js" defer></script>
</head>
<body>
    <button onclick="display()">क्लिक करें</button>
</body>
</html>

एकाधिक JS फाइल्स लोड करना

<head>
    <!-- क्रम महत्वपूर्ण है: निर्भरताएं पहले -->
    <script src="vendor/jquery.min.js" defer></script>
    <script src="vendor/lodash.min.js" defer></script>
    <script src="utils/helpers.js" defer></script>
    <script src="app/main.js" defer></script>
</head>

महत्वपूर्ण एट्रिब्यूट्स

एट्रिब्यूट	विवरण
`src`	JS फाइल का पथ (आवश्यक)
`defer`	HTML पार्स होने के बाद निष्पादित करें (क्रम बनाए रखता है)
`async`	असिंक्रोनसली लोड और निष्पादित करें (क्रम गारंटी नहीं)
`type="module"`	ES6 मॉड्यूल के रूप में लोड करें (आधुनिक)
`crossorigin`	CORS सेटिंग्स: `anonymous` या `use-credentials`
`integrity`	सबरीसोर्स इंटीग्रिटी (SRI) हैश
`referrerpolicy`	रेफरर पॉलिसी नियंत्रण

defer बनाम async

विशेषता	defer	async
लोडिंग	HTML पार्सिंग के साथ समानांतर	HTML पार्सिंग के साथ समानांतर
निष्पादन	HTML पार्सिंग पूरा होने के बाद	लोड होते ही तुरंत
क्रम	बनाए रखा जाता है	गारंटी नहीं
उपयोग का मामला	ऐप लॉजिक, निर्भर स्क्रिप्ट्स	स्वतंत्र थर्ड-पार्टी (एनालिटिक्स, विजेट्स)

ES6 मॉड्यूल्स (आधुनिक दृष्टिकोण)

module.js

export function display() {
    alert("Hello from module!");
}

export const PI = 3.14159;

main.js

import { display, PI } from './module.js';

console.log(PI); // 3.14159
display();

HTML

<script type="module" src="main.js"></script>

सर्वोत्तम अभ्यास

defer का उपयोग करें - अधिकांश स्क्रिप्ट्स के लिए (<head> में रखें)
फाइल्स को मिनिफाई और बंडल करें - उत्पादन के लिए (Webpack, Vite, Rollup)
SRI (Subresource Integrity) उपयोग करें - CDN से लोड करते समय
HTTP/2 या HTTP/3 उपयोग करें - मल्टीप्लेक्सिंग के लिए
क्रिटिकल JS इंलाइन करें - फर्स्ट कंटेंटफुल पेंट के लिए
अनावश्यक लाइब्रेरीज़ हटाएं - बंडल साइज़ कम करें

डीबगिंग टिप्स

ब्राउज़र डेवलपर टूल्स (F12) → Sources टैब
Source Maps के साथ मिनिफाइड कोड डीबग करें
debugger; स्टेटमेंट या ब्रेकपॉइंट्स उपयोग करें
कंसोल में त्रुटियाँ जांचें