Apostila de Java Script ndice

Apostila de Java Script..................................................................................................................................1 1. INTRODUO.........................................................................................................................................3 2. CRIANDO VARIVEIS ..........................................................................................................................3 3. OPERADORES LGICOS ....................................................................................................................3 4. OPERADORES MATEMTICOS (Aritmticos).....................................................................................4 5. CONTROLES ESPECIAIS ......................................................................................................................4 6. COMENTRIOS.......................................................................................................................................5 7. ESTRUTURAS DE SELEO E REPETIO......................................................................................5 7.1. Comando if .........................................................................................................................................5 7.2. Funo condicional (operador ternrio)..............................................................................................5 7.3. Comando switch..................................................................................................................................5 7.4. Comando for.......................................................................................................................................6 7.5. Comando WHILE ..............................................................................................................................6 7.6. Comando do .......................................................................................................................................6 8. EVENTOS ................................................................................................................................................6 9. ESCREVENDO NO DOCUMENTO .......................................................................................................7 10. MENSAGENS (caixas de dilogo)..........................................................................................................7 11. CRIANDO FUNES ...........................................................................................................................9 12. FUNES INTRNSECAS .................................................................................................................10 12.1. Funes tipicamente Matemticas: .................................................................................................10 13. Objetos...................................................................................................................................................10 13.1. Criando Mtodos.............................................................................................................................11 13.2. Herana...........................................................................................................................................12 14. MANIPULANDO ARRAYS ................................................................................................................13 15. MANIPULANDO STRING's ...............................................................................................................15 16. MANIPULANDO DATAS ...................................................................................................................16 17. INTERAGINDO COM O USURIO ..................................................................................................17 17.1. Objeto Input TEXT ........................................................................................................................17 17.2. Objeto Input PASSWORD ............................................................................................................17 17.3. Objeto Input HIDDEN ...................................................................................................................18 17.4. Objeto Input CHECKBOX ............................................................................................................18 17.5. Objeto Input RADIO ......................................................................................................................19 17.6. Objeto Input BUTTON ..................................................................................................................20 17.7. Objeto Input RESET ......................................................................................................................21 17.8. Objeto Input SUBMIT ...................................................................................................................21 17.9. Objeto TEXTAREA .......................................................................................................................22 17.10. Objeto SELECT ...........................................................................................................................23 18. Focando um Objeto ...............................................................................................................................24 19. USANDO TIMER e DATE ..................................................................................................................26 20. Abrindo novas Janelas ..........................................................................................................................28 20.1. Abrindo a Janela .............................................................................................................................28 20.2. Abrindo um Documento .................................................................................................................28 20.3. Fechando a Janela ...........................................................................................................................29 20.4. Fechando o Documento .................................................................................................................29 Apndice A- A hierarquia de objetos..........................................................................................................30 O Objeto navigator..................................................................................................................................30 O Objeto window ...................................................................................................................................30 document : informaes sobre o documento atual. ............................................................................30

form : um formulrio no documento..................................................................................................30 link : um link no documento. .............................................................................................................32 frame : informaes sobre uma frame contida por uma janela. .........................................................33 O Objeto Array........................................................................................................................................34 O Objeto Date.........................................................................................................................................34 O Objeto Math........................................................................................................................................34 O Objeto string........................................................................................................................................34 21. Document ..............................................................................................................................................34

1. INTRODUO
JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HiperText Mark-up Language). As pginas HTML podem ser escritas utilizando-se editores de texto, como o NotePad, Write, etc. Porm, existem editores prprios para gerar HTML, tais como Dreamweaver e o Microsoft FrontPage. Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos. Os pargrafos soltos so executados na sequncia em que aparecem na pgina (documento) e os atrelados a eventos so executados apenas quando o evento ocorre. Para inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fim do set de Java Script, da seguinte forma: <script> Set de instrues </script> Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visualizao e facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento, atravs da criao de funes a serem invocadas quando se fizer necessrio (normalmente atreladas a eventos). Se a lgica escrita a partir de um determinado evento, no necessrio o uso dos comandos <script> e </script>. Os comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas) em sua sintaxe. Portanto, necessrio que seja obedecida a forma de escrever os comandos, de acordo com a forma apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando da escrita de um comando, o JavaScript interpretar, o que seria um comando, como sendo o nome de uma varivel.

2. CRIANDO VARIVEIS
A varivel criada automaticamente, pela simples associao de valores a mesma. Ex. NovaVariavel = "Jose"; Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose. As variveis podem ser Locais ou Globais. As variveis que so criadas dentro de uma funo so Locais e referenciveis apenas dentro da funo. As variveis criadas fora de funes so Globais, podendo serem referenciadas em qualquer parte do documento. Desta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte do documento, precisam ser definidas como globais. Embora no seja recomendvel, em uma funo, pode ser definida uma varivel local com o mesmo nome de uma varivel global. Para isso utiliza-se o mtodo de definio var. Ex. Varivel Global : MinhaVariavel = ""; Varivel Local : var MinhaVariavel = "";

3. OPERADORES LGICOS
So operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. 3

Os comandos condicionais sero vistos mais a frente. == != > >= < <= && || Igual (obs.: so juntos) Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou

4. OPERADORES MATEMTICOS (Aritmticos)

So operadores a serem utilizados em clculos, referncias de indexadores e manuseio de strings. Ao longo do manual estes operadores sero largamente utilizados, dando, assim, uma noo mais precisa do seu potencial. + adio de valor e concatenao de strings - subtrao de valores * multiplicao de valores / diviso de valores % obtem o resto de uma diviso: Ex: 150 % 13 retornar 7 7 % 3 retornar 1 += concatena /adiciona ao string/valor j existente. Ou seja: x += y o mesmo que x = x + y da mesma forma podem ser utilizados: -= , *= , /= ou %= Um contador pode ser simplificado utilizando-se : X++ ou X-- o que equivale as expresses: X = X + 1 ou X = X - 1 respectivamente. Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

5. CONTROLES ESPECIAIS
Caracter de escape \ \b - backspace \f - form feed \n - new line caracters \r - carriage return \t - tab characters \\ - caracter \ Ex. alert ("Cuidado com o uso de \" ou \' em uma string"); Exemplo 1:
<html> <head> <title></title> </head> <body> <script>

alert ("Cuidado com o uso de \" ou \' em uma string"); </script> </body> </html>

6. COMENTRIOS
// - Linha de comentrio /*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentrio. Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a utilizao destes caracteres como parte da string, utilize \ precedendo " ou '.

7. ESTRUTURAS DE SELEO E REPETIO

So comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma determinada condio, ou enquanto determinada condio for verdadeira. So eles:

7.1. Comando if
if (condio) { ao para condio satisfeita } [ else { ao para condio no satisfeita } ] Ex.
if (Idade < 18) {Categoria = "Menor";} else {Categoria = "Maior";}

7.2. Funo condicional (operador ternrio)

Permite que uma avaliao retorne um valor ou faa um processamento. receptor = ( (condio) ? verdadeiro : falso) Ex.
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino");

7.3. Comando switch

switch (varivel) { case valor1: // passos para varivel = valor1 instruo1; instruo2; break; // fora a sada para a primeira linha aps a } case valor2: // passos para varivel = valor2 instruo1; instruo2; break; // fora a sada para a primeira linha aps a } [default: // entra sempre caso no tenha entrado nos anteriores instruo1; instruo2;] } 5

7.4. Comando for

Executa uma ao enquanto determinada condio for verdadeira. Podemos usar para que seja repetido um nmero de vezes conhecido. Possui todo o controle dentro do cabealho do comando. for ( [inicializao/criao de varivel de controle] ; [condio] ; [incremento da varivel de controle] ) { ao } Ex.
for (x = 0 ; x <= 10 ; x++) {alert ("X igual a " + x); }

7.5. Comando WHILE

Executa uma ao enquanto determinada condio for verdadeira. A varivel usada na condio deve ter o seu valor alterado dentro das instrues da repetio. while (condio) { ao } Ex.
var contador = 10 while (contador > 1) { contador--; }

7.6. Comando do
Funciona da mesma forma que o while, porm o teste realizado no fim da repetio, forando a execuo das linas que sero repetidas de pelo menos uma vez. do Ex.
var contador = 10 do{ contador-- }while (contador > 1) ;

{ ao } while (condio) ;

OBS: Nos comandos FOR, WHILE e DO a diretiva "break" pode ser utilizada para interromper a condio principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ao (se determinada condio ocorrer) mas volta para o loop. Diretivas/condies entre [ ] significam que so opcionais.

8. EVENTOS
So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode definir aes a serem realizadas pelo programa. Abaixo apresentamos a lista de alguns eventos possveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os objetos passveis de sua ocorrncia. onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do documento. onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY. onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo, vlido para os objetos Text, Select e Textarea. 6

onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana, vlido para os objetos Text, Select e Textarea. onfocus - Ocorre quando o objeto recebe o focus, vlido para os objetos Text, Select e Textarea. onclick - Ocorre quando o objeto recebe um Click do Mouse, vlido para os objetos Button, Checkbox, Radio, Link, Reset e Submit. onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto, vlido apenas para Link. onselect - Ocorre quando o objeto selecionado, vlido para os objetos Text e Textarea. onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse, vlido apenas para o Form.

9. ESCREVENDO NO DOCUMENTO
O JavaScript permite que o programador escreva linhas dentro de uma pgina (documento), atravs do mtodo write. As linhas escritas desta forma, podem conter textos, expresses JavaScript e comandos Html. As linhas escritas atravs deste mtodo aparecero no ponto da tela onde o comando for inserido. Ex:
<script> valor = 30; document.write ("Minha primeira linha"); document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor)); </script>

A idia do exemplo acima escrever duas linhas. Entretanto o mtodo write no insere mudana de linha, o que provocar o aparecimento de apenas uma linha com os dois textos emendados. Para evitar este tipo de ocorrncia, existe o mtodo writeln que escreve uma linha e espaceja para a seguinte. Exemplo 2:
<html> <head> <title></title> </head> <body> <br>ESCREVENDO NO DOCUMENTO <br> <script> valor = 30 document.write ("Minha primeira linha"); document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor)); // document.write ("<p>Minha primeira linha</p>"); document.write ("<p>Nesta linha aparecer o resultado de: " + (10 * 10 + valor) + "</p>"); // document.write ("<br>Minha primeira linha"); document.write ("<br>Nesta linha aparecer o resultado de: " + (10 * 10 + valor)); </script> </body> </html>

10. MENSAGENS (caixas de dilogo)

Existem trs formas de comunicao com o usurio atravs de mensagens. 7

Apenas Observao. alert ( mensagem ) ; Ex.

alert ("Certifique-se de que as informaes esto corretas");

Mensagem que retorna confirmao de OK ou CANCELAR confirm (mensagem); Ex.

if (confirm ("Algo est errado...devo continuar??") ) { alert("Continuando"); } else { alert("Parando"); }

Recebe mensagem via caixa de texto Input Receptor = prompt ("Minha mensagem", "Meu texto") ; Onde: Receptor o campo que vai receber a informao digitada pelo usurio Minha mensagem a mensagem que vai aparecer como Label da caixa de input Meu texto um texto, opcional, que aparecer na linha de digitao do usurio Ex.
Entrada = prompt("Informe uma expresso matemtica", ""); Resultado = eval(Entrada); document.write("O resultado = " + Resultado);

Exemplo 3:
<html> <head> <title></title> </head> <body> MENSAGENS <p> <script> alert ("Certifique-se de que as informaes esto corretas") // if (confirm ("Algo est errado...devo continuar??")) { alert("Continuando") } else { alert("Parando") } // Entrada = prompt("Informe uma expresso matemtica", "") Resultado = eval(Entrada) document.write("O resultado = " + Resultado) </script> </p> </body> </html>

11. CRIANDO FUNES

Uma funo um set de instrues, que s devem ser executadas quando a funo for acionada. A sintaxe geral a seguinte: function NomeFuno (Parmetros) { Ao } Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de idade, recebendo como parmetro a sua idade.
function Idade (Anos) { if (Anos > 17) { alert ("Maior de Idade"); } else { alert ("menor de Idade") ; } }

Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual seja informada a idade e, a cada informao, a funo seja acionada.
<form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"> </form>

Observe-se que o parmetro passado (quando ocorre o evento "onchange") foi o contedo da caixa de texto "Tempo" (propriedade "value") e que, na funo, chamamos de "Anos". Ou seja, no existe co-relao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o contedo passado. Exemplo 4:
<html> <head> <title></title> </head> <body> Exemplo CRIANDO FUNES</font></font></b> <p>Preencha o campo abaixo com a idade desejada e de um &quot;<b>click</b>&quot; em qualquer parte do formulrio (fora do campo de digitao) para provocar o evento &quot;<b>onchange</b>&quot;. </p> <p><script> function Idade (Anos) { if (Anos > 17) { alert ("Maior de Idade") ; } else { alert ("menor de Idade") ; } } </script> <form name="TFuncao"><input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"></form></p> </body> </html>

12. FUNES INTRNSECAS

So funes embutidas na prpria linguagem. A sintaxe geral a seguinte: Result = funo (informao a ser processada) - eval = - parseInt - parseFloat - date() Calcula o contedo da string Transforma string em inteiro Transforma string em nmero com ponto flutuante Retorna a data e a hora (veja o captulo manipulando datas)

ex1: Result = eval ( " (10 * 20) + 2 - 8") ; ex2: Result = eval (string); No primeiro exemplo Result seria igual a 194. No segundo, depende do contedo da string, que tambm pode ser o contedo (value) de uma caixa de texto.

12.1.Funes tipicamente Matemticas:

Math.abs(nmero) retorna o valor absoluto do nmero (ponto flutuante) Math.ceil(nmero) retorna o prximo valor inteiro maior que o nmero Math.floor(nmero) retorna o prximo valor inteiro menor que o nmero Math.round(nmero) retorna o valor inteiro, arredondado, do nmero Math.pow(base, expoente) - retorna o clculo do exponencial Math.max(n1, n2) retorna o maior nmero dos dois fornecidos Math.min(n1, n2) retorna o menor nmero dos dois fornecidos Math.sqrt(nmero) retorna a raiz quadrada do nmero Math.SQRT2 retorna a raiz quadrada de 2 (aproximadamente 1.414) Math.SQRT_2 retorna a raiz quadrada de 1/2 (aproximadamente 0.707) Math.sin(nmero) retorna o seno de um nmero (anglo em radianos) Math.asin(nmero) retorna o arco seno de um nmero (em radianos) Math.cos(nmero) retorna o cosseno de um nmero (anglo em radianos) Math.acos(nmero) retorna o arco cosseno de um nmero (em radianos) Math.tan(nmero) retorna a tangente de um nmero (anglo em radianos) Math.atan(nmero) retorna o arco tangente de um nmero (em radianos) Math.pi retorna o valor de PI (aproximadamente 3.14159) Math.log(nmero) retorna o logartmo de um nmero Math.E retorna a base dos logartmos naturais (+ - 2.718) Math.LN2 retorna o valor do logartmo de 2 (aproximadamente 0.693) Math.LOG2E retorna a base do logartmo de 2 (aproximadamente 1.442) Math.LN10 retorna o valor do logartmo de 10 (+ - 2.302) Math.LOG10E retorna a base do logartmo de 10 (aproximadamente 0.434) Observao: Em todas as funes, quando apresento a expresso "(nmero)", na verdade quero me referir a um argumento que ser processado pela funo e que poder ser: um nmero, uma varivel ou o contedo de um objeto (propriedade value).

13. Objetos
Atravs do operador new podem ser criadas novas instncias a objetos j existentes, mudando o seu contedo, porm, mantendo suas propriedades. 10

A sintaxe geral a seguinte: novoObjeto = new ObjetoExistente (parmetros); Ex1:

minhaData = new Date (); //MinhaData passou a ser um objeto tipo Date, com o mesmo contedo existente em Date

(data e hora atual) Ex2:

minhaData = new Date(1996, 05, 27); //MinhaData passou a ser um objeto tipo Date, porm, com o contedo de uma nova data.

Ex3: Suponha a existncia do seguinte objeto chamado Empresas

function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp; this.Nfunc = Nfunc; this.Prod = Prod; }

Podemos criar novas instncias, usando a mesma estrutura, da seguinte forma:

elogica = new Empresas("Unisc", "120", "Servios"); pitaco = new Empresas("Ulbra", "35", "Software"); corisco = new Empresas("Puc", "42", "Conectividade");

Assim, a varivel unisc.nfunc ter o seu contedo igual a 120 Exemplo 5:

<html> <head> <title> </title> </head> <body> Exemplo CRIANDO NOVAS INSTNCIAS</font></font></b> <script> function Empresas (emp, nfunc, prod) { this.emp = emp; this.nfunc = nfunc; this.prod = prod; } unisc = new Empresas("Unisc", "120", "Servios"); ulbra = new Empresas("Ulbra", "35", "Software"); puc = new Empresas("Puc", "42", "Conectividade"); alert ("Unisc Numero do funcionario.Nfunc = " + unisc.nfunc); </script> </body> </html>

13.1.Criando Mtodos
Os mtodos de um objeto em Javascript so outras funes que so ligadas sua classe de definio. Usamos o mtodo prototype para determinar qual funo ser executada ao se chamar o mtodo. Uma outra forma de se criar um mtodo atribuir uma funo a uma varivel dentro do corpo da classe. Exemplo: Pessoa.prototype.setNome = setNome; 11

//a funo setNome tem que ser definida antes. Ex.: function Pessoa(){ var nome this.setNome = function setNome(qualNome){ this.nome = qualNome; } Esta pgina usa o seguinte para criar os objetos. Exemplo 6:
<script lang="Javascript 1.1" type="text/javascript"> function valorPedido() { return (this.quantidade * this.TipoProduto.preco); } function Produto(nom, p) this.nome = nom; this.preco = p; } {

produto.prototype.valorPedido = valorPedido; function pedido(nomecliente, prod, numerode) this.cliente = nomecliente; this.TipoProduto = prod; this.quantidade = numerode; this.DataPedido = new Date(); {

this.ValorPedido = prod .valorPedido; // invoca o metodo valorPedido do produto } var produto1 = new produto("PoupaTempo", 23); var produto2 = new produto("PoupaGrana", 11); var produto3 = new produto("PoupaGrana & Tempo", 99); var pedido1 = new pedido("Sr. Patolino", produto1, 5); var pedido2 = new pedido("Sr. Bozo", produto3, 22); var pedido3 = new pedido("Sr. Trouxa", produto2, 1); </script>

13.2.Herana
A herana outro conceito que o JavaScript no implementa formalmente, necessitando das famosas gambiarras. Quando bem empregada, permite uma grande reutilizao de cdigo, criando classes derivadas a partir de uma superclasse (classe-me), herdando todas as propriedades. Existem vrios tipos especficos de pessoas, em vrios sentidos. Brasileiros, portugueses, americanos, vendedores, mdicos, desenvolvedores Mesmo sendo mais especficos, todos eles tm caractersticas comuns de uma pessoa. Assim, o construtor Brasileiro derivado de Pessoa. Primeiro, vamos criar os construtores com suas propriedades.
function Pessoa() { this.olhos = 2; this.falando = function(message) { alert(message); } } function Brasileiro() { this.pais = "Brasil"; }

12

Pessoas falam, e isso se aplica tambm aos brasileiros, mas nem todas as pessoas nasceram no Brasil. Assim, a superclasse (ou super-construtor) Person, e somente nela definimos as propriedades comuns. Para fazer a herana existem vrios mtodos, mas vou explicar agora somente o que considero o mais simples e usado. Basta criar uma instncia do super-construtor no prottipo do construtor derivado, assim:
Brasileiro.prototype = new Pessoa;

Todo o construtor Pessoa foi instanciado como parte de Brasileiro. Agora podemos criar um objeto Brasileiroe utilizar tanto as propriedades especficas (definidas no prprio construtor) quanto as do superconstrutor.
var eu = new Brasileiro("Gerimundo"); alert(eu.pais); // "Brasil" eu.falando("Ol!"); // "Ol!"

14. MANIPULANDO ARRAYS

O JavaScript possui um tratamento diferenciado dos vetores. Para trabalhar com arrays necessrio a criao de um objeto com a propriedade de criao de um array. Ex. var varivel = new Array([tamanho]); Exemplo:
var vet = new Array("girafa", "elefante", "zebra");

Obs.: A classe Array com a primeira letra em maiscula. O tamanho opcional porque o vetor dinmico. Existem dois construtores para a classe Array, um recebe o tamanho e outro recebe um lista de elementos. Podemos criar um vetor de uma outra forma, bastando informar o seu tamanho pela prorpiedade length. O exemplo mostra como criar um objeto tipo array de tamanho varivel e com a funo de "limpar" o contedo das variveis cada vez que uma nova instncia seja criada a partir dele.
function CriaArray (n) { // Estamos informando o tamanho do vetor para que funcione como um vetor. this.length = n; for (var i = 0 ; i < n ; i++) { this[i] = ""; } }

Agora podemos criar novas instncias do objeto "CriaArray" e aliment-los com os dados necessrios.
// opcional a colocao do tamanho, // ele dinmico, podendo crescer nomeDia = new CriaArray(7); nomeDia[0] = "Domingo"; nomeDia[1] = "Segunda"; nomeDia [2] = "Tera"; nomeDia[3] = "Quarta"; nomeDia[4] = "Quinta"; nomeDia[5] = "Sexta"; nomeDia[6] = "Sbado";

13

atividade = new CriaArray(5) atividade[0] = "Analista"; atividade[1] = "Programador"; atividade[2] = "Operador"; atividade[3] = "Conferente"; atividade[4] = "Digitador";

Agora poderemos obter os dados diretamente dos arrays.

diaSemana = nomeDia[4]; ocupao = Atividade[1];

diaSemana passaria a conter "Quinta" e ocupao conteria "Programador". Outra forma de se trabalhar com arrays criar novas instncias dentro do prprio objeto do array, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da seguinte forma:
function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp; this.Nfunc = Nfunc; this.Prod = Prod; } TabEmp = new CriaArray(3) TabEmp[1] = new Empresas("Unisc", "120", "Servios"); TabEmp[2] = new Empresas("Ulbra", "35", "Software"); TabEmp[3] = new Empresas("Puc", "42", "Conectividade");

Assim, poderemos obter a atividade da empresa nmero 3, cuja resposta seria Conectividade, da seguinte forma:
atividade = TabEmp[3].Prod;

Obs: importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores podem ser referncias ao contedo de variveis. Exemplo 7: <html>
<head> <title></title> </head> <body> Exemplo MANIPULANDO ARRAYS <br> <script> function CriaArray (n) { this.length = n; for (var i = 1 ; i <= this[i] = 0; } } nomeDia = new CriaArray(7); nomeDia[0] = "Domingo"; nomeDia[1] = "Segunda"; nomeDia [2] = "Tera"; nomeDia[3] = "Quarta"; nomeDia[4] = "Quinta"; nomeDia[5] = "Sexta";

n ; i++) {

14

nomeDia[6] = "Sbado"; // atividade = new CriaArray(5); atividade[0] = "Analista"; atividade[1] = "Programador"; atividade[2] = "Operador"; atividade[3] = "Conferente"; atividade[4] = "Digitador"; // diaSemana = nomeDia[4]; ocupacao = atividade[1]; document.write ("<p>dia semana = " + diaSemana + "</p>"); document.write ("<p>ocupacao = " + ocupacao + "</p>"); // function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp; this.Nfunc = Nfunc; this.Prod = Prod; } tabEmp = new CriaArray(3); tabEmp[1] = new Empresas("Unisc", "120", "Servios"); tabEmp[2] = new Empresas("Ulbra", "35", "Software"); tabEmp[3] = new Empresas("Puc", "42", "Conectividade"); x = 3; atividade = tabEmp[x].Prod; document.write ("<p>atividade = " + atividade + "</p>"); </script> </body> </html>

15. MANIPULANDO STRING's

O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio. Abaixo apresentamos as propriedade e os mtodos disponveis para manuseio de strings. string.length - retorna o tamanho da string (quantidade de bytes) string.charAt(posio) - retorna o caracter da posio especificada (inicia em 0) string.indexOf("string") - retorna o nmero da posio onde comea a primeira "string" string.lastindexOf("string") - retorna o nmero da posio onde comea a ltima "string" string.substring(i1, i2) - retorna o contedo da string que corresponde ao intervalo especificado. Comeando no caracter posicionado em i1 e terminando no caracter imediatamente anterior ao valor especificado em i2. Ex.
Todo = "Tabaca"; Parte = Todo.substring(1, 4);

(A varivel Parte receber a palavra aba) string.toUpperCase() - Transforma o contedo da string para maisculo (Caixa Alta) string.toLowerCase() - Transforma o contedo da string para minsculo (Caixa Baixa) escape ("string") - retorna o valor ASCII da string (vem precedido de %) unscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %) 15

16. MANIPULANDO DATAS

Existe apenas uma funo para que se possa obter a data e a hora. a funo Date(). Esta funo devolve data e hora no formato:Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano Ex. Fri May 24 16:58:02 1996 Para se obter os dados separadamente, existem os seguintes mtodos: getDate() getDay() getMonth() getYear() getHours() getMinutes() getSeconds() - Obtm o dia do ms (numrico de 1 a 31); - Obtm o dia da semana (0 a 6); - Obtm o ms (numrico de 0 a 11); - Obtm o ano; - Obtm a hora (numrico de 0 a 23); - Obtm os minutos (numrico de 0 a 59); - Obtm os segundos (numrico de 0 a 59).

Para se alterar as configuraes de data e hora: : setDate(valor) - Altera o dia do ms (numrico de 1 a 31), valores acima do maior dia fazem com que o me passe para o prximo e o dia fica igual a diferena entre o dia fornecido e o maior dia do ms; setDay(valor) - Altera o dia da semana (0 a 6); setMonth(valor) - Altera o ms (numrico de 0 a 11); setYear(valor) - Altera o ano; setHours(valor) - Altera a hora (numrico de 0 a 23); setMinutes(valor) - Altera os minutos (numrico de 0 a 59); setSeconds(valor) - Altera os segundos (numrico de 0 a 59). No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a varivel DataToda para armazenar data/hora e a varivel DiaHoje para armazenar o nmero do dia da semana.
dataToda = new Date() ; diaHoje = DataToda.getDay() ;

Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e utilizar a varivel diaHoje como indexador.
function CriaTab (n) { this.length = n; for (var x = 1 ; x<= n ; x++) { this[x] = ""; } } nomeDia = new CriaTab(7); nomeDia[0] = "Domingo"; nomeDia[1] = "Segunda"; nomeDia [2] = "Tera"; nomeDia[3] = "Quarta"; nomeDia[4] = "Quinta"; nomeDia[5] = "Sexta"; nomeDia[6] = "Sbado"; diaSemana = nomeDia[DiaHoje] ;

16

Para criar uma varivel tipo Date com o contedo informado pela aplicao, existe o mtodo set. Assim, temos os seguintes mtodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds. Seguindo o exemplo acima, para mudar o ms para novembro, teramos:
dataToda.setMonth(10);

17. INTERAGINDO COM O USURIO

A interao com o usurio se d atravs de objetos para entrada de dados (textos), marcao de opes (radio, checkbox e combo), botes e link's para outras pginas. Conceitualmente, os objetos so divididos em: Input, Textarea e Select. O objeto Input divide-se (propriedade Type) em: Password Button Text Reset Hidden Submit Checkbox Radio

A construo destes objetos feita pela linguagem HTML (HiperText Mark-up Language).

17.1.Objeto Input TEXT

o principal objeto para entrada de dados. Suas principais propriedades so: type, size, maxlength, name e value. type=text size maxlength name value : Especifica um campo para entrada de dados normal : Especifica o tamanho do campo na tela. : Especifica a quantidade mxima de caracteres permitidos. : Especifica o nome do objeto : Armazena o contedo do campo.

Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Exemplo 8:
<html> <head> <title></title> </head> <body> Exemplo Objeto Input TEXT </font></font></b> <form name="TText"> <p>Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value="" onchange="alert ('Voce digitou ' + CxTexto.value)"> </p> </form> </body> </html>

17.2.Objeto Input PASSWORD

o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto so criptografados e, s so interpretados (vistos) pelo "server", por razes de segurana. Suas principais propriedades so: type, size, maxlength, name e value. type=password (na tela) por "*". size maxlength : Especifica um campo para entrada de senha. Os dados digitados so substituidos : Especifica o tamanho do campo na tela. : Especifica a quantidade mxima de caracteres permitidos. 17

name value

: Especifica o nome do objeto : Armazena o contedo digitado no campo.

Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Exemplo 8: <html> <head> <title></title> </head> <body> <form name="TPassword"> Entrada de Senha <input type=password size=10 maxlength=10 name="Senha" value=""> </p> </form> </body> </html>

17.3.Objeto Input HIDDEN

um objeto semelhante ao input text, porm, invisvel para o usurio. Este objeto deve ser utilizado para passar informaes ao "server" (quando o formulrio for submetido) sem que o usurio tome conhecimento. Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Armazena o contedo do objeto Exemplo 9: <html> <head> <title></title> </head> <body> <form name="THidden"> Objeto Hidden<input type=hidden size=20 maxlength=30 name="HdTexto" value="" > </form> </p> </body> </html>

17.4.Objeto Input CHECKBOX

So objetos que permitem ao usurio ligar ou desligar uma determinada opo. Suas principais propriedades so: name, value e checked. name : Especifica o nome do objeto value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, ser enviado o valor default "on" . Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condio de "checked". checked : Especifica que o objeto inicialmente estar ligado 18

O nico evento associado a este objeto onclick. Exemplo 10: No exemplo abaixo, criaremos um objeto input.text e trs objetos checkbox. O primeiro checkbox, quando ativado, transformar o texto em caracteres minsculos. O segundo checkbox, quando ativado, transformar o texto em caracteres maisculos. O terceiro checkbox, quando ativado, dar um aviso do contedo que ser recebido pelo "server" caso o formulrio seja submetido para este. <html> <head> <title></title> </head> <body> Exemplo Objeto Input CHECKBOX <script> function AltMaiusc () { document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase() document.TCheck.Opt1.checked = false } function AltMinusc () { document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase() document.TCheck.Opt2.checked = false } </script> <p> <form name="TCheck"> Muda Case <input type=text size=20 maxlength=20 name="Muda"></p> <p> Minusculo<input type=checkbox name="Opt1" value="1" checked onclick="if (this.checked) { AltMinusc() } "> Maiusculo<input type=checkbox name="Opt2" value="2" onclick="if (this.checked) { AltMaiusc() } "> Demo valor<input type=checkbox name="Opt3" onclick="if (Opt3.checked) { alert ('Server recebera = ' + Opt3.value) }"> </p> </form> </body> </html> Existe ainda uma outra forma de manipular este objeto, em forma de array, que a seguinte: form.elements[index].propriedade. Esta no uma boa forma porque o index nico dentro de um formulrio, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois, neste caso, haver um natural deslocamento do index, podendo comprometer a lgica.

17.5.Objeto Input RADIO

So objetos que permitem ao usurio a escolha de apenas uma alternativa, diante de uma srie de opes. Suas principais propriedades so: name, value e checked. name : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos os objetos desta srie tm que ter o mesmo "name".

19

value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked) : Caso seja omitido, ser enviado o valor default "on" . Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condio de "checked". checked : Especifica que o objeto inicialmente estar ligado Para utilizao deste objeto importante o conhecimento de outras propriedades associadas: Objeto.length Objeto.[index].value Objeto.[index] : Retorna a quantidade de opes existentes na lista : retorna o texto (value) associado a cada opo .checked : retorna verdadeiro ou falso

O nico evento associado a este objeto onclick. Exemplo 11: No exemplo abaixo temos dois set's de objetos radio. O primeiro tem o objetivo de mudar a cor de fundo do documento atual. O segundo tem o objetivo levar informaes ao "server". <html> <head> <title></title> </head> <body> Exemplo Objeto Input RADIO <p> <form method="POST" name="TesteRadio"> <p>Radio</p> <p> <input type=radio name="Rad" value="1" onclick="document.bgColor='green'"> Fundo Verde <input type=radio name="Rad" value="2" onclick="document.bgColor='blueviolet'"> Fundo Violeta <input type=radio name="Rad" value="3" onclick="document.bgColor='#FFFF00'"> Fundo Amarelo </p> <p> <input type=radio name="Rad2" value="1"> Solteiro <input type=radio name="Rad2" value="2"> Casado <input type=radio checked name="Rad2" value="3"> Tico Tico </p> </form> </body> </html>

17.6.Objeto Input BUTTON

Este objeto tem por finalidade criar um boto ao qual se possa atrelar operaes lgicas, a serem executadas quando o mesmo receber um click. Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Especifica o nome que aparecer sobre o boto O nico evento associado a este objeto onclick. Exemplo 12: <html> 20

<head> <title></title> </head> <body> Exemplo Objeto Input BUTTON <p> <form method="POST" name="TstButton"> Digite um Texto <input type=text size=30 maxlength=30 name="Teste" value=""> </p> <p> Click no Botao <input type=button name="Bteste" value="Botao de teste" onclick="alert ('Voce digitou: ' + TstButton.Teste.value)"> </p> </form> </body> </html>

17.7.Objeto Input RESET

Este objeto um boto que tem por finalidade, nica, limpar os campos digitados pelo usurio, restaurando o contedo do formulrio para os valores iniciais. recomendvel a utilizao deste objeto, para facilitar o usurio a limpar suas informaes, uma vez que a utilizao da opo "reload" do "browser" (que seria uma forma) no perde as infromaes digitadas. Suas propriedades so: name e value. name : Especifica o nome do objeto. value : Especifica o nome que aparecer sobre o boto O nico evento associado a este objeto onclick. Exemplo 13: <html> <head> <title></title> </head> <body> Exemplo Objeto Input RESET <p> <form method="POST" name="TesteRes"> Digite um Texto<input type=text size=10 maxlength=10 name="Teste" value=""> </p> <p> Apague o texto <input type=reset name="Bres" value="Reset"> </p> </form> </body> </html>

17.8.Objeto Input SUBMIT

Este objeto um boto que tem por finalidade submeter (enviar) o contedo dos objetos do formulrio ao "server". O formulrio ser submetido URL especificada na propriedade "action" do formulrio. Suas propriedades so: name e value. 21

name : Especifica o nome do objeto. value : Especifica o nome que aparecer sobre o boto O nico evento associado a este objeto onclick. Embora se possa atrelar lgica a este evento, no se pode evitar que o formulrio seja submetido, portanto, no aconselhavel o seu uso. Mais seguro e mais til a utilizao da propriedade onSubmit do formulrio. Este permite que se atrele lgica e decida-se pela submisso ou no. Exemplo 14: <html> <head> <title></title> </head> <body> Exemplo Objeto Input SUBMIT <script> function TestaVal() { if (document.TesteSub.Teste.value == "") { alert ("Campo nao Preenchido...Form nao Submetido") return false } else { alert ("Tudo Ok....Form Submetido") return true } } </script> <p> <form method="POST" name="TesteSub" onSubmit="return TestaVal()" action="http://10.0.5.2/scripts/isapielo.dll/vbloja.loja.action"> Digite um Texto<input type=text size=10 maxlength=10 name="Teste" value=""> </p> <p> Botao Submit <input type=submit name="Bsub" value="Manda p/Server"> </p> </form> </body> </html> No exemplo acima, o formulrio est sendo submetido a URL "10.0.5.2" (que o endereo IP de um "Server"). Este servidor est rodando o "Microsoft Internet Information Server". Estamos enviando os dados a um "OLE", que est no subdiretrio "scripts", chamado "isapielo.dll", que tem por objetivo fazer a coneco com aplicaes escritas em VB. A aplicao VB que est sendo chamada, um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mtodo "action".

17.9.Objeto TEXTAREA
um objeto para entrada de dados em um campo de mltiplas linhas. Suas principais propriedades so: name, rows e cols. name rows cols value : Especifica o nome do objeto : Especifica a quantidade de linhas que aparecero na tela : Especifica a quantidade de caracteres que aparecero em cada linha : Acessa o contedo do campo via programao.

Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect.

22

Exemplo 15: <html> <head> <title></title> </head> <body> Exemplo Objeto TEXTAREA <br> <form name="TesteTextarea"> <p> Texto de Multiplas Linhas <textarea name="MultText" rows=2 cols=40> Primeira linha do texto inicial segunda linha do texto inicial </textarea> </p> </body> </html>

17.10.

Objeto SELECT

um objeto para entrada de opes, onde o usurio, a partir de uma lista de alternativas, seleciona uma ou mais opes. Suas principais propriedades so: name, size, value e multiple. name size value multiple : Especifica o nome do objeto : Especifica a quantidade de opes que aparecero na tela simultneas : Associa um valor ou string para cada opo (opcional) : Especifica a condio de mltipla escolha (usando-se a tecla Ctrl)

Para utilizao deste objeto importante o conhecimento de outras propriedades associadas: Objeto.length : Retorna a quantidade de opes existentes na lista Objeto.selectedIndex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].text : Retorna o texto externo associado a cada opo Objeto.options[index].value : Retorna o texto interno (value) associado a cada opo Objeto.options[index].selected : retorna verdadeiro ou falso Os eventos associados a este objeto so: onchange, onblur e onfocus. Exemplo 16: Neste exemplo importante observar os seguintes aspectos: a) A lista permite apenas uma seleo b) A quarta opo aparecer inicialmente selecionada (propriedade "selected") c) No utilizamos a propriedade "value". Assim, a propriedade "text" e a propriedade "value" passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela. . <html> <head> <title></title> </head> <body> Exemplo Objeto SELECT <script> 23

function Verselect(Campo) { Icombo = Campo.selectedIndex alert ("Voce escolheu " + Campo.options[Icombo].text) } </script> <form name="TesteSelect"> <p>Objeto Select <select name="Combo1" size=1 onchange="Verselect(Combo1)"> <option>Opcao 1 <option>Opcao 2 <option>Opcao 3 <option selected>Opcao 4 (recomendada) <option>Opcao 5 <option>Opcao 6 </select> </p> // Segundo script <script> function Vermult(Lista) { var opcoes = "" for (i = 0 ; i < Lista.length ; i++) { if (Lista.options[i].selected) { opcoes += (Lista.options[i].value + ", ") } } alert ("As opcoes escolhidas foram : " + opcoes) } </script> <p>Objeto Select2 <select name="Combo2" size=4 multiple onblur="Vermult(this)"> <option value="List1">Escolha 1 </option> <option value="List2">Escolha 2 </option> <option value="List3">Escolha 3 </option> <option value="List4">Escolha 4 </option> </select> </p> </form> </body> </html> No segundo script importante observar os seguintes aspectos: a) A lista permite mltiplas selees b) Utilizamos a propriedade "value". Assim as propriedades "text" e "value" tm valores diferentes: text retornar Escolha 1 a Escolha 4 e value retornar List1 a List4. c) O parmetro passado, quando da ocorrncia do evento onblur, foi this. Esta diretiva significa que estamos passando este objeto.

18. Focando um Objeto

Este mtodo permite que o cursor seja ativado em um determinado objeto (focado). Isso pode ser feito na carga do documento, a partir da ocorrncia de um evento ou mesmo dentro de uma funo. Observe que at agora o usurio tinha que dar um "Click" para focar o objeto desejado. De forma semelhante existe o mtodo "Select". Este mtodo marca o contedo do objeto com uma tarja roxa, permitindo ao usurio, em caso de substituio do contedo do campo, no ter que deletar o contedo anterior, pois, com este mtodo, a deleo se d de forma automtica quando da digitao do novo contedo. 24

Os mtodos "Focus" e "Select" podem ser utilizados nos seguintes objetos: password, select, text e textarea No exemplo abaixo, utilizaremos o evento onload para setar o focus para o primeiro objeto do formulrio e os mtodos focus e select para, na rotina de crtica dos dados, focar o objeto que contiver erro de preenchimento. Exemplo 17: <html> <head> <title></title> </head> Exemplo Focando um Objeto <body text="blue" onload="document.TstFocus.Nome.focus()"> <script> DdosOk = true function Criticar() { DadosOk = false DataAtual = new Date() MesAtual = DataAtual.getMonth() + 1 AnoAtual = DataAtual.getYear() + 1900 Nome = document.TstFocus.Nome.value Mes = parseInt(document.TstFocus.Mes.value) Ano = parseInt (document.TstFocus.Ano.value) // if (Ano < 1900) {Ano = Ano + 1900 } if (Nome == "") { alert ("Informe o seu Nome, No deixe em branco") document.TstFocus.Nome.focus() return } if (Mes < 1 || Mes > 12) { alert ("O Ms informado no vlido, informe corretamente") document.TstFocus.Mes.focus() document.TstFocus.Mes.select() return } if (Ano == AnoAtual && Mes > MesAtual) { alert ("O perodo informado superior a data atual") document.TstFocus.Mes.focus() document.TstFocus.Mes.select() return } if (Ano < 1996 || Ano > AnoAtual) { alert ("O Ano informado no vlido, informe corretamente") document.TstFocus.Ano.focus() document.TstFocus.Ano.select() return } DadosOk = true } </script> <form name="TstFocus" method="POST"> 25

<p> Informe o seu Nome <input type=text size=30 maxlength=30 name="Nome"> </p><p> Informe o ms desejado <input type=text size=2 maxlength=2 name="Mes"> </p><p> Informe o ano desejado <input type=text size=4 maxlength=4 name="Ano"> </p><p> <input type=button name="Testa" value="Testar Validade" onclick="Criticar() if (DadosOk) {alert ('Todos os Dados esto Corretos') } "> </p> </form> </body> </html>

19. USANDO TIMER e DATE

um mtodo que permite a programao para que uma determinada ao s ocorra aps o transcurso de um determinado tempo. Varivel = setTimeout ("ao", tempo) Onde: Varivel uma varivel apenas para controle do timer ao a ao que se quer realizar. tempo o tempo de espera para que a ao ocorra, em milisegundos. Obs: importante observar que a ao s ocorrer uma vez. Para que a ao volte a ocorrer, ser necessrio repetir o comando dentro da ao, obtendo-se, assim, um LOOP. Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte mtodo: clearTimeout (Varivel) Onde: Varivel o nome da varivel de controle do timer. Abaixo encontra-se um exemplo de um formulrio que apresenta a data e hora atual, atualizando os dados a cada um segundo, tendo dois botes de rdio que tem a funo de ativar e desativar a atualizao dos dados. Apresenta tambm, fora do formulrio, a data contendo dia e ms por extenso. Exemplo 18: <html> <head> <title></title> </head> <body> EXEMPLO TIMER e DATE </font></font></b> <P> 26

<script> function Hoje() { ContrRelogio = setTimeout ("Hoje()", 1000) Hr = new Date() dd = Hr.getDate() mm = Hr.getMonth() + 1 aa = Hr.getYear() hh = Hr.getHours() min = Hr.getMinutes() seg = Hr.getSeconds() DataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/") DataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa) HoraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":") HoraAtual += ((min < 10) ? "0" + min + ":" : min + ":") HoraAtual += ((seg < 10) ? "0" + seg : seg) document.DataHora.Data.value=DataAtual document.DataHora.Hora.value=HoraAtual } // function CriaArray (n) { this.length = n } // NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Tera" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sbado" // NomeMes = new CriaArray(12) NomeMes[0] = "Janeiro" NomeMes[1] = "Fevereiro" NomeMes[2] = "Maro" NomeMes[3] = "Abril" NomeMes[4] = "Maio" NomeMes[5] = "Junho" NomeMes[6] = "Julho" NomeMes[7] = "Agosto" NomeMes[8] = "Setembro" NomeMes[9] = "Outubro" NomeMes[10] = "Novembro" NomeMes[11] = "Dezembro" // Data1 = new Date() dia = Data1.getDate() dias = Data1.getDay() mes = Data1.getMonth() ano = Data1.getYear() document.write ("Recife, " + NomeDia[dias] + " " + dia + " de " + NomeMes[mes] + " de " + (ano + 1900 ) ) </script> </p> <P> 27

<form name="DataHora"> Data : <input type=text size=10 maxlength=10 name="Data"> Hora : <input type=text size=10 maxlength=10 name="Hora"> <input type=radio name="Botao" value="Para Relogio" checked onclick="clearTimeout(ContrRelogio)">Desativa <input type=radio name="Botao" value="Ativa Relogio" onclick="ContrRelogio = setTimeout('Hoje()', 1000)">Ativa </form> </P> </body> </html>

20. Abrindo novas Janelas

Neste captulo mostrado como podem ser abertas novas janelas sobre uma janela contendo o documento principal. importante no confundir esta forma de abrir janelas com a diviso da tela em vrias partes, ou mesmo com a chamada de outras pginas. Revisem Frames !!!!

20.1.Abrindo a Janela
A sintaxe geral deste mtodo a seguinte: Variavel = window.open ("Url", "Nome da janela", "Opes") Onde: Variavel - Nome que ser atribuido como propriedade da janela. Url - Endereo Internet onde a janela ser aberta. Normalmente voce estar utilizando a sua prpria Url, neste caso, preencha com "". Nome da Janela - o nome que aparecer no top da janela (Ttulo) Opes - So as opes que definem as caractersticas da janela, quais sejam: toolbar location directories status scrollbars menubar resizable width height - Cria uma barra de ferramentas tipo "Back", "Forward", etc. - Abre a barra de location do browse - Abre a barra de ferramentas tipo "What's New", "Handbook", etc. - Abre uma barra de status no rodap da janela - Abre barras de rolamento vertical e horizontal - Cria uma barra de menu tipo "File", "Edit", etc. - Permite ao usurio redimencionar a janela - Especifica a largura da janela, em pixels - Especifica a altura da janela, em pixels

Todas as opes (exceto width e height) so boleanas e podem ser setadas de duas formas. Exemplo: "toolbar" ou "toolbar=1") so a mesma coisa. Se nada for especificado, entende-se que todas as opes esto ligadas; Caso seja especificada qualquer opo, ser entendido que esto ligadas apenas as opes informadas. As opes devem ser informadas separadas por vrgula, sem espao entre elas.

20.2.Abrindo um Documento
28

Para abrir um documento dentro da janela, deve ser utilizado o seguinte mtodo: Variavel.document.open() Onde "Variavel" o nome da varivel associada ao mtodo window.open

Escrevendo no Documento
Para escrever a tela no documento, deve ser utilizado o seguinte mtodo: Variavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.")

20.3.Fechando a Janela
Para fechar a janela, utilize o seguinte mtodo: Variavel.document.write ("window.close()")

20.4.Fechando o Documento
Para fechar o documento, utilize o seguinte mtodo: Variavel.document.close () Exerccio: Construa um script em que o usurio escolher uma opo (Unisc ou Ulbra) e dar um Click em um boto (Nova Janela). Neste momento ser aberta uma nova janela que conter a foto escolhida pelo usurio e um boto que, ao receber o Click, fechar a janela.

29

Apndice A- A hierarquia de objetos

O Objeto navigator
Este um objeto de alto nvel. Ele no realmente parte de uma hierarquia, j que no descende de nenhum outro objeto, e no pai de nenhum outro objeto. Propriedades(mtodos): appCodeName appName appVersion userAgent : o nome-cdigo do browser. : o nome do browser. : informaes da verso do browser. : informaes do cabealho HTTP user-agent

O Objeto window
O objeto de alto nvel na hierarquia a janela. A janela tem estas propriedades ou mtodos: defaultStatus : mensagem padro da barra de status.

document : informaes sobre o documento atual.

Este objeto armazena todas as caractersticas da pgina HTML, como por exemplo: cor das letras, cor de fundo, figura que aparecer como papel de parede, etc Sempre que incluimos alguma declarao no <BODY> do documento, estamos alterando (sem perceber) o objeto Document. alinkColor anchor bgColor : o atributo ALINK. : uma matriz que lista todas as ncoras no documento. : o atributo BGCOLOR.

cookies: coleo de cookies. fgColor forms : o atributo TEXT. : coleo de forms

form
action

: um formulrio no documento.
: Uma string que contm o URL de destino para a submisso do formulrio.

button : Um boto no formulrio. O objeto button tem estas propriedades: name : O atributo NAME= no descritor HTML. value : O atributo VALUE= no descritor HTML.

30

checkbox : Uma caixa de verificao no formulrio. O objeto checkbox tem estas propriedades: checked: O estado de seleo da caixa de verificao. defaultChecked: O atributo CHECKED= do descritor name : O atributo NAME= do descritor. value : O atributo VALUE= do descritor. matriz elements : Uma matriz que lista os elementos do formulrio na ordem em que eles aparecem formulrio. encoding : O cdigo MIME do formulrio.

hidden : Um elemento oculto no formulrio. O objeto hidden tem estas propriedades: name : O nome (o atributo NAME) no descritor. value : O atributo VALUE= no descritor. length method : O nmero de elementos no formulrio. : Como a entrada de dados no formulrio enviada ao servidor; o atributo METHOD.

password : Um campo de senha no formulrio. defaultValue: O valor padro do objeto password (o atributo VALUE=). name : O nome (o atributo NAME=) do objeto. value : O valor atual contido pelo campo. Inicialmente, o mesmo que o atributo VALUE= (defaultValue), mas se um script modifica os dados contidos pelo campo, o valor ser alterado. radio : Um boto de rdio no formulrio. O objeto radio tem estas propriedades: checked : O estado de uma caixa de verificao ou boto de opo (boto de rdio). defaultChecked: O estado padro de uma caixa de verificao ou boto de opo (boto de rdio). length : O nmero de botes no conjunto. name : O nome (o atributo NAME=) no descritor. value : O atributo VALUE= no descritor. reset : Um boto de reinicializao no formulrio. O objeto reset tem as seguintes propriedades: name : O nome (o atributo NAME=) do objeto. value : O atributo VALUE=. select : Uma caixa de seleo no formulrio. O objeto select tem as seguintes propriedades: length : O nmero de opes na lista de seleo. name : O nome (atributo NAME=) da lista de seleo. options: O nmero de opes na lista. selectedIndex: O ndice (posio) da opo selecionada na lista de seleo. 31

text : O texto aps um descritor de opo na lista de seleo. value : O atributo VALUE= da lista de seleo. submit : Um boto de seleo no formulrio. O objeto submit tem as seguintes propriedades: name : O nome (o atributo NAME) do objeto. value: O atributo VALUE=. target : O nome da janela que exibe respostas aps o formulrio ter sido submetido.

text : Um elemento text no formulrio. O objeto text tem as seguintes propriedades: defaultValue: O valor padro do objeto text (o atributo VALUE=). name : O nome (o atributo NAME=) do objeto. value : O valor atual contido no campo. Inicialmente o mesmo que o atributo VALUE= (defaultValue). textarea : Um elemento textarea no formulrio. O objeto textarea tem as seguintes propriedades: defaultValue : O valor padro do objeto textarea (o atributo VALUE=). name : O nome (o atributo NAME=) do objeto. value : O valor atual contido no campo. Inicialmente, o mesmo que o atributo VALUE= (defaultValue), mas se um script modifica, o valor contido pelo campo value ser alterado. forms : uma matriz que lista todos os formulrios no documento.

lastModified : a data em que o documento foi modificado pela ltima vez. linkColor : o atributo LINK.

link

: um link no documento.

O objeto link tem estas propriedades: hash : um nome de ncora no URL. host : a parte nomehost:porta do URL. hostname: o nome do host e do domnio (endereo de IP) no URL. href : O URL completo. pathname : A poro diretrio do URL, incluindo o nome de arquivo. port : a parte porta de comunicao do URL, se especificada. protocol : a parte protocolo do URL, incluindo os dois pontos (por exemplo: ftp:). search : a parte do URL comeando com ?, especificando uma consulta, se presente. target : o atributo TARGET de um link, que especifica a janela-alvo. links : uma matriz que lista todos os links no documento.

32

location referrer title vlinkColor

: o URL completo do documento. : o URL do documento vinculado a este, a partir do qual o usurio chegou. : o ttulo do documento. : o atributo VLINK.

frame uma janela.

O objeto frame tem estas propriedades:

: informaes sobre uma frame contida por

matriz frames : Uma matriz que lista as frames-filhas dentro desta frame. length : O nmero de frames dentro desta frame. name : O nome da frame (o atributo NAME= no descritor ). parent : Um sinnimo para a janela-me que contm esta frame. self : Um sinnimo para a frame corrente. window : Um sinnimo para a frame corrente. frames : uma matriz que lista todas as frames em uma janela.

history : a lista history. O objeto history tem esta propriedade: length : o nmero de entradas na lista de histrico. length location : o nmero de frames na janela.

:informaes sobre o URL do documento corrente (observe que h uma propriedade do objeto document tambm chamada location...isto algo diferente!). O objeto location tem estas proprieades: hash host hostname href pathname port protocol search target name opener : um nome de ncora no URL : a parte nomehost:porta do URL : o nome do host e do domnio (endereo de IP) no URL : o URL completo : A poro diretrio do URL, incluindo o nome de arquivo. : a parte porta de comunicao do URL, se especificada. : a parte protocolo do URL, incluindo os dois pontos (por exemplo: ftp:). : a parte do URL comeando com ?, especificando uma consulta, se presente. : o atributo TARGET de um link, que especifica a janela-alvo.

: o nomeJanela : referencia a janela na qual um script usou window.open para abrir a janela corrente. Esta uma nova propriedade, introduzida com o Netscape Navigator 3.0, beta 3. : referencia a janela-me ao trabalhar em uma frame. 33

parent

self status top window

: referencia a janela corrente (o mesmo que a propriedade window). : uma mensagem temporria na barra de status. : a janela principal do browser. : referencia a janela corrente (o mesmo que self).

O Objeto Array
O objeto array novo, introduzido com o Netscape Navigator 3.0, beta 3, de modo que no funciona com o Netscape 2.0. um objeto interno, de modo que no uma propriedade de outro objeto. Ele tem uma nica propriedade: length : O nmero de valores contidos na matriz.

O Objeto Date
O objeto Date no descende de outro objeto, e no tem nenhuma propriedade.

O Objeto Math
O objeto Math no descende de outro objeto. Ele tem estas propriedades: E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 : Constante de Euler e a base dos logaritmos naturais (aproximadamente 2.718). : Logaritmo natural de 2 (aproximadamente 0.693). : Logaritmo natural de 10 (aproximadamente 2.302). : Logaritmo base 2 de e (aproximadamente 1.442). : Logaritmo base 10 de e (aproximadamente 0.434). : O valor de pi, (aproximadamente 3.14159). : Raiz-quadrada de meio (1 sobre a raiz quadrada de 2 aproximadamente 0.707). : Raiz quadrada de 2 (aproximadamente 1.414).

O Objeto string
Os objetos strings so criados quando voc cria uma string; eles no descendem de outros objetos. Eles tm esta propriedade: length : O nmero de caracteres na string.

21.

Document
34

Este objeto armazena todas as caractersticas da pgina HTML, como por exemplo: cor das letras, cor de fundo, figura que aparecer como papel de parede, etc

Sempre que incluimos alguma declarao no <BODY> do documento, estamos alterando (sem perceber) o objeto Document.

Forma geral:
<BODY [BACKGROUND="Imagem"] [BGCOLOR="#CorDeFundo"] [FGCOLOR="#CorDoTexto"] [LINK="#CorDosLinks"] [ALINK="#CorDoLinkAtivado"] [VLINK="#CorDoLinkVisitado"] [onLoad="funo"] [onUnLoad="funcao"]> Onde: Imagem = figura no formato GIF, que servir como papel de parede para a Home Page; #Cor... = nmero (hexadecimal), com seis dgitos, que corresponde a cor no formato RGB, o "#" obrigatrio. Os dois primeiros dgitos correspondem a R (red), os dois do meio a G (green) e os dois ltimos a B (blue). A combinao dos trs, forma a cor no formato RGB. funo = Nome de uma funo pr-definida, que ser chamada quando o evento ocorrer.

Propriedades:
alinkColor - Determina a cor do link enquanto o boto do o mouse estiver pressionado sobre o link. Ex: document.alinkColor="#FFFFFF" anchors - Vetor que armazena as ncoras definidas em uma pgina HTML com o comando <A NAME="ancora">. Esta propriedade somente para leitura, no pode ser alterada. Ex: document.anchors[ndice] bgColor - Determina a cor de fundo da pgina HTML. Ex: document.bgColor="#000000" cookie - Os cookies so pequenos arquivos que alguns sites da Web gravam no computador dos visitantes. A idia identificar o usurio, anotar quais caminhos ele j percorreu dentro do site e permitir um controle mais eficaz dos espectadores. (Informtica Exame - JUL/97). Esta propriedade melhor especificada pela prpria Netscape fgColor - Determina a cor das letras em uma pgina HTML. Esta propridade no altera o que j est impresso na pgina HTML. Ex: document.fgColor="#0000FF" forms - Vetor que armazena as referncias aos formulrios existentes na pgina HTML. Esta propriedade somente para leitura, no pode ser alterada. Ex: document.forms[ndice] lastModified - Obtm a data da ltima atualizao da pgina HTML. Esta propriedade somente para leitura, no pode ser alterada. 35

Ex: document.lastModified linkColor - Determina a cor dos links que ainda no foram visitados pelo usurio. Ex: document.linkColor = "#00FF00" links - Vetor que armazena os links definidos em uma pgina HTML. Esta propriedade somente para leitura, no pode ser alterada. Ex: document.links[ndice] location - Armazena o endereo (URL) atual em forma de string. Esta propriedade somente para leitura, no pode ser alterada. referrer - Armazena o endereco (URL) de quem chamou a pgina HTML atual. Com essa propriedade voc pode saber o usurio chegou a sua pgina. Esta propriedade somente para leitura, no pode ser alterada. Ex: document.referrer title - Armazena uma string com o ttulo da pgina HTML atual. Esta propriedade somente para leitura, no pode ser alterada. Ex: document.title vlinkColor - Determina a cor que o link aparecer aps ser visitado. Ex: document.vlinkColor = "#80FF80"

Mtodos:
clear -limpa a tela da janela atual. Ex: document.clear( ) open -Abre um documento e envia (mas no exibe) a sada dos mtodos write/writeln. Os dados enviados so exibidos, quando encontrado o mtodo close. Ex: document.open( ) close - Termina uma sequncia iniciada com o mtodo open, exibindo o que tinha sido apenas enviado. Ex: document.close( ) write - Imprime informaes na pgina HTML. Ex: document.write("Qualquer coisa" [,varivel] [,..., expresso]) writeln - Imprime informaes na pgina HTML e passa para a prxima linha. Em meus testes, esse mtodo no apresentou diferena com relao ao mtodo write. Ex: document.writeln("Qualquer coisa" [,varivel] [,..., expresso])

Eventos:
onLoad - Ocorre assim que um browser carrega uma pgina HTML ou frame. Ex: <BODY ... onLoad='alert("Oi!!!")'> onUnload - Ocorre quando se abandona uma pgina HTML ou frame. 36

Ex: <BODY ... onUnload='alert("Tchau!!!")'>

Form
Os formulrios tem muitas utilidades, uma das principais seria a transferncia de dados dentro da prpria pgina HTML, sem que para isso seja necessria a interveno de qualquer outro meio externo. Ao se criar um formulrio na pgina HTML, automaticamente criada uma referncia para este formulrio, que fica guardada na propriedade form do objeto document. Como voc deve ter visto na pgina que trata do objeto document, a propriedade form um vetor, e a cada formulrio criado tambm criado um novo elemento para este vetor, o ndice inicial deste vetor 0 (zero) e varia at o nmero de formulrios do documento -1. Como voc pode notar, cada formulrio criado em uma pgina HTML, considerado um objeto distinto, tendo suas prprias referncias, mtodos, propriedades e eventos associados. A forma de acessar-mos diferenciadamente esses formulrios dentro da pgina HTML, utilizar a propriedade form do objeto document.

Forma geral:
<FORM NAME="Nome"] [ACTION="URL"] [METHOD="GET | POST"] [onSubmit="evento"]> Onde: Nome = Nome do formulrio, para futuras referncias dentro da pgina HTML. URL = Especifica o URL do servidor ao qual sera enviado o formulario. GET | POST = metodos de transferencia de dados do browser para o servidor

Propriedades:
action - Especifica o URL do servidor ao qual sera enviado o formulario. Ex: document.NomeDoFormulario.action documet.GuestBook.action = "esaex@canudos.ufba.br" elements - Vetor que armazena todos os objetos que so definidos dentro de um formulrio (caixas de texto, botes, caixas de entrada de dados, checkboxes, botes de rdio). O nmero de elementos deste vetor varia de 0 (zero) at o nmero de objetos dentro do formulrio -1. Ex: document.NomeDoFormulario.elements[indice] method - Seleciona um mtodo para acessar o URL de ao. Os mtodos so: GET e POST. Ambos os metodos transferem dados do browser para o servidor, com a seguinte diferenca: 37

METHOD=GET - os dados de entrada sao acrescentados ao endereo (URL) associado, como se fossem uma query (pesquisa a banco de dados) comum; METHOD=POST - os dados nao so acrescentados ao URL, mas fazem parte do corpo da mensagem enviada ao servidor. Obs.: Omtodo mais usual o POST: Esta propriedade pode ser alterada, porm s surtir efeito antes que o formulrio seja mostrado na tela. Ex: document.NomeDoFormulario.method = "post" ( ou "get")

Mtodos:
submit - Transfere os dados do formulrio para o endereo especificado em action, para serem processados. Funcionado de maneira anloga ao boto submit em HTML. Ex: document.NomeDoFormulario.submit( )

Eventos:
onSubmit - Ocorre quando um boto do tipo SUBMIT recebe o clique do mouse, transferindo os dados de um formulrio para o servidor especificado em action. Os dados s so enviados se o evento receber um valor verdadeiro (true), valor este que pode ser conseguido como resultado a chamada de uma funo que valida as informaes do formulrio. Ex: document.NomeDoFormulario.onSubmit ="return Valida_Informacoes(NomeDoFormulario)"

Exemplo:
<HTML> <HEAD> <TITLE>Exemplo - Objeto Form</TITLE> <META NAME=GENERATOR CONTENT="Claris Home Page 2.0"> </HEAD> <BODY> <FORM action="mailto:esaex@canudos.ufba.br" method="POST">

<P><TT><B><H1>Exemplo:</H1></B></TT>

<P>Este exemplo demonstra a funcionalidade de um formul&aacute;rio, para improvisar um "Guest Book"

38

<P>&nbsp;

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

Endere&ccedil;o: <BR> <INPUT TYPE="text" NAME="endereco" VALUE=" " SIZE=70><BR>

E-Mail: <BR> <INPUT TYPE="text" NAME="email" VALUE=" " SIZE=70><BR>

Sua Home-Page: <BR> <INPUT TYPE="text" NAME="hp" VALUE=" " SIZE=70><BR>

IRC: <BR> <INPUT TYPE="text" NAME="irc" VALUE=" " SIZE=70><BR>

Sugest&otilde;es, etc.: <BR> <TEXTAREA NAME="sujestao" ROWS=7 COLS=70></TEXTAREA>

<P><CENTER><INPUT TYPE="submit" NAME="Submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Limpar"></CENTER> </FORM>

<CENTER> <FORM> <INPUT TYPE="button" VALUE="Pgina Anterior" onClick="history.go(-1)"> 39

<IMG SRC="S177.gif" WIDTH=540 HEIGHT=46 ALIGN=bottom><BR>

<FONT SIZE="-2">P&aacute;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>

40