Blog do Jerônimo

Dois objetos são extremamente importantes no JavaScript: window e document.
O objeto window premite acessar propriedades e métodos relativos à janela toda do navegador. Por exemplo, o método window.resize redimensiona a janela do navegador, se as configurações de segurança permitirem isso.
Já o objeto document é o mais utilizado. Ele corresponde ao corpo do documento HTML em questão. Cada div, tabela, célula de tabela, campo de texto, checkbox, enfim, tudo que forma seu documento é acessível pelo objeto document.

Para pegar um elemento específico de sua página, basta chamar o método getElementById do objeto document. Para isso, é necessário que o elemento que queremos pegar tenha um atributo id definido. Lembre-se que não pode haver mais de um elemento com o mesmo id na mesma página. Há alguns problemas com versões mais antigas do IE, compreenda todo o problema clicando aqui.

Então, para pegarmos, por exemplo, um campo de texto (input type=text) cujo id seja “meu_texto”, basta fazer no JavaScript:
document.getElementById(”meu_texto”)
A partie disso você pode acessar propriedades desse elemento. No caso do nosso exemplo:
document.getElementById(”meu_texto”).value - Acessa a propriedade value do elemento, tanto em leitura como escrita. Para escrita, basta colocar a expressão citada, o sinal de igual, e o novo valor entre aspas. Assim:
document.getElementById(”meu_texto”).value = “Um texto qualquer”
Para acessar o atributo disabled, podemos fazer:
document.getElementById(”meu_texto”).disabled
E assim vai.

Para uma referência completa sobre quais atributos podes acessar, quais permitem leitura e escrita, quais são apenas escrita, etc, recomendo consultar o livro JavaScript - The Definitive Guide, de David Flanagan, 5ª Edição (O’Reilly). Caso não possa ter acesso ao livro, procure referências diversas no seu buscador favorito; mas recomendo dar uma olhada na W3Schools.

Encerro aqui a parte 2 do tutorial. Quando me der na telha escrevo uma parte 3.

A partir de hoje postarei mini-tutoriais de JavaScript com dicas básicas para iniciantes na linguagem. Se você já sabe JavaScript, provavelmente não vale a pena ler. Se você não sabe nada da linguagem e está querendo aprender o básico, talvez seja um bom guia.

O que é JavaScript?

JavaScript é uma linguagem interpretada para criação de scripts de propósito geral. Contudo, é utilizada mais comumente em navegadores como linguagem para manipulação de páginas. Os tutoriais que serão postados aqui, começando por esse, vão se referir justamente à linguagem sendo executada nesse tipo de ambiente: navegadores.

JavaScript tem capacidades de Orientação a Objetos (OO), e é fracamente tipada. E principalmente: JavaScript não tem NADA a ver com a linguagem JAVA, da Sun.

Usando JavaScript em sua página

Para colocar código JavaScript em suas páginas, há basicamente duas formas:

1. Escrever o código dentro do próprio arquivo HTML

   Não é uma opção lá muito elegante, mas é útil. Para fazer isso, basta colocar o código JavaScript desejado dentro de uma tag script. exemplo:

   <script type="text/javascript">
   window.alert("Hello World!");
   </script>

   Como se pode ver acima, é necessário especificar o tipo de script que o navegador deve interpretar com o atributo “type”, com valor igual a “text/javascript”. Antigamente, era usado também um atributo “language” com valor igual a “JavaScript”, mas esse atributo foi deprecado em favor do type pelo W3C.

2. Escrever código em um arquivo separado e importá-lo no HTML

   Esta forma é a mais elegante. Basta escrever seu código JavaScript em um arquivo com extensão “.js”, e importá-lo no HTML assim:

   <script type="text/javascript" src="meu_codigo_javascipt.js"></script>

   Você vai encontrar por aí muitas recomendações que o código JavaScript deve ser importado/escrito no início da página, dentro da tag HEAD. Contudo, aconselho o oposto: colocar todo o código (se possível) no fim da página. Esse meu conselho não é infundado, pois é o que aconselha o guia de boas práticas para melhoria de performance de páginas web escrito pelo Yahoo!.

Escrevendo o Hello World em JavaScript

Para colocar algum código a rodar, vamos fazer um Hello World. O exemplo dado acima é um bom código para isso:

window.alert("Hello World!");

Aqui, podemos ver um importante objeto, o “window”. O objeto window refere-se à janela do navegador na qual o script está sendo executado. Então, chamamos o método “alert”, um método do objeto window que serve para mostrar uma popup na tela com uma mensagem e um botão de “Ok”. O parâmetro é a mesagem que a janela deve exibir.

Para ver esse código rodando, clique aqui.

Encerro aqui a parte 1 do mini-tutorial de JavaScript. Em breve posto a parte 2.