Editor Online para Código JavaScript

Editor e Interpretador de Código JavaScript para Navegador

Ferramenta online para interpretação e execução de código JavaScript no navegador, sem instalação de programas adicionais. O processamento do código fornecido é local, no navegador. Assim, o código escrito não enviado para um servidor remoto.

Esta página é fornecida como uma conveniência para primeiros passos em programação. Caso você planeje programar em JavaScript, você deve configurar um ambiente de programação para a linguagem, como descrito aqui. Alternativamente, você pode usar o console embutido por um navegador moderno (como Firefox), como descrito aqui.

O editor integrado para escrita de código-fonte utiliza CodeMirror (versão 6). CodeMirror permite escolher entre as licenças MIT e GPL3. Neste caso, minha opção é pela licença MIT.

Instruções

Para criar seu programa, escreva o código na caixa de texto fornecida. Para executar o código criado usando o interpretador JavaScript, aperte o botão Executar. Você também pode usar o atalho Ctrl Enter ou o atalho Shift Enter para executar o código usando o teclado.

Por conveniência, a saída de console.log() é apresentada em Saída do Programa. Você também pode visualizá-la usando o console (terminal) de seu navegador (teclado de atalho: F12; como descrito aqui).

Desenhando em uma Tela (Canvas)

Esta página também provê um canvas para desenhos 2D. Para usá-lo, você pode escrever o código a seguir para obter uma referência ao contexto (context) usado para desenhar.

let canvas = document.getElementById("code-canvas")
let context = canvas.getContext("2d")
// Exemplo de desenho de um retângulo azul na posição (10, 20), com 200 pixels
// de largura e 100 pixels de altura.
context.fillStyle = "blue"
context.fillRect(10, 20, 200, 100)

Em seguida, pode-se usar context para desenhar no canvas. Os resultados serão exibidos em Canvas.

Desenhando com Gráficos Tartaruga (Turtle Graphics)

Também é possível usar o canvas para Turtle Graphics (gráficos tartaruga), usando uma implementação simples criada pelo autor.

let canvas = document.getElementById("code-canvas")
let context = canvas.getContext("2d")
const largura_canvas = canvas.width
const altura_canvas = canvas.height
const habilitar_animacao = true
let turtle = new Turtle(context, habilitar_animacao)
// (0, 0) corresponde ao centro da tela (do canvas) em Turtle Graphics.
turtle.setPosition(30, 10)
// Desenha uma letra 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 foram introduzidos pela linguagem de programação Logo.

Limitação. Caso se habilite animações, você não deve misturar desenhos no canvas usando context com turtle graphics. Caso você queira misturá-los, você deve:

1. Desenhar primeiro no canvas, depois usar turtle graphics;
2. Desabilitar animações (passe false ao invés de true para habilitar_animacao). Com animações desabilitadas, você pode desenhar em qualquer ordem.

Minha implementação para a animação limpa o canvas a cada quadro para desenhar a cabeça da tartaruga (o triângulo verde). Assim, ela preserverá apenas os dados antes do primeiro desenho usando turtle graphics.

Configurações para o Editor

O editor possui algumas configurações:

• Indentar código usando TAB?: Caso a opção seja marcada, TAB indentará o código em um nível e Shift TAB "desindentará" de um nível (removerá um nível de indentação).

  A opção está desabilitada por padrão por uma questão de acessibilidade. TAB e Shift TAB podem ser usadas para navegar em uma página usando teclado, alterando entre campos e opções no navegador.

  Caso a opção seja habilitada, a navegação não será possível normalmente. Para fazê-la, pode-se usar, respectivamente, ESC TAB (ESC, depois TAB) e ESC Shift TAB (ESC, depois Shift TAB).

• Avançado: habilitar modo Vim?: Opção experimental. Esta opção não é recomendada para iniciantes.

  Caso a opção seja marcada, a edição de texto usará o estilo modal de edição de texto adotado pelo editor Vim.

  A funcionalidade utiliza Codemirror-vim, com licença MIT.

Programa