Introdução Ao Javascript Parte 1

Eu passei algum tempo tentando aprender javascript a alguns anos atrás. Lia, anotava e tentava aplicar. Mas para mim os códigos pareciam longos demais e acabava procurando na internet um código pronto.

Quando me deparei com o jQuery e vi a facilidade de adicionar funcionalidades que a biblioteca proporciona, meu entusiasmo pelo javascript voltou. O que se faz em quatro linhas com o javascript puro pode ser feito em uma com o jQuery. E então nunca mais voltei à raiz, me tornando um entusiasta das facilidades disponíveis por esta biblioteca.

Apesar da facilidade de codificação com o jQuery, a biblioteca apenas adicionou uma espécie de camada que facilita a seleção e manipulação dos elementos através de seletores no estilo CSS, mas no final, usa o javascript puro para funcionar. E nisso o conhecimento que adquiri facilita na hora de criar os códigos, pois tenho uma ideia mais clara sobre o seu funcionamento. E quanto mais avanço nos estudos da biblioteca, mais valorizo o o que aprendi sobre o javascript puro.

Por isso, esta série de tutoriais introduzindo o javascript, será útil tanto para quem ainda não trabalhou com esta linguagem, quanto para quem já utiliza alguma das tantas bibliotecas disponíveis.

Esta série vai percorrer todos os aspectos do javascript permitindo a você no final criar códigos com javascript puro e entender como as bibliotecas funcionam.

Princípio

Além do javascript, outra linguagem muito conhecida é o Java. Indo pelo nome, você até diz que são parentes. E elas tem uma sintaxe parecida, mas as semelhanças param neste ponto. De resto elas têm propósitos totalmente diferentes.

O javascript é uma linguagem cliente-side, isto significa que roda no navegador do usuário. E por isso pode ser desabilitado por este. O que não é tão comum quanto alguns desenvolvedores dizem.

O javascript é a camada de comportamento da página. Adiciona interatividade e dinamismo. Podemos fazer analogia com o turbo do carro. Aumenta a potência, mas o carro vai continuar funcionando mesmo sem ele. Em uma página web deve ocorrer o mesmo. Ela fica mais interessante com javascript, mas deve funcionar mesmo sem ele.

Código não-obstrutivo

Um dos problemas que o advento das bibliotecas javascript ajuda a evitar, é a inserção de código dentro das tags HTML. O código simplesmente não vai funcionar se ocorrer esta mistura.

Já com o javascript puro não existe esta ‘limitação’. E ainda é comum ver códigos assim (tirado de um site feito por um concorrente meu 🙂

Por práticas como esta que javascript puro lembra códigos confusos e misturados.

Primeira lição: nunca adicione javascript diretamente na estrutura do documento. Crie um arquivo separado para o seu código e importe ele no documento HMTL. Ou então adicione os comandos entre as tags head ou depois da body. Com isso a manutenção do código fica mais fácil e o carregamento das páginas mais rápido.

Seja importando um arquivo ou escrevendo o código na própria página, é necessário fazê-lo usando as tags script.

//html5
//html5

No HTML 5, não é necessário informar qual o tipo de script importado.

Sintaxe

Como em grande parte das linguagens de programação, o javascript é case sensitive, sensível a caixa. Se uma variável foi declarada como ‘nome’, ela será tratada durante todo o código desta maneira. Não vale ‘Nome’ nem ‘NOME’.

Apesar de opcional, finalizar as linhas com ponto e vírgula é uma prática aconselhável, principalmente porque em alguns casos o Internet Explorer retorna erro.

Para comentar uma linha basta adicionar no início dela duas barras (//). Para comentar múltiplas linhas de uma vez adicione asterisco e barra onde começa e onde termina o bloco.

Document Object Model

Também conhecido por DOM, é uma plataforma e interface de linguagem neutra que permite programas e scripts dinamicamente acessar e atualizar o conteúdo, estrutura e estilo dos documentos.

Isso cria uma hierarquia entre os elementos de uma página. Um exemplo para explicar este conceito é a estrutura de uma árvore onde existe um tronco e ‘galhos’ descendentes um dos outros, os nós. Ou relacionamento, onde um elemento pai/ancestral possui descendentes e vizinhos.

É importante compreender este modelo para criar códigos simples e legíveis. Então vamos a um exemplo.

Neste código, os elementos head e body são descendentes do elemento html e vizinhos um do outro, enquanto o elemento de parágrafo é descendente do elemento body.

Outro ponto importante sobre o DOM é que o código javascript roda sobre esta árvore do documento. Se o javascript for executado antes da árvore estar pronta ele não surtirá efeito. Por isso que entre as dicas de otimização das páginas esta inserir o código javascript no final da página.

Acessando os elementos da página
Existem três formas básicas de selecionar um elemento na página. Uma é diretamente baseada na estrutura da página, por isso a importância de conhecer o DOM. As outras encontram o elemento pelo nome e identificador.

getElementsByTagName()

Procura na árvore da página e retorna em uma array todas as ocorrências do elemento especificado.

Para capturar o texto do segundo parágrafo é adicionado o seguinte código entre tags script no final da página, pois precisa da estrutura do documento completa:

O objeto document inserido antes do getElementsByTagName faz referência a estrutura da página e é sempre parte integrante na procura. A variável ‘elemento’ recebe uma array com todos os elementos de parágrafo encontrados na página.

A array tem um índice numérico que começa em zero. Então para acessar o segundo elemento é utilizado o número um entre colchetes. Para mostrar o conteúdo inserido entre este elemento de parágrafo, é utilizada a propriedade innerHTML.

Esta forma de acessar um elemento tem a desvantagem de depender da posição deste na estrutura da página. Se for inserido outro parágrafo antes do nosso alvo, o código retorna uma informação errada.

getElementById()

O id atribui um identificador único ao elemento. E não pode haver ids com o mesmo valor em um documento.

getElementsByName()

Para trabalhar com formulários existe este método que procura o elemento do formulário pelo nome e retorna uma array.