Manual 2 em 1 Javascript

Apostila de JavaScript
(Curso Bsico)
09 de abril de 2005
Verso 0.01
Prof. Lus Rodrigo de O. Gonalves

E-mail:luisrodrigoog@yahoo.com.br Site: http://www.lrodrigo.cjb.net
OBS: esta apostila foi montada com trechos retirados de vrios sites da internet.
Apostila de JavaScript verso 0.01 Pgina 1 de 48
ndice
1.) Introduo.........................................................................................................................3 1.1) Consideraes iniciais...........................................................................................3 1.2) Variveis.................................................................................................................5 1.3) Operadores............................................................................................................6 1.3.5) Operadores lgicos.............................................................................................8 2) Objetos...............................................................................................................................9 2.1) Criando Objetos.....................................................................................................9 3) Comandos.......................................................................................................................11 3.1) VAR......................................................................................................................11 3.2) with.......................................................................................................................12 3.3) Break....................................................................................................................12 3.4) Continue...............................................................................................................13 3.5) Funes................................................................................................................13 3.6) Comentrios.........................................................................................................14 3.7) Estruturas de Controle.........................................................................................15 4) Funes internas.............................................................................................................18 5) Objetos JavaScript...........................................................................................................20 5.1) Select ..................................................................................................................23 5.2) Button ..................................................................................................................25 5.3) Navigator .............................................................................................................26 5.4) Form ....................................................................................................................27 5.5) CheckBox ............................................................................................................30 5.6) Document ............................................................................................................32 5.7) Date .....................................................................................................................35 5.8) History .................................................................................................................39 5.9) Window ................................................................................................................40 5.10) Reset .................................................................................................................42 5.11) Link.....................................................................................................................44 6.) Palavras reservadas ......................................................................................................46 7.) Tabela de cores .............................................................................................................47 8) Referncias......................................................................................................................48
1.) Introduo
JavaScript uma linguagem para auxilio na criao de Home-Pages, as funes escritas em JavaScript podem ser embutidas dentro de seu documento HTML, possibilitando o incremento das possivel: responder funcionalidades do seu documento HTML com elementos interessantes. Sendo criar sofisticadas pginas com a ajuda desta linguagem. Apesar dos nomes bem parecidos, Java no o mesmo que JavaScript. Estas so duas tcnicas diferentes de programao na Internet. Java uma linguagem de programao. JavaScript uma linguagem de hiper-texto. A diferena que voc realmente pode criar programas em Java. Mas muitas vezes voc precisa apenas criar um efeito bonito sem ter que se incomodar com programao. A soluo ento JavaScript pois fcil de entender e usar. Podemos dizer que JavaScript mais uma extenso do HTML do que uma linguagem de programao propriamente dita. O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0, mas a verso para o "Mac" parece apresentar muitos bugs.
facilmente a eventos iniciados pelo usurio, incluir efeitos que tornem sua pgina dinmica. Logo, podemos
1.1) Consideraes iniciais
Em documentos HTML, a utilizao da linguagem JavaScript, se d sob a forma de funes (applets), as quais so chamadas em determinadas situaes ou em resposta a determinados eventos, estas funes podem estar localizadas em qualquer parte do cdigo HTML, a nica restrio que devem comear com a declarao <SCRIPT> e termina com o respectivo </SCRIPT>, por conveno costuma-se colocar todas as funes no incio do documento (estre as TAGs <HEAD> e </HEAD>, isso para garantir que o cdigo JavaScript seja carregado antes que o usurio interaja com a Home Page), ou seja, antes do <BODY>. Exemplo:
<HTML> <HEAD> <TITLE>Exemplo</TITLE> <!-Se houvesse alguma funo seria bom declar-la aqui!!! --> </HEAD> <BODY> Esta linha est escrita em HTML <SCRIPT>
document.write("Aqui j JavaScript"); </SCRIPT> Voltamos para o HTML </BODY> </HTML>
importante ressaltar que todas as linhas devem ser terminadas com; (ponto e virgula) a menos que a prxima instruo seja um else e se voc precisar escrever mais de uma linha para executar uma condio seja ela em uma estrutura for, if ou while, este bloco de instrues deve estar entre { } (chaves). Inclusive a definio de funes segue este modelo, ou seja, todo o cdigo da funo deve estar limitado por { (no incio) e } (no final). Um browser que no suporta JavaScript, ele no conhece a TAG <SCRIPT>. Ele ignora a TAG e logicamente tudo todo o cdigo que estiver sendo limitado por ela, mostrando todo o cdigo na tela como se fosse um simples texto HTML. Deste modo o usurio veria o cdigo JavaScript do seu programa dentro do documento HTML e como certamente essa no deve ser sua inteno, existe um meio de esconder o cdigo JavaScript dos browsers que no conhecem esta linguagem, basta utilizar os comentrios HTML <!- - e --> . O cdigo do nosso exemplo anterior ficaria assim:
<HTML> <HEAD> <TITLE> Exemplo </TITLE> <!-... Se houvesse alguma funo seria bom declar-la aqui!!! ... --> </HEAD> <BODY> Esta linha est escrita em HTML <SCRIPT>  </SCRIPT> Voltamos para o HTML </BODY> </HTML>
Se o browser no suportar JavaScript e no inserirmos o comentrio HTML, o que apareceria na tela seria:
Esta uma linha escrita em HTML document.write("Aqui j JavaScript"); Voltamos para o HTML
Note que esse artifcio no esconde completamente o cdigo JavaScript, o que ele faz prevenir que o cdigo seja mostrado por browsers mais antigos, porm o usurio tem acesso a todas as informaes do cdigo fonte de sua Home Page (tanto HTML, quanto JavaScript).
1.2) Variveis
Em JavaScript, variveis dinmicas podem ser criadas e inicializadas sem declaraes formais. Existem dois tipos de abrangncia para as variveis:
Global - Declaradas/criadas fora de uma funo. As variveis globais podem ser acessadas em qualquer parte do programa.
Local - Declaradas/criadas dentro de uma funo. S podem ser utilizadas dentro da funo onde foram criadas e precisa ser definida com a instruo Var.
Com relao nomenclatura, as variveis devem comear por uma letra ou pelo caractere sublinhado _, o restante da definio do nome pode conter qualquer letra ou nmero. importante ressaltar que a varivel Cdigo diferente da varivel cdigo, que por sua vez diferente de CODIGO, sendo assim, muito cuidado quando for definir o nome das variveis, utilize sempre um mesmo padro. Existem trs tipos de variveis: Numricas, Booleanas e Strings. Como j era de se esperar, as variveis numricas so assim chamadas, pois armazenam nmeros, as Booleanas valores lgicos (True/False) e as Strings, seqncia de caracteres. As strings podem ser delimitadas por aspas simples ou duplas, a nica restrio que se a delimitao comear com as aspas simples, deve terminar com aspas simples, da mesma forma para as aspas duplas. Podem ser includos dentro de uma string alguns caracteres especiais, a saber:
\t - posiciona o texto a seguir, na prxima tabulao; \n - passa para outra linha; \f - form feed; \b - back space; \r - carrige return.
O JavaScript reconhece ainda um outro tipo de contudo em variveis, que o NULL. Na prtica isso utilizado para a manipulao de variveis no inicializadas sem que ocorra um erro no seu programa. Quando uma varivel possui o valor NULL, significa dizer que ela possui um valor desconhecido ou nulo. A representao literal para NULL a string 'null' sem os delimitadores. Quando referenciado por uma funo ou comando de tela, ser assim que NULL ser representado. Observe que NULL uma palavra reservada.
Voc pode trabalhar ainda com Arrays, mas para isso ser necessrio algum conhecimento sobre Programao Orientada a Objetos.
1.3) Operadores
Junto com funes e variveis, operadores so blocos de construo de expresses. Um operador semelhante a uma funo no sentido de que executa uma operao especfica e retorna um valor.
1.3.1) Operadores unrios e binrios

Todos os operadores em JavaScript requerem um ou dois argumentos, chamados operandos. Aqueles que requerem um operando apenas so denominados operadores ulnrios, e os que requerem dois operandos so chamados de operadores binrios.
1.3.2) Operador de String

Operador de concatenao (+) Exemplo:
Nome1="Jos" Nome2="Silva" Nome = Nome1+" da "+Nome2 // O resultado : "Jos da Silva"
1.3.3) Operadores Matemticos

Adio ( + ) Exemplo:
V01=5 V02=2 V=V01+V02 // resulta em: 7
Subtrao ( - ) Exemplo:
V01=5 V02=2 V=V01-V02 // resulta em: 3
Multiplicao ( * ) Exemplo:
V01=5 V02=2 V=V01*V02 // resulta em: 10
Diviso ( / ) Exemplo:
V01=5 V02=2 V=V01/V02 // resulta em: 2.5
Mdulo da diviso ou resto ( % ) Exemplo:

V01=5 V02=2 V=V01%V02 // resulta em: 1
Incremento ( ++ ) Pode acontecer de duas formas: ++Varivel ou Varivel++ Exemplo:

V01 = 5 V02 = ++V01 // Resulta em 6 V03 = V01 // Resulta em 6
Exemplo:
V01 = 5 V02 = V01++ // Resulta em 5 V03 = V01 // Resulta em 6
Decremento ( -- ): Pode acontecer de duas formas: --Varivel ou Varivel-Exemplo:

V01 = 5 V02 = --V01 // Resulta em 4 V03 = V01 // Resulta em 4
Exemplo:
V01 = 5 V02 = V01-- // Resulta em 5 V03 = V01 // Resulta em 4
1.3.4) Operadores relacionais

< Menor que > Maior que = = Igual != Diferente >= Maior ou igual <= Menor ou igual
1.3.5) Operadores lgicos

&& E lgico || Ou lgico
1.3.6) Operadores de atribuio

= Atribuir += Soma ou concatenao e atribuio: x+=5 // o mesmo que: x=x+5 -= Subtrao e atribuio. x-=5 // o mesmo que: x=x-5 *= Multiplicao e atribuio. x*=5 // o mesmo que: x=x*5 /= Diviso e atribuio. x/=5 // o mesmo que: x=x/5 %= Mdulo e atribuio. x%=5 // o mesmo que: x=x%5
2) Objetos
Quando compramos um televisor, recebemos um manual, que por mais simples que possa ser, traz sempre algumas especificaes tcnicas do aparelho. Por exemplo: Polegadas da tela, voltagem de trabalho, entre outras. Essas especificaes tcnicas transferido para o vocabulrio da OOP so as propriedades do objeto (televisor). Em JavaScript essas propriedades nada mais so do que variveis internas do objeto. Um objeto est sujeito a determinados mtodos. Um mtodo geralmente uma funo que gera alguma informao referente ao objeto. Por exemplo ao mudar de canal, ns estamos executando uma funo do televisor, o mesmo ocorre quando aumentamos ou diminumos o volume. Seguindo nosso exemplo, quando a tenso da rede sai da faixa de trabalho no caso de uma queda de tenso ou uma sobrecarga, o sistema de segurana da Tv, no permite que ocorram danos no aparelho, quando muito, queima o fusvel da fonte de alimentao. Em aparelhos mais modernos, quando uma emissora sai do ar, a tela fica azul, sem aquele chiado irritante. Sendo assim podemos concluir que nosso objeto est sujeito a algumas situaes, estas situaes podem ocorrer a qualquer momento, e so chamadas de eventos.
2.1) Criando Objetos

Trabalhar com objetos a nica forma de manipular os arrays, vejamos como: Digamos que queremos implementar uma lista de clientes, nosso objeto poderia ser definido assim:
Function CriaClientes(nome,endereco,telefone,renda) { this.nome=nome; this.endereco=endereco; this.telefone=telefone; this.renda=renda; }
A propriedade this especifica o objeto atual como sendo fonte dos valores passados a funo. Agora, basta criar o nosso objeto:
Maria = New CriaClientes('Maria Aparecida','Rua Guilhotina dos Patos, S/N','332-1148',1300)
Para acessar as propriedades do objeto Maria, basta usar a seguinte sintaxe:

Maria.nome - retorna 'Maria Aparecida' Maria.endereco - retorna 'Rua Guilhotina dos Patos, S/N' Maria.telefone - retorna '332-1148'
Maria.renda - retorna 1300
Uma outra forma de referenciar as propriedades do objeto Maria, :

Maria[0], Maria[1], Maria[2], Maria[3]
Uma forma mais prtica de criar arrays poderia ser a seguinte:

Function Matriz(n) { this.length=n for (var contador=1 ; contador <=n ; conatdor=contador+1) { this[contador]="" } }
Para criar nossa matriz usaramos o seguinte comando:

Mes=Matriz(12)
O prximo passo seria apenas incluir os dados:

Mes[1] = 'Janeiro' Mes[2]='Fevereiro' ... Mes[12]='Dezembro'
Podemos tambm utilizar os dois mtodos ao mesmo tempo!
Clientes=New Matriz(3) Clientes[1]=New CriaClientes("Charlene","Rua A, 51","331-0376",1150) Clientes[2]=New CriaClientes("Jos","Rua das Avencas, S/N","332-2781",950) Clientes[3]=New CriaClientes("Joaquim Manoel", "Rua Amancio Pinto, 171", ,1000)
Teramos agora:
Clientes[1].nome = "Charlene"; Clientes[2].telefone="332-2781" Clientes[3].telefone=null
3) Comandos
Alm das estruturas de controle, o JavaScript oferece alguns poucos comandos:
Break
Continue
Var
With
Function
Return
Comment
3.1) VAR
Em JavaScript, nem sempre necessrio definir uma varivel antes de utiliz-la, o que ocorre com variveis globais, porm, importante ressaltar que a utilizao da instruo var, a nvel de documentao muito bem-vinda. J nas definies de variveis locais, obrigatrio a utilizao da instruo var.
Voc pode armazenar um valor na prpria linha de definio da varivel, se no o fizer, para o JavaScript, esta varivel possui um valor desconhecido ou nulo. No obrigatria a utilizao de uma instruo var para cada varivel declarada, na medida do possvel, voc pode declarar vrias variveis em uma s instruo var.

Var NomeDaVarivel [ = <valor> ];

Var Contador = 0; Var Inic="",Tolls=0,Name="TWR"; Var Teste; // Neste caso, Teste possui valor null
3.2) with
Quando voc precisa manipular vrias propriedades de um mesmo objeto, provavelmente prefere no ser obrigado a repetir todas as vezes a digitao do nome do objeto. A instruo with, permite fazer isso eliminando a necessidade de digitar o nome do objeto todas as vezes.
Forma geral:
with (<objeto>) { ... Instrues }
Por exemplo vamos supor que ser necessrio executar uma srie de operaes matemticas:
with (Math) { a=PI; b=Abs(x); c=E; }
3.3) Break
Pode ser executado somente dentro de loops for... ou while... e tem por objetivo o cancelamento da execuo do loop sem que haja verificao na condio de sada do loop, passando a execuo a linha imediatamente posterior ao trmino do loop. Forma geral:
Break
Exemplo: Neste exemplo, quando a varivel x atinge o valor 5 o loop cancelado, e impresso o nmero 5 na tela.
For (var x=1 ; x < 10 ; x++) { If (x = = 5) { Break } }
document.write(x) // resulta: 5
3.4) Continue
Pode ser executado somente dentro de loops for... ou while ... e tem por objetivo o cancelamento da execuo do bloco de comandos passando para o incio do loop. Forma geral:
Continue
Exemplo:
Neste exemplo, sero impressos os nmeros de 1 a 10, com exceo do nmero 5, ou seja, quando a varivel x atinge o valor 5 a execuo do bloco de comandos interrompida e o controle retorna ao incio do loop, onde a varivel x ser incrementada. For (var x=1 ; x < 10 ; x++) { If (x = = 5) { continue } document.write(x) }
3.5) Funes
As funes podem ser definidas como um conjunto de instrues, agrupadas para executar uma determinada tarefa. Dentro de uma funo pode existir uma chamada a outra funo. Para as funes podem ser passadas informaes, as quais so chamadas de parmetros. As funes podem ou no retornar alguma informao, o que feito com o comando Return. A definio de uma funo feita da seguinte forma:
Function NomeDaFuno([ parametro1, parametro2, ..., parametroN ]) { ... [Return(ValorDeRetorno)] }
A chamada de funes feita da seguite forma:

NomeDaFuno([parmetros])
Funes so melhor declaradas entre as tags <head> de sua pgina HTML. Funes so frequentemente chamadas por eventos acionados pelo usurio. Assim parece razovel colocar as funes entre as tags <head>. Elas so carregadas antes que o usurio faa alguma coisa que possa chamar uma funo.
<html> <head> <script language="LiveScript"> Function hello(){ alert("Al mundo!!!"); } </script> </head> <body> ... <script>hello();</script> ... </body> </html>
!"$#&%'(#)*)+,.-(/01- 2$43)5,7684,95/$:);5;66,#$/<)5,=>.?/$@BA0/$C"$#7"# !#.6,DE$8$F,-;G8,.)8H
3.6) Comentrios
Comentrios podem ser formulados de varias maneiras, dependendo do efeito que voc precisa. Para comentrios longos de vrias linhas, ou blocos de comentrios, use: /* O barra-asterisco inicia um bloco de comentrio que pode conter quantas linhas voc precisar todo o texto aps o barra asterisco ignorado, at que asterisco-barra seja encontrado, terminando assim o bloco de comentrio */ Para comentrios de uma linha, use barra dupla (//) para introduzir o comentrio. Todo o texto seguindo este simbolo at o prximo carrige-return ser considerado um comentrio e ignorado para fins de processamento. Exemplo: // este texto ser tratado como comentrio
Os cdigos JavaScript podem ser colocados em campos de comentrio de modo que browsers antigos no mostrem o prprio cdigo JavaScript, como vemos a seguir:
<html> <head> <script language="LiveScript">  </script> </head>
<body> ... <script>hello();</script> ... </body> </html>
3.7) Estruturas de Controle

Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execuo de um programa. Estas estruturas permitem executar o cdigo baseado em condies lgicas ou um nmero determinado de vezes.
For...

For...In
If...Else...
While...
3.7.1) For...
Repete uma seo do cdigo um determinado nmero de vezes. Consiste de uma declarao que define as condies da estrutura e marca seu incio. Esta declarao seguida por uma ou mais declaraes executveis, que representam o corpo da estrutura. Estabelece um contador inicializando uma varivel com um valor numrico. O contador manipulado atravs da <ao> especificada no comando toda a vez que o loop alcana seu fim, permanecendo nesse loop at que a <condio> seja satisfeita ou a instruo Break seja executada.
Forma geral:
For (<inicializao> ; <condio> ; <ao>) { Corpo da Estrutura }
No exemplo abaixo, o bloco de instrues ser executado 10 vezes, pois a varivel contador inicializada com o valor 1 e o bloco de instrues ser executado enquanto contador for menor que 11. A cada execuo do bloco de instrues contador incrementado.
For (var contador = 1; contador < 11; contador++) { document.write(Contador); }
3.7.2) For...In
Este comando tem por objetivo, procurar a ocorrncia de uma varivel, dentro das propriedades de um objeto, ao encontrar a referida varivel, um bloco de comandos pode ser executado. Forma geral:
For (variavel In objeto) { bloco de comandos }
Exemplo: Esta funo procura por uma propriedade do Objeto, cujo o nome esteja especificado pela varivel Procura, onde Nome uma string correspondendo ao nome do objeto.
Function SearchIn(Procura,Objeto,Nome) { Var ResultadoDaBusca = "" For (Procura In Objeto) { document.write(Nome+"."+Procura+"="+Objeto[Procura]+"<BR>"); } }
3.7.3) If...Else...
A estrutura If... executa uma poro de cdigo se a condio especificada for verdadeira. A estrutura pode tambm ser especificada com cdigo alternativo para ser executado se a condio for falsa.
Function VerificaIdade(anos) { If anos >= 16 { Return ('J pode votar!') } else { Return (' Ainda muito cedo para votar...') } }
Uma alternativa para economizar If's seria a utilizao de uma expresso condicional, que funciona para situaes mais simples, o exemplo acima ficaria da seguinte forma:
VariavelDeRetorno= (anos>=16) ? 'J pode votar!' : 'Ainda muito cedo para votar...'
3.7.5) While
Outro tipo de loop aquele baseado numa condio ao invs de no nmero de repeties. Por exemplo, suponha que voc necessita que um determinado processo seja repetido at que um determinado teste d um resultado verdadeiro ou seja executada a instruo Break. Forma geral:
while (<condio>) { Corpo da Estrutura }
No exemplo abaixo, o bloco de instrues ser executado 10 vezes, pois a varivel Contador inicializada com o valor 1 e o bloco de instrues ser executado enquanto Contador for menor que 11. A cada execuo do bloco de instrues Contador incrementado.
Var Contador=1; While ( Contador < 11 ) { document.write(Contador++) ;}
4) Funes internas
A linguagem JavaScript alm dos recursos descritos anteriormente, ainda possui algumas funes internas, que no esto ligadas diretamente a nenhum objeto, porm isso no impede que essas funes recebam objetos como parmetros. A seguir estas funes sero vistas detalhadamente: alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK. Ex:
alert('Esta uma janela de alerta!')
confirm - Mostra uma caixa de dilogo, seguida de um sinal sonoro e os boto de OK e Cancel. Retorna um valor verdadeiro se o usurio escolher OK.
Ex: retorno=confirm('Deseja prosseguir?')
escape - Obtm o cdigo ASCII de um caracter que no seja alfa-numrico.

Ex: document.write(escape("@"))
eval - Avalia uma expresso numrica, retornando um resultado tambm numrico.

Ex: document.write(eval(10*9*8*7*6*5*4*3*2))
parseFloat - Converte uma string que representa um nmero, para um nmero com ponto flutuante. Caso a string no possa ser avaliada, a funo retorna 0.
Ex: document.write(parseFloat("-32.465e12")
parseInt - Converte uma string, que representa um nmero em uma base predefinida para base 10. Caso a string possua um caracter que no possa ser convertido, a operao para, retornando o valor antes do erro.
Ex: paseInt("string",base) parseInt("FF",15) // retorna 256 parseInt("3A",10) // retorna 3 parseInt("10",2) // retorna 2
prompt - Monta uma caixa de entrada de dados, de forma simplificada comparando-se com o objeto text.
Ex: prompt(label [,valor])
onde: label - texto que aparece ao lado da caixa. valor - o contedo inicial da caixa.
5) Objetos JavaScript
JavaScript organiza todos os elementos de uma Home Page dentro de uma hierarquia. Cada elemento visto como um objeto. Os objetos podem ter propriedades, mtodos e responder a certos eventos. Por isso muito importante entender a hierarquia dos objetos HTML. Voc entender rapidamente como isto funciona com a ajuda de um exemplo. O exemplo seguinte uma pgina HTML simples:
No exemplo acima, ns temos, um link, duas imagens, e um formulrio com dois campos texto e dois botes. Do ponto de vista do JavaScript a janela do browser um objeto window, que contm certos elementos, como a barra de status. Dentro da janela, ns podemos carregar uma pgina HTML. Esta pgina um objeto document. Desta forma o objeto document representa o documento HTML (que est carregado no momento). O objeto document muito importante, em JavaScript voc sempre o usar muito. As propriedades e mtodos do objeto document sero vistas detalhadamente, mais adiante.
Mas o que mais importante que todos os objetos HTML so propriedades do objeto document. Um objeto HTML pode ser por exemplo um link ou um formulrio. Ns podemos obter informaes de diversos objetos e ento manipul-los. Para isso ns devemos saber como acessar os diferentes objetos. Voc primeiro verifica o nome do objeto no diagrama de hierarquia. Se voc ento precisar saber como referenciar a primeira imagem na pgina HTML, basta seguir o caminho hierrquico. Voc deve percorrer o diagrama de cima para baixo, o primeiro objeto chamado document, a primeira imagem representada por Imagem[0]. Desta forma ns podemos acessar este objeto em JavaScript, da seguinte forma: document.Imagem[0]. Se voc quiser saber o que o usurio digitou dentro do primeiro elemento do formulrio, voc primeiro precisa pensar em como acessar esse objeto. Novamente ns seguiremos o diagrama de hierarquia, de cima para baixo. Siga o caminho que leva at Elem[0]. Todos os nomes de objeto por onde voc passou tem que constar na referncia ao primeiro elemento do formulrio. Desta forma voc pode acessar o primeiro elemento texto assim: document.Form[0].Elem[0] Mas como obteremos agora, o texto digitado? Este elemento texto possui uma propriedade chamada value - no se preocupe agora, com propriedades, mtodos ou eventos, eles sero vistos detalhadamente mais adiante - esta propriedade armazena o contedo do objeto, ou seja, o texto digitado. A seguinte linha de cdigo obtm o texto digitado:
nome = document.forms[0].elements[0].value;
A string armazenada na varivel name. Ns podemos agora trabalhar com esta varivel. Por exemplo, ns podemos criar uma janela popup com alert("Oi "+name);. Se a entrada for "Anderson" o comando alert("Oi "+name) abrir uma janela popup com o texto "Oi Anderson". Se voc estiver trabalhando com pginas muito grandes pode ficar um pouco confuso referenciar objetos diretamente pelo endereamento do diagrama de hierarquia, voc pode ter referncias do tipo: document.forms[3].elements[15] ou document.forms[2].elevent[21]. Para evitar esse problema voc pode dar nomes diferentes aos objetos, vejamos o seguinte fragmento de um documento HTML:
<form NAME="clientes"> Nome: <input TYPE="text" NAME="empresa" value=" "> ...
Dessa forma, em vez de usarmos, por exemplo:

document.forms[0].elements[0].value;
Podemos usar:
document.clientes.empresa.value;
Isto traz muitas facilidades, especialmente com pginas grandes e com muitos objetos. Observe que a caixa das letras faz diferena. Muitas propriedades dos objetos JavaScript no so apenas para leitura, voc pode atribuir novos valores a algumas propriedades. Observe o exemplo:
Location
Este objeto contm informaes sobre a URL da pgina atual. Forma geral:
location.propriedade location.metodo()
Propriedades: hash - Esta propriedade funciona de forma semelhante ao famigerado "go to" de algumas linguagens de programao. Normalmente usado em links, que acessam a mesma pgina. Ex: O exemplo abaixo demonstra a utilizao da propriedade hash, para criar um link para outro trecho da mesma pgina.
<HTML> ... <A HREF = "location.hash='2'">Item 1</A> ... <A NAME = "1"> </A>Item 1 ... <A NAME = "2"> </A>Item 2 ... </HTML>
host - Armazena uma string com o formato "hostname:port" da pgina HTML atual.
Ex: alert('Demostrao da propriedade host: '+location.host)
hostname - Armazena uma string, com o IP da pgina HTML atual.

Ex: alert('Demostrao da propriedade hostname: '+location.hostname)
href - String identica a mostrada na barra "location" do browser.

Ex: alert('A URL desta pgina : '+ location.href)
pathname - Contm uma string com o path da pgina HTML atual.

Ex: alert('O path da URL desta pgina : '+ location.pathname)
port - Armazena a porta por onde est sendo feita a conexo com o servidor.
Ex: alert('A porta usada para conexo com o servidor : '+ location.port)
protocol - String que armazena o protocolo de acesso a um determinado endereo. ("http:","ftp:","file:").

Ex: alert('O protocolo de acesso para esta pgina : '+ location.protocol)
Mtodos: toString - Converte o contedo do objeto location para uma string.

Ex: alert('location.toString() = '+location.toString) // Este valor o mesmo que location.href.
5.1) Select
Cria uma listBox, no mesmo padro que no Windows. Onde o usurio pode selecionar uma ou mais opes disponveis, depende da configurao desejada pelo programador. Forma geral:
<SELECT NAME = "selectName" [SIZE = tamanho] [MULTIPLE] [onBlur = "ao"] [onChange = "ao"] [onFocus = "ao"] >
<OPTION VALUE = "optionValue" [SELECTED] > Texto ... <OPTION...> </SELECT>
onde: selectName - Nome dado pelo programador, para o objeto select tamanho - Nmero de linhas, da caixa select. MULTIPLE - Se definido, permite que vrias opes sejam selecionadas. ao - Define o que fazer quando algum evento ocorrer. optionValue - Valor que enviado as servidor, quando o formulrio submetido. SELECTED - Se definido, informa a opo que ser inicialmente selecionada.
Propriedades: lenght - Informa o nmero de opes disponveis.

Ex: selectName.lenght
name - Informa o nome que o programador definiu para o objeto select.

Ex: selectName.name
options - Vetor com todas as opes existentes no menu select.

Ex: selectName.options[0..selectName.lenght-1]
selectedIndex - Informa o ndice do tem que est selecionado.

Ex: selectName.selectedIndex
defaultSelected - Informa o tem que detm a seleo inicial. Pode-se alterar este valor, dede que o formulrio ainda no tenha sido exibido.
Ex: selectName.options[Indice].defaultSelected
index - Obtm o nmero do ndice de uma opo em um menu select.

Ex: selectName.options[Indice].index
selected - Valor lgico referente a opo em questo. Se a opo estiver selecionada, retorna "1", caso contrrio, retorna "0".
Ex: selectName.options[indice].selected
text - Armazena o texto que aparece como opo do menu select. Este texto definido aps a TAG <OPTION>.
Ex: selectName.options[indice].text
value - Armazena o campo VALUE, que enviado ao servidor quando o formulrio submetido (enviado). Eventos: onBlur - Ocorre quando o objeto perde o foco. onChange - Ocorre quando o objeto perde o foco e seu contedo foi alterado. onFocus - Ocorre quando o objeto recebe o foco.
5.2) Button
Este objeto mostra um boto 3-D (no mesmo padro do Windows). ao ser pressionado, ele produz um efeito de profundidade e geralmente chama uma funo. Pode ser utilizado para inmeras aplicaes, dependendo apenas de sua imaginao, a nica precauo defini-lo dentro de um formulrio. Forma geral:
<Input Type="button" Name="NomeDoBoto" Value="Rtulo" onClick="RespostaAoEvento">
Onde:
Type - define o objeto
Name - define o nome do objeto para nossa aplicao. por este nome que referenciamos alguma propriedade deste objeto Value - define o que ser escrito na face do boto onClick - o nico evento possvel para este objeto, normalmente define uma funo a ser executada quando clicamos no boto. Propriedades: NAME: Informa o nome do objeto button em forma de string, da mesma forma como definido no campo Name que foi utilizado na definio do boto. importante no confundir o campo Name com a propriedade NAME, veja a diferena:
<input type="button" name="OK" value="Confirma" onClick="ConfirmaInformacoes()"> OK.Name // equivale a "OK"
VALUE: Informa o label do boto em forma de string da mesma forma como foi definido no campo Value que foi utilizado na definio do boto.
OK.Value // equivale a "Confirma"
Mtodos: click: Este mtodo simula um clique do mouse no objeto button, ou seja, executa um procedimento associado a um boto como se o boto tivesse sido pressionado mas sem que o usurio tenha realmente clicado.
OK.click() // executaria a funo ConfirmaInformacoes
Eventos associados: onClick: Define o que fazer quando clicamos no objeto button Exemplo:
<FORM> <INPUT TYPE="button" VALUE="Clique aqui!!!" NAME="botao1" onClick="alert('A propriedade NAME deste boto :'+botao1.name+'\nA propriedade VALUE deste boto :'+botao1.value)")> </FORM>
5.3) Navigator
Neste objeto ficam armazenadas as informaes sobre o browser que est sendo utilizado. Forma geral:
Navigator.propriedade
Propriedades: appCodeName - Armazena o codnome do browser.

Ex: Navigator.appCodeName
appName - Armazena o nome do browser.

Ex: Navigator.appName
appVersion - Armazena a verso do browser.

Ex: Navigator.appVersion
userAgent - Armazena o cabealho (user-agent) que enviado para o servidor, no protocolo HTTP, isto serve para que o servidor identifique o software que est sendo usado pelo cliente.
Ex: Navigator.userAgent
Exemplo:
<HTML> <HEAD> <TITLE>JavaScript </TITLE> <SCRIPT> <!-function getBrowserName() {
document.forms[0].elements[0].value =navigator.appName; }
function getBrowserVersion() { document.forms[0].elements[0].value = navigator.appVersion; }
function getBrowserCodeName() { document.forms[0].elements[0].value = navigator.appCodeName; }
function getBrowserUserAgent() { document.forms[0].elements[0].value = navigator.userAgent; }
function getBrowserNameVersion() { document.forms[0].elements[0].value = navigator.appName + " " + navigator.appVersion; } // --> </SCRIPT> </HEAD> <BODY > <CENTER> <FORM NAME="detect"> <INPUT TYPE="text" NAME="browser" SIZE=50 MAXLENGTH=50 VALUE=" Seus dados sero mostrados nesta janela ! "> <BR><BR><BR> <INPUT TYPE="button" VALUE="Nome do Navegador" onClick="getBrowserName()"> <INPUT TYPE="button" VALUE="Verso do Navegador" onClick="getBrowserVersion()"> <INPUT TYPE="button" VALUE="E-mail" onClick="getBrowserCodeName()"> <BR><BR> <INPUT TYPE="button" VALUE="E-mail e verso" onClick="getBrowserUserAgent()"> <BR> <BR> <INPUT TYPE="button" VALUE="Nome e Verso" onClick="getBrowserNameVersion()"> </FORM> </BODY> </HTML>
5.4) Form
Os formulrios tem muitas utilidades, uma das principais seria a transferncia de dados dentro da prpria pgina HTML, sem que para isso seja necessria a interveno de qualquer outro meio externo. Ao se criar um formulrio na pgina HTML, automaticamente criada uma referncia para este formulrio, que fica guardada na propriedade form do objeto document. Como voc deve ter visto na pgina
que trata do objeto document, a propriedade form um vetor, e a cada formulrio criado tambm criado um novo elemento para este vetor, o ndice inicial deste vetor 0 (zero) e varia at o nmero de formulrios do documento -1. Como voc pode notar, cada formulrio criado em uma pgina HTML, considerado um objeto distinto, tendo suas prprias referncias, mtodos, propriedades e eventos associados. A forma de acessarmos diferenciadamente esses formulrios dentro da pgina HTML, utilizar a propriedade form do objeto document. Forma geral:
<FORM NAME="Nome"] [ACTION="URL"] [METHOD="GET | POST"] [onSubmit="evento"]>
Onde: Nome = Nome do formulrio, para futuras referncias dentro da pgina HTML. URL = Especifica o URL do servidor ao qual sera enviado o formulario. GET | POST = metodos de transferencia de dados do browser para o servidor Propriedades: action - Especifica o URL do servidor ao qual sera enviado o formulario.
Ex: document.NomeDoFormulario.action
documet.GuestBook.action = "esaex@canudos.ufba.br"
elements - Vetor que armazena todos os objetos que so definidos dentro de um formulrio (caixas de texto, botes, caixas de entrada de dados, checkboxes, botes de rdio). O nmero de elementos deste vetor varia de 0 (zero) at o nmero de objetos dentro do formulrio -1.
Ex: document.NomeDoFormulario.elements[indice]
method - Seleciona um mtodo para acessar o URL de ao. Os mtodos so: get e post. Ambos os mtodos transferem dados do browser para o servidor, com a seguinte diferena: method=get - os dados de entrada so acrescentados ao endereo (URL) associado, como se fossem uma query (pesquisa a banco de dados) comum; method=post - os dados no so acrescentados ao URL, mas fazem parte do corpo da mensagem enviada ao servidor.
Obs.: O mtodo mais usual o post: Esta propriedade pode ser alterada, porm s surtir efeito antes que o formulrio seja mostrado na tela.
Ex: document.NomeDoFormulario.method = "post" ( ou "get")
Mtodos: submit - Transfere os dados do formulrio para o endereo especificado em action, para serem processados. Funcionado de maneira anloga ao boto submit em HTML.
Ex: document.NomeDoFormulario.submit( )
Eventos: onSubmit - Ocorre quando um boto do tipo submit recebe o clique do mouse, transferindo os dados de um formulrio para o servidor especificado em action. Os dados s so enviados se o evento receber um valor verdadeiro (true), valor este que pode ser conseguido como resultado a chamada de uma funo que valida as informaes do formulrio.
Ex: document.NomeDoFormulario.onSubmit ="return Valida_Informacoes(NomeDoFormulario)"
Exemplo:
<HTML> <HEAD> <TITLE>Exemplo - Objeto Form</TITLE> </HEAD> <BODY> <FORM action="mailto:esaex@canudos.ufba.br" method="POST"> <P><TT><B><H1>Exemplo:</H1></B></TT> <P>Este exemplo demonstra a funcionalidade de um formulário, para improvisar um "Guest Book" <P> Nome,Nascimento: <BR> <INPUT TYPE="text" NAME="nomidade" VALUE=" " SIZE=70><BR> Endereço: <BR> <INPUT TYPE="text" NAME="endereco" VALUE=" " SIZE=70><BR> E-Mail: <BR> <INPUT TYPE="text" NAME="email" VALUE=" " SIZE=70><BR>
Sua Home-Page: <BR> <INPUT TYPE="text" NAME="hp" VALUE=" " SIZE=70><BR> IRC: <BR> <INPUT TYPE="text" NAME="irc" VALUE=" " SIZE=70><BR> Sugestões, etc.: <BR> <TEXTAREA NAME="sujestao" ROWS=7 COLS=70></TEXTAREA> <P><CENTER><INPUT TYPE="submit" NAME="Submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Limpar"></CENTER> </FORM> <CENTER> <FORM> <INPUT TYPE="button" VALUE="Pgina Anterior" onClick="history.go(-1)"> <IMG SRC="S177.gif" WIDTH=540 HEIGHT=46 ALIGN=bottom><BR> <FONT SIZE="-2">Página desenvolvida por </FONT><FONT SIZE="-2"><A HREF="mailto:esaex@canudos.ufba.br">Anderson Barros Torres</A></FONT><FONT SIZE="-2">. Julho/97</FONT> </FORM> </CENTER> </BODY> </HTML>
5.5) CheckBox
Este objeto como o prprio nome sugere, exibe uma caixa de checagem igual s que encontramos no Windows, o funcionamento tambm o mesmo: a condio de selecionada ou no, alternada quando clicamos o mouse sobre o objeto, ou seja, se clicarmos sobre um objeto checkbox j marcado ele ser automaticamente desmarcado, ao passo que se clicarmos em um objeto checkbox desmarcado ele ser automaticamente marcado. Forma geral:
<FORM> <INPUT TYPE="checkbox" NAME="NomeDoObjeto" [CHECKED] VALUE="Label" onClick="Ao"> </FORM>
Onde: Type - Nome do objeto; Name - Nome dado pelo programador, para futuras referenciaes ao objeto; CHECKED - Se especificado a CheckBox j vai aparecer selecionada; Value - Define um rtulo para a CheckBox. onClick - Define o que fazer quando d-se um clique na CheckBox, fazendo com que o objeto CheckBox funcione como um objeto Button.
Propriedades: name - Nome do objeto CheckBox em forma de string, da mesma forma como definido no campo Name utilizado na criao da CheckBox.
NomeDoObjeto.name // equivale a string "NomeDoObjeto"
value - Armazena o contedo do campo VALUE, definido na TAG.

NomeDoObjeto.value
checked - Retorna um valor lgico que depende do estado do objeto CheckBox

NomeDoObjeto.checked // equivale a True se o objeto selecionado e False caso contrrio
defaultChecked - Informa/Altera o estado default de um objeto CheckBox. Com relao a alterao, somente os objetos CheckBox ainda no exibidos podem ter seu estado default alterado.
NomeDoObjeto.defaultChecked // equivaler a True, se a clusula CHECKED estiver presente e a False caso contrrio
Mtodos: click: este mtodo simula um clique do mouse no objeto CheckBox, ou seja, executa um procedimento associado a uma CheckBox como se estivssemos clicado na CheckBox mas sem que o usurio tenha realmente clicado.
Select01.click() // executaria uma funo
Eventos associados: onClick: Define o que fazer quando clicamos no objeto CheckBox Exemplo:
<HTML> <HEAD> <TITLE>Exemplo CheckBox</TITLE> <SCRIPT> function exemplo(p1,p2,p3,p4){ alert('Veja os contedos das propriedades: \nName='+p1+ '\nValue='+p2+ '\nChecked='+p3+ '\ndefaultChecked='+p4); } </SCRIPT>
</HEAD> <BODY> <CENTER> <H3>Exemplo do objeto CheckBox</H3> <HR> <FORM> <INPUT TYPE="checkbox" NAME="chb" VALUE="QQ COISA" CHECKED onClick="exemplo(chb.name,chb.value,chb.checked,chb.defaultChecked)")> Tecle aqui... </FORM> <BR><HR><BR> Tecle no CheckBox para observar o funcionamento!!! Para retornar clique o mouse <A HREF="history.go(-1)">AQUI</A> </CENTER> </BODY> </HTML>
5.6) Document
Este objeto armazena todas as caractersticas da pgina HTML, como por exemplo: cor das letras, cor de fundo, figura que aparecer como papel de parede, etc. Sempre que inclumos alguma declarao no <body> do documento, estamos alterando o objeto Document. Forma geral:
<body [background="imagem"] [bgcolor="#cordefundo"] [fgcolor="#cordotexto"] [link="#cordoslinks"] [alink="#cordolinkativado"] [vlink="#cordolinkvisitado"] [onload="funo"] [onunload="funcao"]>
Onde: Imagem = figura no formato GIF, que servir como papel de parede para a Home Page; #Cor... = nmero (hexadecimal), com seis dgitos, que corresponde a cor no formato RGB, o "#" obrigatrio. Os dois primeiros dgitos correspondem a R (red), os dois do meio a G (green) e os dois ltimos a B (blue). A combinao dos trs, forma a cor no formato RGB. funo = Nome de uma funo pr-definida, que ser chamada quando o evento ocorrer.
Propriedades: alinkColor - Determina a cor do link enquanto o boto do o mouse estiver pressionado sobre ele.
Ex: document.alinkColor="#FFFFFF"
anchors - Vetor que armazena as ncoras definidas em uma pgina HTML com o comando <A NAME="ancora"> . Esta propriedade somente para leitura, no pode ser alterada.
Ex: document.anchors[ndice]
bgColor - Determina a cor de fundo da pgina HTML.

Ex: document.bgColor="#000000"
cookie - Os cookies so pequenos arquivos que alguns sites da Web gravam no computador dos visitantes. A idia identificar o usurio, anotar quais caminhos ele j percorreu dentro do site e permitir um controle mais eficaz dos espectadores. fgColor - Determina a cor das letras em uma pgina HTML. Esta propriedade no altera o que j est impresso na pgina HTML.
Ex: document.fgColor="#0000FF"
forms - Vetor que armazena as referncias aos formulrios existentes na pgina HTML. Esta propriedade somente para leitura, no pode ser alterada.
Ex: document.forms[ndice]
lastModified - Obtm a data da ltima atualizao da pgina HTML. Esta propriedade somente para leitura, no pode ser alterada.
Ex: document.lastModified
linkColor - Determina a cor dos links que ainda no foram visitados pelo usurio.
Ex: document.linkColor = "#00FF00"
links - Vetor que armazena os links definidos em uma pgina HTML. Esta propriedade somente para leitura, no pode ser alterada.
Ex: document.links[ndice]
location - Armazena o endereo (URL) atual em forma de string. Esta propriedade somente para leitura, no pode ser alterada.
referrer - Armazena o endereo (URL) de quem chamou a pgina HTML atual. Com essa propriedade voc pode saber como usurio chegou sua pgina. Esta propriedade somente para leitura, no pode ser alterada.
Ex: document.referrer
title - Armazena uma string com o ttulo da pgina HTML atual. Esta propriedade somente para leitura, no pode ser alterada.
Ex: document.title
vlinkColor - Determina a cor que o link aparecer aps ser visitado.

Ex: document.vlinkColor = "#80FF80"
Mtodos: clear - limpa a tela da janela atual.

Ex: document.clear( )
open - Abre um documento e envia (mas no exibe) a sada dos mtodos write/writeln. Os dados enviados so exibidos, quando encontrado o mtodo close.
Ex: document.open( )
close - Termina uma seqncia iniciada com o mtodo open, exibindo o que tinha sido apenas enviado.
Ex: document.close( )
write - Imprime informaes na pgina HTML.

Ex: document.write("Qualquer coisa" [,varivel] [,..., expresso])
writeln - Imprime informaes na pgina HTML e passa para a prxima linha. Em meus testes, esse mtodo no apresentou diferena com relao ao mtodo write.
Ex: document.writeln("Qualquer coisa" [,varivel] [,..., expresso])
Eventos: onLoad - Ocorre assim que um browser carrega uma pgina HTML ou frame.
Ex: <BODY ... onLoad='alert("Oi!!!")'>
onUnload - Ocorre quando se abandona uma pgina HTML ou frame.

Ex: <BODY ... onUnload='alert("Tchau!!!")'>
5.7) Date
Objeto muito til que retorna a data e hora do sistema no seguinte formato: Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano. Como todo objeto, podem ser criadas novas instncias para este objeto, essa prtica possibilita a utilizao de quantos objetos data voc precisar. Forma geral:
NovoObjeto = NEW date( )
Onde: NovoObjeto = Objeto definido pelo usurio, para manipular datas. Mtodos: getMonth - Obtm o nmero do ms. Retornando um valor entre 0 e 11. ( janeiro=0)
Ex: Mes=NovoObjeto.getMonth( )
setMonth - Estabelece um novo valor para o ms. O valor deve estar entre 0..11
Ex: NovoObjeto.setMonth(NumeroDoMes)
getDate - Obtm o nmero do dia, considerando-se o ms. Retornando um valor numrico entre 1..31.
Ex: dia = NovoObjeto.getDate( )
setDate - Estabelece um novo valor para o dia do ms. Este valor deve estar entre 1..31
Ex: NovoObjeto.setDate(NumeroDoDia)
getDay - Obtm o nmero do dia, considerando-se a semana. Retornando um valor numrico entre 0..6. Lembre-se de que a semana comea no domingo, logo 0, corresponde ao domingo.
Ex: DiaDaSemana = NovoObjeto.getDay( )
getHours - Obtm um nmero correspondente a hora. Retornando um valor numrico entre 0..23
Ex: Hora = NovoObjeto.getHours( )
setHours - Estabelece um novo valor para a hora. O valor deve estar entre 0..23
Ex: NovoObjeto.setHours(NovaHora)
getMinutes - Obtm um nmero correspondente aos minutos. Retornando um valor numrico entre 0..59
Ex: Minutos = NovoObjeto.getMinutes( )
setMinutes - Estabelece um novo valor para os minutos. O valor deve estar entre 0..59
Ex: NovoObjeto.setMinutes(Minutos)
getSeconds - Obtm um nmero correspondente aos segundos. Retornando um valor numrico entre 0..59
Ex: Segundos = NovoObjeto.getSeconds( )
setSeconds - Estabelece um novo valor para os segundos. O valor deve estar entre 0..59
Ex: NovoObjeto.setSeconds(Segundos)
getTime - Obtm o tempo decorrido desde 01/01/70 at o presente momento. O nico inconveniente que esta data dada em miliSsegundos.
Ex: TempoDecorrido=NovoObjeto.getTime( )
setTime - Estabelece uma nova data.

Ex: DataDeNascimento=New Date("August 2, 1970")
uma outra forma para definir a data seria:

OutraForma = New Date( ) OutraForma.setTime(DataDeNascimento.getTime( ))
getTimezoneOffset - Obtm a diferena entre o horrio local e o horrio do meridiano central (Greenwich). Este tempo dado em minutos, logo, para saber o fuso-horrio, deve-se dividir o resultado obtido por esta funo por 60.
Ex: FusoHorrio=NovoObjeto.getTimezoneOffset( ) / 60
getYear - Obtm um valor numrico correspondente ao ano.

Ex: Ano=NovoObjeto.getYear ( )
setYear - Estabelece um novo valor ao ano. O valor deve ser maior ou igual a 1900.
Ex: NovoObjeto.setYear(1997)
toGMTstring - Converte um objeto data para uma string seguindo o padro Internet GMT.
Ex: NovoObjeto.toGMTstring( )
toLocaleString - Converte uma data para uma string seguindo o padro local.
Ex: NovoObjeto.toLocalString( )
Exemplo:
<HTML> <HEAD> <TITLE>Exemplo - Objeto Date</TITLE> <SCRIPT> <!-var timerID = null; var timerRunning = false; function startclock () { stopclock(); time(); }
function stopclock () { if(timerRunning) clearTimeout(timerID); timerRunning = false; }
function time () { var now = new Date(); var yr = now.getYear(); var mName = now.getMonth() + 1; var dName = now.getDay() + 1; var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate(); var ampm = (now.getHours() >= 12) ? " P.M." : " A.M." var hours = now.getHours(); hours = ((hours > 12) ? hours - 12 : hours); var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes(); var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds(); if(dName==1) Day = "Domingo"; if(dName==2) Day = "Segunda"; if(dName==3) Day = "Tera"; if(dName==4) Day = "Quarta"; if(dName==5) Day = "Quinta"; if(dName==6) Day = "Sexta";
if(dName==7) Day = "Sabado";
if(mName==1) Month="Janeiro"; if(mName==2) Month="Fevereiro"; if(mName==3) Month="Maro"; if(mName==4) Month="Abril"; if(mName==5) Month="Maio"; if(mName==6) Month="Junho"; if(mName==7) Month="Julho"; if(mName==8) Month="Augosto"; if(mName==9) Month="Setembro"; if(mName==10) Month="Outubro"; if(mName==11) Month="Novembro"; if(mName==12) Month="Dezembro";
var DayDateTime=(" " + Day + ", " + dayNr + " de " + Month + " de " + "" + "19" + yr + ". Agora so:" + hours + minutes + seconds +"" + ampm );
window.status=DayDateTime; timerID = setTimeout("time()",1000); timerRunning = true; }
function clearStatus() { if(timerRunning) clearTimeout(timerID); timerRunning = false; window.status=" "; } //--> </SCRIPT>
</head> <BODY BACKGROUND="b190.gif" onLoad="startclock ()"> <H1>Exemplo:</H1> Demonstrao do objeto Date, conforme visto na pgina anterior. Funcionamento: a data e hora ficam sendo mostradas no rodap do browser. <FORM> <CENTER> <BR> <INPUT TYPE="button" VALUE="Pgina Anterior" onClick="history.go(-1)"> </CENTER> </FORM> <CENTER> <IMG SRC="S177.GIF"><BR> <H6>Pgina desenvolvida por <A HREF="mailto:webmaster.@areainicial.zzn.com"> Fernando Dercoli </A>. Julho/97</H6> </CENTER> </BODY> </HTML>
5.8) History
Este objeto armazena todas as URL das pginas HTML por onde o usurio passou durante a sesso atual do browser. uma cpia das informaes armazenadas na opo Go da barra de menu do Navigator. Forma geral:
history.propriedade history.mtodo
Propriedades: lenght - Informa a quantidade de pginas visitadas.

Ex: history.lenght
Mtodos: back - Retorna pgina anterior, de acordo com a relao de pginas do objeto history. Equivale a clicar o boto back do browser.
Ex: history.back()
forward - Passa para a prxima pgina, de acordo com a relao de pginas do objeto history. Equivale a clicar o boto forward do browser.
Ex: history.forward()
go - Permite que qualquer URL que esteja presente na relao de pginas visitadas do objeto history, seja carregada.
Ex: history.go(parmetro)
Existem duas possibilidades para "parmetro": 1 - parmetro um nmero: Ao definir um nmero, este deve ser inteiro. Se for positivo, a pgina alvo est "parmetro"pginas frente. Ao passo que se for negativo, a pgina alvo est "parmetro" pginas para traz. 2 - parmetro uma string: Neste caso, o alvo a URL que mais se assemelhe ao valor da string definida por "parmetro".
5.9) Window
o objeto que ocupa o topo do esquema hierrquico em JavaScript. Propriedades: defaultStatus - Determina o contedo padro da barra de status do browser, quando nada de importante estiver acontecendo.
Ex: widow.defaultStatus='Qualquer coisa'
frames - Vetor que armazena as referncias para as frames da janela atual.

Ex: parent.frames.lenght // obtm o nmero de frames da janela principal, assumindo que estamos em uma frame.
parent - Refere-se a janela pai da frame atual. self - Refere-se a janela atual.
Ex: self.defaultStatus='Qualquer coisa'
status - Define uma mensagem que ir aparecer no rodap do browser, em substituio por exemplo, a URL de um link, quando estivermos com o mouse sobre o link.
Ex: window.status="qualquer texto"
top - Refere-se a janela de nvel mais alto do esquema hierrquico do JavaScript.

Ex: top.close() // fecha a janela principal do browser
window - Refere-se a janela atual. Funciona de modo anlogo a self.

Ex: window.status='Qualquer coisa'
Mtodos: alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK.
Ex: alert('Esta uma janela de alerta!')
close - Termina a sesso atual do browser.

Ex: top.close()
confirm - Mostra uma caixa de dilogo, seguida de um sinal sonoro e os boto de OK e Cancel. Retorna um valor verdadeiro se o usurio escolher OK.
Ex: retorno=confirm('Deseja prosseguir?')
open - Abre uma nova sesso do browser, como se o usurio pressionasse <CTRL>+N
Ex: window.open("URL", "Nome" [,"caractersticas"])
Onde:
URL : endereo selecionado inicialmente quando da abertura da nova janela.
Nome : nome da nova janela, definido pelo programador;
Caractersticas - srie de opes de configurao da nova janela, se especificados devem estar na mesma string, separados por vrgulas e sem conter espaos:
toolbar=0 ou 1
location=0 ou 1
directories=0 ou 1
status=0 ou 1
menubar=0 ou 1
scrollbars=0 ou 1
resizable=0 ou 1
width=valor inteiro positivo
height=valor inteiro positivo
Ex:window.open("http://www.geocities.com/CapitolHill/6126/javainde.htm", "NovaJanela","toolbar=1,location=1,directories=0,status=1,menubar=1, scrollbars=1,resizable=0,width=320,height=240")
prompt - Monta uma caixa de entrada de dados, de forma simplificada comparando-se com o objeto text.
Ex: prompt(label [,valor])
onde:
label : texto que aparece ao lado da caixa;
valor : o contedo inicial da caixa;\
setTimeout - Faz com que uma expresso seja avaliada aps um determinado tempo (em milissegundos).
Ex: ID=setTimeOut(alert('voc chegoua aqui, a 10 segundos'),10000)
ID - identificador utilizado para o cancelamento de setTimeOut clearTimeout - Cancela setTimeOut.

Ex: clearTimeOut(ID)
Eventos:
onLoad : Ocorre assim que a pgina HTML termina de ser carregada.
onUnload : Ocorre assim que o usurio sai da pgina atual.
5.10) Reset
Este objeto restaura os campos de um formulrio, para seus valores iniciais. Forma geral:
<INPUT TYPE="reset" NAME="nome" VALUE="label" onClick="ao">
onde:
reset : Tipo do objeto
nome : Nome definido pelo programador, para futuras referenciaes;
label : String que ser mostrada na face do boto.
ao : Define o que fazer (alm de sua funo normal) quando clicamos no boto reset.
Propriedades: name - Armazena o nome que foi definido pelo usurio, no campo NAME, para o objeto reset.
Ex: document.form[0].element[0].name
value - Armazena o texto que aparece na face do boto reset. Definido no campo VALUE.
Ex: document.form[0].element[0].value
Mtodos: click : simula um clique de mouse no boto reset, executando todas as funes a ele associadas, sem que no entanto o usurio tenha realmente clicado neste boto.
Ex: resetName.click()
Eventos: onClick - Ocorre quando clicamos o mouse sobre o boto reset. Permite que associemos outra funo ao boto reset. Exemplo:
<HTML> <HEAD> <TITLE>Tutorial JavaScript - Exemplo: ResetButton</TITLE> </HEAD> <BODY> <P><CENTER> <FONT SIZE="+3" FACE="Britannic Bold" COLOR="#0000AF">J</FONT><FONT SIZE="+2" FACE="Britannic Bold" COLOR="#0000AF">ava</FONT><FONT SIZE="+3" FACE="Britannic Bold" COLOR="#0000AF">S</FONT><FONT SIZE="+2" FACE="Britannic Bold" COLOR="#0000AF">cript </FONT><FONT SIZE="+3" FACE="Britannic Bold" COLOR="#0000AF">G</FONT><FONT SIZE="+2" FACE="Britannic Bold" COLOR="#0000AF">uia de </FONT><FONT SIZE="+3" FACE="Britannic Bold" COLOR="#0000AF">R</FONT><FONT SIZE="+2" FACE="Britannic Bold" COLOR="#0000AF">eferência</FONT><FONT SIZE="+2" FACE="Britannic Bold"><BR> </FONT>
<FONT SIZE="-1" FACE="Britannic Bold" COLOR="#000080">© 1997 Anderson Barros Torres</FONT><BR><BR><BR>
<B><I><FONT SIZE=+4 >xemplo</FONT></I></B>
color=#000000
>E</FONT><FONT
SIZE=+3
color=#000000
</CENTER> <BR><BR> <FORM action="" method="POST"> <P>Digite o seu estilo musical: <P><INPUT TYPE="text" NAME="estilo" VALUE="" SIZE=30> <INPUT TYPE="RESET" NAME="apaga" VALUE="Limpa" > </FORM> <BR> <BR> <BR> <CENTER> <FORM> <INPUT TYPE="button" VALUE="Pgina Anterior" onClick="history.go(-1)"> </FORM>
5.11) Link
HTML permite ligaes de uma regio de texto (ou imagem) um outro documento. Nestas pginas, temos visto exemplos dessas ligaes: o browser destaca essas regies e imagens do texto, indicando que so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links. Forma geral:
<A [ NAME="ancora" ] HREF="URL" [TARGET="janela"] [onClick="ao"] [onMouseOver="ao"]> Texto explicativo</A>
onde:
URL : o documento destino da ligao hipertexto;
ncora : o texto ou imagem que servir de ligao hipertexto .
janela : Nome da janela onde a pgina ser carregada, para o caso de estarmos trabalhando com frames:
"_top" : Se estivermos trabalhando com frames, a pgina referenciada pelo link, substituir a pgina que criou as frames, ou seja, a pgina atual, com todas as frames, dar lugar a nova pgina.
"_self" : A nova pgina carregada na mesma janela do link.
"_blank" : Abre uma nova seo do browse para carregar a pgina.
ao :Cdigo de resposta ao evento.
Texto explicativo : Texto definido pelo usurio, que aparece na tela de forma destacada.
Eventos: onClick - Ocorre quando clicamos o mouse sobre o link.

Ex: <A HREF="URL qualquer" onClick="alert('voc teclou no link!')">Texto</A>
onMouseOver - Ocorre quando o mouse passa por cima do link, sem ser clicado.
Ex: <A HREF="URL qualquer" onMouseOver="self.status='Este texto aparecer na barra de status quando o mouse estiver posicionado sobre o link'"> Texto</A>
Caminhos para o documento destino: 1. Caminho relativo : O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento que esteja no mesmo servidor do documento atual. Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do diretrio do servidor no qual estamos trabalhando. Simplificando, como acessarmos um arquivo que esteja no mesmo diretrio, no sendo necessrio acrescentar o path.
2. Caminho absoluto : Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor. Com a mesma sintaxe, e possvel escrever links para qualquer servidor WWW no mundo. Seria a aplicao do endereo completo da pgina em questo, como visto no tem anterior. 3. Ligaes a trechos de documentos - Alm do atributo href, que indica um documento destino de uma ligao hipertexto, o elemento A possui um atributo NAME que permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto. Funciona tanto para documentos locais como para os armazenados em outro servidor. O trecho deve ser indicado com o smbolo "#".
Ex: JavaInde.htm <HTML> ... <A HREF = "parte1.htm#2">Diferena entre Java e JavaScript</A> ... </HTML>
Ex: parte1.htm <HTML> ... <A NAME="1"></A>O que JavaScript JavaScript ... <A NAME="2"></A>Diferena entre Java e JavaScript A diferena ... ... </HTML>
No exemplo acima, o link de JavaInde.htm carrega a pgina "parte1.htm" e automaticamente posiciona o trecho "2" no topo da janela do browser.
6.) Palavras reservadas

Existem vrias palavras que so reservadas para o JavaScript as quais so listadas abaixo. Essas palavras no podem ser utilizadas para identificar variveis ou funes. abstract boolean break byte case cath char class const continue default do double else extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch sinchronized this throw throws transient true try var void while with
7.) Tabela de cores

Ao invs de especificar cdigos hexadecimais para utilizar cor em documentos HTML, voc pode simplesmente utilizar um literal, que especifica o nome da cor para obter o mesmo resultado. A seguir sero mostrados os vrios literais que voc pode utilizar na especificao de cores:
Exemplo de utilizao:
Definindo Background Definindo a cor do texto Definindo a cor de trechos de textos Links, Followed Links, etc. <BODY BGCOLOR="literal"> <BODY TEXT="literal"> <FONT COLOR="literal"...</FONT> <BODY ALINK="literal"> etc.
8) Referncias
Manual JavaScript
A Verso Nova de uma Velha Histria

Este manual foi escrito lanado pela ltima vez no incio !!" e tenta e#plicar $ava%cript en&uanto lin'ua'em de pro'ramao(
)ez parte da Enciclop*dia +me'a e, com o fato de a Enciclop*dia +me'a estar parada e, acrescida a isso a insta-ilidade na ferramenta ento utilizada pela E+, resolvi desvincular este manual da E+ e lan./lo em separado( Aproveito para acrescentar um padro de codificao &ue eu havia criado h. tempos tam-*m, e &ue at* ho0e se encontrava es&uecido( A partir desta verso, este manual se encontrar. em meu site pessoal, podendo evoluir para tratar de A$A1, 123 e outros assuntos, a depender da sua aceitao e do meu tempo disponvel( Espero &ue apreciem( // 4.rlisson 5aldino
"No sou nem ateniense, nem grego, mas sim um cidado do mundo." Scrates
6anual $ava%cript
Verso atual7 2006.04 8ata de 9u-licao7 21 de abril de 2006 4lassificao7 Manual de Programao Autor7 Crlisson Galdino 4ontato7 bardo@swissinfo.org
Manual JavaScript
;ndice
<ntroduo((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((=
Histria((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((= Altos e >ai#os(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((= + ?ue Ela @((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((= %o-re Este 6anual((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((= 4onhecimento 9r*vio((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((A %oftBare Necess.rio((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((A
9ro'ramando Estruturadamente(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((C
Dipos de Vari.veis(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((C +peradores((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((C 3istas(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((E Estrutura >.sica(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((E Estruturas de Fepetio(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((E
Bhile(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((E do/Bhile((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((G for((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((G
Estruturas de 8eciso((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((G
if((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((G sBitch((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H! if condensado((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H!
6odularizao(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H! %o-re 9arImetros(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HH
9ro'ramando com +rientao a +-0etos((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H

Antes de 4omear(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H +rientao a +-0etos(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H
4omposio((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H 4lasses((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H Herana(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H
2sando +-0etos(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H Estrutura Bith((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HJ A 4riao de 4lasses(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HJ 4lasse 8ata((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HJ 4omposio(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H" Herana(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H"
<ara $ava%cript 4ode %tandards((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H=

<ndentao(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H= E#pressKes(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H=
:J
Manual JavaScript
4oment.rios((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((H= Nomenclatura((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HA Vari.veis((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HA 4lasses(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((HA
:"
Manual JavaScript
<ntroduo
* uma lin'ua'em de 'rande peso no mundo 2ni#, e at* nos outrosR 4UU * uma verso de 4 utilizando a t*cnica de +rientao a +-0etosR No ano de HGG", a empresa Netscape, fa-ricante do pro'rama $ava * a lin'ua'em preferida do meio acadSmico, mas &ue pouco a de mesmo nome para nave'ao na <nternet, sentiu necessidade de pouco atin'e outras .reasM( %e estou falando 're'o, desculpe/me7 implementar uma tecnolo'ia de processamento modo cliente( 9ara essas coisas sero tratadas adiante( pro'ramas simples &ue fossem e#ecutados no computador do usu.rio Esta lin'ua'em pode ser utilizada de uma forma -em -.sica ao mesmo, sem &ue fosse preciso enviar informaKes para o computador simplesmente associarmos aKes simples a eventos de elementos da servidor( p.'ina Lpor e#emplo, fazendo uma 0anela a-rir ao clicarmos um Eram coisas como a validao de um formul.rio, por e#emplo( -oto de formul.rio HD63MR de forma estruturadaR ou, o &ue * mais Na mesma *poca era adicionado suporte a applets $ava Laplicativos interessante, orientada a o-0etos, de uma forma &ue lem-ra -astante a pe&uenos e &ue so e#ecutados em-utidos, no nosso caso em p.'inas lin'ua'em 9erl( HD63( 9ossuem uma .rea formalmente delimitada para elesM ao 4omo tudo &ue * rosa tem &ue ter espinho, $ava%cript tem suas nave'ador, mas((( Em se tratando de pro'ramas comple#os ou visuais limitaKes7 s roda em um nave'ador Be-, depende do nave'ador do era timo, s &ue o tempo necess.rio para copiar e e#ecutar o internauta e no lida com ar&uivos de maneira al'uma( 6as como pro'rama em -Ntecode simplesmente no compensava certas isso tudo era esperado de uma lin'ua'em assim, podemos dizer &ue pe&uenas tarefas( Al*m de &ue os applets no esto to li'ados assim $ava%cript * o &ue h. de melhor nessa .rea( aos elementos da p.'ina HD63 afinal de contas( )oi a &ue nasceu a 6as no * o fim para &uem &uer usar tantos recursos &uantos soluo( se0a necess.rio para a criao de uma aplicao local( + pro0eto A Netscape criou 3ive%cript, uma lin'ua'em em-utvel na 6ozilla tam-*m apresenta um frameBorO para a criao de p.'ina HD63, interpretada pelo nave'ador, tomando -em menos pro'ramas 'r.ficos normais Lcomo usando $avaTAVD ou 5DWUM, tempo &ue $ava e estando mais unida aos elementos da p.'ina( multiplataforma, usando/se $ava%cript e 163, podendo inclusive ser Assim como aconteceu com $ava / &ue se chamava +aO /, a e#ecutados por rede( lin'ua'em da Netscape terminou mudando de nome com a paritipao da %un 6icrosNstems no pro0eto e assim a verso >eta do Netscape, em HGG=, 0. trazia estampada para a lin'ua'em o novo + ?ue Ela @ nome7 $ava%cript( No &ue tenha tanta li'ao com $ava, mas por pura &uesto de marOetin'( E assim nascia uma lin'ua'em &ue se Atualmente, como 0. foi dito, * uma lin'ua'em de tornaria um padro e sinPnimo de processamento cliente em p.'inas pro'ramao &ue possui muitas &ualidades e limitaKes do 'Snero ao Be-( &ual pertence( Entretanto, $ava%cript vinha sendo -astante A lin'ua'em $ava%cript * to poderosa e simples para su-estimada pela comunidade de desenvolvedores em 'eral Lpelo manipular o-0etos Lfoi sua motivao principal manipular os menos antes da do A$A1 e da Ve- (!M( 5eralmente ser utilizada elementos de uma p.'ina HD63M &ue se criou, a partir dela, um para coisas -anais e amadoras( padro7 o E46A%cript( V.rios outros setores utilizam uma @ uma lin'ua'em &ue lem-ra -astante 4UU e $ava( lin'ua'em nesse padro, entre eles o VF63( + aplicativo 9rincipalmente $ava( 6as traz apenas semelhanas( Ela possui propriet.rio )lash utilizava um, &ue depois evolui para o &ue eles tipa'em dinImica, o &ue si'nifica &ue vocS no precisa dizer &ual o ho0e chamam de Action%cript, mas &ue mant*m ainda certa tipo da vari.vel, podendo armazenar nela ora inteiro, ora strin'( Ela compati-ilidade( tem o tipo -ooleano tam-*m( Na verdade, &uando se trata de vari.veis, elas nem mesmo precisam ser criadas, mas cri./las * aconselh.vel para &ue o cdi'o se torne mais compreensvel(
Histria
9or sua forte li'ao aos elementos HD63, ela * muito utiliz.vel para efeitos visuais curiosos, pena &ue a X5uerra dos 4riada inicialmente para pe&uenos processamentos, $ava%cript Nave'adoresX terminou por complicar a vida do pro'ramador foi muito utilizada para acrescentar recursos simples Q p.'ina, Qs 8HD63 L$ava%cript manipulando diretamente partes de um vezes -anais( Esse uso * o &ue a faz ser lem-rada como uma e#tenso documento HD63 como o-0etosM( 6as &uem tem paciSncia e investe do HD63 e no como uma lin'ua'em de fato( nisso corre o risco de se surpreender com o resultado( Entretanto, $ava%cript * uma lin'ua'em de pro'ramao( 2ma Apesar da sinta#e parecer com $ava, por incrvel &ue parea ela lin'ua'em completa e poderosa, com as limitaKes &ue o meio me lem-ra -em mais lin'ua'ens como 9erl, mesmo &ue no tenha e#i'ia( XYX antes de vari.vel e coisas do 'Snero((( <sso talvez se0a pela @ uma lin'ua'em &ue foi criada para7 tipa'em dinImica, pela lista / inclusive a associativa / ou talvez se0a pelo modo como * feita a criao de classes( alterar valores de elementos HD63R No final, $ava%cript parece um 9erl com sinta#e de $ava, com a criar elementos HD63R difcil peculiaridade de no poder armazenar dados( validar formul.rio e controlar interao entre molduras( Atrav*s de $ava%cript vocS poder. ter acesso a &ual&uer elemento da p.'ina(
Altos e >ai#os
$ava%cript rene o &ue h. de melhor em dois 'rupos 4omo os volumes de +me'a destinados a co-rir lin'ua'ens de consa'rados de lin'ua'em7 listas associativas, tipa'em dinImica e pro'ramao, este livro tenta levar conhecimento -astante amplo da e#pressKes re'ulares de 9erl Llin'ua'em para criao de relatriosMR a lin'ua'em em si, mas mostrando al'uns dos recursos disponveis( sinta#e -.sica, a -i-lioteca matem.tica e a de data de 4T4UUT$ava L4 Denta tam-*m, como parte de +me'a, traar uma ima'em / ainda &ue
%o-re Este 6anual
<ntroduo :=
Manual JavaScript
em-aada / da lin'ua'em na comunidade, seu papel e uso perante os 9ro'ramao +rientada a +-0etos revolucionou a pro'ramao desenvolvedores, al*m de tentar defin/la como realmente *( ao criar elementos comple#os, &ue renem comportamento Lm*todos, A&ui vocS aprender. no apenas a pro'ramar em $ava%cript parecidos com as funKes da 9ro'ramao EstruturadaM, estado como tam-*m a utilizar suas caractersticas para +rientao a Latri-utos, parecidos com as vari.veis da 9(E(M e identidade Lcomo as +-0etos( <sso sem contar com o uso de recursos estruturados -astante vari.veis, al'o &ue os distin'ue uns dos outrosM( H. o conceito de classes, &ue so XmoldesX para esses elementos comple#os, chamados teis herdados, em sua maioria, de 9erl( de o-0etos( Entre classes h. associaKes( Entre estas, al'umas so No ser. tratado a&ui nada referente a HD63 ou 8HD63, o especialmente interessantes, como a herana / &ue * &uando uma nosso foco ser. $ava%cript( 4aso o leitor se interesse por &ual&uer classe *, a princpio, i'ual a outra7 claro &ue apenas a princpio, a dessas duas tecnolo'ias La primeira, inclusive, de primordial acrescentamos ou retiramos al'o( 9ro'ramao +rientada a +-0etos * importIncia para o prprio $ava%criptM, su'iro &ue procure leitura al'o realmente interessante e til( %e o leitor no conhece esta forma especializada( +me'a(0ava%cript tende a servir como um de pro'ramar, talvez sinta dificuldade na seo &ue trata a +rientao aprimoramento para &uem 0. conhece um pouco de HD63 e a +-0etos em $ava%cript( Fecomendo fortemente &ue -us&ue, caso pro'ramao, e dese0e conhecer melhor esta lin'ua'em mal/ se0a este seu caso, informaKes so-re este &ue * um dos conceitos compreendida( mais utilizados na pro'ramao atual / apesar de no ser coisa to nova assim((( VocS pode recorrer a livros, mas h. de encontrar al'uma coisa se fizer pes&uisas na <nternet so-re o assunto(
4onhecimento 9r*vio
Este livro assume &ue o leitor conhece 0. pro'ramao e, neste campo, tenha al'um domnio so-re e#pressKes l'icas e aritm*ticas, estruturas de repetio e de deciso, e pro'ramao +rientada a +-0etos( Dam-*m assume/se &ue o leitor 0. domina, muito ou pouco, a lin'ua'em de hiperte#to HD63( 8e &ual&uer forma, a&ui vai um resumo de cada um desses elementos, para recordar(
9ro'ramao estruturada utiliza uma m.#ima7 &ual&uer pro'rama pode ser feito a partir de estruturas de deciso, de repetio e dos conceitos7 mdulos / ou funKes / e se&ZSncias( A 'rande vanta'em, Q &ual todos os pro'ramadores at* ho0e a'radecem, * a a-olio dos X5+D+sX, &ue eram os principais respons.veis por cdi'os incompreensveis( Na pro'ramao estruturada, fala/se em No * fundamentalmente necess.rio &ue vocS conhea funKes e vari.veis7 o pro'ramador estruturado tem o poder do +rientao a +-0etos, HD63 ou e#pressKes l'icas, mas tal ver-o( desconhecimento poder. acarretar na dificuldade de compreender E#pressKes l'icas so se&ZSncias de vari.veis do tipo valor/ al'uns trechos deste manual( verdade e e#pressKes comparativas &ue retornam valores/verdade( Valores/verdade a &ue me refiro so os conhecidos -ooleanos, &ue podem assumir valor XverdadeiroX ou XfalsoX Ltrue ou falseM( %oftBare Necess.rio Vari.veis e e#pressKes comparativas &ue retornavam este tipo so li'adas em cadeias por operadores l'icos e parSnteses( +s 9ara tra-alhar com $ava%cript vocS vai precisar de um operadores l'icos so7 XEX, X+2X, X+2 E1432%<V+X, XE computador com um %istema +peracional, um softBare nave'ador E1432%<V+X e XN[+X( 9ara um -om uso de e#pressKes l'icas * com suporte a $ava%cript e um editor de te#tos A%4<< &ual&uer( recomendado o estudo de Xl'ica aplicada Q computaoX ou Xl'ica De#to puro mesmo( 4laro &ue editores especiais para pro'ramao cl.ssica proposicionalX( &ue ofeream desta&ue sint.tico da lin'ua'em $ava%cript e outra E#pressKes aritm*ticas retornam nmeros( %o e#pressKes facilidades so -em mais interessantes e confort.veis de se usar( matem.ticas e envolvem vari.veis de nmeros, nmeros constantes e H. infinitas com-inaKes possveis para se tra-alhar $ava%cript chamadas de funKes &ue retornam nmeros, separados por mas, por ser este um volume de +me'a, uma enciclop*dia do parSnteses e operadores matem.ticos( %o operadores matem.ticos7 softBare livre, mediante as vanta'ens 0. faladas no volume principal X6A<%X, X6EN+%X, XVE\E%X, X8<V<8<8+X, X8<V<8<8+/%]/ desta cate'oria de softBare, recomendamos a se'uinte com-inao7 FE%D+X, X8<V<8<8+/%E6/)FA4<+NAFX e XE3EVA8+/^/ 5N2T3inu# Lo sistema operacionalM, 6ozilla Lo nave'adorM e Wate Lo 9+D_N4<AX( ?uanto a e#pressKes aritm*ticas, so mais f.ceis de editorM( 4laro &ue h. muitas outras opKes, como o )ree>%8 como serem compreendidas pelo fato de serem um pouco estudadas nos %istema +peracional, o 5aleon como nave'ador e o emacs como ensinos fundamental e m*dio( editor, portanto sinta/se Q vontade para escolher sua com-inao7 o Estruturas de repetio so -locos de cdi'o &ue so repetidos %(+( certamente ser. um &ue vocS 0. tenha instalado e e venha um determinado nmero de vezes ou at* &ue certa condio se0a usandoR o nave'ador vocS provavelmente 0. tem tam-*mR o editor pode ser provisoriamente o editor de te#to padroTpreferido/seu em atin'ida( A condio * o resultado de uma e#presso l'ica( seu sistema, se vocS no tiver ainda um editor com desta&ue Estruturas de deciso so -locos de cdi'o &ue so e#ecutados sint.tico( apenas se dada condio for verdadeira( Al'umas vezes, 6as, enfim, por incrvel &ue parea, * s disso mesmo &ue acompanhados de -locos &ue so e#ecutados somente se a mesma condio avaliada for falsa( A condio * tam-*m o resultado da vocS vai precisar( avaliao de uma e#presso l'ica(
HD63 * uma lin'ua'em de hiperte#to, utilizada para a criao de p.'inas na <nternet( Ela serve, na verdade, para o &ue poderamos chamar de Xdia'ramao da Be-X( Atualmente est. comeando a ser su-stituda por 163, sendo 1HD63 a lin'ua'em transitria( Acontece &ue isto est. acontecendo ainda em nvel muito superficial e certamente levar. um tempo at* &ue se0a mesmo su-stituda( 4omo uma lin'ua'em de marcao de hiperte#to, HD63 oferece DA5s, &ue utilizamos para determinar locais onde o-0etos aparecero e inserir os o-0etos( ?uando se fala de Xaplicao para Be-X, isso no descarta HD63, muito pelo contr.rio7 todo o processamento de um aplicativo &ue roda em um servidor precisa mostrar al'uma coisa ao usu.rio e para isso no h. como evitar o uso de uma lin'ua'em de marcao, 'eralmente HD63 mesmo(
<ntroduo :A
Manual JavaScript
9ro'ramando Estruturadamente
Neste captulo trataremos todos os detalhes da linguagem JavaScript para programao estruturada. Pelo menos este o objetivo, mas certamente no ser atingido assim de incio. aso o leitor no entenda muito de programao estruturada, sugiro !ue bus!ue leitura sobre "algoritmo", pois #undamental.
Dipos de Vari.veis +peradores
Vari.veis servem para armazenar XcoisasX &ue sero utilizadas H. cinco 'rupos de operadores, -asicamente falando7 l'icos, no decorrer de um pro'rama ou parte dele( Eu poderia dizer &ue comparativos, aritm*ticos, de strin's e de atri-uio( armazenam valores ou dados, mas acredito &ue XcoisasX * uma +peradores l'icos retornam um valor/verdade a partir de um definio melhor7 pois podem ser nmeros, cadeias de caracteres, ou mais valores/verdades( H. o E LccM, &ue retorna verdadeiro se, e o-0etos e at*, estranhamente, funKes` somente se os dois valores passados forem verdadeiros( %eu uso * Em $ava%cript lidamos com al'uns tipos -.sicos( %o eles7 como em XA cc>X( + +2 LddM retorna verdadeiro se pelo menos um nmero, valor/verdade e cadeia de caracteres( 9ara facilitar a dos valores passados for verdadeiro( %eu uso, similar ao do E, * como a-orda'em, vamos es&uecer &ue vari.veis podem 'uardar referSncia a em XA dd >X( H., para concluir, a ne'ao L`M, &ue retorna verdadeiro funKes ou se referir a o-0etos e consideremos a e#istSncia de apenas se o valor rece-ido for falso( %eu uso * como em XÀX( 9ode/se esses trSs tipos de dados -.sicos / so, afinal de contas, os nicos a'rupar esses operadores e vari.veis em e#pressKes comple#as e, citados &ue podem ser classificados como Xtipos -.sicosX( como em e#presKes aritm*ticas, utilizar/se parSnteses para controlar a Vari.veis do tipo nmero 'uardaro nmeros &ue podero ser ordem em &ue a e#presso ser. avaliada( E#emplo de e#presso positivos, nulos ou ne'ativos, inteiros ou fracion.rios Lpois na l'ica LA, >, 4 e 8 so vari.veis -ooleanasM7 L A cc L> dd L `L4 dd 8M M verdade os computadores no 'uardam nmeros reais( Danto &ue * M M( <sso ser. verdadeiro para as se'uintes com-inaKes de A, >, 4 e prefervel tratar o &ue os computadores 'uardam como pontos 87 VV)), VV)V, VVV), VVVV e V)))( Dente visualizar isso( flutuantes ao inv*s de se usar o termo XreaisXM( 4om eles pode/se fazer operaKes matem.ticas em 'eral( Na verdade, * prov.vel &ue $ava%cript separe inteiros de flutuantes, mas isso * totalmente transparente ao usu.rio( +utra coisa interessante so-re nmeros e $ava%cript * &ue a lin'ua'em tam-*m representa nmeros a-surdamente 'randes, chamando/os de <nfinitN positivo e ne'ativo( Assim, no ocorrer. necessariamente um erro ao se tentar dividir por zero, por e#emplo( Vari.veis do tipo valor/verdade armazenam apenas verdadeiro ou falso, em $ava%cript, como na maioria das lin'ua'ens, representados, respectivamente, por true e false( Al'umas lin'ua'ens no trazem este tipo, e#i'indo o uso de nmeros7 H representando verdadeiro e ! representando falso( )elizmente $ava%cript implementa valores/verdades, conhecidos como -ooleanos( +peradores comparativos rece-em dois valores e os comparam, retornando um valor/verdade( E#istem para serem utilizados em e#pressKes l'icas( A i'ualdade LeeM compara duas vari.veis de &ual&uer tipo -.sico e retorna verdadeiro se7 so numericamente i'uais Lno caso de nmerosM ou so literalmente i'uais Lno caso de strin'sM( %eu uso * como em XAee>X, XAee (JX ou XAeea4onsoleaX( A desi'ualdade LèM funciona como X`LAee>MX funcionaria para XAee>X( Ela ne'a a i'ualdade e * usada como em XAè>X, XAèC(EX ou XAèaDerminalaX( +s outros &uatro operadores so e#clusivamente num*ricos7 so o maior &ue LfM, o menor &ue LgM, o maior &ue ou i'ual a LfeM e o menor &ue ou i'ual a LgeM( %eu uso * -astante intuitivo7 XAf>X retornaria verdadeiro para Ae e >e/J, por e#emplo( + LAge>M e&uivale Q e#presso7 L LA g >M dd LA ee >M M( +peradores aritm*ticos rece-em nmeros e retornam nmeros( %o os 0. conhecidos7 soma LUM / de uso como em XAU>X R su-trao LM / de uso como em XA/>X /R multiplicao LhM / de uso como em XAh>X /R diviso LTM / de uso como em XAT>X / e mais outros( H. a diviso em modo anel / ou o resto de uma diviso inteira, se preferir nesses termos / LiM, &ue * usado como em XAi>X e para XHAi=X M * como em XA retornar. XHX, por e#emplo( A potSncia L >X e para X=j X resultar. X =X(
Vari.veis do tipo cadeia de caracteres armazenam cadeias / ou se&ZSncias / de caracteres( 2m caractere pode ser uma letra, um nmero, uma e#clamao, um arro-a((( ?ual&uer sm-olo 'r.fico &ue possa fazer parte de um ar&uivo de te#to puro( Eles so representados com uma re'ra prpria, &ue * a mesma de muitas lin'ua'ens e#istentes7 devem ser colocados entre aspas LXM ou apstofros LaM( %e vocS utilizar aspas, os apstofros &ue aparecerem no cdi'o sero tratados como caracteres, e vice/versa( 9ara imprimir al'uns + operador de strin' &ue e#iste * a concatenao, representado caracteres especiais, vocS pode utilizar a contra/-arra LbM( Ela indica como XUX( Assim, XE/mail X U aenviadoà resultar. na strin' XE/mail &ue o &ue vem depois representa um caractere especial( Assim, um bn enviado`X( representa uma &ue-ra de linha Ldo te#to, no do HD63M, o bX +s operadores de atri-uio servem -asicamente para representa aspas mesmo e bb se refere ao caractere LbM( atri-uirmos valores a vari.veis( + principal * o de atri-uio simples VocS no precisar. se preocupar tanto com tipos em $ava%cript( LeM, &ue * utilizado na forma XAe>X, > podendo ser uma vari.vel, <sso por&ue, como 0. foi dito, ela oferece tipa'em dinImica, o &ue uma e#presso l'ica, aritm*tica, de strin'((( +s outros operadores / &uer dizer &ue uma vari.vel * tratada como vari.vel, no como e#ceto os l'icos / podem ser associados ao i'ual, criando/se outros vari.vel inteira ou vari.vel -ooleana( Assim, uma vari.vel pode operadores de atri-uio( A sa-er7 LUeM como incrementao para assumir &ual&uer tipo no decorrer do pro'rama( valores num*ricos, XAUe>X incrementa XAX com X>XR LUeM como Vari.veis no precisam ser declaradas, mas sua declarao * concatenao para strin's, XAUe>X adiciona o valor de X>X Q strin' muito importante para mantermos pro'ramas -em/or'anizados( 9ara XAXR L/eM decrementao para valores num*ricos, decrementa X>X de declarar uma vari.vel, utilize a palavra/chave var antes do nome( XAX e se XhoraX tem valor XEX, Xhora/e=X dar. Q XhoraX valor XJXR L 4ada vari.vel deve ser declarada apenas uma vez Lou nenhuma, se *=@ ), (/=) e ( @%= M funcionam da mesma forma( no &uiser fazS/loM( Entre os operadores de atri-uio, h. os operadores especiais de incremento LUUM e decremento L//M( + operador de incremento aumenta o valor da vari.vel em H( $. o de decremento faz e#atamente
9ro'ramando Estruturadamente :C
Manual JavaScript
o contr.rio, decrementando o valor da vari.vel de H( Esses operadores podem ser utilizados aplicados a uma vari.vel como um comando ou dentro de e#pressKes aritm*ticas( Neste caso, haver. diferena entre coloc./los antes ou depois da vari.vel( ?uando antes, primeiro * feita a alterao e depois a e#presso * avaliada( ?uando depois, a vari.vel s * incrementada ou decrementada depois de a an.lise Q e#presso ter sido concluda( <sso &uer dizer, para ser mais preciso, &ue7 forma mais eficiente todos os elementos de uma lista(
2ma o-servao final *7 tenha cuidado ao usar o push e o pop7 al'uns softBares &ue pretendem se passar por Xnave'adores com suporte a $ava%criptX no suportam ainda esse recurso to simples( 9ara su-stitu/los, h. a se'uinte alternativa7
x = 2 * y++
resultar., para #, em um valor diferente de
x$ x.len*th & = val r/ y = x$ x.len*th0 1 &

&ue e&uivalem a7
x = 2 * ++y
x.push(val r)/ y = x.p p()
com a diferena de &ue o pop e#clui o ltimo elemento e a Vamos supor &ue, antes de tudo, N tenha o valor X=X( No linha e&uivalente no o faz( At* onde vi, felizmente, a falta de suporte primeiro caso, terminaremos com #eH! e NeA( No se'undo, # ser. H aos m*todos push e pop ocorre em nave'adores anti'Kes( e N, A(
3istas
2m tipo mais comple#o de dado, mesmo sendo 0. orientado a o-0etos Lvamos a-strair isso, por en&uantoM * a lista ou vetor( 2ma lista * uma estrutura &ue permite o armazenamento de v.rias vari.veis com um mesmo nome, acessveis por um ndice( Este ndice pode ser num*rico comeando por zero Llistas inde#adasM ou uma strin' &ual&uer Llistas associativas ou hashsM( Ao contr.rio das vari.veis -.sicas, as listas precisam ser criadas como listas mas, como uma lin'ua'em de script, vocS no precisa dizer de &ue tipo * a lista, podendo misturar strin' com -ooleanos e nmeros( A criao de uma lista * feita atrav*s do comando7
Estrutura >.sica
A primeira coisa &ue se deve tem em mente so-re pro'ramao estruturada * &ue os comandos devero ser e#ecutados se&ZSncialmente( A se'unda coisa &ue se deve sa-er * o &ue so comandos e como criar essas se&ZSncias(
+s comandos podem ser colocados naturalmente, separados( Em muitas lin'ua'ens, * preciso colocar ponto/e/vr'ula para separar dois comandos distintos, mas no em $ava%cript, a memos &ue vocS var x = new Array() colo&ue comandos em uma mesma linha( <sso no &uer dizer &ue Este comando criar. uma vari.vel X#X e determina &ue esta vocS no possa utiliz./los no fim das linhas, e sim &ue o interpretador $ava%cript ir. i'norar a&uilo( Assim o identificador de fim de contenha uma lista( comando pode ser tanto a &ue-ra de linha como o ponto/e/vr'ula( 4ada elemento da lista pode ser acessado por kil, sendo i o +utra informao importante7 $ava%cript * sensvel Q cai#a( + ndice do correspondente ao elemento na lista ou a chave para acess./ lo, caso se0a associativo( A lista * criada vazia( 9odemos adicionar um &ue isso si'nificam 2ma vari.vel criada como Xva3+FX se chamar. e#atamente Xva3+FX e no adianta tentar acess./la com XValorX, elemento inde#ado atrav*s do comando7 XvalorX ou XVA3+FX( <sso serve para tudo(
2m comando * uma atri-uio, uma chamada de valor ou um -loco de cdi'o Lestrutura de repetio ou decisoM( 2m -loco de cdi'o pode conter listas de comandos, inclusive com outros -locos de cdi'o, em hierar&uias de &ual&uer tamanho(
x.push("Ol, este ele"ent #")
pr!"e!r
Assim, &uando re&uisitarmos x$%&, ser. retornada a strin' Drata/se de um comando simples / ou um -loco de comandos / X+l., este * o primeiro elemento`X( X#(len'thX retornar. o tamanho da &ue ser. e#ecutado mais de uma vez dentro do cdi'o maior( lista inde#ada( $ava%cript utiliza as trSs estruturas de repetio -.sicas do 47 o Bhile, 8e forma an.lo'a, se &ueremos retirar um elemento da lista Q o do/Bhile e o for, este ltimo, al*m da forma tradicional, de uma moda de pilha Lltimo a entrar * o primeiro a sair, podemos utilizar o outra maneira -astante til para listas associativas( comando se'uinte7
Estruturas de Fepetio
y = x.p p()
Este cdi'o retirar. o ltimo elemento adicionado Q lista e colocar. em N( + elemento dei#ar. de constar na lista(
while
+ Bhile Len&uantoM repete um comando ou con0unto de comandos en&uanto uma determinada e#presso l'ica for %e &uisermos tra-alhar com lista associativa, podemos incluir o verdadeira( 9or e#emplo, o cdi'o elemento da se'uinte forma7
x$"'a(!"& = ")e*r!nh +e u"a perna s,, pers na*e" + - l(l re .ras!le!r ."
wh!le (x 2 1%) x++
incrementar. # um determinado nmero de vezes( ?uantas Assim, atrav*s de #kX%aciXl poderemos associar o te#to colocado( <sso * muito til, pois tem -ase no conceito de listas de vezesm 8epende((( Dalvez nenhuma( Ele incrementar. # o nmero de duplas strin's, associando/as por chave e valor( 4omo o leitor 0. deve vezes &ue for preciso para &ue # no se0a mais menor &ue H!( ter perce-ido por esse e#emplo, esta estrutura pode ser utilizada para um dicion.rio de ver-etes Lno &ue isso se0a to til assim em $ava%criptM, para associar apelidos a nomes, apelidos a e/mails e muitas outras coisas( 6ais Q frente vocS ver. como fazer acessar de
9ro'ramando Estruturadamente :E
Manual JavaScript do while

assumir um valor num*rico, como no uso tradicional do for convencional Lsim, pois o for na verdade * -astante fle#velM, ela + do/Bhile Lfaa en&uantoM funciona de maneira muito assume os valores/chaves( <sso 0. est. ficando meio confuso, no * parecida com o Bhile, com a diferena de &ue a operao * efetuada mesmom >em, ento vamos a um e#emplo &ue melhora7 ao menos uma vez Lpor isso o )AnA primeiro e o EN?2AND+ - r (! !n l!sta) depoisM( Assim, no e#emplo, o comando7
+ senha = pr "pt("3!*!te a senha") wh!le (senha #= "a.ra4a+a.ra")
+ (u"ent.wr!te("2a hre-=:" + l!sta$!& + ":;" + ! + "2/a;2.r;")
+ &ue isso fazm %imples` Escreve todos os linOs contidos na lista associativa Lnome /fendereoM XlistaX( @ s isso mesmo( Entretanto, h. uma &uesto a se considerar7 no estou certo de &ue repetir. a operao de solicitao da senha at* &ue esta se0a isso funciona corretamente no <nternet E#plorer, da 6icrosoft( <sto 0. Xa-raOada-raX( + cdi'o diz para &ue ele Xfaa solicitao de senha foi testado no Netscape ", no 6ozilla e no +pera, funcionando en&uanto a senha for diferente de a-raOada-raX( corretamente em todos eles(
for
+ for LparaM faz uma operao um determinado nmero de vezes, percorrendo dado intervalo( %eu uso convencional * da se'uinte forma7
Estruturas de 8eciso
As estruturas de deciso servem para e#ecutar uma dada operao Lou, como sempre pode ser, um con0unto de operaKesM, dependendo de uma determinada condio ser verdadeira( H. trSs tipos -.sicos de estruturas de deciso7 o <), o %V<D4H e a forma condensada do <)(
- r (! = %/ ! 2 1%/ !++) alert(!)
8esta forma, a vari.vel i ser. inicializada com ! e sero 0o'adas ao usu.rio H! 0anelas de alerta, cada uma apresentando um if nmero, do ! at* o G, pois a cada iterao o i * aumentado em H(
+ if LseM pode ser utilizado de duas formas diferentes( A forma 8e um modo 'eral, h. trSs e#pressKes( A primeira * um mais simples * &uando &ueremos &ue um cdi'o se0a e#ecutado caso comando &ue ser. e#ecutado apenas antes da primeira iteao( A se'unda * uma e#presso -ooleana &ue serve de condio( Doda vez uma dada e#presso se0a verdadeira( A forma *7 &ue for iniciar uma nova iterao, o $ava%cript checar. se a e#presso !- (( n+!(a ) retorna verdadeiro( 4aso retorne, ele p.raR seno ele continua( A terceira * outro comando, mas este * e#ecutado depois de toda a ( "an+ iterao( 8esta forma, o uso convencional do for *7 9or e#emplo, o cdi'o a se'uir no permite &ue # assuma valor - r ( !n!(!al!5a(a ()/ . lean / superior a H!!( Assim, aps passar por este trecho de cdi'o, # pera(a () ) necessariamente ser. menor &ue ou i'ual a H!!(
( "an+ s()
E isso e&uivale a7
!- (x ; 1%%) x = %
A forma completa do if traz tam-*m a opo XelseX, a ser e#ecutada caso a condio no se0a verdadeira( %ua forma *
!n!(!al!5a(a () wh!le (. lean ) 6 ( "an+ s() pera(a () 7
!- (( n+!(a ) ( "an+ 0se0ver+a+e!r else ( "an+ 0se0-als
>em, este * o uso convencional, mas h. um outro uso, &ue * muito interessante, por sinal( @ uma forma de percorrer uma lista Assim podemos fazer com &ue o cdi'o possa se'uir um entre associativa( %uponhamos &ue vocS criou uma lista de linOs dois caminhos distintos, dependendo de um dado valor( No e#emplo associando nome a endereo, sendo o nome a chave, com comandos a se'uir temos um trecho de cdi'o &ue verifica se # * par ou mpar( como7
l!sta$"8-al"& = "http9//www.u-al..r"
!- ( (x % 2) == %)
A'ora vocS &uer escrever os linOs mesmo, em se&uSncia( 4omo fazerm 3em-rar todas as chavesm Nem pensar` @ para situaKes como else esta &ue o for funciona como o foreach do 9erl, caso vocS o conhea( status3e< = "x ="par" 4aso contr.rio, sem pro-lemas7 a id*ia * simples( 9ara todo elemento da lista, vocS vai ter a chave( +u se0a, percorre/se toda a lista, mas ao inv*s de a vari.vel &ue a percorre
status3e< = "x par"
9ro'ramando Estruturadamente :G
Manual JavaScript swi!"h

+ sBitch permite &ue, ao inv*s de optar entre apenas duas opKes, possamos optar entre v.rias opKes, uma para cada valor de uma dada vari.vel ou e#presso aritm*tica( + normal * &ue o sBitch se0a utilizado para nmeros, mas em $ava%cript ele pode ser utilizado para vari.veis do tipo strin' tam-*m` Ve0a o uso de deciso( 9or ser de deciso Lal'o no e#atamente trivial por envolver e#pressKes l'icasM, achou/se melhor &ue fosse colocado nesta seo( >em, vocS viu o e#emplo anterior do if, nom + operador tern.rio <) condensado serve &uando temos uma vari.vel e dese0amos atri-uir a ela um valor dependendo de uma e#presso( E#atamente o caso do e#emplo( Ve0a o uso7
sw!t(h (var!avel) 6 (ase (ase ... (ase 7 p(a n9 ( "an+ p(a 19 ( "an+ p(a 29 ( "an+
var!avel = (expressa ) H val r'eIer+a+e!r 9 val r'eJals

@ simples de usar &uando a 'ente entende, e a0uda muito( @ menos til &ue o if, mas * um comando -astante poderoso Lno sentido de &ue faz muito em poucas linhas( No caso, umaM( Ve0a como fica a&uele if em verso condensada7
status3e< = ( (x % 2) == %) H "x par" 9 "x ="par"
+ sBitch verificar. se a vari.vel * XopcaoHX( %e no for, ele 6odularizao far. a verificao com Xopcao X, e assim por diante at* encontrar a i'ualdade( ?uando encontr./la, o sBitch simplesmente no verificar. ^s vezes acontece de precisarmos utilizar uma determinada mais nada e e#ecutar. todo o cdi'o &ue vier at* o fim do sBitch, se&ZSncia de comandos em v.rios cantos( A modularizao resolve inclusive o das verificaKes se'uintes( 9or isso, uma forma mais este pro-lema, permitindo &ue escrevamos mdulos de cdi'o/fonte, utilizada do sBitch *7 &ue possam ser chamados a &ual&uer momento(
sw!t(h (var!avel) 6 (ase (ase ... (ase 7

No cdi'o apresentado, ao encontrar um case &ue se0a i'ual Q vari.vel, o sBitch e#ecuta o comando e p.ra( 9ara mais de um comando, -asta colocar o -reaO no fim( 6ais de uma opo pode ser colocada em um case, como em todas as estruturas de repetio e deciso( 9ara isso, -asta &ue colo&uemos todos os comandos entre chaves onde colocaramos um comando apenas( 6as ve0amos um e#emplo de sBitch7 vamos fazer um trecho de cdi'o &ue escreva na tela a posio de al'uns dos 0o'adores da %eleo na 4opa !! (
p(a 19 ( "an+ / .rea4 p(a 29 ( "an+ / .rea4 p(a n9 ( "an+ / .rea4
+s mdulos / tam-*m conhecidos como funKes, procedimentos ou rotinas / so suportados por $ava%cript, assim como o so por &ual&uer lin'ua'em &ue tenha um mnimo de estrutura( Eles so construdos atrav*s da palavra reservada function, como se'ue7
-un(t! n -un(a () 6 ( "an+ / ( "an+ / ... 7

8entro de uma funo pode haver praticamente &ual&uer tipo de comando &ue poderia ser e#ecutado fora dela, incluindo estruturas de deciso, repetio e tudo o mais( Al'umas vezes temos uma id*ia 'eral aplic.vel a &ual&uer strin' ou nmero( 9odemos passar um valor por parImetro para a funo para &ue a operao se0a feita( 9or e#emplo, a funo a se'uir retorna um te#to pr*/definido envolvendo um valor passado por parImetro7
sw!t(h (> *a+ r) 6 (ase "?ar( s" 9 + (u"ent.wr!te("@ * le!r t!tular, (a"!sa 1#")/ .rea4 (ase "A nal+ "9 + (u"ent.wr!te("O (a"!sa B est +e v lta e art!lhe!r .")/ .rea4 (ase "A!val+ "9 + (u"ent.wr!te("Cer+ u a (a"!sa 1% - ! :real: "elh r +a ( pa.")/ .rea4 (ase "D+"!ls n"9 + (u"ent.wr!te("Ea*ue!r , "as a(h a!n+a nG -alara" pra ele.") 7 if "ondensado
+ <) condensado de &ue falo * na verdade um operador tern.rio
-un(t! n ex!.e(str) 6 alert("Ol# Olha s,9 " + str + " )G !n(r=velH") 7

2ma chamada como Xe#i-eLaessa funo e#i-e mesmo(aMX mostrar. uma 0anela de aviso com a se'uinte strin'7 X+l.` +lha s7 essa funo e#i-e mesmo( No * incrvelmX( 4laro &ue esta funo no vai ser de 'rande utilidade7 * apenas ilustrativa( VocS pode fazer com um valor passado por parImetro &ual&uer operao &ue vocS poderia fazer se ele fosse uma vari.vel normal(
Fue
2ma funo tam-*m pode retornar um valor e isso * feito com uso da palavra reservada return( + e#emplo a se'uir mostra uma funo &ue retorna um nmero inteiro unit.rio por e#tenso(
-un(t! n u"K rDxtens (n) 6 sw!t(h (n) 6
9ro'ramando Estruturadamente :H!
Manual JavaScript (ase %9 str = "5er "/ .rea4 (ase 19 str = "u""/ .rea4 (ase 29 str = "+ !s"/ .rea4 (ase L9 str = "trMs"9 .rea4 (ase N9 str = "Fuatr "/ .rea4 (ase O9 str = "(!n( "9 .rea4 (ase P9 str = "se!s"/ .rea4 (ase Q9 str = "sete"/ .rea4 (ase R9 str = " !t "/ .rea4 (ase B9 str = "n ve" 7 return str 7
Assim, podemos escrever XalertLum9orE#tensoL=MMX e ver na tela o nome XcincoX( Ao tra-alharmos com valores num*ricos, podemos fazer funKes $ava%cript &ue funcionem e#atamente como funKes matem.ticas especficas( As ltimas coisas &ue resta dizer so-re funKes7 o nome de uma funo pode ser passado como parImetro para outra funo( + cdi'o a se'uir chama dez 0anelas, cada um com um nmero, de ! a G( Deste(
%o-re 9arImetros
+s parImetros passados para uma funo podem ser o nmero &ue ela suporta, ou menos( 9or isso, Qs vezes se utiliza de uma estranha estrutura, como se'ue7
-un(t! n . "3!a(usr) 6 aux = (usr) H usr 9 "usur! 7

<sso si'nifica &ue se a funo for chamada como -om8iaLM, a frase &ue aparecer. ser. >om 8ia, usu.rio anPnimo``( <sso * muito til em al'uns casos, especialmente nos construtores de classes, como vocS ver. na pr#ima seo(
anSn!" "
alert("T " 3!a, " + usr + "##")
-un(t! n -a53e5Ie5es(-un() 6 - r (var ! = %/ ! 2 1%/ !++) 6 -un((!) 7 7 -a53e5Ie5es(alert)

+utra * &ue uma funo pode ser declarada de uma forma diferente7
var -a53e5Ie5es = -un(t! n (-un() 6 - r (var ! = %/ ! 2 1%/ !++)6-un((!)77

E tam-*m podemos atri-uir uma funo a uma vari.vel, como se'ue7
var
?es"
= -a53e5Ie5es
9ro'ramando Estruturadamente :HH
Manual JavaScript
9ro'ramando com +rientao a +-0etos
mas os detalhes so fundamentais neste ponto( <ma'ine um azul, placa A>4/H J", com um adesivo $ota 9apelaria no vidro de tr.s e A forma de pro'ramar em &ue simplesmente se ordena &ue um arranho pe&ueno na porta do motorista( 4laro &ue um carro tem coisas se0am e#ecutadas em se&ZSncia / forma conhecida como muito mais detalhes do &ue isso, mas vamos parar por a&ui( Este 9ro'ramao Estruturada ou <mperativa / no * a nica forma de se carro * um o-0eto, certom criar um pro'rama( H. al'umas outras e, nos ltimos anos, tem se A'ora vamos ver um outro Wa, mas este * -ranco, novo, com destacado cada vez mais uma dessas formas, mas uma forma os pneus 'astos, com um adesivo em cada porta de um escudo do especfica, a +rientao a +-0etos( Vasco Lno sou vascainoM( A placa \14/ECA=, e uma ima'em de 4hamadas de 9aradi'mas, formas de pro'ramar tSm muita Nossa %enhora no canto inferior es&uerdo do vidro da frente( diferena entre si e sair de uma para outra e#i'e uma mudana de Esses dois carros no tem nada a ver um com o outro, no * viso( @ preciso ver as coisas de outro modo( No caso especfico de verdadem 6as tem((( + &ue tSm a verm DSm a ver &ue os dois so 9ro'ramao +rientada a +-0etos, temos um paradi'ma &ue derivou )ords Wa e, portanto, muito parecidos apesar de tudo( +s dois tSm de dois outros7 a 9ro'ramao Estruturada e a )uncional( Este uma mesma composio Lse forem do mesmo anoM de portas, -ancos, paradi'ma realmente mostra as coisas funcionando de outra forma volantes, motor((( 6as o motor de um pode estar mais 'asto &ue o do mas, por trazer muita semelhana com a 9ro'ramao Estruturada, * outro, assim como os pneus estavam( 6as mesmo assim, esses possvel &ue se aprenda sua t*cnica e no seu esprito( 4omo componentes tam-*m tSm uma coisa em comum7 so do mesmo tipo( resultado disso, teramos al'u*m &ue pro'rama utilizando uma Em +rientao a +0etos, da mesma classe( lin'ua'em orientada a o-0etos, mas no o paradi'ma, fazendo as coisas &uase &ue da mesma forma &ue faria em uma lin'ua'em estruturada( $erana
Antes de 4omear
$ava%cript implementa, at* certo ponto, as vanta'ens da 9ro'ramao +rientada a +-0etos, permitindo seu uso( Est. fora do 9ode/se dizer &ue o \14/ECA= do e#emplo anterior era um escopo deste livro tratar a pro'ramao orientada a o-0etos carro, certom 6as pode/se dizer tam-*m &ue ele era um )ord Wa( diretamente, como paradi'ma, por isso no espere muito da sesso 4omo pode ser duas coisas se era apenas um o-0etom Na verdade, se'uinte, &ue prentende apenas orientar o leitor, se me permite o isso ocorre por&ue o )ord Wa * um carro( trocadilho( 9ara um estudo mais aprofundado da 9ro'ramao Esse papo parece meio -vio e confuso, nom + &ue * preciso +rientada a +-0etos, su'iro &ue recorra Q literatura apropriada( ver e#atamente * &ue o \14/ECA= no * simplesmente um carro e &ue nenhum carro * simplesmente carro( Dodos tSm um modelo de al'uma indstria &ue os define melhor( + &ue se deve entender tam-*m * &ue o )ord Wa * um carro( + Na 9ro'ramao +rientada a +-0etos, temos trechos de cdi'o &ue isso si'nificam %i'nifica &ue a id*ia do )ord Wa tem todas as &ue representam o-0etos( +-0etos di'itais esto 0o'ados em um caractersticas referentes Q id*ia de carro, por herana( am-iente montando um inteiro( ?uais so as caractersticas de carrom 9ossuem pneus, andam
+rientao a +-0etos
Com#osio
?uando dizemos &ue uma classe A herda de outra classe >, 2m o-0eto pode ser composto por valores Lcomputacionalmente falando, inteiros, strin's, -ooleanos(((M e outros &ueremos dizer &ue todo o-0eto # &ue se0a feito se'undo as normas de A, sendo considerado um A, ser. tam-*m consider.vel como um o-0etos( >( 4onsidere como coisas simples uma -arra de ferro ou madeira, um pedao de vidro ou &ual&uer elemento feito apenas com um material( Assim sendo, uma automvel no * uma coisa simples, mas 2sando +-0etos um o-0eto( 9oderamos falar diretamente do volante Le at* compr./lo separadamenteM, da temos &ue o volante * outra coisa( )az parte do 2m o-0eto * uma coisa &ue a'rupa vari.veis La&ui chamadas carro, mas e#iste completamente, mesmo sem carro Lse vai ser til ou de atri-utosM e funKes La&ui chamadas de m*todosM( A 'rande no sem o carro * uma outra &uestoM( 6as o volante * simplesm No, vanta'em ao usar o-0eto * &ue, al*m de a'ruparmos coisas &ue tSm a * um outro o-0eto( E assim temos o-0etos e mais o-0etos se ver entre si, elas passam a ser mais inte'radas( compondo, uns formados por outros, at* um momento em &ue no 2m atri-uto * acessado com um ponto depois do nome do h. mais o-0etos, apenas coisas simples( o-0eto, se'uido do prprio atri-uto( @ como se fosse uma vari.vel e pode ser utilizado da mesma forma(
no cho deslizando os pneus( 9ossuem motor e lu'ar para al'u*m &ue o conduza, dito motorista( ?uais as de um )ord Wam Dodas as de um carro, mais7 so e#atamente " os pneus e muitas outras(
Classes
2m m*todo tam-*m * acessado dessa forma, mas com parSnteses depois( Enfim, * tudo &uase i'ual( Assim, os comandos a 4lasses representam uma cate'oria de o-0etos e * a&ui &ue a se'uir so v.lidos( coisa comea a complicar para &uem no est. muito acostumado( Ao inv*s de e#plicar de cara, vou comear com um e#emplo( Vamos 5x(.( r = "wh!te" ima'inar um )ord Wa( No 'osto de fazer propa'anda de A ou de >,
9ro'ramando com +rientao a +-0etos :H
Manual JavaScript 5x(.an+ar() "ensa*e" = (5x(.arU n+!(! na+ ) H "Ve" ar ( n+!(! na+ " 9 ")G te" ar ( n+!(! na+ "
2m o-0eto funciona como um vetor associativo( Assim, vocS pode acessar a cor, por e#emplo, tam-*m com7
(ase L9 """ = ""arW "/ .rea4 (ase N9 """ = "a.r!l/ .rea4 (ase O9 """ = ""a! "/ .rea4 (ase P/ """ = ">unh "/ .rea4 (ase Q9 """ = ">ulh "/ .rea4 .rea4 .rea4 .rea4 .rea4 .rea4 7 return th!s.+!a + " +e " + """ + " +e " + th!s.an 7 th!s. .te"'!"ples = -un(t! n() 6 return th!s.+!a + "/" + th!s."es + "/" + th!s.an 7 th!s.es(reve = -un(t! n() 6 !- (th!s.extens ) 6 + (u"ent.wr!te( th!s. .te"Dxtens () ) 7 else 6 + (u"ent.wr!te( th!s. .te"'!"ples() ) 7 7 7
Esta classe, apesar de simples, 0. mostra al'o interessante7 permite &ue vocS escolha a forma na &ual a data ser. escrita( Assim, devemos criar um o-0eto do tipo data como se'ue7
5x($"( r"& = "wh!te" Estrutura Bith

%e vocS pretende tratar um s o-0eto, pode utilizar o comando Bith, utilizado assim7
(ase R9 """ = "a* st "/ (ase B9 """ = "sete".r "/ (ase 1%9 """ = " utu.r "/ (ase 119 """ = "n ve".r "/ (ase 129 """ = "+e5e".r "/
w!th (5x() 6 ( r = "wh!te" an+ar() 7

<sso cola-ora para &ue vocS poupe tempo e caracteres, o &ue pode ser muito importante em $ava%cript, 0. &ue tudo vai ser transferido pela rede antes de ser interpretado(
A 4riao de 4lasses
+ es&uisito de +( +( em $ava%cript * 0ustamente a&ui, na criao de classes( 2ma classe, em $ava%cript, * apenas uma funo( A nica coisa &ue difere * &ue nesta funo vocS utilizar. o this para a're'ar atri-utos e m*todos( + this referencia no somente a prpria classe, mas o o-0eto especfico durante sua e#ecuo( Este( 9ara adicionar um atri-uto, -asta escrever this(nome8oAtri-uto( %e for um o-0eto, vocS deve instanci./lo7 this(lista e neB ArraNLM( 9ara adicionar um m*todo, vocS deve utilizar a&uela forma estranha de definio de funo7 this(escreve e functionLM o document(BriteL this(te#to M p define um m*todo escreve &ue escrever. o contedo do atri-uto te#to deste o-0eto(
4lasse 8ata
Vamos ver se as coisas clareiam um pouco mais com um e#emplo7 trata/se de uma cl.ssica classe de 8ata &ue escreve a data por e#tenso e na forma simples(
-un(t! n 3ata(++, "", aa) 6 th!s.+!a = ++ th!s."es = "" th!s.an = aa = -alse = -un(t! n() 6 th!s.extens
var + = new 3ata(1%, %Q, 2%%2)

2ma vez feito isso, se escrevemos7
th!s. .te"Dxtens
sw!t(h (th!s."es) 6 (ase 19 """ = ">ane!r "/ .rea4 .rea4 (ase 29 """ = "-evere!r "/
+.extens
= true
Ao di'itarmos d(escreveLM, a data ser. escrita por e#tenso( %em isso, ela ser. escrita na forma normal(
9ro'ramando com +rientao a +-0etos :HJ
Manual JavaScript 4omposio

@ muito simples o conceito( Do simples &ue no h. muito o &ue falar( 2m o-0eto * uma vari.vel( 2ma classe pode definir atri-utos, &ue so vari.veis( 9or conse&ZSncia, um atri-uto pode tam-*m ser um o-0eto e esse o ponto chave( @ s colocar this(atri-uto e neB 4lasseLparamsM e pronto( (
Herana
A herana, como 0. foi e#plicado no tpico paradi'ma, * &uando &ueremos dizer &ue uma classe A *, de certa forma, uma especializao da classe >(
2m dos e#emplos mais cl.ssicos disso * o de 9essoa( Vamos supor uma classe 9essoa( Ela teria como atri-utos nome, endereo, telefone, e/mail((( A'ora &ueremos uma 9essoa )sica( >asta acrescentarmos o 49) e outras coisas mais( No * interessante re/ escrever tudo( 2ma 9essoa $urdica teria o 4N9$( No final, a classe 9essoa deveria ter o &ue h. em comum entre 9essoas )sicas e $urdicas( 2sando herana, ns no precisaremos re/escrever tudo, -asta dizermos &ue 9essoa)isica, apesar de ter 49) e outras coisas, * uma 9essoa( + mesmo com 9essoa $urdica( $ava%cript possui um 0eito muito es&uisito de se definir isso7 com o prottipo da funo L* o construtor da classe, mas para o $ava%cript ainda * uma funoM( + acesso * na forma constructor8a4lasse(prototNpe e neB construtor8a4lasse6ae( Apenas isso( %em parSnteses mesmo` 3em-re &ue em $ava%cript o construtor da classe * o prprio nome da classe( Vamos a um e#emplo( Vamos supor &ue 0. e#iste uma classe 9essoa, inclusive com um m*todo escreverLM &ue escreve na tela todos os seus dados na forma 4ampo7 Valor
-un(t! n Kess aJ!s!(a() 6 th!s.(pth!s.setUKJ(n) 6 th!s.(p- = n 7 th!s.es(rever() 6 parent.es(rever() + (u"ent.wr!te("UKJ9 " + th!s.(p- + "X2TAX;") 7 7
Este cdi'o est. muito simples e falta al'uma coisa, nom )alta dizermos &ue uma pessoa fsica * tam-*m uma pessoa( 9ara isso, devemos escrever Ldepois de escrita toda a classeM a linha 0. apresentada7
Kess aJ!s!(a.pr t type = new Kess a

+utra coisa interessante &ue ainda no foi dita * o parent( @ a forma de acessar m*todos da classe/me( A chamada &ue est. na classe 9essoa)isica si'nifica 4lasse/me(escreverLM 4om isso temos &ue uma pessoa fsica * tam-*m uma pessoa(
9ro'ramando com +rientao a +-0etos :H"
Manual JavaScript
<ara $ava%cript 4ode %tandards

H( + cdi'o $ava%cript escrito por &ual&uer pessoa &ue si'a este padro se0a compreendido e modificado por &ual&uer outra pessoa &ue tam-*m conhea este padro sem &ual&uer pro-lemaR Este padro est. sendo proposto para tornar possvel7 ( Vari.veis incrementadasTdecrementadas devem aparecer com o operador pr#imo a elas e separadas das demais da e#presso Le demais operadoresM por espaos Lantes e depois, mas nunca acumulados com outros espaos &ue a e#presso 0. tra'a pr#imo ao kinddelcrementoM( se'undo operandoM(
4omo se pode notar facilmente, o tem parece conflitar com o tem J( 9or isso, procuramos criar um meio termo entre os dois7 um cdi'o -em/escrito e en#uto ao mesmo tempo( @ neste ponto &ue reside o maior tra-alho na ela-orao deste padro(
J( Feunir -oas pr.ticas de codificao(
( A escrita de cdi'os $ava%cript pe&uenos, &ue possam ser transferidos pela <nternet 'erando to pouco tr.fe'o &uanto for possvelR
J( E#pressKes &ue demandem parSnteses e chaves Ltais como o if, o Bhile ou mesmo o functionM no apresentaro espaos na concatenao com parSnteses e com chaves(
"( Encadeamentos de comandos separados por ponto/e/ vr'ula devem ter um espao aps cada ponto/e/vr'ula(
=( 3istas separadas por vr'ula no devem apresentar espaos entre seus tens e as vr'ulas( Esta * a forma proposta pelo padro7
<ndentao
H( No se deve utilizar o demarcador de fim/de/cdi'o Lponto/e/vr'ulaM / como em 9Nthon /, e#ceto em dois casos especiais7 o for &uando usado em estilo 4 Ldois comandos U uma e#presso l'icaM e o case &uando tiver apenas um comando Lpode/se usar ponto/e/vr'ula para separar o comando do -reaOM( 4omo conse&ZSncia, e#ceto nos casos e#plicitados, cada linha de cdi'o dever. apresentar no m.#imo um comando(
x =y *2 +L /5
A&ui temos um caso se atri-uio seletiva Ll'ica de circuitosM7
aux =x YYy YY2%

+utro e#emplo maior7
-un(t! n s "aZnte!r s(a,.)6 s =:A s "a +e : +a +: ( " : +. +: ret rn u : wh!le(. ;%)6 a++ .00 7 wh!le(. 2%)6 a00 .++ 7 return s +a +:.: 7
Note &ue o nico espao na primeira linha * o &ue se encontra depois de function(
J( + delimitador de fim de -loco Lfecha chavesM deve aparecer sozinho na linha e no mesmo nvel de indentao da linha de cdi'o &ue a-riu o -loco( "( No se deve utilizar espaos para indentao, apenas o caractere de ta-ulao LDA>M(
( + delimitador de incio de -loco La-re chavesM deve ser colocado ao final da estrutura &ue anuncia o -loco(
=( + cdi'o comea alinhado Q es&uerda, no sendo necess.rio usar uma ta-ulao para o nvel inicial do ar&uivo 0s( A( 8eve/se evitar o uso de linhas em -ranco no cdi'o( ?uando necess.rias para or'anizao, certifi&ue/se de no haver caracteres -rancos Lta-ulaKes e espaosM na linha( C( >locos formados por uma s linha de cdi'o no precisaro de delimitadores de incio e fim, somente da indentao(
-un(t! n exe"pl ()6 - r(! =%/ ! 21%/ !++) exe"pl r +a+ 7 E#pressKes
H( ?ual&uer operador Lmatem.tico, l'ico, de atri-uioM deve ser escrito com um espao antes Lentre o operador e o primeiro operandoM e nenhum depois Ldeve estar unido ao
alert(:(: +! +:) Dste +a !+entaWG :) alert(:O exe"pl : +! +: ve5es.:) +a !+entaWG - !
4oncatenao de strin's La e - so convertidos em strin's automaticamenteM7 colocar um espao antes de cada sinal de concatenao(
4oment.rios
Evite colocar coment.rios no cdi'o( Dente fazer o cdi'o da maneira mais clara e auto/e#plicativa possvel, colocando apenas coment.rio essenciais Lcomo, por e#emplo, o ca-ealho do ar&uivo, onde deve haver uma nota da licena de distri-uioM(
<ara $ava%cript 4ode %tandards :H=
Manual JavaScript Nomenclatura

H( Nomes devem ser escritos em in'lSs, h.-ito considerado -oa pr.tica de pro'ramao( 2m softBare no est. preso a nenhuma cultura especfica, no sendo cultural, mas uma forma internacional de resolver pro-lemas( 9or isso, escrever cdi'o com nomes em in'lSs no * falta de patriotismoR ( Nomes so essencialmente em caracteres minsculos, e#ceto nos casos tratados nos pr#imos tensR "( Valores -ooleanos devem ser e#pressos como true ou false sempre &ue houver risco de valores num*ricos causarem confusKes( + ideal, entretanto, * &ue se utilize sempre ! e H, como em 4(
4lasses
H( 6*todos devem ser declarados dentro da prpria classe( ( Herana deve ser feita atrav*s do processo de refazer o construtor a partir do construtor da classe me7 cria/se um m*todo maOe pela atri-uio do construtor da classe me e invoca/se tal m*todo lo'o em se'uida(
J( Nomes de classes comeam sempre com a primeira letra em maisculo, a menos &ue se0a uma classe de uma A9<( Neste caso, a A9< deve fornecer uma su-/strin' padro, &ue dever. estar no incio dos nomes de todas as classes da A9<( Esta su-/strin' pode ter letras maisculas e minsculas livrementeR
"( %empre &ue o nome tiver mais &ue uma palavra o formando, cada palavra depois da primeira L&ue se'ue as re'ras apresentadas acimaM deve ser unida ao restante, mudando/se apenas a primeira letra para maiscula( Nunca utilizar su-linhados para essas uniKes( =( Nomes de atri-utos e m*todos privados devero ter um caractere q no incio( <sso no os torna praticamente privados, mas conceitualmente, entre ns pro'ramadores( 2ma soluo similar * utilizada em 9erl =, &ue tam-*m no traz o conceito de m*todo privado( A( 8eve/se evitar a-reviaKes( E#emplificando(((
J( No caso de herana mltipla, o m*todo ter. o mesmo nome, mas os dois passos sero se'uidos mais de uma vez, sempre em par( Ve0amos, por e#emplo, a classe A8%4ode(
-un(t! n A3'U +e(s)6 th!s.( ntent =s YY:: th!s.a++ =-un(t! n(s)6 th!s.( ntent +=s 7 th!s. .ta!n =-un(t! n()6 return th!s.( ntent 7 th!s.wr!te =-un(t! n()6 n()) 7 7 + (u"ent.wr!te(th!s. .ta!
( "pleteVa.le =new A3'Va.le()

+ e#emplo acima mostra um o-0eto completeDa-le sendo criado a partir da classe A8%Da-le(
+ o-0eto * formado pelo nome 4omplete Da-le( 4omeando com minscula por ser o-0eto, temos complete Da-le( 4omo * dito, cada palavra al*m da primeira deve ser unida ao resto, com a primeira letra em maiscula( 9or isso, Da-le se une ao complete, mantendo o D maisculo7 completeDa-le(
A classe apresentada * a implementao de ta-ela de uma @ desta forma &ue todos os m*todos so definidos dentro da suposta A9< &ue adotou a su-/strin' XA8%X para definir suas classes( classe( Ve0a add, o-tain e Brite( 9or isso a classe tem esse nome7 A8% U Da-le( A'ora suponha uma classe A8%9ara'raph, apenas para e#emplificar Lusando kpl para a ta' de par.'rafo, apenas para simplificar a edio a&ui, na Be-M(
Vari.veis
H( 4onstitui/se uma -oa pr.tica de pro'ramao a declarao de vari.veis( Entretanto, no havemos de declarar uma vari.vel por &uestKes de tamanho do ar&uivo 'erado LvarM( +utras lin'ua'ens amplamente conhecidas no oferecem forma de se declarar vari.veis L9H9 "M ou a oferecem como opcional L9erl = em modo normalM( 9ortanto, consideraremos a declarao de uma vari.vel como um h.-ito no/primordial para a -oa apresentao do cdi'o, a-olindo/a(
-un(t! n A3'Kara*raph(s)6 th!s."a4e =A3'U +e th!s."a4e(s) th!s. .ta!n =-un(t! n()6 return :$p&: +th!s.( ntent+ :$/p&:
7 ( 2ma vari.vel deve ser sempre inicializada com um valor e#plcito, de uma outra vari.vel ou retorno de uma funo( 7 No se deve utilizar &ual&uer operador &ue a0a so-re a vari.vel sem &ue esta tenha rece-ido um valor inicial( Dal As duas linhas &ue comeam com th!s."a4e fazem com deve ser feito, preferencial mas no necessariamente, no &ue o A8%9ara'raph herde todo o comportamento e estado inicial de incio do -loco de cdi'o( A8%4ode( J( Vetores devem ser declarados com kl e no com neB No e#emplo, so-rescrevemos o m*todo o-tain, perdendo o ArraNLM( herdado de A8%4ode(
<ara $ava%cript 4ode %tandards :HA

Manual 2 em 1 Javascript

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual 2 em 1 Javascript

Загружено:

Авторское право:

Доступные форматы

Apostila de JavaScript

Prof. Lus Rodrigo de O. Gonalves

Apostila de JavaScript verso 0.01 Pgina 1 de 48

Apostila de JavaScript verso 0.01 Pgina 2 de 48

1.1) Consideraes iniciais

Apostila de JavaScript verso 0.01 Pgina 3 de 48

document.write("Aqui j JavaScript"); </SCRIPT> Voltamos para o HTML </BODY> </HTML>

Apostila de JavaScript verso 0.01 Pgina 4 de 48

Apostila de JavaScript verso 0.01 Pgina 5 de 48

1.3.1) Operadores unrios e binrios

1.3.2) Operador de String

1.3.3) Operadores Matemticos

Apostila de JavaScript verso 0.01 Pgina 6 de 48

Mdulo da diviso ou resto ( % ) Exemplo:

Incremento ( ++ ) Pode acontecer de duas formas: ++Varivel ou Varivel++ Exemplo:

Decremento ( -- ): Pode acontecer de duas formas: --Varivel ou Varivel-Exemplo:

Apostila de JavaScript verso 0.01 Pgina 7 de 48

1.3.4) Operadores relacionais

1.3.5) Operadores lgicos

1.3.6) Operadores de atribuio

Apostila de JavaScript verso 0.01 Pgina 8 de 48

2.1) Criando Objetos

Function CriaClientes(nome,endereco,telefone,renda) { this.nome=nome; this.endereco=endereco; this.telefone=telefone; this.renda=renda; }

Para acessar as propriedades do objeto Maria, basta usar a seguinte sintaxe:

Apostila de JavaScript verso 0.01 Pgina 9 de 48

Maria.renda - retorna 1300

Uma outra forma de referenciar as propriedades do objeto Maria, :

Uma forma mais prtica de criar arrays poderia ser a seguinte:

Para criar nossa matriz usaramos o seguinte comando:

O prximo passo seria apenas incluir os dados:

Podemos tambm utilizar os dois mtodos ao mesmo tempo!

Apostila de JavaScript verso 0.01 Pgina 10 de 48

Apostila de JavaScript verso 0.01 Pgina 11 de 48

Apostila de JavaScript verso 0.01 Pgina 12 de 48

Function NomeDaFuno([ parametro1, parametro2, ..., parametroN ]) { ... [Return(ValorDeRetorno)] }

A chamada de funes feita da seguite forma:

Apostila de JavaScript verso 0.01 Pgina 13 de 48

Apostila de JavaScript verso 0.01 Pgina 14 de 48

// end hiding contents --> </script> </head>

<body> ... <script>hello();</script> ... </body> </html>

3.7) Estruturas de Controle

Apostila de JavaScript verso 0.01 Pgina 15 de 48

Function SearchIn(Procura,Objeto,Nome) { Var ResultadoDaBusca = "" For (Procura In Objeto) { document.write(Nome+"."+Procura+"="+Objeto[Procura]+"<BR>"); } }

Apostila de JavaScript verso 0.01 Pgina 16 de 48

Apostila de JavaScript verso 0.01 Pgina 17 de 48

escape - Obtm o cdigo ASCII de um caracter que no seja alfa-numrico.

eval - Avalia uma expresso numrica, retornando um resultado tambm numrico.

Apostila de JavaScript verso 0.01 Pgina 18 de 48

Apostila de JavaScript verso 0.01 Pgina 19 de 48

Apostila de JavaScript verso 0.01 Pgina 20 de 48

<form NAME="clientes"> Nome: <input TYPE="text" NAME="empresa" value=" "> ...

Dessa forma, em vez de usarmos, por exemplo:

Apostila de JavaScript verso 0.01 Pgina 21 de 48

hostname - Armazena uma string, com o IP da pgina HTML atual.

href - String identica a mostrada na barra "location" do browser.

pathname - Contm uma string com o path da pgina HTML atual.

Apostila de JavaScript verso 0.01 Pgina 22 de 48

protocol - String que armazena o protocolo de acesso a um determinado endereo. ("http:","ftp:","file:").

Mtodos: toString - Converte o contedo do objeto location para uma string.

<OPTION VALUE = "optionValue" [SELECTED] > Texto ... <OPTION...> </SELECT>

Apostila de JavaScript verso 0.01 Pgina 23 de 48

Propriedades: lenght - Informa o nmero de opes disponveis.

name - Informa o nome que o programador definiu para o objeto select.

<FONT SIZE="-1" FACE="Britannic Bold" COLOR="#000080">© 1997 Anderson Barros Torres</FONT><BR><BR><BR>