![Resultado de imagem para jsfiddle](https://pbs.twimg.com/profile_images/699501982004965376/c5W1Wk5q.png)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIUXghgulvrLV24w1z2-GJLAfvBB8RnbZ6KCngF8XlhRaxV4tjLh1pzp2oKX_FdsRfTDzDfDtXUu_Sm6rdT5H7JC5sHM5f-AxFSYBUs4tDhyphenhyphent3Wz0tlzPkriQEyknGotILP6r58dXhyphenhyphenac/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMj1z45Pe8vPdIeLXZjWTOUvrgry7MBTDL-16_BAcWbTgNvK4rPJQ7wZdhyphenhyphenh0lM3YVVkWtlJayrzHrler0aRwOimHcqjrBvERmsbUcncs0lXFnNyNBn-F3fZ_Gn59cn1t-5-MWKFIND4/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9XuTEiTCLKG_4LXNbhy-qIEYfR8uNorSU9SFVKwOYD3aflCPKy6LpIuxR9GSod4b8l0Z401x58iv7GGGOA2jWpVjcomrudl_XmVHL8138GTZ05QbeS6dFkIJqJLYV5S-j6E8o_FWMAQ/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObQ1nrwTQHpjbh4IPuBmu6BecyxpGol1J4xThc0iTXzjxWjrzY799Cx3j9GsH8evBJKxUhqdZqipUwgXW8Tfook6qxU4wj3SBDL4sfA_ULccLNcAtZba7PXSIqi5bhet0RI802SHWV20/?imgmax=800)
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].
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJaZUQJnzOQeSGkn5VGTG-rEDexIfQ-lUdsEFWj673nCn8eiyfir45raLN4Vs1UPVCzxb5D7ZdXg3rlZJus7sv0FShbdGMTA8o6lay72hxFAg3kOAZLZIn8WD4QNpu8O7jyA13YKb92lo/?imgmax=800)
Defina a linguagem. No nosso exemplo vamos manter JavaScript, que é o que nós queremos testar.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS3e17SUmNa7xFhwA8iardFyKcCqrJ4mJvdcOz2gbFVlKSCfxYEqAerBhy4Y870CeRRXbSjAmoHV63mt55VPPFmZI_-sNYwGA1IHNMqpcCM7rDiJTgSf__o4gem-TY_ItE82rv4QelHvU/?imgmax=800)
Defina a biblioteca utilizada. Como não iremos utilizar nenhuma biblioteca (Freamework), vamos manter No-Library (pure JS), ou seja, JavaScript puro.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbChk-d46XjK7EeJk7hUNn7g6Rju32I_YvW032WSZRQWW4xw1w6rjM2K0mH_YwnLgYttGp8wt_y3TzgnMVL8by79ozoIGDbsPtFvdVMQ6GoCmI60O7uIL79LpUygbwkrMgUn_YyzOA-Lg/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHPNP_WHo7W6VHzg8xuKIrV5ujlTq0lJV2sgdWiFU7ekEZ06g39GVYi_FPIAWq1ZlantEOJby58N6JksRWoUBtPOSHR1XHvBtiaWt5gF17d4e0zYfy8SvDwm9IbvIA0A8j47XWyc-0HlE/?imgmax=800)
5) Após ter configurado as opções do JavaScript, clique em [Run] para ver o resultado do teste.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7F-C8Y5vt-XLAiNXU6o9rs2097hWOzx7HgaS_u04aeIr81QdZocSaiPHyQANmRbQ6yFp3l3QEQodpB9eCLqW7cxCF6H_h8YhPdfgUaiS9eeQtSLTABDLZ0Ffcz0BGUac_rRrHzc6-tw/?imgmax=800)
6) Veja então o resultado do seu teste. Faça as correções necessárias até atingir o resultado esperado.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEvfJIcFTTR2aB2Q7YMjpd6jo5PcREZdDT0p2ZxeGYMjYPi8q4-WacEW5HhhVtVBrWLMjci-si9oJdkKANkWIFq9Dj4TxQjaNaQqQ0KJEnkilUEUKc6l1_GCyfBQ7_w2ZGm51pELL6Phg/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuDV5OLAs3X5XBGKrBoIf8BOw8kJZ-uR22WRCgdr6qfgwo3nxK0bCX0iFl938jFOfNmm3goNsNeTfmWiUXqyhrAafXFI_hulXHrfTFxshhDRYiMeP4rtTChG3lDpPnlRk3N4PvRbMlKM/?imgmax=800)
Clique em [Embed]. Selecione Ligth (para inserir em um site com fundo claro) ou Dark (com fundo escuro). Clique em [Prefer iframe?].
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfbsA79o5844ouJPN2kY9NGMd1lhu29ZBbIGT-N-iitMH7-6daIVtOdJJwFuWCwfU5KH1dXBNtlnS4jbTC5ZQyPdQrkMzhBOsiBUkNwYuc9Vr5ZlKRf2N0_xFn8ZKoQJzz_bNbGIfWbs/?imgmax=800)
Agora copie o código e cole na página web que desejar.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNDHFn7GTdlfkwyS-99irMHJ8w2rQ5SJUZpSpWk2F4WBJAJiJbdsU2mKoyL20KSunVhCZXPwk5OyiMke30WUTGYubmExDGZN2Tx_hQNcaBh_l7IuJAY2hxCZUKPlyHbM20jgivK1QL2o4/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FTgiJ651KTAgGI_d9JuRb5Z-FauiCGx9xFjZGf4XmEWkHcIO0n32NouwVypgDMNS0wbl8md0m7yyVkuUQx0IvNJhUL0yANSzkSkNqGaPOVuVAVz4qNWq1VffZvMz9l0rAtXujk8kVE8/?imgmax=800)
A opção "Tiddy" alinha os códigos de forma apropriada.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikorKHOL2hV6noGB_GtPGZz3hd9MiwxoRwZ2hsqeRdpMi7A7J55BqnYVHR9BCR7EY3e6leU4L2_SBMzmkLBxXDkgvUYEWdnU9j66nuFSI4cVgKJ173UsHvt2hAuN0x-T9zaGi877XOCDI/?imgmax=800)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQpXShiPKrGF-e5LkhiaDAhLfIMFlLIdgvZWoDbLJdQu2MjEzwBDS18IP_l8AIoqcIqu7D_HvlAMjmjpAzE9EejBvIBMGB_CGzOopJrs-C8ylYCyl6g4j5k0jbVaDP77aVrKIWbzC0P0/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin6591Ve4rwFqRNd3lIirCSPn4SfML70xMM7VPzPLFbLTOopPcXfAvFGL7nxsg2KzHcHzbnVrxwBXtbwTRsplx4P6-0PvgM46QRp3dKEmSqMsJIy8RArFIa23BIWyd7eA_m4PmjoXX82w/?imgmax=800)
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 image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxbzwA3TD-7w9b1KfJxghlXHmDPV3xk7tKLcxILVuCtM0gvh-loCvi-_TnMzXNmN1Xg-zXuLs7tXkNxly9xZD8nATPGF2DYgA6jQksz0V-HSF13IkFczULKWsMZBa6-UiTCC_Cze-JRU/?imgmax=800)
Após estar cadastrado e logado, clique em [Dashboard] para ver todos os seus códigos salvos.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WNRQDGjD1-r2CUt9dKkB-AoALu7kYAk-Mhyphenhyphenwtg0Oyx_BTEvLxZnvmc4SwsO48htOzHWwRKm3X_qmdljjLjpTVMuWpQGUYIXb6Wka5nY-VTtii4wSzzab1RsDVGjOXRI9xC_IymSOoUM/?imgmax=800)
Para editar ou compartilhar o código, clique no link como mostra a figura abaixo.
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQsBOtJS8i92nXsOkpJQ43kqZqztQJHmcAoxwqQ0V0-042Tcomin8UZD1iFVj3ERC4Vwjt41u1_21e-kZtSYx9WA-K26UQPzrxEGWN8R7TNz5uxb3QKPFcVvq08j7LnC4SR2GiY4FSIqg/?imgmax=800)
byALF
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t4-b1EY03WvLydTGz-hMRehblsCW65QGfC6eoyQ_GDanHxDfcIp3-3_fna0OMFwOtqQeOdrdXg516SRqLjr0dHBKs-x3sNW3Fp7VKZ-8I_sEXj7pZczYK0C8QF9WBV9qh5aNAzH_JpvjqBfvHnC0oo5pb1Qd9lrhZ6d87spZT82IcHBFOe=s0-d)