How to add javascript in HTML
इस लेख मे हम जानेंगे की java script को कैसे HTML मे add किया जाता है।
<script> tag
HTML मे java script code को <script>……….</script> के बीच मे लिखा जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>JavaScript in Body</h2> <p>How to add javascript in HTML</p> <script> // javascript statement; </script> </body> </html>
पुराने java script version मे text attribute का इस्तेमाल किया जाता था। जैसे की <script type=”text/javascript”> । लेकिन अब सिर्फ <script> tag का ही इस्तेमाल होता है।
script को हम HTML मे तीन जगह पर place कर सकते है।
- <head>……</head> के बीच मे
- <body>…….</body> के बीच मे
- <head>……</head> and <body>…….</body> दोनों जगह पर
<head>……</head> के बीच मे
इस उदाहरण मे हम Java script code को head section मे define करेंगे।
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("one").innerHTML = "text changed.";
}
</script>
</head>
<body>
<h1>java script in Head </h1>
<p id="one">How to add javascript in HTML</p>
<button type="button" onclick="myFunction()">click here</button>
</body>
</html>आप यहा code के बारे मे tension ना ले क्योकि इसके बारे मे हम अगले लेख मे detail मे जानेंगे।
<body>…….</body> के बीच मे
इस उदाहरण मे हम Java script code को body section मे define करेंगे।
<!DOCTYPE html>
<html>
<body>
<h1>java script in Head </h1>
<p id="one">How to add javascript in HTML</p>
<button type="button" onclick="myFunction()">click here</button>
<script>
function myFunction() {
document.getElementById("one").innerHTML = "text changed.";
}
</script>
</body>
</html>Note : आप script को body सेक्शन मे नीचे लिखे क्योकि इससे display की speed बढ़ जाती है। script interpretation display की speed को धीमा कर देता है।
<head>……</head> and <body>…….</body> दोनों जगह पर
इस उदाहरण मे हम Java script code को head and body दोनों section मे define करेंगे।
<html>
<head>
<script>
function Hello() {
alert("Hello World")
}
</script>
</head>
<body>
<script>
document.write("Hello World")
</script>
<input type = "button" onclick = "Hello()" value = "Say Hello" />
</body>
</html>External Javascript
आप java script file को HTML script मे import कर सकते है।
इसके लिए java script file को .js extension के साथ save करनी होगी।
external javascript file को use करने के लिये आपको HTML मे script tag के साथ src attribute का इस्तेमाल करना होगा।
उदाहरण
myscript.js
function Hello() {
alert("Hello World")
}myscript.js file को आप HTML मे इस तरह use कर सकते है।
<html>
<body>
<input type = "button" onclick = "Hello()" value = "Say Hello" />
<script src="myScript.js"></script>
</body>
</html>आप external script reference को head or body कोई भी section मे लिख सकते हो।
External Javascript के फायदे
- यह HTML और javascript को अलग करता है।
- इससे HTML और Javascript को पढ़ने मे और maintain करने मे आसानी होती है।
- एक javascript file को multiple HTML pages मे इस्तेमाल किया जाता है। इससे HTML page की speed increase होती है।