Javascript

rea Inicial Scripts www.areainicial.hpg.com.
br Apostila de JavaScript
JAVASCRIPT
Este trabalho no visa esgotar todo assunto referente a JavaScript, mas sim, como o prprio ttulo sugere, ser um guia de referncia para consultas rpidas. Por este motivo, assumo que voc j possui conhecimentos substanciais sobre programao (a linguagem realmente no importante), e que conceitos como laos e estruturas de deciso j so de seu conhecimento. O JavaScript utiliza os recursos da programao orientada a objetos, e como a finalidade deste trabalho no ensinar voc a programar, os fundamentos da POO, no sero abordados profundamente, presumo que voc j tenha algum conhecimento sobre esse tipo de programao. Em resumo, o que quero fazer nesta apostila mostrar-lhe porque o JavaScript to til e o que voc precisa saber para torn-lo parte de sua caixa de ferramentas no desenvolvimento e incrementao de suas Home-Pages. Para facilitar o aprendizado, este tutorial est dividido em partes de forma a proporcionar uma seqncia lgica, que deve ser seguida para os que sabem nada sobre o assunto. Introduo O que JavaScript? JavaScript uma nova linguagem para criao de Home-Pages. Funes escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript voc tem muitas possibilidades para incrementar seu documento HTML com elementos interessantes. Por exemplo, voc ser capaz de responder facilmente a eventos iniciados pelo usurio. Alguns efeitos que so possveis agora com JavaScript antes eram possveis apenas com CGI. Assim voc pode criar na verdade sofisticadas pginas com a ajuda do JavaScript. Existem atualmente, muitos exemplos sobre JavaScript na Internet. Para ter uma idia do potencial desta linguagem, melhor voc dar uma olhada em algumas pginas realadas com JavaScript. Voc pode encontrar muitos links em Gamelan => http://www.gamelan.com (na seo JavaScript). Qual a diferena entre JavaScript e Java? 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. claro que esta no uma definio oficial, pois meu pensamento fazer esta distino entre Java e JavaScript de maneira fcil para o melhor entendimento de todos. Voc pode encontrar mais informaes sobre Java e JavaScript em http://www.gamelan.com. rea Inicial Scripts fernandodercoli@bol.com.br 1
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Onde os textos JavaScript podem ser executados? O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0. claro que as verses posteriores tambm trabalham com JavaScript. Voc deve saber que Java no funciona no Netscape Navigator 2.0 ou posterior. Mas isso no verdade para JavaScript ainda que existam alguns problemas com as diferentes verses diferentes de JavaScript. A verso para o Mac parece apresentar muitos bugs. 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 (entre 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> Este exemplo mostraria o seguinte: Esta uma linha escrita em HTML Aqui j JavaScript Voltamos para o HTML Este exemplo realmente no dos mais teis - poderia ter sido escrito mais facilmente em HTML puro. O objetivo foi apenas demonstrar o uso das TAGs <SCRIPT> e </SCRIPT>, tudo que est entre essas TAGs encarado como JavaScript.
rea Inicial Scripts fernandodercoli@bol.com.br
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript importante ressaltar, que como no C++, as linhas sejam terminadas com; (ponto e vrgula) 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). E se o browser no possuir suporte a JavaScript? Um browser que no suporta JavaScript, ele no conhece a TAG <SCRIPT>. Ele ignora a TAG e, logicamente, 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 . 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 rea Inicial Scripts fernandodercoli@bol.com.br 3
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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), para isso ele s precisa escolher a opo Document Source, no menu View.
Iniciando 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 para defini-las. Podem existir variveis globais com o mesmo nome de variveis locais, porm, esta prtica no aconselhvel. 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 - carriage return. O JavaScript reconhece ainda 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.
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Quando uma varivel possui o valor NULL, significa dizer que ela possui um valor desconhecido ou nulo, o null no igual a nada, nem mesmo ao prprio null. 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.
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. Operadores Ulnrios 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. Operador de String Operador de concatenao
Exemplo: Nome1= Jos Nome2= Silva Nome = Nome1+ da +Nome2 // O resultado : Jos da Silva
Operadores Matemticos Adio
Exemplo: V01=5 V02=2 V=V01+V02 // resulta em: 7 - Subtrao Exemplo: V01=5 rea Inicial Scripts fernandodercoli@bol.com.br 5
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 (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 VarivelExemplo: V01 = 5 V02 = --V01 // Resulta em 4 rea Inicial Scripts fernandodercoli@bol.com.br 6
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript V03 = V01 // Resulta em 4 Exemplo: V01 = 5 V02 = V01-- // Resulta em 5 V03 = V01 // Resulta em 4 Operadores relacionais < Menor que Maior que
= = Igual != Diferente >= Maior ou igual <= Menor ou igual
Operadores lgicos && E lgico || Ou lgico
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 rea Inicial Scripts fernandodercoli@bol.com.br 7
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Objetos Quando lemos um livro sobre OOP, chegamos a incrvel concluso de que o autor tenta nos convencer de que um objeto pode ser qualquer coisa. O mais incrvel ainda que ele est absolutamente certo! No pretendo aqui discutir a respeito desse assunto, vou apenas relembrar alguns conceitos bsicos. Vou fazer uma comparao com uma Tv. 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. Criando Objetos Trabalhar com objetos a nica forma de manipular com 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: rea Inicial Scripts fernandodercoli@bol.com.br 8
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Maria = New CriaClientes(Maria Aparecida,Rua Guilhotina dos Patos, S/N,3321148,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 Voc deve estar se perguntando: Mas voc enrolou e no disse nada sobre arrays... Est a o que voc queria! 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 rea Inicial Scripts fernandodercoli@bol.com.br 9
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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
Comandos Alm das estruturas de controle, o JavaScript oferece alguns poucos comandos: Break Continue Var With Function Return Comment rea Inicial Scripts fernandodercoli@bol.com.br 10
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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. Forma geral: Var NomeDaVarivel [ = <valor> ]; Exemplo: Var Contador = 0; Var Inic=,Tolls=0,Name=TWR; Var Teste; // Neste caso, Teste possui valor null 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; } rea Inicial Scripts fernandodercoli@bol.com.br 11
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 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++) { rea Inicial Scripts fernandodercoli@bol.com.br 12
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript If (x = = 5) { continue } document.write(x) }
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> rea Inicial Scripts fernandodercoli@bol.com.br 13
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Function hello(){ alert(Al mundo!!!); } </script> </head> <body> ... <script>hello();</script> ... </body> </html> Nota: Em JavaScript, no possvel utilizar-se da recursividade, ou seja, uma funo no pode chamar ela mesma
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 smbolo 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>
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... 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: rea Inicial Scripts fernandodercoli@bol.com.br 15
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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); } 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 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>); } } rea Inicial Scripts fernandodercoli@bol.com.br 16
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 Ifs 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... 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 }
17
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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++) ;}
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 caractere 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 caractere que no possa ser convertido, a operao para, retornando o valor antes do erro. Ex: paseInt(string,base) parseInt(FF,15) // retorna 256 parseInt(3,10) // retorna 3 rea Inicial Scripts fernandodercoli@bol.com.br 18
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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.
Objetos JavaScript Objetos Javascript - uma viso geral

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:
19
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript
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. Este objeto window 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, vejamos como: 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]. rea Inicial Scripts fernandodercoli@bol.com.br 20
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 grades 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 rea Inicial Scripts fernandodercoli@bol.com.br 21
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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. rea Inicial Scripts fernandodercoli@bol.com.br 22
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Ex: alert(location.toString() = +location.toString) // Este valor o mesmo que location.href. 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. rea Inicial Scripts fernandodercoli@bol.com.br 23
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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. 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 rea Inicial Scripts fernandodercoli@bol.com.br 24
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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> 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 rea Inicial Scripts fernandodercoli@bol.com.br 25
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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>Torres Home Page - JavaScript - Applet 06</TITLE> <SCRIPT>  </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> Form rea Inicial Scripts fernandodercoli@bol.com.br 27
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 acessar-mos 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 metodos transferem dados do browser para o servidor, com a seguinte diferenca:
28
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript METHOD=GET - os dados de entrada sao acrescentados ao endereo (URL) associado, como se fossem uma query (pesquisa a banco de dados) comum; METHOD=POST - os dados nao so acrescentados ao URL, mas fazem parte do corpo da mensagem enviada ao servidor. Obs.: Omtodo 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> <META NAME=GENERATOR CONTENT=Claris Home Page 2.0> </HEAD> <BODY> <FORM action=mailto:esaex@canudos.ufba.br method=POST>
<P><TT><B><H1>Exemplo:</H1></B></TT> rea Inicial Scripts fernandodercoli@bol.com.br 29
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript <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>
30
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript <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> 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. rea Inicial Scripts fernandodercoli@bol.com.br 31
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript CHECKED - Se especificado a CheckBox j vai aparecer selecionada Value - Define um rtulo para a CheckBox. S no consegui descobrir para que! 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. Ainda no encontrei utilidade para este campo na CheckBox, caso voc saiba... Ex: NomeDoObjeto.value checked - Retorna um valor lgico que depende do estado do objeto CheckBox NomeDoObjeto.checked // equivale a True se o objeto estiver 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 // sempre 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 estivessemos clicado na CheckBox mas sem que o usurio tenha realmente clicado. Select01.click() // executaria a funo ConfirmaInformacoes 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); rea Inicial Scripts fernandodercoli@bol.com.br 32
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript } </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> 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 incluimos alguma declarao no <BODY> do documento, estamos alterando (sem perceber) 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; rea Inicial Scripts fernandodercoli@bol.com.br 33
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript #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 o link. 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. (Informtica Exame - JUL/97). Esta propriedade melhor especificada pela prpria Netscape fgColor - Determina a cor das letras em uma pgina HTML. Esta propridade 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.
34
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript referrer - Armazena o endereco (URL) de quem chamou a pgina HTML atual. Com essa propriedade voc pode saber o usurio chegou a 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 sequncia 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!!!)> 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. rea Inicial Scripts fernandodercoli@bol.com.br 35
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Como todo objeto, podem ser criadas novas instncias para este objeto, o que muito comum por sinal, 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. (este objeto foi definido com o comando NEW, que criou uma nova instncia do objeto date( )). 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) rea Inicial Scripts fernandodercoli@bol.com.br 36
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript getTime - Obtm o tempo decorrido desde 01/01/70 at o presente momento. O nico incoveniente 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(); } rea Inicial Scripts fernandodercoli@bol.com.br 37
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 rea Inicial Scripts fernandodercoli@bol.com.br 38
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript + , 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> rea Inicial Scripts fernandodercoli@bol.com.br 39
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript </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> 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 parmetropginas 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. Window rea Inicial Scripts fernandodercoli@bol.com.br 40
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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 importate 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 vrulas e sem conter espaos. rea Inicial Scripts fernandodercoli@bol.com.br 41
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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,too lbar=1,location=1,directories=0,status=1,menubar=1,scrollbars=1,resizable=0,width=320,hei ght=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. 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: rea Inicial Scripts fernandodercoli@bol.com.br 42
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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> <META NAME=GENERATOR CONTENT=Claris Home Page 2.0> </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 color=#000000 >E</FONT><FONT SIZE=+3 color=#000000 >xemplo</FONT></I></B> </CENTER> <BR><BR> rea Inicial Scripts fernandodercoli@bol.com.br 43
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript <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> Link HTML permite ligaes de uma regio de texto (ou imagem) a 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 ligacao hipertexto; ncora - o texto ou imagem que servira de ligao hipertexto do documento sendo apresentado para o documento destino. janela - Nome da janela onde a pgina ser carregada, para o caso de estarmos trabalhando com frames. O valor de janela causa o seguinte impacto: _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> rea Inicial Scripts fernandodercoli@bol.com.br 44
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript 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. Ex: Vejamos a figura abaixo:
figura 1 Esta figura representa a estrutura de diretrios do servidor Geocities, e o caminho em vermelho, o endereo completo de minha pgina. Observe que o arquivo em destaque JavaInde.htm a pgina inicial deste tutorial, as outras pginas que completam este tutorial esto no mesmo diretrio que a pgina principal, portanto, no ha necessidade de quando a pgina principal for carregar outra que esteja no mesmo diretrio, incluir todo o trajeto para se chegar a ela, basta referenciar <A HREF=parte1.htm>PARTE 1</A>, ao em vez de <A HREF = http://www.geocities.com/ CapitolHill/6126/parte1.htm>PARTE 1</A>. Se bem que as duas formas funcionam de maneira identica. 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>
parte1.htm rea Inicial Scripts fernandodercoli@bol.com.br 45
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript <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 trcho 2 no topo da janela do browser.
Para terminar...
Bem, estamos no fim deste tutorial e se voc chegou at aqui, porque voc realmente deseja pelo menos conhecer um pouco mais sobre JavaScript, e espero que tenha contribudo para isso. Tentei ser o mais objetivo e prtico possvel e reunir em apenas uma apostila, a gama de conhecimentos adquirido ao longo de vrias horas garimpando na Internet, pois como sabemos, existe muito lixo por a.
46
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript
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 funces. abstract float boolean for break byte case cath char class const function goto if public return short static super
implement switch s import in sinchronize d this throws transient true try var void while with
instanceof throw
continu int e default interface do else false final finally long new package private protected double native extends null
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:
47
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Aqui esto 140 Literais que especificam as cores. O quadro est em ordem alfabtica, os nomes maiores aparecem no fim da lista Nome da Cor Exemplo Nome da cor Exemplo Nome da cor Exemplo aliceblue aquamarine bisque blue burlywood chocolate cornsilk darkblue darkgray darkorchid aliceblue aquamarine bisque blue burlywood chocolate cornsilk darkblue darkgray darkorchid antiquewhite azure black blueviolet cadetblue coral crimson darkcyan darkgreen darkred darkslateblue dimgray antiquewhite azure black blueviolet cadetblue coral crimson darkcyan darkgreen darkred darkslateblue darkviolet dimgray floralwhite aqua beige brown chartreuse cornflowerblue cyan darkgoldenrod darkkhaki darksalmon darkslategray deeppink dodgerblue forestgreen aqua beige brown chartreuse cornflowerblue cyan darkgoldenrod darkkhaki darkorange darksalmon darkslategray deeppink dodgerblue forestgreen
blanchedalmond blanchedalmond
darkmagenta darkmagenta darkseagreen darkseagreen deepskyblue deepskyblue
darkolivegreen darkolivegreen darkorange
darkturquoise darkturquoise darkviolet firebrick firebrick floralwhite Selecione a cor de fundo:
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.
48
fuchsia gold green hotpink ivory lightblue lightgreen lightsalmon lime magenta
fuchsia gold green hotpink ivory lightblue lightgreen lightsalmon lime magenta
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript gainsboro gainsboro ghostwhite goldenrod indianred khaki lightcoral lightgrey goldenrod indianred khaki lawngreen lightcoral lightgrey gray honeydew indigo lavender lightcyan lightpink greenyellow greenyellow
ghostwhite gray honeydew indigo lavender lightcyan lightpink lightyellow linen
lavenderblush lavenderblush lawngreen
lemonchiffon lemonchiffon
lightseagreen lightseagreen lightskyblue lightskyblue lightsteelblue lightsteelblue lightyellow limegreen maroon limegreen maroon linen
lightslategray lightslategray
mediumblue mediumblue
midnightblue midnightblue moccasin oldlace orange palevioletred peru powderblue rosybrown salmon seashell skyblue snow tan tomato wheat yellow moccasin oldlace orange palevioletred peru powderblue rosybrown salmon seashell skyblue snow tan tomato wheat yellow
mintcream olive orangered
mintcream olive orangered palegreen pink purple royalblue sienna slateblue teal turquoise white
mistyrose olivedrab orchid
mistyrose navy olivedrab orchid peachpuff plum red seagreen silver slategray steelblue thistle violet whitesmoke
navajowhite navajowhite navy
palegoldenrod palegoldenrod palegreen pink purple royalblue sienna slateblue teal turquoise white
paleturquoise paleturquoise plum red
papayawhip papayawhip peachpuff
saddlebrown saddlebrown silver slategray steelblue thistle violet whitesmoke
sandybrown sandybrown seagreen
springgreen springgreen
yellowgreen yellowgreen
Nome da Cor
Exemplo
Nome da Cor
Exemplo 49
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript lightgoldenrodyellow lightgoldenrodyellow mediumaquamarine mediumaquamarine mediumorchid mediumseagreen mediumspringgreen mediumvioletred mediumorchid mediumseagreen mediumspringgreen mediumvioletred mediumpurple mediumslateblue mediumturquoise mediumpurple mediumslateblue mediumturquoise
Abaixo
Abaixo Deixarei alguns links para voc consultar, mas no esquea de visitar nosso site, meio de fundo de quital, mas foi assim que comeou a Apple e a Microsoft, quem sabe um dia??
Links
Favotite Java Applets Symantec Java Central - Related Links Java Zine Java and Javascript Things Experiments in JavaScript - uma lista de exemplos em Java; JavaScript Index JavaScript uthoring Guide Netscapes JavaScript Links Netscape Java Script JavaScript Authoring Guide - documentao sobre Java Script; HotJava Java Repository Home Page JavaScript Resource Center Java Message Central Club Java JavaScript-Intro by Voodoo - documentao sobre Java Script; JavaScript & Java Experiments Simple Little Things To Add To Your Pages - ensina a criar janelas e botes em java; Playing with JavaScript Java - WWW Virtual Library Applets Galore! Craig Slagels JavaScript JavaScript Index - vrios links relacionados ao assunto; The JavaScript Library rea Inicial Scripts fernandodercoli@bol.com.br 50
rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript Kurtis JavaScript Reference Craig Slagels Javascript demos The Javascript Netscape Scripting Language JDK 2.0b Quick Reference Forms Processing Engine Java Resources Web Page The Dive James Thieles JavaScript stuff Timothy Index Jasons Java Script Archive JavaScript 411 Gamelan: Earthwebs Java Directory - uma lista com cerca de 2500 itens. Gamelan: Earthwebs Java Directory Advanced Web Development Links The JAVA Script Planet JavaScript Book JavaScript Tip of the Week - timas dicas sobre Java; ISN Cut-N-Paste JavaScript Ashleys JavaScript Examples Java Applet Rating Service The Java Centre The Java Centre - Enjoy your visit JavaSoft JavaWorld The Java Boutique a tutorial on Java Programming JavaScript Tutorial Java - Netspace Javelin HotJava Cafe Club Hot Java JavaScript SunSoft Java WorkShop Technical and Support Information Symantec http://www.Thejavaplace.com - The best place on the Web For Java and JavaScript. Robert Olssons Javascripts JavaScript examples Yahoo Java Resources Rodos Javascript Examples The Java Boutique Java Book List
51

Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

rea Inicial Scripts www.areainicial.hpg.com.

rea Inicial Scripts fernandodercoli@bol.com.br

rea Inicial Scripts fernandodercoli@bol.com.br

Operadores Matemticos Adio

= = Igual != Diferente >= Maior ou igual <= Menor ou igual

Operadores lgicos && E lgico || Ou lgico

rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript If (x = = 5) { continue } document.write(x) }

rea Inicial Scripts fernandodercoli@bol.com.br

Objetos JavaScript Objetos Javascript - uma viso geral

rea Inicial Scripts fernandodercoli@bol.com.br

rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript

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() { rea Inicial Scripts fernandodercoli@bol.com.br 26

rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript document.forms[0].elements[0].value = navigator.userAgent; }

function getBrowserNameVersion() { document.forms[0].elements[0].value = navigator.appName + + navigator.appVersion; }

rea Inicial Scripts fernandodercoli@bol.com.br

<P><TT><B><H1>Exemplo:</H1></B></TT> rea Inicial Scripts fernandodercoli@bol.com.br 29

Nome,Nascimento: <BR> <INPUT TYPE=text NAME=nomidade VALUE= SIZE=70><BR>

Endere&ccedil;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&otilde;es, etc.: <BR> <TEXTAREA NAME=sujestao ROWS=7 COLS=70></TEXTAREA>

rea Inicial Scripts fernandodercoli@bol.com.br

</BODY> </HTML> CheckBox

rea Inicial Scripts fernandodercoli@bol.com.br

parte1.htm rea Inicial Scripts fernandodercoli@bol.com.br 45

rea Inicial Scripts fernandodercoli@bol.com.br

rea Inicial Scripts www.areainicial.hpg.com.br Apostila de JavaScript

rea Inicial Scripts fernandodercoli@bol.com.br

darkmagenta darkmagenta darkseagreen darkseagreen deepskyblue deepskyblue

darkolivegreen darkolivegreen darkorange

darkturquoise darkturquoise darkviolet firebrick firebrick floralwhite Selecione a cor de fundo:

rea Inicial Scripts fernandodercoli@bol.com.br

ghostwhite gray honeydew indigo lavender lightcyan lightpink lightyellow linen

lavenderblush lavenderblush lawngreen

mintcream olive orangered

mistyrose olivedrab orchid

navajowhite navajowhite navy

paleturquoise paleturquoise plum red

papayawhip papayawhip peachpuff

saddlebrown saddlebrown silver slategray steelblue thistle violet whitesmoke

sandybrown sandybrown seagreen

rea Inicial Scripts fernandodercoli@bol.com.br

rea Inicial Scripts fernandodercoli@bol.com.br

You might also like

Endereço: <BR> <INPUT TYPE=text NAME=endereco VALUE= SIZE=70><BR>

Sugestões, etc.: <BR> <TEXTAREA NAME=sujestao ROWS=7 COLS=70></TEXTAREA>