Download - javascript.doc
CURSO TCNICAS EM PROGRAMAO
JavaScript
Prof. Jairo - [email protected]
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 [email protected]