Manual completo javascript

Veja um outro exemplo de utilização do objeto checkbox:

function teste(){

if (form1.caixa1.checked){

form1.campo1.value="caixa1"

} else if (form1.caixa2.checked){

form1.campo1.value="caixa2"

} else if (form1.caixa3.checked){

form1.campo1.value="caixa3"

}

</script>

</head>

<pre>

Digite seu Nome:

<input type="checkbox" name="caixa1" onClick="teste()">caixa1

<input type="checkbox" name="caixa2" onClick="teste()">caixa2

<input type="checkbox" name="caixa3" onClick="teste()">caixa3

</form>

OBJETO RADIO

Similar ao objeto CHECKBOX, este objeto cria uma lista de opções, onde o

usuário poderá escolher apenas uma única opção. Sua sintaxe, segue os

mesmos parâmetros dos objetos anteriores. Vejamos a relação de suas

propriedades, métodos e eventos:

Veja agora a utilização de um script no uso do objeto radio do formulário:

function acessa(){

if (form1.senacmg.checked){

window.location.href("http://www.mg.senac.br");

}else if (form1.senacbr.checked){

window.location.href("http://www.senac.br");

}

</script>

<pre>

<input type="radio" name="senacmg" onClick="acessa()">SENAC-MG

<input type="radio" name="senacbr" onClick="acessa()">SENAC BRASIL

Vejamos agora outro exemplo que apresenta a soma de valores de acordo com

o que o usuário seleciona. Faça um teste com o código abaixo:

<INPUT TYPE="RADIO" NAME="massa1" onClick="fina()">Massa fina

(10,00 reais)

<INPUT TYPE="RADIO" NAME="massa1" onClick="grossa()">Massa grossa

(10,00 reais)

<INPUT TYPE="CHECKBOX" NAME="queijo">Mussarela (+ 1,30 reais)

<INPUT TYPE="CHECKBOX" NAME="calab">Calabresa (+ 2,50 reais)

<INPUT TYPE="CHECKBOX" NAME="ovoceb">Ovo e cebola (+ 0,70 reais)

<INPUT TYPE="BUTTON" VALUE="Calcular total"

onClick="precoTotal()">

</FORM>

var massa;

var ticado = false;

function fina(){

massa="massa fina";

ticado=true;

}

function grossa(){

massa= "massa grossa";

ticado=true;

}

function precoTotal(){

if(!ticado){

alert("SELECIONE UM TIPO DE MASSA!");

}

else{

var tot=10.00;

if(document.fm1.queijo.checked){

tot=tot+1.30;

}

if(document.fm1.calab.checked){

tot=tot+2.50;

}

if(document.fm1.ovoceb.checked){

tot=tot+0.70;

}

ts= new String(tot);

tss=ts.replace(".",",");

if(tss.lastIndexOf(",")>0){

document.fm1.total.value="Sua pizza de "+massa+" custa:

"+tss+"0 reais";

}

else{

document.fm1.total.value="Sua pizza de "+massa+" custa: "+tss+"

reais";

}

</SCRIPT>

OBJETO SELECT

Muito comum, este objeto representa uma lista de opções que o usuário

poderá selecionar. Com o objeto SELECT, o usuário poderá determinar uma

seleção única ou múltipla.

Este objeto irá permitir ao usuário controlar os itens de uma lista de opções

criada com o tag HTML <SELECT>. Veja um exemplo de utilização do objeto

select.

function itens(){

alert(form1.lista.selectedIndex);

}

</script>

<pre>

<option>Item 0

<option>Item 1

<option>Item 2

<option>Item 3

<option>Item 4

</select>

A propriedade selectedIndex informa qual dos itens da lista de seleção foi

selecionado pelo usuário. Veja abaixo outro exemplo que ao usuário selecionar

um dos itens o valor da opção redireciona para uma determinada URL:

function acessa(texto){

window.location.href=texto;

}

Foi criada uma função que possui uma variável como argumento que

armazenará o valor de uma opção da lista de seleção.

<select name="lista"

onChange="acessa(lista.options[selectedIndex].value)">

<option value="http://www.mg.senac.br">Senac

<option value="http://www.sp.senac.br">SenacSp

</select>

Já na página, foi criada uma lista de seleção que ao alterar o valor da variável

lista, a função acessa irá armazenar na sua variável (texto) o valor da opção

selecionada da lista. Veja que foi definido como valor de cada opção na lista de

seleção um endereço específico que será enviado para a variável da função

que será usado como hiperlink na janela do browser.

EVITANDO O USO DA TECLA ENTER

Normalmente na maioria dos formulários, caso o usuário estando em algum

dos campos presentes, ao pressionar a tecla ENTER, o mesmo é enviado

imediatamente, muitos usuários se perdem na navegação quando este

problema ocorre dependendo da situação. Através do JavaScript é possível ao

usuário evitar que o mesmo seja enviado quando se pressiona a tecla ENTER.

É claro que este recurso irá cancelar o envio do formulário mesmo se o usuário

clicar sobre o botão de submissão, bastando ao usuário a criação de uma

função que envie o formulário. Vejamos o código a seguir para este recurso:

function envia(form){

form.submit();

}

</script>

<form name="form1" action="mailto:adrianolima@mg.senac.br"

onSubmit="return false">

Digite seu Nome:

Observe que foi usado o evento onSubmit que determina a ação a ser tomada

ao enviar o formulário, foi definido o valor return false que evita que o

formulário seja enviado, mesmo clicando em um botão.

Já para que o formulário seja enviado, foi criado um botão simples de

formulário que ao ser acionado, será executada a função envia(this.form)

para este formulário. Na função foi definido a instrução form.submit() que

enviará o formulário.

OBJETO LOCATION

Este objeto é bem interessante por conter informações sobre a URL da página.

Cada propriedade do objeto LOCATION representa uma parte diferente do

endereço. A sintaxe utilizada para este objeto possui a seguinte composição:

Protocolo:hostname:port path seach hash

Vejamos o significado da representação mostrada acima.

PROPRIEDADE DESCRIÇÃO

Hash Determina nome de âncora.

Host Determina parte hostname:port URL

Href Determina uma URL

Pathname Determina caminho.

Port

Determina a porta de comunicação que é

utilizado no servidor para comunicação.

Protocol Início de uma URL.

Search Determina uma pesquisa.

Vejamos agora a relação dos tipos de URL conhecidas:

TIPO URL

Web http://www.dominio.com.br/

Local File:///disco:/diretório/página html

FTP: ftp://ftp.local.com.br/diretório

Mailto: mailto:nome@dominio.com.br

UseNet News://news.servidor.com.br

Gopher Gopher.servidor.com.br

PROPRIEDADES DO OBJETO LOCATION

Para definir propriedades do objeto Location, siga a seguinte sintaxe:

window.location

Caso o objeto location esteja fazendo referência a janela corrente, não é

necessário utilizar o objeto window. Caso o usuário deseja retornar o URL da

janela corrente, basta utilizar o seguinte comando:

location.href; // URL da janela corrente.

location.host; // Parte da URL.

Veja um exemplo de um hiperlink usado em um botão de formulário:

<HTML>

<HEAD>

<TITLE>BOTÃO</TITLE>

</HEAD>

<input type=“button” value=“SENAC-MG” onClick=“window.location.

href=‘http://www.mg.senac.br/’”>

</form>

</body>

</html>

EXERCÍCIOS

Crie um script que possua um campo de formulário do tipo Texto que solicite a

digitação do nome do usuário e, quando usuário retirar o foco do campo de

texto, seja exibida uma caixa de alerta exibindo o texto:

“Como vai, <NomeUsuário>

Crie dentro de um script uma função chamada exibe e como argumento para

esta função, defina a variável (texto). Desenvolva para esta rotina, uma caixa

de alerta que apresente o seguinte texto: “Olá visitante texto”.

No corpo da página, crie um campo de formulário do tipo texto, que execute a

função atribuindo à variável definida o valor digitado pelo usuário assim que o

mesmo retirar o foco do campo de texto.

Crie um formulário contendo os campos Nome, Endereço, Telefone, CEP,

CIDADE, ESTADO.

Crie uma função que determine para os campos NOME, TELEFONE e CEP

preenchimento obrigatório.

Crie uma função que determine para o campo telefone o preenchimento de

valores númericos exibindo uma caixa de alerta quando o preenchimento

estiver incompatível.

Crie um script que possua dois campos de formulário do tipo texto e determine

que quando o primeiro campo seja preenchido com algum valor, o segundo

campo possa refletir o que a no primeiro campo.

Crie uma rotina neste exemplo que se for digitado um texto em minúsculo no

primeiro campo o segundo campo apresente o texto em maiúsculo.

Crie um script que possua dois campos de formulário do tipo texto que irá

armazenar valores numéricos.

Crie uma função para este script que multiplique os valores dos dois campos

de texto e apresente seu resultado em um terceiro campo quando o mesmo

receber um foco pelo usuário.

Desenvolva um script que possua três campos: NOME, ENDEREÇO e

SEXO.

Faça com que quando o usuário retirar o foco do campo, seja exibida uma

mensagem de alerta informando-o para não os deixarem em branco.

Crie uma rotina para o campo SEXO para que caso seja digitado valores

diferentes de MASCULINO ou FEMININO, seja exibida uma mensagem de

alerta que o valor atual não é válido. EX: “valor atual não é um sexo

válido!”. Esta rotina deverá ocorrer quando o usuário retirar o foco do

campo.

Crie dois campos de formulário, o primeiro para o preenchimento de um

botão de ação.

Crie uma variável chamada AUTENTICA() que ao clicar sobre o botão caso

o login e senha sejam diferentes de aluno e 5245, seja exibida uma caixa

de alerta informando que os dados preenchidos são inválidos.

Crie um formulário com um campo de formulário do tipo texto. Crie um evento

que ao carregar à página, seja exibida uma mensagem na barra de status e

que o cursor apareça posicionado dentro do campo de formulário.

Crie dois campos de formulário do tipo texto. Faça com que ao selecionar o

texto digitado dentro do campo 1, seja mostrado seu conteúdo no campo 2.

Crie dois campos de formulário, sendo o primeiro do tipo password e o

segundo do tipo texto. Crie um script que faça com que ao digitar uma senha

no primeiro campo seja digitado o que a pessoa digitou. Crie um evento que

ao carregar a página, o campo senha venha com o cursor posicionado.

Crie um script que seja exibida uma caixa de entrada para o usuário conforme

mostrado na figura a seguir:

Faça com que esta caixa seja acionada quando o usuário clicar sobre um botão

de formulário. Defina como texto padrão a string: http://.

Faça com que quando o usuário clicar sobre o botão OK, o navegador

redirecione para o endereço digitado na caixa.

Crie em uma página HTML quatros campos de formulário do tipo radio e logo

mais atribua um evento que faça com que ao escolher um dos botões

presentes seja alterado a cor de fundo da página, como mostrado no exemplo

a seguir:

Azul

Vermelho

Amarelo

Cinza

UTILIZANDO O OBJETO HISTORY

PROPRIEDADES MÉTODOS EVENTOS

length back Nenhum

Forward

PROPRIEDADE

Este objeto é uma propriedade do objeto window.

Este objeto é como um histórico que contém informações sobre as URL’s que o

usuário esteve. Estes endereços ficam armazenados e podem ser acessados à

partir dos botões VOLTAR e AVANÇAR do Browser. Ao acessar páginas na

Internet, o browser armazena as páginas anteriores em um histórico próprio.

Com o objeto HISTORY é possível ao usuário manipular este histórico. Sua

sintaxe é formada da seguinte forma:

history.propriedade

MÉTODOS BACK E FORWARD

Os métodos back e forward representam a função dos botões de Avançar e

Voltar presentes no browser. Veja o exemplo de utilização destes métodos:

history.back() // Retorna a URL anterior.

history.forward() // Retorna a URL posterior.

MÉTODO GO

O método go permite a especificação de uma URL do histórico, basta fornecer

o número da URL que deseja ir. Veja pelo exemplo a seguir o deslocamento

para a quarta URL anterior:

history.go(-4) // Vai para a quarta URL anterior.

History.go(5) // Vai para a quinta URL a frente.

Dentre os métodos utilizados o método go é mais versátil por ser utilizado

para controlar o histórico amplamente.

ANOTAÇÕES:

______________________________________________________

UTILIZANDO O OBJETO NAVIGATOR

Este objeto possui informações sobre o navegador utilizado pelo usuário como,

versão e nome do mesmo. Para utilizar suas propriedades, deve-se seguir a

seguinte sintaxe:

navigator.propriedade

Vejamos a relação de suas propriedades:

PROPRIEDADES DO OBJETO NAVIGATOR

PROPRIEDADE DESCRIÇÃO

appCodeName

Especifica o codinome do navegador

utilizado.

appName

Especifica o nome do navegador

utilizado.

appVersion

Especifica a versão do navegador

utilizado.

userAgent

Especifica uma string do vendedor do

navegador.

Vejamos agora um exemplo que mostrará informações sobre o navegador

utilizado.

<HTML>

<HEAD>

<TITLE>NAVEGADOR</TITLE>

</HEAD>

document.write("O navegador utilizado é o

"+navigator.appName+"<br>")

document.write("A versão deste navegador é "+navigator.appVersion)

</script>

</body>

</html>

veja o resultado deste script pela figura a seguir:

ACESSANDO CÓDIGO-FONTE A PARTIR DE UM LINK

Alguns usuários para facilitar a visualização do código-fonte de sua página,

criam hiperlinks que fazem com que seus visitantes tenham uma maneira mais

simples de visualizar seu código. Veja o exemplo a seguir:

function openWin(){

location="view-source:"+window.location;

}

</script>

<body>

<a href="#" onClick="openWin()">Veja o código desta página</a>

UTILIZANDO COOKIES

Quem nunca ouviu falar em “cookies”? Um termo muito falado para os

usuários que trabalham diretamente com internet, porém muito pouco

entendido.

Os Cookies são pequenos textos ( de geralmente 1Kb ), colocados em seu

disco rígido por alguns sites que você visitou.

Eles contêm informações que o próprio internauta forneceu ao site como email,

preferências, o que você comprou, seu nome, etc...Mas apenas o que o

internauta forneceu. Se ele apenas entrou no site e não digitou informação

nenhuma, então o cookie não conterá nenhuma informação.

Alguns sites de comércio eletrônico colocam estes cookies no disco rígido do

usuário com o objetivo de personalizar os próximos atendimentos. Por

exemplo, o usuário entrou em uma loja virtual e comprou o livro “E o vento

Levou “. Pagou com cartão de crédito e forneceu seu nome e mais alguns

dados para que a compra pudesse ser raizada.

Em seu próximo acesso a este mesmo site, este usuário receberá uma

mensagem em sua tela dizendo: “Bom dia Fulano de Tal, que tal conhecer “E o

vento Levou 2 ? “. Ou seja, o atendimento foi personalizado para este usuário.

Ele foi reconhecido e um livro que provavelmente será de seu agrado lhe foi

oferecido.

Assim o cliente pode ser atendido de acordo com seu perfil e suas

preferências, e o site terá uma maior probabilidade de vender outro livro. Este

tipo de operação envolvendo cookies e personalizando o atendimento visa criar

um vínculo com o cliente com o objetivo que este volte outras vezes ao site.

Nos sites de comércio eletrônico, os cookies também são utilizados para criar

os carrinhos de compras. Digamos que o usuário esteja num site fazendo

compras e de repente, por algum motivo, cai sua conexão... Acontece que ele

já encheu seu carrinho com um monte de coisas. Será que o site vai perder

esta venda? Pois, mesmo se o cliente voltar, será que ele terá paciência para

comprar tudo outra vez?

Graças aos cookies está tudo bem. Se o cliente retornar ao site e quiser

continuar de onde parou, os cookies “lembrarão” o que tinha dentro do

carrinho e o cliente não precisará começar tudo de novo.

Apenas como esclarecimento, os cookies não transmitem vírus e podem ser

lidos apenas por aqueles que o colocaram no hard disk do usuário, evitando o

tráfego aberto de informações pela rede.

Outra utilidade dos cookies é fornecer informação sobre número, freqüência e

preferência dos usuários para que se possa ajustar a página de acordo com o

gosto do internauta.

Criando Cookies

O cookie é uma propriedade do objeto window.document e possui uma

restrição numérica de 300 cookies no total e no máximo 20 cookies por site,

além de um tamanho máximo de 4 KB, embora estes números possam variar

conforme a versão do browser.

Quando gravamos um cookie, portanto, apenas inserimos uma variável string

que contém os valores desejados em um arquivo cookie que é associado ao

nosso documento. O exemplo simplificado abaixo nos mostra como os cookies

operam:

<!--

function DefineCookie(nome, valor, form){

document.cookie = nome+"="+valor+";";

form.Nome.value = "";

form.Valor.value= "";

}

function ExibeCookie(form) {

form.Resultado.value = document.cookie;

}

// -->

</script>

Note que usamos apenas 3 funções, com os objetivos de inserir valores dentro

de um cookie, mostrá-lo ou reiniciá-lo. Note que a propriedade

document.cookie é, de fato, uma string, com a convenção de que cada

cookie seja separado do outro por um ";" como consta na função

DefineCookie().

Deve ficar claro, portanto, que para armazenarmos vários pares <valor,

informação> deveremos manipular a string do cookie para obtermos o valor

desejado. Para isso, usamos a função abaixo, capaz de nos devolver o valor

corrente de um cookie:

function GetCookie(nome) {

var dc = document.cookie;

var prefixo = nome + "=";

var inicio = dc.indexOf(prefixo);

if (inicio == -1) return null;

var final = document.cookie.indexOf(";",inicio);

if (final == -1) final = dc.length;

return unescape(dc.substring(inicio+prefixo.length, final));

}

Vamos agora fazer algo mais interessante, como contar o número de vezes

que um determinado usuário visitou nossa página. O script abaixo mostra o

uso de um botão que contará o número de vezes que o mesmo for clicado, o

que certamente pode ser feito no momento da página ser carregada, exibindo

uma mensagem do tipo "Olá, FULANO, que bom que você voltou! Já é a Nésima

vez que você nos visita!"

function ContarVisitas(form) {

visitas=GetCookie("Visitas");

if(!visitas) {

visitas = 1;

form.Contador.value="Esta é o seu primeiro click!"

} else {

visitas = parseInt(visitas) + 1;

form.Contador.value="Você já clicou " + visitas + " vezes";

}

document.cookie="Visitas="+visitas+";";

}

Faça seus testes e veja como ocorre.

Veja uma relação de cookies armazenados na subpasta Cookie presente na

pasta Windows conforme mostrado na figura a seguir:

Os nomes de cookies seguem um padrão do login da máquina acompanhado

do local do domínio ou parte no restante do nome do arquivo. A sintaxe

utilizada no conteúdo do arquivo do cookie, segue o seguinte padrão:

nome=valor;expires=data-no-formato-GMTString;path=/

nome1=valor1; nome2=valor2; nome3=valor3

Vejamos outro exemplo que irá criar dois campos de texto e um Botão. Será

colocado o nome do cookie em um campo de texto e o valor em outro campo

de texto. Clicando sobre o botão, será armazenado no computador do usuário

um registro com nome/valor, num arquivo com a origem da página.

function gravaCookie(){

var dataexp = new Date ();

dataexp.setTime (dataexp.getTime() + (24 * 60 * 60 * 1000 * 1));

//vai valer por 1 dia

setCookie (document.fm1.nome.value, document.fm1.valor.value,

dataexp);

}

Entre com um nome para o cookie:<input type = "text" name =

"nome">

<p>Entre com um valor para o cookie:<input type = "text" name=

"valor">

<p><input type = "button" value = "Gravar cookie" onClick=

"gravaCookie()">

</form>

<p>Agora vá para outra página, clicando <a

href="ck2.html">aqui</a>

Assim, através dos cookies, é possível manter uma continuação entre várias

páginas de uma aplicação. Por exemplo: em páginas de uma aplicação de ecommerce

com produtos que o usuário seleciona em determinada quantidade.

Estes dados são gravados como cookies. Depois lidos numa outra página que

tem um "carrinho de compras".

A lógica de programação destas continuidades pode ser um pouco complicada

usando JavaScript. Nós, particularmente, achamos mais fácil trabalhar (desde

que o browser aceite) com applets do Java e variáveis estáticas num frame

adicional.

Uma outra razão pela qual não gostamos de usar cookies é que muitos

crackers usam esta estrutura de acesso ao disco do usuário, para invadir

máquinas. E muita gente, com medo, desativa a aceitação de cookies (veja

abaixo como se faz no IE), o que invalida toda sua aplicação.

É sempre bom então, se você vai usar cookies, alertar o usuário de que tem

que aceitá-los para a aplicação funcionar.

ANOTAÇÕES:

______________________________________________________

FAQ SOBRE COOKIES

Cookies - são simplesmente bits de informação, pequenos arquivos texto

(arquivos com terminacao .txt), geralmente com menos de 1Kb, que o seu

browser capta em alguns sites e guarda em seu hard disk.

De onde surgem os cookies?

De você! A maioria das vezes os dados contidos nos arquivos texto vêm de

informações que você forneceu. Essas informações podem ser o seu e-mail, o

seu endereco ou qualquer informação que você tenha fornecido em um

formulário online.

Para que eles são utilizados?

Em páginas personalizadas, nais quais a cada vez que você visita surgem

opções que você selecionou previamente. Sem cookies, você teria de se

registrar e resselecionar opções a cada vez que acessasse uma destas páginas.

Com os cookies, o web site pode "lembrar" quem você é e quais as suas

preferências.

Para que mais eles são utilizados?

Compras online e registro de acesso são outros motivos correntes de

utilização. Quando você faz compras via Internet, cookies são utilizados para

criar um "carriho de compras virtual", onde seus pedidos vão sendo

registrados e calculados. Se você tiver de desconectar do site antes de

terminar as compras, seus pedidos ficarão guardados até que você retorne ao

site.

Webmasters e desenvolvedores de sites costumam utilizar os cookies para

coleta de informações. Eles podem dizer ao webmaster quantas visitas o seu

site recebeu, qual a freqüência com que os usuários retornam, que páginas

eles visitam e de que eles gostam. Essas informações ajudam a gerar páginas

mais eficientes, que se adaptem melhor as preferências dos visitantes.

Qual a utilização dos cookies na publicidade?

Algumas companhias já utilizaram, ou ainda utilizam cookies para coletar

informações pessoais sobre os usuários e posteriormente enviar-lhes anúncios

publicitários. O mais comum são os chamados spam mails, ou seja,

mensagens não solicitadas que você recebe via e-mail, geralmente anunciando

a venda de algum produto. Essa prática tem sido amplamente criticada e,

atualmente, é considerado bastante anti-ético utilizar-se das informações

providas por cookies, ou repassá-las para empresas interessadas em atingir

um determinado público.

Se cookies são arquivos texto, quem pode ler esses arquivos?

Um cookie só pode ser lido pelo site que o criou. Webmasters não podem

intrometer-se no diretório onde os cookies estão armazenados em seu

computador para obter informações a seu respeito.

Um cookie pode trazer um virus para o meu computador?

Não. Vírus somente são trasportados por arquivos executáveis. Sendo cookies

arquivos texto, não há perigo de carregarem nenhum virus anexado à eles.

Então qual o problema? Por que algumas pessoas detestam cookies?

Alguns sentimentos anti-cookie são provocados apenas por desinformação.

Cookies são simples arquivos texto, não podem entrar em seu hard disk e

capturar nenhuma informação sobre você. Eles apenas guardam informações

que você voluntáriamente forneceu ao visitar um site. E os browsers revelam

alguma informação sobre você de qualquer forma, mesmo sem a utilização dos

cookies: o seu endereço de IP, seu sistema operacional, tipo de browser

utilizado, etc.

Voce precisa aceitar cookies?

Não, não é preciso. A maioria dos browers pode ser configurada para recusar

cookies, embora não aceitando você vai perder muitos aspectos providos pela

rede. Você não terá que reconfigurar páginas personalizadas a cada vez que

visitá-las, por exemplo.

Posso aceitar alguns cookies e rejeitar outros?

Sim, basta configurar seu browser para alertá-lo sempre antes de aceitar um

cookie.

DEPURAÇÃO DE CÓDIGO

Qualquer programador que desenvolve programas com alguma linguagem

sabe que erros de código são passíveis de ocorrer à qualquer momento na

construção do programa. Isso não depende de experiência, seja novato ou

veterano em programação. Contudo, as linguagens de programação ao

encontrar um determinado erro em uma de suas linhas, interrompe a execução

do programa e exibe uma mensagem informando a origem e qual foi o erro

encontrado. Isto irá facilitar ao programador onde o mesmo deverá corrigir o

erro.

Sabemos que, quando algo deixa de funcionar corretamente como foi

designado pelo programador, isto é chamado de BUG. O processo de

eliminação destes bug’s é chamado de “depuração” ou como trata algumas

linguagens “debugging”. Caso o usuário encontre problemas na execução de

seus scripts, basta entender um pouco como os erros ocorrem para saber o

que fazer posteriormente. É preciso entender o que são erros, o que eles

significam e principalmente, como corrigí-los. É bom também, saber quais são

as mensagens de erro mais comuns que são exibidas quando o programador

estiver escrevendo e testando seus scripts em JavaScript.

ISOLAMENTO DE PROBLEMAS

Normalmente os erros ocorrem durante o processo de edição dos scripts,

portanto é bom sempre examinar todo o código ao primeiro sinal de problema.

Existem três tipos de erros que ocorrem durante a execução de um programa

em JavaScript:

Erros em tempo de carga (load-time)

Erros em tempo de execução (run-time)

Erros de lógica

ERROS EM TEMPO DE CARREGAMENTO (Load-Time)

Este tipo de erro ocorre sempre que o browser carrega o script. Eles são os

principais responsáveis pelo mal funcionamento de todo o script. É durante o

processo de carregamento que é detectado todos os erros sérios que

ocasionarão uma falha em todo o script. Com isto, o script não poderá ser

carregado corretamente enquanto o erro existir.

Neste tipo de erro, a causa maior para ocorrer são normalmente os erros na

sintaxe de alguma instrução. Um exemplo claro disto, é quando o usuário na

criação de qualquer função esquece de delimitar o bloco de suas instruções

com caractere de bloco que são as chaves. Para auxiliar a identificação do

problema. O JavaScript exibe uma caixa de alerta informando que ocorreu um

erro em tempo de carregamento.

Esta caixa de diálogo é apresentada quando o usuário dá um duplo clique

sobre a mensagem que aparece na barra de status do Internet Explorer 6.

Caso o usuário esteja utilizando uma versão anterior, esta mensagem é exibida

imediatamente.

Observe pelo exemplo da figura anterior que ele destaca a linha onde existe o

erro, o caractere que encontra-se errado e o que está faltando, neste caso é

esperado o caractere de fechamento do bloco da função. É bom saber que nem

sempre o erro poderá estar onde é informado, dependendo do erro, ele poderá

estar localizado em outra parte do código ou da linha. Para que continue à

execução do programa é necessário confirmar através do botão OK.

ERROS EM TEMPO DE EXECUÇÃO (Run-Time)

Neste tipo de erro, o problema ocorre quando o script está sendo executado,

diferente dos erros em tempo de carregamento que aparecem no momento

que o documento está sendo carregado. Normalmente são causados quando o

usuário utiliza os códigos JavaScript de maneira incorreta. Um exemplo disto

está quando o usuário faz uma referência a uma variável sem que ela tenha

sido definida ou quando o usuário aplica incorretamente os objetos JavaScript.

Vejamos um exemplo:

document(teste);

Sendo o correto:

document.write(teste);

ERROS DE LÓGICA (Logic Errors)

Já o erro de lógica ocorre sempre quando o script executa algo bem diferente

do que foi programado a executar. Neste caso, não é devido aos parênteses ou

chaves mal posicionados, mas sim, na construção do script. É necessário que o

usuário proteja seu código contra erros de lógica sempre que puder. Por

exemplo, caso o usuário defina dois campos de formulário do tipo texto e a

cada um defina um nome de variável, e em seguida, deseja que seja mostrado

o conteúdo de uma das variáveis, só que especifica a outra variável,

conseqüentemente os dados estarão trocados.

ERROS COMUNS EXISTENTES

Muitas das vezes o usuário notará que os erros encontrados são causados

pelos simples erros existentes. Vejamos os mais comuns:

Posicionamento de chaves

É comum o usuário esquecer de delimitar o bloco de instruções presentes em

uma função com os caracteres de bloco, que são as chaves. Seu uso é

obrigatório para que a linguagem compreenda onde começa e termina sua

função.

Strings entre aspas

Toda string possui aspas. Nunca esqueça delas para evitar problemas futuros.

Código de script correto

Sempre verifique o tipo de componente a ser usado. Saiba diferenciar

instruções, métodos, propriedades, funções e objetos (quando estão em

conjunto, são denominados entidades). Sempre analise seu script mais de uma

vez e verifique se as entidades estão escritas de forma correta. É comum os

programadores formatarem seus scripts com quebras de linha e tabulações

(indentações) para criar uma espécie de hierarquia das entidades. Com certeza

isso irá facilitar o acompanhamento e o relacionamento da ação de cada script.

Vejamos um exemplo de script escrito de forma consistente:

<HTML>

<HEAD>

<TITLE>Página bem definida</TITLE>

</HEAD>

<BODY>

<H1>Formatando com HTML</H1>

nome=prompt("Digite seu Nome:","");

if((nome=="")||(nome==null)){

alert("Favor Preecher o campo!");

}else{

document.write("Seja Bem Vindo"+nome);

}

</SCRIPT>

</BODY>

<HTML>

Nomes de Objetos

Sempre verificar os nomes dos objetos se estão escritos corretamente,

principalmente na diferenciação de letras maiúsculas e minúsculas. Um

exemplo disto está no uso dos objetos Date e Math que possuem suas iniciais

maiúsculas, já os outros começam com letras minúsculas.

ANALISANDO A ORIGEM DOS ERROS

É importante que o usuário na reparação de erros encontrados em seus

scripts, isole suas funções e rotinas de modo que possa analisar etapa por

etapa de seu programa. Verificar minuciosamente cada trecho das linhas do

script de maneira que encontre possíveis erros.

Muitos erros lógicos são causados por valores incorretos atribuídos as

variáveis. Para facilitar a localização destes erros, basta que o usuário defina

áreas de observação em vários locais de seu script. Estas áreas na maioria das

vezes podem ser caixas de alerta para determinar se a execução do programa

está chegando àquele ponto que se encontra. Logo após a depuração de todo o

script, o usuário terá apenas que remover estas áreas de observação.

Outros programadores, preferem ter em mãos uma cópia de todo o seu código

para que se possa fazer as devidas correções. Muitas das vezes, o usuário

enxerga no papel o que ele não vê na tela.

OUTROS ERROS COMUNS

1. Deixar de utilizar aspas em strings.

2. Má utilização das aspas e apóstrofos (aspas simples).

3. Sinal de igualdade individual para expressões de comparação.

4. Utilizar o objeto de formulário pertencente ao Documento e não a Janela.

5. Utilização dos métodos com outros objetos que não os possuem.

6. Criação de laços infinitos.

7. Falta da instrução return em uma função.

RESUMO GERAL DE OBJETOS JAVASCRIPT

OBJETO DESCRIÇÃO

anchor (âncora)

Link de hipertexto para a mesma

página. As âncoras dependem do objeto

document (documento).

anchors[] (âncoras)

Array que contém todas as âncoras no

documento.

button

Cria um botão para um formulário. Este

objeto pertence ao objeto form

(formulário).

checkbox

Uma caixa de verificação de um

formulário. Este objeto pertence ao

objeto form.

Date

Define a Data/Hora atuais. Este é um

objeto de nível superior.

document

Visualiza outros objetos no corpo de

uma página. Este objeto pertence ao

objeto window.

elements[] (elementos)

Array que apresenta todos os elementos

de um formulário. Todos os elementos

pertencem ao objeto form.

form (formulário)

Contém qualquer objeto criado em um

formulário. Este objeto pertence ao

objeto document.

forms[] (formulários)

Array que contém todos os formulários

em documento.

frame

Determina as páginas divididas no

navegador. Cada frame possui um

objeto document. Pertencente ao

objeto window.

frames[] Array de frames do objeto window.

hidden (oculto)

Elemento de formulário que cria uma

caixa de texto oculta. Pertencente ao

objeto form.

histoy

Histórico de todas as páginas visitadas.

Pertence ao objeto document.

link

Link de hipertexto. Pertence ao objeto

document.

links[] Array dos links de um documento.

location (localização)

URL (endereço) do documento atual.

Pertence ao objeto document.

Math

Utilizado na execução de cálculos

matemáticos. Objeto de nível superior.

navigator

Informações sobre o browser. Objeto de

nível superior.

options[] (opções)

Array de itens de uma lista de seleção

(select) em um formulário. Pertencente

ao objeto form.

password (senha)

Elemento de um formulário que cria

uma caixa de texto do tipo senha.

Pertencente ao objeto form.

radio (botão de opção)

Elemento de um formulário que cria cria

botões de opção. Pertencente ao objeto

form.

reset

Elemento de um formulário que cria um

botão que limpa os campos do

formulário. Pertencente ao objeto form.

select (lista de opções)

Lista de seleção de um formulário.

Pertencente ao objeto form.

string

Variáveis do tipo alfanumérico.

Pertencente ao documento que se

encontram.

submit

Elemento de um formulário que cria um

botão de envio de dados em um

formulário. Pertencente ao objeto form.

text (caixa de texto)

Elemento do formulário que cria um

campo de texto. Pertencente ao objeto

form.

textarea (área de texto)

Elemento do formulário que cria uma

área de digitação de texto. Pertencente

ao objeto form.

window (janela)

Representa a janela do browser. Objeto

de nível superior.

RESUMO GERAL DE MÉTODOS JAVASCRIPT

MÉTODOS DO OBJETO DOCUMENT

MÉTODO DESCRIÇÃO

clear Limpa a janela (window).

close Fecha o documento atual.

write

Permite a inclusão de texto no corpo do

documento.

writeln

Permite a inclusão de texto no corpo do

documento com um caractere de nova

linha anexado.

MÉTODOS DO OBJETO FORM

MÉTODO DESCRIÇÃO

blur()

Quando remove o foco de um campo do

tipo text, textarea e campos de senha

password.

click()

Quando é dado um clique sobre um

elemento de botão em formulário ou

campos do tipo radio e checkbox.

focus()

Quando é dado o foco sobre um campo

do tipo text, textarea e campos de

senha password.

select()

Quando é selecionado o conteúdo de um

campo do tipo text, textarea ou

password.

submit()

Quando o formulário é enviado ao

servidor.

MÉTODOS DO OBJETO DATE

MÉTODO DESCRIÇÃO

getDate

Retorna o dia do mês da data

especificada a partir de um objeto date.

getDay

Retorna o dia da semana da data

especificada. O valor retornado é um

valor inteiro correspondente ao dia da

semana, sendo 0 para Domingo, 1 para

Segunda-feira e assim por diante

getFullYear Retorna o ano composto de 4 dígitos.

getHours

Retorna a hora para a data especificada.

O valor retornado corresponde a um

número inteiro entre 0 e 23.

getMinutes

Retorna os minutos na hora

especificada. O valor retornado

corresponde a um número inteiro entre

0 e 59.

getMonth

Retorna o mês da data especificada. O

valor retornado corresponde a um

número inteiro entre 0 a 11, sendo 0

para janeiro, 1 para fevereiro e assim

por diante

getSeconds

Retorna os segundos da data

especificada. O valor retornado

corresponde a um número inteiro entre

0 e 59.

getTime

Retorna o número de segundos entre 1

de janeiro de 1970 e uma data

específica.

getTimezoneOffset Retorna a diferença de fuso horário em

minutos para a localidade atual.

getYear Retorna o ano de uma data específica.

parse

Retorna o número de milessegundos de

uma data a partir de 1 de janeiro de

1970, 00:00:00

setDate

Estabelece o dia do mês para uma data

especificada sendo um inteiro entre 1 ou

31.

setHours

Estabelece a hora para uma data

especificada, sendo um inteiro entre 0 e

23, representando a hora dia.

setMinutes

Estabelece os minutos para a data

especificada, sendo um inteiro entre 0 e

59.

setMonth

Estabelece o mês para a data

especificada, sendo um inteiro entre 0 e

11 para o mês.

setSeconds

Estabelece o número de segundos para

data especificada, sendo um inteiro

entre 0 e 59.

setTime

Estabelece o valor do objeto date, sendo

um inteiro representando o número de

milisegundos desde 1 de janeiro de

1970.

setYear Define o ano de uma data específica

toGMTString

Converte a data para string usando as

convenções da GMT.

toLocaleString

Converte uma data para string, usando

as convenções locais.

toString

Retorna uma string representando a

data especificada

UTC

Converte uma data delimitada por

vírgulas para o número de segundos a

partir de 1 de janeiro de 1970.

MÉTODOS DO OBJETO HISTORY

EVENTO DESCRIÇÃO

Back

Representa a URL visitada

anteriormente.

Forward

Representa a URL que estava antes de

voltar.

Representa uma URL que esteja na

relação de URL’s visitadas.

MÉTODOS DO OBJETO MATH

MÉTODOS DESCRIÇÃO

Abs Retorna o valor absoluto de um número.

Aços

Retorna o arco cosseno de um número,

em radianos.

Asin

Retorna o arco seno de um número,

radianos.

Atan

Retorna o arco tangente de um número,

em radianos.

Ceil

Retorna o menor inteiro maior ou igual a

um número.

Cos Retorna o cosseno de um número.

Eval

Calcula o conteúdo de uma expressão.

EVAL é uma função.

Exp1

Retorna o logarítmo do múmero na base

Floor

Retorna o maior inteiro menor ou igual

ao número.

isNAN

Determina se um valor é um número ou

não.

Log

Retorna o logarítmo natural de um

número (base E).

Max(num1,num2) Retorna o maior valor de dois números.

Min(num1,num2) Retorna o menor valor de dois números.

Pow(base,expoente) Retorna a base elevada ao expoente.

Random()

Retorna um número aleatório entre 0 e

Round

Retorna o valor arrendondado de um

inteiro.

Sin Retorna o seno de um número.

Sqrt Retorna a raiz quadrada de um número.

Tan Retorna a tangente de um número.

MÉTODOS DO OBJETO STRING

MÉTODOS DESCRIÇÃO

Anchor

Cria uma âncora HTML que é utilizada

como destino de um link de hipertexto.

Big

Mostra uma string em fonte maior.

Similar ao tag <BIG>.

Blink

Apresenta uma string piscante. Similar

ao tag <BLINK>.

Bold

Apresenta a string em negrito. Similar

ao tag <B>.

CharAt(índice)

Retorna o caractere no índice

especificado.

Concat(s1,s2,s3...)

Concatena várias strings, retornando

uma nova string.

Fixed

Apresenta a string em fonte

monoespaço. Similar ao tag <TT>.

Fontcolor(cor)

Apresenta uma string com uma cor

especificada. Similar ao tag <FONT

COLOR=“cor”>.

Fontsize(tamanho)

Apresenta a string com tamanho

determinado. Similar ao tag <FONT

SIZE=“tamanho”>.

IndexOf

Retorna a posição dentro da string onde

aparece em primeiro o texto

especificado.

Ex.: string.indexOf(valor,[índice]).

Italics

Apresenta o texto em itálico da mesma

forma que o tag <I>.

LastindexOf

Retorna a posição dentro da string da

última ocorrência do texto procurado.

Ex: string.lastIndexOf(valor,[índice]).

Link(href)

Cria um link HTML. Similar ao tag

<A HREF>.

Slice (início,fim)

Extrai uma parte de uma string. Onde

início é o caractere inicial da string e fim

o caractere final.

Small

Apresenta a fonte em tamanho menor

da mesma forma do tag <SMALL>.

sub

Apresenta a fonte em formato subscrito,

da mesma forma do tag <SUB>.

sup

Apresenta a fonte em formato

sobrescrito, da mesma forma do tag

<SUP>.

substring(indexA,indexB) Retorna um pedaço de um objeto string.

toLowerCase

Converte a string em caracteres

minúsculos.

toUpperCase

Converte a string em caracteres

maiúsculos.

MÉTODOS DE INTERFACE COM O USUÁRIO

MÉTODOS DESCRIÇÃO

alert

Exibe uma caixa de diálogo com o botão

OK.

confirm

Exibe uma caixa de diálogo com os

botões OK e CANCELAR.

prompt

Exibe uma caixa de diálogo solicitando a

entrada de informação ao usuário.

MÉTODOS DO OBJETO WINDOW

MÉTODOS DESCRIÇÃO

clear Limpa a janela.

clearTimeout

Limpa um contador de tempo definido

anteriormente com o método

setTimeout.

close Fecha uma janela.

open Abre uma janela

setTimeout Define um contador de tempo.

E-BOOKOASIS

Pesquisar este blog

Manual completo javascript - PARTE 16

Comentários

Postar um comentário