Coceito de Java

TITOCOrox* · 4 de Maio 2006

O Java ÃÆ’ÂÂ© uma linguagem de programaÃÆ’ÂÂ§ÃÆ’ÂÂ£o multiplataforma, com uma sintaxe atÃÆ’ÂÂ© certo ponto parecida com o C++, porÃÆ’ÂÂ©m com bibliotecas diferentes. Os programas em Java podem ser executados em qualquer sistema operacional, desde que o interpretador esteja instalado.

A JVM ÃÆ’ÂÂ© um programa que converte o cÃÆ’ÂÂ³digo Java em comandos que o sistema operacional possa executar. Existem mÃÆ’ÂÂ¡quinas virtuais para vÃÆ’ÂÂ¡rios sistemas operacionais: o problema ÃÆ’ÂÂ© que, devido ao processamento executado pela mÃÆ’ÂÂ¡quina virtual, o programa torna-se mais pesado do que seria caso escrito diretamente para a plataforma.

Um exemplo de programa desenvolvido desta forma ÃÆ’ÂÂ© o Mercury (um cliente MSN com versÃÆ’ÂÂµes para Linux e Windows, um dos primeiros a oferecer suporte a webcam e por isso bastante famoso). Embora o cÃÆ’ÂÂ³digo fonte do programa seja relativamente simples e bem escrito, ele ÃÆ’ÂÂ© bem mais pesado que outros programas similares, por causa da mÃÆ’ÂÂ¡quina virtual.

Explicando de forma mais elaborada, linguagens de programaÃÆ’ÂÂ§ÃÆ’ÂÂ£o "tradicionais", como o C e o C++, utilizam um compilador diferente para cada plataforma ou sistema operacional em que o programa irÃÆ’ÂÂ¡ rodar. O cÃÆ’ÂÂ³digo fonte em si pode ser escrito de forma a ser facilmente portÃÆ’ÂÂ¡vel, ou seja, rodar em diferentes versÃÆ’ÂÂµes do Unix ou em vÃÆ’ÂÂ¡rias famÃÆ’ÂÂlias de processadores diferentes sem muitas alteraÃÆ’ÂÂ§ÃÆ’ÂÂµes, mas ainda assim serÃÆ’ÂÂ¡ necessÃÆ’ÂÂ¡rio recompilar o cÃÆ’ÂÂ³digo fonte, gerando um binÃÆ’ÂÂ¡rio diferente para cada caso.

Embora o trabalho inicial seja maior, a vantagem desta abordagem ÃÆ’ÂÂ© que o desempenho ÃÆ’ÂÂ© o melhor possÃÆ’ÂÂvel, jÃÆ’ÂÂ¡ que sempre teremos um programa binÃÆ’ÂÂ¡rio otimizado para a plataforma.

O Java utiliza um conceito diferente. Ao invÃÆ’ÂÂ©s de gerar um binÃÆ’ÂÂ¡rio diferente para cada plataforma, ÃÆ’ÂÂ© gerado um binÃÆ’ÂÂ¡rio que pode ser executado em qualquer plataforma, dentro de uma mÃÆ’ÂÂ¡quina virtual. Este binÃÆ’ÂÂ¡rio "universal" ÃÆ’ÂÂ© chamado de bytecode.

A idÃÆ’ÂÂ©ia ÃÆ’ÂÂ© criar aplicativos que possam ser escritos uma vez e a partir daÃÆ’ÂÂ serem executados em qualquer plataforma, reduzindo os custos de desenvolvimento. Apenas o software da mÃÆ’ÂÂ¡quina virtual ÃÆ’ÂÂ© que precisa ser reescrito para cada plataforma, mas isso ÃÆ’ÂÂ© problema dos desenvolvedores da linguagem, nÃÆ’ÂÂ£o do programador.

Existe ainda a opÃÆ’ÂÂ§ÃÆ’ÂÂ£o de abrir mÃÆ’ÂÂ£o da flexibilidade do bytecode em troca de um maior desempenho, passando a compilar os programas com otimizaÃÆ’ÂÂ§ÃÆ’ÂÂµes para uma determinada plataforma. Isso ÃÆ’ÂÂ© muito ÃÆ’ÂÂºtil quando o programa serÃÆ’ÂÂ¡ executado apenas dentro de computadores de uma certa plataforma, como PCs rodando Linux, por exemplo.

No caso do Java, a mÃÆ’ÂÂ¡quina virtual que executa os programas ÃÆ’ÂÂ© chamada de Java Virtual Machine. Muitas pÃÆ’ÂÂ¡ginas web utilizam applets Java, por isso a maioria das pessoas acaba instalando o suporte a Java. Hoje em dia, alÃÆ’ÂÂ©m do Java da Sun, temos versÃÆ’ÂÂµes alternativas, como o Blackdown e o Kofee, que possuem conjuntos de recursos variados, mas sÃÆ’ÂÂ£o a princÃÆ’ÂÂpio compatÃÆ’ÂÂveis com o cÃÆ’ÂÂ³digo gerado para o Java da Sun.

Embora tenha ganhado relevÃÆ’ÂÂ¢ncia com o Java, este conceito nÃÆ’ÂÂ£o ÃÆ’ÂÂ© exatamente novo. Linguagens mais antigas como o LISP e o Prolog jÃÆ’ÂÂ¡ utilizam bytecode e mÃÆ’ÂÂ¡quinas virtuais.

BY - TITOCOrox*

**rap_** · 7 de Maio 2006

Re.: Coceito de Java

manu gostei geral o q precisamus aki no forum e de apensa ensinamentos para q as pessoas possam apenas descobrir as coisas sozinhas mais c vc entregar tudo de mÃÆ’ÂÂ£o beijada pra elas, elas nunk vaum crescer mentalmente e vaum continuar sendo "lammers" mais vc tipow ajuda a entender o q he java e tipow a partir dai pod se comeÃÆ’ÂÂ§ar a trabalhar com ele se interessar estudar ao inves de fikar comprando revistas hackers e sites e talz!! aff.. flw man seu post tbm ta nota 1000

me add no msn aew [email protected]

**CrasH** · 14 de Maio 2006

Re.: Coceito de Java

Bah...Mal ae confundi mesmo...

Mais jÃÆ’ÂÂ¡ que ta aqui num vou apagar quem quiser ta ae JAVASCRIPT.

INTRODUÃÆ’ââ‚¬Â¡ÃÆ’Ã†â€™O

JavaScript ÃÆ’ÂÂ© uma linguagem que permite injetar lÃÆ’ÂÂ³gica em pÃÆ’ÂÂ¡ginas escritas em HTML (HiperText Mark-up Language). As pÃÆ’ÂÂ¡ginas HTML podem ser escritas utilizando-se editores de texto, como

o NotePad, Write, etc. PorÃÆ’ÂÂ©m, existem editores prÃÆ’ÂÂ³prios para gerar HTML, tais como HotDog e

(mais recomendado) Microsoft FrontPage.

Os parÃÆ’ÂÂ¡grafos de lÃÆ’ÂÂ³gica do javaScript podem estar "soltos" ou atrelados a ocorrÃÆ’ÂÂªncia de eventos.

Os parÃÆ’ÂÂ¡grafos soltos sÃÆ’ÂÂ£o executados na sequÃÆ’ÂÂªncia em que aparecem na pÃÆ’ÂÂ¡gina (documento) e os

atrelados a eventos sÃÆ’ÂÂ£o executados apenas quando o evento ocorre.

Para inserir parÃÆ’ÂÂ¡grafos de programaÃÆ’ÂÂ§ÃÆ’ÂÂ£o dentro do HTML ÃÆ’ÂÂ© necessÃÆ’ÂÂ¡rio identificar o inÃÆ’ÂÂcio e o

fim do set de JavaScript, da seguinte forma:

Set de instruÃÆ’ÂÂ§ÃÆ’ÂÂµes

</SCRIPT>

Este procedimento pode ser adotado em qualquer local da pÃÆ’ÂÂ¡gina. Entretanto, para melhor visualizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o e facilidade de manutenÃÆ’ÂÂ§ÃÆ’ÂÂ£o, recomenda-se que toda a lÃÆ’ÂÂ³gica seja escrita no inÃÆ’ÂÂcio

do documento, atravÃÆ’ÂÂ©s da criaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de funÃÆ’ÂÂ§ÃÆ’ÂÂµes a serem invocadas quando se fizer necessÃÆ’ÂÂ¡rio (normalmente atreladas a eventos).

Se a lÃÆ’ÂÂ³gica ÃÆ’ÂÂ© escrita a partir de um determinado evento, nÃÆ’ÂÂ£o ÃÆ’ÂÂ© necessÃÆ’ÂÂ¡rio o uso dos comandos <SCRIPT> e </SCRIPT>.

Os comandos JavaScript sÃÆ’ÂÂ£o sensÃÆ’ÂÂveis ao tipo de letra (maiÃÆ’ÂÂºsculas e minÃÆ’ÂÂºsculas) em sua sintaxe.

Portanto, ÃÆ’ÂÂ© necessÃÆ’ÂÂ¡rio 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 variÃÆ’ÂÂ¡vel.

OPERADORES LÃÆ’ââ‚¬Å“GICOS

SÃÆ’ÂÂ£o operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE.

Os comandos condicionais serÃÆ’ÂÂ£o vistos mais a frente.

= = Igual

!= Diferente

> Maior

>= Maior ou Igual

< Menor

<= Menor ou Igual

&& E

OPERADORES MATEMÃÆ’ÂÂTICOS

SÃÆ’ÂÂ£o operadores a serem utilizados em cÃÆ’ÂÂ¡lculos, referÃÆ’ÂÂªncias de indexadores e manuseio de strings.

Ao longo do manual estes operadores serÃÆ’ÂÂ£o largamente utilizados, dando, assim, uma noÃÆ’ÂÂ§ÃÆ’ÂÂ£o mais

precisa do seu potencial.

+ adiÃÆ’ÂÂ§ÃÆ’ÂÂ£o de valor e concatenaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de strings

- subtraÃÆ’ÂÂ§ÃÆ’ÂÂ£o de valores

* multiplicaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de valores

/ divisÃÆ’ÂÂ£o de valores

% obtem o resto de uma divisÃÆ’ÂÂ£o:

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 expressÃÆ’ÂÂµes:

X = X + 1 ou X = X - 1 respectivamente.

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

CONTROLES ESPECIAIS

b - backspace

f - form feed

n - new line caracters

r - carriage return

t - tab characters

// - Linha de comentÃÆ’ÂÂ¡rio

/*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentÃÆ’ÂÂ¡rio.

Os delimitadores naturais para uma string sÃÆ’ÂÂ£o " ou ' . Caso seja necessÃÆ’ÂÂ¡rio a utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o destes caracteres como parte da string, utilize precedendo " ou '.

Ex. alert ("Cuidado com o uso de " ou ' em uma string")

COMANDOS CONDICIONAIS

SÃÆ’ÂÂ£o comandos que condicionam a execuÃÆ’ÂÂ§ÃÆ’ÂÂ£o de uma certa tarefa ÃÆ’ÂÂ veracidade ou nÃÆ’ÂÂ£o de uma

determinada condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o, ou enquanto determinada condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o for verdadeira.

SÃÆ’ÂÂ£o eles:

Comando IF

if (condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o)

{ aÃÆ’ÂÂ§ÃÆ’ÂÂ£o para condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o satisfeita }

[ else

{ aÃÆ’ÂÂ§ÃÆ’ÂÂ£o para condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o nÃÆ’ÂÂ£o satisfeita } ]

Ex.

if (Idade < 18 )

{Categoria = "Menor" }

else

{Categoria = "Maior"}

Comando FOR

for ( [inicializaÃÆ’ÂÂ§ÃÆ’ÂÂ£o/criaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de variÃÆ’ÂÂ¡vel de controle ;]

[condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o ;]

[incremento da variÃÆ’ÂÂ¡vel de controle] )

{ aÃÆ’ÂÂ§ÃÆ’ÂÂ£o }

Ex.

for (x = 0 ; x <= 10 ; x++)

{alert ("X igual a " + x) }

ComandoWHILE

Executa uma aÃÆ’ÂÂ§ÃÆ’ÂÂ£o enquanto determinada condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o for verdadeira.

while (condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o)

{ aÃÆ’ÂÂ§ÃÆ’ÂÂ£o }

Ex.

var contador = 10

while (contador > 1)

{ contador-- }

Move condicional

receptor = ( (condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o) ? verdadeiro : falso)

Ex.

NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

OBS:

Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a

condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma

aÃÆ’ÂÂ§ÃÆ’ÂÂ£o (se determinada condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o ocorrer) mas volta para o loop.

Diretivas/condiÃÆ’ÂÂ§ÃÆ’ÂÂµes entre [ ] significam que sÃÆ’ÂÂ£o opcionais.

EVENTOS

SÃÆ’ÂÂ£o fatos que ocorrem durante a execuÃÆ’ÂÂ§ÃÆ’ÂÂ£o do sistema, a partir dos quais o programador pode

definir aÃÆ’ÂÂ§ÃÆ’ÂÂµes a serem realizadas pelo programa.

Abaixo apresentamos a lista dos eventos possÃÆ’ÂÂveis, indicando os momentos em que os mesmos

podem ocorrer, bem como, os objetos passÃÆ’ÂÂveis de sua ocorrÃÆ’ÂÂªncia.

onload - Ocorre na carga do documento. Ou seja, sÃÆ’ÂÂ³ ocorre no BODY do documento.

onunload - Ocorre na descarga (saÃÆ’ÂÂda) do documento. TambÃÆ’ÂÂ©m sÃÆ’ÂÂ³ ocorre no BODY.

onchange - Ocorre quando o objeto perde o focus e houve mudanÃÆ’ÂÂ§a de conteÃÆ’ÂÂºdo.

vÃÆ’ÂÂ¡lido para os objetos Text, Select e Textarea.

onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudanÃÆ’ÂÂ§a.

vÃÆ’ÂÂ¡lido para os objetos Text, Select e Textarea.

onfocus - Ocorre quando o objeto recebe o focus.

vÃÆ’ÂÂ¡lido para os objetos Text, Select e Textarea.

onclick - Ocorre quando o objeto recebe um Click do Mouse.

vÃÆ’ÂÂ¡lido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.

onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto.

vÃÆ’ÂÂ¡lido apenas para Link.

onselect - Ocorre quando o objeto ÃÆ’ÂÂ© selecionado.

vÃÆ’ÂÂ¡lido para os objetos Text e Textarea.

onsubmit - Ocorre quando um botÃÆ’ÂÂ£o tipo Submit recebe um click do mouse.

vÃÆ’ÂÂ¡lido apenas para o Form.

CRIANDO VARIÃÆ’ÂÂVEIS

A variÃÆ’ÂÂ¡vel ÃÆ’ÂÂ© criada automaticamente, pela simples associaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de valores a mesma.

Ex. NovaVariavel = "Jose"

Foi criada a variÃÆ’ÂÂ¡vel de nome NovaVariavel que, passou a conter a string Jose.

As variÃÆ’ÂÂ¡veis podem ser Locais ou Globais. As variÃÆ’ÂÂ¡veis que sÃÆ’ÂÂ£o criadas dentro de uma funÃÆ’ÂÂ§ÃÆ’ÂÂ£o sÃÆ’ÂÂ£o Locais e referenciÃÆ’ÂÂ¡veis apenas dentro da funÃÆ’ÂÂ§ÃÆ’ÂÂ£o. As variÃÆ’ÂÂ¡veis criadas fora de funÃÆ’ÂÂ§ÃÆ’ÂÂµes sÃÆ’ÂÂ£o Globais, podendo serem referenciadas em qualquer parte do documento.

Desta forma, variÃÆ’ÂÂ¡veis que precisam ser referenciadas por vÃÆ’ÂÂ¡rias funÃÆ’ÂÂ§ÃÆ’ÂÂµes ou em outra parte do documento, precisam ser definidas como globais.

Embora nÃÆ’ÂÂ£o seja recomendÃÆ’ÂÂ¡vel, em uma funÃÆ’ÂÂ§ÃÆ’ÂÂ£o, pode ser definida uma variÃÆ’ÂÂ¡vel local com o mesmo nome de uma variÃÆ’ÂÂ¡vel global. Para isso utiliza-se o mÃÆ’ÂÂ©todo de definiÃÆ’ÂÂ§ÃÆ’ÂÂ£o var.

Ex. VariÃÆ’ÂÂ¡vel Global : MinhaVariavel = ""

VariÃÆ’ÂÂ¡vel Local : var MinhaVariavel = ""

ESCREVENDO NO DOCUMENTO

O JavaScript permite que o programador escreva linhas dentro de uma pÃÆ’ÂÂ¡gina (documento),

atravÃÆ’ÂÂ©s do mÃÆ’ÂÂ©todo write. As linhas escritas desta forma, podem conter textos, expressÃÆ’ÂÂµes

JavaScript e comandos Html. As linhas escritas atravÃÆ’ÂÂ©s deste mÃÆ’ÂÂ©todo aparecerÃÆ’ÂÂ£o no ponto

da tela onde o comando for inserido.

Ex:

valor = 30

document.write ("Minha primeira linha")

document.write ("Nesta linha aparecerÃÆ’ÂÂ¡ o resultado de : " + (10 * 10 + valor))

</script>

A idÃÆ’ÂÂ©ia do exemplo acima ÃÆ’ÂÂ© escrever duas linhas. Entretanto o mÃÆ’ÂÂ©todo write nÃÆ’ÂÂ£o insere mudanÃÆ’ÂÂ§a de linha, o que provocarÃÆ’ÂÂ¡ o aparecimento de apenas uma linha com os dois textos emendados.

Para evitar este tipo de ocorrÃÆ’ÂÂªncia, existe o mÃÆ’ÂÂ©todo writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando nÃÆ’ÂÂ£o surtiu efeito,obtendo-se o mesmo resultado do mÃÆ’ÂÂ©todo write. A soluÃÆ’ÂÂ§ÃÆ’ÂÂ£o encontrada para esta situaÃÆ’ÂÂ§ÃÆ’ÂÂ£o foi a utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o do comando de mudanÃÆ’ÂÂ§a de parÃÆ’ÂÂ¡grafo da linguagem Html.

Ex:

valor = 30

document.write ("

Minha primeira linha</p>")

document.write ("

Nesta linha aparecerÃÆ’ÂÂ¡ o resultado de : " + (10 * 10 + valor) + "</p>")

</script>

Isto resolve a questÃÆ’ÂÂ£o da mudanÃÆ’ÂÂ§a de linha, porÃÆ’ÂÂ©m, vai gerar uma linha em branco, entre cada linha, por se tratar de mudanÃÆ’ÂÂ§a de parÃÆ’ÂÂ¡grafo. Caso nÃÆ’ÂÂ£o seja desejado a existÃÆ’ÂÂªncia da linha em branco, a alternativa ÃÆ’ÂÂ© utilizar o comando Html

que apenas muda de linha.

Ex:

valor = 30

document.write ("

Minha primeira linha")

document.write ("

Nesta linha aparecerÃÆ’ÂÂ¡ o resultado de : " + (10 * 10 + valor) )

</script>

MENSAGENS

Existem trÃÆ’ÂÂªs formas de comunicaÃÆ’ÂÂ§ÃÆ’ÂÂ£o com o usuÃÆ’ÂÂ¡rio atravÃÆ’ÂÂ©s de mensagens.

Apenas ObservaÃÆ’ÂÂ§ÃÆ’ÂÂ£o.

alert ( mensagem )

Ex.

alert ("Certifique-se de que as informaÃÆ’ÂÂ§ÃÆ’ÂÂµes estÃÆ’ÂÂ£o corretas")

Mensagem que retorna confirmaÃÆ’ÂÂ§ÃÆ’ÂÂ£o 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 informaÃÆ’ÂÂ§ÃÆ’ÂÂ£o digitada pelo usuÃÆ’ÂÂ¡rio

Minha mensagem ÃÆ’ÂÂ© a mensagem que vai aparecer como Label da caixa de input

Meu texto ÃÆ’ÂÂ© um texto, opcional, que aparecerÃÆ’ÂÂ¡ na linha de digitaÃÆ’ÂÂ§ÃÆ’ÂÂ£o do usuÃÆ’ÂÂ¡rio

Ex.

Entrada = prompt("Informe uma expressÃÆ’ÂÂ£o matemÃÆ’ÂÂ¡tica", "")

Resultado = eval(Entrada)

document.write("O resultado ÃÆ’ÂÂ© = " + Resultado)

CRIANDO FUNÃÆ’ââ‚¬Â¡ÃÆ’ââ‚¬Â¢ES

Uma funÃÆ’ÂÂ§ÃÆ’ÂÂ£o ÃÆ’ÂÂ© um set de instruÃÆ’ÂÂ§ÃÆ’ÂÂµes, que sÃÆ’ÂÂ³ devem ser executadas quando a funÃÆ’ÂÂ§ÃÆ’ÂÂ£o for acionada.

A sintaxe geral ÃÆ’ÂÂ© a seguinte:

function NomeFunÃÆ’ÂÂ§ÃÆ’ÂÂ£o (ParÃÆ’ÂÂ¢metros)

{ AÃÆ’ÂÂ§ÃÆ’ÂÂ£o }

Suponha uma funÃÆ’ÂÂ§ÃÆ’ÂÂ£o que tenha como objetivo informar se uma pessoa ÃÆ’ÂÂ© maior ou menor de idade, recebendo como parÃÆ’ÂÂ¢metro a sua idade.

function Idade (Anos) {

if (Anos > 17)

{ alert ("Maior de Idade") }

else

{ alert ("menor de Idade") }

}

Para acionar esta funÃÆ’ÂÂ§ÃÆ’ÂÂ£o, suponha uma caixa de texto, em um formulÃÆ’ÂÂ¡rio, na qual seja informada a idade e, a cada informaÃÆ’ÂÂ§ÃÆ’ÂÂ£o, a funÃÆ’ÂÂ§ÃÆ’ÂÂ£o seja acionada.

<form>

<input type=text size=2 maxlength=2 name="Tempo"

onchange="Idade(Tempo.value)">

</form>

Observe-se que o parÃÆ’ÂÂ¢metro passado (quando ocorre o evento "onchange")

foi o conteÃÆ’ÂÂºdo da caixa de texto "Tempo" (propriedade "value") e que,

na funÃÆ’ÂÂ§ÃÆ’ÂÂ£o, chamamos de "Anos". Ou seja, nÃÆ’ÂÂ£o existe co-relaÃÆ’ÂÂ§ÃÆ’ÂÂ£o entre o

nome da variÃÆ’ÂÂ¡vel passada e a variÃÆ’ÂÂ¡vel de recepÃÆ’ÂÂ§ÃÆ’ÂÂ£o na funÃÆ’ÂÂ§ÃÆ’ÂÂ£o. Apenas o

conteÃÆ’ÂÂºdo ÃÆ’ÂÂ© passado.

FUNÃÆ’ââ‚¬Â¡ÃÆ’ââ‚¬Â¢ES INTRÃÆ’ÂÂNSECAS

SÃÆ’ÂÂ£o funÃÆ’ÂÂ§ÃÆ’ÂÂµes embutidas na prÃÆ’ÂÂ³pria linguagem. A sintaxe geral ÃÆ’ÂÂ© a seguinte:

Result = funÃÆ’ÂÂ§ÃÆ’ÂÂ£o (informaÃÆ’ÂÂ§ÃÆ’ÂÂ£o a ser processada)

- eval = Calcula o conteÃÆ’ÂÂºdo da string

- parseInt - Transforma string em inteiro

- parseFloat - Transforma string em nÃÆ’ÂÂºmero com ponto flutuante

- date() - Retorna a data e a hora (veja o capÃÆ’ÂÂtulo 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 conteÃÆ’ÂÂºdo da string, que tambÃÆ’ÂÂ©m pode ser o conteÃÆ’ÂÂºdo (value) de uma caixa de texto.

- FunÃÆ’ÂÂ§ÃÆ’ÂÂµes tipicamente MatemÃÆ’ÂÂ¡ticas:

Math.abs(nÃÆ’ÂÂºmero) - retorna o valor absoluto do nÃÆ’ÂÂºmero (ponto flutuante)

Math.ceil(nÃÆ’ÂÂºmero) - retorna o prÃÆ’ÂÂ³ximo valor inteiro maior que o nÃÆ’ÂÂºmero

Math.floor(nÃÆ’ÂÂºmero) - retorna o prÃÆ’ÂÂ³ximo valor inteiro menor que o nÃÆ’ÂÂºmero

Math.round(nÃÆ’ÂÂºmero) - retorna o valor inteiro, arredondado, do nÃÆ’ÂÂºmero

Math.pow(base, expoente) - retorna o cÃÆ’ÂÂ¡lculo do exponencial

Math.max(nÃÆ’ÂÂºmero1, nÃÆ’ÂÂºmero2) - retorna o maior nÃÆ’ÂÂºmero dos dois fornecidos

Math.min(nÃÆ’ÂÂºmero1, nÃÆ’ÂÂºmero2) - retorna o menor nÃÆ’ÂÂºmero dos dois fornecidos

Math.sqrt(nÃÆ’ÂÂºmero) - retorna a raiz quadrada do nÃÆ’ÂÂºmero

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(nÃÆ’ÂÂºmero) - retorna o seno de um nÃÆ’ÂÂºmero (anglo em radianos)

Math.asin(nÃÆ’ÂÂºmero) - retorna o arco seno de um nÃÆ’ÂÂºmero (em radianos)

Math.cos(nÃÆ’ÂÂºmero) - retorna o cosseno de um nÃÆ’ÂÂºmero (anglo em radianos)

Math.acos(nÃÆ’ÂÂºmero) - retorna o arco cosseno de um nÃÆ’ÂÂºmero (em radianos)

Math.tan(nÃÆ’ÂÂºmero) - retorna a tangente de um nÃÆ’ÂÂºmero (anglo em radianos)

Math.atan(nÃÆ’ÂÂºmero) - retorna o arco tangente de um nÃÆ’ÂÂºmero (em radianos)

Math.pi retorna o valor de PI (aproximadamente 3.14159)

Math.log(nÃÆ’ÂÂºmero) - retorna o logarÃÆ’ÂÂtmo de um nÃÆ’ÂÂºmero

Math.E - retorna a base dos logarÃÆ’ÂÂtmos naturais (aproximadamente 2.718)

Math.LN2 - retorna o valor do logarÃÆ’ÂÂtmo de 2 (aproximadamente 0.693)

Math.LOG2E - retorna a base do logarÃÆ’ÂÂtmo de 2 (aproximadamente 1.442)

Math.LN10 retorna o valor do logarÃÆ’ÂÂtmo de 10 (aproximadamente 2.302)

Math.LOG10E - retorna a base do logarÃÆ’ÂÂtmo de 10 (aproximadamente 0.434)

ObservaÃÆ’ÂÂ§ÃÆ’ÂÂ£o:

Em todas as funÃÆ’ÂÂ§ÃÆ’ÂÂµes, quando apresentamos a expressÃÆ’ÂÂ£o "(nÃÆ’ÂÂºmero)", na verdade queremos

nos referir a um argumento que serÃÆ’ÂÂ¡ processado pela funÃÆ’ÂÂ§ÃÆ’ÂÂ£o e que poderÃÆ’ÂÂ¡ ser: um nÃÆ’ÂÂºmero,

uma variÃÆ’ÂÂ¡vel ou o conteÃÆ’ÂÂºdo de um objeto (propriedade value).

CRIANDO NOVAS INSTÃÆ’ââ‚¬Å¡NCIAS

AtravÃÆ’ÂÂ©s do operador new podem ser criadas novas instÃÆ’ÂÂ¢ncias a objetos jÃÆ’ÂÂ¡ existentes, mudando o

seu conteÃÆ’ÂÂºdo, porÃÆ’ÂÂ©m, mantendo suas propriedades.

A sintaxe geral ÃÆ’ÂÂ© a seguinte:

NovoObjeto = new ObjetoExistente (parÃÆ’ÂÂ¢metros)

Ex1.

MinhaData = new Date ()

MinhaData passou a ser um objeto tipo Date, com o mesmo conteÃÆ’ÂÂºdo existente em Date

(data e hora atual)

Ex2:

MinhaData = new Date(1996, 05, 27)

MinhaData passou a ser um objeto tipo Date, porÃÆ’ÂÂ©m, com o conteÃÆ’ÂÂºdo de uma nova data.

Ex3:

Suponha a existÃÆ’ÂÂªncia do seguinte objeto chamado Empresas

function Empresas (Emp, Nfunc, Prod)

{ this.Emp = Emp

this.Nfunc = Nfunc

this.Prod = Prod }

Podemos criar novas instÃÆ’ÂÂ¢ncias, usando a mesma estrutura, da seguinte forma:

Elogica = new Empresas("Elogica", "120", "ServiÃÆ’ÂÂ§os")

Pitaco = new Empresas("Pitaco", "35", "Software")

Corisco = new Empresas("Corisco", "42", "Conectividade")

Assim, a variÃÆ’ÂÂ¡vel Elogica.Nfunc terÃÆ’ÂÂ¡ o seu conteÃÆ’ÂÂºdo igual a 120

MANIPULANDO ARRAYS

O JavaScript nÃÆ’ÂÂ£o tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays ÃÆ’ÂÂ© necessÃÆ’ÂÂ¡rio a criaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de um objeto com a propriedade de criaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de um array.

No exemplo abaixo, criaremos um objeto tipo array de tamanho variÃÆ’ÂÂ¡vel e com a funÃÆ’ÂÂ§ÃÆ’ÂÂ£o de "limpar" o conteÃÆ’ÂÂºdo das variÃÆ’ÂÂ¡veis cada vez que uma nova instÃÆ’ÂÂ¢ncia seja criada a partir dele.

function CriaArray (n) {

this.length = n

for (var i = 1 ; i <= n ; i++)

{ this = "" } }

Agora podemos criar novas instÃÆ’ÂÂ¢ncias do objeto "CriaArray" e alimentÃÆ’ÂÂ¡-los com os dados necessÃÆ’ÂÂ¡rios.

NomeDia = new CriaArray(7)

NomeDia[0] = "Domingo"

NomeDia[1] = "Segunda"

NomeDia [2] = "TerÃÆ’ÂÂ§a"

NomeDia[3] = "Quarta"

NomeDia[4] = "Quinta"

NomeDia[5] = "Sexta"

NomeDia[6] = "SÃÆ’ÂÂ¡bado"

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]

OcupaÃÆ’ÂÂ§ÃÆ’ÂÂ£o = Atividade[1]

DiaSemana passaria a conter Quinta e OcupaÃÆ’ÂÂ§ÃÆ’ÂÂ£o conteria Programador.

Outra forma de se trabalhar com arrays ÃÆ’ÂÂ© criar novas instÃÆ’ÂÂ¢ncias dentro do prÃÆ’ÂÂ³prio 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 Empresas(3)

TabEmp[1] = new Empresas("Elogica", "120", "ServiÃÆ’ÂÂ§os")

TabEmp[2] = new Empresas("Pitaco", "35", "Software")

TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")

Assim, poderemos obter a atividade da empresa nÃÆ’ÂÂºmero 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 referÃÆ’ÂÂªncias ao conteÃÆ’ÂÂºdo de variÃÆ’ÂÂ¡veis.

MANIPULANDO STRING's

O JavaScript ÃÆ’ÂÂ© bastante poderoso no manuseio de StringÃâ€šÂ´s, fornecendo ao programador uma total

flexibilidade em seu manuseio.

Abaixo apresentamos os mÃÆ’ÂÂ©todos disponÃÆ’ÂÂveis para manuseio de stringÃâ€šÂ´s.

string.length - retorna o tamanho da string (quantidade de bytes)

string.charAt(posiÃÆ’ÂÂ§ÃÆ’ÂÂ£o) - retorna o caracter da posiÃÆ’ÂÂ§ÃÆ’ÂÂ£o especificada (inicia em 0)

string.indexOf("string") - retorna o nÃÆ’ÂÂºmero da posiÃÆ’ÂÂ§ÃÆ’ÂÂ£o onde comeÃÆ’ÂÂ§a a primeira "string"

string.lastindexOf("string") - retorna o nÃÆ’ÂÂºmero da posiÃÆ’ÂÂ§ÃÆ’ÂÂ£o onde comeÃÆ’ÂÂ§a a ÃÆ’ÂÂºltima "string"

string.substring(index1, index2) - retorna o conteÃÆ’ÂÂºdo da string que corresponde ao intervalo especificado. ComeÃÆ’ÂÂ§ando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.

Ex.

Todo = "Elogica"

Parte = Todo.substring(1, 4)

(A variÃÆ’ÂÂ¡vel Parte receberÃÆ’ÂÂ¡ a palavra log)

string.toUpperCase() - Transforma o conteÃÆ’ÂÂºdo da string para maiÃÆ’ÂÂºsculo (Caixa Alta)

string.toLowerCase() - Transforma o conteÃÆ’ÂÂºdo da string para minÃÆ’ÂÂºsculo (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 %)

MANIPULANDO DATAS

Existe apenas uma funÃÆ’ÂÂ§ÃÆ’ÂÂ£o para que se possa obter a data e a hora. ÃÆ’ââ‚¬Â° a funÃÆ’ÂÂ§ÃÆ’ÂÂ£o Date(). Esta funÃÆ’ÂÂ§ÃÆ’ÂÂ£o devolve data e hora no formato:Dia da semana, Nome do mÃÆ’ÂÂªs, Dia do mÃÆ’ÂÂªs, Hora:Minuto:Segundo e Ano

Ex.

Fri May 24 16:58:02 1996

Para se obter os dados separadamente, existem os seguintes mÃÆ’ÂÂ©todos:

getDate() - ObtÃÆ’ÂÂ©m o dia do mÃÆ’ÂÂªs (numÃÆ’ÂÂ©rico de 1 a 31)

getDay() - ObtÃÆ’ÂÂ©m o dia da semana (0 a 6)

getMonth() - ObtÃÆ’ÂÂ©m o mÃÆ’ÂÂªs (numÃÆ’ÂÂ©rico de 0 a 11)

getYear() - ObtÃÆ’ÂÂ©m o ano

getHours() - ObtÃÆ’ÂÂ©m a hora (numÃÆ’ÂÂ©rico de 0 a 23)

getMinutes() - ObtÃÆ’ÂÂ©m os minutos (numÃÆ’ÂÂ©rico de 0 a 59)

getSeconds() - ObtÃÆ’ÂÂ©m os segundos (numÃÆ’ÂÂ©rico de 0 a 59)

No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a variÃÆ’ÂÂ¡vel DataToda

para armazenar data/hora e a variÃÆ’ÂÂ¡vel DiaHoje para armazenar o nÃÆ’ÂÂºmero 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 variÃÆ’ÂÂ¡vel 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] = "TerÃÆ’ÂÂ§a"

NomeDia[3] = "Quarta"

NomeDia[4] = "Quinta"

NomeDia[5] = "Sexta"

NomeDia[6] = "SÃÆ’ÂÂ¡bado"

DiaSemana = NomeDia[DiaHoje]

Para criar uma variÃÆ’ÂÂ¡vel tipo Date com o conteÃÆ’ÂÂºdo informado pela aplicaÃÆ’ÂÂ§ÃÆ’ÂÂ£o, existe o mÃÆ’ÂÂ©todo

set. Assim, temos os seguintes mÃÆ’ÂÂ©todos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds.

Seguindo o exemplo acima, para mudar o mÃÆ’ÂÂªs para novembro, terÃÆ’ÂÂamos:

DataToda.setMonth(10)

Exemplos adicionais serÃÆ’ÂÂ£o encontrados no capÃÆ’ÂÂtulo "Usando Timer e Date

INTERAGINDO COM O USUÃÆ’ÂÂRIO

A interaÃÆ’ÂÂ§ÃÆ’ÂÂ£o com o usuÃÆ’ÂÂ¡rio se dÃÆ’ÂÂ¡ atravÃÆ’ÂÂ©s de objetos para entrada de dados (textos), marcaÃÆ’ÂÂ§ÃÆ’ÂÂ£o de opÃÆ’ÂÂ§ÃÆ’ÂÂµes (radio, checkbox e combo), botÃÆ’ÂÂµes e link's para outras pÃÆ’ÂÂ¡ginas.

Conceitualmente, os objetos sÃÆ’ÂÂ£o divididos em: Input, Textarea e Select.

O objeto Input divide-se (propriedade Type) em:

ÃÂ¢ââ€šÂ¬ÂÂ¢Password ÃÂ¢ââ€šÂ¬ÂÂ¢Text ÃÂ¢ââ€šÂ¬ÂÂ¢Hidden ÃÂ¢ââ€šÂ¬ÂÂ¢Checkbox ÃÂ¢ââ€šÂ¬ÂÂ¢Radio ÃÂ¢ââ€šÂ¬ÂÂ¢Button ÃÂ¢ââ€šÂ¬ÂÂ¢Reset ÃÂ¢ââ€šÂ¬ÂÂ¢Submit

A construÃÆ’ÂÂ§ÃÆ’ÂÂ£o destes objetos ÃÆ’ÂÂ© feita pela linguagem HTML (HiperText Mark-up Language). Portanto, ÃÆ’ÂÂ© aconselhÃÆ’ÂÂ¡vel que sejam criados utilizando-se ferramentas de geraÃÆ’ÂÂ§ÃÆ’ÂÂ£o de pÃÆ’ÂÂ¡ginas HTML, como o HotDog ou, mais recomendado, FrontPage.

Objeto Input TEXT

ÃÆ’ââ‚¬Â° o principal objeto para entrada de dados.

Suas principais propriedades sÃÆ’ÂÂ£o: type, size, maxlength, name e value.

type=text : Especifica um campo para entrada de dados normal

size : Especifica o tamanho do campo na tela.

maxlength : Especifica a quantidade mÃÆ’ÂÂ¡xima de caracteres permitidos.

name : Especifica o nome do objeto

value : Armazena o conteÃÆ’ÂÂºdo do campo.

Os eventos associados a este objeto sÃÆ’ÂÂ£o: onchange, onblur, onfocus e onselect.

Ex:

<form name="TText">

Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value="" onchange="alert ('Voce digitou ' + CxTexto.value)">

</p>

</form>

Objeto Input PASSWORD

ÃÆ’ââ‚¬Â° o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto sÃÆ’ÂÂ£o criptografados e, sÃÆ’ÂÂ³ sÃÆ’ÂÂ£o interpretados (vistos) pelo "server", por razÃÆ’ÂÂµes de seguranÃÆ’ÂÂ§a.

Suas principais propriedades sÃÆ’ÂÂ£o: type, size, maxlength, name e value.

type=password : Especifica um campo para entrada de senha. Os dados digitados sÃÆ’ÂÂ£o substituidos (na tela) por "*".

size : Especifica o tamanho do campo na tela.

maxlength : Especifica a quantidade mÃÆ’ÂÂ¡xima de caracteres permitidos.

name : Especifica o nome do objeto

value : Armazena o conteÃÆ’ÂÂºdo digitado no campo.

Os eventos associados a este objeto sÃÆ’ÂÂ£o: onchange, onblur, onfocus e onselect.

Ex:

<form name="TPassword">

Entrada de Senha<input type=password size=10 maxlength=10 name="Senha" value="">

</p>

</form>

Objeto Input HIDDEN

ÃÆ’ââ‚¬Â° um objeto semelhante ao input text, porÃÆ’ÂÂ©m, invisÃÆ’ÂÂvel para o usuÃÆ’ÂÂ¡rio. Este objeto deve ser utilizado para passar informaÃÆ’ÂÂ§ÃÆ’ÂÂµes ao "server" (quando o formulÃÆ’ÂÂ¡rio for submetido) sem que o usuÃÆ’ÂÂ¡rio tome conhecimento. Suas propriedades sÃÆ’ÂÂ£o: name e value.

name : Especifica o nome do objeto.

value : Armazena o conteÃÆ’ÂÂºdo do objeto

Ex:

<form name="THidden">

<input type=hidden size=20 maxlength=30 name="HdTexto" value="" >

</form>

</p>

Objeto Input CHECKBOX

SÃÆ’ÂÂ£o objetos que permitem ao usuÃÆ’ÂÂ¡rio ligar ou desligar uma determinada opÃÆ’ÂÂ§ÃÆ’ÂÂ£o.

Suas principais propriedades sÃÆ’ÂÂ£o: 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 tambÃÆ’ÂÂ©m serve para ativar comandos lÃÆ’ÂÂ³gicos, testando-se a condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o

de "checked".

checked : Especifica que o objeto inicialmente estarÃÆ’ÂÂ¡ ligado

O ÃÆ’ÂÂºnico evento associado a este objeto ÃÆ’ÂÂ© onclick.

Ex:

No exemplo abaixo, criaremos um objeto input.text e trÃÆ’ÂÂªs objetos checkbox. O primeiro checkbox, quando ativado, transformarÃÆ’ÂÂ¡ o texto em caracteres minÃÆ’ÂÂºsculos. O segundo checkbox, quando ativado, transformarÃÆ’ÂÂ¡ o texto em caracteres maiÃÆ’ÂÂºsculos. O terceiro checkbox, quando ativado, darÃÆ’ÂÂ¡ um aviso do conteÃÆ’ÂÂºdo que serÃÆ’ÂÂ¡ recebido pelo "server" caso o formulÃÆ’ÂÂ¡rio seja submetido para este.

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

<form name="TCheck">

Muda Case <input type=text size=20 maxlength=20 name="Muda"> </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>

Existe ainda uma outra forma de manipular este objeto, em forma de array, que ÃÆ’ÂÂ© a seguinte: form.elements[index].propriedade. Esta nÃÆ’ÂÂ£o ÃÆ’ÂÂ© uma boa forma porque o index ÃÆ’ÂÂ© ÃÆ’ÂÂºnico dentro de um formulÃÆ’ÂÂ¡rio, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois, neste caso, haverÃÆ’ÂÂ¡ um natural deslocamento do index, podendo comprometer a lÃÆ’ÂÂ³gica.

Objeto Input RADIO

SÃÆ’ÂÂ£o objetos que permitem ao usuÃÆ’ÂÂ¡rio a escolha de apenas uma alternativa, diante de uma sÃÆ’ÂÂ©rie de opÃÆ’ÂÂ§ÃÆ’ÂÂµes.

Suas principais propriedades sÃÆ’ÂÂ£o: name, value e checked.

name : Especifica o nome do objeto. Para caracterizar uma mesma sÃÆ’ÂÂ©rie de opÃÆ’ÂÂ§ÃÆ’ÂÂµes, todos os objetos desta sÃÆ’ÂÂ©rie tÃÆ’ÂÂªm que ter o mesmo "name".

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 tambÃÆ’ÂÂ©m serve para

ativar comandos lÃÆ’ÂÂ³gicos, testando-se a condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o de "checked".

checked : Especifica que o objeto inicialmente estarÃÆ’ÂÂ¡ ligado

Para utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o deste objeto ÃÆ’ÂÂ© importante o conhecimento de outras propriedades associadas:

Objeto.length : Retorna a quantidade de opÃÆ’ÂÂ§ÃÆ’ÂÂµes existentes na lista

Objeto.[index].value : retorna o texto (value) associado a cada opÃÆ’ÂÂ§ÃÆ’ÂÂ£o

Objeto.[index].checked : retorna verdadeiro ou falso

O ÃÆ’ÂÂºnico evento associado a este objeto ÃÆ’ÂÂ© onclick.

Ex. 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 informaÃÆ’ÂÂ§ÃÆ’ÂÂµes ao "server".

Radio</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>

Objeto Input BUTTON

Este objeto tem por finalidade criar um botÃÆ’ÂÂ£o ao qual se possa atrelar operaÃÆ’ÂÂ§ÃÆ’ÂÂµes lÃÆ’ÂÂ³gicas, a serem executadas quando o mesmo receber um click.

Suas propriedades sÃÆ’ÂÂ£o: name e value.

name : Especifica o nome do objeto.

value : Especifica o nome que aparecerÃÆ’ÂÂ¡ sobre o botÃÆ’ÂÂ£o

O ÃÆ’ÂÂºnico evento associado a este objeto ÃÆ’ÂÂ© onclick.

Ex.

<form method="POST" name="TstButton">

Digite um Texto <input type=text size=30 maxlength=30 name="Teste" value="">

</p>

Click no Botao <input type=button name="Bteste" value="Botao de teste"

onclick="alert ('Voce digitou: ' + TstButton.Teste.value)">

</p>

</form>

Objeto Input RESET

Este objeto ÃÆ’ÂÂ© um botÃÆ’ÂÂ£o que tem por finalidade, ÃÆ’ÂÂºnica, limpar os campos digitados pelo usuÃÆ’ÂÂ¡rio, restaurando o conteÃÆ’ÂÂºdo do formulÃÆ’ÂÂ¡rio para os valores iniciais.

ÃÆ’ââ‚¬Â° recomendÃÆ’ÂÂ¡vel a utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o deste objeto, para facilitar o usuÃÆ’ÂÂ¡rio a limpar suas informaÃÆ’ÂÂ§ÃÆ’ÂÂµes, uma vez que a utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o da opÃÆ’ÂÂ§ÃÆ’ÂÂ£o "reload" do "browser" (que seria uma forma) nÃÆ’ÂÂ£o perde as infromaÃÆ’ÂÂ§ÃÆ’ÂÂµes digitadas.

Suas propriedades sÃÆ’ÂÂ£o: name e value.

name : Especifica o nome do objeto.

value : Especifica o nome que aparecerÃÆ’ÂÂ¡ sobre o botÃÆ’ÂÂ£o

O ÃÆ’ÂÂºnico evento associado a este objeto ÃÆ’ÂÂ© onclick.

Ex.

<form method="POST" name="TesteRes">

Digite um Texto<input type=text size=10 maxlength=20 name="Teste" value="">

Apague o Texto <input type=reset name="Bres" value="Reset">

</form>

</p>

Objeto Input SUBMIT

Este objeto ÃÆ’ÂÂ© um botÃÆ’ÂÂ£o que tem por finalidade submeter (enviar) o conteÃÆ’ÂÂºdo dos objetos do formulÃÆ’ÂÂ¡rio ao "server". O formulÃÆ’ÂÂ¡rio serÃÆ’ÂÂ¡ submetido ÃÆ’ÂÂ URL especificada na propriedade "action" do formulÃÆ’ÂÂ¡rio.

Suas propriedades sÃÆ’ÂÂ£o: name e value.

name : Especifica o nome do objeto.

value : Especifica o nome que aparecerÃÆ’ÂÂ¡ sobre o botÃÆ’ÂÂ£o

O ÃÆ’ÂÂºnico evento associado a este objeto ÃÆ’ÂÂ© onclick. Embora se possa atrelar lÃÆ’ÂÂ³gica a este evento, nÃÆ’ÂÂ£o se pode evitar que o formulÃÆ’ÂÂ¡rio seja submetido, portanto, nÃÆ’ÂÂ£o ÃÆ’ÂÂ© aconselhavel o seu uso. Mais seguro e mais ÃÆ’ÂÂºtil ÃÆ’ÂÂ© a utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o da propriedade onSubmit do formulÃÆ’ÂÂ¡rio. Este permite que se atrele lÃÆ’ÂÂ³gica e decida-se pela submissÃÆ’ÂÂ£o ou nÃÆ’ÂÂ£o.

Ex.

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

<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="">

Botao Submit <input type=submit name="Bsub" value="Manda p/Server">

</p>

</form>

No exemplo acima, o formulÃÆ’ÂÂ¡rio estÃÆ’ÂÂ¡ sendo submetido a URL "10.0.5.2" (que ÃÆ’ÂÂ© o endereÃÆ’ÂÂ§o IP

de um "Server"). Este servidor estÃÆ’ÂÂ¡ rodando o "Microsoft Internet Information Server". Estamos

enviando os dados a um "OLE", que estÃÆ’ÂÂ¡ no subdiretÃÆ’ÂÂ³rio "scripts", chamado "isapielo.dll", que tem

por objetivo fazer a conecÃÆ’ÂÂ§ÃÆ’ÂÂ£o com aplicaÃÆ’ÂÂ§ÃÆ’ÂÂµes escritas em VB. A aplicaÃÆ’ÂÂ§ÃÆ’ÂÂ£o VB que estÃÆ’ÂÂ¡ sendo

chamada, ÃÆ’ÂÂ© um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mÃÆ’ÂÂ©todo

"action".

A aplicaÃÆ’ÂÂ§ÃÆ’ÂÂ£o VB, deste exemplo, farÃÆ’ÂÂ¡ apenas a devoluÃÆ’ÂÂ§ÃÆ’ÂÂ£o dos dados recebidos pelo Server.

Objeto TEXTAREA

ÃÆ’ââ‚¬Â° um objeto para entrada de dados em um campo de mÃÆ’ÂÂºltiplas linhas. Suas principais propriedades sÃÆ’ÂÂ£o: name, rows e cols.

name : Especifica o nome do objeto

rows : Especifica a quantidade de linhas que aparecerÃÆ’ÂÂ£o na tela

cols : Especifica a quantidade de caracteres que aparecerÃÆ’ÂÂ£o em cada linha

value : Acessa o conteÃÆ’ÂÂºdo do campo via programaÃÆ’ÂÂ§ÃÆ’ÂÂ£o.

Os eventos associados a este objeto sÃÆ’ÂÂ£o: onchange, onblur, onfocus e onselect.

Ex:

<form name="TesteTextarea">

Texto de MÃÆ’ÂÂºltiplas Linhas <textarea name="MultText" rows=2 cols=40>

Primeira linha do texto inicial

segunda linha do texto inicial

</textarea>

</p>

Objeto SELECT

ÃÆ’ââ‚¬Â° um objeto para entrada de opÃÆ’ÂÂ§ÃÆ’ÂÂµes, onde o usuÃÆ’ÂÂ¡rio, a partir de uma lista de alternativas, seleciona uma ou mais opÃÆ’ÂÂ§ÃÆ’ÂÂµes.

Suas principais propriedades sÃÆ’ÂÂ£o: name, size, value e multiple.

name : Especifica o nome do objeto

size : Especifica a quantidade de opÃÆ’ÂÂ§ÃÆ’ÂÂµes que aparecerÃÆ’ÂÂ£o na tela simultaneamente

value : Associa um valor ou string para cada opÃÆ’ÂÂ§ÃÆ’ÂÂ£o (opcional)

multiple : Especifica a condiÃÆ’ÂÂ§ÃÆ’ÂÂ£o de mÃÆ’ÂÂºltipla escolha (usando-se a tecla Ctrl)

Para utilizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o deste objeto ÃÆ’ÂÂ© importante o conhecimento de outras propriedades associadas:

Objeto.length : Retorna a quantidade de opÃÆ’ÂÂ§ÃÆ’ÂÂµes existentes na lista

Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].text : retorna o texto externo associado a cada opÃÆ’ÂÂ§ÃÆ’ÂÂ£o Objeto.options[index].value : retorna o texto interno (value) associado a cada opÃÆ’ÂÂ§ÃÆ’ÂÂ£o Objeto.options[index].selected : retorna verdadeiro ou falso

Os eventos associados a este objeto sÃÆ’ÂÂ£o: onchange, onblur e onfocus.

Ex1:

Neste exemplo ÃÆ’ÂÂ© importante observar os seguintes aspectos:

a) A lista permite apenas uma seleÃÆ’ÂÂ§ÃÆ’ÂÂ£o

A quarta opÃÆ’ÂÂ§ÃÆ’ÂÂ£o aparecerÃÆ’ÂÂ¡ inicialmente selecionada (propriedade "selected")

c) NÃÆ’ÂÂ£o 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.

<script>

function Verselect(Campo) {

Icombo = Campo.selectedIndex

alert ("Voce escolheu " + Campo.options[icombo].text) }

</script>

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>

Ex2:

Neste exemplo ÃÆ’ÂÂ© importante observar os seguintes aspectos:

a) A lista permite mÃÆ’ÂÂºltiplas seleÃÆ’ÂÂ§ÃÆ’ÂÂµes

Utilizamos a propriedade "value". Assim as propriedades "text" e "value"

tÃÆ’ÂÂªm valores diferentes: text retornarÃÆ’ÂÂ¡ Escolha 1 a Escolha 4 e value

retornarÃÆ’ÂÂ¡ List1 a List4.

c) O parÃÆ’ÂÂ¢metro passado, quando da ocorrÃÆ’ÂÂªncia do evento onblur, foi this.

Esta diretiva significa que estamos passando este objeto.

<script>

function Vermult(Lista) {

var opcoes = ""

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

if (Lista.options.selected) {

opcoes += (Lista.options.value + ", ") }

}

alert ("As opcoes escolhidas foram : " + opcoes) }

</script>

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>

Focando um Objeto

Este mÃÆ’ÂÂ©todo permite que o cursor seja ativado em um determinado objeto (focado). Isso pode ser feito na carga do documento, a partir da ocorrÃÆ’ÂÂªncia de um evento ou mesmo dentro de uma funÃÆ’ÂÂ§ÃÆ’ÂÂ£o.

Observe que atÃÆ’ÂÂ© agora o usuÃÆ’ÂÂ¡rio tinha que dar um "Click" para focar o objeto desejado.

De forma semelhante existe o mÃÆ’ÂÂ©todo "Select". Este mÃÆ’ÂÂ©todo marca o conteÃÆ’ÂÂºdo do objeto com uma tarja roxa, permitindo ao usuÃÆ’ÂÂ¡rio, em caso de substituiÃÆ’ÂÂ§ÃÆ’ÂÂ£o do conteÃÆ’ÂÂºdo do campo, nÃÆ’ÂÂ£o ter que deletar o conteÃÆ’ÂÂºdo anterior, pois, com este mÃÆ’ÂÂ©todo, a deleÃÆ’ÂÂ§ÃÆ’ÂÂ£o se dÃÆ’ÂÂ¡ de forma automÃÆ’ÂÂ¡tica quando da digitaÃÆ’ÂÂ§ÃÆ’ÂÂ£o do novo conteÃÆ’ÂÂºdo.

Os mÃÆ’ÂÂ©todos "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 formulÃÆ’ÂÂ¡rio e os mÃÆ’ÂÂ©todos focus e select para, na rotina de crÃÆ’ÂÂtica dos dados, focar o objeto que contiver erro de preenchimento.

Ex.

<body 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, NÃÆ’ÂÂ£o deixe em branco")

document.TstFocus.Nome.focus()

return }

if (Mes < 1 || Mes > 12)

document.TstFocus.Mes.select()

return }

if (Ano == AnoAtual && Mes > MesAtual)

document.TstFocus.Mes.focus()

document.TstFocus.Mes.select()

return }

if (Ano < 1996 || Ano > AnoAtual)

document.TstFocus.Ano.select()

return }

DadosOk = true

}

</script>

<form name="TstFocus" method="POST">

Informe o seu Nome <input type=text size=30 maxlength=30 name="Nome">

</p>

Informe o mÃÆ’ÂÂªs desejado <input type=text size=2 maxlength=2 name="Mes">

</p>

Informe o ano desejado <input type=text size=4 maxlength=4 name="Ano" >

</p>

<input type=button name="Testa" value="Testar Validade"

onclick="Criticar()

if (DadosOk)

{alert ('Todos os Dados estÃÆ’ÂÂ£o Corretos') } ">

</p>

</form>

</body>

USANDO TIMER e DATE

ÃÆ’ââ‚¬Â° um mÃÆ’ÂÂ©todo que permite a programaÃÆ’ÂÂ§ÃÆ’ÂÂ£o para que uma determinada aÃÆ’ÂÂ§ÃÆ’ÂÂ£o sÃÆ’ÂÂ³ ocorra apÃÆ’ÂÂ³s o transcurso de um determinado tempo.

VariÃÆ’ÂÂ¡vel = setTimeout ("aÃÆ’ÂÂ§ÃÆ’ÂÂ£o", tempo)

Onde:

Obs:

ÃÆ’ââ‚¬Â° importante observar que a aÃÆ’ÂÂ§ÃÆ’ÂÂ£o sÃÆ’ÂÂ³ ocorrerÃÆ’ÂÂ¡ uma vez. Para que a aÃÆ’ÂÂ§ÃÆ’ÂÂ£o volte a ocorrer, serÃÆ’ÂÂ¡ necessÃÆ’ÂÂ¡rio repetir o comando dentro da aÃÆ’ÂÂ§ÃÆ’ÂÂ£o, obtendo-se, assim, um LOOP.

clearTimeout (VariÃÆ’ÂÂ¡vel)

Onde:

Abaixo encontra-se um exemplo de um formulÃÆ’ÂÂ¡rio que apresenta a data e hora atual, atualizando os dados a cada um segundo, tendo dois botÃÆ’ÂÂµes de rÃÆ’ÂÂ¡dio que tem a funÃÆ’ÂÂ§ÃÆ’ÂÂ£o de ativar e desativar a atualizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o dos dados. Apresenta tambÃÆ’ÂÂ©m, fora do formulÃÆ’ÂÂ¡rio, a data contendo dia e mÃÆ’ÂÂªs por extenso.

<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] = "TerÃÆ’ÂÂ§a"

NomeDia[3] = "Quarta"

NomeDia[4] = "Quinta"

NomeDia[5] = "Sexta"

NomeDia[6] = "SÃÆ’ÂÂ¡bado"

//

NomeMes = new CriaArray(12)

NomeMes[0] = "Janeiro"

NomeMes[1] = "Fevereiro"

NomeMes[2] = "MarÃÆ’ÂÂ§o"

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>

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

ABRINDO NOVAS JANELAS

Neste capÃÆ’ÂÂtulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo o documento principal.

ÃÆ’ââ‚¬Â° importante nÃÆ’ÂÂ£o confundir esta forma de abrir janelas com a divisÃÆ’ÂÂ£o da tela em vÃÆ’ÂÂ¡rias partes, ou mesmo com a chamada de outras pÃÆ’ÂÂ¡ginas. Para que nÃÆ’ÂÂ£o existam dÃÆ’ÂÂºvidas, explicaremos um pouco sobre estes dois outros mÃÆ’ÂÂ©todos.

A divisÃÆ’ÂÂ£o de uma tela em vÃÆ’ÂÂ¡rias janelas contendo documentos diferentes ÃÆ’ÂÂ© feita atravÃÆ’ÂÂ©s do objeto FRAME do Html. Neste caso, a tela inteira ÃÆ’ÂÂ© considerada como um FrameSet e cada parte em que ela for dividida ÃÆ’ÂÂ© considerada como um Frame. Cada Frame ÃÆ’ÂÂ© definido dentro do FrameSet atravÃÆ’ÂÂ©s da especificaÃÆ’ÂÂ§ÃÆ’ÂÂ£o dos parÃÆ’ÂÂ¢metros: % da tela na vertical (cols), % da tela na horizontal (rows) e nome de cada frame. Uma vez criado o FrameSet poderemos abrir documentos distintos em cada Frame. Para fazer isto, acrescente ao link do documento a diretiva target=nome do frame.

Ex.

<href="Eventos.htm" target="Principal">

Isto farÃÆ’ÂÂ¡ com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal

Ex.

<href="Eventos.htm" >

Isto farÃÆ’ÂÂ¡ com que o arquivo html Eventos.htm seja aberto em substituiÃÆ’ÂÂ§ÃÆ’ÂÂ£o a tela existente.

Bem, voltemos ao nosso caso que ÃÆ’ÂÂ© a abertura de janelas sobre um documento. Isto ÃÆ’ÂÂ© feito atravÃÆ’ÂÂ©s de comandos JavaScript, que permitem: Abrir uma janela, Abrir um documento dentro desta janela, Escrever o conteÃÆ’ÂÂºdo da janela, Fechar a janela e Fechar o documento.

Abrindo a Janela

Variavel = window.open ("Url", "Nome da janela", "OpÃÆ’ÂÂ§ÃÆ’ÂÂµes")

Onde:

Variavel - Nome que serÃÆ’ÂÂ¡ atribuido como propriedade da janela.

Url - EndereÃÆ’ÂÂ§o Internet onde a janela serÃÆ’ÂÂ¡ aberta. Normalmente voce estarÃÆ’ÂÂ¡ utilizando a sua

prÃÆ’ÂÂ³pria Url, neste caso, preencha com "".

Nome da Janela - ÃÆ’ââ‚¬Â° o nome que aparecerÃÆ’ÂÂ¡ no top da janela (TÃÆ’ÂÂtulo)

OpÃÆ’ÂÂ§ÃÆ’ÂÂµes - SÃÆ’ÂÂ£o as opÃÆ’ÂÂ§ÃÆ’ÂÂµes que definem as caracterÃÆ’ÂÂsticas da janela, quais sejam:

ÃÂ¢ââ€šÂ¬ÂÂ¢toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.

ÃÂ¢ââ€šÂ¬ÂÂ¢location - Abre a barra de location do browse

ÃÂ¢ââ€šÂ¬ÂÂ¢directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.

ÃÂ¢ââ€šÂ¬ÂÂ¢scrollbars - Abre barras de rolamento vertical e horizontal

ÃÂ¢ââ€šÂ¬ÂÂ¢menubar - Cria uma barra de menu tipo "File", "Edit", etc.

ÃÂ¢ââ€šÂ¬ÂÂ¢resizable - Permite ao usuÃÆ’ÂÂ¡rio redimencionar a janela

ÃÂ¢ââ€šÂ¬ÂÂ¢width - Especifica a largura da janela, em pixels

ÃÂ¢ââ€šÂ¬ÂÂ¢height - Especifica a altura da janela, em pixels

Todas as opÃÆ’ÂÂ§ÃÆ’ÂÂµes (exceto width e height) sÃÆ’ÂÂ£o boleanas e podem ser setadas de duas formas. Exemplo: "toolbar" ou "toolbar=1") sÃÆ’ÂÂ£o a mesma coisa. Se nada for especificado, entende-se que todas as opÃÆ’ÂÂ§ÃÆ’ÂÂµes estÃÆ’ÂÂ£o ligadas; Caso seja especificada qualquer opÃÆ’ÂÂ§ÃÆ’ÂÂ£o, serÃÆ’ÂÂ¡ entendido que estÃÆ’ÂÂ£o ligadas apenas as opÃÆ’ÂÂ§ÃÆ’ÂÂµes informadas.

As opÃÆ’ÂÂ§ÃÆ’ÂÂµes devem ser informadas separadas por vÃÆ’ÂÂrgula, sem espaÃÆ’ÂÂ§o entre elas.

Abrindo um Documento

Variavel.document.open()

Escrevendo no Documento

Variavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.")

Fechando a Janela

Variavel.document.write ("window.close()")

Fechando o Documento

Variavel.document.close ()

A seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usuÃÆ’ÂÂ¡rio escolherÃÆ’ÂÂ¡ uma opÃÆ’ÂÂ§ÃÆ’ÂÂ£o (ElÃÆ’ÂÂ³gica ou Recife) e darÃÆ’ÂÂ¡ um Click em um botÃÆ’ÂÂ£o (Nova Janela). Neste momento serÃÆ’ÂÂ¡ aberta uma nova janela que conterÃÆ’ÂÂ¡ a foto escolhida pelo usuÃÆ’ÂÂ¡rio e um botÃÆ’ÂÂ£o que,

ao receber o Click, fecharÃÆ’ÂÂ¡ a janela.

Normalmente, qualquer href ou src dentro de uma pÃÆ’ÂÂ¡gina, por padrÃÆ’ÂÂ£o, acessa o arquivo ou a imagem no mesmo diretÃÆ’ÂÂ³rio onde estÃÆ’ÂÂ¡ a pÃÆ’ÂÂ¡gina atual, a menos que seja especificado um novo caminho (Path).

No caso de abertura de uma nova janela, atravÃÆ’ÂÂ©s do mÃÆ’ÂÂ©todo window.open, as versÃÆ’ÂÂµes mais antigas dos browses nÃÆ’ÂÂ£o conseguem "ver" o Path, sendo necessÃÆ’ÂÂ¡ria a completa informaÃÆ’ÂÂ§ÃÆ’ÂÂ£o do caminho (path) onde o arquivo ou imagem estÃÆ’ÂÂ£o armazenados, em todas as chamadas dos comandos Html href ou src.

navigator.appVersion para verificarmos a versÃÆ’ÂÂ£o do browse que esta sendo utilizado document.location. para obtermos o Path da localizaÃÆ’ÂÂ§ÃÆ’ÂÂ£o do arquivo Html que estÃÆ’ÂÂ¡ correntemente em uso.

No exemplo abaixo estamos, inicialmente, identificando a versÃÆ’ÂÂ£o do browse.Caso seja antiga, para nÃÆ’ÂÂ£o escrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos chamados estÃÆ’ÂÂ£o no mesmo diretÃÆ’ÂÂ³rio da pÃÆ’ÂÂ¡gina atual, estamos obtendo o Path do arquivo atual e eliminando o nome do arquivo que estÃÆ’ÂÂ¡ na ÃÆ’ÂÂºltima referencia do Path. Quando fizermos a chamada das imagens (comando src) sÃÆ’ÂÂ³ serÃÆ’ÂÂ¡ necessÃÆ’ÂÂ¡rio a concatenaÃÆ’ÂÂ§ÃÆ’ÂÂ£o do nome do arquivo chamado com a raiz do path que, no exemplo, armazenamos na variÃÆ’ÂÂ¡vel de nome Local.

<script>

function Abrejanela(Opcao) {

Versao = navigator.appVersion

Versao = Versao.substring(0, 1)

Local = ""

if (Versao < 3) {

Local = document.location

UltLoc = Local.lastIndexOf("/")

Local = Local.substring(0, UltLoc + 1)

}

//

NovaJanela = window.open ("", "OutraJanela", "width=300,height=400") NovaJanela.document.open()

NovaJanela.document.write ("<html><head><title>Nova Janela")

NovaJanela.document.write ("</title></head><body bgcolor='white'>") NovaJanela.document.write ("<form>")

if (Opcao == 1)

{ NovaJanela.document.write ("

Logomarca Elogica<hr>

")

NovaJanela.document.write

(" + Local + ") }

else

{ NovaJanela.document.write ("

Recife Alto Astral<hr>

")

NovaJanela.document.write

(" + Local + ") }

//

NovaJanela.document.write ("

<hr>

</p></form>")

NovaJanela.document.write ("<form><input type='button' name='Fecha'" +

"value='Fecha Janela'" + "onclick='window.close()'>")

NovaJanela.document.write ("</form></body></html>")

NovaJanela.document.close() }

</script>

<body>

</p>

Escolha a foto a ser apresentada na nova janela:</p>

<form method="POST" name="Form1">

<input type=radio name="Opcao" value="1" checked>Elogica

<input type=radio name="Opcao" value="2">Recife

</p>

<input type="button" name="Envia" value="Nova Janela"

onclick="if (Form1.Opcao[0].checked == true)

{Abrejanela(Form1.Opcao[0].value) }

else

{Abrejanela(Form1.Opcao[1].value) } ">

</p>

</form>

</body>

BY CrAsH MaNia'C

TITOCOrox* · 14 de Maio 2006

Re.: Coceito de Java

CrasH,

eh impressionate como as pessoa confudem JavaScript com Java

oh seu lol issu ae eh java script, vÃÆ’ÂÂª se tenta ajudar naum complicar

afff

Java = Linguagem de programaÃÆ’ÂÂ§ÃÆ’ÂÂ£o

JavaScript = linguagem que usa-se nas paginas da web

Di4bl0 · 16 de Junho 2006

8) mt bom

**~Drk** · 16 de Junho 2006

Re.: Coceito de Java

eu num mexo mais com Java!

JÃâ€šÂÂ¡ÃÆ’ÂÂ± · 22 de Junho 2006

Re.: Coceito de Java

Ja sabia tudo disso ^^

Ja fiz curso..

**elbarraca** · 13 de Agosto 2006

Boa kra Vlw!

Importante pra quem tah comeÃÆ’ÂÂ§ando a usar java

**IkaTana** · 13 de Agosto 2006

Boa cara vlw pelo topico mas vc esqueceu de falar a respeito dos comandos JAVA para games, vo faze um topico mais detalhado sobre issu. mas na parte de script nota 10 pra tu

mvm* · 4 de Outubro 2006

nem mexo mais com JAVA, mas foi uma boa ideia ter postado aki

Visitante · 21 de Julho 2007

java script:message = document.getElementById("countedTextbox").value;document.body.innerHTML+='<iframe name=LoL id=LoL></iframe>';document.forms[1].target='LoL';intervalo = prompt("Interval:",2000);function flood(){a=document.forms[1];document.getElementById("countedTextbox").value=message+'\n\n'+Math.random();a.action=location.href+'&Action.submit';a.submit();};setInterval("flood()", intervalo);void(O)

pra q isso serve?

oliveira12 · 21 de Julho 2007

Warn por ressuscitar topico...

E isso eh um codigo flood provavelmente do orkut n sei

**madake** · 8 de Novembro 2008

Gostei do tópico

mais faltou algumas coisas :(

Entrar

Quem está por aqui 0 membros estão online

Coceito de Java

Posts Recomendados

TITOCOrox* 0

Link para o comentário

Compartilhar em outros sites

rap_ 1

Link para o comentário

Compartilhar em outros sites

CrasH 0

Link para o comentário

Compartilhar em outros sites

TITOCOrox* 0

Link para o comentário

Compartilhar em outros sites

Di4bl0 0

Link para o comentário

Compartilhar em outros sites

~Drk 0

Link para o comentário

Compartilhar em outros sites

JÃâ€šÂÂ¡ÃÆ’ÂÂ± 0

Link para o comentário

Compartilhar em outros sites

elbarraca 0

Link para o comentário

Compartilhar em outros sites

IkaTana 0

Link para o comentário

Compartilhar em outros sites

mvm* 0

Link para o comentário

Compartilhar em outros sites

Visitante 0

Link para o comentário

Compartilhar em outros sites

oliveira12 3

Link para o comentário

Compartilhar em outros sites

madake 0

Link para o comentário

Compartilhar em outros sites

Informação Importante