← Back to JavaScript Course | Chapter 1: Basics & Syntax | Lesson 3 of 12

JS आउटपुट

कल्पना करें कि किसी के साथ खबर साझा करने के चार अलग-अलग तरीके हों, उनके whiteboard पर लिखना, उनके सामने आकर सीधे बताना, सिर्फ खासतौर पर सुन रहे लोगों को धीरे से बताना, या एक intercom में चिल्लाना जिसे सिर्फ technicians सुनते हैं। JavaScript के पास output दिखाने के लिए ऐसे ही कुछ विकल्प हैं, innerHTML page पर लिखी चीज़ को खुद बदल देता है, alert सीधे user को बीच में रोकता है, document.write loading के दौरान page में लिखता है, और console.log सिर्फ console देख रहे developers से बात करता है। यह जानना कि किसी स्थिति के लिए कौन सा सही है, cookiescursor.com सहित किसी भी site पर JavaScript के साथ काम करने के लिए शुरुआती practical skills में से एक है।

In this page:

  1. innerHTML का उपयोग
  2. window.alert() का उपयोग
  3. document.write() का उपयोग
  4. console.log() का उपयोग
  5. सही Output Method चुनना
Syntax
javascript 
console.log(value);
document.getElementById("id").innerHTML = value;
document.write(value);

innerHTML का उपयोग

innerHTML आपको किसी element के भीतर की HTML सामग्री पढ़ने या बदलने देता है, जो इसे webpage पर सीधे गतिशील output दिखाने का सबसे आम तरीका बनाता है।

Note: innerHTML केवल सादा text नहीं, पूरे HTML tags भी डाल सकता है, जो इसे markup के छोटे टुकड़े गतिशील रूप से बनाने के लिए शक्तिशाली बनाता है।
Warning: Inserting untrusted user input directly with innerHTML can expose a site to cross-site scripting attacks, always sanitize such input first.

उदाहरण: Using innerHTML

javascript 
document.body.innerHTML = "<h2>Hello!</h2><p>This text was added with innerHTML.</p>";

window.alert() का उपयोग

alert() संदेश के साथ एक छोटा popup dialog खोलता है जो पूरे page को तब तक रोक देता है जब तक visitor OK न दबाए, जो अत्यावश्यक सूचनाओं के लिए उपयोगी है पर रोज़मर्रा के output के लिए बाधाकारी।

Note: alert() को development के दौरान त्वरित debugging के लिए रखिए, असली applications अपने अंतिम user experience के लिए शायद ही इसे इस्तेमाल करते हैं।
Warning: alert() blocks all other JavaScript execution on the page until it is dismissed, which can freeze animations or timers unexpectedly.

उदाहरण: Using window.alert()

javascript 
window.alert("This is an urgent message!");

document.write() का उपयोग

document.write() text को सीधे HTML document में लिखता है जब वह load हो रहा हो, एक तकनीक जो अधिकांश आधुनिक तरीकों से पुरानी है और अब साधारण उदाहरणों से आगे किसी भी काम के लिए पुरानी मानी जाती है।

Note: document.write() ज़्यादातर पुराने tutorials में दिखता है, आधुनिक JavaScript लगभग हमेशा innerHTML या DOM methods को तरजीह देती है।
Warning: Calling document.write() after the page has finished loading erases the entire existing page content, a surprising and destructive side effect.

उदाहरण: Using document.write()

javascript 
document.write("This text is written directly into the page.");

console.log() का उपयोग

console.log() संदेशों को browser के developer console में print करता है, जो केवल developers को दिखने वाला औज़ार है, और visitors जो देखते हैं उसे प्रभावित किए बिना values जाँचने और code को debug करने का मानक तरीका है।

Note: उदाहरणों पर काम करते समय console.log का output देखने के लिए अपने browser के developer tools खोलिए और Console tab देखिए।
Warning: console.log statements left in production code are usually harmless but should be cleaned up, since they can clutter the console and occasionally leak internal details.

उदाहरण: Using console.log()

javascript 
console.log("Check the browser console to see this message.");

सही Output Method चुनना

सही output method चुनना श्रोता पर निर्भर करता है: जो सामग्री visitors को दिखनी चाहिए उसके लिए innerHTML, alert केवल किसी ऐसी अत्यावश्यक चीज़ के लिए जो उन्हें रोकनी ज़रूरी हो, console.log केवल developer debugging के लिए, और साधारण सीखने के उदाहरणों के बाहर document.write से बचिए।

Note: अंगूठे के नियम के तौर पर, पूछिए कि संदेश असल में किसके लिए है, visitor को innerHTML दिखता है, developer को console.log।
Warning: Mixing up these methods in a live application, like using alert() for routine confirmations, creates a jarring experience for visitors.

उदाहरण: Choosing the Right Output Method

javascript 
console.log("Visible only to developers");        // for debugging
document.body.innerHTML = "<p>Visible to visitors</p>"; // for users
Live Example
Related Topics

JS कहाँ लिखें · JS स्टेटमेंट्स · JS परिचय · JS सिंटैक्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी finished application में regular output के लिए alert() इस्तेमाल करना, यह user को interrupt करता है और debugging या urgent warnings के बाहर intrusive लगता है।
  2. page पहले से load होने के बाद document.write() इस्तेमाल करना, जो पूरे existing page content को अनजाने में मिटा सकता है।
  3. यह भूल जाना कि console.log() का output सिर्फ developers को दिखता है, regular visitors को कभी नहीं, इसलिए यह visible feedback की जगह नहीं ले सकता।
चैप्टर सारांश
  • innerHTML page पर किसी element के असली visible content को बदलता है।
  • alert() और console.log() debugging और quick testing के लिए सबसे अच्छे हैं, regular user-facing output के लिए नहीं।
  • document.write() ज़्यादातर एक legacy tool है और load होने के बाद इस्तेमाल किए जाने पर किसी page का content गलती से मिटा सकता है।
ब्राउज़र सपोर्ट

innerHTML, alert, document.write, और console.log सभी आज इस्तेमाल हो रहे हर browser द्वारा supported हैं, desktop से mobile तक।

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson JS Where To Next Lesson → JS Statements

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.