Curso de Javascript (parte 4)

Share

Após um bom tempo sem publicar nada desde o último post da série, hoje continuamos com os tutoriais de Javascript apresentando algumas ferramentas que são muito úteis para qualquer desenvolvedor Web.

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>
<!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. o/