JavaScript <script> Tag

मित्रों आज हम इस लेसन में <script> टैग के बारे में जानेंगे.

HTML पेज में JavaScript कोड लिखने के लिए <script> टैग का प्रयोग करना पड़ता हैं.

Example:

<script>
document.getElementById("demo").innerHTML = "मेरा पहला javascript कोड";
</script>


कोशिश करें

इसे हम टाइप एट्रिब्यूट के साथ भी लिख सकते हैं

Example

<script type="text/javascript">
document.getElementById("oc").innerHTML = "मेरा पहला javaScript कोड";
</script>


कोशिश करें

JavaScript default स्क्रिप्टिंग लैंग्वेज होने के कारण type एट्रिब्यूट का प्रयोग नहीं भी करेंगे तो भी कोई फर्क नहीं पड़ता है.

JavaScript Functions और Events:

मित्रों JavaScript function एक कोड ब्लॉक होता है जिसमें कोड लिखा रहता है. जब भी हम इस function को कॉल करते हैं तब ये कोड execute होते हैं. उदाहरण के तौर पर लें तो हम किसी event के द्वारा उससे जुड़े हुए function को कॉल कर कोड को execute करवा सकते हैं.

Events:

जब हम किसी बटन पर क्लिक करते हैं या माउस को किसी मेनू पर ले जाते हैं तो उसी को event कहते हैं.

JavaScript in head:

JavaScript को हम  <head> सेक्शन में डाल सकते हैं और उससे जुड़े हुए event के द्वारा उसे कॉल कर सकते हैं:

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
document.getElementById("origin").innerHTML = "ये function के कॉल होने के बाद वाला पैराग्राफ है.";
}
</script>
</head>

<body>

<h1>The Web Page of Origin Classes</h1>
<p id="origin">ये पैराग्राफ है </p>
<button type="button" onclick="myFunction()">function को कॉल करें</button>

</body>
</html>


कोशिश करें

JavaScript in <body>

JavaScript को हम <body> सेक्शन में लिख कर event के द्वारा कॉल करा सकते हैं:

<!DOCTYPE html>
<html>

<body>

<h1>आप www.originclasses.com पर सीख रहे हैं</h1>
<p id="demo">पैराग्राफ</p>
<button type="button" onclick="myFunction()">Function को कॉल करें</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Function के कॉल होने के बाद पैराग्राफ बदला गया.";
}
</script>
</body>
</html>


कोशिश करें

नोट: अगर पेज लोडिंग का स्पीड सही रखनी हो तो कोड को body सेक्शन में सबसे नीचे लिखें क्योंकि अगर ऊपर रखते हैं तो पहले कोड compiled होगा फिर आपका पेज डिस्प्ले होगा.

External JavaScript:

आप चाहें तो js कोड external पेज में लिखकर इसका लिंक अपने html पेज में दे सकते हैं. इसके लिए आपको एक फाइल बनाना होगा जिसका एक्सटेंशन .js रखना पड़ेगा फिर इस फाइल का लिंक आप अपने जरुरत के हिसाब से किसी भी html पेज में दे सकते हैं.

Example:

JavaScript external फाइल filename.js

function myFunction() {
 document.getElementById("oc").innerHTML = "यह पैराग्राफ external फ़ाइल से आया.";
}

HTML पेज

<script src="external/example_files/js/filename.js">
</script>

कोशिश करें

आप चाहें तो external script को <head> या <body> सेक्शन में दे सकते हैं. आपको जरा सा भी महसूस नहीं होगा की आपका फाइल कहीं और लिखा है.

External script फाइल में <script> नहीं लिखा जाता है क्योंकि पूरी फाइल ही js की ही होती है.

External JavaScript Advantages

मित्रों external फाइल बनाने से हमें html फाइल को समझने में बहुत ही मदद मिलती है

  • यह HTML कोड को अलग कर देता है
  • HTML और JS कोड पढना आसान हो जाता है
  • Cashed JS फाइल होने की वजह से स्पीड बढ़ जाती है

एक पेज में जितनी मर्जी हो उतनी external js फाइल्स की लिंक दे सकते हैं

Example

<script src="script_name1.js"></script>
<script src="script_name2.js"></script>

External References

हम external script को reference फाइल की मदद से भी जोड़ सकते हैं, यानी की आपके डाटाबेस के अलावा फाइल को दूसरी जगह से लिंक देकर प्रयोग कर सकते हैं.

Example

External js file

function myFunction() {
 document.getElementById("oc").innerHTML = "यह पैराग्राफ external फ़ाइल से आया.";
}

HTML पेज

<script src="https://www.originclasses.com/external/example_files/js/filename.js"></script>

कोशिश करें

मित्रों अगर आपको टुटोरिअल अच्छा लग रहा है और नए लेसन अपने मेल पर पाना चाहते हैं तो हमारे पोस्ट को जरुर सब्सक्राईब करें.

Origin Classes पर Pradeep Karn के साथ बने रहने के लिए धन्यवाद.

Leave a Reply

Your email address will not be published. Required fields are marked *