Entendendo de JavaScript

Entendendo de JavaScript - Parte 1

A World Wide Web (WWW) começou como uma mídia de texto , ou seja a primeira versão de HTML , mas esta versão não tinha a capacidade de incluir imagens gráficas em uma página.

Sites na web atuais podem incluir uma variedade de recursos : imagens gráficas , sons, animação , mas isso é possível por causa de linguagens de script da web , como JavaScript que é uma maneiras mais fáceis de sofisticar uma página da Web e interagir com usuários de novas maneiras.

Princípios Básicos do JavaScript

Se você sabe como utilizar HTML para criar um documento da Web , então sabe que utiliza-se tags de HTML para descrever como quer que seu documento e o navegador obedeçam a seus comandos e mostrem o documento formatado para o usuário.

Como o HTML não é uma linguagem de marcação de texto simples , ela não pode responder para o usuários , tomar decisão , nem autoriza tarefas repetitivas. Tarefas interativas como essas exigem uma linguagem mais complexa , uma linguagem de programação , no nosso caso JavaScript.

Algumas linguagens de programação para web são muito complexas , mas as linguagens de script são geralmente simples , por possuir uma sintaxes fácil de aprender, além de permitirem combinar script com HTML para criar páginas 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 são sensíveis ao tipo de letra em sua sintaxe. Portanto, é necessário 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 variável, mas não precisam se preocupar esses comandos serem apresentados ao longo dos tutoriais.Isso é o que difere JavaScript de outras linguagens de programação que devem ser compiladas ou traduzidas em código de máquina , 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 tão fácil 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 conteúdos de um formulário e fazer cálculos.

Exibir mensagens para o usuário, tanto como parte de um pagina da Web como em caixas de alertas.

Fazer animações de imagens ou criar imagens que mudam quando você move o mouse sobre elas.

Detectar o navegador em utilização e exibir conteúdo diferente para navegadores diferentes.

Detectar plug-ins instalados e notificar o usuário 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 programação desenvolvida pela Sun Microsystems que pode ser utilizada

Para criar miniaplicativos ou programas que executam dentro de uma página na Web. Também se trata de uma linguagem compilada , mas o compilador produz código para uma maquina virtual em vez de um computador real. O código virtual de maquina então é 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 são linguagens completamente diferentes , logo abaixo demos algumas diferenças mais evidentes como :

Miniaplicativos Java são compilados em arquivos de classe para serem utilizados em uma página da web ; JavaScript utiliza comandos simples de texto , que podem ser incluídos no próprio documento de HTML.

Miniaplicativos Java geralmente são exibidos em uma caixa dentro do documento de Web ; scripts de JavaScript podem afetar qualquer parte do próprio 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 diferenças , mas o importante é lembrar é que JavaScript e Java são linguagens separadas. Elas são ú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 memória , 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 página , mas infelizmente ainda estamos em construção </p>

</BODY>

</HTML >

Neste exemplo possui um cabeçalho dentro de uma tags <HEAD> e do corpo da página dentro das tags <BODY>. Para adicionar JavaScript em uma página , você utilizará uma tag semelhante :<SCRIPT>.

A tag <SCRPT> diz ao navegador para começar tratando o texto como um script e a tag <SCRPIT> retorna á HTML normal. Na maioria dos casos , você não pode utilizar instruções JavaScript exceto dentro de tags <SCRIPT>. A exceção são os handlers de eventos , que serão 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 são mais drásticos como:em vez de exibir seu texto incorretamente o script absolutamente não pode executar , pode exibir uma mensagem de erro ou pode até derrubar o navegador. Por isso achei necessário abordar como versões 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 são suportadas apenas pelo Netscape. O Internet Explore suporta comandos básicos de JavaScript e as versões mais novas podem implementar tudo dos novos recursos.

A linguagem de JavaScript desenvolveu-se desde sua versão original no Netscape 2.0. Houve quatro versões de JavaScript :

JavaScript 1.0 , a versão 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 versões é uma melhoria em relação a versão anterior e incluir um numero de novos recursos. Os navegadores que suportam a nova versão também suportam scripts escritos para versões anteriores.

A linguagem de JavaScript foi submetida ao ECMA , o Europen Standaeds Committee, esse comitê finalizou a especificação ECMA-262 , um padrão 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 implementação do JavaScript , que é parcialmente compatível com a versão do Netscape.

Alternativa ao Java Script

JavaScript não é 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 programação.

Como o Java Script , O VBScript é uma linguagem simples e você pode incluir instruções 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 fácil aprender VBScript do que JavaScript; outra vantagem é que o VBScript é integrado ao padrão 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 utilização por toda Web.

CGI

CGI ( Common Gateway Interface ) não é realmente uma linguagem , mas uma especificação 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 são amplamente utilizados na Web. Por exemplo , se você já digitou uma informação num formulário e pressionou o botão para enviá-las para um site da Web , é muito provável que os dados , tenham sido enviados para um aplicativo de CGI.

A principal diferença 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 não faz. O JavaScript apenas manipulas as informações , ele não armazena dados.Entretanto existe uma versao de JavaScript no lado do servidor que não tem essas limitações.

Active X

ActiveX é uma especificação 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 também são denominados controles , são descarregados e executados pelo navegador da Web, como miniaplicativos Java. A diferença é que os controles podem ser instalados permanentemente quando são descarregados , eliminando a necessitade de descarrega-los novamente e isso não acontece com o Java.

A principal vantagem do ActiveX é que ele pode fazer quase qualquer coisa , mas isso também pode ser uma desvantagem , porque vários programadores já utilizaram ActiveX para trazer novas capacidades às paginas da Web , como “pagina da Web que desliga seu computador”e “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 não impeça 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 não é tão fácil de programar como uma linguagem de script ou Java. Segundo , o ActiveX é proprietário: 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 própria versão.

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 lógica em páginas escritas em HTML e o script é executado quando a pagina é visualizada em um navegador.

É importante saber que o Java Script utiliza parágrafos de lógica que podem estar "soltos" ou atrelados a ocorrência de eventos.

Os parágrafos soltos são executados na seqüência em que aparecem na página e os atrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o fim do set de JavaScript, da seguinte forma:

<SCRIPT>

Set de instruções

</SCRIPT>

Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor visualização e manutenção da página , recomenda-se que toda a lógica seja escrita no início do documento, através da criação de funções a serem invocadas. Agora se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos <SCRIPT> e </SCRIPT>.

As Ferramentas de script

Uma das coisas que diferencia o JavaScript de outras linguagens de programação , é que você não 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 ? Não preciso de nenhum software especial ? A resposta é não , 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 são 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 não tiver um editor que prefira , um editor simples e que muito provavelmente já esta incluído no seu computador funcionará muito bem.

As páginas HTML podem serem feitas utilizando-se editores de texto, como o Bloco de Notas, Write, etc. ou utilizando editores próprios para gerar HTML, tais como Microsoft FrontPage, EditPlus. Esses editores de HTML , incluem recursos especificamente para JavaScrpit como por exemplo: pintar as varias instruções de JavaScript para indicar seus propósitos ou mesmo criar scripts simples automaticamente , vantagens que os diferem dos editores simples.

Para os usuários 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 criação 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 usuários Macintosh recomenda-se o BBEdit, BBEdit Lite e Alpha que são bons editores de HTML para criação de pagina na Web.

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

Principais Comandos, Eventos e Operadores utilizado no JavaScript

Operadores Lógicos

Os principais operadores lógicos a serem utilizados em comandos condicionais são:

OPERADORES LÓGICOS SIGNIFICADO

= = Igual

!= Diferente

> Maior

>= Maior ou Igual

< Menor

<= Menor ou Igual

&& E

|| Ou

Os comandos condicionais serão abordados mais abaixo.

Operadores Matemáticos

Os operadores Matemáticos a serem utilizados em cálculos, referências de indexadores e manuseio de strings são :

OPERADORES MATEMÁTICOS SIGNIFICADO

+ adição de valor e concatenação de strings.

- subtração de valores

* multiplicação de valores

/ divisão de valores

% obtém o resto de uma divisão

Ao longo dos tutoriais estes operadores serão largamente utilizados, dando, assim, uma noção 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 comentário

/*....*/ Delimitadores para inserir um texto com mais de uma linha como comentário.

Os delimitadores naturais para uma string são " ( aspas dupla) ou ' ( aspas simples). Caso seja necessário a utilização 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 execução de um programa ou seja elas possui comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira.

São eles:

Comando IF

if (condição)

{ ação para condição satisfeita }

[ else

{ ação para condição não satisfeita } ]

Exemplo :

if (Idade < 18)

{Categoria = "Menor" }

else

{Categoria = "Maior"}

Comando FOR

for ( [inicialização/criação de variável de controle ;]

[condição ;]

[incremento da variável de controle] )

{ ação }

Exemplo.

for (x = 0 ; x <= 10 ; x++)

{alert ("X igual a " + x) }

Comando WHILE

Executa uma ação enquanto determinada condição for verdadeira.

while (condição)

{ ação }

Exemplo.

var contador = 10

while (contador > 1)

{ contador-- }

Move condicional

receptor = ( (condição) ? verdadeiro : falso)

Exemplo.

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

Eventos

Os eventos são fatos que ocorrem durante a execução do sistema, a partir dos quais você pode definir ações a serem realizadas pelo programa. Logo abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que eles podem ocorrer, bem como, os objetos passíveis de sua ocorrência.

EVENTOS OCORRÊNCIAS

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

onunload Ocorre na descarga (saída) do documento. Também só ocorre no BODY(corpo).

onchange Ocorre quando o objeto perde o focus e houve mudança de conteúdo. Válido para os objetos Text, Select e Textarea.

onblur Ocorre quando o objeto perde o focus, independente de ter havido mudança. Válido para os objetos Text, Select e Textarea.

onfocus Ocorre quando o objeto recebe o focus. válido para os objetos Text, Select e Textarea.

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

onmouseover Ocorre quando o ponteiro do mouse passa por sobre o objeto. válido apenas para Link.

onselect Ocorre quando o objeto é selecionado. Válido para os objetos Text e Textarea.

onsubmit Ocorre quando um botão tipo Submit recebe um click do mouse. Válido apenas para o Form.

Neste momento você deve esta se perguntado : Onde utilizar este eventos ? Por enquanto não se preocupe , pois ao longo dos tutoriais todos estes operadores, comandos , controle e eventos serão utilizados, dando assim uma noção 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, também é importante lembrar que não se deve incluir nada exceto instruções JavaScript válidas entre as tag, pois se o navegador encontrar quaisquer tags de HTML que não faz parte do script dentro das tag , ele exibirá um mensagem de erro de JavaScript.

Para começar 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 variáveis que armazena as informações a serem executadas ,por isso precisamos cria-la. A variável é criada automaticamente, pela simples associação de valores a mesma.

Por exemplo : NovaVariavel = "José"

Neste exemplo foi criada uma variável de nome NovaVariavel que passou a conter a string Jose. As variáveis podem ser Locais ou Globais.

As variáveis Locais são aquelas criadas dentro de uma função que são Locais e referenciáveis apenas dentro da função.

As variáveis Globais são aquelas criadas fora de funções que são Globais, podendo serem referenciadas em qualquer parte do documento. É muito importante que as variáveis que precisam ser referenciadas por várias funções ou em outra parte do documento, precisam ser definidas como globais, embora não seja recomendável, em uma função, pode ser definida uma variável local com o mesmo nome de uma variável global. Para isso utiliza-se o método de definição var. Como no exemplo a seguir :

Exemplo.

Variável Global : MinhaVariavel = ""

Variável Local : var MinhaVariavel = ""

Criando um Script Simples

O JavaScript permite que você escreva linhas dentro de uma página , através do método write. As linhas escritas desta forma, podem conter textos, expressões JavaScript e comandos Html. As linhas escritas através deste método aparecerão no ponto da tela onde o comando for inserido. Para você ter uma idéia 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 àAcessórios à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 extensão 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 critério, 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 conteúdo mostrado na Figura 2.3.

Inicialmente a idéia do exemplo acima era escrever duas linhas, porém isso não ocorreu porque o método write não insere mudança de linha, por isso provocou o aparecimento de apenas uma linha com os dois textos emendados. Então para evitar este tipo de ocorrência, existe o método writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando não surtiu efeito, obtendo-se o mesmo resultado do método write. A solução encontrada para esta situação foi a utilização do comando de mudança de parágrafo da linguagem Html, para isso vamos que seguir os seguintes passos:

Abra o arquivo do exemplo feito , clique no mouse no botão esquerdo e escolha a opção Exibir código fonte, com isso ira abrir um bloco de notas aonde você irá modifica o conteúdo 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 botão Atualizar e observe o que irá ocorrer.

Você ira observar que o problema da mudança de linha foi resolvido , porém, gerou um outro problema que é uma linha em branco, entre cada linha, por se tratar de mudança de parágrafo. Caso não seja desejado a existência 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 três formas de comunicação com o usuário através de mensagens.

1º Forma : Apenas Observação utilizando o comando.

alert ( mensagem )

Exemplo : Este exemplo também é 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 informações estão corretas") </Script > ,

depois salve o arquivo com extensão 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 confirmação 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 :



< Script >

if (confirm ("Algo está errado...devo continuar??"))

{ alert("Continuando") }

else

{ alert("Parando") } </Script > , depois salve o arquivo com extensão 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 opções para escolher : Ok ou Cancelar. Se clicar em OK você obterá a seguinte mensagem:

Clique em Ok para finalizar a mensagem.

Caso escolha a opção 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 informação digitada pelo usuário, Minha mensagem é a mensagem que vai aparecer como Label da caixa de input , Meu texto é um texto, opcional, que aparecerá na linha de digitação do usuário

Exemplo 3: Vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os seguintes passos indicados a seguir:



< Script >

Entrada = prompt("Informe uma expressão matemática", "")

Resultado = eval(Entrada)

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

</Script > , depois salve o arquivo com extensão 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 expressão matemática ,clique em Ok ou Cancelar, e observe o que irá ocorrer.

Muito bem acabamos de fazer nossas primeiras pagina utilizando JavaScript. Na próxima parte deste tutorial você aprenderá como criar funções e como manipula-las.

Introdução

Na segunda parte desse tutorial você aprendeu a criar scripts simples, a utilizar comandos básicos que executavam uma determinada função. Além 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 criação de funções do JavaScript. O JavaScript oferece os seguintes comandos :

Var

No JavaScript, nem sempre é necessário definir uma variável antes de utilizá-la, é o que ocorre com variáveis globais, porém, é importante ressaltar que a utilização da instrução var, com relação a documentação é muito válida. Já nas definições de variáveis locais, é obrigatório a utilização da instrução var. Você pode armazenar um valor na própria linha de definição da variável, se não fizer, o JavaScript interpretara que esta variável possui um valor desconhecido ou nulo.

Forma geral:

Var NomeDaVariável [ = <valor> ];

Exemplo:

Var Contador = 0;Var Inic="",Tolls=0,Name="JAVASCRIPT";Var Teste; // Neste caso, Teste possui valor null

with

Quando você precisar manipular várias propriedades de um mesmo objeto, provavelmente você não quer ser obrigado a repetir todas as vezes a digitação do nome do objeto. A instrução With, permite fazer isso eliminando a necessidade de digitar o nome do objeto todas as vezes.

Forma geral:

with (<objeto>)

{

... Instruções

}

Por exemplo vamos supor que será necessário executar uma série de operações matemáticas:

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 execução do loop sem que haja verificação na condição de saída do loop, passando a execução a linha imediatamente posterior ao término do loop.

Forma geral:

Break

Exemplo:

Neste exemplo, quando a variável x atinge o valor 10 o loop é cancelado, e é impresso o número 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 execução do bloco de comandos passando para o início do loop.

Forma geral:

Continue

Exemplo:

Neste exemplo, serão impressos os números de 1 a 10, com exceção do número 9, ou seja, quando a variável x atinge o valor 9 a execução do bloco de comandos é interrompida e o controle retorna ao início do loop, onde a variável x será incrementada.

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

{

If (x = = 9)

{

continue

}

document.write(x)

}

Return

As funções podem ou não retornar alguma informação, o que é feito com o comando Return.

A definição de uma função é feita da seguinte forma:

FunctionNomeDaFunção([ parametro1, parametro2, ..., parametroN ])

{

...

[Return(ValorDeRetorno)]

}

Comentários

Comentários podem ser formulados de varias maneiras, dependendo do efeito que você precisa. Para comentários longos de várias linhas, ou blocos de comentários, use: /*

O barra-asterisco inicia um bloco de comentário que pode conter quantas linhas você precisar todo o texto após o barra asterisco é ignorado, até que asterisco-barra seja encontrado, terminando assim o bloco de comentário */ .

Para comentários de uma linha, use barra dupla (//) para introduzir o comentário.

Exemplo:

// este texto será tratado como comentário

<html><head><script >

Function Alo(){

alert("Alô mundo!!!");

}// comentário

</script></head>

<body>...

<script>Alo();</script>

...</body></html>

Criando Funções

Para aprender a criar uma função primeiramente você deve saber seu significado. Função nada mais é que conjunto de instruções, agrupadas para executar uma determinada tarefa quando for acionada. A sintaxe geral é a seguinte:

function NomeFunção (Parâmetros)

{ Ação }

A melhor forma de declarar funções são entre as tags <head> de sua página HTML, pois elas são freqüentemente chamadas por eventos acionados pelo usuário. Assim parece razoável colocar as funções entre as tags <head>, com isso elas são carregadas antes que o usuário faça alguma coisa que possa chamar uma função.

Exemplo : Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor de idade, recebendo como parâmetro a sua idade.

function Idade (Anos) {

if (Anos > 17)

{ alert ("Maior de Idade") }

else

{ alert ("menor de Idade") }

}

Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja informada a idade e, a cada informação, a função seja acionada.

<form>

<input type=text size=2 maxlength=2 name="Tempo"

onchange="Idade(Tempo.value)">

</form>

Observe-se que o parâmetro passado para a função quando ocorre o evento "onchange" foi o conteúdo da caixa de texto "Tempo" da propriedade "value" e que, na função, chamamos de "Anos". Ou seja, não existe co-relação entre o nome da variável passada e a variável de recepção na função. Apenas o conteúdo é passado.

Nota: É importante você saber que no JavaScript, não é possível utilizar a recursividade, ou seja, uma função não pode chamar ela mesma .

Funções Intrínsecas ou Internas

A linguagem JavaScript além dos recursos descritos anteriormente, ainda possui algumas funções internas, que não estão ligadas diretamente a nenhum objeto, porém isso não impede que essas funções recebam objetos como parâmetros. A seguir estas funções serão vistas detalhadamente:

escape - Obtém o código ASCII de um caracter que não seja alfanumérico.

Ex: document.write(escape("@"))

eval - Avalia uma expressão numérica, retornando um resultado também numérico.

Ex: document.write(eval(10*9*8*7*6*5*4*3*2))

parseFloat - Converte uma string que representa um número, para um número com ponto flutuante. Caso a string não possa ser avaliada, a função retorna 0.

Ex: document.write(parseFloat("-32.465e12")

parseInt - Converte uma string, que representa um número em uma base predefinida para base 10. Caso a string possua um caracter que não possa ser convertido, a operação para, retornando o valor antes do erro.

Ex: paseInt("string",base);

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

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

Funções tipicamente Matemáticas

Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)

Math.ceil(número) - retorna o próximo valor inteiro maior que o número

Math.floor(número) - retorna o próximo valor inteiro menor que o número

Math.round(número) - retorna o valor inteiro, arredondado, do número

Math.pow(base, expoente) - retorna o cálculo do exponencial

Math.max(número1, número2) - retorna o maior número dos dois fornecidos

Math.min(número1, número2) - retorna o menor número dos dois fornecidos

Math.sqrt(número) - retorna a raiz quadrada do número

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(número) - retorna o seno de um número (anglo em radianos)

Math.asin(número) - retorna o arco seno de um número (em radianos)

Math.cos(número) - retorna o cosseno de um número (anglo em radianos)

Math.acos(número) - retorna o arco cosseno de um número (em radianos)

Math.tan(número) - retorna a tangente de um número (anglo em radianos)

Math.atan(número) - retorna o arco tangente de um número (em radianos)

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

Math.log(número) - retorna o logarítmo de um número

Math.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)

Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)

Math.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)

Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)


Nota: Em todas as funções, quando apresentamos a expressão "(número)", na verdade queremos nos referir a um argumento que será processado pela função e que poderá ser: um número, uma variável ou o conteúdo de um objeto (propriedade value).

Neste momento você deve estar pensando : Como e quanto vou usar estas funções ? Bom, por enquanto não precisa se preocupar, pois isso vai esta especificados nos outros tutorias . Por enquanto você esta aprendendo o básico de como criar uma função , como utilizar e armazenar valores em uma variável . Antes de aprender mais sobre os detalhes da linguagem JavaScript , talvez será mais útil ter uma idéia geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web.

Introdução

Na terceira parte desse tutorial você aprendeu como criar funções e alguns comandos que em conjunto com as estruturas de controle melhoram o funcionamento da pagina Web, também aprendeu como utilizar e armazenar informações numa variável e também qual o melhor local para construir uma função, assim elas são carregadas antes que o usuário faça alguma coisa que possa chama-la.

Então antes de você aprender mais sobre os detalhes da linguagem JavaScript, talvez será mais útil ter uma idéia geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web. Nesta parte do tutorial você terá um rápido exame de alguns dos aplicativos mais úteis para o JavaScript através dos seguintes tópicos: Aprimorando uma Interface com o usuário do site com JavaScript , O que o Java pode fazer com imagens e animação, como o JavaScript trabalha com plug-ins de Navegadores e etc...

Aprimorando uma interface como usuário do site com o JavaScript

Você nunca ficou entediado diante de um site Web ? Você já visitou um site onde tudo é estático , 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 animação a uma pagina da Web e isso inclui recursos interessantes como mensagens que rolam na tela , sendo assim uma maneira de apresentar as informações sem deixar os usuários entediados e possibilitando a ele uma maior interação 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 propósitos principais:

Exibir as descrições 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 utilização 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 utilizações mais populares do JavaScript e você aprendera como criar um script para rolar mensagens na linhas de status e também vai aprender a tirar outros proveitos desse recurso como substituir a exibição de URL na linha de status com uma descrição do link quanto o mouse esta sobre ele.

Você também 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 botão para carregar aquela página , em alguns casos é carregada logo que você a selecionar . Como você pode perceber que são recursos como esses que tornam os site mais fácil de se navegar , e outro fato importante é que estes recursos normalmente são realizados com o JavaScript.

Pop_up e outros recursos

O JavaScript tem vários recursos que permite a você comunicar-se com o usuário de maneiras mais estimulantes do só com HTML. Por exemplo você pode criar pop_up de alerta , confirmação 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 não é mesmo. Pois é, esta também é uma forma de você se interagir com o usuário alerta-o sobre erros , apresenta-o um aviso ou uma nota de isenção de responsabilidades ou solicitando-o uma informação, tornando a sua página na Web um ambiente gostoso de se navegar.

Imagens e animações

Uma coisa que torna uma pagina na Web estimulante é o uso de imagens gráficas. E você ira aprender neste tutorial como trabalhar com imagens e animações.

Quanto um navegador carrega uma pagina de HTML , ele exibe as imagens gráficas junto do texto , tudo fica estático ou seja a imagens não se move a não ser que você mexa no código html e mude a imagem de lugar. Com a ajuda do JavaScript , você pode tornar as imagens gráficas mais dinâmicas, que permite substitui uma imagem em uma pagina por outra imagem sem recarregar a pagina. Uma das utilizações 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 usuário move o ponteiro o mouse através dele.

Formulários Interativos

Um dos recursos , talvez o mais poderoso da Web , é o uso de formulários interativos , que permite ao usuário inserir informações e interagir com o site . Isso torna tudo possível , de formulários de pedidos à questionários e paginas personalizáveis.

Normalmente os formulários são tratados por um script de CGI ( Common Gateway Interface ) , citado na primeira parte desse tutorial. Então você deve se lembrar que esse script é executado no servidor da Web, ou seja quanto o usuário insere informações e pressiona o botão Submit , ele é enviado para o script de CGI para o processamento . O script então envia de volta um resultado na forma de outra pagina na Web.

Embora o CGI seja um sistema poderoso, ele tem desvantagens para algumas utilizações de formulários , a principal delas é que ao submeter os dados em comunicação com o servidor da Web pode demorar segundos ou vários minutos, sendo que normalmente o CGI é responsável pela validação do formulário ou dos dados que foram inseridos, por exemplo , quando o usuário insere somente dez dígitos em um campo de numero do CPF ou deixa em branco um preenchimento obrigatório , o script pode alerta-lo e solicitar as informações ausentes , tornando assim um processo demorado ou depois de esperar uns dez minutos o usuário recebe uma resposta indicando que precisa fornecer informações que faltam e começar de novo .E cada para nos isso é frustaste não é, com certeza desanima qualquer um e as vezes acabamos optando pela parte mais fácil que é desistindo da tarefa que estávamos executando simplesmente saindo do site ,mas com certeza você não quer isso não é ? E também deve esta se perguntando como o JavaScript trata isso ? Logo vou responder , o JavaScript fornece uma solução bastante conveniente para esse problema .Um programa de JavaScript pode ler os dados no formulário sem qualquer comunicação 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 formulários , enviando os resultados via email. O script também 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 formulários mais rápidos que o CGI e sem comunica-se com o servidor , então por que utilizar CGI?” A resposta é que o CGI pode fazer coisas que uma linguagem script do lado do cliente não pode fazer , como gravar dados em um arquivo no servidor ou trabalhar com um banco de dados.( Existe uma versão de JavaScript que roda no servidor é que também pode desempenhar essas funções. )

Detectando Navegadores

O HTML foi projetado para ser multiplataforma, em outras palavras sua pagina deveria ter a mesma aparência em qualquer navegador em qualquer plataforma de computador , mas isso não é o que acontece , embora os novos navegadores da Microsoft e da Netscape estejam evoluindo na direção de um padrão comum , ainda há diferenças na maneira de tratarem o código HTML.

Mesmo que seja possível construir um documento simples de HTML de modo que apareça da mesma forma nos dois navegadores , novos recursos como HTML dinâmico não se comportam da mesma maneira. Uma solução é ter paginas especificas do navegador e uma genérica para outros.

Há alguns sites que simplesmente pedem aos usuários que dêem um clique no link para a versão apropriada do seu navegador. Com JavaScript, você pode automatizar esse processo : sua pagina pode detectar o tipo e a versão do navegador do usuário e enviá-lo para a pagina personalizada apropriada ou utilizar JavaScript para personalizar a saída de uma única pagina .

Uma diferença importante entre navegadores da Microsoft e da Netscape é a maneira como eles tratam o JavaScript. É possível detectar a versão do navegador utilizando um script universal simples e então utilizar comandos de JavaScript separados para navegadores diferentes.

Plug-ins

Os plug-ins são suplementos de navegador que permite que tipos diferentes de conteúdo sejam utilizados dentro de uma pagina na Web. Os plug-ins mais comuns são :

RedAudio , para suporte de áudio streaming

QuickTime, para videoclipes embutidos

Adobe Acrobat, para documentos precisamente formatados

Shock Wave, para animações e aplicativos interativos

Embora você possa utiliza conteúdo plug-in para adicionar qualquer coisa em sua pagina na Web, há um problema importante : independente de alguns plug-ins padrão que são incluídos com navegadores , você não pode realmente contar com que a audiência inteira de sua pagina , tenha o plug-in instalado.

Isso torna os plug-ins uma questão semelhante a das versões de navegadores , ou seja , você tem que escolher um plug-in particular para suportar e esperar que os usuários 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 situação um pouco mais controlável , você pode utiliza o JavaScript para detectar se o navegador tem plug-in particular instalado e modificar a pagina HTML , se o plug-in não estiver disponível , seu script pode enviar o usuário para uma pagina diferente ou mesmo envia-lo para descarregar a pagina de plug-in, com certeza você já deve ter visto isto em uma pagina na Web. Junto com a detecção de plug-in instalados , você pode utilizar o JavaScript para trabalhar com o conteúdo 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 especificação LiveConnect também permite que programas JavaScript se comuniquem com miniaplicativos Java e permite que miniaplicativos Java acessem variáveis e comandos JavaScript.

Copiando um Script

Agora você deve ter uma idéia 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 permissão . A um numero de sites que oferecem scripts grátis para pegar , faça uma pesquisa na Internet e veja alguns exemplos .

Por esta hora , você aprendeu sobre algumas utilizações mais comuns do JavaScript. Você pode implementar qualquer um desses recursos utilizando script simples ou mesmo um único comando em alguns casos. Entretanto , não fique pensando que o JavaScript pode somente fazer coisas simples, você pode criar programas complexos com o JavaScript para fazer qualquer coisa , embora haja limitações.

Introdução

Na terceira parte desse tutorial você aprendeu como criar funções e alguns comandos que em conjunto com as estruturas de controle melhoram o funcionamento da pagina Web, também aprendeu como utilizar e armazenar informações numa variável e também qual o melhor local para construir uma função, assim elas são carregadas antes que o usuário faça alguma coisa que possa chama-la.

Então antes de você aprender mais sobre os detalhes da linguagem JavaScript, talvez será mais útil ter uma idéia geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web. Nesta parte do tutorial você terá um rápido exame de alguns dos aplicativos mais úteis para o JavaScript através dos seguintes tópicos: Aprimorando uma Interface com o usuário do site com JavaScript , O que o Java pode fazer com imagens e animação, como o JavaScript trabalha com plug-ins de Navegadores e etc...

Aprimorando uma interface como usuário do site com o JavaScript

Você nunca ficou entediado diante de um site Web ? Você já visitou um site onde tudo é estático , 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 animação a uma pagina da Web e isso inclui recursos interessantes como mensagens que rolam na tela , sendo assim uma maneira de apresentar as informações sem deixar os usuários entediados e possibilitando a ele uma maior interação 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 propósitos principais:

Exibir as descrições 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 utilização 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 utilizações mais populares do JavaScript e você aprendera como criar um script para

rolar mensagens na linhas de status e também vai aprender a tirar outros proveitos desse recurso como substituir a exibição de URL na linha de status com uma descrição do link quanto o mouse esta sobre ele.

Você também 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 botão para carregar aquela página , em alguns casos é carregada logo que você a selecionar . Como você pode perceber que são recursos como esses que tornam os site mais fácil de se navegar , e outro fato importante é que estes recursos normalmente são realizados com o JavaScript.

Pop_up e outros recursos

O JavaScript tem vários recursos que permite a você comunicar-se com o usuário de maneiras mais estimulantes do só com HTML. Por exemplo você pode criar pop_up de alerta , confirmação 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 não é mesmo. Pois é, esta também é uma forma de você se interagir com o usuário alerta-o sobre erros , apresenta-o um aviso ou uma nota de isenção de responsabilidades ou solicitando-o uma informação, tornando a sua página na Web um ambiente gostoso de se navegar.

Imagens e animações

Uma coisa que torna uma pagina na Web estimulante é o uso de imagens gráficas. E você ira aprender neste tutorial como trabalhar com imagens e animações.

Quanto um navegador carrega uma pagina de HTML , ele exibe as imagens gráficas junto do texto , tudo fica estático ou seja a imagens não se move a não ser que você mexa no código html e mude a imagem de lugar. Com a ajuda do JavaScript , você pode tornar as imagens gráficas mais dinâmicas, que permite substitui uma imagem em uma pagina por outra imagem sem recarregar a pagina. Uma das utilizações 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 usuário move o ponteiro o mouse através dele.

Formulários Interativos

Um dos recursos , talvez o mais poderoso da Web , é o uso de formulários interativos , que permite ao usuário inserir informações e interagir com o site . Isso torna tudo possível , de formulários de pedidos à questionários e paginas personalizáveis.

Normalmente os formulários são tratados por um script de CGI ( Common Gateway Interface ) , citado na primeira parte desse tutorial. Então você deve se lembrar que esse script é executado no servidor da Web, ou seja quanto o usuário insere informações e pressiona o botão Submit , ele é enviado para o script de CGI para o processamento . O script então envia de volta um resultado na forma de outra pagina na Web.

Embora o CGI seja um sistema poderoso, ele tem desvantagens para algumas utilizações de formulários , a principal delas é que ao submeter os dados em comunicação com o servidor da Web pode demorar segundos ou vários minutos, sendo que normalmente o CGI é responsável pela validação do formulário ou dos dados que foram inseridos, por exemplo , quando o usuário insere somente dez dígitos em um campo de numero do CPF ou deixa em branco um preenchimento obrigatório , o script pode alerta-lo e solicitar as informações ausentes , tornando assim um processo demorado ou depois de esperar uns dez minutos o usuário recebe uma resposta indicando que precisa fornecer informações que faltam e começar de novo .E cada para nos isso é frustaste não é, com certeza desanima qualquer um e as vezes acabamos optando pela parte mais fácil que é desistindo da tarefa que estávamos executando simplesmente saindo do site ,mas com certeza você não quer isso não é ? E também deve esta se perguntando como o JavaScript trata isso ? Logo vou responder , o JavaScript fornece uma solução bastante conveniente para esse problema .Um programa de JavaScript pode ler os dados no formulário sem qualquer comunicação 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 formulários , enviando os resultados via email. O script também 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 formulários mais rápidos que o CGI e sem comunica-se com o servidor , então por que utilizar CGI?” A resposta é que o CGI pode fazer coisas que uma linguagem script do lado do cliente não pode fazer , como gravar dados em um arquivo no servidor ou trabalhar com um banco de dados.( Existe uma versão de JavaScript que roda no servidor é que também pode desempenhar essas funções. )

Detectando Navegadores

O HTML foi projetado para ser multiplataforma, em outras palavras sua pagina deveria ter a mesma aparência em qualquer navegador em qualquer plataforma de computador , mas isso não é o que acontece , embora os novos navegadores da Microsoft e da Netscape estejam evoluindo na direção de um padrão comum , ainda há diferenças na maneira de tratarem o código HTML.

Mesmo que seja possível construir um documento simples de HTML de modo que apareça da mesma forma nos dois navegadores , novos recursos como HTML dinâmico não se comportam da mesma maneira. Uma solução é ter paginas especificas do navegador e uma genérica para outros.

Há alguns sites que simplesmente pedem aos usuários que dêem um clique no link para a versão apropriada do seu navegador. Com JavaScript, você pode automatizar esse processo : sua pagina pode detectar o tipo e a versão do navegador do usuário e enviá-lo para a pagina personalizada apropriada ou utilizar JavaScript para personalizar a saída de uma única pagina .

Uma diferença importante entre navegadores da Microsoft e da Netscape é a maneira como eles tratam o JavaScript. É possível detectar a versão do navegador utilizando um script universal simples e então utilizar comandos de JavaScript separados para navegadores diferentes.

Plug-ins

Os plug-ins são suplementos de navegador que permite que tipos diferentes de conteúdo sejam utilizados dentro de uma pagina na Web. Os plug-ins mais comuns são :

RedAudio , para suporte de áudio streaming

QuickTime, para videoclipes embutidos

Adobe Acrobat, para documentos precisamente formatados

Shock Wave, para animações e aplicativos interativos

Embora você possa utiliza conteúdo plug-in para adicionar qualquer coisa em sua pagina na Web, há um problema importante : independente de alguns plug-ins padrão que são incluídos com navegadores , você não pode realmente contar com que a audiência inteira de sua pagina , tenha o plug-in instalado.

Isso torna os plug-ins uma questão semelhante a das versões de navegadores , ou seja , você tem que escolher um plug-in particular para suportar e esperar que os usuários 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 situação um pouco mais controlável , você pode utiliza o JavaScript para detectar se o navegador tem plug-in particular instalado e modificar a pagina HTML , se o plug-in não estiver disponível , seu script pode enviar o usuário para uma pagina diferente ou mesmo envia-lo para descarregar a pagina de plug-in, com certeza você já deve ter visto isto em uma pagina na Web. Junto com a detecção de plug-in instalados , você pode utilizar o JavaScript para trabalhar com o conteúdo 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 especificação LiveConnect também permite que programas JavaScript se comuniquem com miniaplicativos Java e permite que miniaplicativos Java acessem variáveis e comandos JavaScript.

Copiando um Script

Agora você deve ter uma idéia 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 permissão . A um numero de sites que oferecem scripts grátis para pegar , faça uma pesquisa na Internet e veja alguns exemplos .

Por esta hora , você aprendeu sobre algumas utilizações mais comuns do JavaScript. Você pode implementar qualquer um desses recursos utilizando script simples ou mesmo um único comando em alguns casos. Entretanto , não fique pensando que o JavaScript pode somente fazer coisas simples, você pode criar programas complexos com o JavaScript para fazer qualquer coisa , embora haja limitações.

Utilizando Funções

Na terceira parte desse tutorial, você aprendeu a criar funções simples que contém uma lista de instruções que executa alguma tarefa. Nessa parte iremos aprender como utiliza-las e organiza-las dentro de um script.

Como já sabemos o navegador começa a interpretar a primeira instrução depois da tag <SCRIPT> e segue cada instrução na ordem até alcançar 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 , então para torna-los mais fáceis e organizáveis , utilizamos as funções, cuja a definição já foi abordada na terceira parte desse tutorial.

Definindo uma função

Como definido na terceira parte desse tutorial , função nada mais é que um grupo de instruções de JavaScript que podem ser tratadas como uma unidade única. Então para utilizar uma função você deve primeiro defini-la, como mostrado no exemplo abaixo:

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

Nesse exemplo, definimos uma função que exibi uma mensagem de alerta para o usuário. Esta iniciar com a palavra chave function e o nome da função é AloMundo. As primeiras e ultimas linhas da definição de função incluem chaves ( { e } ) . Você as utiliza para incluir todas as instruções na função. O navegador utiliza as chaves para determinar onde a função inicia e termina.

Entre as chaves, essa função particular armazena uma única linha. Esta utiliza a função de alerta embutida que exibe uma mensagem de alerta. A mensagem conterá o texto “Alo Mundo”.

Agora, sobre aqueles parênteses. A função 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 digitação, ela realmente não fornece muito benefício.

Para torna sua função mais flexível, você pode adicionar parâmetros, também conhecidos como argumentos. Estes são variáveis que são recebidas pela função toda vez que ela é chamada. Por exemplo, você pode adicionar um parâmetro chamado who que diz para a função modificada.

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

Naturalmente, para utilizar essa função você deveria inclui-la em um documento de HTML. Como foi falando nos tutoriais anteriores, o melhor lugar para definir uma função é dentro da seção <HEAD> do documento, já que as instruções na seção <HEAD> são executadas primeiro, isso assegura que a função seja definida antes de ser utilizada. No exemplo abaixo mostra a função AloMundo no cabeçalho de um documento de HTML.

<HTML>

<HEAD>

<TITLE>Definindo Funções</TITLE>

<SCRIPT>

function AloMundo(who) { alert ("Alô Mundo,"+who); }

</SCRIPT>

</HEAD>

<BODY>

No corpo da página você chama a função .

</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 Funções

Você pode perceber através da Figura 5.0 que a função não foi executada, mais isso se deve pelo fato de não termos chamamos a função, que geralmente é chamada no corpo da pagina de um documento HTML.

Chamando a Função

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

Para utilizar uma função, você tem que chama-la. Para chamar uma função, utiliza o nome da função como uma instrução em um script. Para isso você precisara incluir os parênteses e os valores para os parâmetros da função.

Por exemplo: AloMundo(“Seu Nome”) ;

Este exemplo diz ao interpretador do JavaScript para transferir controle à primeira instrução na função AloMundo e passa o parâmetro “Seu Nome” para a função. Esse valor será atribuído à variável dentro da função.

Nota: As funções podem ter mais de um parâmetro. Para definir uma função com múltiplos parâmetros, liste um nome variável para cada parâmetro, separado por virgulas. Para chamar a função, especifique ao valores para cada parâmetro, separado por virgulas.

No exemplo abaixo, mostra um documento completo de HTML que inclui a definição de uma função e um segundo script no corpo da pagina que realmente chama a função. Para demostrar a utilidade das funções, nós a chamaremos duas vezes para saudar duas pessoas diferentes.

<HTML>

<HEAD>

<TITLE>Definindo Funções</TITLE>

<SCRIPT>

function AloMundo(who) { alert ("Alô Mundo,"+who); }

</SCRIPT>

</HEAD>

<BODY>

<H1> Exemplo de Função </H1>

<P> Saudação</P>

<SCRIPT>

AloMundo("Brasil");

AloMundo("USA");

</SCRIPT>

</BODY>

</HTML>

Neste exemplo incluímos um segundo conjunto de tags<SCRIPT> no corpo da página. O segundo script inclui duas chamadas de função para a função 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 Função.

Figura 5.2- Exemplo de Função

Nota: Note que a Segunda mensagem de alerta não é exibida até você pressionar o botão OK no primeiro alerta. Isso é porque o processamento de JavaScript é parado enquanto as alertas são exibidos.

Retornando um valor

Embora a função que você acabou de criar exiba uma mensagem para o usuário, as funções também podem retornar um valor para o script que as chamou. Isso permite utilizar funções para calcular valores. Como um exemplo, você pode criar uma função que calcular a media de 4 números.

Sua função deve iniciar com a palavra-chave function , o nome da função e os parâmetros que ela aceita. Utilizaremos os nomes de variáveis como : a, b, c e d para os quatros números cuja media queremos calcular. Eis a primeira linha da função:

function Media(a,b,c,d) { instrução }.

Na instrução podemos calcular a media, somando os números e depois dividi-los pelo numero de números ou seja por 4. Assim, a próxima linha da função seria:

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

Essa instrução cria uma variável chamada Resultado e calcula o resultado adicionando os quatros números, depois dividindo por 4, os parâmetros são necessários para dizer ao JavaScript executa a adição antes da divisão.

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

return Resultado

Para utilizar essa função em um script, você pode utilizar uma variável com a chamada de uma função. Por exemplo, a instrução a seguir faz medias dos números 2,4,6,8 e armazena o resultado em uma variável 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 definição da função 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ê também pode utilizar a chamada de função diretamente em uma expressão. Por exemplo, você pode utilizar a instrução alert para exibir o resultado da função: alert (Media(2,4,6,8)).

Objetos JavaScript

Você aprendeu que as variáveis 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 variáveis os objetos podem armazenar dados, inclusive armazenar dois ou mais itens ao mesmo tempo.

Os itens de dados armazenados em um objeto são chamados de propriedades do objeto. Por exemplo, você pode utilizar objetos para armazenar informações sobre as pessoas, como em catálogos de endereço. As propriedades de cada objeto da pessoa podem incluir um nome, endereço , telefone e outras informações.

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.endereço e Carla.telefone.

Os objetos podem ter propriedades, métodos 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 página HTML simples:

Figura 5.4- Exemplo de Objetos

Na Figura 5.4 temos um link, duas imagens, e um formulário com dois campos texto e dois botões. Do ponto de vista do JavaScript a sua janela do browser é um objeto window. Este objeto window contém certos elementos, como a barra de status.

Como já sabemos dentro da janela, nós podemos carregar uma página HTML. Esta página é 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 são propriedades do objeto document. Um objeto HTML pode ser por exemplo um link ou um formulário.

A imagem abaixo ilustra a hierarquia criada pelo exemplo acima:

O JavaScript suporta três tipos de objetos:

Objetos embutidos ou predefinidos è São objetos construídos dentro da linguagem JavaScript, por exemplo Date e Math. Alguns outros objetos embutidos incluem Array e String .

Objeto browser è São objetos que representam vários componentes do navegador e o documento atual de HTML. Por exemplo, a função alert( ) que você utilizou anteriormente é um método de objeto window ou seja de Janela.

Objeto personalizado è São 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 estão localizados dentro das tags<SCRIPT>. Você também 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 botão do mouse der um clique” e “Quando essa pagina termina de carregar”. Contudo, eles são uma parte muito útil do JavaScript.

Muitos eventos de JavaScript são causados pelo usuários, em vez de fazer as coisas em uma ordem determinada, seu script pode responder as ações do usuários. Evidentemente, isso é essencial para todas as utilizações praticas do JavaScript.

Os handlers de evento estão 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 têm um evento, onMouseOver, que acontece quando o ponteiro do mouse move-se sobre o objeto. Eis uma tag típica de imagem de HTML com um handler de evento:

<IM SRC=”botão.gif”onMouseOver=highlight()”>

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

Ocultando scripts de navegadores antigos

Alguns usuários ainda utilizam navegadores que não suportam JavaScript. Além disso, algumas pessoas tem suporte para JavaScript porem este esta desativado em seus navegadores, seja por preocupação com segurança ou para evitar mensagem rolando na tela.

Nota: A maioria das preocupações com segurança que as pessoas têm em relação ao JavaScript é infundada; não há realmente como danificar arquivos do usuário como JavaScript, e os scripts não tem acesso ao conteúdo dos disco rígidos por padrão. Algumas brechas de segurança foram localizados em versões anteriores do JavaScript, mas nenhuma permite dano serio.

Como os navegadores mais antigos não entendem a tag<SCRIPT>, eles não se comportarão bem quando encontrarem um script em uma pagina da Web. Na maioria dos casos, eles exibirão o script no meio da pagina e entre outros efeitos que não são esperados. Para evitar isso, você pode incluir o script dentro de tags de comentário de HTML, isso diz ao navegador para ignorar o script.

Já os navegadores atuais são suficientemente inteligentes para saber que o script não é realmente um comentário. Como abordados nos tutoriais anteriores os comentários em HTML começam 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 comentários de HTML de inicio e de fim. As duas barras (//) na ultima linha são um comentário JavaScript , isso evita que o comentário de HTML seja detectado como um erro de JavaScript.

Suportando navegadores não – JavaScript

Você pode ocultar seu script de navegadores mais antigos para eles não exibirem o próprio script. Mas você pode precisar suportar esses navegadores como por exemplo, exibir um aviso que a página exige JavaScript. A tag <NOSCRIPT> , que suporta em JavaScript 1.1 e superior, pode ser uma solução conveniente, pois essa tag diz para o navegador compatíveis com o JavaScript para ignorar tudo entre as tag<NOSCRIPT> de inicio e de fim, então você pode incluir conteúdo HTML para o navegador não-JavaScript dentro das tags.

Nota: Navegadores mais antigos que não suportam JavaScript também não suportam a tag<NOSCRIPT>.Entretando, essa técnica ainda funciona porque, de acordo com o padrão 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 seção de HTML , que exibe uma mensagem para navegadores não-JavaScript.

<NOSCRIPT>

Seu browser não suporta JavaScript. Por favor use a Versão não-JavaScript desse tutorial.

</NOSCRIPT>

Este exemplo permite você suportar os dois tipos de navegadores como Explore e o Netscaper ,com exceção do Netscaper 2.0, que suporta JavaScript mais não suporta a tag <NOSCRIPT>; essa versão exibirá a mensagem <NOSCRIPT>.

Utilizando comentários

Como utilizamos comentários de HTML para ocultar seu script de navegadores. Achei importante abordar que o JavaScript também inclui seus próprios tipos de comentários. Embora esses não ocultem o JavaScript dos navegadores, eles são úteis para determinados fins: incluir comentários em seu script.

Os comentários permitem incluir documentação 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 comentários em um programa de JavaScript, digite um linha com duas barras, como nesse exemplo:

// isto é um comentário.

Você pode também começar um comentário 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 também suporta comentários no estilo C que iniciam com /* e terminam com */. Esses comentários podem estender-se por mais de uma linha , como o exemplo abaixo:

/* O JavaScript incluem uma variedade de recursos, incluindo este comentário */

Nota: Como esses comentários são parte da sintaxe do JavaScript, eles somente são válidos dentro das tags <SCRIPT>.

Introdução

Nessa tutorial você aprenderá alguns recursos de scripts específicos e técnicas freqüentemente usadas em programas JavaScript . Irá aprender a focalizar variáveis e expressões , atribuindo nomes e declarando variáveis .

Utilizando Variáveis

No decorrer desses turoriais você aprendeu a utilizar algumas variáveis. Contudo, há alguns aspectos das variáveis que ainda não foi abordado.

As variáveis são “caminhões” identificados que podem armazenar dados como números, string texto ou objetos, como você já aprendeu cada variável tem um nome. Mais o que você não sabe é que a regras especificas que devem seguir quando escolher um nome de variável:

Os nomes de variável podem incluir letras do alfabeto, tanto letras minúsculas como maiúsculas. Eles também podem incluir os dígitos 0-9 e o caractere sublinhado .

Os nomes de variável não podem incluir espaços nem quaisquer outros caracteres de pontuação.

O primeiro caractere do nome da variável só pode ser uma letra ou um sublinhado.

Os nomes de variável diferenciam letras maiúsculas de minúsculas exemplo : total media e Total Media são nomes de variáveis diferentes.

Não há limite oficial no comprimento de nomes de variáveis , mas eles devem se ajustar dentro de uma linha

Utilizando essas regras , você será capaz de criar nomes de variáveis válidas. Outra dica é que você pode escolher utilizar tanto nomes amigáveis e fáceis de ler como um completamentes criptografados.

Utilizando variáveis locais e globais

Algumas linguagens de computador exigem que declare uma variável antes de utiliza-la. O JavaScript inclui a palavra-chave var , que pode ser utilizada para declarar uma variável. 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 variável , você precisara entender o conceito de escopo. O escopo de uma variável é a área do script em que a variável pode ser utilizada. Há dois tipos de variáveis :

Variáveis globais » Têm o script inteiro e outros scripts no mesmo documento de HTML como seu escopo. Elas podem ser utilizadas em qualquer lugar , mesmo dentro de funções.

Variáveis locais » Têm uma única função como seu escopo. Elas podem ser utilizadas somente dentro da função em que foram criadas.

Para criar uma variável global, você a declara no script principal , fora de quaisquer funções. Você pode utilizar a palavra-chavevar para declarar a variável, como nesse exemplo :

var numero= 25 ;

Essa instrução declara uma variável chamada numero e atribui um valor de 25. Se essa instrução for utilizada fora de funções , ela cria uma variável 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 fácil de ler. Nos exemplos dos tutoriais anteriores a maioria das variáveis que utilizamos eram globais.

Uma variável local pertence a uma função particular. Qualquer variável que você declara ou utilizar pela primeira vez em uma função é uma variável local. Por exemplo, as variáveis na lista de parâmetro da função são variáveis locais.

Para certifica-se de que está criando uma variável local dentro de uma função, você pode utilizar a palavra-chave var. Isso força o JavaScript a criar uma variável local, mesmo se existir uma variável global com o mesmo nome.

Para entender melhor os tipos de variáveis e declarações , vamos fazer um exemplo. Este exemplo é uma versão modificada do exemplo AloMundo do tutorial anterior:

<HTML>

<HEAD>

<TITLE>Definindo Variáveis</TITLE>

<SCRIPT>

var nome1= “Carla”;

var nome2=“Joel”;

function AloMundo(who) { alert ("Alô Mundo,"+who);

var nome2=” JavaScript”;

}

</SCRIPT>

</HEAD>

<BODY>

<H1> Exemplo de Variável </H1>

<P> Saudação</P>

<SCRIPT>

AloMundo(nome1);

AloMundo(nome2);

</SCRIPT>

</BODY>

</HTML>

O script do exemplo acima utiliza as seguintes variáveis :

nome1 e nome2 são variáveis globais definidas no cabeçalho;

who é uma variável local criada no parâmetro de lista da função AloMundo( );

A função AloMundo( ) cria uma variável local denominada nome2. Já que a palavra-chave var é utilizada, isso não afeta a variável global nome2 , se afetasse, o nome na Segunda saudação mudaria;

Nota: Se você acha que ter duas variáveis com o mesmo nome é confuso , você tem razão . Para evitar isso, é melhor utilizar nomes únicos para todas as variáveis .

Se você observar o script , vai notar que as variáveis globais são declaradas dentro do cabeçalho do documento de HTML. Na realidade você pode declarar variáveis em qualquer script no documento, mas o cabeçalho é um bom lugar para variáveis globais porque ela é executada primeiro. Se você tentar utilizar uma variável antes de ela ser declarada ou de um valor lhe ser atribuído, ela conterá valor nulo.

Você agora deve entender a diferença entre variáveis locais e globais. Se você estiver ainda um pouco confuso, não se preocupe se você utilizar a palavra- chave var toda vez, você quase sempre terminara com o tipo de variável certa.

Atribuindo valores a variáveis

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

i = 40;

Nessa instrução atribuir o valor 40 à variável i . Você pode utilizar qualquer expressão à direita do sinal igual, incluindo outras variáveis, como por exemplo

i=i+1

Nessa instrução foi utilizada uma sintaxe para adicionar um a uma variável.

Através de instruções você pode incrementar ou decrementar variáveis , o JavaScript inclui dois tipos de abreviação para essa sintaxe: A primeira utilizar o operador + = , por exemplo :

i+=1;

De forma semelhante, você pode subtrair um numero de uma variável utilizando o operador - =;, por exemplo

i-=1;

Se você ainda achar que é muito para digitar, o JavaScript também inclui operadores de incremento e decremento , ++ e --. Essa instrução adiciona um ao valor de i :

i++;

De forma semelhante, essa instrução subtrai um do valor de i:

i--;

Você também pode utilizar o operador ++ ou – antes do nome de uma variável, como em ++i. Entretanto, estes não são idênticos. A diferença é quanto o incremento ou decremento acontece :

Se o operador está depois do nome da variável, o incremento ou decremento acontece depois de a expressão atual ser avaliada.

Se o operador esta antes do nome da variável, o incremento ou decremento acontece antes de a expressão atual ser avaliada.

Essa diferença é somente uma questão quando você utiliza a variável em uma expressão e incrementa ou decrementa na mesma instrução. Como por exemplo, suponha que você atribuiu à variável i o valor 40, temos as seguintes instruções com efeitos diferentes:

alert( i++);

alert(++i);

Nota: Esse operadores são para sua conveniência. Se fizer mais sentido para você inserir i=i+1,faça isso.

Tipos de dados em JavaScript

Em algumas linguagens, você tem que especificar os tipos de dados que uma variável armazenará: por exemplo , um numero ou uma string. No JavaScript, você não precisa especificar um tipo de dados exceto em casos raros, porém você deve conhecer os tipos de dados que o JavaScript pode tratar:

Números: O JavaScript suporta tanto inteiros como números de ponto flutuante , como por exemplo: 1,4 .

Valores booleanos ou lógicos: Estes podem Ter um de dois valores: verdadeiro ou falso. Esses tipos de dados é útil para indicar se uma certa condição é 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 variável. Por exemplo, a instruçãodocument.write(resultado) resultara nesse valor se a variável resultado não foi previamente utilizada ou definida.

Embora o JavaScript monitore o tipo de dados atualmente armazenado em cada variável, ele não impede você de alterar os tipos intermediários. Por exemplo, suponha que você declarou uma variável atribuindo-lhe um valor:

resultado= 3;

Essa instrução declara uma variável chamada resultado e lhe atribui o valor 3. Essa é variável numérica. Agora suponha que você alterou o valor total:

resultado= JavaScript;

Isso atribui um valor de string à resultado. JavaScript não exibirá um erro quando essa instrução executar , pois ela é perfeitamente valida , embora provavelmente não seja um resultado muito útil.

Nota : Embora esse recursos do JavaScript seja conveniente , ela também pode tornar fácil para se cometer equívocos. Por exemplo, se a variável resultado for mais tarde utilizada em um calculo matemático, o resultado da operação será invalido, o JavaSript não o adverte de que você cometeu esse equivoco.

Convertendo entre tipos de dados

O JavaScript trata conversões entre tipos de dados para você sempre que ele pode. Por exemplo, você já utilizou instruções como essa :

document.write(“ O Resultado é “+resultado);

Essa instrução imprime uma mensagem como “ o resultado é 3 “. Já que a função de document.write trabalha com strings, o interpretador de JavaScript automaticamente converte quaisquer não-strings na expressão nesse caso, o valor de resultado, em string antes de desempenhar a função.

Isso funciona igualmente bem com valores de ponto flutuante e booleanos. Entretanto, há algumas situações onde não funcionara. Por exemplo, a seguinte instrução funcionará bem se o valor de resultado for 40.

Valor=resultado/3 ;

Entretanto , a variável resultado também pode conter uma string, nesse caso, a instrução acima resultaria em um erro.

Em algumas situações, você pode terminar com uma string contendo um numero e precisar convertê-la em uma variável numérica regular. O JavaScript incluir duas funções para esse propósito 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 funções lerão um numero desde o inicio da string e retornarão uma versão numérica . Por exemplo, essa instrução converte a string “30 bebidas “em um numero :

stringvar= “30 bebidas”

numvar= parseInt(stringvar);

Depois que essas instruções executarem, a variável numvar armazena o numero 30. A parte não-numerica da string é ignorada.

Nota: Essas funções procuram um numero do tipo apropriado no começo da string. Se um número válido não for localizado, a função retorna a string “NaN”, o que significa não um numero ( Not a Number)

Armazenando dados do usuário em variáveis

Uma utilização comum de variáveis é armazenar as informações que vêm do usuário. Como exemplo, você agora criará um script que solicita informações do usuário e criará um documento de HTML contendo essas informações.

Nesse script, criaremos uma home page personalizada para o usuário. Você utilizará a função prompt para solicitar cada parte das informações, lembre-se que você já utilizou essa função nos tutoriais anteriores. Essa função é semelhante a alert, mas solicita ao usuário uma entrada.

No script, você solicitara um primeiro nome, um sobrenome e um titulo para a pagina. Essas instruções solicitam três variáveis :

nome=prompt(“Digite seu primeiro nome:”);

sobrenome= prompt(“Digite seu sobrenome:”);

titulo= prompt(“Digite o titulo da pagina:”);

Você agora pode utilizar o conteúdo das variáveis para personalizar o documento de HTML . Inicie com o titulo que o usuário inseriu :

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

Essa instrução 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 espaço, 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 página esta em construção.</P>

</BODY>

</HTML>

Para testar esse script, carregue o documento de HTML em um navegador. Os três itens lhe serão solicitados, um por vez. Depois que você inserir todos os dados, a página completa é exibida. A pagina final deve se parecer como da figura abaixo:

Introdução

Nessa tutorial você ira ver como criar e manipular mais dois de tipos de variáveis 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 variáveis.

Como por exemplo :

Teste = “Isso é um teste”

Essa instrução atribui a string Isso é um teste a uma variável 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 seqüência de caracteres, sua forma geral é a seguinte:

stringObject.propriedadestringObject.metodo

Mais você não precisa se preocupar com isso agora, mais é importante saber a forma geral porque ela explica varias técnicas utilizadas para trabalhar com strings, que utilizam métodos ou seja funções 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 instrução 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 variável Teste.

Nota: Embora possa criar uma string utilizando sintaxe orientada a objetos, a sintaxe padrão de JavaScript é mais simples e não há nenhuma diferença nas strings criadas por esses dois métodos.

Propriedades das Strings

lenght : Determina o tamanho da string, em número de caracteres.

Ex: stringObject.lenght

charAt: retorna o caracter da posição especificada (inicia em 0).

Ex: string.charAt(posição)

indexOf : retorna o número da posição onde começa a primeira "string".

Ex: string.indexOf("string")

lastindexOf: retorna o número da posição onde começa a última "string".

Ex: string.lastindexOf("string")

substring: retorna o conteúdo da string que corresponde ao intervalo especificado. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.

Ex:string.substring(index1, index2)

Métodos das Strings

anchor: Cria uma âncora na página HTML, que se refere a stringObject. Eqüivale 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 :Obtém o caracter que estiver na posição "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 cor que stringObject será mostrada. Equivale a TAG <FONT COLOR=#RGB></FONT>.

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

fontsize : Mostra stringObject no tamanho definido por "x". Equivale a TAG <FONT SIZE="tamanho"></FONT>.

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

indexOf :Procura a ocorrência de uma substring dentro de stringObject. A busca começa na posição inicio. Este método retorna a posição inicial da substring dentro de stringObject.

Ex: PosiçãoRelativa=stringObject(substring [, inicio])

italics :Mostra stringObject no formato itálico. Equivale a TAG <I></I>.

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

lastIndexOf : Método bem semelhante a indexOf, a única diferença é que a busca começa da posição fim para o início da string.

Ex: PosiçãoRelativa=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 traço 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 : Obtém 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 minúscula.

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

toUpperCase : Converte stringObject para maiúscula.

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

Atribuindo valores para Strings

Pode-se atribuir um valor a uma string da mesma maneira como qualquer outra variável. Os dois exemplos anteriores atribuíram um valor inicial à string. Também pode atribuir um valor depois que a string já foi criada. Por exemplo, a seguinte instrução substitui o conteúdo da variável Teste com uma nova string:

Teste=” É somente um teste”;

Você também pode utilizar o operador de concatenação ( +) para combinar os valores de duas strings. O exemplo abaixo mostra um exemplo simples de atribuição e combinação 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 variáveis de string, Teste1 e Teste2 depois exibe um alerta com seu valor combinado. Se você executar esse script , sua saída deverá se semelhante a da Figura abaixo:

Além de utilizar o operador + para concatenar duas strings, você pode utilizar o operador += para adicionar em um string. Por exemplo, essa instrução adiciona um ponto ao conteúdo atual da string sentencia:

sentencia+=”.”;

Nota: O sinal de adição (+) é também utilizado para adicionar números em JavaScript. O navegador sabe se utiliza adição ou concatenação baseado nos tipos de dados que você utiliza com o sinal de adição. 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 variável 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:


document.write(Teste.length);

A primeira instrução atribui a string Isso é um teste à variável Teste. A Segunda instrução exibe o comprimento da string.

Nota: Lembre-se de que embora Teste refira-se a uma variável de string, o valor de Teste.length é um número e pode ser utilizado em qualquer expressão numérico.

Convertendo a caixa da string

Dois métodos do objeto string, já visto anteriormente, permitem converter todo o conteúdo de um string em letras maiúsculas ou em letras minúsculas:

toUpperCase( ) : Converte todos os caracteres na string em letras maiúsculas.

toLowerCase( ) : Converte todos os caracteres na string em letras minúsculas.

Por exemplo, a seguinte instrução exibe o valor da variável de string Teste em letras minúsculas.


document.write(Teste. toLowerCase( ) );

Assumindo que essa variável continha o texto Isso é um teste, o resultado seria a seguinte string : isso é um teste.

Note que a instrução não altera o valor da variável Teste. Esses métodos retornam a versão de letras maiúsculas ou minúsculas da string, mas eles não alteram a própria string. Se quiser alterar o valor da string, você pode utilizar um instrução como essa:

Teste=Teste.toLowerCase( )

Nota: Note que a sintaxe para esses métodos é semelhante à propriedade length introduzida anteriormente. A diferença é que os métodos sempre utilizam parênteses, enquanto propriedades não. Os métodos toUpperCase e toLowerCase não contém nenhum parâmetro, mas você ainda precisa utilizar os parênteses.

Trabalhando com Substrings

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

Utilizando parte de uma string

O método substring( ) retorna uma string consistindo em uma parte da string original entre dois valores de índices, que você deve especificar entre parênteses. Por exemplo , a seguinte instrução 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 vêm o 3 e o 6 ? . Bom, existe três coisas que você precisa entender sobre os parâmetros de índice:

» A indexação inicia com 0 para o primeiro caractere da string, então o quarto caractere é realmente o índice 3.

» O segundo índice é não 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 razão 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 método substring para retornar os caracteres desejados:

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

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

» Letra.substring(12,10) : Também 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 são os mesmos;

Obtendo um único caractere

O método charAt é uma maneira simples de pegar um único caractere de uma string. Você especifica o índice do caractere ou posição, entre parênteses. 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 não tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays é necessário a criação de um objeto com a propriedade de criação de um array.

Criando um array numérico

Diferente da maioria de outros tipos de variáveis 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 parênteses e um índice. Os índices iniciam com 0, enato os elementos do array nesse exemplo seria numerado de 0 a 29. Essas instruções 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 têm uma propriedade length. Esta informa o número de elementos no array, normalmente o mesmo número que voc6e utilizou ao criar o array. Por exemplo, essa instrução imprimira o número 30:

document.write(scores.length);

Acessando os elementos do array

Você pode ler o conteúdo de um array utilizando a mesma notação que utilizou quando atribuiu valores. Por exemplo, as seguintes instruções 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 difícil. Esse é um trabalho ideal para loops, que permite desempenhar as mesmas instruções varias vezes com valores diferentes. Mais não 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 números. O JavaScript também 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 numérico , de fato, o JavaScript não faz distinção 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 métodos de string vistas anteriormente . Por exemplo, a seguinte instrução 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 método de string chamado split, que divide uma string em suas partes componentes. Para utilizar esse método, 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 mantém o nome Fernanda Gomes da Silveira. O método split na Segunda instrução divide a string nome em cada espaço, resultado em quatro strings. Estas são armazenadas em um array de strings chamado Partes. Depois que as inruções de exemplo executam, os elementos de partes contêm o seguinte :

Partes[0]= “Fernanda”

Partes[1]= “Gomes”

Partes[2]=”da”

Parte[3]=”Silveira”

O JavaScript também inclui um método de array, join, que desempenha a função oposta. Esta instrução 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 espaço é utilizado, resultando na string final Fernanda Gomes da Silveira. Se você não especificar um caractere, as virgulas são utilizadas.

Classificando um array

O JavaScript também inclui o método sort para arrays, que retorna uma versão classificada do array ( alfabeticamente ou numericamente). Por exemplo, as seguintes instruções 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 instrução atribui o array sortednames à verão classificada de nomes utilizando o método 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 página 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 começar, você precisará definir a mensagem a ser rolada. Você utilizará uma variável chamada msn para armazenar a mensagem. No script, inicialize a variável, sinta-se livre para escolher seu próprio texto para a mensagem :

msn= “Este é um exemplo de mensagens que rolam na tela. Não é legal ? “;

A seguir, defina uma segunda string chamada esp. Essa string será exibida entre as cópias da mensagem para tornar claro onde uma termina e a outra começa. Por exemplo :

esp =”... ...”;

Você precisara de mais variável: uma variável numérica para armazenar a posição atual da string. Chame-a de pós e inicialize-a com 0:

pos=0;

A rolagem real será feita por uma função 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 descrição linha a linha da função rolamensagem :

» Linha 1: A palavra-chave function é utilizada para começar a função.

» Linha 2: Essa instrução exibe uma string na linha de status. A string é composta da parte de msn de pos para o fim, seguida pelo espaço, seguido pela parte de msn desde o inicio de pos.

» Linha 3: A variável pos é incrementada.

» Linha 4: Essa instrução verifica se pos é maior que o comprimento de msn. Se for, redefine-o para 0. Você aprenderá mais sobre a instrução if nas próximas partes do tutorial.

» Linha 5: Essa instrução utiliza o método window.setTimeout, que permite configurar uma instrução a ser executada depois de um demora de tempo. Nesse caso, execute a função rolamensagem depois do 0,2 segundo.

» Linha 6: O parêntese final termina a função.

Para completar o exemplo, adicione as tags < SCRIPT> e as tags de HTML que compõem 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.Não é 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.

Introdução

Durante as primeiras partes do tutorial de JavaScript você aprendeu métodos e propriedades que os auxiliam quando desejam executar alguma coisa no JavaScript, exemplos que podem parece “bobos” mais que causam efeitos notáveis. Agora vamos aprender a fazer melhor utilização desses métodos e variáveis, testando e avaliando seus valores, utilizando instruções condicionadas como a instrução if.

A instrução if

Um dos recursos mais importantes de uma linguagem de programação é a capacidade de testar e comprar valores . E isto pode ser feitos através das estruturas de controle que permitem que seu programa se comporte diferentemente com base nos valores de variáveis ou com base na entrada do usuário.

A instrução If é a instrução condicional principal do JavaScript pois ela executa uma porção de código se a condição especificada for verdadeira. Ou seja essa instrução consiste em duas partes : uma condição e uma ação, por exemplo :

Se a campanhia toca, atenda-a.

Condiçao » Se a campanhia tocar

Açao » atenda-a .

No JavaScript a instruçao If trabalha de forma semelhante , por exemplo.

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

Essa instruçao inlcui uma condiçao ( se a for igual a 1) e uma açao ( exibe uma mensagem ). Essa instruçao verifica a variavel a e se tiver um valor de 1, imprime uma mensagem. Caso contrario não faz nada.

Se voce utilizar uma instruçao if como o exemplo anterior, pode utilizar uma única instrução como a açao. Voce também pode utilizar múltiplas instruções para a ação, 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 ação de uma instrução if possa incluir quaisquer das instruóes de JavaScript que voce já aprendeu , a parte de condição da instrução utiliza sua propria sintaxe, isso é denominado expressão condicional. Uma expressão condicional inclui dois valores a serem comparados e esses valores podem ser variaveis, constantes ou até expressões.

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 são iguais. Abaixo esta uma variedade de operadores condicionais mais utilizados no JavaScript:

» == ( igual a );

» ! = ( não igual a );

» < ( menor que );

» >( maior que );

» < = ( menor que ou igual a );

» > = ( maior que ou igual a ) ;

Nota: Não confuda o operador de igualdade ( = = ) com o operador de atribuição (=), mesmo que eles talvez seja lidos como “igual”, é bom lembrar que utiliza = quando atribui uma variavel e = = quando compara valores.

Condiçoes e operadores lógicos

Na linguagem de programaçao é 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 através de operadores lógicos, também conhecidos como operadores booleanos. Por exemplo, as duas intruçoes do exemplo abaixo verificam condiçoes diferentes e utilizam a mesma ação :

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

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

Com a utilizaçao de um operador lógico podemos otimazar essas instruóes , combinando-as em uma única instrução

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

Essa instruçao utiliza o operador logico Or ( :: ) para combinar as condições. Traduzindo para uma liguagem mais usual , isso seria “ se o numro de telefone ou o endereço de correio eletronico estiver em branco, exiba uma mensagem de erro”.

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

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

Essa instrução utiliza && ( And) em vez de :: ( Or), e com isso o mensagem de erro somente será exibida se ambos, o endereço 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 alcançar o fim, ele não avalia o resto da condição. Por exemplo, se a primeira de duas condições separadas pelo operador && for falsa, a segunda não é avaliada, com isso voce tira proveito para aprimorar a velocidade de seu script.

O terceiro operador lógico é o ponto de exclamação ( ! ) , 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 número de telefone esta correto ” );

Nesse caso, o operador Not é utilizado como parte do operador de não-igual. Esse operador inverte a condiçao, entao a ação da instrução if é executada somente se a variavel de numero de telefone não estiver em branco.

Nota: Como voces pode notar os operadores lógicos são recursos poderosos, mais que são facieis de criar uma condiçao impossivel entres eles. Por exemplo, a condiçao ( a < 5 && a >10 ) talvez pareça correta à primeira vista. Entretanto, se voce lê-la em voz alta, você obtém “ Se a é menor que 5 e a é maior que 10 “, como voce pode ver ocorreu uma impossibilidade entre a condiáo, entao nesse caso, Or( :: ) deveria Ter sido utilizado.

Condição else

Um recurso adicional da instrução if é a palavra else. O else diz ao interpretador de JavaScript o que fazer se a condição não 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 condição for encontrada. Se a condição não for encontrada, uma mensagem diferente é exibida.

Utilizando expressões condicionais

Além da instruçao if, o JavaScrip fornece um tipo de abreviação de expressão condicional que você pode utilizar para tomar decisões rapidas. Ela utiliza uma sintaxe peculiar, que também é encontrada em outras linguagens, como C. Uma expressao condicional se parece com isso :

Variavel =( condição) ? if true : if false;

Isso atribui um de dois valores à variavel: um se a condição for verdadeira e outro se for falsa. Eis um exemplo de uma expressao condicional:

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

Essa instruçao pode parecer confusa para voce não é verdade ? , mais esta instruçao é equivalente ao seguinte exemplo abaixo:

if( a== 1)

valor = 1 ;

else

valor = 0;

Como voce pode Ter percebido , o valor depois do ponto de interrogação( ?) será utilizado se a condição for verdadeira e o valor depois dos dois-pontos(:) será utilizado se a condição for falsa. Os dois-pontos representam a parte else dessa instrução e, como a parte else da instrução if, é opcional.

Essas expressoes abreviadas podem ser utilizadas em qualquer lugar que o JavaScript espera uma valor. Elas fornecem uma maneira fácil de tomar decisões simples sobre valores ,mais que muitas das vezes é complicado de entender não é mesmo?. Por isso utilize a forma que você acha mais facil de entender.

Utilizando condições com switch

Muitas das vezes você utilizará varias instruções if em uma linha para testa e condições 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 método pode ser confuso se cada instrução if tiver seu próprio bloco de código com varias instruções. Como uma alternativa, o JavaScript inclui a instrução switch, que permite combinar vários testes da mesma variável ou expressão em um único bloco de instruções. 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( “ botão errado”);

}

Analisando esse exemplo podemos perceber que a instrução switch tem vários componentes :

» A instrução inicial switch, inclui um valor a testar( nesse caso, button) entre parênteses.

» As chaves ( { e } ) incluem a instrução switch, semelhante a uma função ou uma instrução if.

» Uma ou mais instruções case. Cada uma dessas instruções especifica um valor para comparar com o valor especificado na instrução switch.

Se os valores corresponderem, as instruções depois da instrução case são executadas. De modo, o próximo caso é tentado.

» A instrução break é utilizada para terminar cada caso.

» Opcionalmente, a instrução padrão pode ser incluída e seguida por um caso padrão, uma ou mais instruções que são executadas se nenhuma das instruções case foram satisfeitas.

Nota: Você pode utilizar múltiplas instruções depois de cada instrução case dentro da estrutura switch. Você não precisa incluí-las entre chaves. Se case corresponde, o interpretador de JavaScript executa instruções até encontrar um break ou case seguinte.

Avaliando a resposta do Usuário

Para melhor entender o exemplo anterior, vamos criar agora um exemplo prático. Nesse exemplo você vai criar uma pagina da Web que faz ao usuário uma pergunta e depois avalia a resposta do usuário para determinar o que fazer a seguir. Especificamente, você perguntará ao usuário uma palavra-chave que representa uma página da Web.

Se a palavra-chave corresponder a uma daquelas em seu script, o usuário será enviado para a página apropriada. Se a resposta não corresponder a uma palavra-chave predeterminadas, o usuário será enviado para uma página padrão, que pode ser a sua página em construção ou no meu caso a página do Júlio Battisti.

Seu script começa perguntado ao usuário a função window.prompt. Para utilizar essa função, você inclui uma instrução que faz uma solicitação ao usuário como um parâmetro e atribui o valor retornado a uma variável. Eis a instrução da solicitação:

pagina = window.prompt( “Que página você vai visitar hoje ?” );

A seguir, utilize uma instrução switch e várias instruções 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 instrução default para enviar o usuário a uma pagina padrão, que no meu caso é a página do Júlio Battisti ;

default :

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

}

Como esta é a ultima instrução na estrutura switch, você não precisa utilizar a instrução break. A chave final termina a instrução switch.

No exemplo abaixo mostra o script completo embutido em um documento de Web. Para testa-lo, carregue a página. 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 palavra-chave desconhecida, você será enviado para a página padrão.

<HTML>

< HEAD><TITLE> Avaliando a resposta do Usuário</TITLE>

</HEAD>

<BODY>

<SCRIPT>

pagina = window.prompt( “Que página 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.

Introdução

Durante as primeiras partes do tutorial de JavaScript você aprendeu métodos e propriedades que os auxiliam quando desejam executar alguma coisa no JavaScript. Agora chegamos a ultima parte para terminar os princípios básicos de programação 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 variável denominada contador ou índice, muito parecido com outras linguagem de programação como C, C++, Java, etc. , para monitorar quantas vezes o loop executou e ele pára quando o contador alcança um certo numero.

Uma instrução for básica se parece com isso:

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

Como pode perceber o loop for apresenta três parâmetros separados por ponto-e-virgula.

O primeiro parâmetro ( var =1 ) especifica uma variável e atribui uma valor inicial a ela, isso é chamado de expressão inicial, porque configura o estado inicial do loop.

O segundo parâmetro ( var < 10 ) é uma condição que deve permanecer verdadeira para manter o loop executado, isso é chamado de condição do loop.

O terceiro parâmetro ( var++) é uma instrução que executa a cada iteração do loop, isso é chamado de expressão de incremento, porque é normalmente utilizada para incrementa o contador.

Depois que os três parâmetros foram especificados, uma chave de abertura ( { ) é utilizada para sinalizar o começo de um bloco com instruções a serem executadas, depois uma chave de fechamento ( } ) é utilizada para indicar o termino do bloco. Todas as instruções entre as chaves serão executadas a cada iteração 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 iteração. 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 não 10? Essa duvida sempre aparece nesse casos que envolve loop, mais se você prestar bem atenção vai sabe a resposta. É só você observar os parâmetros do contador e a condição 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 expressão não é 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 instruções para a inicialização, condição 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 não necessariamente utilizam uma variável para contar. Em vez disso, eles executam uma condição contanto que seja verdadeira. De fato, se a condição inicia como falsa, as instruções podem simplesmente não executar.

A instrução while inclui a condição entre parênteses e é seguida por um bloco de instruções 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 pára quando o total dos valores alcançar 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 não é nada mais que um tipo especial de loop while que trata uma inicialização e um incremento para você. Você geralmente pode utilizar while para qualquer loop. Entretanto, é melhor escolher qualquer tipo de loop que faça mais sentido para o trabalho ou exija menos digitação.

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 diferença: a condição é 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 versão de ponta cabeça do exemplo while visto anteriormente. Há diferença é que com o loop do, a condiçao é testada no final do loop, isso significa que as instruções no loop sempre serão executadas pelo menos uma vez, mesmo se a condição nunca for verdadeira.

Nota : Como com os loops for e while, o loop do pode incluir uma única instrução sem chaves ou um numero de instruções incluído entre chaves.

Trabalhando com loops

Embora você possa utilizar simples loop dor e while para tarefas simples e diretas, há algumas considerações que você deve fazer quando utilizar loops mais complicados. Nas próximas seções, veremos loops infinitos e as instruções break e continue, que oferecem mais controles sobre os loops.

Loops infinitos

Os loops while dão a você bastante controle sobre o loop. Em alguns casos, isso pode causar problemas se você não 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 condição do loop while refere-se à variável j, mas essa variável realmente não se altera durante o loop. Isso cria um loop infinito. O loop continuará executando ate que sela interrompido pelo usuário ou ate gerar algum tipo de erro.

Os loops infinitos nem sempre podem ser interrompido pelo usuário, 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 também podem ser difíceis de serem identificados, porque o JavaScript não lhe mostrará um erro dizendo q você que há um loop infinito. Mais não 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 saída.

Nota: Dependendo da versão do navegador em utilização, o loop infinito pode ate mesmo fazer o navegador parar de responder ao usuário. 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 situações em que você quer que seu programa execute até o usuário interrompê-lo ou em você quer fornecer uma rota de escape com a instrução break. Uma maneira de criar um loop infinito é o seguinte:

while ( true) {...}

Como o valor true é condicional, esse loop sempre encontrará sua condição como sendo verdadeira.

Escapando de um loop infinito utilizando a instrução break

Há uma maneira de escapar de um loop infinito. Você pode utilizar a instrução break (significa pára ) durante um loop para sair dele imediatamente e continuar a primeira instrução depois do loop. O exemplo abaixo mostra o uso dessa instrução.

while ( true) {

n++;

if( values[n]==1 break; }

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

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

Escapando de um loop infinito utilizando a instrução continue

A instrução continue é mais uma escape que está disponível para ajuda-lo a controlar a execução de instruções em um loop. A instrução continue pula o resto do loop, mas continua com a próxima iteração do loop, diferente de break. O exemplo abaixo mostra como é utilizado a instrução 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 instrução if é utilizada para verificar as notas com um valor 0. O script assume que uma nota 0 significa que o aluno não fez o teste, então ele continua o loop sem imprimir essa contagem.

Utilizando loops for... in

Um terceiro tipo de loop disponível pelo JavaScript. O loop for...in não é tão flexível quando um loop for ou while comum. Em vez disso, é especificamente projetado para desempenhar uma operação em cada propriedade de um objeto.

Por exemplo , o objeto navigator contém propriedade que descrevem o navegador do usuário, 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 variável de índice( i no exemplo). Para cada iteração do loop, a variável é configurada como a próxima propriedade do objeto. Isso torna fácil quando você precisa verificar ou modificar cada uma das propriedades do objeto. Mas você não precisa se preocupar com isso agora , pois aprenderá isso mais detalhadamente nos próximos 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 usuário uma serie de nomes. Depois que todos os nomes foram inseridos, ele exibirá a lista de nomes em uma lista numerada. Para começar o script, inicializa algumas variáveis:

nomes=new Array( );

i=0;

O array nomes armazenará os nomes que o usuário insere. Você não sabe quantos nomes serão inseridos, então você não especificou uma dimensão para o array. A variável i será utilizada como contador nos loops.

A seguir, utilize a instrução window.prompt para solicitar ao usuário uma serie de nomes. Utilize um loop para repetir o prompt para cada nome. Você quer que o usuário insira pelo menos um nome, então um loop do seria o ideal:

do {

next=window.prompt (“ Digite o próximo nome:”);

if( next > “ “ ) nomes[i] =next;

i=i+1;

} while( next > “ “);

Nota: Se você estiver interessado em fazer seus scripts o mais curto possível, lembra-se de que você pode utilizar o operador de incremento (++) para combinar a instrução 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 espaço, ele é armazenado como a próxima entrada no array nomes. O contador i então é incrementado. O loop se repete até que o usuário não 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 número de nomes que foram inseridos:

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

Essa instrução exibe a propriedade length do array nomes, cercada pelas tags de título 2 da linguagem html para ênfase.

A seguir, o script deve exibir todos os nomes na ordem em que forma inseridos. Como os nomes estão 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 então 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 versão completa do script, incluído 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 próximo 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 vários 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 vários tipos de dados e funções 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 visão rápida de como os objetos funcionam no JavaScript.

Criando Objetos

Cada objeto tem uma função especial, denominada construtor, que é utilizada para criar objetos. Por exemplo, O JavaScript inclui uma função embutida chamada String para criar objetos String. Essa é a razão pela qual você pode criar uma variável de string como esta:

meunome= new String (“Kenia”);

A palavra-chave new diz ao JavaScript para criar um novo objeto ou, em termos técnicos, uma nova instancia do objeto String. Essa instância particular terá o valor Kenia e será armazenada na variável meunome.

Você pode utilizar a mesma sintaxe básica para criar objetos String, Date, Array e até seus próprios objetos personalizados, porem o objeto Math é uma exceção, 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 variável e esta contida dentro do objeto. Pode-se atribuir um valor a todas as propriedades. È possível utilizar propriedades para armazenar qualquer tipo de dados que uma variável 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 próprios objetos. Por exemplo, cada um dos elementos do array é um tipo de propriedade especial, identificamos por um valor de índice. Se o array names contém strings, ele é um array de objetos String, como por exemplo, a sintaxe para o comprimento do primeiro elemento de names é:

names[0].length

Entendendo métodos

Como você já aprendeu, as funções são combinações de instruções que podem ser executadas como uma unidade. Os métodos são funções que são armazenadas como propriedades de um objeto.

Você já utilizou os métodos. Por exemplo, o método toUpperCase de objetos String, que converte uma string em letras maiúsculas. Eis um exemplo que utiliza uma string chamada value:

value.toUpperCase( );

Como funções comuns, os métodos podem opcionalmente retornar um valor. Por exemplo, a instrução abaixo arredonda um numero utilizando o método round do objeto Math e armazena o resultado na variável final:

final= Math.round(num);

Utilizando a palavra-chave with

A palavra-chave with ainda não foi abordada aqui. Você pode utilizá-la para tornar a programação em JavaScript mais fácil ou pelo menos mais fácil de digitar.

A palavra-chave with especifica um objeto e é seguida por um bloco de instruções incluído entre chaves. Para cada instruções no bloco, quaisquer propriedades que você mencione sem especificar um objeto são 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 operações 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 método 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 digitação em situações 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 funções e constantes matemáticas. Você não precisa criar um objeto Math, porque ele existe automaticamente em qualquer programa JavaScript. As propriedades do objeto Math representam constantes matemáticas e seus métodos são funções matemáticas.

Nota: Como você pode utilizar as propriedades e métodos do objeto Math em um grupo inteiro de instruções, talvez ache útil utilizar a palavra-chave with, introduzida anteriormente nesta hora, para especificar o objeto Math para essas instruções.

Arredondando e Truncando

Três dos métodos mais úteis do objeto Math permitem arredondar valores decimais para cima e para baixo:

» Math.ceil( ): arredonda um numero para cima ate o próximo inteiro.

» Math.floor( ): arredonda um numero para baixo ate o próximo inteiro.

» Math.round( ): arredonda um numero para o inteiro mais próximo.

Todos eles tomam o numero a ser arredondado como seu único parâmetro. Você talvez note uma coisa ausente: a capacidade de arredondar para casa decimal, como para valores monetários.Entretanto, você pode facilmente simular isso.O exemplo abaixo mostra uma função que arredonda números para duas casas decimais.

function round( numero) {

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

}

Essa função multiplica o valor por 100 para mover o decimal e então arredonda o numero para o inteiro mais próximo. Por fim, o valor é dividido por 100 para restaurar o decimal.

Gerando números aleatórios

Um dos métodos mais comumente utilizados do objeto Math é o método Math.random( ), que gera um numero aleatório. Esse método não exige nenhum parâmetro. O numero que retorna é um numero decimal aleatório entre 0 e 1.

Em geral, você vai querer um numero aleatório de uso geral. O Exemplo abaixo mostra uma função que gera números aleatórios entre 1 e o parâmetro que você envia para ela.

function rand( numero) {

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

}

Essa função multiplica um numero aleatório pelo valor que você envia para ela e depois o converte em um inteiro entre 1 e o numero utilizando o método Math.floor().

Outras Funções tipicamente Matemáticas:

Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)

Math.pow(base, expoente) - retorna o cálculo do exponencial

Math.max(número1, número2) - retorna o maior número dos dois fornecidos

Math.min(número1, número2) - retorna o menor número dos dois fornecidos

Math.sqrt(número) - retorna a raiz quadrada do número

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(número) - retorna o seno de um número (anglo em radianos)

Math.asin(número) - retorna o arco seno de um número (em radianos)

Math.cos(número) - retorna o cosseno de um número (anglo em radianos)

Math.acos(número) - retorna o arco cosseno de um número (em radianos)

Math.tan(número) - retorna a tangente de um número (anglo em radianos)

Math.atan(número) - retorna o arco tangente de um número (em radianos)

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

Math.log(número) - retorna o logarítmo de um número

Math.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)

Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)


Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)


Nota: Em todas as funções, quando apresentamos a expressão "(número)", na verdade queremos nos referir a um argumento que será processado pela função e que poderá ser: um número, uma variável ou o conteúdo 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 métodos do objeto Date para trabalhar com a data.

O objeto Date não tem propriedades, para configurar ou obter valores de um objeto Date , você deve utilizar outros métodos , que vai ser abordado logo a seguir.

Criando um objeto Date

Você pode criar um objeto Date utilizando a palavra-chave new. Opcionalmente você também 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ê não utilizar parâmetros, como no primeiro caso, a data atual é armazenada no objeto. Você então pode configurar os valores utilizados outro método que vai ser descrito a seguir.

Configurando valores de data

Uma variedade de métodos set permite configurar componentes de um objeto Date para valores :

» setDate( ): configura o dia do mês.

» setMonth( ): configura o mês. 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 número de milissegundos, desde 1º de Janeiro.

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

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

holiday.setYear(99).

Obtendo valores de data

Você pode utilizar os métodos get para obter valores de um objeto Date. Essa é a única maneira de obter valores, porque eles não são propriedades disponíveis. Eis os métodos get disponíveis para datas:

» getDate( ): obtém o dia do mês.

» getMonth( ): obtém o mês.

» getFullYear( ):obtém o ano.

» getTime( ):obtém a hora e a data como o número de milissegundos deste 1 de Janeiro.

» getHours( ), getMinutes,getSeconds( ): obtém a hora.

Nota: Juntos com setFullYear e getFullYear, que exigem anos de quarto dígitos, o JavaScript inclui os métodos setYear e getYear, que utilizam datas de dois dígitos. Você sempre deve utilizar a versão de quatro dígitos para evitar questoes do Ano 2000.

Trabalhando com fusos horários

Por fim, algumas funções estão disponíveis para ajudar seus objetos Date a trabalharem com valores de hora local e fusos horários:

» getTimeZoneOffset( ):Fornece a diferença entre o fuso horário local e o GMT( Greenwich Mean Time, também conhecido como UTC). Nesse caso, local refere-se á localização do navegador, naturalmente, isso somente funciona se o usuário configurou seu relógio 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 métodos especiais do objeto Date permitem converter entre formatos de data. Em vez de utilizar esses métodos com um objeto Date que você criou, você os utiliza com o próprio objeto Date embutido. Esses métodos são 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 relção a linguagens mais sofisticadas como Java é que os scripts podem manipular o navegador da web. Seu script pode carregar uma nova página 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 página da Web.

Os objetos browser estão 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 variável de seus objetos.

Esse diagrama inclui somente os objetos básicos de um navegador que serão abordados a seguir. Uma variedade de outros objetos também 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 métodos e propriedades do objeto window, como por exemplo:

» Você utilizou a propriedade window.status para alterar o conteúdo da linha de status do navegador.

» Você utilizou os métodos window.alert, window.confirm e window.prompt para exibirem caixa de diálogos de mensagem para o usuário.

Podem haver vários objetos window por vez, cada um representando uma janela de navegador aberta. Os frames são também 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 página da Web. Os documentos da web são exibidos dentro das janelas do navegador, então não 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 contém o script, você pode utilizar a window.document para referenciar o documento atual. Lembre-se que você já utilizou o método document.write para exibir texto dentro de um documento na Web.Os exemplos nos tutoriais anteriores utilizaram somente uma única janela e documento. Se múltiplas janelas ou frames estiverem em utilização, talvez haja vários objetos window, cada um com seu próprio objeto document. Para utilizar um desses objetos document, você utiliza o nome da janela e o nome do documento.

Obtendo informações sobre o documento

Varias propriedades do objeto document incluem informações sobre o documento atual em geral. Por exemplo:

» A propriedade URL especifica o URL do documento. Esse é um campo de texto simples. Você não pode alterar essa propriedade. Por isso se você precisar enviar o usuário para uma localização diferente, o ideal é utiliza o objeto window.location, que vai ser especificado mais adiante.

» A propriedade title lista o titulo da página atual, definido pela tag HTML<TITLE>.

» A propriedade referrer é o URL da página que o usuario esta visualizando antes da pagina atual, normalmente , a pagina com um link para a página ataul.

» A propriedade lasModified é a ultima data em que o documento foi modificado. Essa data é enviada ao servidor junto com a página. O exemplo abaixo mostra um script de um document de HTML que exibe a data da sua última modificação.

<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 página foi alterada pela ultima vez. Se utilizar JavaScript, você não tem de se lembrar de atualizar a data toda vez que modificar a página.

Nota: Você talvez ache que a propriedade document.lasModified não funciona em suas páginas da Web. A data é recebida do servidor da Web e alguns servidores não mantêm data de modificações corretamente.

Escrevendo texto em um documento

Os métodos do objeto document mais simples são também aqueles que você utilizará mais freqüentemente. De fato, você já os utilizou. Os métodos document.write imprime texto como parte da página de HTML em uma janela de documento. Essa instrução é utilizada sempre que você precisar incluir saída em uma página da Web.

Uma instrução alternativa, document.writeln, também imprime texto, mas também 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 contêiner <PRE>. Você precisará utilizar a tag<BR> se quiser uma quebra de linha real.

Você pode utilizar esses métodos somente dentro do corpo da página da Web, de modo que eles serão executados quando a página carregar. O método document.write pode ser utilizado somente dentro de uma tag <SCRIPT> no corpo de um documento HTML. Você também pode utiliza-lo em uma função, contanto que você inclua uma chamada para a função dentro do corpo do documento.

Limpando e reescrevendo documentos

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

Quando você utiliza o método document.open, o documento atual é limpado. Quaisquer dados já exibidos no documento são apagados e você pode começar a escrever o novo conteúdo no documento.

Os dados que você escrever depois de document.open não são realmente exibidos ate você fecha o fluxo com método document.close. Você pode utilizar isso para assegurar que blocos de comando write executem ao mesmo tempo.

Nota: Se você utilizar o método document.open na janela atual, seu script parte do documento ataul será limpado e parará de executar. Por essa razão, esses métodos são mais bem utilizados com janelas e frames separadas. Mais não precisa se preocupara com isso agora, pois este assunto vai ser abordado nos próximos tutoriais.

Você pode especificar um tipo de documento MIME no comando document.open,mais não é obrigatório. 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 padrão 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 típicos de navegador são 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 múltiplos objetos link em um documento, mas cada um inclui informações diferentes sobre um link para outra localização ou âncora.

Nota: As âncoras são 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ê então 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 página.

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 instrução atribui o URL inteiro do primeiro link à variável link1:

link1=links[0].href;

Os objetos anchor são também filhos do objeto document. Cada objeto anchor representa uma âncora no documento atual, uma localização 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 histórico do navegador.

O objeto history é outra propriedade do objeto window. Esse objeto armazena as informações sobre os URLs que foram visitados antes e depôs do atual e inclui métodos para ir para as localizações anteriores ou próximas.

O objeto history tem quatro propriedades:

» history.length: monitora o comprimento da lista de histórico em outras palavras, o numero de localizações diferentes que o usuário visitou.

» history.next: é o valor da próxima entrada na lista de histórico, o URL ao qual o usuário será enviado se ele pressionar o botão Forward do navegador. Como o botão Forward somente funciona quando você já utilizou o botão Back, nem sempre pode haver um valor para a propriedade history.next.

» history.previous: é a entrada anterior do histórico, o URL ao qual o usuários será enviado se ele utilizar o navegador de botão Back.

Você também pode tratar o objeto history como array. Cada entrada contém um dos URLs na lista de histórico, com history[0] sendo a entrada atual. Por ultimo, mas não menos importantes, o objeto history tem três métodos:

» history.go: abre um URL da lista de histórico. Para utilizar esse método, especifique um numero positivo ou negativo entre parênteses. Por exemplo , history.go(-2) é equivalente a pressionar o botão Back duas vezes.

» history.back:carrega o URL anterior a lista de histórico, o equivalente a pressionar o bota Back.

» history. forward: carrega o próximo URL na lista de histórico, se disponível. Isso é equivalente a pressionar o botão Forward.

Nota: Os métodos history.back e history. Forward não funcionam corretamente em algumas versões do Netscape Navigotor.

Por essa razão, é melhor utilizar history.go(-1) e history.go(1).

Trabalhando com objeto location

Este objeto armazena as informações sobre o URL atual armazenado na janela. Por exemplo, a seguinte instrução carrega um URL na janela atual:window.location.href=” http://www.juliobattisti.com.br”;

A propriedade href utilizada nessa instrução contém o URL inteiro da localização atual da janela. Você também 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 métodos:

» location.reload: Recarrega o documento atual.

» location.replace: Substitui a localização atual por uma nova.

Lendo informações sobre o navegador.

O objeto navigator não faz parte da hierarquia do objeto browser, mas é outro objeto útil para fazer script. Esse objeto contem informações sobre a versão do navegador. Você pode utilizar esse objeto para descobrir qual navegador e plataforma de computador o usuário esta executando e seu script pode alterar seu comportamento para corresponder a esse navegador.

Scripts específicos do navegador pode ser complicado , mais não 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 botões Back e Forward

Uma utilização comum para os métodos back e forward do objeto history é adicionar seus próprios botões Back e Forward a um documento na Web. Isso aprimora a interface com o usuário de suas paginas.

Como um exemplo do uso do objeto history, você agora criara um script que exibe os botões Back e Forward e utiliza esses métodos para o navegador.

Você utilizará imagens gráficas para os botões Back e Forward. Abaixo esta a parte do script que tratará o botão 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 botão Forward é quase idêntico:

<A HREF=”javascript:history.go(1);”>

<IMG BORDER=0 SRC= “right.gif”>

</A>

Com os script dos botões em mãos, 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 botões estão funcionando.

<html>

<head><title> Testando os botões</title></head>

<body>

<h1> Botões Back e Forward</h1>

<h1> Esta página é um teste para os botões Back e Forward. Depois carregar esse documento , visite outras URL e certifique se os botões estão 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 botões Back e Forward

Nota: Esse script é uma exemplo de quanto o JavaScript pode fazer com muito pouco. Você pode ter percebido não utilizei as tags< Script> absolutamente e apenas dois comando do JavaScript.

Utilizando objetos para simplificar o script

Embora as variáveis e arrays do JavaScript sejam formas versáteis 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 cartões de informações que contém nomes, endereços e números de telefone de uma variedade de pessoas.

Se você utilizar variáveis normais, você precisaria de varias variáveis separadas para cada pessoa no banco de dados, ou seja, uma variável para nome, uma variável para endereço 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 endereços e um array de números de telefone. Cada pessoa no banco de dados teria uma entrada em cada array. Isso seria mais conveniente mais ainda não seria perfeito.

Com objetos, você pode tornar as variáveis que armazenam o banco de dados tão lógico quanto de informações. Cada pessoa é representada por um objeto Cart, que tem propriedade para nome, endereço e numero de telefone. você pode até adicionar métodos ao objeto para exibir ou trabalhar com as informações.

Nos tópicos a seguir você utilizará a JavaScript para realmente criar o objeto Cart e suas propriedades e métodos. Mais adiante utilizaremos o objeto Cart em um script para exibir as informações para vários membros do banco dados.

Definindo um objeto

O primeiro passo na criação 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

» endereço

» telefone

O primeiro passo na utilização desse objeto em um programa de JavaScript é criar uma função para criar novos objetos Cart. Essa função é chamada construtor de um objeto. Como a função abaixo:

function Cart(nome, endereco, telefone)

{ this.nome = nome};

this.endereco = endereco;

this.telefone=telefone; }

O construtor é uma função simples que aceita parâmetros para inicializar um novo objeto e os atribui às propriedades correspondentes. Essa função aceita vários parametros da instrução que chama a função e então os atribui como propriedade de um objeto.Como a função é 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 defnição de objeto. Utiliza this para referenciar o objeto atual ou seja aquele que esta sendo criado pela função.

Definindo um método 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 função que imprime as propriedades em um formato organizado. Vamos chamar essa função de imprimircart.

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

function imprimircart( )

{ line1= “ Nome: “+this,nome +”<BR>\n;

line2= “ Endereço: “+this,endereco +”<BR>\n;

line3= “ Telefone: “+this,telefone +”<BR>\n;

document.write(line1,line2,line3);

}

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

Você agora tem uma função que imprime um cartão, mas não é oficialmente um metodo do objeto Card. A ultima coisa que voce precisa fazer é tornar imprimircart parte da definição de função para objetos Cart. Logo abaixo esta a modficação da função Cart:

function Cart(nome ,endereco, telefone)

{ this.nome = nome;


this.telefone=telefone;

this. imprimircart= imprimircart ;

}

A instrução adicionada se parece exatamente como a definição de outra propriedade, mas refere-se a função imprimircart. Essa funcionará contanto que a função imprimircart seja definida com sua própria definição de função.

Criando uma instancia de objeto

Agora vamos utilizar definição de objeto e método que você criou acima. A fim de utilizar a definição de objeto, vamos criar um novo objeto. Isso é feito com a palavra-chave new. Essa é a mesma palavra-chave que você utilizou para criar os objetos Date e Array.

A seguinte instrução 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 fácil. Tudo que você faz é chamar a função Cart( ) e conferir a ela os atributos exigidos, na mesma ordem que a definição.

Uma vez que essa instrução executa, um novo objeto é criado para armazenar as informações da kenia. Isso é chamado de instancia do objeto Cart. Assim como pode haver diversas variáveis de strings em um programa, pode haver diversas instancias de um objeto que você define.

Em vez de especificar todas as informações em um cartão com a palavra- chave new, você pode atribui-las 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 métodos, você pode utilizar o método imprimircart ( ) para exibir suas informações. Por exemplo,essa instrução exibe as propriedades do cartão da kenia:

kenia.imprimircart ( );

Personalizando objetos embutidos

O JavaScript inclui um recurso que permite estender as definições de objetos embutidos. Por exemplo, se você acha que o objeto String não atende às suas necessidades, você pode estendê-lo, adicionando uma nova propriedade ou método.

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

Você pode adicionar tanto propriedades como métodos a um objeto existente utilizando a palavra- chave prototype. ( um protótipo e outro nome para a definição de um objeto ou uma função construtora).A palavra-chave prototype permite alterar a definição de um objeto fora de sua função construtora. Como um exemplo, vamos adicionar um método à definição de objeto String. Você criará um método chamado heading, que converte uma string em um título de HTML. A seguinte instrução define uma string chamada title:

title=” Minha Pagina na Web”;

Essa instrução daria saída ao conteúdo da string de title como um titulo de HTML de nível 1:

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

O exemplo abaixo adiciona um método heading à definição de objeto String que exibirá a string como um titulo e então exibira os seguinte exemplo:

<html>

<head><titler> Testando o método 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 função addhead( ), que servira como o novo método de string. Ela aceita um numero para especificar o nível de titulo. As variáveis start e stop são utilizadas para armazenar as tag HTML “abre titulo”e “fecha titulo”, como < H1> e </H1>.

Depois que a função foi definida, utilize a palavra-chave prototype para adiciona-la como um método do objeto String. você então pode utilizar esse método em qualquer objeto String ou, de fato, a qualquer string de JavaScript. Isso é demostrado pela ultima instrução, que exibe uma string de texto como um titulo de nível 1, visto na figura abaixo:

Armazenando dados em objetos

Depois de termos criamos um novo objeto para armazenar os cartões de informações e um método para imprimi-los. Agora para entender melhor sobre propriedades, funções e métodos, vamos utilizar esse objetos em uma página da Web para exibir dados para vários cartões.

O documento de HTML precisará incluir a definição de função para imprimircart, junto com a definição para o objeto Cart. Neste exemplo vamos criar três cartões e imprimi-los no corpo do documento. O exemplo abaixo mostra o código completo do documento de HTML, que tal testa-lo ?

<html>

<head><titler> Cartões </title>

<Script>

function imprimircart( )

{ line1= “<B> Nome: </B>“+this.nome +”<BR>\n;

line2= “<B>Endereço: </B> “+this.endereco +”<BR>\n;

line3= “<B>Telefone: </B> “+this.telefone +”<BR>\n;

document.write(line1,line2,line3);

}

function Cart(nome ,endereço, telefone)

{ this.nome = nome;


this.telefone=telefone;

this. imprimircart= imprimircart;

}

</Script>

</head>

<body>

<H1> Cartões de Teste</H1>

Temos as seguintes informações: <HR>

<Script>

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

felipe=new Cart(“Felipe Oliveira”, “Rua da Maça, 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 Cartão.

</body>

</html>

Neste exemplo você pode notar que a função imprimircart foi um pouco modificada para melhor aparência das coisas, com quebras de linha de HTML e negrito.

Nota : Esse exemplo não é 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 fácil para armazenar um registro de banco de dados recuperado de um servidor de banco de dados com milhares de registros.

Documents

Entendendo de JavaScript