डाउनलोड पी.डी.एफ. ई-बुक्स
HTML - HTML Javascript

<script>
<noscript>

HTML Webpage पर Javascript का इस्तेमाल करना हो तो <script> element का इस्तेमाल किया जाता है |

Javascript(<script>) को कहा पर भी define किया जा सकता है | आप <script> को <head> पर या <body> पर भी define कर सकते है |

HTML में Javascript का इस्तेमाल Dynamic content add, remove और manipulation करने के लिए इस्तेमाल किया जाता है |

Use Javascript in <head> Element

Example पर javascript को <head> element में define किया गया है और javascript के जरिये "Hello World" इस string को print किया गया है |

<head>
<script type="text/javascript"> <-- OR <script> -->
document.write("Hello World");
</script>
</head>
<body>
</body>
Output :

Use Javascript in <body> Element

Example पर javascript को <body> element में define किया गया है और html page पर javascript के जरिये button को click करने पर "Hello World" ये string add किया जायेगा |

<head>
</head>
<body>
<div id="mydiv"></div>
<button onclick="func()">Click Me</button>

<script type="text/javascript"> <-- OR <script> -->
function func(){
 document.getElementById("mydiv").innerHTML = "Hello World";
}
</script>
</body>
Output :


HTML में Javascript को दो प्रकार से define किया जाता है |

  • Internal Javascript(<script>)
  • External Javascript(<script src="">)

Internal Javascript(<script>)

Example पर Internal Javascript को दर्शाया गया है, उसमे Javascript के माध्यम से "mydiv" id वाले element में dynamically 'Hello World' इस string को add किया गया है |

अगर आप 'mydiv' वाले id के element पर कोई text देते हो तो उसे भी 'Hello World' इस text से replace किया जायेगा |

<body>

<div id="mydiv"></div>

<script>
 document.getElementById("mydiv").innerHTML = "Hello World";
</script>
</body>
Output :


Change Content Dynamically

Example पर Hello Friends इस text को Hello World इस text से replace किया गया है |

<body>

<div id="mydiv">Hello Friends</div>

<script>
 document.getElementById("mydiv").innerHTML = "Hello World";
</script>
</body>
Output :
Hello Friends


Define Javascript at the end of the HTML Document

Try javascript to define the top of the document

Example पर Javascript को top पर define किया गया है, लेकिन इसकी आपने दी हुई script को जो चाहिए वो मिल नहीं पाता है | इसीलिए HTML Document कोई Output नहीं दे रहा है |

<body>
<script type="text/javascript">
 document.getElementById("mydiv").innerHTML = "Hello World";
</script>

<div id="mydiv"></div>

</body>
Output :


Try javascript to define the end of the document

Example पर Javascript को end पर define किया गया है, इसकी वजह से आपने दी हुई script को जो चाहिए वो मिल पाता है |

Javascript को end पर देने पर आपके webpage का loading speed भी बढ़ जाता है |

<body>

<div id="mydiv"></div>

<script type="text/javascript">
 document.getElementById("mydiv").innerHTML = "Hello World";
</script>

</body>
Output :


External Javascript(<script src="">)

External Javascript में external file में <script> element की जरुरत नहीं पड़ती है, लेकिन उसे HTML Document में import करने के लिए <script> element के साथ-साथ 'src' attribute की value पर external file का path दिया जाता है |

<script> element के src attribute की value ये .js इस extension वाली होती है | इस external file का फायदा HTML के सभी elements के लिए होता है और आप इस external file को किसी भी HTML Document पर import कर सकते है |

Syntax :
<script src="path_of_external_js_file"></script>

Example :
<body>

<div id="mydiv"></div>

<script src="myjs.js"></script>

</body>
myjs.js
 document.getElementById("mydiv").innerHTML = "Hello World";
Output :
Hello World


<noscript> Element

<noscript> Element का इस्तेमाल अगर कोई Browser या किसी Browser का Javascript disabled हो तो उसके लिए message देने के लिए किया जाता है |

<body>

<div id="mydiv"></div>

<script type="text/javascript">
 document.getElementById("mydiv").innerHTML = "Hello World";
</script>

<noscript>Current browser does not support JavaScript or Browser's Javascript is Disabled</noscript>

</body>
Output :