HTML JavaScript का उपयोग web pages को dynamic और interactive बनाने के लिए किया जाता है।
JavaScript HTML के साथ मिलकर user actions handle करता है, content change करता है और logic apply करता है।
JavaScript क्या है
JavaScript एक client-side scripting language है।
यह browser के अंदर run होती है और HTML elements के behavior को control करती है।
JavaScript से:
Buttons पर action
Form validation
Dynamic content
Animations
User interaction
possible होता है।
HTML में JavaScript कैसे add करें
HTML में JavaScript जोड़ने के तीन main तरीके होते हैं:
Inline JavaScript
Internal JavaScript
External JavaScript
Inline JavaScript
Inline JavaScript सीधे HTML element के अंदर लिखी जाती है।
<button onclick="alert('Hello World')">Click Me</button>यह simple tasks के लिए use होती है लेकिन large projects में avoid करनी चाहिए।
Internal JavaScript
Internal JavaScript <script> tag के अंदर लिखी जाती है।
<script>
alert("Welcome to JavaScript");
</script><script> tag को <head> या <body> दोनों में रखा जा सकता है।
External JavaScript
External JavaScript अलग .js file में लिखी जाती है।
<script src="script.js"></script>External JS reusable होती है और large projects के लिए best practice है।
JavaScript से HTML Content Change करना
<p id="demo">Hello</p>
<script>
document.getElementById("demo").innerHTML = "Welcome";
</script>
JavaScript HTML content को dynamically change कर सकती है।
JavaScript से HTML Style Change करना
<p id="text">Color Change</p>
<script>
document.getElementById("text").style.color = "red";
</script>
CSS properties को JavaScript से control किया जा सकता है।
JavaScript Events
Events user actions को detect करते हैं।
Common events:
onclick
onchange
onmouseover
onkeydown
Event Example
<button onclick="showMsg()">Click</button>
<script>
function showMsg() {
alert("Button Clicked");
}
</script>
JavaScript से HTML Attributes Change करना
<img id="img" src="off.png">
<script>
document.getElementById("img").src = "on.png";
</script>
यह image switch जैसे features के लिए use होता है।
JavaScript Functions
Functions code को reusable बनाते हैं।
<script>
function greet() {
alert("Good Morning");
}
</script>
Functions को events के साथ call किया जाता है।
JavaScript और Forms
Forms validation के लिए JavaScript बहुत useful है।
<form onsubmit="return validate()">
<input type="text" id="name">
<input type="submit">
</form>
<script>
function validate() {
if(document.getElementById("name").value == "") {
alert("Name required");
return false;
}
}
</script>
JavaScript Output Methods
JavaScript output दिखाने के तरीके:
innerHTMLdocument.write()alert()console.log()
<script>
console.log("Debug Message");
</script>
JavaScript और DOM
DOM का मतलब है Document Object Model।
JavaScript DOM के जरिए HTML elements को access और modify करती है।
document.getElementById("box")
DOM JavaScript और HTML के बीच bridge है।
JavaScript Placement Best Practice
Best practice है <script> tag को </body> के पहले रखना।
इससे page पहले load होता है, फिर JavaScript run होती है।
Noscript Tag
अगर browser में JavaScript disabled है तो <noscript> content दिखाया जाता है।
<noscript>
JavaScript is disabled in your browser.
</noscript>
JavaScript Security Note
JavaScript client-side होती है, इसलिए:
Sensitive logic hide नहीं किया जा सकता
Server-side validation जरूरी होता है
Common Mistakes
JavaScript को <head> में block करना
Inline JavaScript ज्यादा use करना
Error handling ignore करना
Form validation सिर्फ JS पर depend करना
Best Practices
External JavaScript files use करें
Clean और readable code लिखें
Events के लिए functions use करें
HTML, CSS और JavaScript को separate रखें
Summary
HTML JavaScript webpages को interactive बनाती है।
JavaScript HTML content, style और behavior को control करती है।
Proper structure और best practices के साथ JavaScript modern web development का core part है।