Diferenças entre utilizar var ou no

Como dissemos, em Javascript temos liberdade para declarar ou não as variáveis com a
palavra var, mas os efeitos que conseguiremos em cada caso serão distintos. Na verdade,
quando utilizamos var, estamos fazendo com que a variável que estamos declarando seja local
ao âmbito onde se declara. Por outro lado, se não utilizamos a palavra var para declarar uma
variável esta será global a toda a página, seja qual for o âmbito no qual tenha sido declarada.
No caso de uma variável declarada na página web, fora de uma função ou de qualquer outro
âmbito mais reduzido, é indiferente se se declara ou não com var, desde um ponto de vista
funcional. Isto é devido a que qualquer variável declarada fora do âmbito global a toda a
página. A diferença pode ser apreciada em uma função por exemplo, já que se utilizamos var a
variável será local à função e se não o utilizamos , a variável será global à página. Esta
diferença é fundamental na hora de controlar corretamente o uso das variáveis na página, já
que se não o fazemos em uma função poderíamos sobrescrever o valor de uma variável,
perdendo o dado que pudesse conter previamente.
<SCRIPT>
var numero = 2
function minhaFuncao (){
numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//chamamos a funcao
minhaFuncao()
document.write(numero) //imprime 19
</SCRIPT>
Neste exemplo, temos uma variável global à página chamada numero, que contém um 2.
Também temos uma função que utiliza a variável numero sem a ter declarado com var, pelo
que a variável numero da funcao será mesma variável global numero declarada fora da função.
Em uma situação com esta, ao executar a função se sobrescreverá a variável numero e o dado
que havia antes de executar a função se perderá.

Âmbito das variáveis

Chama-se âmbito das variáveis ao lugar onde estas estão disponíveis. Em geral,
quando declaramos uma variável fazemos com que esteja disponível no lugar onde se foi
declarado, isto ocorre em todas as linguagens de programação e como javascript se define
dentro de uma página web, as variáveis que declaremos na página estarão acessíveis
dentro dela. Deste modo, não poderemos acessar às variáveis que tenham sido definidas em
outra página. Este é o âmbito mais habitual de uma variável e chamamos a este tipo de
variáveis globais à página, mesmo que não seja o único, já que também poderemos declarar
variáveis em lugares mais dimensionados.
Variáveis globais
Como dissemos, as variáveis globais são as que estão declaradas no âmbito mais amplo
possível, que em Javascript é uma página web. Para declarar uma variável global à página
simplesmente faremos em um script, com a palavra var.
<SCRIPT>
var variávelGlobal
</SCRIPT>
As variáveis globais são acessíveis desde qualquer lugar da página, ou seja, a partir do script
onde foi declarado e todos os demais scripts da página, incluindo os que manejam os eventos,
como o onclick, que já vimos que podia ser incluído dentro de determinadas etiquetas HTML.
Variáveis locais
Também poderemos declarar variáveis em lugares mais dimensionados, como por exemplo,
uma função. A estas variáveis chamaremos de locais. Quando se declarem variáveis locais
somente poderemos acessá-las dentro do lugar aonde tenha sido declaradas, ou seja, se
havíamos declarado em uma função somente poderemos acessá-la quando estivermos nessa
função.
As variáveis podem ser locais em uma função, mas também podem ser locais a outros
âmbitos, como por exemplo, um loop. Em geral, são âmbitos locais qualquer lugar
dimensionado por chaves.
<SCRIPT>
function minhaFuncao) (){
var variavelLocal
}
</SCRIPT>
No script anterior declaramos uma variável dentro de uma função, pelo qual esta variável
somente terá validade dentro da função. Pode-se ver as chaves para dimensionar o lugar onde
está definida essa função ou seu âmbito.
Não há problema em declarar uma variável local com o mesmo nome que uma global, neste
caso a variável será visível desde toda a página, exceto no âmbito onde está declarada a
variável local já que neste lugar esse nome de variável está ocupado pela local e é ela quem
tem validade. Resumindo, em qualquer lugar da página, a variável que terá validade é a
global. Menos no âmbito onde está declarada a variável local, que será ela que vai ter

validade.
<SCRIPT>
var numero = 2
function minhaFuncao (){
var numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
</SCRIPT>
Um conselho para os principiantes poderia ser não declarar variáveis com os mesmos nomes,
para que nunca tenha confusão sobre qual variável é a que tem validade em cada momento.

Variáveis Javascript

Uma variável é um espaço em memória onde se armazena um dado, um espaço onde
podemos salvar qualquer tipo de informação que necessitemos para realizar as ações de
nossos programas. Por exemplo, se nosso programa realiza somas, será muito normal
guardarmos em variáveis as distintas parcelas que participam na operação e o resultado da
soma. O efeito seria algo parecido a isto.
parcela1 = 23
parcela2 = 33
soma = parcela1 + parcela2
Neste exemplo temos três variáveis, parcela1, parcela2 e soma, onde guardamos o resultado.
Vemos que seu uso para nós é como se tivéssemos um apartado onde salvar um dado e que
se pode acessa-los colocando somente seu nome.

Os nomes das variáveis devem ser construídos com caracteres alfanuméricos e o caractere
sublinhado (_). A parte disso, há uma série de regras adicionais para construir nomes para
variáveis. A mais importante é que tem de começar por um caractere alfabético ou sublinhado.
Não podemos utilizar caracteres raros como o signo +, um espaço ou um $. Nomes admitidos
para as variáveis poderiam ser:
Idade
PaísDeNascimento
_nome
Também há que evitar utilizar nomes reservados como variáveis, por exemplo não poderemos
chamar a nossa variável palavras como return ou for, que já veremos que são utilizadas para
estruturas da própria linguagem. Vejamos agora alguns nomes de variáveis que não está
permitido utilizar
12meses
seu nome
return
pe%pe
Declaração de variáveis
Declarar variáveis consiste em definir e de passo informar ao sistema de que se vai utilizar
uma variável. É um costume habitual nas linguagens de programação definir as variáveis que
serão utilizadas nos programas e para isso, seguem-se algumas regras restritas. Porém,
javascript ultrapassa muitas regras por ser uma linguagem mais livre na hora de programar e
um dos casos no qual outorga um pouco de liberdade é na hora de declarar as variáveis, já
que não estamos obrigados a fazê-lo, ao contrário do que acontece na maioria das linguagens
de programação.
De qualquer forma, é aconselhável declarar as variáveis, além de um bom costume e para isso
Javascript conta com a palavra var. Como é lógico, utiliza-se essa palavra para definir a
variável antes de utilizá-la.
var operando1
var operando2
Também pode-se atribuir um valor à variável quando se está declarando
var operando1 = 23
var operando2 = 33
Também se permite declarar várias variáveis na mesma linha, sempre que se separem por
vírgulas.
var operando1,operando2

Sintaxe Javascript

A linguagem Javascript tem uma sintaxe muito parecida a de Java por estar baseado
nele. Também é muito parecida a da linguagem C, de modo que se o leitor conhece alguma
destas duas linguagens poderá manejar com facilidade com o código. De qualquer forma, nos
seguintes capítulos vamos descrever toda a sintaxe com detalhes, para que os novatos não
tenham nenhum problema com ela.
Comentários
Um comentário é uma parte de código que não é interpretada pelo navegador e cuja utilidade
radica em facilitar a leitura ao programador. O programador, a medida que desenvolve o script,
vai deixando frases ou palavras soltas, chamadas comentários, que ajudam a ele ou a qualquer
outro a ler mais facilmente o script na hora de modificá-lo ou depurá-lo.
Já foi visto anteriormente algum comentário Javascript, mas agora vamos revê-los de novo.
Existem dois tipos de comentários na linguagem. Um deles, a barra dupla, serve para
comentar uma linha de código. O outro comentário podemos utilizar para comentar várias
linhas e se indica com os signos /* para começar o comentário e */ para terminá-lo. Vejamos
uns exemplos.

<SCRIPT>
//Este é um comentário de uma linha
/*Este comentário pode se expandir
por várias linhas.
As que quiser*/
</SCRIPT>
Maiúsculas e minúsculas
Em javascript se deve respeitar as maiúsculas e as minúsculas. Se nos equivocamos ao utilizálas
o navegador responderá com uma mensagem de erro de sintaxe. Por convenção os nomes
das coisas se escrevem em minúsculas, salvo que se utilize um nome com mais de uma
palavra, pois nesse caso se escreverão com maiúsculas as iniciais das palavras seguintes à
primeira. Também se pode utilizar maiúsculas nas iniciais das primeiras palavras em alguns
casos, como os nomes das classes, apesar de que já veremos mais adiante quais são estes
casos e o que são as classes.
Separação de instruções
As distintas instruções que contém nossos scripts devem ser separadas convenientemente para
que o navegador não indique os correspondentes erros de sintaxe. Javascript tem duas
maneiras de separar instruções. A primeira é através do caractere pontoe vírgula (;) e a
segunda é através de uma quebra de linha.
Por esta razão, as sentenças Javascript não necessitam acabar em ponto e vírgula a não ser
que coloquemos duas instruções na mesma linha.
De qualquer forma, não é uma idéia ruim se acostumar a utilizar o ponto e vírgula depois de
cada instrução, pois outras linguagens como Java ou C obrigam a utilizá-las e estaremos nos
acostumando a realizar uma sintaxe mais parecida à habitual em torno de programações
avançadas.

Ocultar scripts em navegadores antigos

Já vimos que Javascript se implementou a partir de Netscape 2.0 e Internet Explorer 3.0,
inclusive existem navegadores que funcionam em sistemas onde somente se pode visualizar
texto e portanto determinadas tecnologias, como esta linguagem, estão fora do seu alcance.
Sendo assim, nem todos os navegadores do web compreendem Javascript. Nos casos em não
se interpretam os scripts, os navegadores assumem que o código destes é o texto da própria
página web e como consequência, apresentam os scripts na página web como se tratasse de
um texto normal. Para evitar que o texto dos scripts se escreva na página quando os
navegadores não os entendem, temos que ocultá-los com comentários HTML (<!-comentario
HTML -->). Vejamos com um exemplo como se deve ocultar os scripts.
<SCRIPT><!--
Código Javascript
//-->
</SCRIPT>
Vemos que o inicio do comentário HTML é idêntico a como o conhecemos no HTML, porém o
fechamento do comentário apresenta uma particularidade, que começa por duas barras
inclinadas. Isto é devido a que o final do comentário contém vários caracteres que Javascript
reconhece como operadores e ao tratar de analisá-los lança uma mensagem de erro de
sintaxe. Para que Javascript não lance uma mensagem de erro se coloca antes do comentário
HTML essa barra dupla, que não é mais que um comentário Javascript, que conheceremos
mais adiante quando falarmos de sintaxe.
O início do comentário HTML não é necessário comentá-lo com a barra dupla, dado que
Javascript entende bem que simplesmente se pretende ocultar o código. Um esclarecimento a
este ponto: se colocássemos as duas nesta linha, se veriam em navegadores antigos por estar
fora dos comentários HTML. Os navegadores antigos não entendem as etiquetas <SCRIPT> ,
portanto não as interpretam, tal como fazem com qualquer etiqueta que desconhecem.
<NOSCRIPT>
Existe a possibilidade de indicar um texto alternativo para os navegadores que não entendem
Javascript, para lhes informar de que nesse lugar deveria executar um script e que a página
não está funcionando com 100% de suas capacidades. Também podemos sugerir aos visitantes
que atualizem seu navegador a uma versão compatível com a linguagem. Para isso utilizamos
a etiqueta <NOSCRIPT> e entre esta etiqueta e seu correspondente de fechamento podemos
colocar o texto alternativo ao script.
<SCRIPT>
código javascript
</SCRIPT>
<NOSCRIPT>
Este navegador não compreende os scripts que se estão executando, você deve atualizar sua
versão de navegador a uma mais recente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://

Maneiras de executar script

Existem duas maneiras de executar scripts na página. A primeira destas maneiras se trata
de execução direta de scripts, a segunda é uma execução como resposta à ação de um
usuário. Veremos agora cada uma delas.
Execução direta
É o método mais básico de executar scripts. Neste caso se incluem as instruções dentro da
etiqueta <SCRIPT>, tal como comentamos anteriormente. Quando o navegador lê a página e
encontra um script vai interpretando as linhas de código e vai executando uma depois da
outra. Chamamos a esta maneira execução direta, pois quando se lê a página se executam
diretamente os scripts.
Este método será o que utilizemos preferentemente na maioria dos exemplos deste livro.
Resposta a um evento
É a outra maneira de executar scripts, mas antes de vê-la devemos falar sobre os eventos. Os
eventos são ações que realiza o usuário. Os programas como Javascript estão preparados para
apanhar determinadas ações realizadas, neste caso sobre a página, e realizar ações como
resposta. Deste modo se podem realizar programas interativos, já que controlamos os
movimentos do usuário e respondemos a eles. Existem muitos tipos de eventos distintos, por
exemplo, o click do mouse, a seleção de texto da página, entre outros.
As ações que queremos realizar como resposta a um evento devem ser indicadas dentro do
mesmo código HTML, mas neste caso se indicam em atributos HTML que se colocam dentro da
etiqueta que queremos que responda às ações do usuário. No capítulo em que vimos algum
exemplo rápido já comprovamos que se quiséssemos que um botão realizasse ações quando
se clicasse sobre ele, devíamos indicá-las dentro do atributo onclick do botão.
Comprovamos então, que se pode introduzir código Javascript dentro de determinados
atributos das etiquetas HTML. Veremos mais adiante este tipo de execução em profundidade e
os tipos de eventos que existem.

A linguagem Javascript

Nesta parte do livro vamos conhecer a maneira de trabalhar com Javascript, como incluir
scripts e ser compatível com todos os navegadores. Muitas idéias do funcionamento de
Javascript já foram descritas nos capítulos anteriores, mas com o objetivo de não deixarmos
nada solto no ar, vamos tratar de reforçar a partir daqui todos os dados mais importantes
desta linguagem.
Javascript se escreve no documento HTML
O mais importante e básico que podemos destacar neste momento é que a programação de
Javascript se realiza dentro do próprio documento HTML. Isto quer dizer que na página se
misturam as duas linguagens, e para que estas duas linguagens possam ser misturadas sem
problemas temos que incluir alguns delimitadores que separam as etiquetas HTML das
instruções Javascript. Estes delimitadores são as etiquetas <SCRIPT> e </SCRIPT>. Todo o
código Javascript que colocarmos na página há de ser introduzido entre estas duas etiquetas.
Em uma mesma página podemos introduzir vários scripts, cada um que poderia se introduzir
dentro das etiquetas <SCRIPT> distintas. A colocação destes scripts é indiferente, à princípio
dá no mesmo aonde coloca-los, mas em determinados casos esta colocação sim que será
muito importante. Em cada caso, e chegado o momento isto será informado
convenientemente.
Também se pode escrever Javascript dentro de determinados atributos da página, como o
atributo onclick. Estes atributos estão relacionados com as ações do usuário e são chamados
de manejadores de eventos.
Vamos ver no próximo capítulo mais detalhadamente estas duas maneiras de escreve

Efeitos rápidos com Javascript

Antes de aprofundarmos na matéria, podemos ver uma série de efeitos rápidos que se podem
programar com Javascript. Isto, pode nos dar uma idéia más clara e exata das capacidades e
da potência da linguagem na hora de percorrer os próximos capítulos.
Abrir uma janela secundária
Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante atrativas.
Por exemplo podemos ver como abrir uma janela secundária sem barras de menus que mostre
o buscador Google. O código seria o seguinte:
<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>
Podemos ver o exemplo em funcionamento aqui.
Uma mensagem de boas vindas
Podemos mostrar uma caixa de texto emergente ao terminar de carregar o portal de nosso site
web, que poderia dar as boas vindas aos visitantes.
<script>
window.alert("Bem-vindo ao meu site web. Obrigado...")
</script>
Podemos ver o exemplo em uma página a parte.
Data atual
Vejamos agora um simples script para mostrar a data de hoje. Às vezes é muito interessante
mostrá-la nas webs para dar um efeito de que a página está "ao dia", ou seja, está atualizada.
<script> document.write(new Date()) </script>
Estas linhas deveriam ser introduzidas dentro do corpo da página no lugar onde quisermos que
apareça a data da última atualização. Podemos ver o exemplo em funcionamento aqui.
Nota: Um detalhe a destacar é que a data aparece em um formato um pouco raro, indicando também a
hora e outros atributos da mesma, mas já aprenderemos a obter exatamente o que desejarmos no
formato correto.
Botão de voltar
Outro exemplo rápido pode ser visto a seguir. Trata-se de um botão para voltar para trás,
como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de código
que mistura HTML e Javascript para criar este botão que mostra a página anterior no histórico,
se é que havia.
<input type=button value=Atrás onclick="history.go(-1)">
O botão será parecido ao seguinte. Podemos clicá-lo para ver seu funcionamento (deveria nos

levar à página anterior).
Como diferença com os exemplos anteriores, há que destacar que neste caso a instrução
Javascript se encontra dentro de um atributo de HTML, onclick, que indica que essa instrução
tem de ser executada como resposta ao clicar no botão.
É possível comprovar a facilidade com a qual se podem realizar algumas ações interessantes, e
existiriam muitas outras mostras, mas que reservamos para capítulos posteriores.

Versões de navegadores e de Javascript

Também é apropriado introduzir as distintas versões de Javascript que existem e que
evolucionaram em conjunto com as versões de navegadores. A linguagem foi avançando
durante seus anos de vida e incrementando suas capacidades. À princípio podia realizar muitas
coisas na página web, mas tinha poucas instruções para criar efeitos especiais. Com o tempo
também o HTML foi avançando e foram criadas novas características como as camadas, que
permitem tratar e planificar os documentos de maneira distinta. Javascript também avançou e
para manejar todas estas novas características foram criados novas instruções e recursos. Para
resumir vamos comentar as distintas versões de Javascript:
• Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de instruções
e funções, quase todas as que existem agora já se introduziram no primeiro padrão.
• Javascript 1.1: É a versão de Javascript que foi desenhado com a chegada dos
navegadores 3.0. Implementava pouco mais que sua versão anterior, como por
exemplo, o tratamento de imagens dinamicamente e a criação de arrays.
• Javascript 1.2: A versão dos navegadores 4.0. Esta tem como desvantagem que é um
pouco distinta em plataformas Microsoft e Netscape, já que ambos navegadores
cresceram de distinto modo e estavam em plena luta no mercado.
• Javascript 1.3: Versão que implementam os navegadores 5.0. Nesta versão foram
limitadas algumas diferenças e asperezas entre os dois navegadores.
• Javascript 1.5: Versão atual, no momento de escrever estas linhas, que implementa
Netscape 6.
• Por este lado, Microsoft também foi evoluindo até apresentar sua versão 5.5 d

Usos de Javascript

Vejamos brevemente alguns usos desta linguagem que podemos encontrar na web para
termos uma idéia das possibilidades que tem.
Para começar, podemos ver páginas cheia de efeitos super interessantes sobre Javascript, que
chegam a assemelhar-se à tecnologia Flash.
Por outro lado, podemos encontrar dentro de Internet muitas aplicações de Javascript muito
mais sérias, que fazem com que uma página web se converta em um verdadeiro programa
interativo de gestão de qualquer recurso. Também podemos ver exemplos dentro de qualquer
página um pouco complexa, quando passamos por sites que tenham uma calculadora ou um
conversor de divisas, veremos que em muitos casos foi realizado com Javascript.
Na verdade é muito mais habitual encontrar Javascript para realizar efeitos simples sobre
páginas web, ou no tão simples, como podem ser rollovers (que muda uma imagem ao passar
o mouse por cima), navegadores desdobráveis, abertura de janelas secundárias, etc. Podemos
nos atrever a dizer que esta linguagem é realmente útil para estes casos, pois estes típicos
efeitos têm a complexidade justa para ser implementados em questão de minutos sem
possibilidade de erros.
O que é necessário
Para programar em Javascript necessitamos basicamente o mesmo que para programar

páginas web com HTML. Um editor de textos e um navegador compatível com Javascript. Um
usuário de Windows possui de saída todo o necessário para poder programar em Javascript,
visto que dispõe dentro de sua instalação típica de sistema operativo, de um editor de textos,
o Bloco de notas, e de um navegador: Internet Explorer.
Usuários de outros sistemas podem encontrar em Internet facilmente as ferramentas
necessárias para começar em páginas de download de software como Tucows.
Uma recomendação em relação ao editor de textos. Trata-se de que, apesar do Bloco de Notas
ser suficiente para começar, talvez seja muito útil contar com outros programas que nos
oferecem melhores prestações na hora de escrever as linhas de código. Estes editores
avançados têm algumas vantagens como que colorem os códigos de nossos scripts, nos
permitem trabalhar com vários documentos simultaneamente, têm ajudas, etc. Entre outros
queremos destacar o Home Site ou o UltraEdit.

Diferenças entre Java e Javascript

Queremos que fique claro que Javascript não tem nada a ver com Java, salvo em suas
origens. Atualmente são produtos totalmente distintos e não guardam entre si mais relação
que a sintaxe idêntica e pouco mais. Algumas diferenças entre estas duas linguagens são as
seguintes:
• Compilador. Para programar em Java necessitamos um Kit de desenvolvimento e um
compilador. Entretanto, Javascript não é uma linguagem que necessite que seus
programas se compilem, senão que estes se interpretem por parte do navegador
quando este lê a página.
• Orientado a objetos. Java é uma linguagem de programação orientada a objetos.
(Mais tarde veremos que quer dizer orientado a objetos, para quem ainda não sabe)
Javascript não é orientado a objetos, isto quer dizer que poderemos programar sem

necessidade de criar classes, tal como se realiza nas linguagens de programação
estruturada como C ou Pascal.
• Propósito. Java é muito mais potente que Javascript, isto é devido a que Java é uma
linguagem de propósito geral, com o que se podem fazer aplicações do mais variado,
entretanto, com Javascript somente podemos escrever programas para que se
executem em páginas web.
• Estruturas fortes. Java é uma linguagem de programação fortemente tipada, isto quer
dizer que ao declarar uma variável teremos que indicar seu tipo e não poderá mudar de
um tipo a outro automaticamente. Por sua parte, Javascript não tem esta característica,
e podemos colocar em uma variável a informação que desejarmos, independentemente
do tipo desta. Ademais, poderemos mudar o tipo de informação de uma variável
quando quisermos.
• Outras características. Como vemos Java é muito mais complexo, mas também, mais
potente, robusto e seguro. Tem mais funcionalidades que Javascript e as diferenças que
os separam são o suficientemente importantes como para distinguí-los facilmente.

Algo de história

Foi criado na Internet uma infinidade de serviços para realizar muitos tipos de comunicações,
como correio, chats, buscas de informação, etc. Mas nenhum desses serviços se
desenvolveram tanto como o Web. Se estamos lendo estas linhas não vamos precisar de
nenhuma explicação do que é o web, mas sim que podemos falar um pouco sobre como foi se
desenvolvendo com o passar dos anos.
O web é um sistema Hipertexto, uma quantidade descomunal de textos que contém links que
relacionam cada uma das unidades básicas onde podemos encontrar informação, as páginas
web. À princípio, para desenhar este sistema de páginas com links se pensou em uma
linguagem que permitisse apresentar cada uma dessas informações juntos cm uns pequenos
estilos, esta linguagem foi o HTML, que logo se veria que não cumpriu todos os objetivos para
os que foi desenhado, mas isso é outro assunto.

O caso é que HTML não é suficiente para realizar todas as ações que se podem chegar a
necessitar em uma página web. Isto é devido a que conforme foi crescendo o web e seus
distintos usos foram se complicando as páginas e as ações que queriam se realizar através
delas. O HTLM havia se tornado curto para definir todas estas novas funcionalidades, já que
somente serve para apresentar o texto em uma página, definir seu estilo e pouco mais.
O primeiro ajudante para cobrir as necessidades que estavam surgindo foi Java, através da
tecnologia dos Applets, que são pequenos programas que se incrustam nas páginas web e que
podem realizar as ações associadas aos programas de propósito geral. A programação de
Applets foi um grande avance e Netscape, até então, o navegador mais popular, havia rompido
a primeira barreira do HTML ao fazer possível a programação dentro das páginas web. Não
cabe dúvida que o aparecimento dos Applets supôs um grande avance na história do web, mas
foi uma tecnologia definitiva e muitas outras seguiram implementando o caminho que começou
com eles.
Chega Javascript:
Netscape, depois de fazer seus navegadores compatíveis com os applets, começou a
desenvolver uma linhguagem de programação ao que chamou LiveScript que permitisse criar
pequenos programas nas páginas e que fosse muito mais simples de utilizar que Java. De
modo que o primeiro Javascript se chamou LiveScript, mas não durou muito esse nome, pois
antes de lançar a primeira versão do produto se forjou uma aliança com Sun Microsystems,
criador de Java, para desenvolver em conjunto essa nova linguagem.
A aliança fez com que Javascript se desenhara como um irmão pequeno de Java, somente útil
dentro das páginas web e muito mais fácil de utilizar, de modo que qualquer pessoa, sem
conhecimentos de programação pudesse aprofundar-se na linguagem e utilizá-la. Ademais,
para programar Javascript não é necessário um kit de desenvolvimento, nem compilar os
scripts, nem realizá-los em ficheiros externos ao código HTML, como ocorreria com os applets.
Netscape 2.0 foi o primeiro navegador que entendia Javascript e seu rastro foi seguido pelos
navegadores da companhia Microsoft a partir da versão 3.0.

Introdução à Javascript

Javascript é uma linguagem de programação utilizada para criar pequenos programinhas
encarregados de realizar ações dentro do âmbito de uma página web. Com Javascript podemos
criar efeitos especiais nas páginas e definir interatividades com o usuário. O navegador do
cliente é o encarregado de interpretar as instruções Javascript e executá-las para realizar estes
efeitos e interatividades, de modo que o maior recurso, e talvez o único, com que conta esta
linguagem é o próprio navegador.
Javascript é o seguinte passo, depois de HTML, que pode dar um programador da web que
decide melhorar suas páginas e a potência de seus projetos. É uma linguagem de programação
bastante simples e pensada para fazer as coisas com rapidez, às vezes com leveza. Inclusive
as pessoas que não tenham uma experiência prévia na programação poderão aprender esta
linguagem com facilidade e utilizá-la em toda sua potência com somente um pouco de prática.
Entre as ações típicas que se podem realizar em Javascript temos duas vertentes. Por um lado,
os efeitos especiais sobre páginas web, para criar conteúdos dinâmicos e elementos da página
que tenham movimento, mudam de cor ou qualquer outro dinamismo. Por outro, javascript
nos permite executar instruções como resposta às ações do usuário, com o qual podemos criar
páginas interativas com programas como calculadoras, agendas, ou tabelas de cálculo.
Javascript é uma linguagem com muitas possibilidades, permite a programação de pequenos
scripts, e também de programas maiores, orientados a objetos, com funções, estruturas de
dados complexas, etc. Toda esta potência de Javascript se coloca à disposição do programador,
que se converte no verdadeiro dono e controlador de cada coisa que ocorre na página.
Neste livro vamos tratar de aproximarmos desta linguagem mais profundidade e conhecer
todos seus segredos e métodos de trabalho. Ao final do livro seremos capazes de controlar a
página web e discernir o melhor método para atacar os problemas ou objetivos que tivermos
planejado.

Javascript >> Eventos de mouse

Todos elementos HTML possuem os atributos: onclick, onmouseover, onmouseout, onmousemove, onmousedown e onmouseup. Estes atributos são utilizados para iniciar a execução de comandos javascript quando determinados eventos acontecem.

onmousedown: É disparado quando apertamos um dos botões do mouse
onmouseup: É disparado quando soltamos o botão do mouse
onclick: É disparado sempre que clica-se sobre o elemento
onmouseover: É disparado sempre que o mouse passa por cima do elemento
onmouseout: É disparado sempre que o mouse sai de cima de um elemento
onmousemove: É disparado sempre que movemos o mouse

O uso destes atributos é idêntico ao uso dos demais atributos HTML, ou seja basta na tag desejada adicionar um espaço, depois o atributo desejado seguido do sinal de “=” e entre aspas o valor que o atributo irá receber.

Note que o valor recebido por estes atributos serão comandos javascript. Geralmente por uma questão de organização costumamos colocar a chamada de uma função neste local e na função implementamos todo o código javascript para executar a ação necessária, mas, também podemos escrever todo o código javascript necessário neste local, basta separa-los por “;” e não utilizar-se de quebras de linha. Veja o exemplo:

<div id=”ADiv” onClick=”MinhaFuncao();” onMouseOver=”var a = 3; alert(a-2); this.className=’ClasseTeste’;”>xxxxx</div>

No exemplo acima realizamos a chamada da função “MinhaFuncao” sempre que clicarmos sobre a div, enquanto que, sempre que passarmos o mouse sobre a div iremos executar todos os comandos javascript definidos no próprio atributo onMouseOver. Perceba que o último comando executado no onMouseOver é o seguinte “this.className=’ClasseTeste’;” note que utilizamos nesse comando o “this”. Quando temos um código javascript executado a partir de um evento definido no próprio elemento podemos fazer o uso do this e assim estaremos pegando uma referencia do elemento HTML em questão, no exemplo o uso do “this” substituiu o uso do “document.getElementById(‘ADiv’)”.

Note que ao informarmos o nome da classe CSS “ClasseTeste” utilizamos aspas simples ao invés de aspas duplas, o uso da aspas simples fez se necessário uma vez que se tivéssemos utilizado aspas duplas o HTML entenderia que estaríamos terminando de declarar o valor do atributo onMouseOver.

Obtendo as coordenadas atuais do mouse:

No javascript podemos obter as coordenadas do mouse na tela através do seguinte código:

<div id="coordenadas"></div>
<script>
function coordenadas(evento) {
        var x;
        var y;
        if (window.event){//Forma de se pegar as coordenadas no Internet Explorer ou Google Chrome
                x = window.event.clientX;
                y = window.event.clientY;
        }else{//Forma de se pegar as coordenadas no Firefox ou Google Chrome
                x = evento.clientX;
                y = evento.clientY;
        }

        document.getElementById("coordenadas").innerHTML = "Mouse em: " + x + ", " + y;
}
document.onmousemove = coordenadas;
</script>

Baixe aqui o arquivo com o exemplo acima.

Note que existe uma instrução "if (window.event){", ela foi colocada afim de fazer com que o script funcione tanto no Internet Explorer quanto no Firefox, dependendo do que você for fazer poderão existir problemas de compatibilidade entre os diferentes navegadores do mercado.

Javascript >> SetTimeOut e SetTimeInterval

A função setTimeout define que após um intervalo de tempo uma determinada função será executada, lembre-se que a função deverá ser previamente declarada em seu código. Veja o exemplo:

<script> setTimeout(MinhaFuncao, 5000);//Aqui definimos que a função “MinhaFuncao” será chamada após 5 segundos </script>

A função setInterval funciona de forma parecida, mas ao invés de determinar depois de quanto tempo uma função será executada uma vez, ela define que a cada intervalo de tempo a função irá ser executada. A sintaxe é bem parecida a do setTimeout:

<script> setInterval(MinhaFuncao, 5000);//Aqui definimos que a cada 5 segundos a função “MinhaFuncao” será chamada </script>

Para parar a execução do setInterval utilizamos a função clearInterval que recebe como parâmetro uma variável de referência ao intervalo. Veja:

<script>
var intervalo = setInterval(alerta, 1000);
var i = 0;
function alerta() {
    if(i < 11){
        alert(i);
        i++;
    }else{
        clearInterval(intervalo);
    }
}
</script>

Acima, defini um intervalo de 1 segundo para chamar a função alerta, ela vai verificar se o valor da variável i é menor que 11 e se for soma 1 e exibe uma mensagem de alerta mostrando o valor de i. Se i for maior ou igual a 11 o intervalo é eliminado por clearInterval.

Outro exemplo:

<script>
setTimeout(function () { alert(“Esta página está em execução há 30 segundos”);  }, 30000);
</script>

Como podemos ver no exemplo acima, a função pode ser definida dentro do próprio setTimeout, com o detalhe de que não precisa dar nome à ela, o mesmo vale para setInterval. O exemplo acima vai esperar 30 segundos  e exibir uma mensagem de alerta contendo “Esta página está em execução há 30 segundos”.

Javascript >> Css e Javascript

Com o javascript podemos alterar a classe css de qualquer elemento html, para tal utilizamos a propriedade javascript de elementos html com o nome de "className". Veja o Exemplo:

<script> document.getElementById("MinhaDiv").className = “UmaClasseCss”; </script>

No exemplo acima, alteramos a classe CSS do elemento HTML cujo id é “MinhaDiv” para a classe CSS de nome “UmaClasseCss”.

Também podemos alterar propriedades específicas do CSS de um elemento HTML da página, basta alterar a respectiva propriedade no “style” do elemento. Veja a tabela abaixo para saber como alterar cada uma das propriedades css de um elemento. Obs: Suponha que você tem uma página HTML com o seguinte elemento em seu código:

<div id=’MinhaDiv’>&nbsp;</div>

Lista contendo atributos css, o nome da respectiva propriedade dentro do style em javascript, a descrição do que faz o atributo css e um exemplo de como acessa-lo e altera-lo via javascript:

CSS	JavaScript	Descrição	Uso (Javascript)
background-attachment	backgroundAttachment	Define se a imagem de fundo de um elemento ficará fixa ("fixed") ou se irá rolar junto com o conteúdo("scroll").	document.getElementById("MinhaDiv").style.backgroundAttachment = "fixed";
background-color	backgroundColor	Define a cor de fundo de um elemento.	document.getElementById(“MinhaDiv”).style.backgroundColor = “#000000”;
background-image	backgroundImage	Define uma imagem como fundo de um elemento.	document.getElementById("MinhaDiv").style.backgroundImage = "url(http://www.vabolt.com/design/16x16ico.png)";
background-position	backgroundPosition	Define o alinhamento da imagem de fundo de um elemento.	document.getElementById("MinhaDiv").style.backgroundPosition = "right";
background-repeat	backgroundRepeat	Define se a imagem vai repetir ou não e a direção da repetição.	document.getElementById("MinhaDiv").style.backgroundRepeat = "no-repeat";
border	border	Define o formato da borda de um elemento.	document.getElementById("MinhaDiv").style.border = "2px solid black";
border-bottom	borderBottom	Define o formato da borda inferior de um elemento.	document.getElementById("MinhaDiv").style.borderBottom = "2px solid black";
border-left	borderLeft	Define o formato da borda esquerda de um elemento.	document.getElementById("MinhaDiv").style.borderLeft = "2px solid black";
border-right	borderRight	Define o formato da borda direita de um elemento.	document.getElementById("MinhaDiv").style.borderRight = "2px solid black";
border-top	borderTop	Define o formato da borda acima de um elemento.	document.getElementById("MinhaDiv").style.borderTop = "2px solid black";
bottom	bottom	Define a distância à baixo do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.bottom = "20px";
color	color	Define a cor do texto.	document.getElementById("MinhaDiv").style.color = "#FFFFFF";
cursor	cursor	Define o ícone do cursor do mouse quando o mesmo passar sobre o elemento	document.getElementById("MinhaDiv").style.cursor = "pointer";
display	display	Define se um elemento deve ser apresentado e a forma de sua apresentação.	document.getElementById("MinhaDiv").style.display = "none";
font-family	fontFamily	Define o tipo de fonte.	document.getElementById("MinhaDiv").style.fontFamily = "Arial";
font-size	fontSize	Define o tamanho da fonte.	document.getElementById("MinhaDiv").style.fontSize = "20px";
font-weight	fontWeight	Define a espessura do traço da fonte.	document.getElementById("MinhaDiv").style.weight = "bold";
height	height	Definem a altura de um elemento.	document.getElementById("MinhaDiv").style.height = "100px";
left	left	Define a distância à esquerda do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.left = "20px";
margin	margin	Define o espaçamento entre o elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.margin = "50px";
margin-bottom	marginBottom	Define o espaçamento entre a região abaixo de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginBottom = "20px";
margin-left	marginLeft	Define o espaçamento entre a região a esquerda de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginLeft = "20px";
margin-right	marginRight	Define o espaçamento entre a região a direita de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginRight = "20px";
margin-top	marginTop	Define o espaçamento entre a região superior de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginTop = "20px";
overflow	overflow	Define o que deve ocorrer quando o conteúdo de um elemento excede sua área.	document.getElementById("MinhaDiv").style.overflow = "auto";
padding	padding	Define o espaçamento entre o conteúdo de um elemento e sua borda.	document.getElementById("MinhaDiv").style.padding = "15px";
padding-bottom	paddingBottom	Define o espaçamento entre o conteúdo de um elemento e sua borda abaixo.	document.getElementById("MinhaDiv").style.paddingBottom = "20px";
padding-left	paddingLeft	Define o espaçamento entre o conteúdo de um elemento e sua borda a esquerda.	document.getElementById("MinhaDiv").style.paddingLeft = "20px";
padding-right	paddingRight	Define o espaçamento entre o conteúdo de um elemento e sua borda a direita.	document.getElementById("MinhaDiv").style.paddingRight = "20px";
padding-top	paddingTop	Define o espaçamento entre o conteúdo de um elemento e sua borda superior.	document.getElementById("MinhaDiv").style.paddingTop = "20px";
position	position	Define a posição de um elemento como estática, relativa, absoluta ou fixa.	document.getElementById("MinhaDiv").style.position = "absolute";
right	right	Define a distância à direita do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.right = "20px";
text-align	textAlign	Define o alinhamento do texto.	document.getElementById("MinhaDiv").style.textAlign = "right";
text-decoration	textDecoration	Define um efeito decorativo para o texto.	document.getElementById("MinhaDiv").style.textDecoration = "underline";
top	top	Define a distância ao topo do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.top = "20px";
width	width	Definem a largura de um elemento.	document.getElementById("MinhaDiv").style.width = "100px";
z-index	zIndex	Define a ordem de apresentação (quem ficará na frente e quem ficará atrás) de um elemento quando há sobreposição de elementos.	document.getElementById("MinhaDiv").style.zIndex = "100";