CURSO TCNICAS EM PROGRAMAO

JavaScript

Prof. Jairo - jairo@uninove.br

Primeiro Semestre/2002

2.1 - INTRODUO32.1.1 - Definio32.1.2 - JavaScript NO Java32.1.3 - Conceitos bsicos: variveis, operadores, expresses, funes, objetos e eventos32.1.3.1 - Variveis32.1.3.2 - Operadores32.1.3.3 - Expresses32.1.3.4 - Funes42.1.3.5 - Mtodo42.1.3.6 - Objetos42.1.3.7 - Eventos42.1.4 - Uso dos scripts JavaScript42.2 - VARIVEIS, OPERADORES, FUNES E OBJETOS82.2.1 - Variveis82.2.1.1 - Variveis globais82.2.1.2 - Variveis locais82.2.1.3 - Nomenclatura das variveis82.2.1.4 - Tipos de variveis82.2.2 - Operadores92.2.2.1 - Operadores Unrios e binrios92.2.2.2 - Operador de String92.2.2.3 - Operadores Matemticos92.2.2.4 - Operadores relacionais112.2.2.5 - Operadores lgicos112.2.2.6 - Operadores de atribuio122.2.3 - Funes132.2.4 - Objetos142.2.4.1 - Objeto window152.2.4.2 - Objeto document192.2.4.3 - Objeto matemtico212.3 - EVENTOS, APLICAES EM FORMULRIOS E DETECO DE BROWSERS242.3.1 - Eventos242.3.1.1 - Eventos onLoad e onUnload242.3.1.2 - Eventos onMouseOver, onMouseOut, onClick252.3.1.3 - Eventos ligados a elementos de formulrio252.3.2 - Aplicaes em formulrios272.3.3 - Deteco de browser302.3.4 - Comentrios finais322.4 - EXERCCIOS332.5 - RESPOSTAS DOS EXERCCIOS34

2 - JavaScript

2.1 - INTRODUO

2.1.1 - Definio

Originalmente chamada de Livescript, JavaScript uma linguagem de roteiro interpretada (script language) baseada em objetos desenvolvida pela Netscape em 1994. Ela passou a ser chamada JavaScript em dezembro de 1995, quando Netscape e Sun Microsystems fizeram uma parceria para o desenvolvimento dessa linguagem.

JavaScript roda no browser do cliente que l a pgina HTML quando tem acesso local a uma mquina virtual java (local Java Virtual Machine - JVM).

Cada script JavaScript consiste de um nico mdulo contnuo de cdigo onde ficam todas as funes e variveis utilizadas pelo programa. Normalmente o cdigo posicionado no arquivo HTML entre descritores (tags) e .

Como JavaScript tem muitas possibilidades que permitem criar documentos HTML sofisticados, possvel introduzir recursos de interatividade em uma pgina Web, fazer animaes, imagens clicveis independentes de CGI, etc.

IMPORTANTE:

Como um script JavaScript s existe dentro de um arquivo HTML no existem aplicaes JavaScript independentes de browser. O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0.

Apesar das limitaes, JavaScript vem evoluindo e pode ser usado em um grande nmero de aplicaes srias, principalmente aquelas destinadas Intranet e Internet e usadas atravs de um browser.

2.1.2 - JavaScript NO Java

JavaScript s vezes confundida com Java, mas a verdade que JavaScript e Java so duas linguagens completamente diferentes que compartilham diversas semelhanas no que se refere sintaxe, mas com diferenas marcantes.

Java uma linguagem de programao e JavaScript uma linguagem de hiper-texto que no compilada em bytecodes mas interpretada bloco a bloco pelo browser que l o documento HTML.

Em certo sentido pode-se dizer que JavaScript mais uma extenso do HTML do que uma linguagem de programao propriamente dita.

Como JavaScript fcil de entender, muito usado para criar tanto efeitos teis quanto bonitos sem ter que se incomodar com programao.

2.1.3 - Conceitos bsicos: variveis, operadores, expresses, funes, objetos e eventos

O cdigo JavaScript, como muitas outras linguagens de programao, constitudo de declaraes as quais so usadas para fazer atribuies, comparar valores, executar outras sees do cdigo, etc. (mais frente veremos esses conceitos detalhadamente).

2.1.3.1 - Variveis

So valores que so atribudos dinamicamente, ou seja, no tm um valor pr-definido; so rtulos que se referem a um valor que pode mudar. Podem ser definidos pelo usurio, bem como por qualquer outro mtodo.

Exemplo:

var nome = "Joo";

var num = 123;

2.1.3.2 - Operadores

So usados para calcular ou comparar valores; o operador executa uma operao especfica e rotorna um valor.

Exemplo:

total = lapis + caneta;

2.1.3.3 - Expresses

So quaisquer combinaes de variveis, operadores ou declaraes que avaliam alguma coisa para obter um resultado.

Exemplo:

total = 100;

if(total > 100) resto = 0;

2.1.3.4 - Funes

So comandos ou conjuntos de comandos utilizados para cumprir certos objetivos dentro do script.

Existem dois tipos de funes em JavaScript: funes internas ou intrnsecas e funes externas ou definidas pelo usurio.

A. Funes internas ou intrnsecas so aquelas que no precisam ser especificadas, pois o prprio JavaScript j as reconhece e sabe o que fazer com elas. Um exemplo pode ser a funo alert() que veremos logo nos primeiros exemplos.

B. Funes externas ou definidas pelo usurio so aquelas que o usurio precisa explicar para o JavaScript quais so as aes que ele precisa tomar, pois a linguagem desconhece seu nome. Uma funo em JavaScript similar a uma "procedure" ou "subroutine" em outras linguagens de programao, ou seja, um conjunto de declaraes que realizam alguma ao. As funes podem aceitar valores (parmetros), e tambm podem retornar valores, como por exemplo a function hello() logo abaixo (exemplo 2.1.4.2).

2.1.3.5 - Mtodo

simplesmente uma funo a qual est contida num objeto. Por exemplo, a funo que fecha uma janela, chamada de "close()" parte do objeto window, portanto window.close() conhecido como um mtodo. Da mesma forma, window.alert() tambm um mtodo.

(exemplos 2.2.4.1.4, 2.1.4.2, 2.1.4.3, 2.1.4.4 e 2.2.2.5.1).

2.1.3.6 - Objetos

So os componentes de uma pgina HTML e um dos tpicos mais extensos do Javascript. So blocos de construo os quais possuem uma srie de valores, cada valor reflete uma propriedade individual do objeto.

Objetos so conceitos crticos e caractersticos do JavaScript: um simples objeto pode conter muitas propriedades, cada propriedade age como uma varivel refletindo um certo valor.

JavaScript tem um grande nmero de objetos pr-definidos (built-in) os quais se referem a caractersticas dos documentos Web. Por exemplo, o objeto "document" contm propriedades as quais permitem modificar a cor de fundo do documento, seu ttulo e muito mais.

2.1.3.7 - Eventos

O evento algo que iniciado e aciona algum procedimento. Por exemplo, o clique sobre algum objeto da pgina um evento; passar o mouse sobre um link um evento; abrir, reiniciar ou sair de uma pgina so eventos; selecionar um campo de formulrio um evento. Os programas JavaScript so tipicamente dirigidos pelos eventos.

Em JavaScript, um manipulador de evento (event handler) um mecanismo que causa um script reagir a um evento. Por exemplo, um hiperlink est sujeito ao evento onMouseOver, e significa que o 'event handler' ser disparado quando a seta do mouse for posicionada acima do link. O 'event handler' especifica qual cdigo JavaScript deve ser executado.

2.1.4 - Uso dos scripts JavaScript

O uso mais comum de JavaScript nos documentos HTML ocorre sob a forma de funes as quais so chamadas em determinadas situaes ou em resposta a determinados eventos. As funes podem estar localizadas em qualquer parte do cdigo HTML, a nica restrio que devem comear com a declarao da tag e terminar com . Por conveno costuma-se colocar todas as funes no HEAD do documento entre as tags e para garantir que o cdigo JavaScript seja carregado antes que o usurio interaja com o documento HTML, ou seja, antes do . Os exemplos abaixo ilustram o uso de JavaScript em casos simples.

Exemplo 2.1.4.1:

Exemplo muito simples de JavaScript

Nesta linha s tem HTML.

document.write("Mas esta linha j tem JavaScript !!
");

De volta ao bom HTML.

Ir mostrar:

Nesta linha s tem HTML.

Mas esta linha j tem JavaScript !!

De volta ao bom HTML.

IMPORTANTE:

Como em C ou outra boa linguagem de programao, as linhas devem ser terminadas com ";" (ponto e vrgula). Excees a essa regra so os casos onde aparecem blocos FOR, IF ou WHILE, como veremos mais frente. Em JavaScript, ao contrrio do HTML, as quebras de linhas do editor de textos so levadas em considerao e por isso no se deve quebrar a linha no meio da expresso.

Exemplo 2.1.4.2:

Outro Exemplo

ponha a seta do mouse aqui

Ir mostrar uma janelinha de "alerta" com a mensagem "Al !!!" toda vez que a seta do mouse for posicionada em cima do link (no necessrio clicar no link).

O Netscape sob o Linux abre outra janela "alert" mesmo que a janela anterior no tenha sido fechada, ao contrrio do que ocorre sob o Windows onde uma nova janelinha "alert" somente poder aparecer aps fechar a anterior.

NOTA 1:

Embora a tag no necessite do atributo "language", recomendvel sempre utiliz-lo, inclusive para informar ao browser a verso do JavaScript usado.

Exemplo: .

NOTA 2:

Se o browser no possui suporte a JavaScript ele no reconhece a tag , ento ele a ignora mas mostra tudo que estiver no interior como se fosse um simples texto HTML. O uso de comentrios "" permite "esconder" o cdigo JavaScript dos browsers velhos.

IMPORTANTE:

Os comentrios "" apenas escondem dos browsers que no suportam Javascript, mas se a verso da funo intrnseca JavaScript for muito recente e o browser um pouco velho, ele no suportar a funo. As funes intrnsecas JavaScript1.2 (ou maior) no so suportadas por browsers verso 3.

Se os comentrios fossem usados no exemplo 2.1.4.1, ficaria assim:

Exemplo 2.1.4.3:

Exemplo 2.1.4.3

Exemplo 2.1.4.4:

Exemplo 2.1.4.4

Coloque o seu nome, por favor:

NOTA 1:

No exemplo acima, o evento "onBlur" iniciado quando o usurio "sai" da caixa de texto, clicando em outro local da pgina ou teclando . Exceo: o Internet Explorer 3 no responde com a janelinha "alert" quando se tecla .

NOTA 2:

'this.value' significa o valor que foi atribudo ao elemento de formulrio (no exemplo acima o texto da caixa de texto).

Exemplo 2.1.4.5:

Posicione a seta do mouse aqui e observe a barra de status do browser

NOTA:

O exemplo acima um caso de script que no precisa das tags e , basta inserir a funo intrnseca 'onMouseOver' como se fosse um atributo da tag . Exceo: o Internet Explorer 3 no responde ao evento 'onMouseOut', ou seja, uma vez mostrada a mensagem "Minha pgina favorita" ela permanece na barra de status do browser mesmo aps retirar a seta do mouse de cima do link.

Exemplo 2.1.4.6:

possvel tambm colocar scripts em arquivos externos, que devem ser salvos com a extenso "js". Para isso, deve se colocar o parmetro SRC dentro da tag e fornecer o caminho (path) para encontrar o arquivo:

Hello world em JavaScript

O contedo do arquivo helloworld.js :

document.write("Hello World !!!
");

IMPORTANTE:

Embora algumas verses 3 de browsers suportem o atributo SRC, scripts em arquivos externos somente so plenamente suportados em verses 4 ou maior. Por exemplo, o Netscape 3 suporta o atributo SRC e o Internet Explorer 3 no.

Exemplo 2.1.4.7:

Incluso de data e hora em documentos HTML.

Data e Hora

NOTA1:

A data e hora includa no documento HTML atravs de JavaScript tem pouco valor, pois trata-se de leitura do relgio no computador do cliente, ou seja, estamos dando ao cliente algo que ele j tem.

NOTA2:

No Netscape (incluindo a verso 4.7) a funo "getYear()" retorna um "bug" eterno: usando o exemplo 2.1.4.7 acima, obtenho "A data : 12/2/102" para o ano 2002, 103 para o ano 2003, etc.

simples corrigir essa "falha" somando 1900 ao ano.

2.2 - VARIVEIS, OPERADORES, FUNES E OBJETOS

2.2.1 - Variveis

Em JavaScript, variveis dinmicas podem ser criadas e inicializadas sem declaraes formais.

2.2.1.1 - Variveis globais

As variveis globais so declaradas/criadas fora de uma funo e acessadas em qualquer parte do programa.

2.2.1.2 - Variveis locais

As variveis locais so declaradas/criadas dentro de uma funo e s podem ser utilizadas dentro da funo onde foram criadas. Essas variveis precisam ser definidas com a instruo var.

Exemplo:

var grau = "a";

e a varivel grau ser inicializada com o valor 'a'.

NOTA:

Podem existir variveis globais com o mesmo nome de variveis locais, porm esta prtica no aconselhvel.

2.2.1.3 - Nomenclatura das variveis

As variveis devem comear por uma letra ou pelo caracter sublinhado (underscore), o restante da definio do nome pode conter qualquer letra ou nmero.

Exemplo:

_Myvar10 = 0;

IMPORTANTE:

A varivel "a" diferente da varivel "A", pois JavaScript "case sensitive" (caixa alta ou baixa faz diferena).

2.2.1.4 - Tipos de variveis

Existem trs tipos de variveis: Numricas, Booleanas e Strings.

A. As variveis numricas so assim chamadas pois armazenam nmeros.

B. As variveis Booleanas armazenam valores lgicos (True/False).

C. As variveis Strings armazenam sequncia de caracteres.

Exemplos:

total = 234;

erro = true;

texto = "abc";

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 na prxima tabulao;

\n - quebra de linha;

\f - form feed;

\b - back space;

\r - carrige return.

O JavaScript reconhece ainda um outro tipo de contdo em variveis, que o NULL. Na prtica isso utilizado para a manipulao de variveis no inicializadas sem que ocorra um erro no programa.

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.

IMPORTANTE:

NULL uma palavra reservada.

2.2.2 - Operadores

Junto com funes e variveis, operadores so os blocos de construo das expresses. Um operador semelhante a uma funo no sentido de que executa uma operao especfica e retorna um valor.

2.2.2.1 - Operadores Unrios e binrios

Todos os operadores em JavaScript requerem um ou dois argumentos, chamados operandos. Aqueles que requerem um operando apenas so denominados operadores unrios, e os que requerem dois operandos so chamados de operadores binrios.

2.2.2.2 - Operador de String

O operador de String o operador de concatenao +:

Exemplo:

Nome1="Jos";

Nome2="Silva";

Nome = Nome1 + " da " + Nome2; // O resultado : "Jos da Silva"

var text_extenso="o valor dessa varivel precisou ter uma " +

"quebra de linha do editor de textos.";

IMPORTANTE:

Nas declaraes de strings as quebras de linha do editor de texto precisam ser concatenadas conforme o exemplo acima. Se quisssemos quebra de linha ou tabulao no valor da varivel string, usaramos caracteres especiais tais como \n ou \t.

Exemplo:

texto_com_quebras = "Essa varivel tem uma quebra \n de linha !";

2.2.2.3 - Operadores Matemticos

Os operadores matemticos so: +, -, *, /, %, ++ e --

Exemplo:

V01=5;

V02=2;

Adio: +

V=V01+V02; // resulta em: 7

Subtrao: -

V=V01-V02; // resulta em: 3

Multiplicao: *

V=V01*V02; // resulta em: 10

Diviso: /

V=V01/V02; // resulta em: 2.5

Mdulo da diviso (resto da diviso): %

V=V01%V02; // resulta em: 1 (pois 5/2 tem como resto 1)

Exemplo 2.2.2.3.1:

Operadores matemticos

Operadores matemticos:

Exemplo de Incremento: ++

V01 = 5;

Pode acontecer de duas formas: ++Varivel ou Varivel++

V03 = ++V01; // Resulta em 6

V04 = V01; // Resulta em 6

V01 = 5;

V03 = V01++; // Resulta em 5

V04 = V01; // Resulta em 6

Exemplo de Decremento: --

Pode acontecer de duas formas: --Varivel ou Varivel--

V01 = 5;

V02 = --V01; // Resulta em 4

V03 = V01; // Resulta em 4

V01 = 5;

V02 = V01--; // Resulta em 5

V03 = V01; // Resulta em 4

Exemplo 2.2.2.3.2:

Incremento e decremento

2.2.2.4 - Operadores relacionais

Os operadores relacionais so: , ==, !=, >= e

Igual:

==

Diferente:

!=

Maior ou igual:

>=

Menor ou igual:

Exemplo 2.2.2.5.2:

Exemplo de funo com operadores

Ir retornar:

O maior valor entre 1 e 2 2

2.2.2.6 - Operadores de atribuio

Os operadores de atribuio so: =, +=, -=, *=, /= e %=

Atribuir um valor a uma varivel:

=

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)

Exemplo 2.2.2.6.1:

Determinao de 216 cores HTML.

Cores HTML

216 cores HTML:

NOTA1:

Toda a estrutura da determinao das cores HTML est baseada na funo "charAt()", que determina um caracter em detrminada posio da string.

NOTA2:

Convm notar que o operador "%" obtm o resto da diviso, por exemplo 6%4=2 e 4%6=4.

2.2.3 - Funes

Funo um elemento de programao que permite a criao de cdigo estruturado, muito mais limpo e fcil de ser analisado. Em JavaScript as funes so flexveis assim como as variveis: uma funo pode retornar ou no valores, sem modificar sua declarao. Funes so os blocos fundamentais de construo em muitos programas JavaScript.

A sintaxe bsica a seguinte:

function () {

}

Exemplo 2.2.3.1:

Funo

NOTA 1:

Para carregar a cor na varivel 'message' foi necessrio uma barra invertida '\' antes das aspas duplas, isso para que no houvesse confuso com as aspas duplas do final da string.

NOTA 2:

A tag no interpretada pelo Internet Explorer.

Exemplo 2.2.3.2:

Algumas funes podem retornar um valor expresso que a chamou. A funo abaixo aceita dois argumentos, x e y e retorna o resultado de x elevado potncia y.

function

NOTA:

Funes que retornam um resultado podem ser chamadas de dentro de uma expresso:

Exemplos:

total=raiseP(2,8);

if (raiseP(tax,2)

2.2.4 - Objetos

Um objeto um elemento que possui um conjunto de caractersticas e mtodos prprios, com os quais se pode interagir. Um boto um objeto que tem uma forma e sobre o qual se pode executar certas aes pr-definidas. JavaScript no possui realmente uma estrutura para criar novos objetos, porm tem a capacidade de interagir com os objetos do navegador.

A hierarquia dos principais objetos JavaScript a seguinte :

Por conveno, para se acessar um objeto deveria-se indicar todo o "caminho" percorrido nesta hierarquia. Por exemplo, para se acessar um formulrio chamado form1, deveria-se indicar window.document.form1. Porm, na prtica utiliza-se somente document.form1, j que se supem que estamos dentro do window corrente. Utilizar o caminho completo s necessrio quando se constri scripts que tratam de vrias janelas ao mesmo tempo.

De todos eles, vamos nos deter mais nos objeto window e document, por serem os mais importantes.

2.2.4.1 - Objeto window

Esse objeto representa a janela do navegador, e portanto permite uma interao entre o script e o ambiente no qual ele est funcionando. So sinnimos 'window' e 'self' quando se trata da janela corrente, e 'parent' indica a janela mais alta em um FRAMESET. Pode-se tambm enfatizar a janela atual utilizando a palavra chave 'this.'.

A. window.document - documento HTML exibido atualmente pela janela: permite alterar as propriedades do documento.

B. window.name - atribui um nome janela atual. Por exemplo, o cdigo window.name="win" atribui janela corrente o nome 'win'.

IMPORTANTE:

O nome atribudo janela s vale para o script JavaScript, pois para HTML continua valendo o nome definido no atributo NAME do FRAME HTML.

C. window.location - URL do documento atual. Para ir para outra URL basta escrever window.location="URL". Pode-se utilizar tambm a funo location.replace("URL").

Exemplo 2.2.4.1.1:

window.location

Ponha a seta do mouse aqui

D. window.frames - matriz de todos os frames da janela. Esta propriedade muito til quando se deseja que um script carregado em um FRAME altere documentos em outros frames. Considera-se que a janela que contm o FRAMESET a janela 'parent'. Cada FRAME de um FRAMESET pode ser referenciado por seu ndice na matriz, que depende de sua posio no FRAMESET (parent.frames[0], por exemplo, indica o primeiro FRAME definido em um FRAMESET), ou por seu nome (parent.main indica o FRAME chamado de main no FRAMESET).

Exemplo 2.2.4.1.2:

index.html

window.frames

main.html

main.html

Ponha a seta do mouse aqui

NOTA 1:

pode-se acessar o frame 'main' utilizando parent.frames[0] ou parent.main, e o frame 'sub' utilizando parent.frames[1] ou parent.sub.

sub.html

sub.html

Voc est no sub.

sub1.html

sub1.html

Agora, voc est no sub 1.

NOTA 2:

No exemplo acima, o script localizado no frame 'main' altera o arquivo do frame 'sub'. muito til esta propriedade, pois torna possvel criar um frame contendo um script que ir comandar o comportamento dos outros frames, permitindo assim a criao de scripts mais complexos e interessantes. Este exemplo funciona com o Netscape 3 mas no com o Internet Explorer 3.

E. window.status - coloca ou retorna uma mensagem na barra de status do navegador.

(exemplo 2.1.4.5)

F. window.open (URL, nome, caractersticas) - Abre uma nova janela, que recebe o nome passado pelo segundo argumento, carrega o documento especificado em URL e possui as caractersticas descritas, que podem ser:

toolbar (barra de ferramentas) = yes/no

location(localizao) = yes/no

directories (diretrios) = yes/no

status (barra de status) = yes/no

menubar (barra de menu = yes/no

scrollbars (barra de rolagem) = yes/no

resizable (redimensionabilidade) = yes/no

width (largura) = n (pixels)

height (altura) = m (pixels)

Exemplo 2.2.4.1.3:

window.open

Clique para abrir uma nova janela

Uma variao do exemplo acima o caso abrir vrias novas janelas (contra a vontade do cliente HTTP, evidentemente):

Loop para abrir 10 novas janelas:

NOTA 1:

Caso alguma destas caractersticas no sejam explicitadas, o navegador utilizar um valor padro. O exemplo acima cria uma janela chamada de "nova janela", carrega o documento doc.html (exemplo 2.2.4.1.5) e no possui nenhuma barra, no pode ser redimensionada e possui 400 por 300 pixels.

NOTA 2:

No Internet Explorer 3 no funciona 'resizable=no', ou seja, a nova janela ser sempre redimensionvel.

Exemplo 2.2.4.1.4:

Outra variao usar window.open e, atravs do JavaScript, escrever o contedo do documento HTML na nova janela:

window.open

G. window.close() - fecha a janela atual, se tiver sido aberta pelo JavaScript.

Exemplo 2.2.4.1.5:

doc.html

Window.close

H. window.alert (String) - Mostra a string em uma caixa de alerta.

(exemplos: 2.1.4.2, 2.1.4.3, 2.1.4.4 e 2.2.2.5.1)

I. window.confirm (String) - Idntico ao anterior, exibindo tambm os botes Ok e Cancel: Ok retorna true e Cancel retorna false. Para testarmos 'window.confirm', o documento 'doc.html' (exemplo 2.2.4.1.4) deve ser modificado conforme o exemplo abaixo.

Exemplo 2.2.4.1.6:

Window.confirm

J. window.prompt (String, Valor)- Exibe uma caixa de dilogo com uma frase representada por 'String' e um campo de texto com um valor representado por 'Valor'. A caixa retorna o valor digitado no campo de texto caso o usurio clique em Ok e retorna null caso contrrio (exemplo 2.2.2.5.1).

2.2.4.2 - Objeto document

Esse objeto representa o documento HMTL carregado no navegador. sem dvida o objeto mais importante do JavaScript, pois atravs dele que o script tem acesso aos elementos da pgina. Assim como visto no objeto window, todos os elementos de uma pgina podem ser referenciados a travs de uma matriz determinada. Entre eles, os mais importantes so apresentados abaixo.

A. document.forms - matriz de todos os forms de um documento.

B. document.images - matriz de todas as imagens contidas em um documento. Assim como no objeto window, a posio de um elemento em sua respectiva matriz depende de sua posio no documento. Cada elemento pode tambm ser acessado por seu nome, designado pelo parmetro NAME. Por exemplo:

document

A primeira imagem pode ser referenciada como document.images[0] ou document.imagem1, assim como o formulrio, que pode ser referenciado por document.forms[0] ou document.formulario. Porm, a segunda imagem apenas pode ser refernciada por document.images[1], uma vez que a esta no foi designado um nome.

Exemplo 2.2.4.2.1:

Link animado

Posicione a seta do mouse sobre o link:

NOTA:

Alguns browsers verso 3 reconhecem o atributo e outros no. Por exemplo, o Netscape 3 reconhece e o Internet Explorer 3 no.

C. document.bgColor - permite modificar a cor de fundo do documento atual.

D. document.linkColor - permite modificar a cor definida para links.

E. document.vlinkColor - permite modificar a cor definida para links que j foram vistos.

F. document.title - permite modificar o ttulo do documento atual.

Exemplo 2.2.4.2.2:

Algumas propriedades de document.

Clique aqui

Ao se clicar no link os parametros cor de fundo da pgina e cor do link mudam.

G. document.clear() - funo que apaga um documento de uma janela. S funciona quando o script executa este comando em um documento no qual ele no est contido (outro frame ou janela, ou arquivo externo).

Exemplo 2.2.4.2.3:

main2.html

main2.html

Clique aqui

sub2.html

sub2.html

Voc est no sub2.

frame2.html

document.clear

NOTA:

No funciona com verso 3 de browser.

H. document.open() - funo que abre o 'stream' do documento, ou seja, "abre" o documento para escrita. O processo anlogo ao processo de carregamento de um documento HTML na internet: o navegador se conecta ao servidor e este abre um 'stream', escreve os dados contidos no documento requisitado e fecha o 'stream'. 'open()' deve ser utilizado com write e close.

I. document.close() - funo que fecha o 'stream' aberto pela funo 'open()'.

J. document.write(String) - escreve a String dentro de um novo documento, cuja 'stream' foi previamente aberta.

K. document.writeln(String) - idntico ao anterior, inserindo uma quebra de linha no final.

Exemplo 2.2.4.2.4:

Aproveite o exemplo anterior e substitua main2.html por main3.html:

main3.html

main3.html

Clique aqui

NOTA1:

A substituio do texto em 'sub2' feita apenas dentro do navegador: o arquivo fsico sub2.html no modificado pelo comando.

NOTA 2:

Surpreendentemente funciona tanto com o Netscape 3 quanto Internet Explorer 3.

2.2.4.3 - Objeto matemtico

Esse objeto permite efetuar vrias operaes matemticas. Pode ser dividido em trs partes: trigonomtrico, exponenciao/logartmo e miscelnea.

Exemplo 2.2.4.3.1:

Trigonometria:

Objeto Matemtico: trigonometria

Exemplo 2.2.4.3.2:

Exponenciao/logartmo:

Objeto Matemtico: exponenciao/logartmo

Exemplo 2.2.4.3.3:

Miscelnea:

Objeto Matemtico: miscelnea

Exemplo 2.2.4.3.4:

Este um exemplo genrico que mostra, atravs do uso de funes matemticas, um texto se deslocando numa caixa de texto:

texto correndo na caixa

Preste ateno no texto que aparece na caixa:

2.3 - EVENTOS, APLICAES EM FORMULRIOS E DETECO DE BROWSERS

2.3.1 - Eventos

Em programao, eventos so aes que ocorrem durante a execuo de um programa e que podem ser captadas e tratadas por este: cliques ou movimentos de mouse, abertura ou fechamento de uma janela ou modificao de um texto. Linguagens mais antigas como Basic ou C ANSI no implementaram manipuladores de eventos pois, poca em que foram criadas essas linguagens, os computadores funcionavam em modo texto exclusivamente e no havia necessidade de se tratar eventos. Atualmente, como grande parte dos programas so feitos para ambientes de janelas (como MacOS, Windows ou XWindows), as linguagens mais modernas orientadas a objeto como Visual Basic, Delphi ou Java possuem mtodos intrnsecos para tratar destes eventos. JavaScript, que cria pequenas aplicaes grficas ligadas a um documento HTML, implementou manipuladores de eventos especficos para o ambiente da Internet.

Manipulador de evento (event handler) um mecanismo que causa um script reagir a um evento. o 'event handler' que especifica qual cdigo JavaScript deve ser executado. Eventos mais comuns:

Evento

Ocorre quando...

Manipulador

click

clique num elemento de FORM ou LINK

onClick

change

muda valor de TEXT, TEXTAREA ou SELECT

onChange

focus

elemento INPUT de FORM entra "em foco"

onFocus

blur

elemento INPUT de FORM sai de "foco"

onBlur

mouseovermouse sobre link ou imagem

onMouseOver

mouseoutmouse sai do link ou imagem

onMouseOut

select

selecionar elemento INPUT de FORM

onSelect

submit

submeter um FORM

onSubmit

resize

redimensionar a janela do browser

onResize

load

pgina carregada na janela browser

onLoad

unload

usurio sai da pgina

onUnload

Os manipuladores de eventos devem ser inseridos dentro das tags, uma vez que eles tratam aes ocorridas sobre objetos, tais como imagens, formularios, links, etc. A sintaxe bsica a seguinte:

onde ao podem ser instrues em JavaScript chamadas a funes. Cada objeto tem um conjunto de eventos que ele pode tratar.

2.3.1.1 - Eventos onLoad e onUnload

Esses eventos esto ligados ao navegador e ao documento.

A. onLoad - Deve ser inserido dentro das tags e e acionado quando a pgina carregada.

Exemplo 2.3.1.1.1:

onLoad

}

B. onUnload - Idntico ao anterior, porm executado quando o documento sai do navegador (caso a pgina seja mudada ou a janela fechada).

Exemplo 2.3.1.1.2:

onUnload

O "alert" aparece aps abandonar a pgina (ir para outro endereo, por exemplo).

2.3.1.2 - Eventos onMouseOver, onMouseOut, onClick

Esses eventos esto ligados ao do mouse.

A. onMouseOver - manipulador acionado quando o ponteiro o mouse passa sobre um link ou sobre uma imagem.

B. onMouseOut - manipulador acionado quando o ponteiro do mouse sai de cima de um link ou de uma imagem.

Exemplo 2.3.1.2.1:

Passe o mouse aqui

C. onClick - este manipulador executado por cliques de mouse, e pode ser usado com botes, caixas de seleo, botes de rdio, caixas e campos de texto, etc. muito til para se criar pseudo-links, que substituem ou melhoram a tag . Por exemplo, o cdigo abaixo gera um falso link que aciona uma caixa de alerta:

Exemplo:

Clique Aqui

NOTA 1:

Com a tag o valor javascript:void(0) pode ser utilizado quando se deseja que um clique no carregue uma nova pgina no navegador.

NOTA 2:

O Internet Explorer 3 d erro quando se usa 'void(0)'.

2.3.1.3 - Eventos ligados a elementos de formulrio

Como os formulrios so uma parte importante do HTML, foram criados vrios manipuladores que permitem tratar aes especficas sobre seus elementos.

A. onBlur: Manipulador acionado sempre que um objeto perde o foco, ou seja, quando se seleciona um outro objeto. Na prtica, deve ser usado com campos de texto.

Exemplo:

B. onFocus: Manipulador executado quando um objeto selecionado.

Exemplo:

C. onChange: Manipulador parecido com onBlur, executado quando o objeto perde o foco e seu valor foi alterado. Pode ser utilizado com caixas e campos de texto.

Exemplo:

D. onSelect: Manipulador acionado quando uma caixa de texto ou campo de texto selecionado. O efeito muito parecido com o onFocus.

E. onReset: Manipulador de eventos acionado sempre que o boto RESET de um formulrio clicado. Deve ser inserido dentro da tag .

F. onSubmit: Idntico ao anterior, porm acionado quando o boto 'Submit' for clicado.

Exemplo 2.3.1.3.1:

Eventos ligados formulrio

Nome

Sobrenome

Sexo

M

F

NOTA:

onReset no funciona com Internet Explorer 3.

Exemplo 2.3.1.3.2:

Este exemplo mostra como deixar uma determinada caixa de texto selecionada para escrita.

Pointer

Repare no cursor j apontado para a segunda caixa de texto:

2.3.2 - Aplicaes em formulrios

Provavelmente o caso JavaScript mais interessante e mais til seja seu emprego nos formulrios HTML por uma razo bem simples: imagine o caso de um usurio que estivesse tentando se cadastrar em alguma base de dados, e, aps preencher e enviar um formulrio extenso receber como resposta do servidor web que algum campo foi esquecido ou estava incorreto.

Isto significa que o usurio ter que preencher tudo de novo, e dependendo da pressa (e da pacincia), muito provavelmente o usurio desiste e procura um site realmente funcional.

Esta situao poderia ser evitada caso fossem includas verificaes JavaScript nos campos obrigatrios do formulrio, de modo que quando o usurio o enviasse no haveria porque ser recusado o hipottico cadastro.

Atravs de alguns exemplos veremos que esta verificao JavaScript no to complexa assim e que mais importante nas caixas de texto, pois so mais suscetveis de erros no preenchimento.

Exemplo 2.3.2.1:

Este exemplo na verdade no um formulrio, mas tem por inteno familiarizar o uso da tag FORM com JavaScript. O exemplo mostra uma aplicao de mudana de cor de fundo de documento FRAME usando duas maneiras: botes (button) e caixa de seleo (select).

frame.html

Frame.html

frame_1.html

frame_1.html

Este o frame #1

frame_2.html

frame_2.html

Este o frame #2

frame_3.html

frame_3.html

Este o frame #3

Red

Blue

Green

Cyan

NOTA:

Repare que no caso 'button' o manipulador de eventos 'onClick' e no 'select' 'onChange', e ambos fazem basicamente a mesma coisa.

Exemplo 2.3.2.2:

Neste exemplo temos um caso de redirecionamento de pgina usando uma caixa de lista suspensa, usando o manipulador de eventos 'onChange'.

Seleo de pgina

Escolha o site favorito:

www.dominio.com.br

www.uol.com.br

www.if.usp.br

www.uninove.br

www.terra.com.br

Se o site no estiver na lista acima, escreva o endereo completo:

Exemplo 2.3.2.3:

Validao de formulrio (Validao JavaScript).

Form validator

function Form_Validator()

{

var texto, msg, erro;

msg = 'A informao no est completa.\n';

erro = false;

//nome

texto = document.verifica.nome.value;

if (texto.length == 0){

msg+='\n- O NOME no foi preenchido';

erro = true;

}

//endereo

texto = document.verifica.endereco.value;

if (texto.length == 0){

msg+='\n- O ENDEREO no foi preenchido';

erro = true;

}

//cpf

texto = document.verifica.cpf.value;

if (texto.length == 0){

msg+='\n- O CPF no foi preenchido';

erro = true;

}

else{

if(texto.length < 11){

msg+='\n- O campo CPF necessita de 11 caracteres numricos';

erro = true;

}

else{

var checkOK = "0123456789";

var checkStr = texto;

var allValid = true;

for (i = 0; i < checkStr.length; i++){

ch = checkStr.charAt(i); // charAt(): funo mtodos para strings

for (j = 0; j < checkOK.length; j++)

if (ch == checkOK.charAt(j))

break;

if (j == checkOK.length){

allValid = false;

break;

}

}

if (!allValid){

msg+='\n- O campo CPF pode conter apenas caracteres numricos.';

erro =true;

}

}

}

if (erro) alert(msg);

return !(erro);

}

// -->

Preencha os campos abaixo:

Nome:

Endereo:

CPF:

NOTA:

A validao JavaScript tem como nica inteno facilitar a vida do usurio, impedindo que ele envie dados incorretos e depois receba uma mensagem de erro. No conte com JavaScript para filtragem de dados, pois essa validao ocorre no browser do cliente, que pode muito bem desabilit-la se assim o desejar.

2.3.3 - Deteco de browser

Sabemos que JavaScript extremamente dependente do browser e da verso do browser, ento se quisermos oferecer recursos que apenas um determinado browser suporta, precisamos antes determinar que browser o cliente HTTP est usando, em seguida poderemos redirecion-lo para uma pgina especfica.

Exemplo 2.3.3.1:

Navegador

Browser:

Exemplo 2.3.3.2:

Neste exemplo, o cliente redirecionado para uma pgina especfica, baseado no tipo e verso do browser.

Deteco de Browser

Exemplo 2.3.3.3:

Deteco do Browser

O seu browser e sua plataforma so:

navigator.appCodeName

navigator.appCodeName

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform

2.3.4 - Comentrios finais

Uma observao importante que existem muitas verses de JavaScript suportadas por certos browsers e verses de browsers. Infelizmente, isto freqentemente leva a incompatibilidades e confuses.

Desde que a Netscape introduziu o JavaScript, JavaScript 1.0 foi a especificao de linguagem suportada pelo Netscape Navigator 2.0. Subseqentemente, Navigator 3.0 suportou novos incrementos os quais compreendem JavaScript 1.1 e Navigator 4.0 suportou JavaScript 1.2.

Em paralelo, a Microsoft tentou suportar JavaScript 1.0 no seu Internet Explorer 3.0. Conhecido como "Jscript", o suporte inicial ao JavaScript oferecido pela Microsoft no foi confivel mas cheio de "bugs". Posteriormente o Internet Explorer 4.0 incluiu suporte robusto ao JavaScript padronizado, o qual divide muito em comum com o JavaScript 1.2 da Netscape, porm essas verses de JavaScript no so exatamente equivalentes.

2.4 - EXERCCIOS

2.4.1 - Escreva um documento HTML que, ao ser acessado apresente a mensagem "Ol, seja benvindo" e quando o usurio sair da pgina (ir para outro endereo, atualizar, fechar a janela browser), apresentar a janelinha "alert" com a mensagem "Obrigado, volte sempre", onde essa ltima mensagem dever estar aproximadamente no formato abaixo:

NO use uma funo externa, use a funo intrnseca apropriada.

2.4.2 - Escreva uma pgina HTML que liste na janela browser os nmeros de 1 a 100 e avise quando for mltiplo de 10, na seguinte formatao:

linha 1

linha 2

linha 3

linha 4

linha 5

linha 6

linha 7

linha 8

linha 9

linha 10 mltiplo de 10 !

linha 11

linha 12

.

.

.

linha 19

linha 20 mltiplo de 10 !

linha 21

.

.

.

linha 98

linha 99

linha 100 mltiplo de 10 !

Obs: os pontinhos indicam que a numerao continua.

2.4.3 - Escreva um documento HTML que pergunte por dois nmeros e, uma vez recebidos, some esses nmeros e apresente o resultado. No necessrio confirmar se realmente o usurio digitou um nmero e no qualquer string.

Sugesto: use o mtodo prompt() para perguntar pelos nmeros.

Obs: Lembre-se que a soma tem o mesmo operando que a concatenao de strings, e que essa tem precedncia sobre a soma.

2.4.4. -.Escreva um documento HTML que apresente a cor de fundo vermelha e a seguinte mensagem alinhada direita da janela browser:

"Posicione a seta do mouse sobre o link para mudar a cor de fundo".

Ao posicionar a seta sobre link a cor de fundo do documento muda para verde, ao retirar a seta do mouse a cor volta a ser vermelha, ao clicar no link abre a janelinha "alert" com a mensagem "Muda a cor de fundo".

2.4.5. - Escreva um documento HTML que apresente centralizada a mensagem:

"Clique aqui para abrir uma nova janela browser".

Ao clicar no link "aqui", abre uma nova janela browser que apresenta apenas a barra de menus, a barra de status e resoluo de 200x150 pixels.

2.5 - RESPOSTAS DOS EXERCCIOS

2.5.1 - Resposta do exerccio 2.4.1:

page251.html

Ol, seja benvindo

2.5.2 - Resposta do exerccio 2.4.2:

page252.html

2.5.3 - Resposta do exerccio 2.4.3:

page3.html

2.5.4 - Resposta do exerccio 2.4.4:

page254.html

Posicione a seta do mouse sobre o

link

para mudar a cor de fundo

2.5.5 - Resposta do exerccio 2.4.5:

page255.html

Clique

aqui

para abrir uma nova janela browser

window

|

|________________________________________________________

|||||

|parenttopselfframes

Location|______________|_____________|______________|________History

||

Document _____________________________________________________________________|

|||

|||

LinkFormsAnchor

|

|________________________________________________________

||||||||

Text|Reset|Submit|CheckBox|

PasswordButtonSelectRadio

Obrigado,

volte

sempre

Ok

135_________________________________________________________________

JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br