HTML JavaScript
In this page:
<script>
// JavaScript code
</script>
<script src="script.js"></script>script Tag
script tag आपके webpage पर client-side JavaScript को embed या reference करने के लिए इस्तेमाल होता है। browser script tag को पढ़ता है और उसके अंदर के कोड को चलाकर आपके page को interactive बनाता है।
- आप अपना script सीधे script tags के अंदर लिख सकते हैं, या बाहरी script files load करने के लिए src attribute इस्तेमाल कर सकते हैं।
- Accepted attributes:
- src — बाहरी script का URL
- type — module | importmap | text/javascript (default) | अन्य data block type
- async — boolean; download होते ही चलाएं
- defer — boolean; parsing के बाद चलाएं
- crossorigin — anonymous | use-credentials
- integrity — Subresource Integrity के लिए hash
उदाहरण: The script Tag
<script>
console.log("Hello from JavaScript");
</script>HTML Elements को Target और Modify करना
JavaScript आपके webpage से HTML elements को target करके और उनके content या style attributes को dynamically बदलकर interact करता है, जिससे आपका page user actions पर real-time में react कर पाता है।
उदाहरण: Targeting and Modifying HTML Elements
<p id="message">Original text</p>
<script>
document.getElementById('message').textContent = 'Updated text';
</script>बाहरी JavaScript Files को Link करना
जैसे-जैसे आपकी website की features बढ़ती हैं, scripts को सीधे HTML files में लिखने से वे बिखरी हुई और maintain करने में मुश्किल हो सकती हैं। एक बाहरी .js फ़ाइल को link करने से आपका कोड व्यवस्थित रहता है और कई pages पर दोबारा इस्तेमाल करना आसान हो जाता है।
- अपने बाहरी scripts को प्रोजेक्ट के अंदर एक अलग js फ़ोल्डर में app.js नाम की फ़ाइल में save करें।
- Accepted attributes:
- src — script फ़ाइल का URL
- defer — boolean
- async — boolean
- type — module | text/javascript
उदाहरण: Linking External JavaScript Files
<script src="app.js"></script>Script Placement और Loading को Manage करना
Default रूप से, browsers script files को download और run करने के लिए आपके webpage layout को load करना रोक देते हैं, जिससे आपकी site की loading speed धीमी पड़ सकती है।
अपने pages को तेज़ी से load रखने के लिए आप script tags को page के सबसे नीचे रख सकते हैं, या उन्हें background में load करने के लिए defer और async attributes इस्तेमाल कर सकते हैं।
उदाहरण: Managing Script Placement and Loading
<script src="app.js" defer></script>सरल User Interactions को Handle करना
आप JavaScript का इस्तेमाल करके अपने page पर user interactions, जैसे किसी button पर क्लिक करना या किसी input box में टाइप करना, के जवाब में standard event listeners का इस्तेमाल करते हुए custom actions trigger कर सकते हैं।
उदाहरण: Handling Simple User Interactions
<button onclick="alert('Clicked!')">Click me</button>Script Loading Strategies
आप JavaScript को कहाँ और कैसे load करते हैं, इससे आपके page की speed काफी हद तक प्रभावित होती है। defer और async attributes यह control करते हैं कि browser आपके scripts को कब download और execute करे।
- ज्यादातर scripts के लिए defer इस्तेमाल करें — यह background में download होता है और HTML parse होने के बाद चलता है।
- Accepted values:
- (कुछ नहीं) — parsing रोकता है, तुरंत चलता है
- async — parallel में download होता है, तैयार होते ही चलता है
- defer — parallel में download होता है, क्रम में parsing के बाद चलता है
- type=module — default रूप से deferred
उदाहरण: Script Loading Strategies
<script src="app.js" defer></script>
<script src="tracker.js" async></script>Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: