Baixe Apostila de Javascript e outras Notas de estudo em PDF para Informática, somente na Docsity! Apostila de JavaScript (Curso Básico) Versão 0.01 09 de abril de 2005 Prof. Luís Rodrigo de O. Gonçalves E-mail:luisrodrigoog@yahoo.com.br Site: http://www.lrodrigo.cjb.net OBS: esta apostila foi montada com trechos retirados de vários sites da internet. Apostila de JavaScript – versão 0.01 – Página 1 de 48 Índice 1.) Introdução.........................................................................................................................3 1.1) Considerações iniciais...........................................................................................3 1.2) Variáveis.................................................................................................................5 1.3) Operadores............................................................................................................6 1.3.5) Operadores lógicos.............................................................................................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) Funções................................................................................................................13 3.6) Comentários.........................................................................................................14 3.7) Estruturas de Controle.........................................................................................15 4) Funções 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) Referências......................................................................................................................48 Apostila de JavaScript – versão 0.01 – Página 2 de 48 Se o browser não suportar JavaScript e não inserirmos o comentário 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 artifício não esconde completamente o código JavaScript, o que ele faz é prevenir que o código seja mostrado por browsers mais antigos, porém o usuário tem acesso a todas as informações do código fonte de sua Home Page (tanto HTML, quanto JavaScript). 1.2) Variáveis Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações formais. Existem dois tipos de abrangência para as variáveis: “Global” - Declaradas/criadas fora de uma função. As variáveis globais podem ser acessadas em qualquer parte do programa. “Local” - Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da função onde foram criadas e precisa ser definida com a instrução Var. Com relação à nomenclatura, as variáveis devem começar por uma letra ou pelo caractere sublinhado “_”, o restante da definição do nome pode conter qualquer letra ou número. É importante ressaltar que a variável “Código” é diferente da variável “código”, que por sua vez é diferente de “CODIGO”, sendo assim, muito cuidado quando for definir o nome das variáveis, utilize sempre um mesmo padrão. Existem três tipos de variáveis: Numéricas, Booleanas e Strings. Como já era de se esperar, as variáveis numéricas são assim chamadas, pois armazenam números, as Booleanas valores lógicos (True/False) e as Strings, seqüência de caracteres. As strings podem ser delimitadas por aspas simples ou duplas, a única restrição é que se a delimitação começar com as aspas simples, deve terminar com aspas simples, da mesma forma para as aspas duplas. Podem ser incluídos dentro de uma string alguns caracteres especiais, a saber: \t - posiciona o texto a seguir, na próxima tabulação; \n - passa para outra linha; \f - form feed; \b - back space; \r - carrige return. O JavaScript reconhece ainda um outro tipo de contudo em variáveis, que é o NULL. Na prática isso é utilizado para a manipulação de variáveis não inicializadas sem que ocorra um erro no seu programa. Quando uma variável possui o valor NULL, significa dizer que ela possui um valor desconhecido ou nulo. A representação literal para NULL é a string 'null' sem os delimitadores. Quando referenciado por uma função ou comando de tela, será assim que NULL será representado. Observe que NULL é uma palavra reservada. Apostila de JavaScript – versão 0.01 – Página 5 de 48 Você pode trabalhar ainda com Arrays, mas para isso será necessário algum conhecimento sobre Programação Orientada a Objetos. 1.3) Operadores Junto com funções e variáveis, operadores são blocos de construção de expressões. Um operador é semelhante a uma função no sentido de que executa uma operação específica e retorna um valor. 1.3.1) Operadores unários e binários Todos os operadores em JavaScript requerem um ou dois argumentos, chamados operandos. Aqueles que requerem um operando apenas são denominados operadores ulnários, e os que requerem dois operandos são chamados de operadores binários. 1.3.2) Operador de String Operador de concatenação (+) Exemplo: Nome1="José" Nome2="Silva" Nome = Nome1+" da "+Nome2 // O resultado é: "José da Silva" 1.3.3) Operadores Matemáticos Adição ( + ) Exemplo: V01=5 V02=2 V=V01+V02 // resulta em: 7 Subtração ( - ) Exemplo: V01=5 V02=2 V=V01-V02 // resulta em: 3 Apostila de JavaScript – versão 0.01 – Página 6 de 48 Multiplicação ( * ) Exemplo: V01=5 V02=2 V=V01*V02 // resulta em: 10 Divisão ( / ) Exemplo: V01=5 V02=2 V=V01/V02 // resulta em: 2.5 Módulo da divisão ou resto ( % ) Exemplo: V01=5 V02=2 V=V01%V02 // resulta em: 1 Incremento ( ++ ) Pode acontecer de duas formas: ++Variável ou Variável++ 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: --Variável ou Variável-- 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 Apostila de JavaScript – versão 0.01 – Página 7 de 48 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 prática 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 usaríamos o seguinte comando: Mes=Matriz(12) O próximo passo seria apenas incluir os dados: Mes[1] = 'Janeiro' Mes[2]='Fevereiro' ... Mes[12]='Dezembro' Podemos também utilizar os dois métodos 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) Teríamos agora: Clientes[1].nome = "Charlene"; Clientes[2].telefone="332-2781" Clientes[3].telefone=null Apostila de JavaScript – versão 0.01 – Página 10 de 48 3) Comandos Além das estruturas de controle, o JavaScript oferece alguns poucos comandos: Break Continue Var With Function Return Comment 3.1) VAR Em JavaScript, nem sempre é necessário definir uma variável antes de utilizá-la, é o que ocorre com variáveis globais, porém, é importante ressaltar que a utilização da instrução “var”, a nível de documentação é muito bem-vinda. Já nas definições de variáveis locais, é obrigatório a utilização da instrução var. Você pode armazenar um valor na própria linha de definição da variável, se não o fizer, para o JavaScript, esta variável possui um valor desconhecido ou nulo. Não é obrigatória a utilização de uma instrução “var” para cada variável declarada, na medida do possível, você pode declarar várias variáveis em uma só instrução var. Var NomeDaVariável [ = <valor> ]; Var Contador = 0; Var Inic="",Tolls=0,Name="TWR"; Var Teste; // Neste caso, Teste possui valor null Apostila de JavaScript – versão 0.01 – Página 11 de 48 3.2) with Quando você precisa manipular várias propriedades de um mesmo objeto, provavelmente prefere não ser obrigado a repetir todas as vezes a digitação do nome do objeto. A instrução “with”, permite fazer isso eliminando a necessidade de digitar o nome do objeto todas as vezes. Forma geral: with (<objeto>) { ... Instruções } Por exemplo vamos supor que será necessário executar uma série de operações matemáticas: 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 execução do loop sem que haja verificação na condição de saída do loop, passando a execução a linha imediatamente posterior ao término do loop. Forma geral: Break Exemplo: Neste exemplo, quando a variável x atinge o valor 5 o loop é cancelado, e é impresso o número 5 na tela. For (var x=1 ; x < 10 ; x++) { If (x = = 5) { Break } } Apostila de JavaScript – versão 0.01 – Página 12 de 48 // end hiding contents --> </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 execução de um programa. Estas estruturas permitem executar o código baseado em condições lógicas ou um número determinado de vezes. For... For...In If...Else... While... 3.7.1) For... Repete uma seção do código um determinado número de vezes. Consiste de uma declaração que define as condições da estrutura e marca seu início. Esta declaração é seguida por uma ou mais declarações executáveis, que representam o corpo da estrutura. Estabelece um contador inicializando uma variável com um valor numérico. O contador é manipulado através da <ação> especificada no comando toda a vez que o loop alcança seu fim, permanecendo nesse loop até que a <condição> seja satisfeita ou a instrução Break seja executada. Forma geral: For (<inicialização> ; <condição> ; <ação>) { Corpo da Estrutura } No exemplo abaixo, o bloco de instruções será executado 10 vezes, pois a variável contador é inicializada com o valor 1 e o bloco de instruções será executado enquanto contador for menor que 11. A cada execução do bloco de instruções contador é incrementado. For (var contador = 1; contador < 11; contador++) { document.write(Contador); } Apostila de JavaScript – versão 0.01 – Página 15 de 48 3.7.2) For...In Este comando tem por objetivo, procurar a ocorrência de uma variável, dentro das propriedades de um objeto, ao encontrar a referida variável, um bloco de comandos pode ser executado. Forma geral: For (variavel In objeto) { bloco de comandos } Exemplo: Esta função procura por uma propriedade do Objeto, cujo o nome esteja especificado pela variável 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 porção de código se a condição especificada for verdadeira. A estrutura pode também ser especificada com código alternativo para ser executado se a condição 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 utilização de uma expressão condicional, que funciona para situações mais simples, o exemplo acima ficaria da seguinte forma: Apostila de JavaScript – versão 0.01 – Página 16 de 48 VariavelDeRetorno= (anos>=16) ? 'Já pode votar!' : 'Ainda é muito cedo para votar...' 3.7.5) While Outro tipo de loop é aquele baseado numa condição ao invés de no número de repetições. 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 instrução Break. Forma geral: while (<condição>) { Corpo da Estrutura } No exemplo abaixo, o bloco de instruções será executado 10 vezes, pois a variável Contador é inicializada com o valor 1 e o bloco de instruções será executado enquanto Contador for menor que 11. A cada execução do bloco de instruções Contador é incrementado. Var Contador=1; While ( Contador < 11 ) { document.write(Contador++) ;} Apostila de JavaScript – versão 0.01 – Página 17 de 48 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, métodos e responder a certos eventos. Por isso é muito importante entender a hierarquia dos objetos HTML. Você entenderá rapidamente como isto funciona com a ajuda de um exemplo. O exemplo seguinte é uma página HTML simples: No exemplo acima, nós temos, um link, duas imagens, e um formulário com dois campos texto e dois botões. Do ponto de vista do JavaScript a janela do browser é um objeto window, que contém certos elementos, como a barra de status. Dentro da janela, nós podemos carregar uma página HTML. Esta página é um objeto document. Desta forma o objeto document representa o documento HTML (que está carregado no momento). O objeto document é muito importante, em JavaScript você sempre o usará muito. As propriedades e métodos do objeto document serão vistas detalhadamente, mais adiante. Apostila de JavaScript – versão 0.01 – Página 20 de 48 Mas o que é mais importante é que todos os objetos HTML são propriedades do objeto document. Um objeto HTML pode ser por exemplo um link ou um formulário. Nós podemos obter informações de diversos objetos e então manipulá-los. Para isso nós devemos saber como acessar os diferentes objetos. Você primeiro verifica o nome do objeto no diagrama de hierarquia. Se você então precisar saber como referenciar a primeira imagem na página HTML, basta seguir o caminho hierárquico. Você deve percorrer o diagrama de cima para baixo, o primeiro objeto é chamado document, a primeira imagem é representada por Imagem[0]. Desta forma nós podemos acessar este objeto em JavaScript, da seguinte forma: document.Imagem[0]. Se você quiser saber o que o usuário digitou dentro do primeiro elemento do formulário, você primeiro precisa pensar em como acessar esse objeto. Novamente nós 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 referência ao primeiro elemento do formulário. 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 - não se preocupe agora, com propriedades, métodos ou eventos, eles serão vistos detalhadamente mais adiante - esta propriedade armazena o conteúdo do objeto, ou seja, o texto digitado. A seguinte linha de código obtém o texto digitado: nome = document.forms[0].elements[0].value; A string é armazenada na variável name. Nós podemos agora trabalhar com esta variável. Por exemplo, nós 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 páginas muito grandes pode ficar um pouco confuso referenciar objetos diretamente pelo endereçamento do diagrama de hierarquia, você pode ter referências 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; Apostila de JavaScript – versão 0.01 – Página 21 de 48 Isto traz muitas facilidades, especialmente com páginas grandes e com muitos objetos. Observe que a caixa das letras faz diferença. Muitas propriedades dos objetos JavaScript não são apenas para leitura, você pode atribuir novos valores a algumas propriedades. Observe o exemplo: Location Este objeto contém informações sobre a URL da página atual. Forma geral: location.propriedade location.metodo() Propriedades: hash - Esta propriedade funciona de forma semelhante ao famigerado "go to" de algumas linguagens de programação. Normalmente é usado em links, que acessam a mesma página. Ex: O exemplo abaixo demonstra a utilização da propriedade hash, para criar um link para outro trecho da mesma página. <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 página HTML atual. Ex: alert('Demostração da propriedade host: '+location.host) hostname - Armazena uma string, com o IP da página HTML atual. Ex: alert('Demostração da propriedade hostname: '+location.hostname) href - String identica a mostrada na barra "location" do browser. Ex: alert('A URL desta página é: '+ location.href) pathname - Contém uma string com o path da página HTML atual. Ex: alert('O path da URL desta página é: '+ location.pathname) Apostila de JavaScript – versão 0.01 – Página 22 de 48 5.2) Button Este objeto mostra um botão 3-D (no mesmo padrão do Windows). ao ser pressionado, ele produz um efeito de profundidade e geralmente chama uma função. Pode ser utilizado para inúmeras aplicações, dependendo apenas de sua imaginação, a única precaução é defini-lo dentro de um formulário. Forma geral: <Input Type="button" Name="NomeDoBotão" Value="Rótulo" onClick="RespostaAoEvento"> Onde: Type - define o objeto Name - define o nome do objeto para nossa aplicação. É por este nome que referenciamos alguma propriedade deste objeto Value - define o que será escrito na face do botão onClick - É o único evento possível para este objeto, normalmente define uma função a ser executada quando clicamos no botão. Propriedades: NAME: Informa o nome do objeto button em forma de string, da mesma forma como definido no campo Name que foi utilizado na definição do botão. É importante não confundir o campo Name com a propriedade NAME, veja a diferença: <input type="button" name="OK" value="Confirma" onClick="ConfirmaInformacoes()"> OK.Name // equivale a "OK" VALUE: Informa o label do botão em forma de string da mesma forma como foi definido no campo Value que foi utilizado na definição do botão. OK.Value // equivale a "Confirma" Métodos: click: Este método simula um clique do mouse no objeto button, ou seja, executa um procedimento associado a um botão como se o botão tivesse sido pressionado mas sem que o usuário tenha realmente clicado. OK.click() // executaria a função ConfirmaInformacoes Apostila de JavaScript – versão 0.01 – Página 25 de 48 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 botão é:'+botao1.name+'\nA propriedade VALUE deste botão é:'+botao1.value)")> </FORM> 5.3) Navigator Neste objeto ficam armazenadas as informações 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 versão do browser. Ex: Navigator.appVersion userAgent - Armazena o cabeçalho (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>  </SCRIPT> </HEAD> <BODY > <CENTER> <FORM NAME="detect"> <INPUT TYPE="text" NAME="browser" SIZE=50 MAXLENGTH=50 VALUE=" Seus dados serão mostrados nesta janela ! "> <BR><BR><BR> <INPUT TYPE="button" VALUE="Nome do Navegador" onClick="getBrowserName()"> <INPUT TYPE="button" VALUE="Versão do Navegador" onClick="getBrowserVersion()"> <INPUT TYPE="button" VALUE="E-mail" onClick="getBrowserCodeName()"> <BR><BR> <INPUT TYPE="button" VALUE="E-mail e versão" onClick="getBrowserUserAgent()"> <BR> <BR> <INPUT TYPE="button" VALUE="Nome e Versão" onClick="getBrowserNameVersion()"> </FORM> </BODY> </HTML> 5.4) Form Os formulários tem muitas utilidades, uma das principais seria a transferência de dados dentro da própria página HTML, sem que para isso seja necessária a intervenção de qualquer outro meio externo. Ao se criar um formulário na página HTML, automaticamente é criada uma referência para este formulário, que fica guardada na propriedade form do objeto document. Como você deve ter visto na página Apostila de JavaScript – versão 0.01 – Página 27 de 48 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="Página 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 próprio nome sugere, exibe uma caixa de checagem igual às que encontramos no Windows, o funcionamento também é o mesmo: a condição de selecionada ou não, é 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="Ação"> </FORM> Onde: Type - Nome do objeto; Name - Nome dado pelo programador, para futuras referenciações ao objeto; CHECKED - Se especificado a CheckBox já vai aparecer selecionada; Value - Define um rótulo 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. Apostila de JavaScript – versão 0.01 – Página 30 de 48 Propriedades: name - Nome do objeto CheckBox em forma de string, da mesma forma como definido no campo Name utilizado na criação da CheckBox. NomeDoObjeto.name // equivale a string "NomeDoObjeto" value - Armazena o conteúdo do campo VALUE, definido na TAG. NomeDoObjeto.value checked - Retorna um valor lógico que depende do estado do objeto CheckBox NomeDoObjeto.checked // equivale a True se o objeto selecionado e False caso contrário defaultChecked - Informa/Altera o estado default de um objeto CheckBox. Com relação a alteração, somente os objetos CheckBox ainda não exibidos podem ter seu estado default alterado. NomeDoObjeto.defaultChecked // equivalerá a True, se a cláusula CHECKED estiver presente e a False caso contrário Métodos: click: este método simula um clique do mouse no objeto CheckBox, ou seja, executa um procedimento associado a uma CheckBox como se estivéssemos clicado na CheckBox mas sem que o usuário tenha realmente clicado. Select01.click() // executaria uma função 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 conteúdos das propriedades: \nName='+p1+ '\nValue='+p2+ '\nChecked='+p3+ '\ndefaultChecked='+p4); } </SCRIPT> Apostila de JavaScript – versão 0.01 – Página 31 de 48 </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 características da página HTML, como por exemplo: cor das letras, cor de fundo, figura que aparecerá como papel de parede, etc. Sempre que incluímos alguma declaração 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="função"] [onunload="funcao"]> Onde: Imagem = figura no formato GIF, que servirá como papel de parede para a Home Page; #Cor... = número (hexadecimal), com seis dígitos, que corresponde a cor no formato RGB, o "#" é obrigatório. Os dois primeiros dígitos correspondem a R (red), os dois do meio a G (green) e os dois últimos a B (blue). A combinação dos três, forma a cor no formato RGB. função = Nome de uma função pré-definida, que será chamada quando o evento ocorrer. Apostila de JavaScript – versão 0.01 – Página 32 de 48 onUnload - Ocorre quando se abandona uma página 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 mês, Dia do mês, Hora:Minuto:Segundo e Ano. Como todo objeto, podem ser criadas novas instâncias para este objeto, essa prática possibilita a utilização de quantos objetos data você precisar. Forma geral: NovoObjeto = NEW date( ) Onde: NovoObjeto = Objeto definido pelo usuário, para manipular datas. Métodos: getMonth - Obtém o número do mês. Retornando um valor entre 0 e 11. ( janeiro=0) Ex: Mes=NovoObjeto.getMonth( ) setMonth - Estabelece um novo valor para o mês. O valor deve estar entre 0..11 Ex: NovoObjeto.setMonth(NumeroDoMes) getDate - Obtém o número do dia, considerando-se o mês. Retornando um valor numérico entre 1..31. Ex: dia = NovoObjeto.getDate( ) setDate - Estabelece um novo valor para o dia do mês. Este valor deve estar entre 1..31 Ex: NovoObjeto.setDate(NumeroDoDia) getDay - Obtém o número do dia, considerando-se a semana. Retornando um valor numérico entre 0..6. Lembre-se de que a semana começa no domingo, logo 0, corresponde ao domingo. Ex: DiaDaSemana = NovoObjeto.getDay( ) getHours - Obtém um número correspondente a hora. Retornando um valor numérico entre 0..23 Ex: Hora = NovoObjeto.getHours( ) Apostila de JavaScript – versão 0.01 – Página 35 de 48 setHours - Estabelece um novo valor para a hora. O valor deve estar entre 0..23 Ex: NovoObjeto.setHours(NovaHora) getMinutes - Obtém um número correspondente aos minutos. Retornando um valor numérico 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 - Obtém um número correspondente aos segundos. Retornando um valor numérico 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 - Obtém 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 - Obtém a diferença entre o horário local e o horário do meridiano central (Greenwich). Este tempo é dado em minutos, logo, para saber o fuso-horário, deve-se dividir o resultado obtido por esta função por 60. Ex: FusoHorário=NovoObjeto.getTimezoneOffset( ) / 60 getYear - Obtém um valor numérico 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) Apostila de JavaScript – versão 0.01 – Página 36 de 48 toGMTstring - Converte um objeto data para uma string seguindo o padrão Internet GMT. Ex: NovoObjeto.toGMTstring( ) toLocaleString - Converte uma data para uma string seguindo o padrão 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 = "Terça"; if(dName==4) Day = "Quarta"; if(dName==5) Day = "Quinta"; if(dName==6) Day = "Sexta"; Apostila de JavaScript – versão 0.01 – Página 37 de 48 go - Permite que qualquer URL que esteja presente na relação de páginas visitadas do objeto history, seja carregada. Ex: history.go(parâmetro) Existem duas possibilidades para "parâmetro": 1 - parâmetro é um número: Ao definir um número, este deve ser inteiro. Se for positivo, a página alvo está "parâmetro"páginas à frente. Ao passo que se for negativo, a página alvo está "parâmetro" páginas para traz. 2 - parâmetro é uma string: Neste caso, o alvo é a URL que mais se assemelhe ao valor da string definida por "parâmetro". 5.9) Window É o objeto que ocupa o topo do esquema hierárquico em JavaScript. Propriedades: defaultStatus - Determina o conteúdo padrão da barra de status do browser, quando nada de importante estiver acontecendo. Ex: widow.defaultStatus='Qualquer coisa' frames - Vetor que armazena as referências para as frames da janela atual. Ex: parent.frames.lenght // obtém o número 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 substituição 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 nível mais alto do esquema hierárquico do JavaScript. Ex: top.close() // fecha a janela principal do browser window - Refere-se a janela atual. Funciona de modo análogo a self. Ex: window.status='Qualquer coisa' Apostila de JavaScript – versão 0.01 – Página 40 de 48 Métodos: alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o botão de OK. Ex: alert('Esta é uma janela de alerta!') close - Termina a sessão atual do browser. Ex: top.close() confirm - Mostra uma caixa de diálogo, seguida de um sinal sonoro e os botão de OK e Cancel. Retorna um valor verdadeiro se o usuário escolher OK. Ex: retorno=confirm('Deseja prosseguir?') open - Abre uma nova sessão do browser, como se o usuário pressionasse <CTRL>+N Ex: window.open("URL", "Nome" [,"características"]) Onde: URL : endereço selecionado inicialmente quando da abertura da nova janela. Nome : nome da nova janela, definido pelo programador; Características - série de opções de configuração da nova janela, se especificados devem estar na mesma string, separados por vírgulas e sem conter espaços: 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]) Apostila de JavaScript – versão 0.01 – Página 41 de 48 onde: label : texto que aparece ao lado da caixa; valor : é o conteúdo inicial da caixa;\ setTimeout - Faz com que uma expressão seja avaliada após 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 página HTML termina de ser carregada. onUnload : Ocorre assim que o usuário sai da página atual. 5.10) Reset Este objeto restaura os campos de um formulário, para seus valores iniciais. Forma geral: <INPUT TYPE="reset" NAME="nome" VALUE="label" onClick="ação"> onde: reset : Tipo do objeto nome : Nome definido pelo programador, para futuras referenciações; label : String que será mostrada na face do botão. ação : Define o que fazer (além de sua função normal) quando clicamos no botão reset. Propriedades: name - Armazena o nome que foi definido pelo usuário, no campo NAME, para o objeto reset. Ex: document.form[0].element[0].name value - Armazena o texto que aparece na face do botão reset. Definido no campo VALUE. Ex: document.form[0].element[0].value Apostila de JavaScript – versão 0.01 – Página 42 de 48 2. Caminho absoluto : Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor. Com a mesma sintaxe, e possível escrever links para qualquer servidor WWW no mundo. Seria a aplicação do endereço completo da página em questão, como visto no ítem anterior. 3. Ligações a trechos de documentos - Além do atributo href, que indica um documento destino de uma ligação hipertexto, o elemento A possui um atributo NAME que permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto. Funciona tanto para documentos locais como para os armazenados em outro servidor. O trecho deve ser indicado com o símbolo "#". Ex: JavaInde.htm <HTML> ... <A HREF = "parte1.htm#2">Diferença entre Java e JavaScript</A> ... </HTML> Ex: parte1.htm <HTML> ... <A NAME="1"></A>O que é JavaScript JavaScript é... <A NAME="2"></A>Diferença entre Java e JavaScript A diferença é... ... </HTML> No exemplo acima, o link de JavaInde.htm carrega a página "parte1.htm" e automaticamente posiciona o trecho "2" no topo da janela do browser. Apostila de JavaScript – versão 0.01 – Página 45 de 48 6.) Palavras reservadas Existem várias palavras que são reservadas para o JavaScript as quais são listadas abaixo. Essas palavras não podem ser utilizadas para identificar variáveis ou funções. abstract float public boolean for return break function short byte goto static case if super cath implements switch char import sinchronized class in this const instanceof throw continue int throws default interface transient do long true double native try else new var extends null void false package while final private with finally protected Apostila de JavaScript – versão 0.01 – Página 46 de 48 7.) Tabela de cores Ao invés de especificar códigos 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 serão mostrados os vários literais que você pode utilizar na especificação de cores: Exemplo de utilização: Definindo Background <BODY BGCOLOR="literal"> Definindo a cor do texto <BODY TEXT="literal"> Definindo a cor de trechos de textos <FONT COLOR="literal"...</FONT> Links, Followed Links, etc. <BODY ALINK="literal"> etc. Apostila de JavaScript – versão 0.01 – Página 47 de 48