document.write() Javascript for Writing in Document

document.write() JavaScript – JavaScript में किसी Web Page या Document Object में Content को Write करने के लिए हमें write() व writeln() नाम के दो Methods प्राप्त होते हैं, जो किसी Web Page के Output Stream में किसी Content को लिखने की सुविधा देते हैं। ये दोनों ही Methods Argument के रूप में एक String Accept करते हैं और उस String को ज्यों का त्यों Currently Loaded Web Page में Text की तरह Write कर देते हैं।

write() व writeln() इन दोनों Methods में केवल एक ही अन्तर है कि जब हम writeln() Method को Use करते हैं तो ये Method Automatically String के अन्त में एक New Line ले लेता है और अगला Content हमेंशा एक New Line में दिखाई देता है, जबकि write() Method Automatically New Line नहीं लेता बल्कि यदि जरूरत हो, तो हमें स्वयं “\n” Constant को Use करके New Line को Specify करना पडता है।

इन दोनों Methods को Use करके हम Dynamically Load हो रहे Page में अपना Content Add कर सकते हैं। लेकिन जब हम JavaScript सीख रहे होते हैं, तब इन दोनों Methods को Use करके हम सामान्‍यत: अपने Programs का Output Web Page पर Render करते हैं। इन दोनों Methods को हम निम्नानुसार Use कर सकते हैं:

जब हम इस HTML Web Page को Web Browser में Load करते हैं तो ये Web Page निम्नानुसार Render होता है:

जैसाकि हम देख सकते हैं कि हमारे Web Page में कोई Static Content नहीं है, फिर भी Web Page में Current Date and Time दिखाई दे रहा है और क्योंकि Content को हमने Current Web Page में document.write() Method द्वारा Dynamically Insert किया है।

आप देख सकते हैं कि इस HTML Web Page में हमने write() Method में किस तरह से JavaScript के Date() Method को String के साथ + Operator द्वारा Concatenate किया है साथ ही हमने Specify किए गए Argument में <strong> Element को भी Specify किया है, जिसे Web Browser Parse करके दिखाई देने वाले Date and Time को Bold Face में Render कर रहा है।

यानी हम इस Method में किसी भी JavaScript Function अथवा Variable की Value को String के साथ Concatenate करके HTML Elements के बीच Enclose कर सकते हैं और Web Browser इस write() Method को Execute करते समय JavaScript Codes को भी Run करता है साथ ही सभी HTML Elements को भी Parse करके Render करता है।

सामान्‍यत: write() व writeln() Methods को किसी External Resource को Dynamically Current Web Page में Include करने के लिए Use किया जाता है। जब हम इन Methods को Use करके किसी JavaScript File को अपने Web Page में Dynamically Add करना चाहते हैं, तब हमें इस बात को ध्‍यान में रखना होता है कि हम “</script>” Element को String की तरह Specify न करें, क्योंकि ऐसा करने पर ये String, Web Browser को Confuse कर देगा और Web Browser समझेगा कि हमारे Inline JavaScript Code का अन्त हो रहा है, परिणामस्वरूप write() Method के बाद के JavaScript Codes एक प्रकार से Error की तरह दिखाई देंगे। इसे हम निम्नानुसार HTML Code द्वारा समझ सकते हैं:

यदि हम उपरोक्तानुसार write() Method का प्रयोग करते हुए किसी External JavaScript File को <script> Element का प्रयोग करते हुए Current Document Dynamically में Attach करने की कोशिश करें, तो हमें निम्नानुसार Output प्राप्त होता है:

ऐसा Output इसलिए प्राप्त होता है, क्योंकि जब उपरोक्त Web Page का JavaScript Code Run होता है, तो write() Method में </script> Tag की Parsing के समय JavaScript Interpreter को लगता है कि यहीं पर हमारे Web Page के Inline JavaScript Code का अन्त हो रहा है। परिणामस्वरूप हमारा Web Browser </script> Tag के आगे के Content को Normal Content की तरह ही Web Browser में Parse कर देता है।

इस प्रकार की समस्या से बचने का तरीका ये है कि हम Closing </script> Tag के Slash को Backslash के साथ <\/script>तरीके से Specify किया जाए, ताकि JavaScript Interpreter उसे Closing </script> Tag की तरह Treat करते हुए Parse न करे बल्कि एक String की तरह DOM Tree में Add करे। इस Trick को Use करते हुए हम हमारे उपरोक्त Web Page को निम्नानुसार Re-Create कर सकते हैं:

जैसाकि निम्न Output में हम देख सकते हैं कि अब ये Code Normal तरीके से काम कर रहा है और ऐसा इसलिए हो रहा है क्योंकि हमने Closing </script> Tag को “<\/script>” तरीके से Specify किया है।

write() Method को यदि हम पूरा Web Page Load होने के बाद किसी Event के Response में Call करें, तो हमारा पूरा Web Page Content Overwrite हो जाता है। इसे समझने के लिए निम्न उदाहरण देखते हैं:

इस Web Page को Render करने पर हमें निम्नानुसार Output प्राप्त होता है:

लेकिन यदि हम उपरोक्त Web Page को निम्नानुसार Modify करते हुए write() Method को पूरा Web Page Content Load होने के बाद Use करें-

तो जैसाकि हम निम्न Output चित्र में देख सकते हैं-

कि हमें केवल वही Content दिखाई दे रहा है, जो JavaScript Code द्वारा Generate हो रहा है। जो Heading Content Web Page में Static रूप से Specify किया गया था, वह दिखाई नहीं दे रहा है और ऐसा इसी वजह से होता है, क्योंकि write() Method को पूरा Web Page पूरी तरह से Load होने के बाद Call किया गया है।