Introduction to HTML <script> Tag
HTML का <script> tag web pages में client side script define करने के लिए use किया जाता है। उदाहरण के लिए <script> tag के माध्यम से आप अपने HTML document में JavaScript add कर सकते है। JavaScript एक client side scripting language है। इसकी मदद से आप dynamic content generate कर सकते है और forms आदि को validate भी कर सकते है।
Attributes of HTML <script> Tag
Script tag में use किये जाने वाले attributes के बारे में निचे दिया जा रहा है।
Attributes | Explanation |
src | इस attribute के द्वारा आप external javascript का URL define करते है। इसकी value double quotes में दी जाती है। |
type | इस attribute के द्वारा आप script का type define करते है। यदि आप javascript use कर रहे है तो इसकी value text/javascript define करते है। |
async | इस attribute की value आप true और false की form में देते है। यदि आप इस attribute को true set करते है तो script HTML page के सभी elements के load होने के बाद asynchronously load होती है। इसे page load time reduce करने के लिए use किया जाता है। |
defer | इस attribute की value भी आप true और false की form में ही देते है। जब आप इस attribute को true set करते है तो script HTML document के parse होने के बाद load होती है। |
Syntax of HTML <script> Tag
Script tag को आप किसी भी normal HTML tag की तरह define करते है। इसका general syntax निचे दिया जा रहा है।
<script type=”text/javascript”>
//statements </script> |
किसी external javascript को include करने के लिए आप src attribute use करते है। इसका general syntax निचे दिया जा रहा है।
<script type=”text/javascript” src=”external-javascript-URL”></script> |
जैसा की आप ऊपर दिए गए syntax में देख सकते है जब आप किसी external javascript को अपने page में include करते है तो आपको script page में define करने की आवश्यकता नहीं होती है।
Script को anonymously load करने के लिए आप async attribute को true set करते है। इसका general syntax निचे दिया जा रहा है।
<script type=”text/javascript” src=”external-javascript-URL” async=”true”></script> |
किसी script को page के parse होने के बाद load करने के लिए आप defer attribute को true set करते है। इसका general syntax निचे दिया जा रहा है।
<script type=”text/javascript” src=”external-javascript-URL” defer=”true”></script> |
Using HTML <script> Tag
Script tag को आप HTML document में 2 प्रकार से use कर सकते है।
Embedding Script
इस तरीके में आप script को HTML document में ही define करते है। वैसे तो आप <script> tag को HTML के <body> tag में भी define कर सकते है लेकिन ज्यादातर इसे <head> tag में ही define किया जाता है। इसे निचे उदाहरण के द्वारा समझाया जा रहा है।
<html> <head> <title> Embedding Javascript Demo</title> <script type=”text/javascript”> </head> <body> </html> |
ऊपर दिए गए उदाहरण में script को page में ही embedded किया गया है। ये script निचे दिया गया output generate करती है।
Linking Script
इस तरीके में आप की script किसी server पर stored रहती है और आप उसे अपने HTML document से link करते है। इसके लिए आप <script> tag का src attribute use करते है। यदि आप अपनी script को hidden और secure रखना चाहते है तो उसके लिए आप इस तरीके को use कर सकते है। इसे external javascript भी कहा जाता है। इसे निचे उदाहरण के द्वारा समझाया जा रहा है।
<html> <head> <title>Linking Script Demo</title> <script type=”text/javascript” src=”MyFile.js”> </script> </head> <body> </html> |
ऊपर दिए गए उदाहरण में एक external javascript को page से link किया गया है। जब आप external java script define करते है तो उसे .js extension के साथ save करते है। External javascript define करते समय आपको <script> tag define करने की आवश्यकता नहीं होती है। अधिक जानकारी के लिए आप java script से related tutorials देख सकते है। ऊपर दी गयी script निचे दिया गया output generate करती है।
HTML <noscript> Tag
कई बार page में script load नहीं हो पाती है। ऐसा कई कारणों से हो सकता है। उदाहरण के लिए user कोई पुराना web browser use कर रहा है जो script को support नहीं करता है या फिर user ने स्वयं ही script disable कर रखी है। कारण कोई भी हो ऐसी situation में आप <noscript> tag use कर सकते है जो script नहीं load होने पर user को appropriate message show करने के लिए use किया जाता है। इस tag को आप head section में या body section में कँही भी use कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html> <head> <title>HTML no script Demo</title> </head> <body> <script type=”text/javascript”> <noscript> Your script is disabled. Please update your browser or enable it.</noscript> </body> </html> |
ऊपर दी गयी script निचे दिया गया output generate करती है।