PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

12/08/2017

Como testar códigos JavaScript online

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.

image

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.

image

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.

image

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:

image

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:

image  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].

image

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

image

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

image

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.

image

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

image

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

image

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.

image

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

image

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

image

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.

image

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

image

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.

image

image

Se cadastrando no site

Se você se cadastrar no no site JSFiddle, poderá criar um banco de dados com todos os seus códigos testados.

Para se cadastrar, clique em [Sign in].

image

Após estar cadastrado e logado, clique em [Dashboard] para ver todos os seus códigos salvos.

image

Para editar ou compartilhar o código, clique no link como mostra a figura abaixo.

image

byALF

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics