Como testar códigos JavaScript online ~ Visual Dicas

Resultado de imagem para jsfiddle

Testar códigos HTML, CSS e JavaScript online

Se você já é programador ou está aprendendo JavaScript precisa conhecer o aplicativo jsFiddle. Esta ferramenta possibilita a verificação de códigos HTML, CSS e JavaScript com visualização em tempo real. Após os testes e correções dos códigos de programação, você poderá copiá-los definitivamente para os documentos do seu site.

JSFiddle é um ambiente de desenvolvimento integrado online que permite aos usuários criar e executar códigos escritos em JavaScript.

O jsFiddle está se expandindo e hoje já oferece suporte as principais bibliotecas JavaScript, como MooTools, jQuery, YUI, Prototype, Dojo, Glow, Processing, ExtJS, Raphael, Ajax, Right JS, AngularJS, entre outras.

Sua interface é simples e intuitiva, bastando selecionar a biblioteca desejada e preencher os campos de HTML, CSS e Javascript com os dados desejados para testar um script. Clicando no botão “Run”, é possível ver o script em ação, sem a necessidade de criar novos arquivos ou de utilizar vários programas para visualizá-lo.

Observação: Não deixe de ler também os artigos (2 simuladores muito bons):

Acessando e utilizando o jsFiddle

Acesse o site: jsFiddle

Observe que o aplicativo possui os espaços: HTML, para escrever códigos HTML, e os espaços para escrever os código em JavaScript e CSS.

Para facilitar o entendimento, vamos criar um exemplo onde mostraremos passo a passo para você testar o funcionamento de um script no aplicativo.

1) Vamos digitar o código HTML (opcional) do nosso exemplo:

<h2 id="demo">Este texto pode ser azul ou vermelho!</h2>
<br>

<a href="#" class="btn" onclick="mudaCor('blue');">Texto azul</a>
<a href="#" class="btn" onclick="mudaCor('red');">Texto vermelho</a>

Veja como fica o código no aplicativo.

2) Se desejar, digite o código CCS (opcional). Abaixo segue o código CCS do nosso exemplo:

.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}

No aplicativo:

3) Agora vamos digitar o código JavaScript. Veja abaixo o código do nosso exemplo:

function mudaCor(novaCor) {
var x = document.getElementById("demo");
x.style.color = novaCor;
}

No aplicativo:

4) ATENÇÂO: Agora é necessário configurar as opções do código JavaScript que você deseja executar. Nesta fase é necessário escolher a biblioteca a ser utilizada, e se o código estará no head, no body ou se ele será executado em outro lugar do código HTML. Não configurando estas opções, o seu código poderá não irá funcionar.

Clique no botão [JAVASCRIPT].

Defina a linguagem. No nosso exemplo vamos manter JavaScript, que é o que nós queremos testar.

Defina a biblioteca utilizada. Como não iremos utilizar nenhuma biblioteca (Freamework), vamos manter No-Library (pure JS), ou seja, JavaScript puro.

Agora devemos definir se o local onde o código JavaScript será executado. Geralmente escolha head ou body. No nosso exemplo vamos escolher head. Isso significa que o nosso código JavaScript estará localizado entre as tags <head> </head> do código HTML de uma página Web.

Se você não alterar este item, o código provavelmente não irá funcionar.

5) Após ter configurado as opções do JavaScript, clique em [Run] para ver o resultado do teste.

6) Veja então o resultado do seu teste. Faça as correções necessárias até atingir o resultado esperado.

Compartilhando seus códigos

Clique em [Save].

Obs.: Se você se cadastrou no site e estiver logado, seu código ficará armazenado no banco de dados do seu perfil.

Clique em [Embed]. Selecione Ligth (para inserir em um site com fundo claro) ou Dark (com fundo escuro). Clique em [Prefer iframe?].

Agora copie o código e cole na página web que desejar.

Veja como ficou o compartilhamento do nosso código:

Outros recursos

O botão “Fork”, por exemplo, cria um novo fiddle do zero a partir da revisão do fiddle que está sendo editado.

A opção “Tiddy” alinha os códigos de forma apropriada.

Como se ainda não fosse o suficiente, ainda há a opção de discussão, permitindo ao desenvolvedor compartilhar suas dúvidas e sugestões com a comunidade.