Entendendo de JavaScript - Parte 1

A World Wide Web (WWW) comeou como uma mdia de texto , ou seja a primeira verso de HTML , mas
esta verso no tinha a capacidade de incluir imagens grficas em uma pgina.

Sites na web atuais podem incluir uma variedade de recursos : imagens grficas , sons, animao , mas
isso possvel por causa de linguagens de script da web , como JavaScript que uma maneiras mais
fceis de sofisticar uma pgina da Web e interagir com usurios de novas maneiras.

Princpios Bsicos do JavaScript

Se voc sabe como utilizar HTML para criar um documento da Web , ento sabe que utiliza-se tags de
HTML para descrever como quer que seu documento e o navegador obedeam a seus comandos e
mostrem o documento formatado para o usurio.

Como o HTML no uma linguagem de marcao de texto simples , ela no pode responder para o
usurios , tomar deciso , nem autoriza tarefas repetitivas. Tarefas interativas como essas exigem uma
linguagem mais complexa , uma linguagem de programao , no nosso caso JavaScript.

Algumas linguagens de programao para web so muito complexas , mas as linguagens de script so
geralmente simples , por possuir uma sintaxes fcil de aprender, alm de permitirem combinar script
com HTML para criar pginas da Web interativas. Outra facilidade do JavaScript que ela uma
linguagem interpretada ou seja o navegador executa cada linha de script como as recebes , por isso
importante saber que o JavaScript so sensveis ao tipo de letra em sua sintaxe. Portanto, necessrio
que seja obedecida a forma de escrever os comandos, caso ao contrario o JavaScript interpretar, o que
seria um comando, como sendo o nome de uma varivel, mas no precisam se preocupar esses
comandos serem apresentados ao longo dos tutoriais.Isso o que difere JavaScript de outras linguagens
de programao que devem ser compiladas ou traduzidas em cdigo de mquina , antes de serem
executadas.

Introduzindo JavaScript

O Javascript foi desenvolvida pela Netscape Communications , os criadores do navegador Netscape

Navigator , e se trata da primeira linguagem de script da web a ser introduzida e , a mais popular, por
ser quase to fcil como o HTML. Logo abaixo tem algumas coisas que voc pode fazer com o
JavaScript :
Voc pode adicionar mensagens que rolam na tela ou alterar as mensagens na linha de status do
navegador.
Validar os contedos de um formulrio e fazer clculos.
Exibir mensagens para o usurio, tanto como parte de um pagina da Web como em caixas de alertas.
Fazer animaes de imagens ou criar imagens que mudam quando voc move o mouse sobre elas.
Detectar o navegador em utilizao e exibir contedo diferente para navegadores diferentes.
Detectar plug-ins instalados e notificar o usurio se um plug-ins foi exigido.
Isso apenas algumas coisas que voc pode fazer com o JavaScript , e que aprender ao longo do
tutorial.

JavaScript versus Java

Antes de aprofundarmos em JavaScript , vamos conceituar Java. Java uma linguagem de programao
desenvolvida pela Sun Microsystems que pode ser utilizada

Para criar miniaplicativos ou programas que executam dentro de uma pgina na Web. Tambm se trata
de uma linguagem compilada , mas o compilador produz cdigo para uma maquina virtual em vez de um
computador real. O cdigo virtual de maquina ento interpretado por um navegador da Web. Isso
permite aos miniaplicativos Java a executarem em PCs , Macintosh e maquinas UNIX e em diferentes da
mesma maneira.

JavaScript e Java so linguagens completamente diferentes , logo abaixo demos algumas diferenas mais
evidentes como :
Miniaplicativos Java so compilados em arquivos de classe para serem utilizados em uma pgina da
web ; JavaScript utiliza comandos simples de texto , que podem ser includos no prprio documento de
HTML.
Miniaplicativos Java geralmente so exibidos em uma caixa dentro do documento de Web ; scripts de
JavaScript podem afetar qualquer parte do prprio documento da Web.
Enquanto o JavaScript mais adequado para aplicativos simples e para adicionar recursos interativos a
pagina Web, o Java pode ser utilizado para aplicativos complexos.
Bom , ainda h outras diferenas , mas o importante lembrar que JavaScript e Java so linguagens
separadas. Elas so teis para coisas diferentes , mas elas podem ate serem utilizadas juntas para
combinar suas vantagens.

Como o Java na pagina da Web

Como voc deve saber HTML uma linguagem que voc utiliza para criar documentos da Web. Para
refrescar sua memria , o exemplo abaixo mostra um documento da Web pequeno e simples.

Exemplo 1: Neste exemplo vou mostra um documento de html simples.

<HTML>
<HEAD>
<TITLE> Minha primeira Pagina </TITLE>
</HEAD>
<BODY>
<H1> Al Mundo </H1>
<P> Bem vindo a minha pgina , mas infelizmente ainda estamos em construo </p>
</BODY>
</HTML >

Neste exemplo possui um cabealho dentro de uma tags <HEAD> e do corpo da pgina dentro das tags
<BODY>. Para adicionar JavaScript em uma pgina , voc utilizar uma tag semelhante :<SCRIPT>.

A tag <SCRPT> diz ao navegador para comear tratando o texto como um script e a tag <SCRPIT>
retorna HTML normal. Na maioria dos casos , voc no pode utilizar instrues JavaScript exceto dentro
de tags <SCRIPT>. A exceo so os handlers de eventos , que sero descritos ao longo do tutorial.

Navegadores e JavaScript

Assim como o HTML o JavaScript exige um navegador da Web para ser exibidos e navegadores diferentes
podem exibi-lo diferentemente. Diferente do HTML , os resultados de incompatibilidade de navegador
com o JavaScript so mais drsticos como:em vez de exibir seu texto incorretamente o script
absolutamente no pode executar , pode exibir uma mensagem de erro ou pode at derrubar o
navegador. Por isso achei necessrio abordar como verses diferentes do mesmo navegador trata o
JavaScript.

Netscape e Internet Explorer

A web atual dominada por dois navegadores da web populares : Netscape e Internet Explorer. O
Netscape tradicionalmente foi o mais popular dos dois , mas o Internet Explore rapidamente o superou ,
os dois navegadores incluem algum suporte para JavaScript , entretanto desde que a linguagem de
JavaScript foi desenvolvida pela Netscape , os mais novos recursos da linguagem so suportadas apenas
pelo Netscape. O Internet Explore suporta comandos bsicos de JavaScript e as verses mais novas
podem implementar tudo dos novos recursos.

A linguagem de JavaScript desenvolveu-se desde sua verso original no Netscape 2.0. Houve quatro
verses de JavaScript :
JavaScript 1.0 , a verso original , suportada pelo Netscape 2.0 e pelo Internet Explore 3.0
JavaScript 1.1 suportada pelo Netscape 3.0 e pelo Internet Explore 4.0.
JavaScript 1.2 suportada pelo Netscape 4.0 e parcialmente pelo Internet Explore 4.0
JavaScript 1.3 suportada pelo Netscape 4.5.
Cada uma dessas verses uma melhoria em relao a verso anterior e incluir um numero de novos
recursos. Os navegadores que suportam a nova verso tambm suportam scripts escritos para verses
anteriores.

A linguagem de JavaScript foi submetida ao ECMA , o Europen Standaeds Committee, esse comit
finalizou a especificao ECMA-262 , um padro para a linguagem. A versao padronizada da linguagem
as vezes referida como ECMAScript.

NOTA: Outra linguagem que voc pode ouvir JScript. Esta a maneira como a Microsoft refere-se sua
implementao do JavaScript , que parcialmente compatvel com a verso do Netscape.

Alternativa ao Java Script

JavaScript no a nica linguagem utilizada na Web. A seguir vou apresentar algumas linguagens
utilizadas na Web e suas vantagens.

VBScript

VBScript , as vezes conhecido como Visual Basic Scripting Edition , a resposta da Microsoft para
JavaScript. Assim como a sintaxes do JavaScript baseada no Java, a sintaxe no Visual basic que uma
linguagem de programao.

Como o Java Script , O VBScript uma linguagem simples e voc pode incluir instrues VBScript dentro
de um documento HTML. Em um script de VBScript , voc pode utilizar a tag < SCRIPT LANGUAGE
=VBScript>.

O VBScript pode fazer muitas coisas que o JavaScript faz e ate parecer similar em alguns casos. Isso tem
duas ventagens no princiopio: Para os j conhecem o Visual Basic , pode se mais fcil aprender VBScript
do que JavaScript; outra vantagem que o VBScript integrado ao padro Microsoft ActiveX para
aplicativos embutidos na Web.

A desvantagem do VBScript que ele suportando apenas pelo Internet Explore, j o JavaScript
suportado tanto pelo Netscape como pelo Internet Explore e alem de ser muma linguagem mais popular
e voc pode v-la em utilizao por toda Web.

CGI

CGI ( Common Gateway Interface ) no realmente uma linguagem , mas uma especificao que
permite aos programas executar em servidores da a Web. Os programas de GI podem ser escritos em um
numero de linguagens , incluindo C e Visual Basic.

Os programas de GI so amplamente utilizados na Web. Por exemplo , se voc j digitou uma informao
num formulrio e pressionou o boto para envi-las para um site da Web , muito provvel que os dados
, tenham sido enviados para um aplicativo de CGI.

A principal diferena entre o CGI e o JavaScript que o CGI executa no servidor , enquando aplicativos
JavaScript executa no cliente ou seja no navegador web. A principal desvantagem de CGI que , como os
dados devem ser enviados para o servidor Web e retornados , o tempo de resposta pode ser lento. Por
outro lado o CGI pode ler um arquivo no servidor , coisa que o JavaScript no faz. O JavaScript apenas
manipulas as informaes , ele no armazena dados.Entretanto existe uma versao de JavaScript no lado
do servidor que no tem essas limitaes.

Active X

ActiveX uma especificao desenvolvida pela Microsoft que permite aos programas Windows comuns
executar dentro de uma pagina da Web, os programas ActiveX podem se escritos em linguagem como
Visual Basic, Visual C++.

Aplicativos ActiveX podem que tambm so denominados controles , so descarregados e executados

pelo navegador da Web, como miniaplicativos Java. A diferena que os controles podem ser instalados
permanentemente quando so descarregados , eliminando a necessitade de descarrega-los novamente e
isso no acontece com o Java.

A principal vantagem do ActiveX que ele pode fazer quase qualquer coisa , mas isso tambm pode ser
uma desvantagem , porque vrios programadores j utilizaram ActiveX para trazer novas capacidades s
paginas da Web , como pagina da Web que desliga seu computadore pagina da Web que formata sua
unidade de disco.

Felizmente , o ActiveX inclui um recurso de assinatura que identifica a fonte do controle e impede que os
controles sejam modificados. Embora isso no impea que um controle danifique seu sistema, voc pode
especificar as fontes de controles em que voc confia.

O ActiveX tem duas desvantagns siginificativas , primeiro , ele no to fcil de programar como uma
linguagem de script ou Java. Segundo , o ActiveX proprietrio: funciona somente no Internet Explore e
apenas plataformas Windows.

Nota: Junto com VBScript , os aplicativos JavaScript podem ser utilizados para trabalhar com controles
ActiveX no Internet Explore. Isso permite personalizar um controle descarregando sem ter que de
compilar sua prpria verso.

Criando Scripts

Na primeira parte desse tutorial voc aprendeu que o JavaScript uma linguagem de script para
documentos da Web ou seja uma linguagem que permite injetar lgica em pginas escritas em HTML e
o script executado quando a pagina visualizada em um navegador.

importante saber que o Java Script utiliza pargrafos de lgica que podem estar "soltos" ou atrelados a
ocorrncia de eventos.

Os pargrafos soltos so executados na seqncia em que aparecem na pgina e os atrelados a eventos

so executados apenas quando o evento ocorre. Para inserir pargrafos de programao dentro do HTML
necessrio identificar o incio e o fim do set de JavaScript, da seguinte forma:

<SCRIPT>
Set de instrues
</SCRIPT>

Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visualizao
e manuteno da pgina , recomenda-se que toda a lgica seja escrita no incio do documento, atravs
da criao de funes a serem invocadas. Agora se a lgica escrita a partir de um determinado evento,
no necessrio o uso dos comandos <SCRIPT> e </SCRIPT>.

As Ferramentas de script

Uma das coisas que diferencia o JavaScript de outras linguagens de programao , que voc no
precisar de softwares especiais para criar scripts de JavaScript. A primeira coisa que voc precisa para
trabalhar com JavaScript um editor de texto.

Neste momento voc deve esta se perguntado :S preciso de um editor de texto ? No preciso de
nenhum software especial ? A resposta no , e isso se deve porque o JavaScript como dito na Parte 1
desse Tutorial um linguagem interpretada, o navegador executa cada linha de script como as recebe,
portanto, os scripts so simples e precisam ser armazenados em arquivos de texto simples, normalmente
como parte de documentos de HTML, sendo assim, qualquer editor que pode armazenar arquivos de
texto ASCII servir para criar uma pagina na Web.

Mas agora voc deve esta se perguntando : Mais qual usar? Bom, voc pode escolher entre uma ampla
variedades de editores de textos simples a sofisticados processadores de texto, se voc ainda no tiver
um editor que prefira , um editor simples e que muito provavelmente j esta includo no seu computador
funcionar muito bem.

As pginas HTML podem serem feitas utilizando-se editores de texto, como o Bloco de Notas, Write, etc.
ou utilizando editores prprios para gerar HTML, tais como Microsoft FrontPage, EditPlus. Esses editores
de HTML , incluem recursos especificamente para JavaScrpit como por exemplo: pintar as varias
instrues de JavaScript para indicar seus propsitos ou mesmo criar scripts simples automaticamente ,
vantagens que os diferem dos editores simples.

Para os usurios do Windows, eis alguns editores recomendados :

Homesite um editor HTML excelente que inclui suporte JavaScript.
Microsoft FrontPage um editor visual de HTML da Microsoft, possui um componente chamado
ScriptBuilder que permiti a criao de script simples.
NetObjectsScriptBuilder um editor orientado a script que simplifica o processo e escrever scripts.
EditPad- um editor de texto simples que possui alguns recursos ausente no Bloco de notas.
Para os usurios Macintosh recomenda-se o BBEdit, BBEdit Lite e Alpha que so bons editores de HTML
para criao de pagina na Web.

Bom , agora voc sabe o que precisa para comear a trabalhar com JavaScript : um editor e um
navegador Web para executar seu script.

Principais Comandos, Eventos e Operadores utilizado no JavaScript

Operadores Lgicos

Os principais operadores lgicos a serem utilizados em comandos condicionais so:

OPERADORES LGICOS

SIGNIFICADO

==

Igual

!=

Diferente

>

Maior

>=

Maior ou Igual

<

Menor

<=

Menor ou Igual

&&

||

Ou

Os comandos condicionais sero abordados mais abaixo.

Operadores Matemticos

Os operadores Matemticos a serem utilizados em clculos, referncias de indexadores e manuseio de

strings so :

OPERADORES MATEMTICOS

SIGNIFICADO

adio de valor e concatenao de strings.

subtrao de valores

multiplicao de valores

diviso de valores

obtm o resto de uma diviso

Ao longo dos tutoriais estes operadores sero largamente utilizados, dando, assim, uma noo mais
precisa do seu funcionamento.

Controles Especiais

CONTROLES ESPECIAIS

SIGNIFICADO

\b

backspace

\f

form feed

\n

new line caracters

\r

carriage return

\t

tab characters

//

Linha de comentrio

/*....*/

Delimitadores para inserir um texto com mais de

uma linha como comentrio.

Os delimitadores naturais para uma string so " ( aspas dupla) ou ' ( aspas simples). Caso seja
necessrio a utilizao destes caracteres como parte da string, utilize \ precedendo " ou '. Como por
exemplo : alert ("Cuidado com o uso de \" ou \' em uma string")

Estruturas de Controle ou Comandos Condicionais

Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execuo de um
programa ou seja elas possui comandos que condicionam a execuo de uma certa tarefa veracidade
ou no de uma determinada condio, ou enquanto determinada condio for verdadeira.

So eles:

Comando IF

if (condio)
{ ao para condio satisfeita }
[ else
{ ao para condio no satisfeita } ]

Exemplo :

if (Idade < 18)

{Categoria = "Menor" }
else
{Categoria = "Maior"}

Comando FOR

for ( [inicializao/criao de varivel de controle ;]

[condio ;]
[incremento da varivel de controle] )
{ ao }

Exemplo.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }

Comando WHILE

Executa uma ao enquanto determinada condio for verdadeira.

while (condio)
{ ao }

Exemplo.
var contador = 10
while (contador > 1)

{ contador-- }

Move condicional

receptor = ( (condio) ? verdadeiro : falso)

Exemplo.

NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

Eventos

Os eventos so fatos que ocorrem durante a execuo do sistema, a partir dos quais voc pode definir
aes a serem realizadas pelo programa. Logo abaixo apresentamos a lista dos eventos possveis,
indicando os momentos em que eles podem ocorrer, bem como, os objetos passveis de sua ocorrncia.

EVENTOS

OCORRNCIAS

onload

Ocorre na carga do documento. Ou seja, s ocorre no BODY(corpo) do

documento.

onunload

Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY(corpo).

onchange

Ocorre quando o objeto perde o focus e houve mudana de contedo. Vlido

para os objetos Text, Select e Textarea.

onblur

Ocorre quando o objeto perde o focus, independente de ter havido mudana.

Vlido para os objetos Text, Select e Textarea.

onfocus

Ocorre quando o objeto recebe o focus. vlido para os objetos Text, Select e
Textarea.

onclick

Ocorre quando o objeto recebe um Click do Mouse. vlido para os objetos Buton,
Checkbox, Radio, Link, Reset e Submit.

onmouseover

Ocorre quando o ponteiro do mouse passa por sobre o objeto. vlido apenas
para Link.

onselect

Ocorre quando o objeto selecionado. Vlido para os objetos Text e Textarea.

onsubmit

Ocorre quando um boto tipo Submit recebe um click do mouse. Vlido apenas
para o Form.

Neste momento voc deve esta se perguntado : Onde utilizar este eventos ? Por enquanto no se
preocupe , pois ao longo dos tutoriais todos estes operadores, comandos , controle e eventos sero
utilizados, dando assim uma noo mais precisa do seu funcionamento.

Iniciando o Script

Seu script , como na maioria dos programas de JavaScript , inicia com a tag

< Script > de HTML. Como voc aprendeu , utiliza-se as tag < Script> e </Script> para incluir um script
dentro documento de HTML, tambm importante lembrar que no se deve incluir nada exceto
instrues JavaScript vlidas entre as tag, pois se o navegador encontrar quaisquer tags de HTML que
no faz parte do script dentro das tag , ele exibir um mensagem de erro de JavaScript.
Para comear a criar o script , abra seu editor texto preferido e digite as tags<Script> de inicio e de fim
como mostrado na Figura 2.1. No meu caso escolhi o Bloco de notas como meu editor , por se tratar por
enquanto de exemplos simples.

Figura 2.1- Inserindo script

Para armazenar o script voc ter que utilizar variveis que armazena as informaes a serem
executadas ,por isso precisamos cria-la. A varivel criada automaticamente, pela simples associao
de valores a mesma.

Por exemplo : NovaVariavel = "Jos"

Neste exemplo foi criada uma varivel de nome NovaVariavel que passou a conter a string Jose. As
variveis podem ser Locais ou Globais.
As variveis Locais so aquelas criadas dentro de uma funo que so Locais e referenciveis apenas
dentro da funo.
As variveis Globais so aquelas criadas fora de funes que so Globais, podendo serem referenciadas
em qualquer parte do documento. muito importante que as variveis que precisam ser referenciadas
por vrias funes ou em outra parte do documento, precisam ser definidas como globais, embora no
seja recomendvel, em uma funo, pode ser definida uma varivel local com o mesmo nome de uma
varivel global. Para isso utiliza-se o mtodo de definio var. Como no exemplo a seguir :

Exemplo.
Varivel Global : MinhaVariavel = ""
Varivel Local : var MinhaVariavel = ""

Criando um Script Simples

O JavaScript permite que voc escreva linhas dentro de uma pgina , atravs do mtodo write. As linhas
escritas desta forma, podem conter textos, expresses JavaScript e comandos Html. As linhas escritas
atravs deste mtodo aparecero no ponto da tela onde o comando for inserido. Para voc ter uma idia

como isso ocorre vamos fazer uma teste simples, para isso vamos utilizar o Bloco de Notas , seguindo os
seguintes passos:
Abra o Bloco de Notas executado o seguinte comando Iniciar Programas Acessrios Bloco de Notas.
Depois de abrir o Bloco de Notas , digite os seguintes comandos , conforme mostrado na Figura 2.2
abaixo:

Figura 2.2-Criando Script Simples

Salve o arquivo com extenso HTML como por exemplo meuprimeiroteste.Html ,mas antes disso
aconselho a criar uma pasta aonde voc poder salvar todos os arquivos desenvolvidos no decorrer dos
tutoriais, o nome da pasta fica ao seu critrio, no meu caso crie uma pasta chamada Testes.
Feche o arquivo, depois de fechado voc ira executar este arquivo, dando um clique sobre ele.

Figura 2.3- Executando Script

Observe. Vai aparecer em sua pagina o mesmo contedo mostrado na Figura 2.3.
Inicialmente a idia do exemplo acima era escrever duas linhas, porm isso no ocorreu porque o
mtodo write no insere mudana de linha, por isso provocou o aparecimento de apenas uma linha com
os dois textos emendados. Ento para evitar este tipo de ocorrncia, existe o mtodo writeln que escreve
uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando no surtiu efeito,
obtendo-se o mesmo resultado do mtodo write. A soluo encontrada para esta situao foi a utilizao
do comando de mudana de pargrafo da linguagem Html, para isso vamos que seguir os seguintes
passos:

Abra o arquivo do exemplo feito , clique no mouse no boto esquerdo e escolha a opo Exibir cdigo
fonte, com isso ira abrir um bloco de notas aonde voc ir modifica o contedo existente por o que esta
logo abaixo:
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) + "</p>")
</script>
Salve o arquivo e feche-o. Assim voc esta de volta na pagina HTML, der um clique no boto Atualizar e
observe o que ir ocorrer.
Voc ira observar que o problema da mudana de linha foi resolvido , porm, gerou um outro problema
que uma linha em branco, entre cada linha, por se tratar de mudana de pargrafo. Caso no seja
desejado a existncia da linha em branco, a alternativa utilizar o comando Html <br> que apenas
muda de linha. Como mostra o exemplo a seguir.

<script>
valor = 30
document.write (<br>Minha primeira linha)
document.write (<br>Nesta linha aparecer o resultado de : + (10 * 10 + valor) )
</script>

Mensagens

Existem trs formas de comunicao com o usurio atravs de mensagens.

1 Forma : Apenas Observao utilizando o comando.

alert ( mensagem )

Exemplo : Este exemplo tambm simples por isso vamos utilizar o Bloco de notas. Siga os seguintes
passos indicados a seguir:
Abra o Bloco de Notas , conforme o exemplo anterior.
Digite o seguinte comando:
< Script > alert ("Certifique-se de que as informaes esto corretas") </Script > ,
depois salve o arquivo com extenso html na pasta que voc criou , como nome de sua escolha.
Execute o arquivo , dando um clique sobre ele. Voc obter os mesmo dados mostrados na Figura 2.4.

Figura 2.4 Utilizando comando alert

Clique OK, para sair da mensagem e finalizar o exemplo.
2 Forma : Mensagem que retorna confirmao de OK ou CANCELAR

confirm (mensagem)

Exemplo 2: Neste exemplo vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os
seguintes passos indicados a seguir :
Abra o Bloco de Notas , conforme o exemplo anterior.
Digite o seguinte comando:
< Script >
if (confirm ("Algo est errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") } </Script > , depois salve o arquivo com extenso html na pasta que voc criou ,
como nome de sua escolha.
Execute o arquivo, dando um clique sobre ele. Voc obter os mesmo dados mostrados na Figura 2.5.

Figura 2.5- Utilizando comando confirm

Nesta mensagem voc tem duas opes para escolher : Ok ou Cancelar. Se clicar em OK voc obter a
seguinte mensagem:

Clique em Ok para finalizar a mensagem.

Caso escolha a opo Cancelar obter a seguinte mensagem.

Clique em Ok para finalizar a mensagem.

3 Forma : Recebe mensagem via caixa de texto Input
Receptor = prompt ("Minha mensagem", "Meu texto")
Onde o Receptor o campo que vai receber a informao digitada pelo usurio, Minha mensagem a
mensagem que vai aparecer como Label da caixa de input , Meu texto um texto, opcional, que
aparecer na linha de digitao do usurio

Exemplo 3: Vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os seguintes passos
indicados a seguir:
Abra o Bloco de Notas , conforme o exemplo anterior.
Digite o seguinte comando:
< Script >
Entrada = prompt("Informe uma expresso matemtica", "")
Resultado = eval(Entrada)

document.write("O resultado = " + Resultado)

</Script > , depois salve o arquivo com extenso html na pasta que voc criou, como nome de sua
escolha.
Execute o arquivo , dando um clique sobre ele. Voc obter os mesmo dados mostrados na Figura 2.6.

Figura 2.6- Utilizando comando prompt

Digite a expresso matemtica ,clique em Ok ou Cancelar, e observe o que ir ocorrer.
Muito bem acabamos de fazer nossas primeiras pagina utilizando JavaScript. Na prxima parte deste
tutorial voc aprender como criar funes e como manipula-las.

Introduo

Na segunda parte desse tutorial voc aprendeu a criar scripts simples, a utilizar comandos bsicos que
executavam uma determinada funo. Alm de comandos condicionais, o JavaScript usa outros
comandos que em conjunto com as estruturas de controle melhoram o funcionamento da pagina Web,
por isso achei importante abordar alguns comandos antes exploramos a criao de funes do
JavaScript. O JavaScript oferece os seguintes comandos :

Var
No JavaScript, nem sempre necessrio definir uma varivel antes de utiliz-la, o que ocorre com
variveis globais, porm, importante ressaltar que a utilizao da instruo var, com relao a
documentao muito vlida. J nas definies de variveis locais, obrigatrio a utilizao da
instruo var. Voc pode armazenar um valor na prpria linha de definio da varivel, se no fizer, o
JavaScript interpretara que esta varivel possui um valor desconhecido ou nulo.

Forma geral:

Var NomeDaVarivel [ = <valor> ];

Exemplo:
Var
Contador
Var
Var Teste; // Neste caso, Teste possui valor null

=
0;
Inic="",Tolls=0,Name="JAVASCRIPT";

with
Quando voc precisar manipular vrias propriedades de um mesmo objeto, provavelmente voc no
quer ser obrigado a repetir todas as vezes a digitao do nome do objeto. A instruo With, permite fazer
isso eliminando a necessidade de digitar o nome do objeto todas as vezes.

Forma geral:

with (<objeto>)
{
... Instrues
}
Por exemplo vamos supor que ser necessrio executar uma srie de operaes matemticas:

Exemplo:

with
{

(Math)

a=PI;
b=Abs(x);
c=E;
}

Break

Pode ser executado somente dentro de loops do For... ou While... e tem como objetivo o cancelamento da
execuo do loop sem que haja verificao na condio de sada do loop, passando a execuo a linha
imediatamente posterior ao trmino do loop.

Forma geral:

Break

Exemplo:

Neste exemplo, quando a varivel x atinge o valor 10 o loop cancelado, e impresso o nmero 10 na
tela.

For (var x=1 ; x < 10 ; x++)

{
If (x = = 10)
{ x=x+1
Break }
} document.write(x) // resulta: 10
Continue

Pode ser executado somente dentro de loops For... ou While... e tem por objetivo o cancelamento da
execuo do bloco de comandos passando para o incio do loop.

Forma geral:
Continue

Exemplo:

Neste exemplo, sero impressos os nmeros de 1 a 10, com exceo do nmero 9, ou seja, quando a
varivel x atinge o valor 9 a execuo do bloco de comandos interrompida e o controle retorna ao incio
do loop, onde a varivel x ser incrementada.

For (var x=1 ; x < 10 ; x++)

{
If (x = = 9)
{
continue
}
document.write(x)
}

Return
As funes podem ou no retornar alguma informao, o que feito com o comando Return.

A definio de uma funo feita da seguinte forma:

FunctionNomeDaFuno([ parametro1, parametro2, ..., parametroN ])

{
...
[Return(ValorDeRetorno)]
}

Comentrios

Comentrios podem ser formulados de varias maneiras, dependendo do efeito que voc precisa. Para
comentrios longos de vrias linhas, ou blocos de comentrios, use: /*
O barra-asterisco inicia um bloco de comentrio que pode conter quantas linhas voc precisar todo o
texto aps o barra asterisco ignorado, at que asterisco-barra seja encontrado, terminando assim o
bloco de comentrio */ .

Para comentrios de uma linha, use barra dupla (//) para introduzir o comentrio.

Exemplo:

// este texto ser tratado como comentrio

<html>
<head>
<script

>

Function Alo(){
alert("Al mundo!!!");
}
// comentrio
</script>
</head>
<body>
...
<script>Alo();</script>
...
</body>
</html>
Criando Funes

Para aprender a criar uma funo primeiramente voc deve saber seu significado. Funo nada mais
que conjunto de instrues, agrupadas para executar uma determinada tarefa quando for acionada. A
sintaxe geral a seguinte:

function NomeFuno (Parmetros)

{ Ao }

A melhor forma de declarar funes so entre as tags <head> de sua pgina HTML, pois elas so
freqentemente chamadas por eventos acionados pelo usurio. Assim parece razovel colocar as
funes entre as tags <head>, com isso elas so carregadas antes que o usurio faa alguma coisa que
possa chamar uma funo.

Exemplo : Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de
idade, recebendo como parmetro a sua idade.

function Idade (Anos) {

if (Anos > 17)
{ alert ("Maior de Idade") }
else
{ alert ("menor de Idade") }

Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual seja informada a idade
e, a cada informao, a funo seja acionada.

<form>
<input type=text size=2 maxlength=2 name="Tempo"
onchange="Idade(Tempo.value)">
</form>

Observe-se que o parmetro passado para a funo quando ocorre o evento "onchange" foi o contedo
da caixa de texto "Tempo" da propriedade "value" e que, na funo, chamamos de "Anos". Ou seja, no
existe co-relao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o
contedo passado.

Nota: importante voc saber que no JavaScript, no possvel utilizar a recursividade, ou seja, uma
funo no pode chamar ela mesma .

Funes Intrnsecas ou Internas

A linguagem JavaScript alm dos recursos descritos anteriormente, ainda possui algumas funes
internas, que no esto ligadas diretamente a nenhum objeto, porm isso no impede que essas funes
recebam objetos como parmetros. A seguir estas funes sero vistas detalhadamente:
escape - Obtm o cdigo ASCII de um caracter que no seja alfanumrico.
Ex: document.write(escape("@"))
eval - Avalia uma expresso numrica, retornando um resultado tambm numrico.
Ex: document.write(eval(10*9*8*7*6*5*4*3*2))
parseFloat - Converte uma string que representa um nmero, para um nmero com ponto flutuante.
Caso a string no possa ser avaliada, a funo retorna 0.
Ex: document.write(parseFloat("-32.465e12")
parseInt - Converte uma string, que representa um nmero em uma base predefinida para base 10. Caso
a string possua um caracter que no possa ser convertido, a operao para, retornando o valor antes do
erro.
Ex: paseInt("string",base);

parseInt("FF",15) // retorna 256

parseInt("3A",10)
parseInt("10",2) // retorna 2

Funes tipicamente Matemticas

//

retorna

Math.abs(nmero) - retorna o valor absoluto do nmero (ponto flutuante)

Math.ceil(nmero) - retorna o prximo valor inteiro maior que o nmero

Math.floor(nmero) - retorna o prximo valor inteiro menor que o nmero

Math.round(nmero) - retorna o valor inteiro, arredondado, do nmero

Math.pow(base, expoente) - retorna o clculo do exponencial

Math.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidos

Math.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidos

Math.sqrt(nmero) - retorna a raiz quadrada do nmero

Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)

Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)

Math.sin(nmero) - retorna o seno de um nmero (anglo em radianos)

Math.asin(nmero) - retorna o arco seno de um nmero (em radianos)

Math.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos)

Math.acos(nmero) - retorna o arco cosseno de um nmero (em radianos)

Math.tan(nmero) - retorna a tangente de um nmero (anglo em radianos)

Math.atan(nmero) - retorna o arco tangente de um nmero (em radianos)

Math.pi retorna o valor de PI (aproximadamente 3.14159)

Math.log(nmero) - retorna o logartmo de um nmero

Math.E - retorna a base dos logartmos naturais (aproximadamente 2.718)

Math.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693)

Math.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442)

Math.LN10 retorna o valor do logartmo de 10 (aproximadamente 2.302)

Math.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434)

Nota: Em todas as funes, quando apresentamos a expresso "(nmero)", na verdade queremos nos
referir a um argumento que ser processado pela funo e que poder ser: um nmero, uma varivel ou
o contedo de um objeto (propriedade value).

Neste momento voc deve estar pensando : Como e quanto vou usar estas funes ? Bom, por enquanto
no precisa se preocupar, pois isso vai esta especificados nos outros tutorias . Por enquanto voc esta
aprendendo o bsico de como criar uma funo , como utilizar e armazenar valores em uma varivel .
Antes de aprender mais sobre os detalhes da linguagem JavaScript , talvez ser mais til ter uma idia
geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web.

Introduo

Na terceira parte desse tutorial voc aprendeu como criar funes e alguns comandos que em conjunto
com as estruturas de controle melhoram o funcionamento da pagina Web, tambm aprendeu como
utilizar e armazenar informaes numa varivel e tambm qual o melhor local para construir uma
funo, assim elas so carregadas antes que o usurio faa alguma coisa que possa chama-la.

Ento antes de voc aprender mais sobre os detalhes da linguagem JavaScript, talvez ser mais til ter
uma idia geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web. Nesta parte do
tutorial voc ter um rpido exame de alguns dos aplicativos mais teis para o JavaScript atravs dos
seguintes tpicos: Aprimorando uma Interface com o usurio do site com JavaScript , O que o Java pode
fazer com imagens e animao, como o JavaScript trabalha com plug-ins de Navegadores e etc...

Aprimorando uma interface como usurio do site com o JavaScript

Voc nunca ficou entediado diante de um site Web ? Voc j visitou um site onde tudo esttico , onde
s possui texto e mais texto , que cansa os olhos ? Pois , uma das qualidades do JavaScript a
possibilidade de poder adicionar um pouco de animao a uma pagina da Web e isso inclui recursos
interessantes como mensagens que rolam na tela , sendo assim uma maneira de apresentar as
informaes sem deixar os usurios entediados e possibilitando a ele uma maior interao com a Web.

Uma outra maneira de aprimorar a interface seria utilizar o JavaScript para controlar a linha de status do
Navegador , a linha de status nada mais do que aquela faixa acizentada na parte inferior da janela do
navegador como mostrado na Figura 4.1.

Figura 4.1- Linha de status.

A linha de status normalmente serve para dois propsitos principais:

Exibir as descries de menu e itens de barra de ferramentas.
Exibir o URL de links quando o ponteiro de mouse passar por cima dos links.
Com a utilizao do JavaScript , voc mesmo pode adquirir controle sobre a linha de status. Mas agora
voc deve esta se perguntando: como ? Bom, voc deve j ter visto em algum site mensagens que rolam
na tela na linha de status, embora possa parecer irritante em alguns casos, uma das utilizaes mais
populares do JavaScript e voc aprendera como criar um script para rolar mensagens na linhas de status
e tambm vai aprender a tirar outros proveitos desse recurso como substituir a exibio de URL na linha
de status com uma descrio do link quanto o mouse esta sobre ele.

Voc tambm pode utilizar o JavaScript para criar listas de drop-down ,provavelmente voc deve ter visto
ou utilizado uma lista drop-dows para selecionar um titulo da pagina da lista e depois pressionar um
boto para carregar aquela pgina , em alguns casos carregada logo que voc a selecionar . Como
voc pode perceber que so recursos como esses que tornam os site mais fcil de se navegar , e outro
fato importante que estes recursos normalmente so realizados com o JavaScript.

Pop_up e outros recursos

O JavaScript tem vrios recursos que permite a voc comunicar-se com o usurio de maneiras mais
estimulantes do s com HTML. Por exemplo voc pode criar pop_up de alerta , confirmao ou
mensagem de aviso com o JavaScript. Agora voc deve esta pensando assim : Opa! Eu j vi isso . e
viu mesmo , na Segunda parte desse tutorial aprendemos sobre as mensagens que podemos criar com o
JavaScript e ate criamos algumas no mesmo. Pois , esta tambm uma forma de voc se interagir
com o usurio alerta-o sobre erros , apresenta-o um aviso ou uma nota de iseno de responsabilidades
ou solicitando-o uma informao, tornando a sua pgina na Web um ambiente gostoso de se navegar.

Imagens e animaes

Uma coisa que torna uma pagina na Web estimulante o uso de imagens grficas. E voc ira aprender
neste tutorial como trabalhar com imagens e animaes.

Quanto um navegador carrega uma pagina de HTML , ele exibe as imagens grficas junto do texto , tudo
fica esttico ou seja a imagens no se move a no ser que voc mexa no cdigo html e mude a imagem
de lugar. Com a ajuda do JavaScript , voc pode tornar as imagens grficas mais dinmicas, que permite
substitui uma imagem em uma pagina por outra imagem sem recarregar a pagina. Uma das utilizaes
mais comuns desse recurso do JavaScript criar imagens que se alteram quando o mouse move-se sobre
elas. Isso normalmente utilizado para destacar uma imagem utilizada como um link quando o usurio
move o ponteiro o mouse atravs dele.

Formulrios Interativos

Um dos recursos , talvez o mais poderoso da Web , o uso de formulrios interativos , que permite ao
usurio inserir informaes e interagir com o site . Isso torna tudo possvel , de formulrios de pedidos
questionrios e paginas personalizveis.

Normalmente os formulrios so tratados por um script de CGI ( Common Gateway Interface ) , citado na
primeira parte desse tutorial. Ento voc deve se lembrar que esse script executado no servidor da
Web, ou seja quanto o usurio insere informaes e pressiona o boto Submit , ele enviado para o
script de CGI para o processamento . O script ento envia de volta um resultado na forma de outra
pagina na Web.

Embora o CGI seja um sistema poderoso, ele tem desvantagens para algumas utilizaes de formulrios ,
a principal delas que ao submeter os dados em comunicao com o servidor da Web pode demorar
segundos ou vrios minutos, sendo que normalmente o CGI responsvel pela validao do formulrio
ou dos dados que foram inseridos, por exemplo , quando o usurio insere somente dez dgitos em um
campo de numero do CPF ou deixa em branco um preenchimento obrigatrio , o script pode alerta-lo e
solicitar as informaes ausentes , tornando assim um processo demorado ou depois de esperar uns dez
minutos o usurio recebe uma resposta indicando que precisa fornecer informaes que faltam e
comear de novo .E cada para nos isso frustaste no , com certeza desanima qualquer um e as vezes
acabamos optando pela parte mais fcil que desistindo da tarefa que estvamos executando
simplesmente saindo do site ,mas com certeza voc no quer isso no ? E tambm deve esta se
perguntando como o JavaScript trata isso ? Logo vou responder , o JavaScript fornece uma soluo
bastante conveniente para esse problema .Um programa de JavaScript pode ler os dados no formulrio
sem qualquer comunicao com o servidor e exibir uma mensagem de erro em uma caixa de alerta e o
script pode ate mover o curso para o campo que contem erro , alguns casos o JavaScript pode ser
utilizado para tratar o envio de formulrios , enviando os resultados via email. O script tambm pode
passar os dados para um script de CGI depois de valida-lo.

Nota: Voc deve esta se perguntando : Se o JavaScript pode trabalhar com formulrios mais rpidos que
o CGI e sem comunica-se com o servidor , ento por que utilizar CGI? A resposta que o CGI pode fazer
coisas que uma linguagem script do lado do cliente no pode fazer , como gravar dados em um arquivo
no servidor ou trabalhar com um banco de dados.( Existe uma verso de JavaScript que roda no servidor
que tambm pode desempenhar essas funes. )

Detectando Navegadores

O HTML foi projetado para ser multiplataforma, em outras palavras sua pagina deveria ter a mesma
aparncia em qualquer navegador em qualquer plataforma de computador , mas isso no o que
acontece , embora os novos navegadores da Microsoft e da Netscape estejam evoluindo na direo de
um padro comum , ainda h diferenas na maneira de tratarem o cdigo HTML.

Mesmo que seja possvel construir um documento simples de HTML de modo que aparea da mesma
forma nos dois navegadores , novos recursos como HTML dinmico no se comportam da mesma
maneira. Uma soluo ter paginas especificas do navegador e uma genrica para outros.

H alguns sites que simplesmente pedem aos usurios que dem um clique no link para a verso
apropriada do seu navegador. Com JavaScript, voc pode automatizar esse processo : sua pagina pode
detectar o tipo e a verso do navegador do usurio e envi-lo para a pagina personalizada apropriada ou
utilizar JavaScript para personalizar a sada de uma nica pagina .

Uma diferena importante entre navegadores da Microsoft e da Netscape a maneira como eles tratam
o JavaScript. possvel detectar a verso do navegador utilizando um script universal simples e ento
utilizar comandos de JavaScript separados para navegadores diferentes.

Plug-ins

Os plug-ins so suplementos de navegador que permite que tipos diferentes de contedo sejam
utilizados dentro de uma pagina na Web. Os plug-ins mais comuns so :
RedAudio , para suporte de udio streaming
QuickTime, para videoclipes embutidos
Adobe Acrobat, para documentos precisamente formatados
Shock Wave, para animaes e aplicativos interativos
Embora voc possa utiliza contedo plug-in para adicionar qualquer coisa em sua pagina na Web, h um
problema importante : independente de alguns plug-ins padro que so includos com navegadores ,
voc no pode realmente contar com que a audincia inteira de sua pagina , tenha o plug-in instalado.

Isso torna os plug-ins uma questo semelhante a das verses de navegadores , ou seja , voc tem que
escolher um plug-in particular para suportar e esperar que os usurios o instalem ou deve criar paginas
alternativas em geral uma utilizando plug-in e outras sem eles. Mas uma vez , o JavaScript pode tornar a
situao um pouco mais controlvel , voc pode utiliza o JavaScript para detectar se o navegador tem
plug-in particular instalado e modificar a pagina HTML , se o plug-in no estiver disponvel , seu script
pode enviar o usurio para uma pagina diferente ou mesmo envia-lo para descarregar a pagina de plugin, com certeza voc j deve ter visto isto em uma pagina na Web. Junto com a deteco de plug-in
instalados , voc pode utilizar o JavaScript para trabalhar com o contedo do plug-in. O Netscape chama
esse recurso de LiveConnect. Utilizando este sistema voc pode controlar um plug-in com JavaScript, por
exemplo , voc pode incluir um som embutidos em uma pagina e utilizar o JavaScript para reproduzir o
som em momentos apropriado.

Nota: A especificao LiveConnect tambm permite que programas JavaScript se comuniquem com
miniaplicativos Java e permite que miniaplicativos Java acessem variveis e comandos JavaScript.

Copiando um Script

Agora voc deve ter uma idia das muitas coisas que pode fazer com o JavaScript. E mais que natural
que voc talvez queria fazer algumas melhorias em seu site imediatamente. Embora voc acabe
aprendendo a criar scripts teis e complicados apartir do zero, as vezes conveniente ser capaz de
utilizar um recurso sem completamente entend-lo.

Por exemplo , suponha que voc queira utilizar uma mensagem de linha de status que rola em sua
pagina. Em vez de criar um programa para fazer isso apartir do zero , voc pode copiar um script
funcional da pagina de outra pessoa. Mas importante fica atento , porque os scripts pertencem s
pessoas que os criam , exatamente como qualquer coisa em uma pagina da Web e voc pode estar
violando direitos autorais se voc copiar um. Se quiser utilizar um script de pagina de outra pessoa,
certifique-se de pedir permisso . A um numero de sites que oferecem scripts grtis para pegar , faa
uma pesquisa na Internet e veja alguns exemplos .

Por esta hora , voc aprendeu sobre algumas utilizaes mais comuns do JavaScript. Voc pode
implementar qualquer um desses recursos utilizando script simples ou mesmo um nico comando em
alguns casos. Entretanto , no fique pensando que o JavaScript pode somente fazer coisas simples, voc
pode criar programas complexos com o JavaScript para fazer qualquer coisa , embora haja limitaes.

Introduo

Na terceira parte desse tutorial voc aprendeu como criar funes e alguns comandos que em conjunto
com as estruturas de controle melhoram o funcionamento da pagina Web, tambm aprendeu como
utilizar e armazenar informaes numa varivel e tambm qual o melhor local para construir uma
funo, assim elas so carregadas antes que o usurio faa alguma coisa que possa chama-la.

Ento antes de voc aprender mais sobre os detalhes da linguagem JavaScript, talvez ser mais til ter
uma idia geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web. Nesta parte do
tutorial voc ter um rpido exame de alguns dos aplicativos mais teis para o JavaScript atravs dos
seguintes tpicos: Aprimorando uma Interface com o usurio do site com JavaScript , O que o Java pode
fazer com imagens e animao, como o JavaScript trabalha com plug-ins de Navegadores e etc...

Aprimorando uma interface como usurio do site com o JavaScript

Voc nunca ficou entediado diante de um site Web ? Voc j visitou um site onde tudo esttico , onde
s possui texto e mais texto , que cansa os olhos ? Pois , uma das qualidades do JavaScript a
possibilidade de poder adicionar um pouco de animao a uma pagina da Web e isso inclui recursos
interessantes como mensagens que rolam na tela , sendo assim uma maneira de apresentar as
informaes sem deixar os usurios entediados e possibilitando a ele uma maior interao com a Web.

Uma outra maneira de aprimorar a interface seria utilizar o JavaScript para controlar a linha de status do
Navegador , a linha de status nada mais do que aquela faixa acizentada na parte inferior da janela do
navegador como mostrado na Figura 4.1.

Figura 4.1- Linha de status.

A linha de status normalmente serve para dois propsitos principais:

Exibir as descries de menu e itens de barra de ferramentas.
Exibir o URL de links quando o ponteiro de mouse passar por cima dos links.
Com a utilizao do JavaScript , voc mesmo pode adquirir controle sobre a linha de status. Mas agora
voc deve esta se perguntando: como ? Bom, voc deve j ter visto em algum site mensagens que rolam
na tela na linha de status, embora possa parecer irritante em alguns casos, uma das utilizaes mais
populares do JavaScript e voc aprendera como criar um script para rolar mensagens na linhas de status
e tambm vai aprender a tirar outros proveitos desse recurso como substituir a exibio de URL na linha
de status com uma descrio do link quanto o mouse esta sobre ele.

Voc tambm pode utilizar o JavaScript para criar listas de drop-down ,provavelmente voc deve ter visto
ou utilizado uma lista drop-dows para selecionar um titulo da pagina da lista e depois pressionar um
boto para carregar aquela pgina , em alguns casos carregada logo que voc a selecionar . Como
voc pode perceber que so recursos como esses que tornam os site mais fcil de se navegar , e outro
fato importante que estes recursos normalmente so realizados com o JavaScript.

Pop_up e outros recursos

O JavaScript tem vrios recursos que permite a voc comunicar-se com o usurio de maneiras mais
estimulantes do s com HTML. Por exemplo voc pode criar pop_up de alerta , confirmao ou
mensagem de aviso com o JavaScript. Agora voc deve esta pensando assim : Opa! Eu j vi isso . e
viu mesmo , na Segunda parte desse tutorial aprendemos sobre as mensagens que podemos criar com o
JavaScript e ate criamos algumas no mesmo. Pois , esta tambm uma forma de voc se interagir
com o usurio alerta-o sobre erros , apresenta-o um aviso ou uma nota de iseno de responsabilidades
ou solicitando-o uma informao, tornando a sua pgina na Web um ambiente gostoso de se navegar.

Imagens e animaes

Uma coisa que torna uma pagina na Web estimulante o uso de imagens grficas. E voc ira aprender
neste tutorial como trabalhar com imagens e animaes.

Quanto um navegador carrega uma pagina de HTML , ele exibe as imagens grficas junto do texto , tudo
fica esttico ou seja a imagens no se move a no ser que voc mexa no cdigo html e mude a imagem
de lugar. Com a ajuda do JavaScript , voc pode tornar as imagens grficas mais dinmicas, que permite
substitui uma imagem em uma pagina por outra imagem sem recarregar a pagina. Uma das utilizaes
mais comuns desse recurso do JavaScript criar imagens que se alteram quando o mouse move-se sobre
elas. Isso normalmente utilizado para destacar uma imagem utilizada como um link quando o usurio
move o ponteiro o mouse atravs dele.

Formulrios Interativos

Um dos recursos , talvez o mais poderoso da Web , o uso de formulrios interativos , que permite ao
usurio inserir informaes e interagir com o site . Isso torna tudo possvel , de formulrios de pedidos
questionrios e paginas personalizveis.

Normalmente os formulrios so tratados por um script de CGI ( Common Gateway Interface ) , citado na
primeira parte desse tutorial. Ento voc deve se lembrar que esse script executado no servidor da
Web, ou seja quanto o usurio insere informaes e pressiona o boto Submit , ele enviado para o
script de CGI para o processamento . O script ento envia de volta um resultado na forma de outra
pagina na Web.

Embora o CGI seja um sistema poderoso, ele tem desvantagens para algumas utilizaes de formulrios ,
a principal delas que ao submeter os dados em comunicao com o servidor da Web pode demorar
segundos ou vrios minutos, sendo que normalmente o CGI responsvel pela validao do formulrio
ou dos dados que foram inseridos, por exemplo , quando o usurio insere somente dez dgitos em um
campo de numero do CPF ou deixa em branco um preenchimento obrigatrio , o script pode alerta-lo e
solicitar as informaes ausentes , tornando assim um processo demorado ou depois de esperar uns dez
minutos o usurio recebe uma resposta indicando que precisa fornecer informaes que faltam e
comear de novo .E cada para nos isso frustaste no , com certeza desanima qualquer um e as vezes
acabamos optando pela parte mais fcil que desistindo da tarefa que estvamos executando
simplesmente saindo do site ,mas com certeza voc no quer isso no ? E tambm deve esta se
perguntando como o JavaScript trata isso ? Logo vou responder , o JavaScript fornece uma soluo
bastante conveniente para esse problema .Um programa de JavaScript pode ler os dados no formulrio
sem qualquer comunicao com o servidor e exibir uma mensagem de erro em uma caixa de alerta e o
script pode ate mover o curso para o campo que contem erro , alguns casos o JavaScript pode ser
utilizado para tratar o envio de formulrios , enviando os resultados via email. O script tambm pode
passar os dados para um script de CGI depois de valida-lo.

Nota: Voc deve esta se perguntando : Se o JavaScript pode trabalhar com formulrios mais rpidos que
o CGI e sem comunica-se com o servidor , ento por que utilizar CGI? A resposta que o CGI pode fazer
coisas que uma linguagem script do lado do cliente no pode fazer , como gravar dados em um arquivo
no servidor ou trabalhar com um banco de dados.( Existe uma verso de JavaScript que roda no servidor
que tambm pode desempenhar essas funes. )

Detectando Navegadores

O HTML foi projetado para ser multiplataforma, em outras palavras sua pagina deveria ter a mesma
aparncia em qualquer navegador em qualquer plataforma de computador , mas isso no o que
acontece , embora os novos navegadores da Microsoft e da Netscape estejam evoluindo na direo de
um padro comum , ainda h diferenas na maneira de tratarem o cdigo HTML.

Mesmo que seja possvel construir um documento simples de HTML de modo que aparea da mesma
forma nos dois navegadores , novos recursos como HTML dinmico no se comportam da mesma
maneira. Uma soluo ter paginas especificas do navegador e uma genrica para outros.

H alguns sites que simplesmente pedem aos usurios que dem um clique no link para a verso
apropriada do seu navegador. Com JavaScript, voc pode automatizar esse processo : sua pagina pode
detectar o tipo e a verso do navegador do usurio e envi-lo para a pagina personalizada apropriada ou
utilizar JavaScript para personalizar a sada de uma nica pagina .

Uma diferena importante entre navegadores da Microsoft e da Netscape a maneira como eles tratam
o JavaScript. possvel detectar a verso do navegador utilizando um script universal simples e ento
utilizar comandos de JavaScript separados para navegadores diferentes.

Plug-ins

Os plug-ins so suplementos de navegador que permite que tipos diferentes de contedo sejam
utilizados dentro de uma pagina na Web. Os plug-ins mais comuns so :
RedAudio , para suporte de udio streaming
QuickTime, para videoclipes embutidos
Adobe Acrobat, para documentos precisamente formatados
Shock Wave, para animaes e aplicativos interativos

Embora voc possa utiliza contedo plug-in para adicionar qualquer coisa em sua pagina na Web, h um
problema importante : independente de alguns plug-ins padro que so includos com navegadores ,
voc no pode realmente contar com que a audincia inteira de sua pagina , tenha o plug-in instalado.

Isso torna os plug-ins uma questo semelhante a das verses de navegadores , ou seja , voc tem que
escolher um plug-in particular para suportar e esperar que os usurios o instalem ou deve criar paginas
alternativas em geral uma utilizando plug-in e outras sem eles. Mas uma vez , o JavaScript pode tornar a
situao um pouco mais controlvel , voc pode utiliza o JavaScript para detectar se o navegador tem
plug-in particular instalado e modificar a pagina HTML , se o plug-in no estiver disponvel , seu script
pode enviar o usurio para uma pagina diferente ou mesmo envia-lo para descarregar a pagina de plugin, com certeza voc j deve ter visto isto em uma pagina na Web. Junto com a deteco de plug-in
instalados , voc pode utilizar o JavaScript para trabalhar com o contedo do plug-in. O Netscape chama
esse recurso de LiveConnect. Utilizando este sistema voc pode controlar um plug-in com JavaScript, por
exemplo , voc pode incluir um som embutidos em uma pagina e utilizar o JavaScript para reproduzir o
som em momentos apropriado.

Nota: A especificao LiveConnect tambm permite que programas JavaScript se comuniquem com
miniaplicativos Java e permite que miniaplicativos Java acessem variveis e comandos JavaScript.

Copiando um Script

Agora voc deve ter uma idia das muitas coisas que pode fazer com o JavaScript. E mais que natural
que voc talvez queria fazer algumas melhorias em seu site imediatamente. Embora voc acabe
aprendendo a criar scripts teis e complicados apartir do zero, as vezes conveniente ser capaz de
utilizar um recurso sem completamente entend-lo.

Por exemplo , suponha que voc queira utilizar uma mensagem de linha de status que rola em sua
pagina. Em vez de criar um programa para fazer isso apartir do zero , voc pode copiar um script
funcional da pagina de outra pessoa. Mas importante fica atento , porque os scripts pertencem s
pessoas que os criam , exatamente como qualquer coisa em uma pagina da Web e voc pode estar
violando direitos autorais se voc copiar um. Se quiser utilizar um script de pagina de outra pessoa,
certifique-se de pedir permisso . A um numero de sites que oferecem scripts grtis para pegar , faa
uma pesquisa na Internet e veja alguns exemplos .

Por esta hora , voc aprendeu sobre algumas utilizaes mais comuns do JavaScript. Voc pode
implementar qualquer um desses recursos utilizando script simples ou mesmo um nico comando em
alguns casos. Entretanto , no fique pensando que o JavaScript pode somente fazer coisas simples, voc
pode criar programas complexos com o JavaScript para fazer qualquer coisa , embora haja limitaes.
Utilizando Funes

Na terceira parte desse tutorial, voc aprendeu a criar funes simples que contm uma lista de
instrues que executa alguma tarefa. Nessa parte iremos aprender como utiliza-las e organiza-las
dentro de um script.

Como j sabemos o navegador comea a interpretar a primeira instruo depois da tag <SCRIPT> e
segue cada instruo na ordem at alcanar a tag</SCRIPT> de fechamento ou quanto encontra erro.

Embora essa abordagem parece simples , ela apenas direta com scripts curtos e pode torna-se confuso
para o navegador ler scripts enormes , ento para torna-los mais fceis e organizveis , utilizamos as
funes, cuja a definio j foi abordada na terceira parte desse tutorial.

Definindo uma funo

Como definido na terceira parte desse tutorial , funo nada mais que um grupo de instrues de
JavaScript que podem ser tratadas como uma unidade nica. Ento para utilizar uma funo voc deve
primeiro defini-la, como mostrado no exemplo abaixo:

function AloMundo( ) { alert ( Alo Mundo); }

Nesse exemplo, definimos uma funo que exibi uma mensagem de alerta para o usurio. Esta iniciar
com a palavra chave function e o nome da funo AloMundo. As primeiras e ultimas linhas da definio
de funo incluem chaves ( { e } ) . Voc as utiliza para incluir todas as instrues na funo. O
navegador utiliza as chaves para determinar onde a funo inicia e termina.

Entre as chaves, essa funo particular armazena uma nica linha. Esta utiliza a funo de alerta
embutida que exibe uma mensagem de alerta. A mensagem conter o texto Alo Mundo.

Agora, sobre aqueles parnteses. A funo atual AloMundo faz sempre a mesma coisa ou seja todas as
vezes que voc a utiliza, ela exibe a mesma mensagem. Embora isso evite um pouco de digitao, ela
realmente no fornece muito benefcio.

Para torna sua funo mais flexvel, voc pode adicionar parmetros, tambm conhecidos como
argumentos. Estes so variveis que so recebidas pela funo toda vez que ela chamada. Por
exemplo, voc pode adicionar um parmetro chamado who que diz para a funo modificada.

Function AloMundo( who ) { alert ( Al Mundo,+who); }

Naturalmente, para utilizar essa funo voc deveria inclui-la em um documento de HTML. Como foi
falando nos tutoriais anteriores, o melhor lugar para definir uma funo dentro da seo <HEAD> do
documento, j que as instrues na seo <HEAD> so executadas primeiro, isso assegura que a funo
seja definida antes de ser utilizada. No exemplo abaixo mostra a funo AloMundo no cabealho de um
documento de HTML.

<HTML>
<HEAD>
<TITLE>Definindo Funes</TITLE>
<SCRIPT>
function AloMundo(who) { alert ("Al Mundo,"+who); }
</SCRIPT>
</HEAD>
<BODY>
No corpo da pgina voc chama a funo .
</BODY>
</HTML>

Voc pode testar o exemplo acima em qualquer editor que gere HTML de sua preferencia, no meu caso o
teste foi executado num editor de texto Bloco de Notas, por se tratar ainda de um exemplo simples. A
Figura 5.0 mostra o que foi executado desse exemplo.

Figura 5.0- Definindo Funes

Voc pode perceber atravs da Figura 5.0 que a funo no foi executada, mais isso se deve pelo fato de
no termos chamamos a funo, que geralmente chamada no corpo da pagina de um documento
HTML.

Chamando a Funo

Pronto! Acabamos de definimos a funo e coloca-la num documento de HTML, porm vimos que ao
carregamos o script em um navegador, ele no fez absolutamente nada, simplesmente porque o que
fizemos no exemplo anterior foi criar uma funo para que ela seja utiliza-la ,mais ainda no a
utilizamos.

Para utilizar uma funo, voc tem que chama-la. Para chamar uma funo, utiliza o nome da funo
como uma instruo em um script. Para isso voc precisara incluir os parnteses e os valores para os
parmetros da funo.

Por exemplo: AloMundo(Seu Nome) ;

Este exemplo diz ao interpretador do JavaScript para transferir controle primeira instruo na funo
AloMundo e passa o parmetro Seu Nome para a funo. Esse valor ser atribudo varivel dentro da
funo.

Nota: As funes podem ter mais de um parmetro. Para definir uma funo com mltiplos parmetros,
liste um nome varivel para cada parmetro, separado por virgulas. Para chamar a funo, especifique
ao valores para cada parmetro, separado por virgulas.

No exemplo abaixo, mostra um documento completo de HTML que inclui a definio de uma funo e um
segundo script no corpo da pagina que realmente chama a funo. Para demostrar a utilidade das
funes, ns a chamaremos duas vezes para saudar duas pessoas diferentes.

<HTML>
<HEAD>
<TITLE>Definindo Funes</TITLE>
<SCRIPT>
function AloMundo(who) { alert ("Al Mundo,"+who); }
</SCRIPT>
</HEAD>
<BODY>

<H1> Exemplo de Funo </H1>

<P> Saudao</P>
<SCRIPT>
AloMundo("Brasil");
AloMundo("USA");
</SCRIPT>
</BODY>
</HTML>

Neste exemplo inclumos um segundo conjunto de tags<SCRIPT> no corpo da pgina. O segundo script
inclui duas chamadas de funo para a funo AloMundo, cada uma com um nome diferente. Agora que
voc tem um script que realmente faz algo, que tal testa-lo. Voc dever ter o mesmo resultado da
Figura 5.1 e Figura 5.2.

Figura 5.1- Exemplo de Funo.

Figura 5.2- Exemplo de Funo

Nota: Note que a Segunda mensagem de alerta no exibida at voc pressionar o boto OK no primeiro
alerta. Isso porque o processamento de JavaScript parado enquanto as alertas so exibidos.

Retornando um valor

Embora a funo que voc acabou de criar exiba uma mensagem para o usurio, as funes tambm
podem retornar um valor para o script que as chamou. Isso permite utilizar funes para calcular valores.
Como um exemplo, voc pode criar uma funo que calcular a media de 4 nmeros.

Sua funo deve iniciar com a palavra-chave function , o nome da funo e os parmetros que ela aceita.
Utilizaremos os nomes de variveis como : a, b, c e d para os quatros nmeros cuja media queremos
calcular. Eis a primeira linha da funo:

function Media(a,b,c,d) { instruo }.

Na instruo podemos calcular a media, somando os nmeros e depois dividi-los pelo numero de
nmeros ou seja por 4. Assim, a prxima linha da funo seria:

resultado=(a+b+c+d)/4 ;

Essa instruo cria uma varivel chamada Resultado e calcula o resultado adicionando os quatros
nmeros, depois dividindo por 4, os parmetros so necessrios para dizer ao JavaScript executa a
adio antes da diviso.

Para enviar esse resultado de volta ao script que chamou a funo, voc utiliza a palavra-chave que
retorne o resultado da media.

return Resultado

Para utilizar essa funo em um script, voc pode utilizar uma varivel com a chamada de uma funo.
Por exemplo, a instruo a seguir faz medias dos nmeros 2,4,6,8 e armazena o resultado em uma
varivel chamada score, e para exibir o resultado usamos o evento write.

score=Media(2,4,6,8) ;
document.write("A Media :" +score);

O exemplo abaixo mostra um documento completo de HTML que inclui a definio da funo Media.

<HTML>
<HEAD>
<TITLE>Calculando Media</TITLE>
<SCRIPT>
function Media(a,b,c,d){
Resultado=(a+b+c+d)/4;
return Resultado;
}
</SCRIPT>
</HEAD>
<BODY>

<H1> Retornando um valor </H1>

<P> Media </P>
<SCRIPT>
score=Media(2,4,6,8);
document.write("A Media de 2,4,6,8 :"+score);
</SCRIPT>
</BODY>
</HTML>

Pronto! Agora voc pode desta o exemplo acima e obter o mesmo resultado da Figura 5.3.

Figura 5.3-Retornando um valor.

Nota: Voc tambm pode utilizar a chamada de funo diretamente em uma expresso. Por exemplo,
voc pode utilizar a instruo alert para exibir o resultado da funo: alert (Media(2,4,6,8)).

Objetos JavaScript

Voc aprendeu que as variveis podem armazenar um numero, uma string de texto ou um valor. O
JavaScript organiza todos os elementos de uma Home Page dentro de uma hierarquia. Cada elemento
visto como um objeto. Como variveis os objetos podem armazenar dados, inclusive armazenar dois ou
mais itens ao mesmo tempo.

Os itens de dados armazenados em um objeto so chamados de propriedades do objeto. Por exemplo,

voc pode utilizar objetos para armazenar informaes sobre as pessoas, como em catlogos de
endereo. As propriedades de cada objeto da pessoa podem incluir um nome, endereo , telefone e
outras informaes.

O JavaScript utiliza pontos para separar os nomes de objetos e os nomes de propriedade. Por exemplo,
para um objeto de uma pessoa chamada Carla, as propriedades podem incluir Carla.endereo e
Carla.telefone.

Os objetos podem ter propriedades, mtodos e responder a certos eventos. Por isso muito importante
entender a hierarquia dos objetos HTML. Voc entender rapidamente como isto funciona com a ajuda de
um exemplo. O exemplo seguinte uma pgina HTML simples:

Figura 5.4- Exemplo de Objetos

Na Figura 5.4 temos um link, duas imagens, e um formulrio com dois campos texto e dois botes. Do
ponto de vista do JavaScript a sua janela do browser um objeto window. Este objeto window contm
certos elementos, como a barra de status.

Como j sabemos dentro da janela, ns podemos carregar uma pgina HTML. Esta pgina um objeto
document. Desta forma o objeto document representa o documento HTML que est carregado no
momento. O objeto document muito importante, em JavaScript voc sempre o usar muito.

Mas o que mais importante que todos os objetos HTML so propriedades do objeto document. Um
objeto HTML pode ser por exemplo um link ou um formulrio.
A imagem abaixo ilustra a hierarquia criada pelo exemplo acima:

O JavaScript suporta trs tipos de objetos:

Objetos embutidos ou predefinidos So objetos construdos dentro da linguagem JavaScript, por

exemplo Date e Math. Alguns outros objetos embutidos incluem Array e String .

Objeto browser So objetos que representam vrios componentes do navegador e o documento atual
de HTML. Por exemplo, a funo alert( ) que voc utilizou anteriormente um mtodo de objeto window
ou seja de Janela.

Objeto personalizado So objetos que voc mesmo cria. Por exemplo, voc pode criar um objeto de
pessoa, como visto anteriormente.

Tratando Eventos

Como mencionado nos tutoriais anteriores, nem todos os scripts esto localizados dentro das
tags<SCRIPT>. Voc tambm pode utilizar scripts como handlers de eventos. Os handlers significa
tratadores de eventos e justamente os scripts que os tratam.

Os handlers de eventos no JavaScript diz ao navegador o que fazer quando um certo evento ocorre. Os
eventos de JavaScript incluem eventos tais como Quanto o boto do mouse der um clique e Quando
essa pagina termina de carregar. Contudo, eles so uma parte muito til do JavaScript.

Muitos eventos de JavaScript so causados pelo usurios, em vez de fazer as coisas em uma ordem
determinada, seu script pode responder as aes do usurios. Evidentemente, isso essencial para
todas as utilizaes praticas do JavaScript.

Os handlers de evento esto associados como objetos particulares do navegador e voc especifica o
handler de evento na tag que define o objeto. Por exemplo, links de imagem e texto tm um evento,
onMouseOver, que acontece quando o ponteiro do mouse move-se sobre o objeto. Eis uma tag tpica de
imagem de HTML com um handler de evento:

<IM SRC=boto.gifonMouseOver=highlight()>

Como pode ver, voc tem que especificar o handler de evento como um atributo para a tag de HTML e
incluir a instruo JavaScript para tratar o evento dentro das aspas.

Ocultando scripts de navegadores antigos

Alguns usurios ainda utilizam navegadores que no suportam JavaScript. Alm disso, algumas pessoas
tem suporte para JavaScript porem este esta desativado em seus navegadores, seja por preocupao
com segurana ou para evitar mensagem rolando na tela.

Nota: A maioria das preocupaes com segurana que as pessoas tm em relao ao JavaScript
infundada; no h realmente como danificar arquivos do usurio como JavaScript, e os scripts no tem
acesso ao contedo dos disco rgidos por padro. Algumas brechas de segurana foram localizados em
verses anteriores do JavaScript, mas nenhuma permite dano serio.

Como os navegadores mais antigos no entendem a tag<SCRIPT>, eles no se comportaro bem

quando encontrarem um script em uma pagina da Web. Na maioria dos casos, eles exibiro o script no
meio da pagina e entre outros efeitos que no so esperados. Para evitar isso, voc pode incluir o script
dentro de tags de comentrio de HTML, isso diz ao navegador para ignorar o script.

J os navegadores atuais so suficientemente inteligentes para saber que o script no realmente um

comentrio. Como abordados nos tutoriais anteriores os comentrios em HTML comeam como a tag<!- e terminam com tag-- >, mostrado no exemplo abaixo que oculta um script em navegadores mais
antigos :

<SCRIPT>

<!--

document.write(Seu browser suporta JavaScript.)

// - - >

</SCRIPT>

Esse script incluir as tags de comentrios de HTML de inicio e de fim. As duas barras (//) na ultima linha
so um comentrio JavaScript , isso evita que o comentrio de HTML seja detectado como um erro de
JavaScript.

Suportando navegadores no JavaScript

Voc pode ocultar seu script de navegadores mais antigos para eles no exibirem o prprio script. Mas
voc pode precisar suportar esses navegadores como por exemplo, exibir um aviso que a pgina exige
JavaScript. A tag <NOSCRIPT> , que suporta em JavaScript 1.1 e superior, pode ser uma soluo
conveniente, pois essa tag diz para o navegador compatveis com o JavaScript para ignorar tudo entre as
tag<NOSCRIPT> de inicio e de fim, ento voc pode incluir contedo HTML para o navegador noJavaScript dentro das tags.

Nota: Navegadores mais antigos que no suportam JavaScript tambm no suportam a

tag<NOSCRIPT>.Entretando, essa tcnica ainda funciona porque, de acordo com o padro de HTML, os
navegadores devem ignorar tags desconhecidas. Navegadores modernos suportam a tag<NOSCRIPT>
quando suporte para JavaScript esta desativado.

O exemplo abaixo, mostra uma seo de HTML , que exibe uma mensagem para navegadores noJavaScript.

<NOSCRIPT>
Seu browser no suporta JavaScript. Por favor use a Verso no-JavaScript desse tutorial.
</NOSCRIPT>

Este exemplo permite voc suportar os dois tipos de navegadores como Explore e o Netscaper ,com
exceo do Netscaper 2.0, que suporta JavaScript mais no suporta a tag <NOSCRIPT>; essa verso
exibir a mensagem <NOSCRIPT>.

Utilizando comentrios

Como utilizamos comentrios de HTML para ocultar seu script de navegadores. Achei importante abordar
que o JavaScript tambm inclui seus prprios tipos de comentrios. Embora esses no ocultem o
JavaScript dos navegadores, eles so teis para determinados fins: incluir comentrios em seu script.

Os comentrios permitem incluir documentao dentro de seu script. Isso ser til se outra pessoas
tentar entender o script ou mesmo se voc tentar entend-lo muito tempo depois de te-lo criado. Para
incluir comentrios em um programa de JavaScript, digite um linha com duas barras, como nesse
exemplo:

// isto um comentrio.

Voc pode tambm comear um comentrio no meio de uma linha, que til para documentar um
script. Por exemplo:

score=Media(2,4,6,8);// armazena o resultado da media em score

O JavaScript tambm suporta comentrios no estilo C que iniciam com /* e terminam com */. Esses
comentrios podem estender-se por mais de uma linha , como o exemplo abaixo:

/* O JavaScript incluem uma variedade de recursos, incluindo este comentrio */

Nota: Como esses comentrios so parte da sintaxe do JavaScript, eles somente so vlidos dentro das
tags <SCRIPT>.

Introduo

Nessa tutorial voc aprender alguns recursos de scripts especficos e tcnicas freqentemente usadas
em programas JavaScript . Ir aprender a focalizar variveis e expresses , atribuindo nomes e
declarando variveis .

Utilizando Variveis

No decorrer desses turoriais voc aprendeu a utilizar algumas variveis. Contudo, h alguns aspectos das
variveis que ainda no foi abordado.

As variveis so caminhes identificados que podem armazenar dados como nmeros, string texto ou
objetos, como voc j aprendeu cada varivel tem um nome. Mais o que voc no sabe que a regras
especificas que devem seguir quando escolher um nome de varivel:
Os nomes de varivel podem incluir letras do alfabeto, tanto letras minsculas como maisculas. Eles
tambm podem incluir os dgitos 0-9 e o caractere sublinhado .
Os nomes de varivel no podem incluir espaos nem quaisquer outros caracteres de pontuao.
O primeiro caractere do nome da varivel s pode ser uma letra ou um sublinhado.
Os nomes de varivel diferenciam letras maisculas de minsculas exemplo : total media e Total Media
so nomes de variveis diferentes.
No h limite oficial no comprimento de nomes de variveis , mas eles devem se ajustar dentro de uma
linha
Utilizando essas regras , voc ser capaz de criar nomes de variveis vlidas. Outra dica que voc
pode escolher utilizar tanto nomes amigveis e fceis de ler como um completamentes criptografados.

Utilizando variveis locais e globais

Algumas linguagens de computador exigem que declare uma varivel antes de utiliza-la. O JavaScript
inclui a palavra-chave var , que pode ser utilizada para declarar uma varivel. Voc pode omitir var em
muitos casos ou ainda declara-la na primeira vez que voc atribuir um valor a ela.

Para entender melhor onde declarar uma varivel , voc precisara entender o conceito de escopo. O
escopo de uma varivel a rea do script em que a varivel pode ser utilizada. H dois tipos de variveis
:
Variveis globais Tm o script inteiro e outros scripts no mesmo documento de HTML como seu escopo.
Elas podem ser utilizadas em qualquer lugar , mesmo dentro de funes.
Variveis locais Tm uma nica funo como seu escopo. Elas podem ser utilizadas somente dentro da
funo em que foram criadas.
Para criar uma varivel global, voc a declara no script principal , fora de quaisquer funes. Voc pode
utilizar a palavra-chavevar para declarar a varivel, como nesse exemplo :

var numero= 25 ;

Essa instruo declara uma varivel chamada numero e atribui um valor de 25. Se essa instruo for
utilizada fora de funes , ela cria uma varivel global. A palavra-chave var opcional nesse caso,
podendo voc simplesmente declarar da seguinte forma :

numero=25;

Nota: Antes de voc obter o habito de omitir a palavra-chave var, certifique-se de entender exatamente
quando ela exigida. Por isso bom sempre utilizar a palavra-chave var, assim voc evitar erros e
tornar seu script mais fcil de ler. Nos exemplos dos tutoriais anteriores a maioria das variveis que
utilizamos eram globais.

Uma varivel local pertence a uma funo particular. Qualquer varivel que voc declara ou utilizar pela
primeira vez em uma funo uma varivel local. Por exemplo, as variveis na lista de parmetro da
funo so variveis locais.

Para certifica-se de que est criando uma varivel local dentro de uma funo, voc pode utilizar a
palavra-chave var. Isso fora o JavaScript a criar uma varivel local, mesmo se existir uma varivel global
com o mesmo nome.

Para entender melhor os tipos de variveis e declaraes , vamos fazer um exemplo. Este exemplo
uma verso modificada do exemplo AloMundo do tutorial anterior:

<HTML>
<HEAD>
<TITLE>Definindo Variveis</TITLE>
<SCRIPT>

var nome1= Carla;

var nome2=Joel;
function AloMundo(who) { alert ("Al Mundo,"+who);
var nome2= JavaScript;
}

</SCRIPT>
</HEAD>
<BODY>
<H1> Exemplo de Varivel </H1>
<P> Saudao</P>
<SCRIPT>
AloMundo(nome1);
AloMundo(nome2);
</SCRIPT>
</BODY>

</HTML>

O script do exemplo acima utiliza as seguintes variveis :

nome1 e nome2 so variveis globais definidas no cabealho;
who uma varivel local criada no parmetro de lista da funo AloMundo( );
A funo AloMundo( ) cria uma varivel local denominada nome2. J que a palavra-chave var utilizada,
isso no afeta a varivel global nome2 , se afetasse, o nome na Segunda saudao mudaria;
Nota: Se voc acha que ter duas variveis com o mesmo nome confuso , voc tem razo . Para evitar
isso, melhor utilizar nomes nicos para todas as variveis .

Se voc observar o script , vai notar que as variveis globais so declaradas dentro do cabealho do
documento de HTML. Na realidade voc pode declarar variveis em qualquer script no documento, mas o
cabealho um bom lugar para variveis globais porque ela executada primeiro. Se voc tentar utilizar
uma varivel antes de ela ser declarada ou de um valor lhe ser atribudo, ela conter valor nulo.

Voc agora deve entender a diferena entre variveis locais e globais. Se voc estiver ainda um pouco
confuso, no se preocupe se voc utilizar a palavra- chave var toda vez, voc quase sempre terminara
com o tipo de varivel certa.

Atribuindo valores a variveis

Como voc aprendeu nos tutoriais anteriores voc pode utilizar o sinal de igual para atribuir um valor a
uma varivel. Por exemplo:

i = 40;

Nessa instruo atribuir o valor 40 varivel i . Voc pode utilizar qualquer expresso direita do sinal
igual, incluindo outras variveis, como por exemplo

i=i+1

Nessa instruo foi utilizada uma sintaxe para adicionar um a uma varivel.

Atravs de instrues voc pode incrementar ou decrementar variveis , o JavaScript inclui dois tipos de
abreviao para essa sintaxe: A primeira utilizar o operador + = , por exemplo :

i+=1;

De forma semelhante, voc pode subtrair um numero de uma varivel utilizando o operador - =;, por
exemplo

i-=1;

Se voc ainda achar que muito para digitar, o JavaScript tambm inclui operadores de incremento e
decremento , ++ e --. Essa instruo adiciona um ao valor de i :

i++;

De forma semelhante, essa instruo subtrai um do valor de i:

i--;

Voc tambm pode utilizar o operador ++ ou antes do nome de uma varivel, como em ++i.
Entretanto, estes no so idnticos. A diferena quanto o incremento ou decremento acontece :
Se o operador est depois do nome da varivel, o incremento ou decremento acontece depois de a
expresso atual ser avaliada.
Se o operador esta antes do nome da varivel, o incremento ou decremento acontece antes de a
expresso atual ser avaliada.
Essa diferena somente uma questo quando voc utiliza a varivel em uma expresso e incrementa
ou decrementa na mesma instruo. Como por exemplo, suponha que voc atribuiu varivel i o valor
40, temos as seguintes instrues com efeitos diferentes:

alert( i++);
alert(++i);

Nota: Esse operadores so para sua convenincia. Se fizer mais sentido para voc inserir i=i+1,faa isso.

Tipos de dados em JavaScript

Em algumas linguagens, voc tem que especificar os tipos de dados que uma varivel armazenar: por
exemplo , um numero ou uma string. No JavaScript, voc no precisa especificar um tipo de dados
exceto em casos raros, porm voc deve conhecer os tipos de dados que o JavaScript pode tratar:
Nmeros: O JavaScript suporta tanto inteiros como nmeros de ponto flutuante , como por exemplo: 1,4 .
Valores booleanos ou lgicos: Estes podem Ter um de dois valores: verdadeiro ou falso. Esses tipos de
dados til para indicar se uma certa condio verdadeira.
String: Estas consistem em um ou mais caracteres de texto, como por exemplo : Meu nome Bruno.
Valor nulo : Representada pela palavra-chave null. Esse o valor indefinido de uma varivel. Por
exemplo, a instruodocument.write(resultado) resultara nesse valor se a varivel resultado no foi
previamente utilizada ou definida.
Embora o JavaScript monitore o tipo de dados atualmente armazenado em cada varivel, ele no impede
voc de alterar os tipos intermedirios. Por exemplo, suponha que voc declarou uma varivel
atribuindo-lhe um valor:

resultado= 3;

Essa instruo declara uma varivel chamada resultado e lhe atribui o valor 3. Essa varivel numrica.
Agora suponha que voc alterou o valor total:

resultado= JavaScript;

Isso atribui um valor de string resultado. JavaScript no exibir um erro quando essa instruo executar
, pois ela perfeitamente valida , embora provavelmente no seja um resultado muito til.

Nota : Embora esse recursos do JavaScript seja conveniente , ela tambm pode tornar fcil para se
cometer equvocos. Por exemplo, se a varivel resultado for mais tarde utilizada em um calculo
matemtico, o resultado da operao ser invalido, o JavaSript no o adverte de que voc cometeu esse
equivoco.

Convertendo entre tipos de dados

O JavaScript trata converses entre tipos de dados para voc sempre que ele pode. Por exemplo, voc j
utilizou instrues como essa :

document.write( O Resultado +resultado);

Essa instruo imprime uma mensagem como o resultado 3 . J que a funo de document.write
trabalha com strings, o interpretador de JavaScript automaticamente converte quaisquer no-strings na
expresso nesse caso, o valor de resultado, em string antes de desempenhar a funo.

Isso funciona igualmente bem com valores de ponto flutuante e booleanos. Entretanto, h algumas
situaes onde no funcionara. Por exemplo, a seguinte instruo funcionar bem se o valor de resultado
for 40.

Valor=resultado/3 ;
Entretanto , a varivel resultado tambm pode conter uma string, nesse caso, a instruo acima
resultaria em um erro.

Em algumas situaes, voc pode terminar com uma string contendo um numero e precisar convert-la
em uma varivel numrica regular. O JavaScript incluir duas funes para esse propsito que j foi vista
nos tutoriais anteriores :
parseInt ( ): converte uma string em um numero inteiro.
parseFloat( ) : converte uma string em um numero de ponto flutuante.
As duas funes lero um numero desde o inicio da string e retornaro uma verso numrica . Por
exemplo, essa instruo converte a string 30 bebidas em um numero :

stringvar= 30 bebidas
numvar= parseInt(stringvar);

Depois que essas instrues executarem, a varivel numvar armazena o numero 30. A parte nonumerica da string ignorada.

Nota: Essas funes procuram um numero do tipo apropriado no comeo da string. Se um nmero vlido
no for localizado, a funo retorna a string NaN, o que significa no um numero ( Not a Number)

Armazenando dados do usurio em variveis

Uma utilizao comum de variveis armazenar as informaes que vm do usurio. Como exemplo,
voc agora criar um script que solicita informaes do usurio e criar um documento de HTML
contendo essas informaes.

Nesse script, criaremos uma home page personalizada para o usurio. Voc utilizar a funo prompt
para solicitar cada parte das informaes, lembre-se que voc j utilizou essa funo nos tutoriais
anteriores. Essa funo semelhante a alert, mas solicita ao usurio uma entrada.

No script, voc solicitara um primeiro nome, um sobrenome e um titulo para a pagina. Essas instrues
solicitam trs variveis :

nome=prompt(Digite seu primeiro nome:);

sobrenome= prompt(Digite seu sobrenome:);
titulo= prompt(Digite o titulo da pagina:);

Voc agora pode utilizar o contedo das variveis para personalizar o documento de HTML . Inicie com o
titulo que o usurio inseriu :

document.write(<H1>+ titulo+</H1>);

Essa instruo adiciona o titulo da pagina , incluindo em :

document.write(<H2> By+ nome+ +sobrenome+</H2>);

Isso inicia com uma tag <H2>, seguindo pela palavra By, o primeiro nome, um espao, o sobrenome e
a tag </H2> de fechamento.

Para completar esse script, adicione as tags < SCRIPT> normais e uma estrutura HTML. O exemplo
abaixo mostra o documento final de HTML.

< HTML>
<HEAD>
<TITLE> Construindo uma pagina </TITLE>

</HEAD>
<BODY>
<SCRIPT>
nome=prompt(Digite seu primeiro nome:);
sobrenome= prompt(Digite seu sobrenome:);
titulo= prompt(Digite o titulo da pagina:);
document.write(<H1>+ titulo+</H1>);
document.write(<H2> By + nome+ +sobrenome+</H2>);
</SCRIPT>
<P> Esta pgina esta em construo.</P>
</BODY>
</HTML>

Para testar esse script, carregue o documento de HTML em um navegador. Os trs itens lhe sero
solicitados, um por vez. Depois que voc inserir todos os dados, a pgina completa exibida. A pagina
final deve se parecer como da figura abaixo:

Introduo

Nessa tutorial voc ira ver como criar e manipular mais dois de tipos de variveis muito utilizada no
JavaScript.

Utilizando objetos String

Voc j utilizou varias strings durante as primeiras partes desse tutorial. As strings armazenam grupos
de caracteres de textos identificadas de forma semelhante para outras variveis.

Como por exemplo :

Teste = Isso um teste

Essa instruo atribui a string Isso um teste a uma varivel de string denominada Teste.

Criando um Objeto String

O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total

flexibilidade em seu manuseio. O JavaScript armazena strings como objetos strings. Objetos string
armazenam uma seqncia de caracteres, sua forma geral a seguinte:
stringObject.propriedade
stringObject.metodo

Mais voc no precisa se preocupar com isso agora, mais importante saber a forma geral porque ela
explica varias tcnicas utilizadas para trabalhar com strings, que utilizam mtodos ou seja funes
embutidas do objeto string.

Existe duas maneiras de criar um novo objeto string . A primeira j utilizamos, a segunda utiliza a sintaxe
oficial de objetos.

Como por exemplo :

Teste=Isso um teste;
Teste= new string(Isso um teste);

A segunda instruo utiliza a palavra-chave new, que voc utiliza para criar objetos. Isso diz ao
navegador para criar um novo objeto string contendo o texto Isso um teste e o atribui a varivel Teste.

Nota: Embora possa criar uma string utilizando sintaxe orientada a objetos, a sintaxe padro de
JavaScript mais simples e no h nenhuma diferena nas strings criadas por esses dois mtodos.

Propriedades das Strings

lenght : Determina o tamanho da string, em nmero de caracteres.

Ex: stringObject.lenght

charAt: retorna o caracter da posio especificada (inicia em 0).

Ex: string.charAt(posio)

indexOf : retorna o nmero da posio onde comea a primeira "string".

Ex: string.indexOf("string")

lastindexOf: retorna o nmero da posio onde comea a ltima "string".

Ex: string.lastindexOf("string")

substring: retorna o contedo da string que corresponde ao intervalo especificado. Comeando no

caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado
em index2.

Ex:string.substring(index1, index2)

Mtodos das Strings

anchor: Cria uma ncora na pgina HTML, que se refere a stringObject. Eqivale a TAG <A NAME="nome
da ancora">stringObject</A>.

Ex: document.write(stringObject.anchor("nome da ancora"))

big : Mostra stringObject com tamanho grande. Equivale a TAG <BIG></BIG>.

Ex: document.write(stringObject.big())

blink : Mostra stringObject piscando na tela. Equivale a TAG <BLINK></BLINK>.

Ex: document.write(stringObject.blink())

bold :Mostra stringObject em negrito. Equivale a TAG <B></B>.

Ex: document.write(stringObject.bold())

charAt :Obtm o caracter que estiver na posio "x" de stringObject.

Ex: document.write(stringObject.charAt(x))

fixed :Mostra stringObject com fonte de tamanho fixo. Equivale a TAG <TT></TT>.

Ex: document.write(stringObject.fixed())

fontcolor : Determina a
COLOR=#RGB></FONT>.

cor

que

stringObject

ser

mostrada.

Equivale

TAG

<FONT

por

Equivale

TAG

<FONT

Ex: document.write(stringObject.fontcolor(#FF0000))

fontsize : Mostra stringObject

SIZE="tamanho"></FONT>.

no

tamanho

definido

"x".

Ex: document.write(stringObject.fontsize(x))

indexOf :Procura a ocorrncia de uma substring dentro de stringObject. A busca comea na posio
inicio. Este mtodo retorna a posio inicial da substring dentro de stringObject.

Ex: PosioRelativa=stringObject(substring [, inicio])

italics :Mostra stringObject no formato itlico. Equivale a TAG <I></I>.

Ex: document.write(stringObject.italics())

lastIndexOf : Mtodo bem semelhante a indexOf, a nica diferena que a busca comea da posio fim
para o incio da string.

Ex: PosioRelativa=stringObject(substring [, fim])

link : Cria um link, onde stringObject o texto que aparece em destaque.

Ex: document.write(stringObject.link("URL"))

small : Mostra stringObject em fonte pequena. Equivale a TAG <SMALL></SMALL>.

Ex: document.write(stringObject.small())

strike : Mostra stringObject com um trao no meio. Equivale a TAG <STRIKE></STRIKE>.

Ex: document.write(stringObject.strike())

sub :Mostra stringObject no formato subscript. Equivale a TAG <SUB></SUB>.

Ex: document.write(stringObject.sub())

substring : Obtm uma substring delimitada por pos_1 e pos_2 em stringObject.

Ex: document.write(stringObject.substring(pos_1,Pos_2))

sup : Mostra stringObject no formato sobrescrito. Equivale a TAG <SUP> </SUP>.

Ex: document.write(stringObject.sup())

toLowerCase : Converte stringObject para minscula.

Ex: document.write(stringObject.toLowerCase())

toUpperCase : Converte stringObject para maiscula.

Ex: document.write(stringObject.toUpperCase())

Atribuindo valores para Strings

Pode-se atribuir um valor a uma string da mesma maneira como qualquer outra varivel. Os dois
exemplos anteriores atriburam um valor inicial string. Tambm pode atribuir um valor depois que a
string j foi criada. Por exemplo, a seguinte instruo substitui o contedo da varivel Teste com uma
nova string:

Teste= somente um teste;

Voc tambm pode utilizar o operador de concatenao ( +) para combinar os valores de duas strings. O
exemplo abaixo mostra um exemplo simples de atribuio e combinao dos valores de strings.

<HTML>
<HEAD>

<TITLE> Teste da String</TITLE>

</HEAD>
<BODY>
<H1> Teste da String</H1>
<SCRIPT>
Teste1= "Isso um teste!";
Teste2= " somente um teste";
Valor= Teste1+Teste2;
alert(Valor);
</SCRIPT>
</BODY>
</HTML>

Esse script atribui valores a duas variveis de string, Teste1 e Teste2 depois exibe um alerta com seu
valor combinado. Se voc executar esse script , sua sada dever se semelhante a da Figura abaixo:

Alm de utilizar o operador + para concatenar duas strings, voc pode utilizar o operador += para
adicionar em um string. Por exemplo, essa instruo adiciona um ponto ao contedo atual da string
sentencia:

sentencia+=.;

Nota: O sinal de adio (+) tambm utilizado para adicionar nmeros em JavaScript. O navegador sabe
se utiliza adio ou concatenao baseado nos tipos de dados que voc utiliza com o sinal de adio. Se
voc o utiliza entre um numero e uma string, o numero convertido em um string e concatenado.

Calculando o comprimento da string

De vez em quando, voc pode achar til saber quantos caracteres uma varivel de string armazena.
Voc pode fazer isso usando a propriedade length dos objetos string, como j visto anteriormente. Esta
propriedade pode ser utilizada com qualquer string, para isso basta digitar o nome da string seguindo
por .length.
Por exemplo, Teste.length refere-se ao comprimento da string Teste. Como pode ser visto abaixo:

Teste=Isso um teste;
document.write(Teste.length);

A primeira instruo atribui a string Isso um teste varivel Teste. A Segunda instruo exibe o
comprimento da string.

Nota: Lembre-se de que embora Teste refira-se a uma varivel de string, o valor de Teste.length um
nmero e pode ser utilizado em qualquer expresso numrico.

Convertendo a caixa da string

Dois mtodos do objeto string, j visto anteriormente, permitem converter todo o contedo de um string
em letras maisculas ou em letras minsculas:
toUpperCase( ) : Converte todos os caracteres na string em letras maisculas.
toLowerCase( ) : Converte todos os caracteres na string em letras minsculas.
Por exemplo, a seguinte instruo exibe o valor da varivel de string Teste em letras minsculas.

Teste=Isso um teste;
document.write(Teste. toLowerCase( ) );

Assumindo que essa varivel continha o texto Isso um teste, o resultado seria a seguinte string : isso
um teste.

Note que a instruo no altera o valor da varivel Teste. Esses mtodos retornam a verso de letras
maisculas ou minsculas da string, mas eles no alteram a prpria string. Se quiser alterar o valor da
string, voc pode utilizar um instruo como essa:

Teste=Teste.toLowerCase( )

Nota: Note que a sintaxe para esses mtodos semelhante propriedade length introduzida
anteriormente. A diferena que os mtodos sempre utilizam parnteses, enquanto propriedades no.
Os mtodos toUpperCase e toLowerCase no contm nenhum parmetro, mas voc ainda precisa utilizar
os parnteses.

Trabalhando com Substrings

At agora, trabalhamos com strings inteiras. O JavaScript tambm permite trabalhar com substrings ou
partes de uma string. Pode-se utilizar o mtodo substring para recuperar uma parte de uma string ou o
mtodo chartAt para obter um nico caractere.

Utilizando parte de uma string

O mtodo substring( ) retorna uma string consistindo em uma parte da string original entre dois valores
de ndices, que voc deve especificar entre parnteses. Por exemplo , a seguinte instruo exibe o
quarto, o quinto e o sexto caracteres da string Teste.

document.write(Teste. substring( 3,6) );

Agora voc teve esta se perguntado: de onde vm o 3 e o 6 ? . Bom, existe trs coisas que voc precisa
entender sobre os parmetros de ndice:

A indexao inicia com 0 para o primeiro caractere da string, ento o quarto caractere realmente o
ndice 3.

O segundo ndice no inclusivo. Um segundo ndice de 6 inclui at o ndice 5 ( o sexto caractere).

Voc pode especificar os dois ndices em qualquer ordem. O menor ser assumido como sendo o
primeiro ndice. No exemplo anterior, ( 6,3) teria produzido o mesmo resultado. Naturalmente, raramente
h uma razo para utilizar a ordem inversa.

Como outro exemplo, suponha que voc definiu uma string, chamada Letra para armazenar o alfabeto:

Letra=ABCDEFGHIJKLMNOPQRSTUVWXYZ;

Agora vamos utilizar o mtodo substring para retornar os caracteres desejados:

Letra.substring(0,4) : Isso retorna ABCD;

Letra.substring(10,12) : Isso retorna KL;

Letra.substring(12,10) : Tambm retorna KL. Porque menor, 10 utilizado como o primeiro ndice;

Letra.substring(6,7) : Isso retorna G;

 Letra.substring(24,26) : Isso retorna YZ;

Letra.substring(0,26) : Isso retorna o alfabeto inteiro;

Letra.substring(6,6) : Isso retorna o valor nulo, uma string vazia. Isso verdadeiro sempre que os dois
valores de ndice so os mesmos;

Obtendo um nico caractere

O mtodo charAt uma maneira simples de pegar um nico caractere de uma string. Voc especifica o
ndice do caractere ou posio, entre parnteses. Os ndices iniciam em 0 para o primeiro caractere. Eis
alguns exemplos que utilizam a string Letra:

Letra.charAt(0) : Retorna A;

Letra.charAt(12) : Retorna M;
Manipulando Arrays

O JavaScript no tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com
arrays necessrio a criao de um objeto com a propriedade de criao de um array.

Criando um array numrico

Diferente da maioria de outros tipos de variveis de JavaScript, voc deve declarar um array antes de
utiliza-lo. O seguinte exemplo cria um array com 30 elementos:

scores= new Array(30);

Para atribuir valores para o array, utiliza parnteses e um ndice. Os ndices iniciam com 0, enato os
elementos do array nesse exemplo seria numerado de 0 a 29. Essas instrues atribuem valores para os
primeiros quatros elementos do array :

scores[0]=39;
scores[1]=40;
scores[2]=100;
scores[3]=49;

Como as strings, os array tm uma propriedade length. Esta informa o nmero de elementos no array,
normalmente o mesmo nmero que voc6e utilizou ao criar o array. Por exemplo, essa instruo imprimira
o nmero 30:

document.write(scores.length);

Acessando os elementos do array

Voc pode ler o contedo de um array utilizando a mesma notao que utilizou quando atribuiu valores.
Por exemplo, as seguintes instrues exibiram os valores dos primeiros 4 elementos do array scores:

Scoredips= Scores: + scores[0] +,+ scores[1] + ,+ scores[2]+, +scores[3] ;

document.write(scoredisp);

Nota: Olhando esse exemplo, voc pode imaginar que seria inconveniente exibir todos os 30 elementos
do array scores- e trabalhar com um array maior seria ainda mais difcil. Esse um trabalho ideal para
loops, que permite desempenhar as mesmas instrues varias vezes com valores diferentes. Mais no se
preocupe com isso agora, pois voc aprender tudo sobre loops em outra parte desse tutorial.

Utilizando arrays de string

At agora, voc utilizou arrays de nmeros. O JavaScript tambm permite utilizar arrays de strings. Esse
um recurso poderoso que permite trabalhar com um grande numero de strings ao mesmo tempo

Criando um array de strings

Voc define um array de string da mesma forma que um arry numrico , de fato, o JavaScript no faz
distino entre eles.

Por exemplo :

nomes=new Array(30);

Voc pode atribuir valores de string aos elementos do array:

nomes[0]=Fernanda Gomes da Silveira ;

nomes[1]=Leticia Vieira Santos;

Voc pode utilizar esses elementos de array em qualquer lugar que utilizaria uma string. Voc pode at
utilizar os mtodos de string vistas anteriormente . Por exemplo, a seguinte instruo imprime os
primeiros oitos caracteres do primeiro elemento do array nomes, resultando em Fernanda :

document.write(nomes[0].substring(0,8));

Dividindo uma string

O JavaScript inclui um mtodo de string chamado split, que divide uma string em suas partes
componentes. Para utilizar esse mtodo, especifique a string a dividir e um caractere para dividir as
partes :

Teste= Fernanda Gomes da Silveira

Partes=Teste.split( );

Nesse exemplo, a string Teste mantm o nome Fernanda Gomes da Silveira. O mtodo split na Segunda
instruo divide a string nome em cada espao, resultado em quatro strings. Estas so armazenadas em
um array de strings chamado Partes. Depois que as inrues de exemplo executam, os elementos de
partes contm o seguinte :

Partes[0]= Fernanda
Partes[1]= Gomes
Partes[2]=da
Parte[3]=Silveira

O JavaScript tambm inclui um mtodo de array, join, que desempenha a funo oposta. Esta instruo
remonta a array Partes em uma string:

Fullname=Partes.join( );

O valor nos parenteses especifica um caractere para separar as partes do array. Nesse caso, um espao
utilizado, resultando na string final Fernanda Gomes da Silveira. Se voc no especificar um caractere,
as virgulas so utilizadas.

Classificando um array

O JavaScript tambm inclui o mtodo sort para arrays, que retorna uma verso classificada do array
( alfabeticamente ou numericamente). Por exemplo, as seguintes instrues inicializam um array de
quatro nomes e o classifica :

nomes[0]=Fernanda Gomes da Silveira

nomes[1]=Leticia Vieira Santos;
nomes[2]= Felipe Silva ;
nomes[3]= Marcos Cardoso;

sortednames=nomes.sort();

A ultima instruo atribui o array sortednames vero classificada de nomes utilizando o mtodo join.

Exibindo mensagens que rolam na tela

Nos tutoriais anteriores voc aprendeu que o JavaScript pode ser utilizado para criar uma mensagem que
rola na linha de status de uma pgina da Web e agora com seus conhecimentos de strings, voc pode
criar o programa de mensagem que rolam na tela a partir do zero.

Para comear, voc precisar definir a mensagem a ser rolada. Voc utilizar uma varivel chamada msn
para armazenar a mensagem. No script, inicialize a varivel, sinta-se livre para escolher seu prprio
texto para a mensagem :

msn= Este um exemplo de mensagens que rolam na tela. No legal ? ;

A seguir, defina uma segunda string chamada esp. Essa string ser exibida entre as cpias da
mensagem para tornar claro onde uma termina e a outra comea. Por exemplo :

esp =... ...;

Voc precisara de mais varivel: uma varivel numrica para armazenar a posio atual da string.
Chame-a de ps e inicialize-a com 0:

pos=0;

A rolagem real ser feita por uma funo chamada rolamensagem, como mostrada a abaixo:

1: function rolamensagem () {

2: window.status=msn.subtring(pos,msn.legth)+esp+msn.substring(0,pos);

3: pos++;

4: if(pos>msn.length) pos =0;

5: windows.setTimeout(rolamensagem( ), 200);

6: }

Aqui esta uma descrio linha a linha da funo rolamensagem :

Linha 1: A palavra-chave function utilizada para comear a funo.

Linha 2: Essa instruo exibe uma string na linha de status. A string composta da parte de msn de
pos para o fim, seguida pelo espao, seguido pela parte de msn desde o inicio de pos.

Linha 3: A varivel pos incrementada.

Linha 4: Essa instruo verifica se pos maior que o comprimento de msn. Se for, redefine-o para 0.
Voc aprender mais sobre a instruo if nas prximas partes do tutorial.

Linha 5: Essa instruo utiliza o mtodo window.setTimeout, que permite configurar uma instruo a
ser executada depois de um demora de tempo. Nesse caso, execute a funo rolamensagem depois do
0,2 segundo.

Linha 6: O parntese final termina a funo.

Para completar o exemplo, adicione as tags < SCRIPT> e as tags de HTML que compem um documento
de Web. O exemplo abaixo mostra o script completo da mensagem que rola na tela.

<HTML>
<HEAD>
<TITLE> EXEMPLO DE MENSAGEM QUE ROLA NA TELA</TITLE>
<SCRIPT>
msn="Este um exemplo de mensagens que rolam na tela.No legal?";
esp="... ...";
pos=0;
function rolamensagem () {
window.status= msn.substring(pos, msn.length)+esp+msn.substring(0,pos);
pos++;
if(pos > msn.length) pos =0;
windows.setTimeout("rolamensagem( )",200);
}

rolamensagem();
</SCRIPT>
</HEAD>

<BODY>
<H1> EXEMPLO DE MENSAGEM QUE ROLA NA TELA</H1>
OLHE A LINHA DE STATUS DA SUA PAGINA .
</BODY>
</HTML>

A figura abaixo apresenta o resultado do programa.

Introduo

Durante as primeiras partes do tutorial de JavaScript voc aprendeu mtodos e propriedades que os
auxiliam quando desejam executar alguma coisa no JavaScript, exemplos que podem parece bobos
mais que causam efeitos notveis. Agora vamos aprender a fazer melhor utilizao desses mtodos e
variveis, testando e avaliando seus valores, utilizando instrues condicionadas como a instruo if.

A instruo if

Um dos recursos mais importantes de uma linguagem de programao a capacidade de testar e

comprar valores . E isto pode ser feitos atravs das estruturas de controle que permitem que seu
programa se comporte diferentemente com base nos valores de variveis ou com base na entrada do
usurio.

A instruo If a instruo condicional principal do JavaScript pois ela executa uma poro de cdigo se
a condio especificada for verdadeira. Ou seja essa instruo consiste em duas partes : uma condio e
uma ao, por exemplo :

Se a campanhia toca, atenda-a.

Condiao Se a campanhia tocar

Aao atenda-a .

No JavaScript a instruao If trabalha de forma semelhante , por exemplo.

If( a = = 1 ) window.alert( a igual a 1!);

Essa instruao inlcui uma condiao ( se a for igual a 1) e uma aao ( exibe uma mensagem ). Essa
instruao verifica a variavel a e se tiver um valor de 1, imprime uma mensagem. Caso contrario no faz
nada.

Se voce utilizar uma instruao if como o exemplo anterior, pode utilizar uma nica instruo como a
aao. Voce tambm pode utilizar mltiplas instrues para a ao, incluindo-as em chave ( { } ) , como
no exemplo abaixo:

If( a = = 1)
{
window.alert( a igual a 1) ;
a= 0 ;
}

Neste exemplo verifica a variavel a mais uma vez e se localizar o valor de 1, exibe a mensagem e
configura a de volta como 0.

Operadores condicionais.

Embora a parte de ao de uma instruo if possa incluir quaisquer das instrues de JavaScript que voce
j aprendeu , a parte de condio da instruo utiliza sua propria sintaxe, isso denominado expresso
condicional. Uma expresso condicional inclui dois valores a serem comparados e esses valores podem
ser variaveis, constantes ou at expresses.

Entre dois valores a serem comparados h um operador condicional, esse operador diz ao JavaScript
como comparar os dois valores. Por exemplo o operador = = utilizado para testar se os dois valores
so iguais. Abaixo esta uma variedade de operadores condicionais mais utilizados no JavaScript:

== ( igual a );

! = ( no igual a );

< ( menor que );

>( maior que );

 < = ( menor que ou igual a );

> = ( maior que ou igual a ) ;

Nota: No confuda o operador de igualdade ( = = ) com o operador de atribuio (=), mesmo que eles
talvez seja lidos como igual, bom lembrar que utiliza = quando atribui uma variavel e = = quando
compara valores.

Condioes e operadores lgicos

Na linguagem de programaao comum voce querer verificar uma variavel para mais de um possivel
valor ou verificar mais de uma variavel de uma vez. No JavaScript isso possivel atravs de operadores
lgicos, tambm conhecidos como operadores booleanos. Por exemplo, as duas intruoes do exemplo
abaixo verificam condioes diferentes e utilizam a mesma ao :

If( telefone = = ) window.alert( ERRO! );

IF( email== ) window.alert( ERRO! );

Com a utilizaao de um operador lgico podemos otimazar essas instrues , combinando-as em uma
nica instruo

If ( telefone == :: email == ) window.alert( ERRO! );

Essa instruao utiliza o operador logico Or ( :: ) para combinar as condies. Traduzindo para uma
liguagem mais usual , isso seria se o numro de telefone ou o endereo de correio eletronico estiver em
branco, exiba uma mensagem de erro.

Outro operador logico que poderia ser utilizado para combinar as condioes seria o operador adicional ou
seja o operador And ( && ), como pode ser visto no exemplo abaixo

If ( telefone == && email == ) window.alert( ERRO! );

Essa instruo utiliza && ( And) em vez de :: ( Or), e com isso o mensagem de erro somente ser exibida
se ambos, o endereo do correio eletronico e as variaveis de numero de telefone, estiverem em branco.

Nota: importante voce saber que se o interpretador de JavaScript descobrir a resposta para uma
expressao condicional antes de alcanar o fim, ele no avalia o resto da condio. Por exemplo, se a
primeira de duas condies separadas pelo operador && for falsa, a segunda no avaliada, com isso
voce tira proveito para aprimorar a velocidade de seu script.

O terceiro operador lgico o ponto de exclamao ( ! ) , que significa Not. Ele pode ser utilizado para
inverter uma expressao em outras palavras, uma expressao verdadera se tornaria falsa e um falso se
tornaria verdadeiro. Por exemplo:

If ( telefone !== ) alert( o nmero de telefone esta correto );

Nesse caso, o operador Not utilizado como parte do operador de no-igual. Esse operador inverte a
condiao, entao a ao da instruo if executada somente se a variavel de numero de telefone no
estiver em branco.

Nota: Como voces pode notar os operadores lgicos so recursos poderosos, mais que so facieis de
criar uma condiao impossivel entres eles. Por exemplo, a condiao ( a < 5 && a >10 ) talvez parea
correta primeira vista. Entretanto, se voce l-la em voz alta, voc obtm Se a menor que 5 e a
maior que 10 , como voce pode ver ocorreu uma impossibilidade entre a condio, entao nesse caso,
Or( :: ) deveria Ter sido utilizado.

Condio else

Um recurso adicional da instruo if a palavra else. O else diz ao interpretador de JavaScript o que
fazer se a condio no for verdadeira. Por exemplo :

If( a = = 1)
{
window.alert( a igual a 1) ;
a= 0 ;
}

else { alert ( Valor incorreto: +a) ;}

Nesse exemplo , exibido uma mensagem e redefine a variavel a se a condio for encontrada. Se a
condio no for encontrada, uma mensagem diferente exibida.

Utilizando expresses condicionais

Alm da instruao if, o JavaScrip fornece um tipo de abreviao de expresso condicional que voc pode
utilizar para tomar decises rapidas. Ela utiliza uma sintaxe peculiar, que tambm encontrada em
outras linguagens, como C. Uma expressao condicional se parece com isso :

Variavel =( condio) ? if true : if false;

Isso atribui um de dois valores variavel: um se a condio for verdadeira e outro se for falsa. Eis um
exemplo de uma expressao condicional:

valor=( a== 1) ? 1 : 0;

Essa instruao pode parecer confusa para voce no verdade ? , mais esta instruao equivalente ao
seguinte exemplo abaixo:

if( a== 1)

valor = 1 ;
else
valor = 0;
Como voce pode Ter percebido , o valor depois do ponto de interrogao( ?) ser utilizado se a condio
for verdadeira e o valor depois dos dois-pontos(:) ser utilizado se a condio for falsa. Os dois-pontos
representam a parte else dessa instruo e, como a parte else da instruo if, opcional.

Essas expressoes abreviadas podem ser utilizadas em qualquer lugar que o JavaScript espera uma valor.
Elas fornecem uma maneira fcil de tomar decises simples sobre valores ,mais que muitas das vezes
complicado de entender no mesmo?. Por isso utilize a forma que voc acha mais facil de entender.

Utilizando condies com switch

Muitas das vezes voc utilizar varias instrues if em uma linha para testa e condies diferentes, como
mostrado no exemplo abaixo:

If( button == next) window.location= next.html;

If( button == previous) window.location= prev.html;
If( button == home) window.location= home.html;
If( button == back) window.location= menu.html;

Embora isso seja uma maneira correta de fazer as coisas, esse mtodo pode ser confuso se cada
instruo if tiver seu prprio bloco de cdigo com varias instrues. Como uma alternativa, o JavaScript
inclui a instruo switch, que permite combinar vrios testes da mesma varivel ou expresso em um
nico bloco de instrues. Como mostrado no exemplo abaixo:

switch ( button) {

case next: window.location= next.html;

break;

case previous: window.location= prev.html;

break;

case home: window.location= home.html;

break;

case back: window.location= menu.html;

break;

default:

window.alert( boto errado);

Analisando esse exemplo podemos perceber que a instruo switch tem vrios componentes :

A instruo inicial switch, inclui um valor a testar( nesse caso, button) entre parnteses.

As chaves ( { e } ) incluem a instruo switch, semelhante a uma funo ou uma instruo if.

Uma ou mais instrues case. Cada uma dessas instrues especifica um valor para comparar com o
valor especificado na instruo switch.

Se os valores corresponderem, as instrues depois da instruo case so executadas. De modo, o

prximo caso tentado.

A instruo break utilizada para terminar cada caso.

Opcionalmente, a instruo padro pode ser includa e seguida por um caso padro, uma ou mais
instrues que so executadas se nenhuma das instrues case foram satisfeitas.

Nota: Voc pode utilizar mltiplas instrues depois de cada instruo case dentro da estrutura switch.
Voc no precisa inclu-las entre chaves. Se case corresponde, o interpretador de JavaScript executa
instrues at encontrar um break ou case seguinte.

Avaliando a resposta do Usurio

Para melhor entender o exemplo anterior, vamos criar agora um exemplo prtico. Nesse exemplo voc
vai criar uma pagina da Web que faz ao usurio uma pergunta e depois avalia a resposta do usurio para

determinar o que fazer a seguir. Especificamente, voc perguntar ao usurio uma palavra-chave que
representa uma pgina da Web.

Se a palavra-chave corresponder a uma daquelas em seu script, o usurio ser enviado para a pgina
apropriada. Se a resposta no corresponder a uma palavra-chave predeterminadas, o usurio ser
enviado para uma pgina padro, que pode ser a sua pgina em construo ou no meu caso a pgina do
Jlio Battisti.

Seu script comea perguntado ao usurio a funo window.prompt. Para utilizar essa funo, voc inclui
uma instruo que faz uma solicitao ao usurio como um parmetro e atribui o valor retornado a uma
varivel. Eis a instruo da solicitao:

pagina = window.prompt( Que pgina voc vai visitar hoje ? );

A seguir, utilize uma instruo switch e vrias instrues case para avaliar a resposta :

switch ( pagina) {

case Netscape:

window.location= http:// www.netscape.com;

break;

case Microsoft:

window.location= http:// www.microsoft.com;

break;

case Yahoo:

window.location= http:// www.yahoo.com.br;

break;

A seguir, utilize a instruo default para enviar o usurio a uma pagina padro, que no meu caso a
pgina do Jlio Battisti ;

default :

window.location= http:// www.juliobattisti.com.br;

Como esta a ultima instruo na estrutura switch, voc no precisa utilizar a instruo break. A chave
final termina a instruo switch.

No exemplo abaixo mostra o script completo embutido em um documento de Web. Para testa-lo,
carregue a pgina. Voc deve ver um prompt, como mostrado nas Figuras logo abaixo. A seguir, insira
uma das palavras-chave. Voc deve ser enviada para a pagina apropriada. Se especificar uma palavrachave desconhecida, voc ser enviado para a pgina padro.

<HTML>
< HEAD><TITLE> Avaliando a resposta do Usurio</TITLE>
</HEAD>
<BODY>
<SCRIPT>

pagina = window.prompt( Que pgina voc vai visitar hoje ? );

switch ( pagina) {

case Netscape:

window.location= http:// www.netscape.com;

break;

case Microsoft:

window.location= http:// www.microsoft.com;

break;

case Yahoo:

window.location= http:// www.yahoo.com.br;

break;

default :

window.location= http:// www.juliobattisti.com.br;

</SCRIPT>
</BODY>
</HTML>

Depois executar o script voc vai ter os mesmo resultados vistos nas Figuras abaixo.

Introduo

Durante as primeiras partes do tutorial de JavaScript voc aprendeu mtodos e propriedades que os
auxiliam quando desejam executar alguma coisa no JavaScript. Agora chegamos a ultima parte para
terminar os princpios bsicos de programao de JavaScript. E nesta ultima parte vou mostrar como sua
pagina na Web pode desempenhar tarefas repetitivas , simplesmente utilizando loops em seu script.

Utilizando loops for

A palavra-chave for a primeira ferramenta a considerar para criar loops. Um loop for utiliza
basicamente uma varivel denominada contador ou ndice, muito parecido com outras linguagem de
programao como C, C++, Java, etc. , para monitorar quantas vezes o loop executou e ele pra quando
o contador alcana um certo numero.

Uma instruo for bsica se parece com isso:

for( var=1;var<10; var++) { .... }

Como pode perceber o loop for apresenta trs parmetros separados por ponto-e-virgula.

O primeiro parmetro ( var =1 ) especifica uma varivel e atribui uma valor inicial a ela, isso chamado
de expresso inicial, porque configura o estado inicial do loop.

O segundo parmetro ( var < 10 ) uma condio que deve permanecer verdadeira para manter o loop
executado, isso chamado de condio do loop.

O terceiro parmetro ( var++) uma instruo que executa a cada iterao do loop, isso chamado de
expresso de incremento, porque normalmente utilizada para incrementa o contador.

Depois que os trs parmetros foram especificados, uma chave de abertura ( { ) utilizada para sinalizar
o comeo de um bloco com instrues a serem executadas, depois uma chave de fechamento ( } )
utilizada para indicar o termino do bloco. Todas as instrues entre as chaves sero executadas a cada
iterao do loop. O exemplo abaixo mostra bem o tipo de loop utilizando a palavra-chave for.

for( i=1; i< 10; i++) { document.write (Essa a linha , i, \n) ; }

Esse exemplo exibe uma mensagem com o contador do loop durante cada iterao. O resultado desse
exemplo parecido com isso:

Essa a linha 1
Essa a linha 2
Essa a linha 3
Essa a linha 4
Essa a linha 5
Essa a linha 6
Essa a linha 7
Essa a linha 8
Essa a linha 9

Agora voc deve estar se perguntado : Por que o loop foi executado s 9 vezes e no 10? Essa duvida
sempre aparece nesse casos que envolve loop, mais se voc prestar bem ateno vai sabe a resposta.
s voc observar os parmetros do contador e a condio definida por eles. Voc pode observar bem
que o condicional o seguinte i < 10, por isso que o loop executado 9 vezes pois quando o contador
incrementado para 10 , a expresso no mais verdadeira . Agora se precisar que o loop conte at 10,
voc pode alterar a condicional para i<= 10 ou i < 11.

A estrutura do loop for no JavaScript baseado em Java, que por sua vez baseado em C. Embora seja
muito utilizada para contar de um numero a outro, voc pode utilizar quase qualquer instrues para a
inicializao, condio e incremento. Entretanto, normalmente h uma maneira melhor de fazer outros
tipos de loops como por exemplo a palavra-chave while.

Utilizado loops while

Outra palavra-chave para loops no JavaScript while. Diferente do loops for, os loops while no
necessariamente utilizam uma varivel para contar. Em vez disso, eles executam uma condio contanto
que seja verdadeira. De fato, se a condio inicia como falsa, as instrues podem simplesmente no
executar.

A instruo while inclui a condio entre parnteses e seguida por um bloco de instrues dentro de
chaves, exatamente como um loop for. O exemplo abaixo mostra um loop while.

while( total< 10) {

n++;
total+= values[n] ; }

Neste exemplo o loop utiliza um contador n, para iterar pelo array values. Em vez de parar em uma certa
contagem, entretanto, ele pra quando o total dos valores alcanar a 10.
Voc talvez tenha notado que poderia ter feito a mesma coisa com um loop for:

for ( n=0; total<10; n++) {

total+= values[n]); }

Como pode ver o loop for no nada mais que um tipo especial de loop while que trata uma
inicializao e um incremento para voc. Voc geralmente pode utilizar while para qualquer loop.
Entretanto, melhor escolher qualquer tipo de loop que faa mais sentido para o trabalho ou exija
menos digitao.

Utilizando loops do... while

O JavaScript 1.2, introduziu um terceiro tipo de loop: o loop do...while. Esse tipo de loop semelhante a
um loop while comum, com uma diferena: a condio testada no final do loop em vez do inicio. Como
mostrado no exemplo abaixo:

do {
n++;
total+= values[n] ; }
while( total< 10) ;

Como voc provavelmente notou, isso basicamente uma verso de ponta cabea do exemplo while
visto anteriormente. H diferena que com o loop do, a condiao testada no final do loop, isso
significa que as instrues no loop sempre sero executadas pelo menos uma vez, mesmo se a condio
nunca for verdadeira.

Nota : Como com os loops for e while, o loop do pode incluir uma nica instruo sem chaves ou um
numero de instrues includo entre chaves.

Trabalhando com loops

Embora voc possa utilizar simples loop dor e while para tarefas simples e diretas, h algumas
consideraes que voc deve fazer quando utilizar loops mais complicados. Nas prximas sees,
veremos loops infinitos e as instrues break e continue, que oferecem mais controles sobre os loops.

Loops infinitos

Os loops while do a voc bastante controle sobre o loop. Em alguns casos, isso pode causar problemas
se voc no for cuidadoso. Por exemplo veja o exemplo abaixo:

while( j< 10) {

n++;
values[n] ; }

Se entendeu a os exemplos anteriores sobre os loops, deve perceber que existe um erro nesse exemplo.
Como pode ver a condio do loop while refere-se varivel j, mas essa varivel realmente no se altera
durante o loop. Isso cria um loop infinito. O loop continuar executando ate que sela interrompido pelo
usurio ou ate gerar algum tipo de erro.

Os loops infinitos nem sempre podem ser interrompido pelo usurio, exceto fechando o navegador, em
alguns casos os loops infinitos podem at mesmo impedir que o navegador feche ou provocar uma pane
no sistema.

Eles tambm podem ser difceis de serem identificados, porque o JavaScript no lhe mostrar um erro
dizendo q voc que h um loop infinito. Mais no se preocupe, pois esse tipo de loop pode ser evitado , o
que tem que fazer : toda vez que for criar um loop em um script, voc deve ter cuidado de certificar-se
de que h uma sada.

Nota: Dependendo da verso do navegador em utilizao, o loop infinito pode ate mesmo fazer o
navegador parar de responder ao usurio. Certifique-se de fornecer uma rota de escape de loops infinitos
e salvar seu script antes de test-lo, em qualquer eventualidade.

Ocasionalmente, voc pode querer criar um loop infinito. Isso talvez inclua situaes em que voc quer
que seu programa execute at o usurio interromp-lo ou em voc quer fornecer uma rota de escape
com a instruo break. Uma maneira de criar um loop infinito o seguinte:

while ( true) {...}

Como o valor true condicional, esse loop sempre encontrar sua condio como sendo verdadeira.

Escapando de um loop infinito utilizando a instruo break

H uma maneira de escapar de um loop infinito. Voc pode utilizar a instruo break (significa pra )
durante um loop para sair dele imediatamente e continuar a primeira instruo depois do loop. O
exemplo abaixo mostra o uso dessa instruo.

while ( true) {
n++;
if( values[n]==1 break; }

Embora a instruo while esteja configurada como um loop infinito, a instruo if verifica o valor
correspondente de um array. Se encontrar um 1, sai do loop.

Quando o interpretado do JavaScript encontra uma instruo break, ele pula o resto do loop e continua o
script com a primeira instruo depois da chave de fechamento no final do loop. Voc pode utilizar a
instruo break em qualquer tipo de loop, seja infinito ou no. Isso fornece uma maneira fcil de sair se
um erro ocorrer ou se voc encontrou o que estava procurando.

Escapando de um loop infinito utilizando a instruo continue

A instruo continue mais uma escape que est disponvel para ajuda-lo a controlar a execuo de
instrues em um loop. A instruo continue pula o resto do loop, mas continua com a prxima iterao
do loop, diferente de break. O exemplo abaixo mostra como utilizado a instruo continue para pular
parte do loop.

for( i=1; i<21; i++ ) {

if( pontos[i]==0 )continue;
documente.write( O estudante de numero ,i,Pontos:, score[i], \n);
}

Nesse exemplo utiliza o loop for para imprimir notas de 20 alunos, armazenado no array pontos. A
instruo if utilizada para verificar as notas com um valor 0. O script assume que uma nota 0 significa
que o aluno no fez o teste, ento ele continua o loop sem imprimir essa contagem.

Utilizando loops for... in

Um terceiro tipo de loop disponvel pelo JavaScript. O loop for...in no to flexvel quando um loop for
ou while comum. Em vez disso, especificamente projetado para desempenhar uma operao em cada
propriedade de um objeto.

Por exemplo , o objeto navigator contm propriedade que descrevem o navegador do usurio, como voc
aprender mais para frente. Voc utiliza for...in para exibir essa propriedade do objeto:

for( i in navigator ) {
document.write(Propriedade: +i )
document.write( Valor :+navigator[i]); }

Como um loop for comum, esse tipo de loop utiliza uma varivel de ndice( i no exemplo). Para cada
iterao do loop, a varivel configurada como a prxima propriedade do objeto. Isso torna fcil quando
voc precisa verificar ou modificar cada uma das propriedades do objeto. Mas voc no precisa se
preocupar com isso agora , pois aprender isso mais detalhadamente nos prximos tutoriais.

Trabalhando com arrays e loops

Para aplicar seu conhecimento de loops, voc agora criar um script que lida com arrays utilizando loops.
Esse script simples solicitar ao usurio uma serie de nomes. Depois que todos os nomes foram
inseridos, ele exibir a lista de nomes em uma lista numerada. Para comear o script, inicializa algumas
variveis:

nomes=new Array( );
i=0;

O array nomes armazenar os nomes que o usurio insere. Voc no sabe quantos nomes sero
inseridos, ento voc no especificou uma dimenso para o array. A varivel i ser utilizada como
contador nos loops.

A seguir, utilize a instruo window.prompt para solicitar ao usurio uma serie de nomes. Utilize um loop
para repetir o prompt para cada nome. Voc quer que o usurio insira pelo menos um nome, ento um
loop do seria o ideal:

do {
next=window.prompt ( Digite o prximo nome:);
if( next > ) nomes[i] =next;
i=i+1;
} while( next > );

Nota: Se voc estiver interessado em fazer seus scripts o mais curto possvel, lembra-se de que voc
pode utilizar o operador de incremento (++) para combinar a instruo i=i+1 , da seguinte maneira i++.

Esse loop solicita uma string chamada next. Se um nome for inserido e se for maior que um espao, ele
armazenado como a prxima entrada no array nomes. O contador i ento incrementado. O loop se
repete at que o usurio no insira um nome ou de um clique em Cancel na Caixa de dialogo do Prompt.

A seguir, apenas para mostrar, seu script pode exibir o nmero de nomes que foram inseridos:

document.write ( <h2>+(nomes.length)+ Nomes listados.</h2>);

Essa instruo exibe a propriedade length do array nomes, cercada pelas tags de ttulo 2 da linguagem
html para nfase.

A seguir, o script deve exibir todos os nomes na ordem em que forma inseridos. Como os nomes esto
em array, o loop for...in uma boa escolha:

document.write(<OL>);
for( i in nomes)
{ document.write(<LI> + nomes[i] +<BR> );
}
document.write<</OL>);

Nesse script voc tem o loop for...in que faz o loop pelo array nomes, atribuindo o contador i a um ndice
de cada vez. O script ento imprime o nome com uma tag <LI> como um item em uma lista de pedidos.
Antes e depois do loop, o script imprime as tags <OL> de abertura e de fechamento.

Agora voc tem tudo de que precisa para um script funcional. O exemplo abaixo mostra a verso
completa do script, includo o HTML normal as tags<SCRIPT> . Que tal executa-lo?

<HTML>
<HEAD>
<TITLE> EXEMPLO DE LOOP</TITLE>
</HEAD>
<BODY>
<H1>EXEMPLO DE LOOP</H1>
<P> ENTRADA DE UMA SERIE DE NOMES.</P>
<SCRIPT>
nomes=new Array();
i=0;
do {
next=window.prompt(" Digite o prximo nome:");
if(next > " " && next != "undefined") nomes[i] = next;
i=i+1;
} while(next > " " && next != "undefined");
document.write("<h2>"+(nomes.length)+ "Nomes listados.</h2>");

document.write("<OL>");
for( i in nomes)
{ document.write("<LI>+ nomes[i] +"<BR> );
}
document.write<"</OL>");
</SCRIPT>
</BODY>
</HTML>

Quando carregar esse documento em um navegador, voc ser solicitado a digitar um nome. Insira
vrios nomes e depois d um clique em Cancel para indicar que voc terminou. Depois disso voc ter
como resultado todos os nomes inseridos em ordem.
Utilizando objetos embutidos

O que um objeto?

Como voc sabe a partir do que estudou nos tutoriais anteriores, os objetos permitem combinar vrios
tipos de dados e funes para agir sobre os dados em um nico pacote. Nesta parte do tutorial voc
aprendera, mais sobre os objetos embutidos Math e Date, mais primeiro, irei fazer uma viso rpida de
como os objetos funcionam no JavaScript.

Criando Objetos

Cada objeto tem uma funo especial, denominada construtor, que utilizada para criar objetos. Por
exemplo, O JavaScript inclui uma funo embutida chamada String para criar objetos String. Essa a
razo pela qual voc pode criar uma varivel de string como esta:

meunome= new String (Kenia);

A palavra-chave new diz ao JavaScript para criar um novo objeto ou, em termos tcnicos, uma nova
instancia do objeto String. Essa instncia particular ter o valor Kenia e ser armazenada na varivel
meunome.

Voc pode utilizar a mesma sintaxe bsica para criar objetos String, Date, Array e at seus prprios
objetos personalizados, porem o objeto Math uma exceo, mais isso voc vai ver logo adiante.

Propriedade e valores de objeto

Cada objeto pode ter uma ou mais propriedades ou atributos. Cada propriedade basicamente uma
varivel e esta contida dentro do objeto. Pode-se atribuir um valor a todas as propriedades. possvel
utilizar propriedades para armazenar qualquer tipo de dados que uma varivel pode armazenar.

Voc j utilizou algumas propriedades de objeto, como a propriedade length de strings e arrays. Para
referenciar uma propriedade, voc utiliza o nome do objeto, um ponto e o nome da propriedade. Por
exemplo, o comprimento do array name referenciado com essa propriedade:

names.length

As propriedades de objetos pode conter at mesmo os prprios objetos. Por exemplo, cada um dos
elementos do array um tipo de propriedade especial, identificamos por um valor de ndice. Se o array
names contm strings, ele um array de objetos String, como por exemplo, a sintaxe para o
comprimento do primeiro elemento de names :

names[0].length

Entendendo mtodos

Como voc j aprendeu, as funes so combinaes de instrues que podem ser executadas como
uma unidade. Os mtodos so funes que so armazenadas como propriedades de um objeto.

Voc j utilizou os mtodos. Por exemplo, o mtodo toUpperCase de objetos String, que converte uma
string em letras maisculas. Eis um exemplo que utiliza uma string chamada value:

value.toUpperCase( );

Como funes comuns, os mtodos podem opcionalmente retornar um valor. Por exemplo, a instruo
abaixo arredonda um numero utilizando o mtodo round do objeto Math e armazena o resultado na
varivel final:

final= Math.round(num);

Utilizando a palavra-chave with

A palavra-chave with ainda no foi abordada aqui. Voc pode utiliz-la para tornar a programao em
JavaScript mais fcil ou pelo menos mais fcil de digitar.

A palavra-chave with especifica um objeto e seguida por um bloco de instrues includo entre chaves.
Para cada instrues no bloco, quaisquer propriedades que voc mencione sem especificar um objeto
so assumidas como sendo relativas a esse objeto.

Como por exemplo, suponha que voc tenha uma string chamada lastname. Voc pode utilizar o with
para executar operaes de string sobre ela sem especificar o nome da string todas s vezes:

with(lastname)

{
window.alert( length of last name: + length);

toUpperCase():
}

Nesse exemplo, a propriedade length e o mtodo toUpperCase refere-se a string lastname, embora ela
seja somente especificada uma vez com a palavra with.

obvio que a palavra with apenas economiza um pouco de digitao em situaes como essa.
Entretanto, voc a achar muito til quando estiver lidando com um objeto dentro de um longo
procedimento ou quando estiver utilizando um objeto embutido, como o objeto Math.

O Objeto Math

O objeto Math um objeto embutido de JavaScript que inclui funes e constantes matemticas. Voc
no precisa criar um objeto Math, porque ele existe automaticamente em qualquer programa JavaScript.
As propriedades do objeto Math representam constantes matemticas e seus mtodos so funes
matemticas.

Nota: Como voc pode utilizar as propriedades e mtodos do objeto Math em um grupo inteiro de
instrues, talvez ache til utilizar a palavra-chave with, introduzida anteriormente nesta hora, para
especificar o objeto Math para essas instrues.

Arredondando e Truncando

Trs dos mtodos mais teis do objeto Math permitem arredondar valores decimais para cima e para
baixo:

Math.ceil( ): arredonda um numero para cima ate o prximo inteiro.

Math.floor( ): arredonda um numero para baixo ate o prximo inteiro.
Math.round( ): arredonda um numero para o inteiro mais prximo.

Todos eles tomam o numero a ser arredondado como seu nico parmetro. Voc talvez note uma coisa
ausente: a capacidade de arredondar para casa decimal, como para valores monetrios.Entretanto, voc
pode facilmente simular isso.O exemplo abaixo mostra uma funo que arredonda nmeros para duas
casas decimais.

function round( numero) {

return Math.round( numero*100)/100;
}

Essa funo multiplica o valor por 100 para mover o decimal e ento arredonda o numero para o inteiro
mais prximo. Por fim, o valor dividido por 100 para restaurar o decimal.

Gerando nmeros aleatrios

Um dos mtodos mais comumente utilizados do objeto Math o mtodo Math.random( ), que gera um
numero aleatrio. Esse mtodo no exige nenhum parmetro. O numero que retorna um numero
decimal aleatrio entre 0 e 1.

Em geral, voc vai querer um numero aleatrio de uso geral. O Exemplo abaixo mostra uma funo que
gera nmeros aleatrios entre 1 e o parmetro que voc envia para ela.

function rand( numero) {

return Math.floor( Math.random() *numero)+;

Essa funo multiplica um numero aleatrio pelo valor que voc envia para ela e depois o converte em
um inteiro entre 1 e o numero utilizando o mtodo Math.floor().

Outras Funes tipicamente Matemticas:

Math.abs(nmero) - retorna o valor absoluto do nmero (ponto flutuante)

Math.pow(base, expoente) - retorna o clculo do exponencial
Math.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidos
Math.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidos
Math.sqrt(nmero) - retorna a raiz quadrada do nmero
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Math.sin(nmero) - retorna o seno de um nmero (anglo em radianos)
Math.asin(nmero) - retorna o arco seno de um nmero (em radianos)
Math.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos)
Math.acos(nmero) - retorna o arco cosseno de um nmero (em radianos)
Math.tan(nmero) - retorna a tangente de um nmero (anglo em radianos)
Math.atan(nmero) - retorna o arco tangente de um nmero (em radianos)
Math.pi retorna o valor de PI (aproximadamente 3.14159)
Math.log(nmero) - retorna o logartmo de um nmero
Math.E - retorna a base dos logartmos naturais (aproximadamente 2.718)
Math.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693)
Math.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442)

Math.LN10 retorna o valor do logartmo de 10 (aproximadamente 2.302)

Math.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434)

Nota: Em todas as funes, quando apresentamos a expresso "(nmero)", na verdade queremos nos
referir a um argumento que ser processado pela funo e que poder ser: um nmero, uma varivel ou
o contedo de um objeto (propriedade value).

Trabalhando com Datas

O objeto Date um objeto embutido no JavaScript que permite trabalhar com datas e horas. Voc pode
criar um objeto Date sempre que precisar armazenar uma data e utilizar os mtodos do objeto Date para
trabalhar com a data.

O objeto Date no tem propriedades, para configurar ou obter valores de um objeto Date , voc deve
utilizar outros mtodos , que vai ser abordado logo a seguir.

Criando um objeto Date

Voc pode criar um objeto Date utilizando a palavra-chave new. Opcionalmente voc tambm pode
especificar a data para armazenar no objeto quando voc o cria.

Voc pode utilizar qualquer dos seguintes formatos:

Aniversario=new Date ( );
Aniversario=new Date (Julho 20, 2005, 08:00:00 );
Aniversario=new Date (07, 20, 2005 );
Aniversario=new Date ( 07,20, 2005,8,0,0 );

Voc pode escolher, quaisquer desses formatos, dependendo de quais valores quer configurar. Se voc
no utilizar parmetros, como no primeiro caso, a data atual armazenada no objeto. Voc ento pode
configurar os valores utilizados outro mtodo que vai ser descrito a seguir.

Configurando valores de data

Uma variedade de mtodos set permite configurar componentes de um objeto Date para valores :

setDate( ): configura o dia do ms.

setMonth( ): configura o ms. O JavaScript numera os meses de 0 a 11, iniciando com Janeiro (0).

 setFullYear( ):configura o ano.

setTime( ) : configura a hora e a data especificando o nmero de milissegundos, desde 1 de Janeiro.

setHours( ), setMinutes( ),setSeconds( ): configura a hora.

Como por exemplo, a instruo abaixo configura o ano de um objeto Date denominado holiday para 99.

holiday.setYear(99).

Obtendo valores de data

Voc pode utilizar os mtodos get para obter valores de um objeto Date. Essa a nica maneira de obter
valores, porque eles no so propriedades disponveis. Eis os mtodos get disponveis para datas:

getDate( ): obtm o dia do ms.

getMonth( ): obtm o ms.

getFullYear( ):obtm o ano.

getTime( ):obtm a hora e a data como o nmero de milissegundos deste 1 de Janeiro.

getHours( ), getMinutes,getSeconds( ): obtm a hora.

Nota: Juntos com setFullYear e getFullYear, que exigem anos de quarto dgitos, o JavaScript inclui os
mtodos setYear e getYear, que utilizam datas de dois dgitos. Voc sempre deve utilizar a verso de
quatro dgitos para evitar questoes do Ano 2000.

Trabalhando com fusos horrios

Por fim, algumas funes esto disponveis para ajudar seus objetos Date a trabalharem com valores de
hora local e fusos horrios:

getTimeZoneOffset( ):Fornece a diferena entre o fuso horrio local e o GMT( Greenwich Mean Time,
tambm conhecido como UTC). Nesse caso, local refere-se localizao do navegador, naturalmente,
isso somente funciona se o usurio configurou seu relgio de sistema corretamente.

toGMTString( ): Converte o valor de hora do objeto date em texto, utilizando GMT.

 toLocalString( ): Converte o valor de hora do objeto date em texto, utilizando a hora local.

Convertendo entre formatos de data.

Dois mtodos especiais do objeto Date permitem converter entre formatos de data. Em vez de utilizar
esses mtodos com um objeto Date que voc criou, voc os utiliza com o prprio objeto Date embutido.
Esses mtodos so os seguintes:

Date.parse ( ): Converte uma string de data e objeto Date.

Date.UTC ( ): Faz o contrario. Converte um valor de objeto Date em uma hora UTC ( GMT).

Trabalhando com objetos browser

Uma vantagem que o JavaScript tem at mesmo em relo a linguagens mais sofisticadas como Java
que os scripts podem manipular o navegador da web. Seu script pode carregar uma nova pgina no
navegador, trabalhar com partes da janela e do documento do navegador e at abrir novas janelas.

A fim de trabalhar com o navegador e os documentos, o JavaScript utiliza uma variedade de objetos
browser. Cada Objeto representa parte de uma pagin da web.Por exemplo , uma janela , um documento
ou uma imagem. Os objetos browser, que permitem trabalhar com partes da pgina da Web.

Os objetos browser esto organizados em uma hieraquia de objetos pai e filh. Quando referencia um
objeto, voc utiliza o nome do objeto pai seguido pelo nome ou nomes do objeto filho, separados por
pontos. Por exemplo, O JavaScript armazena objetos para representar imagens em documento como
filhos do objeto document. Como no exemplo abaixo:

window.document.imagem01

O exemplo acima refere-se ao objeto imagem01, um filho do objeto document, que filho do objeto
windo.

O objeto window est na parte superior da hierarquia de objeto browser. O diagrama abaixo mostra a
hierarquia do objeto e uma varivel de seus objetos.

Esse diagrama inclui somente os objetos bsicos de um navegador que sero abordados a seguir. Uma
variedade de outros objetos tambm entra na hierarquia e ser discutidos ao longos dos tutoriais.

Utilizando objetos window.

Na parte superior da hierarquia de objeto browser est o objeto window, que representa uma janela de
navegador. Voc j utilizou alguns mtodos e propriedades do objeto window, como por exemplo:

Voc utilizou a propriedade window.status para alterar o contedo da linha de status do navegador.

Voc utilizou os mtodos window.alert, window.confirm e window.prompt para exibirem caixa de

dilogos de mensagem para o usurio.

Podem haver vrios objetos window por vez, cada um representando uma janela de navegador aberta.
Os frames so tambm representador por objetos window. Mas isso ainda assunto de outra parte do
tutorial.

Trabalhando com documentos da Web

O objeto document representa um documento ou pgina da Web. Os documentos da web so exibidos

dentro das janelas do navegador, ento no deve supreende-lo aprender que o objeto document filho
do objeto window.

Como o objeto window sempre representa a janela atual ou seja aquela que contm o script, voc pode
utilizar a window.document para referenciar o documento atual. Lembre-se que voc j utilizou o mtodo
document.write para exibir texto dentro de um documento na Web.Os exemplos nos tutoriais anteriores
utilizaram somente uma nica janela e documento. Se mltiplas janelas ou frames estiverem em
utilizao, talvez haja vrios objetos window, cada um com seu prprio objeto document. Para utilizar um
desses objetos document, voc utiliza o nome da janela e o nome do documento.

Obtendo informaes sobre o documento

Varias propriedades do objeto document incluem informaes sobre o documento atual em geral. Por
exemplo:

A propriedade URL especifica o URL do documento. Esse um campo de texto simples. Voc no pode
alterar essa propriedade. Por isso se voc precisar enviar o usurio para uma localizao diferente, o
ideal utiliza o objeto window.location, que vai ser especificado mais adiante.

A propriedade title lista o titulo da pgina atual, definido pela tag HTML<TITLE>.

A propriedade referrer o URL da pgina que o usuario esta visualizando antes da pagina atual,
normalmente , a pagina com um link para a pgina ataul.

A propriedade lasModified a ultima data em que o documento foi modificado. Essa data enviada ao
servidor junto com a pgina. O exemplo abaixo mostra um script de um document de HTML que exibe a
data da sua ltima modificao.

<HTML>
<HEAD> <TITLE>Teste do Document</TITLE></HEAD>
<BODY>
Esta pagina foi modificada em:
<SCRIPT>
document.write(document. lasModified);
</SCRIPT>
<BR>
</HTML>

Isso pode dizer ao usuario quando a pgina foi alterada pela ultima vez. Se utilizar JavaScript, voc no
tem de se lembrar de atualizar a data toda vez que modificar a pgina.

Nota: Voc talvez ache que a propriedade document.lasModified no funciona em suas pginas da Web.
A data recebida do servidor da Web e alguns servidores no mantm data de modificaes
corretamente.

Escrevendo texto em um documento

Os mtodos do objeto document mais simples so tambm aqueles que voc utilizar mais
freqentemente. De fato, voc j os utilizou. Os mtodos document.write imprime texto como parte da
pgina de HTML em uma janela de documento. Essa instruo utilizada sempre que voc precisar
incluir sada em uma pgina da Web.

Uma instruo alternativa, document.writeln, tambm imprime texto, mas tambm inclui um caracter de
nova linha (/n) no final. Isso til quando voc quer que seu texto seja a utima coisa da linha.

Nota: Lembre-se de que o caractere de nova linha ignorado pelo HTML, exceto dentro do continer
<PRE>. Voc precisar utilizar a tag<BR> se quiser uma quebra de linha real.

Voc pode utilizar esses mtodos somente dentro do corpo da pgina da Web, de modo que eles sero
executados quando a pgina carregar. O mtodo document.write pode ser utilizado somente dentro de
uma tag <SCRIPT> no corpo de um documento HTML. Voc tambm pode utiliza-lo em uma funo,
contanto que voc inclua uma chamada para a funo dentro do corpo do documento.

Limpando e reescrevendo documentos

O objeto document inclui mtodos open e close. Diferente dos mtodos do objeto window que possuem
mtodos com o mesmo nome, esse mtodos relamente no abre e fecham novos documentos nem
janelas. Em vez disso, o mtodo open abre um fluxo que limpa o documento e permite criar um novo
com o mtodo write ou writeln.

Quando voc utiliza o mtodo document.open, o documento atual limpado. Quaisquer dados j
exibidos no documento so apagados e voc pode comear a escrever o novo contedo no documento.

Os dados que voc escrever depois de document.open no so realmente exibidos ate voc fecha o fluxo
com mtodo document.close. Voc pode utilizar isso para assegurar que blocos de comando write
executem ao mesmo tempo.

Nota: Se voc utilizar o mtodo document.open na janela atual, seu script parte do documento ataul ser
limpado e parar de executar. Por essa razo, esses mtodos so mais bem utilizados com janelas e
frames separadas. Mais no precisa se preocupara com isso agora, pois este assunto vai ser abordado
nos prximos tutoriais.

Voc pode especificar um tipo de documento MIME no comando document.open,mais no obrigatrio.

Isso permite criar um documento de qualquer tipo, incluindo imagens e documentos utilizados por
aplicativos plug-in.

Nota: O MIME significa multipurpose Internet mail extensions. Trata-se de um padro Internet para tipos
de documento. Os servidores da Web enviam um tipo MIME para o navegador com documentos para
dizer ao navegador como exibi-los. Documentos tpicos de navegador so HTML ( tipo MIME text/html) e
texto ( tipo MIME text/plain).

Utilizando links e ncoras

Outro filho do objeto document o objeto link. Podem haver mltiplos objetos link em um documento,
mas cada um inclui informaes diferentes sobre um link para outra localizao ou ncora.

Nota: As ncoras so lugares identificados em um documento de HTML para quais se podem pular
diretamente. Voc as define com uma tag como esta : < A NAME=index1>. Voc ento se vincular a
eles: < A HREF=#index1>.

Pode-se acessar objeto link como o array link. Cada menbro do array um dos objetos link na pagina
atual. Uma propriedade do array, document.link.length, indica o numero de links na pgina.

Cada objeto link tem uma lista de propriedades que define o URL. Voc pode referi-se a uma propriedade
indicando o numero do link e o nome da propriedade. Poe exemplo, a seguinte instruo atribui o URL
inteiro do primeiro link varivel link1:

link1=links[0].href;

Os objetos anchor so tambm filhos do objeto document. Cada objeto anchor representa uma ncora no
documento atual, uma localizao particular para a qual se pode pular diretamente.

Como nos links,voc pode acessar ncoras com um array: nchors. Cada elemento desse array um
objeto anchor. A propriedade document.anchors.length fornece o numero de elementos no array anchors.

Acessando o histrico do navegador.

O objeto history outra propriedade do objeto window. Esse objeto armazena as informaes sobre os
URLs que foram visitados antes e deps do atual e inclui mtodos para ir para as localizaes anteriores
ou prximas.

O objeto history tem quatro propriedades:

history.length: monitora o comprimento da lista de histrico em outras palavras, o numero de

localizaes diferentes que o usurio visitou.

history.next: o valor da prxima entrada na lista de histrico, o URL ao qual o usurio ser enviado se
ele pressionar o boto Forward do navegador. Como o boto Forward somente funciona quando voc j
utilizou o boto Back, nem sempre pode haver um valor para a propriedade history.next.

history.previous: a entrada anterior do histrico, o URL ao qual o usurios ser enviado se ele utilizar
o navegador de boto Back.

Voc tambm pode tratar o objeto history como array. Cada entrada contm um dos URLs na lista de
histrico, com history[0] sendo a entrada atual. Por ultimo, mas no menos importantes, o objeto history
tem trs mtodos:

history.go: abre um URL da lista de histrico. Para utilizar esse mtodo, especifique um numero positivo
ou negativo entre parnteses. Por exemplo , history.go(-2) equivalente a pressionar o boto Back duas
vezes.

history.back:carrega o URL anterior a lista de histrico, o equivalente a pressionar o bota Back.

history. forward: carrega o prximo URL na lista de histrico, se disponvel. Isso equivalente a
pressionar o boto Forward.

Nota: Os mtodos history.back e history. Forward no funcionam corretamente em algumas verses do

Netscape Navigotor.

Por essa razo, melhor utilizar history.go(-1) e history.go(1).

Trabalhando com objeto location

Este objeto armazena as informaes sobre o URL atual armazenado na janela. Por exemplo, a seguinte
instruo
carrega
um
URL
na
janela
atual:
window.location.href= http://www.juliobattisti.com.br;

A propriedade href utilizada nessa instruo contm o URL inteiro da localizao atual da janela. Voc
tambm pode acessar partes do URL com varias propriedades do objeto location por exemplo :
location.protocol a parte de protocolo do URL.

O objeto location tem dois mtodos:

location.reload: Recarrega o documento atual.

location.replace: Substitui a localizao atual por uma nova.

Lendo informaes sobre o navegador.

O objeto navigator no faz parte da hierarquia do objeto browser, mas outro objeto til para fazer
script. Esse objeto contem informaes sobre a verso do navegador. Voc pode utilizar esse objeto para
descobrir qual navegador e plataforma de computador o usurio esta executando e seu script pode
alterar seu comportamento para corresponder a esse navegador.

Scripts especficos do navegador pode ser complicado , mais no se preocupe, pois isso assunto para
outra parte do tutorial.

Nota: O nome do objeto navigator provem do Netscape Navigator, que era o nico navegador que
suportava JavaScript quando a linguagem apareceu pela primeira vez no Navigator 2.0. Apesar de seu
nome especifico Netscape, esse objeto agora suportado do Microsoft Internet Explorer.

Criando os botes Back e Forward

Uma utilizao comum para os mtodos back e forward do objeto history adicionar seus prprios
botes Back e Forward a um documento na Web. Isso aprimora a interface com o usurio de suas
paginas.

Como um exemplo do uso do objeto history, voc agora criara um script que exibe os botes Back e
Forward e utiliza esses mtodos para o navegador.

Voc utilizar imagens grficas para os botes Back e Forward. Abaixo esta a parte do script que tratar
o boto Back:

<A HREF=javascript:history.go(-1);>
<IMG BORDER=0 SRC= left.gif>
</A>

Isso utiliza um URL javascript: para executar um commando quando o usuario d cliques em um link.
Nesse caso, o link a imagem da seta esquerda. O script para o boto Forward quase idntico:

<A HREF=javascript:history.go(1);>
<IMG BORDER=0 SRC= right.gif>
</A>

Com os script dos botes em mos, agora precisamos contruir o restante de um documento HTML. O
exemplo abaixo mostra o documento completo de HTML e a Figura 1.0 mostra como o Internet Explore
exibe seu documento. Depois de voc carregar esse documento em um navegador, visite outras URL e
certifique se os botes esto funcionando.

<html>
<head><title> Testando os botes</title></head>
<body>
<h1> Botes Back e Forward</h1>
<h1> Esta pgina um teste para os botes Back e Forward. Depois carregar esse documento , visite
outras URL e certifique se os botes esto funcionando. </h1>
<HR>
<A HREF=javascript:history.go(-1);>
<IMG BORDER=0 SRC= left.jpg>
</A>
<A HREF=javascript:history.go(1);>
<IMG BORDER=0 SRC= right.jpg>
</A>
<HR>
</BODY>
<HTML>

Depois de carregada, seu exemplo deve ficar parecido com a figura abaixo.

Figura 1.0- Exemplo dos botes Back e Forward

Nota: Esse script uma exemplo de quanto o JavaScript pode fazer com muito pouco. Voc pode ter
percebido no utilizei as tags< Script> absolutamente e apenas dois comando do JavaScript.
Utilizando objetos para simplificar o script

Embora as variveis e arrays do JavaScript sejam formas versteis de armazenar dados, s vezes voc
precisa de uma estrutura mais complicada. Por exemplo, suponha que voc esteja criando um script para
trabalhar com um banco de dados de cartes de informaes que contm nomes, endereos e nmeros
de telefone de uma variedade de pessoas.

Se voc utilizar variveis normais, voc precisaria de varias variveis separadas para cada pessoa no
banco de dados, ou seja, uma varivel para nome, uma varivel para endereo e assim por diante. Para
melhor entendimento o ideal seria utilizar os arrays, ou seja, voc pode Ter um array de nomes, um array
de endereos e um array de nmeros de telefone. Cada pessoa no banco de dados teria uma entrada em
cada array. Isso seria mais conveniente mais ainda no seria perfeito.

Com objetos, voc pode tornar as variveis que armazenam o banco de dados to lgico quanto de
informaes. Cada pessoa representada por um objeto Cart, que tem propriedade para nome, endereo
e numero de telefone. voc pode at adicionar mtodos ao objeto para exibir ou trabalhar com as
informaes.

Nos tpicos a seguir voc utilizar a JavaScript para realmente criar o objeto Cart e suas propriedades e
mtodos. Mais adiante utilizaremos o objeto Cart em um script para exibir as informaes para vrios
membros do banco dados.

Definindo um objeto

O primeiro passo na criao de um objeto atribuir um nome a eles e a suas propriedades. J decidimos
chamar o objeto de Cart. Cada objeto ter as seguintes propriedades:

nome
endereo
telefone

O primeiro passo na utilizao desse objeto em um programa de JavaScript criar uma funo para criar
novos objetos Cart. Essa funo chamada construtor de um objeto. Como a funo abaixo:

function Cart(nome, endereco, telefone)

{ this.nome = nome};
this.endereco = endereco;
this.telefone=telefone; }

O construtor uma funo simples que aceita parmetros para inicializar um novo objeto e os atribui s
propriedades correspondentes. Essa funo aceita vrios parametros da instruo que chama a funo e
ento os atribui como propriedade de um objeto.Como a funo chamada Cart, o objeto o objeto
Cart.

Note que utilizei a palavra-chave this, voce vai utilizar essa palavra toda a vez que criar uma defnio de
objeto. Utiliza this para referenciar o objeto atual ou seja aquele que esta sendo criado pela funo.

Definindo um mtodo de objeto

Agora vamos criar um metodo para trabalhar com o objeto Cart. Como todos os objetos Cart terao as
mesmas propriedades, pode ser util ter uma funo que imprime as propriedades em um formato
organizado. Vamos chamar essa funo de imprimircart.

A funo imprimircart ser utilizada como um metodo para objetos Cart, entao voce no precisa solicitar
parametros. Em vez disso, voce pode utilizar a palavra-chave this novamente para referenciar a
propriedade do objeto atual. Como a funo abaixo:

function imprimircart( )
{ line1= Nome: +this,nome +<BR>\n;
line2= Endereo: +this,endereco +<BR>\n;
line3= Telefone: +this,telefone +<BR>\n;
document.write(line1,line2,line3);
}

Essa funo simplesmente l a propriedades do objeto ataul( this), imprime cada uma com uma legenda
e pula para um nova linha.

Voc agora tem uma funo que imprime um carto, mas no oficialmente um metodo do objeto Card.
A ultima coisa que voce precisa fazer tornar imprimircart parte da definio de funo para objetos
Cart. Logo abaixo esta a modficao da funo Cart:

function Cart(nome ,endereco, telefone)

{ this.nome = nome;
this.endereco = endereco;
this.telefone=telefone;
this. imprimircart= imprimircart ;
}

A instruo adicionada se parece exatamente como a definio de outra propriedade, mas refere-se a
funo imprimircart. Essa funcionar contanto que a funo imprimircart seja definida com sua prpria
definio de funo.

Criando uma instancia de objeto

Agora vamos utilizar definio de objeto e mtodo que voc criou acima. A fim de utilizar a definio de
objeto, vamos criar um novo objeto. Isso feito com a palavra-chave new. Essa a mesma palavrachave que voc utilizou para criar os objetos Date e Array.

A seguinte instruo criar um novo objeto Cart chamado kenia.

kenia=new(kenia campos, Rua da Amora, 123, (34) 3216-8796);

Como voc pode ver, criar um objeto muito fcil. Tudo que voc faz chamar a funo Cart( ) e conferir
a ela os atributos exigidos, na mesma ordem que a definio.

Uma vez que essa instruo executa, um novo objeto criado para armazenar as informaes da kenia.
Isso chamado de instancia do objeto Cart. Assim como pode haver diversas variveis de strings em um
programa, pode haver diversas instancias de um objeto que voc define.

Em vez de especificar todas as informaes em um carto com a palavra- chave new, voc pode atribuilas depois de feito. Por exemplo, voc pode criar um objeto Cart vazio chamado kenia e depois atribuir
suas propriedades, como a seguir:

kenia=new Cart ( );
kenia.nome= kenia campos;
kenia.endereco= Rua da Amora, 123;
kenia.telefone= (34) 3216-8796 ;

Uma vez que voc criou uma instancia do objeto Cart utilizando qualquer um desses mtodos, voc pode
utilizar o mtodo imprimircart ( ) para exibir suas informaes. Por exemplo,essa instruo exibe as
propriedades do carto da kenia:

kenia.imprimircart ( );

Personalizando objetos embutidos

O JavaScript inclui um recurso que permite estender as definies de objetos embutidos. Por exemplo, se
voc acha que o objeto String no atende s suas necessidades, voc pode estend-lo, adicionando uma
nova propriedade ou mtodo.

Isso talvez seja muito til se voc for criar um script grande que utilize muitas strings.

Voc pode adicionar tanto propriedades como mtodos a um objeto existente utilizando a palavra- chave
prototype. ( um prottipo e outro nome para a definio de um objeto ou uma funo construtora).A
palavra-chave prototype permite alterar a definio de um objeto fora de sua funo construtora. Como
um exemplo, vamos adicionar um mtodo definio de objeto String. Voc criar um mtodo chamado
heading, que converte uma string em um ttulo de HTML. A seguinte instruo define uma string
chamada title:

title= Minha Pagina na Web;

Essa instruo daria sada ao contedo da string de title como um titulo de HTML de nvel 1:

document.write(title.heading(1));

O exemplo abaixo adiciona um mtodo heading definio de objeto String que exibir a string como um
titulo e ento exibira os seguinte exemplo:

<html>
<head><titler> Testando o mtodo heading</title>
</head>
<body>
<Script>
function addhead(level)
{ html= H+level;
text= this.toString( );
start=<+html +>;
stop=</+html +>;
return start +text +stop;

}
String.prototype.heading=addhead;
document.write( Isto somente um teste.heading(1));
</Script>
</body>
</html>

Neste exemplo, foi definido a funo addhead( ), que servira como o novo mtodo de string. Ela aceita
um numero para especificar o nvel de titulo. As variveis start e stop so utilizadas para armazenar as
tag HTML abre tituloe fecha titulo, como < H1> e </H1>.

Depois que a funo foi definida, utilize a palavra-chave prototype para adiciona-la como um mtodo do
objeto String. voc ento pode utilizar esse mtodo em qualquer objeto String ou, de fato, a qualquer
string de JavaScript. Isso demostrado pela ultima instruo, que exibe uma string de texto como um
titulo de nvel 1, visto na figura abaixo:

Armazenando dados em objetos

Depois de termos criamos um novo objeto para armazenar os cartes de informaes e um mtodo para
imprimi-los. Agora para entender melhor sobre propriedades, funes e mtodos, vamos utilizar esse
objetos em uma pgina da Web para exibir dados para vrios cartes.

O documento de HTML precisar incluir a definio de funo para imprimircart, junto com a definio
para o objeto Cart. Neste exemplo vamos criar trs cartes e imprimi-los no corpo do documento. O
exemplo abaixo mostra o cdigo completo do documento de HTML, que tal testa-lo ?

<html>
<head><titler> Cartes </title>
<Script>
function imprimircart( )
{ line1= <B> Nome: </B>+this.nome +<BR>\n;
line2= <B>Endereo: </B> +this.endereco +<BR>\n;
line3= <B>Telefone: </B> +this.telefone +<BR>\n;
document.write(line1,line2,line3);
}
function Cart(nome ,endereo, telefone)
{ this.nome = nome;
this.endereco = endereco;
this.telefone=telefone;
this. imprimircart= imprimircart;
}
</Script>
</head>
<body>
<H1> Cartes de Teste</H1>
Temos as seguintes informaes: <HR>
<Script>
kenia=new Cart(kenia campos, Rua da Amora, 123, (34) 3216-8796);
felipe=new Cart(Felipe Oliveira, Rua da Maa, 321, (34) 3216-9687);
henrique=new Cart(Henrique Matos, Rua dos Patos, 456, (34) 3213-9696);
// imprimindo
kenia.imprimircart ( );
felipe.imprimircart ( );
henrique.imprimircart ( );
</Script>
Fim do Carto.
</body>
</html>

Neste exemplo voc pode notar que a funo imprimircart foi um pouco modificada para melhor
aparncia das coisas, com quebras de linha de HTML e negrito.

Nota : Esse exemplo no um banco de dados muito sofisticado porque te de incluir os dados para cada
pessoa no documento HTML. Entretanto, o objeto Cart pode ser utilizado de maneira igualmente fcil
para armazenar um registro de banco de dados recuperado de um servidor de banco de dados com
milhares de registros.