Online Code Editor for JavaScript

JavaScript Code Editor and Interpreter for Browser

Online tool to interpret and run JavaScript in the browser, without installing additional programs. The provided code is processed locally, in the browser. Thus, the written code is not sent to a remote server.

This page is meant as a convenience for first steps at programming. If you plan to program in JavaScript, you should set up a development environment for the language, as described here. Alternatively, you can use the embedded console provided by a modern browser (such as Firefox), as described here.

The embedded editor to write the source code uses CodeMirror (version 6). CodeMirror allows choosing between the MIT and GPL3 licenses. In this case, my choice is the MIT license.

Instructions

To create your program, write the code in the provided text box. To run the created code using the JavaScript interpreter, press the button Run. You can also use the shortcut Ctrl Enter or the shortcut Shift Enter to run the code using the keyboard.

For convenience, the output of console.log() is shown in Program Output. You can also view it using your browser console (terminal; shortcut: F12, as described here).

Drawing on a Canvas

This page also provides a canvas for 2D drawing. To use it, you can write the following code to get a reference to the context use as a handle for drawing.

let canvas = document.getElementById("code-canvas")
let context = canvas.getContext("2d")
// Example of drawing a blue rectangle at position (10, 20), with a width of 200
// pixels and a height of 100 pixels.
context.fillStyle = "blue"
context.fillRect(10, 20, 200, 100)

Next, you can use context to draw in the canvas. The results will be shown in Canvas.

Drawing with Turtle Graphics

It is also possible to use the canvas for Turtle Graphics, using a simple implementation created by the author.

let canvas = document.getElementById("code-canvas")
let context = canvas.getContext("2d")
const canvas_width = canvas.width
const canvas_height = canvas.height
const enable_animation = true
let turtle = new Turtle(context, enable_animation)
// (0, 0) corresponds to the center of the canvas in Turtle Graphics.
turtle.setPosition(30, 10)
// Draw a letter F.
turtle.forward(50)
turtle.right(90)
turtle.forward(40)
turtle.backward(40)
turtle.left(90)
turtle.forward(40)
turtle.right(90)
turtle.forward(50)

Turtle graphics have been introduced by the Logo programming language.

Limitation. If animations are enabled, you should not mix drawing in the canvas using context and turtle graphics. If you wish to do so, either:

1. Draw in the canvas first, then use turtle graphics;
2. Disable animations (pass false instead of true for enable_animation). With animations disabled, you can draw in any order.

My implementation for the animation clears the canvas every frame to draw the turtle's head (the green triangle). Thus, it will only preserve the data before the first drawing using turtle graphics.

Editor Settings

The editor have some settings:

• Indent code using TAB?: If the option is marked, TAB will indent the code by one level and Shift TAB will "deindent" the code by one level (it will remove one level of indentation).

  The option is disabled by default due to accessibility concerns. TAB and Shift TAB can be used to browse a page using a keyboard, switching between fields and options in the browser.

  If the option is enabled, the navigation will not be possible normally. To perform it, you can use, respectively, ESC TAB (ESC, then TAB) and ESC Shift TAB (ESC, then Shift TAB).

• Advanced: enable Vim mode?: Experimental option. This option is not recommended for beginners.

  If the option is marked, the text editing will use the modal edition style adopted by the Vim editor.

  The feature uses Codemirror-vim, with MIT license.

Program