cách tạo trình chỉnh sửa javascript trực tuyến?

Question

Tôi đang học javascript, tuy nhiên không thuận tiện để thực hiện một số thử nghiệm. Bạn phải tạo một tệp HTML mẫu và sau đó nhúng mã js của bạn vào nó, và sau đó sử dụng trình duyệt để mở tệp html. Thậm chí bạn chỉ muốn xem alert("hello world"). Tôi tự hỏi nếu nó dễ dàng để tạo ra một trình soạn thảo javascript trực tuyến. Ý tưởng cơ bản là: trong một vùng văn bản html, bạn chỉ cần nhập mã js trực tiếp, nó có một nút "Chạy" bên dưới để chạy mã js. Nếu nó chứa một số lỗi cú pháp, có thể hiển thị thông báo lỗi. Ví dụ: ai đó đã tạo một trang như sau: http://www.codehouse.com/webmaster_tools/javascript_editor/

Tôi tự hỏi cách tạo điều này? Có bất kỳ tài liệu, blog, vv .. về cách tạo ra điều này? Cảm ơn!

Answer 1

Bạn đã xem http://jsbin.com chưa? Nó đã được trang bị các phiên bản khác nhau của các khuôn khổ javascript nổi bật nhất để thử nghiệm. Hơn nữa, nó lưu trữ mã của bạn trực tuyến và tạo một url ngắn để bạn có thể chuyển các ví dụ xung quanh và nhanh chóng tham khảo lại các mục quan tâm trước đó. Bạn sẽ thấy nhiều người trong chúng ta ở đây sử dụng nó thường xuyên để giúp đỡ lẫn nhau.

Nếu bạn thực sự muốn làm việc một mình, bạn có thể phân nhánh jsbin trên github: http://github.com/remy/jsbin

Answer 2

Sử dụng Firebug.

Bạn có thể mở Firebug trong bất kỳ trang web nào, sau đó nhập Javascript tùy ý ở cuối tab Bảng điều khiển. Nó sẽ đánh giá Javascript và hiển thị kết quả. Nó thậm chí còn có tự động hoàn thành cơ bản!

Tuy nhiên, giá trị thực của Firebug là tab DOM của nó.

Bạn có thể xem bất kỳ đối tượng Javascript nào và xem tất cả các phương thức và thuộc tính của nó, lồng nhau nhiều như bạn muốn. Bạn có thể kiểm tra các đối tượng được xác định trước của trình duyệt (window, document, v.v.), mọi hình cầu được xác định trên trang và thậm chí cả các đối tượng bạn tạo trong tab bảng điều khiển. (bằng cách nhấp vào một đối tượng mà bạn có trong danh sách kết quả).

Tab DOM sẽ hiển thị cho bạn tất cả thông tin bạn có thể muốn về một đối tượng. Bạn thậm chí có thể di chuột qua từ function ở bên phải và xem phần thân của hàm trong một chú giải công cụ. (Và nó cũng sẽ tự động thụt lề)

Khi bạn bắt đầu viết các trang của riêng mình, bạn có thể sử dụng trình gỡ rối Javascript của Firebug để giúp chúng hoạt động chính xác.

Answer 3

Đối với khám phá tương tác tôi sử dụng một trong hai điều này:

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

hoặc nếu tôi muốn gõ vào một bó toàn bộ các mã và sau đó chạy nó, tôi đã sử dụng này (từ cùng một trang web) :

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

Answer 4

jsFiddle^[docs] là rất mạnh mẽ và nó phổ biến nhất trên stack Overflow.

Answer 5

CodeMirror là cú pháp tô sáng 'công cụ' mà jsbin và jsFiddle sử dụng.

Answer 6

Tôi nghĩ rằng bạn có thể làm một cái gì đó như thế này:

HTML

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

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

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

javascript

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); 
}