javascript output example tutorial , जावास्क्रिप्ट आउटपुट का उदाहरण के साथ

javascript output in hindi , js से html में लिखे

JavaScript से आउटपुट कैसे प्राप्त करें

  • javascript के द्वारा कितने तरीके से html में लिखा जा सकता है
  • html के किसी element का content और उसका style कैसे change किया जा सकता है |
  • innerHTML , document.write() , window.alert() , console.log() का प्रयोग कैसे किया जाता है उदाहरण के साथ

JavaScript

JavaScript के प्रयोग से कई तरीके से data को दिखाया जा सकता है

  • innerHTML का प्रयोग करके आप सीधे html element के अन्दर लिख सकते है |
  • document.write() के प्रयोग से आप बिना कोई html एलिमेंट बनाये direct html में लिख सकते है , लेकिन आपको फिर भी body के अन्दर लिखा मिलेगा
  • window.alert() का प्रयोग करके आप alert box में लिख सकते है |
  • console.log() का प्रयोग करके आप जिस browser का प्रयोग कर रहे है उसके console में लिख सकते है

जिस element के अन्दर आप लिखना चाहते है उसको access करने के लिए , आप javascript के document.getElementById(id) का प्रयोग कर सकते है

(id) के स्थान पर आपको उस html element का id लिखना होगा जिसे आप access करना चाहते है और उस पर कुछ लिखना चाहते है

innerHTML property में आपको अपने content को लिखना होगा जिससे content सम्बंधित id वाले एलिमेंट में आपने आप लिखा जायेगा 

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML उदाहरण हिंदी में </title>
</head>
<body>
<p id="htmlid"></p>

<script>
document.getElementById("htmlid").innerHTML="learnsa2z"+".com";
</script>

</body>
</html>

innerHTML property का प्रयोग आम है , अगर js के द्वारा html element का content बदलना हो या उसमे लिखना हो या उसका किसी भी प्रकार का innerHTML गुण बदलना हो तो आपको इसी का प्रयोग ज्यादातर वेबसाइट में मिल जायेगा

document.write() का प्रयोग :

document.write() का प्रयोग आप testing के लिए कर सकते है , क्योंकि जैसा कि हमने ऊपर बताया इसके लिए आपको html का कोई भी टैग बनानें की जरूरत नही है उदहारण से आप ज्यादा बेहतर समझ पाएंगे:

उदाहरण 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document.write का उदाहरण</title>
</head>
<body>

    <script>
        document.write("learnsa2z"+".com");
    </script>

</body>
</html>

चेतावनी :

अगर आप html document के load हो जाने के बाद document.write() का प्रयोग करते है तो यह आपके पूरे उस पेज के पूरे html एलिमेंट को डिलीट कर देगा और सिर्फ आपको document.write() का ही आउटपुट प्राप्त होगा|

ऊपर बाते गई चेतावनी को आइये एक उदाहरण से समझते है कि आखिर ऐसा कब होता:

उदाहरण


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document.write() clear html उदाहरण</title>
</head>
<body>
<p> यह डिलीट हो जायेगा</p>
<h1>यह डिलीट हो जायेगा </h1>

    
<input type="button" onclick='document.write("learnsa2z"+".com")'  value="चेक करें">
</input>

</body>
</html>
इसीलिए document.write() का प्रयोग ज्यादातर test के लिए किया जाना चाहिए|

window.alert() का प्रयोग

आप आउटपुट को दिखने के लिए alert box का प्रयोग कर सकते है| जिसमे आप विभिन्न प्रकार का data प्रयोग कर सकते है जैसे timeout दर्शाने के लिए आदि

उदाहरण

        
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window alert का उदाहरण hindi me </title>
</head>
<body>

<script>
window.alert("learnsa2z"+".com");
</script>
 </body>

</html>

console.log() का प्रयोग :

console.log() method का उपयोग आप debugging करने के लिए कर सकते है ,जहाँ आप तेजी से प्रोग्राम की testing कर सकते है

उदाहरण 

        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>console.log() का उदाहरण हिंदी में </title>
</head>
<body>
   <script>
    console.log("learnsa2z" + ".com");
   </script>
</body>
</html>

console.log() का आउटपुट देखने के लिए browser में right क्लिक कर inspect को select करें आउटपुट दिख जायेगा

Tags
Reactions

एक टिप्पणी भेजें

0 टिप्पणियाँ

आपके सुझाव सादर आमंत्रित है