Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में Script tag के Attribute के बारे में जानेगे की attribute script tag में क्यों use किये जाते है और उसके use करने का resion क्या होता है!. अगर आप JavaScript use करते हो web development में, तो <script> tag आपके लिए बहुत important है!.
इस tag के through हम HTML file में JavaScript embed (अंदर लिख सकते हैं) या external JS file को connect कर सकते हैं!.
इस article में हम detail में देखेंगे script tag के सभी attributes, उनका meaning, और कब use करना चाहिए!.
<script> Tag क्या है?
<script> tag का use JavaScript code को HTML document में include करने के लिए होता है!. आप चाहे तो JS code directly लिख सकते हो या external file link कर सकते हो!. आप दोनों example निचे देख सकते है की हम inline और extenal दोनों तरीके से JavaScript code को अपने HTML document के कैसे add करा सकते है!.
Example: Inline Script
<script>
console.log("Hello World!");
</script>
Example 2: External JS File
<script src="app.js"></script>
All <script> Tag Attributes और उसके Meaning and Examples
src
Script tag में src attribute का इस्तेमाल external file को include करने के लिए होता है!. जब आप JS file को अलग रखना चाहते हो तो आप js file को उस src attribute के जरिये add करा सकते है!.
Example:
<script src="app.js"></script>
type
Script tag में type attribute script का type बताता है और default रूप से text/javascript होता है!. यानि की type attribute बताता है की script किस type का है यानी browser को यह बताता है की इस script के अंदर किस language का code लिखा गया है!. और आज के time में browser अगर type attribute ना देख भी पाये तो भी automatically समझता है की ये JavaScript code है!.
लेकिन अगर आप modern ES6 modules use कर रहे हो (with import / export), तो type=”module” लिखना ज़रूरी है।
type=”text/javascript”
ये traditional या old-style JavaScript code के लिए होता है!. ये browser को बताता है की script normal JavaScript code contain करता है!. उस attribute को कब उस कर सकते है जब आप normal JS लिख रहे हो या जब आपको import/export की ज़रूरत नहीं है!.
Example:
<script type="text/javascript">
console.log("Hello from normal JavaScript!");
</script>
//Ya external file ke sath
<script type="text/javascript" src="main.js"></script>
type=”module”
ये modern JavaScript (ES6 Modules) के लिए use होता है!. type=”module” लिखने से browser समझता है की ये modular script है!. यानी इसमें import और export statements use किये गए हैं!. script tag इस attribute का use कब कर सकते है! जब आप JS code को modules में divide करते हो, जब आप एक file से दूसरी file में function / variable import करना चाहते हो, जब आप modern bundlers(like Vite, Rollup, Parcel, Webpack) के साथ काम करते हो!.
Example:
/* file1.js */
export function greet(name) {
console.log(`Hello, ${name}!`);
}
/* file2.js */
import { greet } from './file1.js';
greet('Rahul');
/*index.html */
<script type="module" src="file2.js"></script>
async
Script tag में async attribute का मतलब होता है “asynchronously” यानी browser script को HTML parsing के साथ-साथ load करता है, और जैसे ही script download हो जाता है, तुरंत execute कर देता है, बिना HTML parsing का wait किये!.
async Internally Works कैसे करता है!
Browser HTML document read कर रहा होता है tab <script src=”file.js” async> find होता है तब Browser file.js download करना start कर देता है background में और HTML parsing continue रहती है, stop नहीं होती. जैसे ही file
download complete होती है Browser HTML parsing temporarily stop करता है और script तुरंत execute करता है. Script execute होने के बाद HTML parsing resume होती है!.
Example:
<script src="analytics.js" async></script>
यहाँ analytics.js asynchronously load और run होगा. Browser HTML parsing continue करेगा, जैसे ही script download हो गया, वो execute हो जायेगा चाहे HTML complete parse हुआ या नहीं!.
Important Note
Async scripts don’t maintain order. अगर multiple async scripts लगाए हो, तो जो पहले load हो जायेगा वो पहले चलेगा, चाहे निचे लिखा हो या ऊपर.
Example:
<script src="one.js" async></script> <script src="two.js" async></script>
अगर two.js पहले load हो गया, तो वो पहले चलेगा even though one.js ऊपर लिखा गया था!.
defer
defer का मतलब होता है, Script को background में load करो, और HTML parsing complete होने के बाद execute करो. यानी के Broswer script file download करेगा HTML के साथ-साथ लेकिंग execute तब करेगा जब पूरा HTML parse हो चूका हो!.
defer Internally Works कैसे करता है?
Browser HTML parsing start करता है जब <script src=”file.js” defer> मिलता है तो Script download होना background में start हो जाता है और Browser HTML parsing continue करता है! stop किये बिना जब Browder HTML parsing complete हो जाता है तब script execute होता है!, DOM के साथ safely interact कर सकता है!.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="config.js" defer></script>
<script src="main.js" defer></script>
<script src="helper.js" defer></script>
</head>
<body>
<h2>Welcome User</h2>
</body>
</html>
crossorigin
crossorigin attribute browser को बताता है कि जब कोई external JavaScript file (different domain से) load हो रही हो, तब browser उस request को कैसे handle करे credentials (cookies, tokens) के साथ या बिना।मतलब जब <script> tag में src किसी दूसरे domain (जैसे CDN, third-party API, या image server) से होता है, तो यह attribute define करता है कि वो request secure तरीके से कैसे भेजी जाए।
Example:
<script src="https://cdn.com/lib.js" crossorigin="anonymous"></script>
integrity
integrity attribute एक security feature है जिसे Subresource Integrity (SRI) कहते हैं!. ये browser को allow करता है verify करने के लिए की जो external file ( जैसे JavaScript या CSS file CDN से) load हो रही है, वो change या tamper नहीं हुई है!.
Simple words में, integrity ensures करता है की जो file हम load कर रहे हैं, वो बिलकुल original है, उसमे कोई malicious code या change नहीं हुआ है!.
Example:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-abc..." crossorigin="anonymous" ></script>
कैसे काम करता है?
Browser जब script download करता है, तो वो उस file का hash calculate करता है!. फिर वो compare करता है उस hash को जो आपने integrity attribute में दिया है!. अगर दोनों match करते हैं script load हो जाता है!. अगर match नहीं करते है तो browser script को block कर देता है। इससे आपका website safe रहता है अगर किसी ने CDN या file में छेद-चाड कर दी हो!.
क्यों Use करते हैं integrity?
Security purpose से अगर File में किसी ने malicious code add कर दिया हो तो ये detect करता है!. और Browser confirm करता है की file exactly वही है जो developer ने provide की थी!. Automatic Protection Browser khud ही script को block कर देता है अगर hash गलत है!.
nomodule
Script tag में nomodule attribute का use होता है legacy JavaScript support के लिए. ये browser को बताता है की अगर browser ES6 modules support नहीं करता, तब ये script execute करो. अगर module support करता है, तो ignore करो. Modern browsers (Chrome, Firefox, Edge, Safari) modules support करते हैं तो ignore करेंगे nomodule scripts
और Old browsers (IE, older Safari versions) run करेंगे nomodule script को!.
Example:
<script src="legacy.js" nomodule></script>
nomodule एक boolean attribute है आपको value देने की ज़रूरत नहीं!. अगर present है तो old browsers में रन होगा और Modern browsers में ignore होगा!
Internally कैसे Works करता है?
Browser HTML parse करता है. अगर <script type=”module”> supported है ये module script run करेगा और nomodule scripts को ignore करेगा. अगर browser ES6 module support नहीं करता तो nomodule script execute होगा!.
Example:
<!-- Modern browsers ke liye --> <script type="module" src="main.js"></script> <!-- Old browsers ke liye --> <script nomodule src="legacy.js"></script>
main.js में आप modern JS features use कर सकते हो (import, export) legacy.js में आप normal ES5 JavaScript use करोगे (IE support के लिए)।
referrerpolicy
script tag में referrerpolicy attribute browser को बताता है की जब script या resource load हो, तो HTTP referrer information (origin URL) को server के साथ कैसे share करना है. यानी ये control करता है की आपके page का URL server को पता चले या नहीं जब external script या resource load हो!.
Example:
<script src="https://example.com/script.js" referrerpolicy="no-referrer"></script>
Browser कोई referrer info नहीं भेजेगा. Server को ये पता नहीं चलेगा की request कहाँ से आयी है!
Why Use referrerpolicy?
Privacy: आपके users का URL server के साथ share ना हो!.
Security: Sensitive pages का full URL लीक ना हो!.
Analytics Control: अगर आप analytics या tracking scripts use करते हैं, तो आप decide कर सकते हो की URL share करना है या sirf origin.
charset
Script tag में charset attribute specify करता है character encoding जो script file में use हुआ है!. Browser को बताता है की script file का text कौनसा encoding standard follow कर रहा है, जैसे UTF-8, ISO-8859-1, etc. ये old practice है, modern scripts में mostly UTF-8 default होता है, इसलिए rarely use होता है!.
ये कैसे work करता है?
Browser script file को download करता है, Browser देखता है की script में charset attribute specified है या नहीं
अगर specified है तो browser use encoding के according read करेगा script को, अगर charset ना दिया तो browser default encoding use करता है (usually UTF-8).
Example:
<script src="my-script.js" charset="UTF-8"></script>
अगर script में special characters है (जैसे Hindi text, emojis, symbols) तो UTF-8 ensure करेगा की वो correct parse हो
अगर encoding mismatch है तो script में syntax error या wrong characters show हो सकते हैं!.
<script> tag सिर्फ एक HTML element नहीं ये web pages को dynamic और interactive बनता है!. अगर आप इन attributes को सही तरीके से use करते हो, तो आपके web pages faster, secure, और SEO-friendly बन जाते हैं!.
