ऑनलाइन जावास्क्रिप्ट संपादक कैसे बनाएं?

Question

मैं जावास्क्रिप्ट सीख रहा हूं, हालांकि कुछ प्रयोग करने के लिए यह इतना सुविधाजनक नहीं है। आपको एक टेम्पलेट HTML फ़ाइल बनाना है और फिर अपने जेएस कोड को एम्बेड करना है, और उसके बाद HTML फ़ाइल खोलने के लिए ब्राउज़र का उपयोग करें। यहां तक ​​कि आप बस alert("hello world") देखना चाहते हैं। मुझे आश्चर्य है कि ऑनलाइन जावास्क्रिप्ट संपादक बनाना आसान है या नहीं। मूल विचार यह है कि: एचटीएमएल टेक्स्ट-एरिया में, आप सीधे जेएस कोड टाइप करते हैं, इसमें जेएस कोड चलाने के लिए नीचे एक बटन "रन" होता है। अगर इसमें कुछ वाक्यविन्यास त्रुटियां हैं, तो शायद त्रुटि संदेश दिखाएं। उदाहरण के लिए: किसी ने पहले से ही इस तरह बनाया है: http://www.codehouse.com/webmaster_tools/javascript_editor/

मुझे आश्चर्य है कि इसे कैसे बनाया जाए? क्या कोई सामग्री, ब्लॉग इत्यादि है ... इसे कैसे बनाया जाए? धन्यवाद!

Answer 1

क्या आपने http://jsbin.com पर विचार किया है? यह पहले से ही परीक्षण के लिए सबसे प्रमुख जावास्क्रिप्ट ढांचे के विभिन्न संस्करणों से लैस है। इसके अलावा, यह आपके कोड को ऑनलाइन स्टोर करता है और एक छोटा यूआरएल बनाता है ताकि आप उदाहरणों को पास कर सकें, और जल्दी से ब्याज की पिछली वस्तुओं को वापस देख सकें। आप एक दूसरे की सहायता के लिए अक्सर इसका उपयोग करके कई लोगों को देखेंगे।

तुम सच में अपने दम पर काम करना चाहते हैं, तो आप GitHub पर jsbin कांटा कर सकते हैं: http://github.com/remy/jsbin

Answer 2

उपयोग Firebug।

आप किसी भी वेबपृष्ठ में फायरबग खोल सकते हैं, फिर कंसोल टैब के नीचे मनमानी जावास्क्रिप्ट टाइप करें। यह जावास्क्रिप्ट का मूल्यांकन करेगा और परिणाम प्रदर्शित करेगा। यह भी बुनियादी स्वतः पूर्ण हो गया है!

हालांकि, फ़ायरबग का वास्तविक मूल्य इसका डोम टैब है।

आप किसी भी जावास्क्रिप्ट ऑब्जेक्ट को देख सकते हैं और अपनी सभी विधियों और गुणों को देख सकते हैं, जितना चाहें उतना घोंसला। आप ब्राउज़र की पूर्व परिभाषित वस्तुओं (window, document, आदि) का निरीक्षण कर सकते हैं, पृष्ठ पर परिभाषित किसी भी ग्लोबल्स, और यहां तक ​​कि ऑब्जेक्ट्स जो आप कंसोल टैब में बनाते हैं। (परिणाम सूची में प्राप्त ऑब्जेक्ट पर क्लिक करके)।

डोम टैब आपको सभी जानकारी दिखाएगा जो आप संभवतः किसी ऑब्जेक्ट के बारे में चाहते हैं। आप दाईं ओर function शब्द भी माउसओवर कर सकते हैं और फ़ंक्शन के बॉडी को टूलटिप में देख सकते हैं। (और यह ऑटो इंडेंट भी होगा)

एक बार जब आप अपने स्वयं के पेज लिखना शुरू कर देते हैं, तो आप फ़ायरबग के जावास्क्रिप्ट डीबगर का उपयोग कर उन्हें सही तरीके से काम करने में मदद के लिए उपयोग कर सकते हैं।

Answer 3

इंटरैक्टिव अन्वेषणों के लिए मैं या तो इस का उपयोग करें:

http://www.squarefree.com/shell/shell.html

या अगर मैं कोड की एक पूरी गुच्छा में लिखते हैं और फिर से चलाने के लिए यह करना चाहते हैं, मैं (एक ही साइट से) इस का उपयोग कर :

http://www.squarefree.com/jsenv/

Answer 4

jsFiddle^[docs] बहुत शक्तिशाली है और यह सबसे अधिक स्टैक ओवरफ़्लो पर लोकप्रिय है।

Answer 5

CodeMirror 'इंजन' को हाइलाइट करने वाला वाक्यविन्यास है जो jsbin और jsFiddle उपयोग करता है।

Answer 6

मुझे लगता है कि आप कुछ इस तरह कर सकते हैं:

एचटीएमएल

<textarea id="code"></textarea> 

<iframe id="output"></iframe> 

<button id="submit-b" onclick="update()">run</button> 

जावास्क्रिप्ट

function update() 
{ 
var frame = $('#output').get(0); 
var frameDoc = frame.contentDocument || frame.contentWindow.document; 
var w = document.getElementById("code").value; 
document.getElementById('output').contentWindow.document.write(w); 
}