A Web é um espaço muito dinâmico principalmente devido às características do Javascript. Tão dinâmico que você nem precisa editar o código da página para poder alterar algum detalhe, é possível fazer isso através do console Javascript do navegador – claro que assim que você fechar a página as alterações se perdem, mas para testes é muito melhor do que editar o código, salvar e recarregar a página para ver as alterações ;-).
O objetivo desse post é justamente se habituar a usar essas ferramentas disponíveis para testar e descobrir coisas novas. No Google Chrome/Chromium, o conjunto de ferramentas do desenvolvedor disponíveis é completo, sem ser necessário instalar nenhuma extensão. No Firefox, é provável que você precise instalar o Firebug, que complementa as opções já disponíveis no navegador. O Firebug também possui uma versão para o Chrome, mas não é tão completa quanto o conjunto de ferramentas padrão do navegador.
Vamos a um exemplo. Imagine que você tenha a seguinte página em HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html> <head> <title>Página de testes</title> <style type="text/css"> #teste{ width: 500px; height: 200px; background-color: #AD91DA; color: #FD65CA; } </style> </head> <body> <div id="teste">Teste</div> <body></html> |
Essa é sua página HTML, mas você quer testar outras cores de fundo na DIV “teste” sem ter que editar o código. Simples:
1. abra o console Javascript (no Chrome: Ctrl+Shift+I ou Ctrl+Shift+J; no Firefox: Ctrl+Shift+K; Firebug: clique no ícone da extensão)
2. no console, digite:
document.getElementById('teste').style.backgroundColor = '#C04' <enter> |
Da mesma forma, você pode testar qualquer outro código Javascript no console. O resultado será o mesmo do que se ele estive incluído na sua página, sem no entanto ser necessário alterar os arquivos. Isso é útil para testar ideias sem que elas se “percam” dentro da sua página e fiquem esquecidas, talvez causando bugs.
Esse post foi apenas um aquecimento para os próximos, onde pretendo passar alguns exemplos que podem ser feitos via console, sem a necessidade de um arquivo HTML para implementar (mas como você viu aqui, o resultado será o mesmo). Com isso, esse mini-curso fica mais rápido e fácil de acompanhar, então vamos avançar um pouco mais na sintaxe do Javascript.
Postar um comentário