JavaScript आउटपुट
अब आप पेज पर स्क्रिप्ट लगा सकते हैं। अगला हुनर: नतीजा कहाँ दिखे — विज़िटर के लिए पेज पर, बंद करने वाली डायलॉग में, या सिर्फ़ आपके Console में। एक भाषा, चार बहुत अलग जगहें।
JavaScript का नतीजा कैसे दिखाएँ?
विज़िटर के लिए मौजूदा एलिमेंट बदलें — सादे टेक्स्ट के लिए textContent, innerHTML तभी जब आपने लिखा मार्कअप डालना हो। रोकने वाला संदेश window.alert। अपनी जाँच के लिए console.log। document.write पुराना स्ट्रीम है: फ़ाइल पढ़ते समय ठीक; लोड के बाद ख़तरनाक — पूरा दस्तावेज़ मिट सकता है।
नतीजा कहाँ दिखता है?
📊 नतीजा देखने की आम जगहें
| विधि | कौन देखता है | शुरुआती डिफ़ॉल्ट |
|---|---|---|
एलिमेंट पर textContent |
विज़िटर, पेज पर | हाँ — रोज़ का दिखने वाला आउटपुट |
एलिमेंट पर innerHTML |
विज़िटर, HTML टैग सहित | तभी जब मार्कअप आपका हो |
window.alert |
विज़िटर, डायलॉग में | कम — पेज OK तक रुकता है |
console.log |
आप, DevTools Console में | हाँ डिबग के लिए; विज़िटर नहीं देखते |
document.write |
HTML स्ट्रीम | लोड के बाद न करें |
पेज पर (विज़िटर डिफ़ॉल्ट)
HTML में असली शीर्षक या पैराग्राफ़ रखें। स्क्रिप्ट चलने पर (पिछले सत्र जैसा body का अंत) उसी नोड को बदलें। विज़िटर नया टेक्स्ट DevTools खोले बिना देखते हैं।
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>
पहले textContent क्यों
- स्क्रिप्ट फेल हो तो «Waiting…» HTML में रहता है
- उद्धरण और
<टेक्स्ट रहते हैं, टैग नहीं बनते - body के अंत वाली स्क्रिप्ट वाला वही पैटर्न
- DOM मॉड्यूल बाद में आएगा; यहाँ बस «नतीजा यहाँ रखो»
innerHTML — जब नतीजा मार्कअप हो
innerHTML स्ट्रिंग को HTML की तरह पढ़ता है। जानबूझकर अपने लिखे टैग डालते समय इस्तेमाल करें। यूज़र का कच्चा इनपुट innerHTML में न डालें। नाम या कीमत के लिए textContent।
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>
document.write — जानें, कम इस्तेमाल करें
document.write फ़ाइल पार्स होते समय HTML स्ट्रीम में टेक्स्ट भेजता है। लोड के बाद कॉल करें (देर से क्लिक) तो कई ब्राउज़र नई स्ट्रीम खोलकर पेज मिटा देते हैं। अपडेट के लिए एलिमेंट बदलें; इसकी आदत न डालें।
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>
डेमो खोलें, बटन दबाएँ, पहला पैराग्राफ़ गायब देखें। इसलिए इस कोर्स के आगे के उदाहरणों में document.write नहीं आएगा।
alert — पेज रोकने वाला डायलॉग
window.alert (अक्सर alert) सिस्टम डायलॉग खोलता है। पेज OK तक रुकता है। एक बार स्क्रिप्ट चलने का सबूत ठीक है। अकेली UI कमज़ोर है: स्टाइल नहीं, बार-बार परेशान, स्क्रीन रीडर और कीबोर्ड टूटते हैं। असली संदेश पेज पर लिखें।
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>
console.log — आपके लिए, विज़िटर के लिए नहीं
Console डेवलपर टूल है। console.log वहीं छापता है। फ़ोन पर खरीदार नहीं देखता। सीखते समय संख्या या स्ट्रिंग जाँचने के लिए अच्छा। सफल लॉग का मतलब «ऐप ने नतीजा दिखाया» नहीं।
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);
DevTools खोलें (अक्सर F12), Console टैब, रिफ़्रेश, लाइनें पढ़ें। सिर्फ़ console.log बदलें और शीर्षक «Waiting…» रहे तो विज़िटर भी «Waiting…» ही देखते हैं।
खुद आज़माएँ
textContentपेज सेव करें, खोलें, स्ट्रिंग बदलें, रिफ़्रेश करें।- वही पंक्ति
innerHTMLऔर<strong>से बदलें, बोल्ड देखें। - Console खोलकर
console.logचलाएँ — बॉडी में कुछ नया नहीं। - alert एक बार चलाएँ; फिर शीर्षक अपडेट से बदलें ताकि पेज न रुके।
- वैकल्पिक:
document.writeबटन से मिटान महसूस करें — फिर अपनी फ़ाइलों से यह पैटर्न हटाएँ।
आम गलतियाँ
- सिर्फ़
console.logसे नतीजा दिखाना और खाली पेज पर हैरान होना - अपने न लिखे टेक्स्ट (फ़ॉर्म, URL, चैट) को
innerHTMLमें डालना,textContentकी जगह - लोड के बाद
document.writeऔर पूरा लेआउट जाना - हर कुंजी पर
alert - Where To से मिलावट: वहाँ स्क्रिप्ट रहती कहाँ है; यहाँ नतीजा दिखता कहाँ है
सार
- विज़िटर के लिए दिखने वाला डिफ़ॉल्ट:
textContentसे एलिमेंट बदलें innerHTMLआपका मार्कअप डालता है — अनजानी स्ट्रिंग नहींalertपेज रोकता है; कम इस्तेमाल करेंconsole.logDevTools में डेवलपर के लिए है- लोड के बाद
document.writeन करें; दस्तावेज़ मिट सकता है - वही संदेश Console → alert → शीर्षक पर ले जाकर अभ्यास करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी