Informática Numaboa - Tutoriais e Programação
Tutorial Javascript I
|
Seg 9 Out 2006 17:54 |
- Detalhes
- Categoria: Javascript
- Atualização: Sexta, 17 Abril 2009 21:12
- Autor: vovó Vicki
- Acessos: 26721
JavaScript é uma linguagem orientada a objeto, cross-plataform da Netscape, usada em aplicativos cliente-servidor e que há muito tempo se destaca como uma das linguagens mais usadas na Internet.
Sobre a Javascript
Antes de mais nada, não confunda Javascript da Netscape com a linguagem Java da Sun. Ambas são linguagens de programação (este é o único ponto que elas têm em comum), mas são essencialmente diferentes.
A Javascript é uma linguagem que pode ser vista como um complemento da HTML. O principal propósito da HTML é apresentar texto e imagens; já a Javascript oferece interatividade. Ela permite criar aplicativos para qualquer ambiente de rede, páginas HTML dinâmicas que processam dados fornecidos por usuários e possibilita a manutenção de dados usando objetos especiais, arquivos e bancos de dados relacionais. Apesar de poder ser usada no servidor, sua maior aplicação é no lado do cliente.
Se você não manja nada de HTML, seria melhor começar por aí antes de encarar a Javascript. HTML é uma linguagem de apresentação de documentos e de especificação de hiperlinks. Ela define a sintaxe e o posicionamento de diretivas especiais que não são mostradas pelo navegador - estas diretivas indicam apenas como mostrar o conteúdo do documento, como texto, imagens e outros tipos de mídia. Como a Javascript é enxertada em páginas HTML, é bom saber em que terreno se está pisando 
A Javascript fica aninhada em páginas HTML e é interpretada pelo navegador em tempo de execução. Existem marcadores especiais para colocar código Javascript numa página HTML. Veja a seguir (onde, de quebra, está a estrutura básica de uma página) os marcadores destacados em negrito e uma chamada à função alert() da Javascript destacada em vermelho:
A chamada também pode ficar na área<HEAD>, por exemplo, logo abaixo do título da página. Independentemente da localização, assim que esta página for chamada pelo navegador, o código será executado e apresentará uma janela de alerta com o texto indicado. Também é possível chamar um script que esteja num arquivo próprio. Para isto, basta acrescentar a fonte:
O tutorial de Javascript
Como costumo usar Javascript em muitas das páginas da Aldeia - a seção de criptografia, por exemplo, tem um punhado delas - e como muitas vezes recebo emails solicitando o código fonte dos aplicativos, achei que seria interessante escrever um tutorial que abordasse os principais aspectos desta linguagem. Para não ficar um baita de um tutorial, fui "fabricando" pequenos tutoriais, cada um deles sobre um assunto específico.
O ScriptBox
Os mini-tutoriais possuem o que chamei de ScriptBox, uma caixa de texto onde se pode colocar scripts e testá-los on line. Gostou da idéia dos tutoriais interativos? Eu também, mas a idéia não é minha. É do Binny e quero expressar de público meu agradecimento pelo script simples e elegante. Aliás, vale a pena dar uma espiada no site do autor, o Bin-Co - Great Scripts. For free. For Everybody.
Para tomar gosto pela coisa, clique no botão [Rodar] e teste o ScriptBox aqui mesmo com o script mais simples do mundo:
Espero que vocês curtam esta linguagem tanto quanto eu e que, com estes tutoriais, também tomem gosto pela coisa.
Grande abraço
Eventos
Declarações javascript aninhadas numa página HTML podem responder a eventos como cliques de mouse, dados de formulários ou navegação.
Por exemplo, é possível escrever funções javascript que verifiquem a validade da informação solicitada através de um formulário, que rastreiem os movimentos feitos pelo usuário com o mouse (ótimo para joguinhos on line), que disparem um cronômetro assim que a página for carregada e por aí afora. São um monte de possibilidades que animam qualquer programador (iniciante ou não), com um porém - já percebeu que sempre tem um porém? Seria um mar de rosas se todos os navegadores interpretassem o código da mesma forma. Apesar de existir um órgão regulador (o W3C, World Wide Web Consortium), os criadores dos navegadores nem sempre respeitam as normas, ou seja, por melhor que seja o seu código, prepare-se para algumas surpresas desagradáveis 
A JavaScript pode executar código quando um determinado evento acontece. Sem dúvida nenhuma, um dos mais comuns é o clique num link, num trecho de texto ou numa imagem. Vamos explorar os eventos usando a função alert() da javascript,mas antes disto algumas palavrinhas sobre esta função.
A função alert() faz parte do arsenal de funções da javascript. Não é preciso programar janela, botão ou coisa do gênero. Basta enviar o texto que deve ser mostrado como parâmetro que a função se encarrega do resto. Quer ver só? Inserindo este trecho de código numa página HTML, criamos um link "javascriptizado"
que produz o seguinte resultado: Clique aqui
Observe que o texto precisa estar entre aspas, mas, como o marcador href também exige aspas, fazemos com que um tenha aspas duplas e o outro aspas simples. Repetir o tipo de aspas é um erro muito comum feito pelos principiantes - o script não funciona de jeito nenhum e o programador não consegue encontrar o erro :thumbdown: Mas nem sempre é preciso usar o href. Podemos usar um evento associado ao <a>.
Observe o resultado: Clique aqui
A diferença é que o href está preparado para ser clicado (já está esperando o evento onClick), muda o cursor e a cor do texto - só precisa ser informado de que a linguagem é javascript. Quando o <a> está pelado a coisa é um pouco diferente. Precisamos vesti-lo com um evento, neste caso o onClick. Em compensação, ele é esperto o suficiente para descobrir sozinho que a linguagem é javascript.
Se quisermos que a janela de alerta seja mostrada assim que o cursor do mouse estiver sobre um texto, é fácil, fácil... basta indicar o evento correspondente, o onMouseOver.
e a coisa fica assim: Aponte o mouse aqui
Para conseguir a mesma coisa com o href é preciso dar uma enganada nele porque ele já está preparado para o evento onClick. Então damos ao href um endereço vazio (#) e atrelamos o <a> ao evento onMouseOver:
ou seja, a coisa fica assim: Aponte o mouse aqui
Já deu para ter uma idéia? Então vai aqui uma lista dos eventos mais comuns.
Para usar em links, imagens e outros
- onBlur (ocorre quando um campo texto de um formulário perde o foco)
- onFocus (ocorre quando um elemento recebe o foco)
- onDblClick (ocorre com um duplo clique)
- onClick (ocorre com um clique)
- onMouseDown (ocorre quando um botão do mouse é pressionado)
- onMouseMove (ocorre quando o cursor do mouse é movimentado)
- onMouseOut (ocorre quando o cursor do mouse deixa o ponto)
- onMouseOver (ocorre quando o cursor do mouse atinge o ponto)
- onMouseUp (ocorre quando um botão do mouse é liberado)
Para usar dentro da área <body>
- onKeyDown (ao pressionar uma tecla)
- onKeyPress (ao pressionar uma tecla e, logo em seguida, liberá-la)
- onKeyUp (ao liberar uma tecla)
Para usar no marcador <body>
- onLoad (ao carregar a página)
- onUnLoad (ao abandonar a página)
Diálogos
Os elementos de um programa que são independentes da janela principal podem ser chamados de diálogos. Existem três diálogos principais na Javascript: alert, confirm e prompt.
Alert
O diálogo alert é o que já foi visto anteriormente. É uma função da Javascript que apresenta o texto enviado como parâmetro numa janela própria, a chamada message box ou caixa de mensagem. O parâmetro é uma string que pode ser literal ou estar armazenada numa variável. Por exemplo, ao clicar no botão abaixo, a mensagem "aicnâlubma" será mostrada:
Mas que tipo de mensagem é esta? É uma mensagem literal meio difícl de entender. Agora, vamos apresentar uma mensagem usando a função alert cujo parâmetro é enviado através de variáveis e que é um pouco mais esclarecedora. Veja o código:
Confirm
O diálogo confirm também recebe uma string (literal ou através de uma variável) que é mostrada numa caixa de diálogo que contém dois botões, OK e Cancela. Esta função da Javascript tem um valor de retorno que corresponde ao botão clicado pelo usuário. O botão abaixo foi criado com o seguinte código no seu evento onClick:
Prompt
Com o diálogo prompt é possível fazer uma pergunta e obter uma resposta do usuário. A caixa de diálogo mostra a pergunta enviada como parâmetro string, um campo de texto onde o usuário digitar dados e os botões OK e Cancela. Além disso, esta função da Javascript permite adicionar uma resposta padrão (mas que não precisa necessariamente estar presente). Seu formato é VARIÁVEL = prompt("STRING"[,"RESPOSTA PADRÃO"]). O botão abaixo possui o seguinte código atrelado ao evento onClick:
Observações
Neste texto, além da sintaxe usada nos tutoriais anteriores, apareceram algumas coisas novas. Foram declaradas (com var) e usadas variáveis. Você pode usar qualquer nome para as suas variáveis, contanto que não sejam nomes proprietários da Javascript. Pode-se chamar uma variável de x, a ou resposta - depende do gosto de cada um. É claro que fica mais fácil lembrar de uma variável que tenha um nome que indique a sua aplicação
Nas funções que têm valores de retorno, estes podem ser atribuídos diretamente a uma variável assim que ela for declarada (como em var resposta = prompt(...)) ou, usando dois comandos, pode-se inicialmente declarar a variável e depois usá-la para armazenar um valor de retorno:
Observe que depois de cada comando é usado o delimitador ponto e vírgula (;). A função deste delimitador é indicar o fim de um comando e, com isto, podemos escrever vários comando numa só linha. Por exemplo:
Também usamos a diretiva IF, cuja tradução é SE. Por exemplo, if (resposta) significa SE (valor da variável resposta for verdadeiro) ENTÃO faça o que vem a seguir. Uma diretiva IF pode ser complementada por uma diretiva ELSE, que significa CASO CONTRÁRIO, ou seja, se a avaliação do IF não for verdadeira, ENTÃO faça o que se pede no ELSE.
Valores verdadeiros incluem valores maiores do que zero (geralmente se usa o valor 1), true (que significa verdadeiro) ou uma string que possua pelo menos um caracter. Veja os exemplos abaixo:
Variáveis
A Javascript não exige que o tipo das variáveis seja declarado - a linguagem se vira sozinha para descobrir se o valor é numérico, string, etc. Pra falar a verdade, isto é uma mão na roda. Se quisermos definir uma variável como número inteiro, basta atribuir-lhe um valor inteiro; se quisermos que guarde um número de ponto flutuante, basta atribuir-lhe um valor em ponto flutuante:
Variáveis Globais e Locais
As variáveis não precisam necessariamente ser declaradas através de var, ou seja,
Então, qual é a vantagem que Maria leva? A aplicação de var define o escopo da variável, ou seja, em que nível do programa ela está ativa e pode ser reconhecida. Existem variáveis globais que, como o nome indica, são reconhecidas em qualquer ponto do programa e existem variáveis locais, reconhecidas em áreas específicas de um programa. Uma área limitada é, por exemplo, uma função. Como uma função pode ser chamada de qualquer ponto do programa, se quisermos que o resultado de uma soma seja mostrado num diálogo do tipo alert podemos criar o seguinte código:
Logo no início foram criadas as variáveis int1 e int2 sem a diretiva var. Isto cria variáveis globais, que podem ser "vistas" em qualquer área do programa. Por este motivo, mesmo que a função mostraSoma não receba os valores de int1 e int2 como parâmetros, é possível usar estas variáveis para enviar o resultado da soma para uma caixa de diálogo. Na primeira chamada, o resultado mostrado será 8; na segunda, o resultado mostrado será 11.
Depois das duas chamadas à função mostraSoma, uma caixa de diálogo é chamada com o valor ms. Acontece que esta caixa de diálogo não será mostrada! O motivo é que a variável ms foi criada com a diretiva var na área da função mostraSoma. Isto faz com que ms seja uma variável local, que só pode ser acessada dentro da área da função. Como o alert(ms); foi chamado fora da função mostraSoma e a variável ms só pode ser "vista" dentro da área da função, necas de caixa de diálogo :thumbdown:
Experimente rodar este programinha no aplicativo ScriptBox abaixo. Mude o que quiser e faça novos testes. Comece a brincar com a JS!
ScriptBox
Até aí, tudo bem - o estrago não foi grande. Continue pilotando o ScriptBox e declare novamente a variável int1 COM a diretiva var na função mostraSoma. O que que acontece? Nada mais funciona porque a variável foi "sequestrada e confinada": tornou-se uma variável local que só é reconhecida dentro da função.
Referências
- W3C - World Wide Web Consortium
- SelfHtml, o mais completo guia de HTML, JavaScript, CSS, etc