JavaScript Output in Hindi-
हम JavaScript में निम्न चार प्रकार के output प्राप्त कर सकते हैं अर्थात JavaScript में output data को display करने के लिए हम चार तरीकों का प्रयोग करते हैं।
1- innerHTMLका प्रयोग करके किसी HTML element में लिखना
2- document.write(). का प्रयोग करते हुए HTML आउटपुट लिखना
3- window.alert(). का प्रयोग करते हुए alert box में लिखना
4- console.log(). का प्रयोग करते हुए browser console, में लिखना
अब हम उपरोक्त चरों तरीकों को एक-एक करके पोस्ट में देखेंगे,
1- innerHTML का प्रयोग करके किसी HTML element में लिखना –
किसी HTML element को access करने के लिए JavaScript , document.getElementById(id) इस method का प्रयोग करती है। यहाँ id attribute HTML element को define करता है, innerHTML property , HTML के content को दर्शाती है।
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Hello World! Here is my first Web page.</h2>
<p>Here is my first paragraph in this Web page</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10 + 9;
</script>
</body>
</html>
Output-
2- document.write(). का प्रयोग करते हुए HTML आउटपुट लिखना
Testing के समय इसका उपयोग ज्यादा होता है। इसे हम सीधा उदाहरण से ही समझते है-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Hello World! here is my first Web page</h2>
<p>Here is my first paragraph in this Web page</p>
<script>
document.write(10 + 9);
</script>
</body>
</html>
Output-
HTML document के load होने के बाद यदि हम document.write() method का प्रयोग करते है तो पहले वाला सारा content मिट जाता है। इसे हम निम्न उदाहरण से समझते हैं –
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Hello World! This is my First Web Page</h2>
<p>Here is My first paragraph in this Web Page</p>
<button type="button" onclick="document.write(10 + 9)">Magic button</button>
</body>
</html>
Output-
यहाँ Magic button को click करने के बाद केवल 19 ही output में रह जाता है। बाकि पहले का सबकुछ साफ हो जाता है।
3- window.alert(). का प्रयोग करते हुए alert box में लिखना- इसके प्रयोग से आप एक Alert box को कोई data दर्शाने के लिए काम में ले सकते हो। For example-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Hello World! This is My First Web Page</h2>
<p>This is the first paragraph in this Web Page</p>
<script>
window.alert("Read the alert and click Ok to get the output");
</script>
</body>
</html>
नोट- JavaScript में window object का scope global होता है इसलिए यदि हम window.alert() की जगह केवल alert() use करें तो भी कोई फ़र्क़ नहीं पड़ेगा।
4- console.log(). का प्रयोग करते हुए browser console, में लिखना-
इसका प्रयोग debugging के लिए किया जाता है। For example-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Debugging Mode</h2>
<p>To Activate debugging mode press F12 on your keyboard.</p>
<p>After that select console from the debugger menu.</p>
<p>Then refresh the page again</p>
<script>
console.log(10 + 9);
</script>
</body>
</html>
उपरोक्त उदाहरण के code को जब आप browser में run करेंगे तो आप console में 19 को print होता देखेंगे। यदि आप इस 19 को delete कर देंगे और फिर से page refresh करेंगे तो पाएंगे की फिर से वहां 19 print हो गया है।
JavaScript में print का प्रयोग-
JavaScript में कोई print object या print method. नहीं होता है। JavaScript के द्वारा हम कोई output devices access नहीं कर सकते है। हालाँकि window.print() method के जरिये आप browser में current window का content print करा सकते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>How to use The window.print() Method in JavaScript</h2>
<p>Just click the button to take the printout of this page.</p>
<button onclick="window.print()">Print this page</button>
</body>
</html>
Output-
जब आप “Print this page” button पर click करते हैं तो आपको print preview मिल जाता है और आप इस पेज का प्रिंट ले सकते हैं।
इस पोस्ट के पहले मैंने और भी कई पोस्ट लिखी हैं, जैसे की HTML , Microsoft Excel , Gmail , JavaScript आदि, आप अपने इच्छा के अनुसार इन्हे देख सकते है।