Javascript Ko HTML Mai Kaise Insert Karte Hai? आज इस आर्टिकल में हम आपको बताने वाले है की कैसे HTML में JavaScript को कैसे insert कराते है ?
JavaScript एक Programming Language है, जिसकी Help से आप किसी भी Webpage या किसी Website को dynamic कर सकते है। JavaScript Code को HTML file के साथ ही code किया जाता है।
आज के इस आर्टिकल में हम जानेंगे की कैसे HTML में JavaScript को Insert कराते है ? लेकिन उससे पहले आपको HTML के बारे में पूरी Complete knowledge होनी चाहिये।
तो चलिए जानते है की Javascript Ko HTML Mai Kaise Insert Karte Hai?
Javascript Ko HTML Mai Kaise Insert Karte Hai?
HTML <script> Tag to add JavaScript
JavaScript का Use Client- side और Server- side दोनों के लिए किया जाता है। Client- side और Server- side Programming Language है जिसकी Help से आप Website को Interactive बना सकते हो।
JavaScript को use करने के लिए HTML में Tag का Use होता है। और <script> Tag का Use करके आप सिर्फ JavaScript के Client- Side Script Language का ही Use कर सकते है। <script> Tag में External file को src attribute से भी Add किया जाता है।
JavaScript का Use Basically देखा जाये तो Websites में Validation और Dynamic Content को Create करने के लिए किया जाता है। चलिए आपको एक Validation का एक Example दिखाते है।
मान लीजिए आपने कोई Form Create किया है और उसमे एक text field हैं , उस field में आप limitation लगाना चाहते है , Suppose आप चाहते हो की field में characters maximum 10 होनी चाहिए।
और Minimum 4 Characters ही होने चाहिए तो इसको करने के लिए आप JavaScript में Validation का Use करेंगे। अगर आप HTML Element को Select करना चाहते है तो , तो आप निचे दिए गए JavaScript के इस method में आप HTML की id का use करके कर सकते है।
- HTML or CSS Se Simple Slider Kaise Banaye?, HTML & CSS Slider
- HTML Se Blinking Text Effect Kaise Banaye ? HTML Blink Tag
- React Native Kya Hai? | What is React Native In Hindi | React Native Tutorial In Hindi
- Flutter Kya Hai? | What is Flutter in Hindi | पूरी जानकारी 2021
- React JS Kya Hai? | React JS Tutorial In Hindi | React JS In Hindi
- Node JS Kya Hai? | Node JS Tutorial In Hindi | Node JS In Hindi
- React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi
document.getElementById("name of id").innerHTML = "Hello World";उसी तरह एक दूसरा तरीका भी जो की इस तरह है : –
document.getElementByClassName("name of class").innerHTML = "Hello World";Some Example of JavaScript Code in HTML
Code : –
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript Code</title>
</head>
<body>
<h1>This is only Demo code of JavaScript</h1>
<p>With the help of JavaScript we can do this</p>
<button type="button" onclick="firstfunction()">Click Me</button>
<p id="id_here">ONLY FOR DEMO</p>
<script type="text/javascript">
function firstfunction(){
document.getElementById('id_here').innerHTML = "This is JavaScript"
}
</script>
</body>
</html>Output : –
जैसा की आप देख सकते है यहाँ पर हमने code में HTML में JavaScript का Use करके दिखाया है। सबसे पहले हमनें body tag के अंदर heading tag का Use किया है उसके बाद paragraph tag का Use किया है। <button type=”button” onclick=”firstfunction()”> Click me</button> उसके बाद हमनें button का use किया गया है जिसका type button होता है। और onclick method का भी use किया जाता है, जिससे की हमं function को call कराते हैं।
function का नाम जैसा की आप देख सकते है firstfunction() रखा गया है। document.getElementById(‘id_here’).innerHTML = “This is JavaScript”; तो इस method के जरिये आप HTML की id को Easily access कर सकते हैं। और उसमें Available जितने भी element होते है उनको change भी कर सकते हैं।
JavaScript use in HTML Style
JavaScript code के Help से हमं HTML के style को भी Easily change कर सकते है। जैसे की अगर आप text का color change करना चाहते हो या फिर उसका size छोटा बड़ा करना चाहते हो तो इस तरह के changes आप easily कर सकते हो।
Code : –
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo Code</title>
</head>
<body id="body1">
<p id="demo">With the help of JavaScript we can do this</p>
<button type="button" onclick="firstfunction()">Click Me</button>
<script type="text/javascript">
function firstfunction(){
document.getElementById('demo').style.fontSize = "30px";
document.getElementById('demo').style.color = "green";
document.getElementById('body1').style.backgroundColor = "blue";
}
</script>
</body>
</html>Output: –
HTML <noscript> Tag
no – script के नाम से ही आप समझ सकते है जहाँ पर कोई Script नहीं होती है। Simple Words में अगर बोले तो Tag का Use तब किया जाता है जब कोई Browser JavaScript को Support नहीं करता है। या फिर तब किया जाता है तब JavaScript को Disable कर रखा हो। इस Tag के Through Users को Alternate Content Provide करते है।
Code: –
<!DOCTYPE html>
<html>
<head>
</head>
<body id="body1">
<h1 id="demo"></h1>
<script type="text/javascript">
document.getElementById('demo').innerHTML = "This is JavaScript";
</script>
<noscript>Sorry, your browser does not support JavaScript</noscript>
</body>
</html>Output : –
Conclusion
इस Tutorial में, हमने आपको बताया है Javascript Ko HTML Mai Kaise Insert Karte Hai? एक एक Step की Help से हमने आपको बताया है, उम्मीद है यह लेख आपके लिए Helpful रहा होगा । अगर आपको मन में Javascript और html को लेकर किसी भी तरह के कोई भी Question है तो आप हमें नीचे Comment कर पूछ सकते है।
