1

Apostila sobre Java Script

2

Java Script Bsico................................................................................................... 3 1. Introduo ........................................................................................................ 3

1.1 O que Java Script?................................................................................. 3 1.2 Qual a diferena entre Java e JavaScript? ............................................ 3 1.3 Um pequeno exemplo do uso de scripts ................................................... 4

2. Operadores e Controles Especiais................................................................... 8 2.1 Operadores Matemticos.......................................................................... 8 2.2 Operadores Lgicos.................................................................................. 8 2.3 Caracteres Especiais ................................................................................ 9

3 Comandos Condicionais ................................................................................ 10 4 Eventos .......................................................................................................... 12 5 Criando variveis ........................................................................................... 14 6 Escrevendo no documento............................................................................. 15 7 Mensagens..................................................................................................... 18 8 Funes ......................................................................................................... 19

8.1 Funes intrnsecas................................................................................ 19 9 Manipulando Strings e Datas ........................................................................ 21 10 Manipulando Arrays.................................................................................... 23 11 Formulrio e elementos do formulrio ........................................................ 25

11.1 O Objeto FORM ...................................................................................... 25 11.2 Objetos relacionados ao texto................................................................. 25 11.3 O Objeto de boto................................................................................... 27 11.4 O Objeto de caixa de seleo ................................................................. 27 11.5 O objeto de boto de opo.................................................................... 28

a) Propriedade length..................................................................................... 28 b) Propriedade checked .............................................................................. 29

11.6 O objeto SELECT.................................................................................... 29 a) Propriedade selectedIndex ..................................................................... 29 b) Propriedade text...................................................................................... 30 c) Propriedade value ................................................................................... 30

12 Passando dados e elementos do formulrio a funes .............................. 31 13 Objetos da janela e do documento ............................................................. 32

13.1 Acessando as propriedades e mtodos da janela .................................. 32 a) Mtodo back ........................................................................................... 32 b) Mtodo close() ........................................................................................ 32 c) Mtodo open()......................................................................................... 33 d) Mtodo print().......................................................................................... 33

14 Exerccios......................................................................................................... 34

3

Java Script Bsico

1. Introduo

1.1 O que Java Script?

JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HiperText Mark-up Language). 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 JavaScript, da seguinte forma:

instrues ...

Este procedimento pode ser adotado em qualquer local da pgina. 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.

1.2 Qual a diferena entre Java e JavaScript?

Ainda que os nomes sejam quase os mesmos, Java no a mesma coisa que JavaScript! Essas so duas tcnicas diferentes de programao na Internet. Java uma linguagem de programao. JavaScript uma linguagem de scripting (tal como diz o nome). A diferena que se pode criar programas reais com Java. O mais das vezes, porm, voc quer apenas criar um efeito chamativo, sem se importar com qualquer programa real. Assim, JavaScript foi pensado como algo fcil de se compreender e de se usar. Os autores de JavaScript no tm que se importar muito com programao. Ns poderamos at dizer que JavaScript muito mais uma extenso do HTML do que uma linguagem de computador separada. Naturalmente essa no uma definio

4

"oficial" mas acho que ela torna mais compreensvel a diferena entre Java e JavaScript.

1.3 Um pequeno exemplo do uso de scripts

Exemplo 1:

Crie um arquivo HTML chamado Alo.html e coloque o cdigo abaixo:

function mensagem() { alert("Alo!"); }

Abra o arquivo Alo.html com o seu navegador e clique no boto Aperte-me, o resultado ser este:

5

Ento, o que acontece neste script?

Existe uma coisa nova no tag de . L voc pode ver 'onclick'. Isto diz ao browser que funo ele tem que chamar quando o boto pressionado ( claro que s quando o browser suporta JavaScript). A funo 'mensagem()' declarada na pgina. Quando o boto pressionado a funo executada. Tem uma coisa nova neste script - o mtodo 'alerta'. Este mtodo j declarado no JavaScript - desse modo voc s tem que cham-lo. Existem muitos mtodos diferentes que voc pode chamar.

Exemplo 2:

Crie um arquivo HTML chamado Saudacao.html e coloque o cdigo abaixo:

6

Coloque o seu nome, por favor: Abra o arquivo Saudacao.html com o seu navegador, digite seu nome na caixa de texto e clique na parte em branco da pgina, o resultado ser este:

Ns temos alguns elementos novos implementados neste script novamente.

Em primeiro lugar, voc certamente notou o comentrio dentro do script. Dessa maneira voc pode esconder o script dos browsers antigos que no podem rodar scripts. Voc tem que manter a ordem daquilo que mostrado! O incio do comentrio deve estar logo depois do primeiro tag de . O comentrio termina logo antes do tag de . Neste documento-HTML voc tem um elemento de formulrio onde o usurio pode colocar o seu nome. O 'onBlur' no tag de avisa ao cliente que funo que ele tem que chamar quando alguma coisa colocada dentro do formulrio. A funo 'getname(str)' ser chamada quando voc 'deixa' este elemento de formulrio, ou pressiona o 'enter' depois de haver colocado alguma coisa. A funo pegar a seqncia que voc colocou atravs do comando 'getname(this.value)'. 'This.value' significa o valor que voc colocou neste elemento de formulrio.

7

Exemplo 3:

Vamos implementar uma funo de data dentro do nosso script. Assim, se voc criou uma pgina-HTML, voc pode fazer o cliente imprimir a ltima modificao no documento. Voc no precisa, entretanto, escrever a data no documento. Voc simplesmente escreve um pequeno programa de script. Quando voc fizer pequenas modificaes no futuro, a data se modificar automaticamente.

Crie um arquivo HTML chamado DataAntiga.html e coloque o cdigo abaixo:

Esta uma pgina-HTML simples. ltimas modificaes:

8

2. Operadores e Controles Especiais

2.1 Operadores Matemticos

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 % Obtm o resto de uma diviso: Ex: 150 % 13 retornar 7.

7 % 3 retornar 1.

+= concatena /adiciona a 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 s expresses: X = X + 1 ou X = X - 1 respectivamente.

Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

2.2 Operadores Lgicos So operadores a serem utilizados em comandos condicionais, tais como: IF, FOR e WHILE. Os comandos condicionais sero vistos mais frente. == Igual != Diferente > Maior >= Maior ou Igual

9

< Menor

10

3 Comandos Condicionais 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: Comando IF

if (condio) { ao para condio satisfeita

} [ else { ao para condio no satisfeita } ]

Ex.:

if (Idade < 18) { Categoria = "Menor"

} else { Categoria = "Maior"

} Comando FOR

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)

} Comando WHILE

Executa uma ao enquanto determinada condio for verdadeira. while (condio) { ao }

11

Ex.: var contador = 10 while (contador > 1) { contador- }

Move condicional

receptor = ( (condio) ? verdadeiro : falso) Ex.:

NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino") OBS: Nos comandos FOR e WHILE 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.

12

4 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 dos 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 foco e houve mudana de contedo. Vlido para os objetos Text, Select e Textarea. onblur - Ocorre quando o objeto perde o foco, independente de ter havido mudana. Vlido para os objetos Text, Select e Textarea. onfocus - Ocorre quando o objeto recebe o foco. Vlido para os objetos Text, Select e Textarea. onclick - Ocorre quando o objeto recebe um Click do Mouse. Vlido para os objetos Buton, 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.

Exemplo:

Crie uma pgina com o nome Eventos.html e insira este cdigo nela:

13

Cadastro do Conselho Abra esta pgina com o seu navegador e veja o resultado. Posicione o mouse sob o link e olhe para a barra de status na parte de baixo do seu browser. A nica coisa que voc tem que fazer acrescentar a propriedade onMouseOver ao seu tag de link . O 'window.status' lhe permitir escrever coisas na barra de status do seu browser. Como se pode ver, voc tem que alterar as aspas. Voc no vai poder usar " todo o tempo, porque se no o JavaScript no ser capaz de identificar a seqncia que voc quer imprimir na barra de status. Depois da seqncia voc tem que escrever ;return true.

14

5 Criando variveis

A varivel criada automaticamente, pela simples associao de valores a mesma.

Exemplo:

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 ser 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. Exemplo:

Varivel Global J MinhaVariavel = "" Varivel Local J var MinhaVariavel = ""

15

6 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. Vamos falar sobre o objeto document.write(). O objeto

Mtodo do objeto documento:

O arquivo HTML que aparece na janela do browser um objeto tipo document.

A cada objeto Javascript, o programador da linguagem previu um conjunto de mtodos - ou funes dedicadas a este objeto. Para document, o Javascript dedicou o mtodo 'escrever no documento', conhecido como o mtodo write().

A chamada do mtodo faz-se segundo a notao:

nome_do_objeto.nome_do_mtodo

Para chamar o mtodo write() do documento, escreva-se:

document.write();

Mtodo write() A sintaxe bastante simples

write("seu texto");

Pode-se tambm escrever uma varivel, seja a varivel resultado, write(resultado);

Para associar texto (cadeia de caracteres) e variveis, utiliza-se instruo:

write("O resultado " + resultado);

16

Podem-se utilizar os tags Html para incrementar o texto:

write("O resultado " + resultado); ou write ("" + "O resultado " + "" + resultado)

Exemplos:

valor = 30 document.write ("Minha primeira linha") document.write ("Nesta linha aparecer o resultado de : "

+ (10 * 10 + valor)) 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. Entretanto, em nossos testes, este comando no surtiu efeito, obtendo-se o mesmo resultado do mtodo write. A soluo encontrada para esta situao foi a utilizao do comando de mudana de pargrafo da linguagem Html.

valor = 30 document.write ("Minha primeira linha") document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor) + "")

Isto resolve a questo da mudana de linha, porm, vai gerar uma linha em branco, entre cada linha, por se tratar de mudana de pargrafo. Caso no seja desejada a existncia da linha em branco, a alternativa utilizar o comando Html que apenas muda de linha.

valor = 30 document.write ("Minha primeira linha") document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor) )

17

O problema

O objeto 'document.write()' limpa todo o documento antes de imprimir algo na tela. Para solucionar este problema utilizaremos o objeto window. Com esse simples parmetro adicional, 'window-janela' no objeto, ele se torna muito til, alm de no mais limpar a tela para imprimir. Exemplo:

window.document.write("Sem limpar...");

o documento...

18

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

alert ( mensagem )

Exemplo:

alert ("Certifique-se de que as informaes esto corretas") Mensagem que retorna confirmao de OK ou CANCELAR

confirm (mensagem) Exemplo:

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)

19

8 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.

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.

8.1 Funes intrnsecas

So funes embutidas na prpria linguagem. A sintaxe geral a seguinte: Result funo (informao a ser processada) eval Calcula o contedo da string parseInt Transforma string em inteiro parseFloat Transforma string em nmero com ponto flutuante

20

Date() - date() - Retorna a data e a hora 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.

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(nmero1, nmero2)

Retorna o maior nmero dos dois fornecidos

Math.min(nmero1, nmero2)

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

(aproximadamente 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 (aproximadamente

2.302) Math.LOG10E Retorna a base do logartmo de 10 (aproximadamente

0.434)

21

9 Manipulando Strings e Datas Strings O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio. Abaixo apresentamos 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(index1, index2)

Retorna o contedo da string que corresponde ao intervalo especificado. Comeando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.

Exemplo: Todo = "Elogica" Parte = Todo.substring(1, 4) (A varivel Parte receber a palavra log) 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 %) 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. Exemplo:

22

Fri May 24 16:58:02 1996 Para se obter os dados separadamente, existem os seguintes mtodos: getDate() Obtm o dia do ms (numrico de 1 a 31) getDay() Obtm o dia da semana (0 a 6) getMonth() Obtm o ms (numrico de 0 a 11) getYear() Obtm o ano getHours() Obtm a hora (numrico de 0 a 23) getMinutes() Obtm os minutos (numrico de 0 a 59) getSeconds() Obtm 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. Exemplo:

DataToda = new Date() DiaHoje = DataToda.getDay()

23

10 Manipulando Arrays Para trabalhar com arrays necessria a criao de um objeto com a propriedade de criao de um array. No exemplo abaixo, criaremos 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) {

this.length = n for (var i = 1 ; i

24

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

} TabEmp = new Empresas(3) TabEmp[1] = new Empresas("Elogica", "120", "Servios") TabEmp[2] = new Empresas("Pitaco", "35", "Software") TabEmp[3] = new Empresas("Corisco", "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.

25

11 Formulrio e elementos do formulrio

A maior parte da interatividade entre uma pgina da Web e o usurio ocorre dentro de um formulrio. E a que reside grande parte da HTML interativa para cada browser: campos de texto, botes, caixas de seleo, listas de opes e assim por diante. Todo formulrio est contido em um documento, mesmo assim, o objeto document precisa fazer parte da referncia ao formulrio e seus elementos.

11.1 O Objeto FORM

Um objeto FORM pode ser referenciado por sua posio no array de formulrio contidos por um documento ou pelo seu nome (se voc atribuir um identificador ao atributo NAME dentro da tag .) Se apenas um formulrio aparecer no documento, ele ainda ser um membro de um array (um array de um elemento), podendo ser referenciado desta forma:

document.forms[0]

Observe que a referncia do array usa a verso no plural da palavra, seguida por um par de colchetes que contm o nmero de ndice do elemento (zero sempre o primeiro). Mas, se voc atribuir um nome para o formulrio, basta informar o nome do formulrio na referncia: document.nomeFormulario

11.2 Objetos relacionados ao texto Cada um dos quatro elementos do formulrio HTML relacionados ao texto texto, senha, oculto e TextArea um elemento na hierarquia de objetos do documento. Tudo, menos o objeto oculto, aparece na pgina, permitindo que os usurios insiram informaes. Para os objetos visveis nessa categoria, os manipuladores de evento so disparados a partir de aes do usurio, como dar o foco a um campo (colocando o ponteiro de insero do texto no campo) e alterando o texto (digitando novo texto e saindo do campo). A maior parte das suas aes de campo de texto disparada pela mudana do texto (o manipulador de evento onChange). a) Propriedade value A propriedade mais usada de um elemento relacionado a texto a propriedade value. Essa propriedade representa o contedo atual do

26

elemento de texto. Um script pode apanhar e definir seu contedo a qualquer momento. O contedo de uma propriedade value sempre uma string. Poder ser usado os mtodos de manipulao de Strings juntamente com a propriedade value, verificar captulo 9. Sintaxe: var texto; texto = document.nomeFormulario.nomeCampoTexto.value;

Exemplo usando o mtodo de String toUpperCase():

function upperMe(){ var campo = document.form_org.nomeAluno; var valorUpper = campo.value.toUpperCase(); campo.value = valorUpper; }

No exemplo acima a funo upperMe() ir converter para letras maisculas o valor do campo texto nomeAluno , mas para que esta funo funcione necessrio que um evento a invoque. Veja o exemplo abaixo da chamada da funo com a utilizao do evento onChange():

b) Mtodo blur do objeto Text Simula o evento de retirada do foco do objeto em questo. Sintaxe: document.nomeFormulario.nomeCampoTexto.blur();

c) Mtodo focus do objeto Text Simula o evento de focalizao do objeto, ou seja, passa o foco para o objeto em questo.

27

Sintaxe: document.nomeFormulario.nomeCampoTexto.focus();

11.3 O Objeto de boto O boto um dos objetos mais simples de se programar. Ele possui apenas algumas propriedades que raramente so acessadas ou modificadas nos scripts. O evento mais til do objeto de boto o evento onClick. Ele disparado sempre que o usurio d um clique no boto.

11.4 O Objeto de caixa de seleo A propriedade value de uma caixa de seleo qualquer outro texto que voc deseja associar ao objeto. Esse texto no aparece na pgina de forma alguma. A propriedade value do objeto de caixa de seleo (checkbox) a String que ser enviada pelo formulrio caso o checkbox em questo esteja checado. a) Propriedade checked

a propriedade principal de um objeto de caixa de seleo, esta propriedade verifica se a caixa est marcada ou no. A propriedade checked um valor Booleano: true [verdadeiro] se a caixa estiver marcada, false [falso] se no estiver. Toda a propriedade quando for booleano poder ser usado em uma expresso de condio if ou if...else Exemplo: function verificaBox(){ if (document.form_org.campoChecagem.checked){ alert(Esta caixa de seleo est checada.); }else{

alert(Esta caixa de seleo no est checada);

} }

b) Mtodo blur do objeto Checkbox Simula o evento de retirada do foco do checkbox em questo.

28

Sintaxe: document.nomeFormulario.campoCheckbox.blur();

c) Mtodo focus do objeto Checkbox Simula o evento de focalizao do objeto, ou seja, passa o foco para o objeto em questo. Sintaxe: document.nomeFormulario.campoCheckbox.focus();

d) Mtodo click do objeto Checkbox Simula o evento de clique do mouse. Sintaxe: document.nomeFormulario.campoCheckbox.click();

11.5 O objeto de boto de opo Para deixar que o browser controle a marcao e a desmarcao de um grupo de botes relacionados, voc precisa atribuir o mesmo nome a cada um dos botes no grupo. Voc pode ter vrios grupos dentro de um formulrio, mas cada membro do mesmo grupo precisa ter o mesmo nome. A atribuio do mesmo nome a um elemento do formulrio fora o browser a controlar os elementos de forma diferente do que se cada um tivesse um nome exclusivo. Em vez disso, o browser mantm uma lista dos objetos com o mesmo nome na forma de um array. O nome atribudo ao grupo torna-se o nome do array.

a) Propriedade length

Usado para descobrir quantos botes existem em um determinado grupo. Sintaxe:

document.form_org.nomeGrupo.length;

29

b) Propriedade checked

Para descobrir se um boto especfico est atualmente marcado ter que acessar o elemento de boto individualmente. Sintaxe: document.form_org.nomeGrupo[0].checked;

c) Mtodo blur do objeto Radio Simula o evento de retirada do foco do Radio em questo. Sintaxe: document.nomeFormulario.campoOption[indice].blur();

d) Mtodo focus do objeto Radio Simula o evento de focalizao do objeto, ou seja, passa o foco para o objeto em questo. Sintaxe: document.nomeFormulario.campoOption[indice].focus();

11.6 O objeto SELECT O objeto Select um objeto composto: um objeto que contm uma array de objetos Option. Sua lista pode ser instantnea, que s permite uma nica seleo, ou ento, uma lista rolvel, que permite aceitar vrias selees pelo usurio.

a) Propriedade selectedIndex

Retorna o nmero de ndice do item atualmente selecionado. O primeiro item (no topo da lista) possui um ndice zero. O valor de selectedIndex fundamental para permitir que voc acesse propriedades da opo selecionada. Sintaxe: document.form_org.nomeSelecao.selectedIndex;

30

b) Propriedade text

A propriedade text a String que aparece na tela, no objeto Select. Sintaxe: document.form_org.nomeSelecao.options[n].text;

c) Propriedade value A propriedade value permite a leitura da string oculta de cada tag Option definida. Sintaxe: document.form_org.nomeSelecao.options[n].value;

Onde: n = ndice da lista;

31

12 Passando dados e elementos do formulrio a funes Existem atalhos valiosos para a transferncia de informaes sobre formulrios ou controle do formulrio diretamente para a funo, sem a necessidade de se lidar com aquelas referncias normalmente longas que comeam ao nvel do objeto window ou document. O JavaScript possui uma palavra-chave this que sempre se refere ao objeto que contm o script em que a palavra-chave usada. Assim, em um manipulador de evento onChange para um campo de texto, voc pode passar uma referncia ao objeto de texto para a funo inserindo a palavra-chave this como parmetro da funo: No extremo receptor, a funo define uma varivel de parmetro que transforma essa referncia em uma varivel, que pode ser usada pelo restante da funo: function upperMe(campo){ instrues }

32

13 Objetos da janela e do documento

13.1 Acessando as propriedades e mtodos da janela

O objeto window representa uma janela do navegador ou um frame em um frameset. Toda janela aberta do navegador possui um objeto window, que se refere a ela prpria isso torna o objeto base na hierarquia do modelo de objetos do navegador. Sintaxe: window.nomePropriedade; window.nomeMtodo([parmetros]) Um objeto window tambm possui um sinnimo quando o script realizando a referncia aponta para a janela que abriga o documento. O sinnimo self. Sintaxe: self.nomePropriedade; self.nomeMtodo([parmetros])

a) Mtodo back Restaura a ltima informao registrada no histrico sobre o contedo apresentado nos frames de uma janela do navegador. o mesmo que pressionar o boto Voltar (Back) da barra de ferramentas do navegador. Sintaxe: window.back();

b) Mtodo close()

Fecha a janela especificada se ela foi aberta usando o mtodo open ou se o seu histrico estiver vazio, nenhum aviso ser gerado. Em todos os outros casos, ser gerada uma mensagem de confirmao de seu fechamento. Sintaxe: window.close();

33

c) Mtodo open() Abre uma nova janela. Este mtodo contm at trs parmetros que definem a caractersticas da janela, como o URL do documento a ser carregado, seu nome para fins de referncia do atributo TARGET em tags HTML e aparncia fsica (tamanho e etc). Sintaxe: var varJanela = window.open(URL, nomeJanela

[,propriedades] ); Exemplo: var novaJanela = window.open(janelaNova.html, Minha Janela, height=200, width=300);

Propriedades do mtodo open(): - height: Altura (em pixels) da nova janela. - menubar: Se yes, criada a barra de menus. - resizable: Se yes, o usurio poder redimensionar a janela. - screenX: Distncia (em pixels) do canto esquerdo da tela at o canto esquerdo da janela. - screenY: Distncia (em pixels) do topo da tela at o topo da janela. - scrollbars: Se yes, permite o surgimento das barras de rolagem vertical e horizontal, quando necessrias. - status: Se yes, criada a barra de status na base da janela. - toolbar: Se yes, criada a barra de ferramentas da janela. - width: Largura (em pixels) da nova janela.

d) Mtodo print()

Imprime o contedo da janela em questo. Sintaxe: window.print();

34

14 Exerccios

1) Criar uma nova pgina chamada script1.html que realize as seguintes tarefas:

a) Fazer uma funo que subtraia dois valores quaisquer e apresent-las

em uma mensagem de alerta com a seguinte frase: A subtrao de ? e ? igual ? . Substitua o sinal ? dado no exemplo, pelos valores de sua escolha e seu

resultado respectivamente.

b) Na mesma funo, fazer um comando condicional IF para saber se o primeiro valor maior que o segundo valor, caso a afirmao seja verdadeira ento se executa a conta e mostra-se o resultado, caso contrrio ento deve mostrar a mensagem O valor ? menor que o valor de ?.

Substitua o sinal ? dado no exemplo, pelos valores e seu resultado

respectivamente.

2) Criar uma nova pgina chamada script2.html que realize as seguintes

tarefas:

a) Criar um script que contenha apenas uma mensagem de

Confirmao. A frase desta caixa de mensagem dever ser Voc est gostando do curso?.

b) Caso o usurio clique em OK dever aparecer a mensagem

Parabns!, escrita no corpo do documento da pgina, caso seja o contrrio dever aparecer a mensagem Que pena!, tambm escrita no corpo do documento da pgina.

c) Nesta mesma pgina chame o evento onLoad na tag BODY, este dever apresentar uma mensagem de alerta exibindo a mensagem Bem vindo ao curso de Java Script.

d) Criar uma varivel que calcule a soma de 2 nmeros e que exiba o

resultado escrevendo no corpo do documento.

35

3) Criar uma nova pgina chamada script3.html que realize as seguintes tarefas:

a) Crie um campo do tipo TEXT e um boto. b) Crie uma funo que leia o valor da TEXT. Esta funo ser

chamada pelo evento onClick do boto que dever imprimir na tela os seguintes valores a respeito da String que foi digitada no campo TEXT:

- Tamanho da String; - String em maisculo; - String em minsculo;

4) Na mesma pgina do script4.html, faa as seguintes tarefas:

a) Crie um formulrio com 3 campos do tipo TEXT. O campo 1 deve-se chamar valorA, o segundo valorB e o terceiro valorTotal.

b) Criar um boto no formulrio que possua o evento onClick. Ao se clicar neste boto dever ser chamada uma funo que realize a multiplicao dos valores dos campos valorA e valorB, o resultado dever ser mostrado no campo valorTotal.

5) Na pgina ColegiadoOrgaoManutencao.html, criada anteriormente, realizar as seguintes tarefas:

a) Criar uma funo para validar todos os campos do formulrio. Esta

funo dever se chamar validaCampo(). b) A funo dever verificar se o campo est preenchido. Caso o

campo esteja em branco dever ser exibida uma caixa de alerta informando para o usurio, que dever depois retornar o foco para o campo em questo.

c) Esta funo dever ser chamada pelo boto Salvar da tela no evento

onSubmit() do formulrio.

36

6) Crie uma pgina chamada script6.html e realize as seguintes tarefas: a) Criar um boto chamado Unesp b) Este boto dever chamar uma funo que dever abrir uma nova

pgina com o endereo do site da Unesp. c) A aparncia fsica da janela dever ter barra de rolagem, altura de

400 e largura de 500.

IntroduoO que Java Script?Qual a diferena entre Java e JavaScript?Um pequeno exemplo do uso de scripts

Operadores e Controles EspeciaisOperadores MatemticosOperadores LgicosCaracteres Especiais

Comandos CondicionaisEventosCriando variveisEscrevendo no documentoMensagensFunesFunes intrnsecas

Manipulando Strings e DatasManipulando ArraysFormulrio e elementos do formulrioO Objeto FORMObjetos relacionados ao textoO Objeto de botoO Objeto de caixa de seleoO objeto de boto de opoa) Propriedade lengthPropriedade checked

O objeto SELECTPropriedade selectedIndexPropriedade textPropriedade value

Passando dados e elementos do formulrio a funesObjetos da janela e do documentoAcessando as propriedades e mtodos da janelaMtodo backMtodo close()Mtodo open()Mtodo print()

14 Exerccios