88633748 Javascript Manual

INTRODUÇÃO

Javascript é uma linguagem de programação utilizada para criar

pequenos programinhas encarregados de realizar ações dentro do âmbito de

uma página web. Com Javascript podemos criar efeitos especiais nas páginas

e definir interatividades com o usuário. O navegador do cliente é o encarregado

de interpretar as instruções Javascript e executá-las para realizar estes efeitos

e interatividades, de modo que o maior recurso, e talvez o único, com que

conta esta linguagem é o próprio navegador.

Javascript é o seguinte passo, depois de HTML, que pode dar um

programador da web que decide melhorar suas páginas e a potência de seus

projetos. É uma linguagem de programação bastante simples e pensada para

fazer as coisas com rapidez, às vezes com leveza. Inclusive as pessoas que

não tenham uma experiência prévia na programação poderão aprender esta

linguagem com facilidade e utilizá-la em toda sua potência com somente um

pouco de prática.

Entre as ações típicas que se podem realizar em Javascript temos duas

vertentes. Por um lado, os efeitos especiais sobre páginas web, para criar

conteúdos dinâmicos e elementos da página que tenham movimento, mudam

de cor ou qualquer outro dinamismo. Por outro, javascript nos permite executar

instruções como resposta às ações do usuário, com o qual podemos criar

páginas interativas com programas como calculadoras, agendas, ou tabelas de

cálculo.

Javascript é uma linguagem com muitas possibilidades, permite a

programação de pequenos scripts, e também de programas maiores,

orientados a objetos, com funções, estruturas de dados complexas, etc. Toda

esta potência de Javascript se coloca à disposição do programador, que se

converte no verdadeiro dono e controlador de cada coisa que ocorre na página.

Neste livro vamos tratar de aproximarmos desta linguagem mais

profundidade e conhecer todos seus segredos e métodos de trabalho. Ao final

do livro seremos capazes de controlar a página web e discernir o melhor

método para atacar os problemas ou objetivos que tivermos planejado.

HISTORIA

Foi criado na Internet uma infinidade de serviços para realizar muitos

tipos de comunicações, como correio, chats, buscas de informação, etc. Mas

nenhum desses serviços se desenvolveram tanto como o Web. Se estamos

lendo estas linhas não vamos precisar de nenhuma explicação do que é o web,

mas sim que podemos falar um pouco sobre como foi se desenvolvendo com o

passar dos anos.

O web é um sistema Hipertexto, uma quantidade descomunal de textos

que contém links que relacionam cada uma das unidades básicas onde

podemos encontrar informação, as páginas web. À princípio, para desenhar

este sistema de páginas com links se pensou em uma linguagem que

permitisse apresentar cada uma dessas informações juntos cm uns pequenos

estilos, esta linguagem foi o HTML, que logo se veria que não cumpriu todos os

objetivos para os que foi desenhado, mas isso é outro assunto.

O caso é que HTML não é suficiente para realizar todas as ações que se

podem chegar a necessitar em uma página web. Isto é devido a que conforme

foi crescendo o web e seus distintos usos foram se complicando as páginas e

as ações que queriam se realizar através delas. O HTLM havia se tornado

curto para definir todas estas novas funcionalidades, já que somente serve

para apresentar o texto em uma página, definir seu estilo e pouco mais.

O primeiro ajudante para cobrir as necessidades que estavam surgindo

foi Java, através da tecnologia dos Applets, que são pequenos programas que

se incrustam nas páginas web e que podem realizar as ações associadas aos

programas de propósito geral. A programação de Applets foi um grande avance

e Netscape, até então, o navegador mais popular, havia rompido a primeira

barreira do HTML ao fazer possível a programação dentro das páginas web.

Não cabe dúvida que o aparecimento dos Applets supôs um grande avance na

história do web, mas foi uma tecnologia definitiva e muitas outras seguiram

implementando o caminho que começou com eles.

Chega Javascript:

Netscape, depois de fazer seus navegadores compatíveis com os

applets, começou a desenvolver uma linhguagem de programação ao que

chamou LiveScript que permitisse criar pequenos programas nas páginas e que

fosse muito mais simples de utilizar que Java. De modo que o primeiro

Javascript se chamou LiveScript, mas não durou muito esse nome, pois antes

de lançar a primeira versão do produto se forjou uma aliança com Sun

Microsystems, criador de Java, para desenvolver em conjunto essa nova

linguagem.

A aliança fez com que Javascript se desenhara como um irmão pequeno

de Java, somente útil dentro das páginas web e muito mais fácil de utilizar, de

modo que qualquer pessoa, sem conhecimentos de programação pudesse

aprofundar-se na linguagem e utilizá-la. Ademais, para programar Javascript

não é necessário um kit de desenvolvimento, nem compilar os scripts, nem

realizá-los em ficheiros externos ao código HTML, como ocorreria com os

applets.

Netscape 2.0 foi o primeiro navegador que entendia Javascript e seu

rastro foi seguido pelos navegadores da companhia Microsoft a partir da versão

3.0.

Diferenças entre Java e Javascript

Veremos a diferença entre estas duas linguagens com uma origem

comum.

Queremos que fique claro que Javascript não tem nada a ver com Java,

salvo em suas origens. Atualmente são produtos totalmente distintos e não

guardam entre si mais relação que a sintaxe idêntica e pouco mais. Algumas

diferenças entre estas duas linguagens são as seguintes:

Compilador. Para programar em Java necessitamos um Kit de

desenvolvimento e um compilador. Entretanto, Javascript não é uma linguagem

que necessite que seus programas se compilem, senão que estes se

interpretem por parte do navegador quando este lê a página.

Orientado a objetos. Java é uma linguagem de programação orientada a

objetos. (Mais tarde veremos que quer dizer orientado a objetos, para quem

ainda não sabe) Javascript não é orientado a objetos, isto quer dizer que

poderemos programar sem necessidade de criar classes, tal como se realiza

nas linguagens de programação estruturada como C ou Pascal.

Propósito. Java é muito mais potente que Javascript, isto é devido a que

Java é uma linguagem de propósito geral, com o que se podem fazer

aplicações do mais variado, entretanto, com Javascript somente podemos

escrever programas para que se executem em páginas web.

Estruturas fortes. Java é uma linguagem de programação fortemente

tipada, isto quer dizer que ao declarar uma variável teremos que indicar seu

tipo e não poderá mudar de um tipo a outro automaticamente. Por sua parte,

Javascript não tem esta característica, e podemos colocar em uma variável a

informação que desejarmos, independentemente do tipo desta. Ademais,

poderemos mudar o tipo de informação de uma variável quando quisermos.

Outras características. Como vemos Java é muito mais complexo, mas

também, mais potente, robusto e seguro. Tem mais funcionalidades que

Javascript e as diferenças que os separam são o suficientemente importantes

como para distinguí-los facilmente.

Previamente para começar a utilizar Javascript podemos ter uma idéia

mais concreta das possíveis aplicações desta linguagem assim como as

ferramentas que necessitamos para colocarmos mãos a obra.

Usos de Javascript

Vejamos brevemente alguns usos desta linguagem que podemos

encontrar na web para termos uma idéia das possibilidades que tem.

Para começar, podemos ver páginas cheia de efeitos super

interessantes sobre Javascript, que chegam a assemelhar-se à tecnologia

Flash.

Por outro lado, podemos encontrar dentro de Internet muitas aplicações

de Javascript muito mais sérias, que fazem com que uma página web se

converta em um verdadeiro programa interativo de gestão de qualquer recurso.

Também podemos ver exemplos dentro de qualquer página um pouco

complexa, quando passamos por sites que tenham uma calculadora ou um

conversor de divisas, veremos que em muitos casos foi realizado com

Javascript.

Na verdade é muito mais habitual encontrar Javascript para realizar

efeitos simples sobre páginas web, ou no tão simples, como podem ser

rollovers (que muda uma imagem ao passar o mouse por cima), navegadores

desdobráveis, abertura de janelas secundárias, etc. Podemos nos atrever a

dizer que esta linguagem é realmente útil para estes casos, pois estes típicos

efeitos têm a complexidade justa para ser implementados em questão de

minutos sem possibilidade de erros.

O que é necessário

Para programar em Javascript necessitamos basicamente o mesmo que

para programar páginas web com HTML. Um editor de textos e um navegador

compatível com Javascript. Um usuário de Windows possui de saída todo o

necessário para poder programar em Javascript, visto que dispõe dentro de

sua instalação típica de sistema operativo, de um editor de textos, o Bloco de

notas, e de um navegador: Internet Explorer.

Usuários de outros sistemas podem encontrar em Internet facilmente as

ferramentas necessárias para começar em páginas de download de software

como Tucows.

Uma recomendação em relação ao editor de textos. Trata-se de que,

apesar do Bloco de Notas ser suficiente para começar, talvez seja muito útil

contar com outros programas que nos oferecem melhores prestações na hora

de escrever as linhas de código. Estes editores avançados têm algumas

vantagens como que colorem os códigos de nossos scripts, nos permitem

trabalhar com vários documentos simultaneamente, têm ajudas, etc. Entre

outros queremos destacar o Home Site ou o UltraEdit.

Versões de navegadores e de Javascript

Também é apropriado introduzir as distintas versões de Javascript que

existem e que evolucionaram em conjunto com as versões de navegadores. A

linguagem foi avançando durante seus anos de vida e incrementando suas

capacidades. À princípio podia realizar muitas coisas na página web, mas tinha

poucas instruções para criar efeitos especiais. Com o tempo também o HTML

foi avançando e foram criadas novas características como as camadas, que

permitem tratar e planificar os documentos de maneira distinta. Javascript

também avançou e para manejar todas estas novas características foram

criados novas instruções e recursos. Para resumir vamos comentar as distintas

versões de Javascript:

Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade

de instruções e funções, quase todas as que existem agora já se introduziram

no primeiro padrão.

Javascript 1.1: É a versão de Javascript que foi desenhado com a

chegada dos navegadores 3.0. Implementava pouco mais que sua versão

anterior, como por exemplo, o tratamento de imagens dinamicamente e a

criação de arrays.

Javascript 1.2: A versão dos navegadores 4.0. Esta tem como

desvantagem que é um pouco distinta em plataformas Microsoft e Netscape, já

que ambos navegadores cresceram de distinto modo e estavam em plena luta

no mercado.

Javascript 1.3: Versão que implementam os navegadores 5.0. Nesta

versão foram limitadas algumas diferenças e asperezas entre os dois

navegadores.

Javascript 1.5: Versão atual, no momento de escrever estas linhas, que

implementa Netscape 6.

Por este lado, Microsoft também foi evoluindo até apresentar sua versão

5.5 de JScript (assim chamam ao javascript utilizado pelos navegadores de

Microsoft).

Efeitos rápidos com Javascript

Antes de aprofundarmos na matéria, podemos ver uma série de efeitos

rápidos que se podem programar com Javascript. Isto pode nos dar uma ideia

más clara e exata das capacidades e da potência da linguagem.

Abrir uma janela secundária

Primeiro vamos ver que com uma linha de Javascript podemos fazer

coisas bastante atrativas. Por exemplo podemos ver como abrir uma janela

secundária sem barras de menus que mostre o buscador Google. O código

seria o seguinte:

Exemplo

< script>

window.open("http://www.google.com","","width=550,height=420,menubar=no")

< /script>

Uma mensagem de boas vindas

Podemos mostrar uma caixa de texto emergente ao terminar de carregar

o portal de nosso site web, que poderia dar as boas vindas aos visitantes.

Exemplo

< script>

window.alert("Bem-vindo ao meu site web. Obrigado...")

< /script>

Data atual

Vejamos agora um simples script para mostrar a data de hoje. Às vezes

é muito interessante mostrá-la nas webs para dar um efeito de que a página

está "ao dia", ou seja, está atualizada.

Exemplo

< script> document.write(new Date())< /script>

Estas linhas deveriam ser introduzidas dentro do corpo da página no

lugar onde quisermos que apareça a data da última atualização. Podemos ver

o exemplo em funcionamento aqui.

Botão de voltar

Outro exemplo rápido pode ser visto a seguir. Trata-se de um botão para

voltar para trás, como o que temos na barra de ferramentas do navegador.

Agora veremos uma linha de código que mistura HTML e Javascript para criar

este botão que mostra a página anterior no histórico, se é que havia.

Exemplo

< input type=button value=Atrás onclick="history.go(-1)">

Parte superior do formulário

O botão será parecido ao seguinte. Podemos clicá-lo para ver seu

funcionamento (deveria nos levar à página anterior).

Parte inferior do formulário

Como diferença com os exemplos anteriores, há que destacar que neste

caso a instrução Javascript se encontra dentro de um atributo de HTML,

onclick, que indica que essa instrução tem de ser executada como resposta ao

clicar no botão.

É possível comprovar a facilidade com a qual se podem realizar algumas

ações interessantes, e existiriam muitas outras mostras, mas que reservamos

para capítulos posteriores.

A linguagem Javascript

Nesta parte do livro vamos conhecer a maneira de trabalhar com

Javascript, como incluir scripts e ser compatível com todos os navegadores.

Muitas idéias do funcionamento de Javascript já foram descritas nos capítulos

anteriores, mas com o objetivo de não deixarmos nada solto no ar, vamos tratar

de reforçar a partir daqui todos os dados mais importantes desta linguagem.

Javascript se escreve no documento HTML

O mais importante e básico que podemos destacar neste momento é

que a programação de Javascript se realiza dentro do próprio documento

HTML. Isto quer dizer que na página se misturam as duas linguagens, e para

que estas duas linguagens possam ser misturadas sem problemas temos que

incluir alguns delimitadores que separam as etiquetas HTML das instruções

Javascript. Estes delimitadores são as etiquetas . Todo o código Javascript que

colocarmos na página há de ser introduzido entre estas duas etiquetas.

Em uma mesma página podemos introduzir vários scripts, cada um que

poderia se introduzir dentro das etiquetas <SCRIPT> distintas. A colocação

destes scripts é indiferente, à princípio dá no mesmo aonde coloca-los, mas em

determinados casos esta colocação sim que será muito importante. Em cada

caso, e chegado o momento isto será informado convenientemente.

Também se pode escrever Javascript dentro de determinados atributos

da página, como o atributo onclick. Estes atributos estão relacionados com as

ações do usuário e são chamados de manejadores de eventos.

Vamos ver no próximo capítulo mais detalhadamente estas duas

maneiras de escrever scripts, que tem como diferença principal o momento em

que se executam as sentenças.

Maneiras de executar script

Existem duas maneiras de executar scripts na página. A primeira destas

maneiras se trata de execução direta de scripts, a segunda é uma execução

como resposta à ação de um usuário. Veremos agora cada uma delas.

Execução direta

É o método mais básico de executar scripts. Neste caso se incluem as

instruções dentro da etiqueta

Resposta a um evento

É a outra maneira de executar scripts, mas antes de vê-la devemos falar

sobre os eventos. Os eventos são ações que realiza o usuário. Os programas

como Javascript estão preparados para apanhar determinadas ações

realizadas, neste caso sobre a página, e realizar ações como resposta. Deste

modo se podem realizar programas interativos, já que controlamos os

movimentos do usuário e respondemos a eles. Existem muitos tipos de eventos

distintos, por exemplo, o click do mouse, a seleção de texto da página, entre

outros.

As ações que queremos realizar como resposta a um evento devem ser

indicadas dentro do mesmo código HTML, mas neste caso se indicam em

atributos HTML que se colocam dentro da etiqueta que queremos que

responda às ações do usuário. No capítulo em que vimos algum exemplo

rápido já comprovamos que se quiséssemos que um botão realizasse ações

quando se clicasse sobre ele, devíamos indicá-las dentro do atributo onclick do

botão.

Comprovamos então, que se pode introduzir código Javascript dentro de

determinados atributos das etiquetas HTML. Veremos mais adiante este tipo de

execução em profundidade e os tipos de eventos que existem.

Ocultar scripts em navegadores antigos

Já vimos que Javascript se implementou a partir de Netscape 2.0 e

Internet Explorer 3.0, inclusive existem navegadores que funcionam em

sistemas onde somente se pode visualizar texto e portanto determinadas

tecnologias, como esta linguagem, estão fora do seu alcance. Sendo assim,

nem todos os navegadores do web compreendem Javascript. Nos casos em

não se interpretam os scripts, os navegadores assumem que o código destes é

o texto da própria página web e como consequência, apresentam os scripts na

página web como se tratasse de um texto normal. Para evitar que o texto dos

scripts se escreva na página quando os navegadores não os entendem, temos

que ocultá-los com comentários HTML (). Vejamos com um exemplo como se

deve ocultar os scripts.

Exemplo:

< SCRIPT>

< !--

Código Javascript

//-->

< /SCRIPT>

Vemos que o inicio do comentário HTML é idêntico a como o

conhecemos no HTML, porém o fechamento do comentário apresenta uma

particularidade, que começa por duas barras inclinadas. Isto é devido a que o

final do comentário contém vários caracteres que Javascript reconhece como

operadores e ao tratar de analisá-los lança uma mensagem de erro de sintaxe.

Para que Javascript não lance uma mensagem de erro se coloca antes do

comentário HTML essa barra dupla, que não é mais que um comentário

Javascript, que conheceremos mais adiante quando falarmos de sintaxe.

O início do comentário HTML não é necessário comentá-lo com a barra

dupla, dado que Javascript entende bem que simplesmente se pretende ocultar

o código. Um esclarecimento a este ponto: se colocássemos as duas nesta

linha, se veriam em navegadores antigos por estar fora dos comentários HTML.

Os navegadores antigos não entendem as etiquetas <SCRIPT> , portanto não

as interpretam, tal como fazem com qualquer etiqueta que desconhecem.

Exemplo:

<NOSCRIPT>

Existe a possibilidade de indicar um texto alternativo para os

navegadores que não entendem Javascript, para lhes informar de que nesse

lugar deveria executar um script e que a página não está funcionando com

100% de suas capacidades. Também podemos sugerir aos visitantes que

atualizem seu navegador a uma versão compatível com a linguagem. Para isso

utilizamos a etiqueta <NOSCRIPT> e entre esta etiqueta e seu correspondente

de fechamento podemos colocar o texto alternativo ao script.

Exemplo:

< SCRIPT>

código javascript

< /SCRIPT>

< NOSCRIPT>

Este navegador não compreende os scripts que se estão executando,

você deve atualizar sua versão de navegador a uma mais recente.

< br><br>

< a href=http://netscape.com>Netscape</a>.<br>

< a href=http://microsoft.com>Microsoft</a>.

< /NOSCRIPT>

Mais sobre colocar scripts

Duas notas adicionais sobre como colocar scripts em páginas web.

A etiqueta

O atributo em questão é language e o mais habitual é indicar simplesmente

a linguagem com a qual foram programados os scripts. A linguagem por padrão

é Javascript, portanto se não utilizamos este atributo, o navegador entenderá

que a linguagem com que se está programando é Javascript.

Exemplo:

< SCRIPT LANGUAGE=javascript>

Arquivos externos de Javascript

Outra maneira de incluir scripts em páginas web, implementada a partir de

Javascript 1.1, é incluir arquivos externos onde se podem colocar muitas

funções que se utilizem na página. Os arquivos costumam ter extensão .js e se

incluem desta maneira.

Exemplo:

< SCRIPT language=javascript src="arquivo_externo.js">

//estou incluiendo o arquivo "arquivo_externo.js"

< /SCRIPT>

Dentro das etiquetas <SCRIPT> pode ser escrito qualquer texto e será

ignorado por o navegador, entretanto, os navegadores que não entendem o

atributo SRC terão este texto por instruções, pelo qual é aconselhável botar um

comentário Javascript antes de cada linha com o objetivo de que não

respondam com um erro.

O arquivo que incluímos (neste caso arquivo_externo.js) deve conter

somente sentenças Javascript. Não devemos incluir código HTML de nenhum

tipo, nem sequer as etiquetas e .

Sintaxe Javascript

A linguagem Javascript tem uma sintaxe muito parecida a de Java por

estar baseado nele. Também é muito parecida a da linguagem C, de modo que

se o leitor conhece alguma destas duas linguagens poderá manejar com

facilidade com o código. De qualquer forma, nos seguintes capítulos vamos

descrever toda a sintaxe com detalhes, para que os novatos não tenham

nenhum problema com ela.

Comentários

Um comentário é uma parte de código que não é interpretada pelo

navegador e cuja utilidade radica em facilitar a leitura ao programador. O

programador, a medida que desenvolve o script, vai deixando frases ou

palavras soltas, chamadas comentários, que ajudam a ele ou a qualquer outro

a ler mais facilmente o script na hora de modificá-lo ou depurá-lo.

Já foi visto anteriormente algum comentário Javascript, mas agora

vamos revê-los de novo. Existem dois tipos de comentários na linguagem. Um

deles, a barra dupla, serve para comentar uma linha de código. O outro

comentário podemos utilizar para comentar várias linhas e se indica com os

signos /* para começar o comentário e */ para terminá-lo. Vejamos uns

exemplos.

Exemplo:

< SCRIPT>

//Este é um comentário de uma linha

/*Este comentário pode se expandir

por várias linhas.

As que quiser*/

< /SCRIPT>

Maiúsculas e minúsculas

Em javascript se deve respeitar as maiúsculas e as minúsculas. Se nos

equivocamos ao utilizá-las o navegador responderá com uma mensagem de

erro de sintaxe. Por convenção os nomes das coisas se escrevem em

minúsculas, salvo que se utilize um nome com mais de uma palavra, pois

nesse caso se escreverão com maiúsculas as iniciais das palavras seguintes à

primeira. Também se pode utilizar maiúsculas nas iniciais das primeiras

palavras em alguns casos, como os nomes das classes, apesar de que já

veremos mais adiante quais são estes casos e o que são as classes.

Separação de instruções

As distintas instruções que contém nossos scripts devem ser separadas

convenientemente para que o navegador não indique os correspondentes erros

de sintaxe. Javascript tem duas maneiras de separar instruções. A primeira é

através do caractere pontoe vírgula (;) e a segunda é através de uma quebra

de linha.

Por esta razão, as sentenças Javascript não necessitam acabar em

ponto e vírgula a não ser que coloquemos duas instruções na mesma linha.

De qualquer forma, não é uma idéia ruim se acostumar a utilizar o ponto

e vírgula depois de cada instrução, pois outras linguagens como Java ou C

obrigam a utilizá-las e estaremos nos acostumando a realizar uma sintaxe mais

parecida à habitual em torno de programações avançadas.

Variáveis Javascript

Uma variável é um espaço em memória onde se armazena um dado, um

espaço onde podemos salvar qualquer tipo de informação que necessitemos

para realizar as ações de nossos programas. Por exemplo, se nosso programa

realiza somas, será muito normal guardarmos em variáveis as distintas

parcelas que participam na operação e o resultado da soma. O efeito seria algo

parecido a isto.

Exemplo:

parcela1 = 23

parcela2 = 33

soma = parcela1 + parcela2

Neste exemplo temos três variáveis, parcela1, parcela2 e soma, onde

guardamos o resultado. Vemos que seu uso para nós é como se tivéssemos

um apartado onde salvar um dado e que se pode acessa-los colocando

somente seu nome.

Os nomes das variáveis devem ser construídos com caracteres

alfanuméricos e o caractere sublinhado (_). A parte disso, há uma série de

regras adicionais para construir nomes para variáveis. A mais importante é que

tem de começar por um caractere alfabético ou sublinhado. Não podemos

utilizar caracteres raros como o signo +, um espaço ou um $. Nomes admitidos

para as variáveis poderiam ser:

Exemplo:

Idade

PaísDeNascimento

_nome

Também há que evitar utilizar nomes reservados como variáveis, por

exemplo não poderemos chamar a nossa variável palavras como return ou for,

que já veremos que são utilizadas para estruturas da própria linguagem.

Vejamos agora alguns nomes de variáveis que não está permitido utilizar

Exemplo:

12meses

seu nome

return

pe%pe

Declaração de variáveis

Declarar variáveis consiste em definir e de passo informar ao sistema de

que se vai utilizar uma variável. É um costume habitual nas linguagens de

programação definir as variáveis que serão utilizadas nos programas e para

isso, seguem-se algumas regras restritas. Porém, javascript ultrapassa muitas

regras por ser uma linguagem mais livre na hora de programar e um dos casos

no qual outorga um pouco de liberdade é na hora de declarar as variáveis, já

que não estamos obrigados a fazê-lo, ao contrário do que acontece na maioria

das linguagens de programação.

De qualquer forma, é aconselhável declarar as variáveis, além de um

bom costume e para isso Javascript conta com a palavra var. Como é lógico,

utiliza-se essa palavra para definir a variável antes de utilizá-la.

Exemplo:

var operando1

var operando2

Também pode-se atribuir um valor à variável quando se está declarando

Exemplo:

var operando1 = 23

var operando2 = 33

Também se permite declarar várias variáveis na mesma linha, sempre

que se separem por vírgulas.

Exemplo:

var operando1,operando2

Âmbito das variáveis

Chama-se âmbito das variáveis ao lugar onde estas estão disponíveis.

Em geral, quando declaramos uma variável fazemos com que esteja disponível

no lugar onde se foi declarado, isto ocorre em todas as linguagens de

programação e como javascript se define dentro de uma página web, as

variáveis que declaremos na página estarão acessíveis dentro dela. Deste

modo, não poderemos acessar às variáveis que tenham sido definidas em

outra página. Este é o âmbito mais habitual de uma variável e chamamos a

este tipo de variáveis globais à página, mesmo que não seja o único, já que

também poderemos declarar variáveis em lugares mais dimensionados.

Variáveis globais

Como dissemos, as variáveis globais são as que estão declaradas no

âmbito mais amplo possível, que em Javascript é uma página web. Para

declarar uma variável global à página simplesmente faremos em um script, com

a palavra var.

Exemplo:

< SCRIPT>

var variávelGlobal

< /SCRIPT>

As variáveis globais são acessíveis desde qualquer lugar da página, ou

seja, a partir do script onde foi declarado e todos os demais scripts da página,

incluindo os que manejam os eventos, como o onclick, que já vimos que podia

ser incluído dentro de determinadas etiquetas HTML.

Variáveis locais

Também poderemos declarar variáveis em lugares mais dimensionados,

como por exemplo, uma função. A estas variáveis chamaremos de locais.

Quando se declarem variáveis locais somente poderemos acessá-las dentro do

lugar aonde tenha sido declaradas, ou seja, se havíamos declarado em uma

função somente poderemos acessá-la quando estivermos nessa função.

As variáveis podem ser locais em uma função, mas também podem ser

locais a outros âmbitos, como por exemplo, um loop. Em geral, são âmbitos

locais qualquer lugar dimensionado por chaves.

Exemplo:

< SCRIPT>

function minhaFuncao) (){

var variavelLocal

}

< /SCRIPT>

No script anterior declaramos uma variável dentro de uma função, pelo

qual esta variável somente terá validade dentro da função. Pode-se ver as

chaves para dimensionar o lugar onde está definida essa função ou seu

âmbito.

Não há problema em declarar uma variável local com o mesmo nome

que uma global, neste caso a variável será visível desde toda a página, exceto

no âmbito onde está declarada a variável local já que neste lugar esse nome de

variável está ocupado pela local e é ela quem tem validade. Resumindo, em

qualquer lugar da página, a variável que terá validade é a global. Menos no

âmbito onde está declarada a variável local, que será ela que vai ter validade.

Exemplo:

< SCRIPT>

var numero = 2

function minhaFuncao (){

var numero = 19

document.write(numero) //imprime 19

}


< /SCRIPT>

Um conselho para os principiantes poderia ser não declarar variáveis

com os mesmos nomes, para que nunca tenha confusão sobre qual variável é

a que tem validade em cada momento.

Diferenças entre utilizar var ou no

Como dissemos, em Javascript temos liberdade para declarar ou não as

variáveis com a palavra var, mas os efeitos que conseguiremos em cada caso

serão distintos. Na verdade, quando utilizamos var, estamos fazendo com que

a variável que estamos declarando seja local ao âmbito onde se declara. Por

outro lado, se não utilizamos a palavra var para declarar uma variável esta será

global a toda a página, seja qual for o âmbito no qual tenha sido declarada.

No caso de uma variável declarada na página web, fora de uma função

ou de qualquer outro âmbito mais reduzido, é indiferente se se declara ou não

com var, desde um ponto de vista funcional. Isto é devido a que qualquer

variável declarada fora do âmbito global a toda a página. A diferença pode ser

apreciada em uma função por exemplo, já que se utilizamos var a variável será

local à função e se não o utilizamos , a variável será global à página. Esta

diferença é fundamental na hora de controlar corretamente o uso das variáveis

na página, já que se não o fazemos em uma função poderíamos sobrescrever

o valor de uma variável, perdendo o dado que pudesse conter previamente.

Exemplo:

< SCRIPT>

var numero = 2

function minhaFuncao (){

numero = 19


}


//chamamos a funcao

minhaFuncao()


< /SCRIPT>

Neste exemplo, temos uma variável global à página chamada numero,

que contém um 2. Também temos uma função que utiliza a variável numero

sem a ter declarado com var, pelo que a variável numero da funcao será

mesma variável global numero declarada fora da função. Em uma situação com

esta, ao executar a função se sobrescreverá a variável numero e o dado que

havia antes de executar a função se perderá.

O que podemos salvar em variáveis

Em uma variável podemos introduzir vários tipos de informação, por

exemplo, texto, números inteiros ou reais, etc. A estas distintas classes de

informação conhecemos como tipos de dados. Cada um tem características e

usos distintos, vejamos quais são os tipos de dados de Javascript.

Números

Para começar temos o tipo numérico, para salvar números como 9 ou 23.6

Cadeias

O tipo cadeia de caractere salva um texto. Sempre que escrevemos uma

cadeia de caracteres devemos utilizar as aspas (").

Boleanos

Também contamos com o tipo boleano, que salva uma informação que pode

valer como sim (true) ou não (false).

Por último seria relevante assinalar aqui que nossas variáveis podem

conter coisas mais complicadas, como poderia ser um objeto, uma função, ou

vazio (null) mas já o vermos mais adiante.

Na verdade nossas variáveis não estão forçadas a salvar um tipo de

dados em concreto e portanto, não especificamos nenhum tipo de dados para

uma variável quando a estamos declarando. Podemos introduzir qualquer

informação em uma variável de qualquer tipo, inclusive podemos ir mudando o

conteúdo de uma variável de um tipo a outro sem nenhum problema. Vamos

ver isto com um exemplo.

Exemplo:

var nome_cidade = "Salvador"

var revisado = true

nome_cidade = 32

revisado = "no"

Esta agilidade na hora de atribuir tipos às variáveis pode ser uma

vantagem à princípio, sobretudo para pessoas inexperientes, mas a longo

prazo pode ser uma fonte de erros já que dependendo do tipo que são as

variáveis se comportarão de um modo ou outro e se não controlamos com

exatidão o tipo das variáveis podemos encontrar um texto somado a um

número. Javascript operará perfeitamente, e devolverá um dado, mas em

alguns casos pode que não seja o que estávamos esperando. Sendo assim,

mesmo que tenhamos liberdade com os tipos, esta mesma liberdade nos faz

estar mais atentos a possíveis desajustes difíceis de detectar ao longo dos

programas. Vejamos o que ocorreria no caso de somar letras e números.

Exemplo:

var parcela1 = 23

var parcela2 = "33"

var soma = parcela1 + parcela2

document.write(soma)

Este script nos mostraria na página o texto 2333, que não se

corresponde com a soma dos dois números, e sim com sua combinação, um

atrás do outro.

Tipos de dados em Javascript

Em nossos scripts vamos manejar variáveis de diversas classes de

informação, como textos ou números. Cada uma destas classes de informação

é o tipo de dados. Javascript distingue entre três tipos de dados e todas as

informações que se podem salvar em variáveis vão estar encaixadas em algum

destes tipos de dados. Vejamos detalhadamente quais são estes três tipos de

dados.

Tipo de dados numérico

Nesta linguagem só existe um tipo de dados numérico, ao contrário do

que ocorre na maioria das linguagens mais conhecidas. Todos os números são

portanto, do tipo numérico, independentemente da precisão que tenham ou se

são números reais ou inteiros. Os números inteiros são números que não têm

vírgula, como 3 ou 339. Os números reais são números fracionários, como 2.69

ou 0.25, que também se podem escrever em nota científica, por exemplo,

2.482e12.

Com Javascript também podemos escrever números em outras bases,

como a hexadecimal. As bases são sistemas de numeração que utilizam mais

ou menos dígitos para escrever os números. Existem três bases com as que

podemos trabalhar:

Base 10, é o sistema que utilizamos habitualmente, o sistema decimal.

Qualquer número, por padrão, se entende que está escrito em base 10.

Base 8, também chamado sistema octal, que utiliza dígitos do 0 ao 7.

Para escrever um número em octal basta simplesmente escrever este número

precedido de um 0, por exemplo 045.

Base 16 ou sistema hexadecimal, é o sistema de numeração que utiliza

16 dígitos, os compreendidos entre o 0 e o 9 e as letras da A à F, para os

dígitos que faltam. Para escrever um número em hexadecimal devemos

escrevê-lo precedido de um zero e um xis, por exemplo, 0x3EF.

Tipo boleano

O tipo boleano, boolean em inglês, serve para salvar ou sim ou um não,

ou com outras palavras, um verdadeiro ou falso. Utiliza-se para realizar

operações lógicas, geralmente para realizar ações se o conteúdo de uma

variável é verdadeiro ou falso.

Se uma variável é verdadeira, então: Executo umas instruções Si no

Executo outras

Os dois valores que podem ter as variáveis boleanas são true ou false.

Exemplo:

minhaBoleana = true

minhaBoleana = false

Tipo de dados cadeia de caracteres

O último tipo de dados é o que serve para salvar um texto. Javascript só

tem um tipo de dados para salvar texto e nele, se podem introduzir qualquer

número de caracteres. Um texto pode estar composto de números, letras e

qualquer outro tipo de caracteres e signos. Os textos se escrevem entre aspas,

duplas ou simples.

Exemplo:

meuTexto = "Miguel vai pescar"

meuTexto = '23%%$ Letras & *--*'

Tudo o que se coloca entre aspas, como nos exemplos anteriores é

tratado como uma cadeia de caracteres independentemente do que

coloquemos no interior das aspas. Por exemplo, em uma variável de texto

podemos salvar números e nesse caso temos que ter em conta que as

variáveis de tipo texto e as numéricas não são a mesma coisa e que enquanto

as de numéricas nos servem para fazer cálculos matemáticos, as de texto não

servem.

Caracteres de escape em cadeias de texto.

Existe uma série de caracteres especiais que servem para expressar em

uma cadeia de texto determinados controles como pode ser uma quebra de

linha ou um tabulador. Estes são os caracteres de escape e se escrevem com

uma nota especial que começa por uma contra-barra (uma barra inclinada ao

contrário da normal '\') e logo se coloca o código do caractere a mostrar.

Um caractere muito comum é a quebra de linha, que se consegue

escrevendo \n. Outro caractere muito habitual é colocar umas aspas, pois se

colocamos umas aspas sem seu caractere especial nos fechariam as aspas

que colocamos para iniciar a cadeia de caracteres. Temos então que introduzir

as aspas com \" ou \' (aspas duplas ou simples). Existem outros caracteres de

escape, que veremos na tabela abaixo mais resumidos, apesar de que também

há que destacar como caractere habitual o que se utiliza para escrever uma

contra-barra, para não confundi-la com o início de um caractere de escape, que

é a dupla contra-barra \\.

Tabela com todos os caracteres de escape

Quebra de linha: \n

Aspas simples: \'

Aspas dupla: \"

Tabulador: \t

Enter: \r

Avance de página: \f

Retroceder espaço: \b

Contra-barra: \\

Operadores Javascript

Ao desenvolver programas em qualquer linguagem se utilizam os

operadores. Estes servem para fazer os cálculos e operações necessárias para

realizar seus objetivos. Um programa que não realiza operações somente se

pode limitar a fazer sempre o mesmo. É o resultado destas operações que faz

com que um programa varie seu comportamento segundo os dados que

obtenha. Existem operações mais simples ou mais complexas, que se podem

realizar com operandos de distintos tipos de dados, como números ou textos,

veremos neste capítulo de maneira detalhada todos estes operadores.

Exemplos de uso de operadores

Antes de começar a numerar os distintos tipos de operadores vamos ver

dois exemplos destes para ajudar a termos uma idéia mais exata do que são.

No primeiro exemplo, vamos realizar uma soma utilizando o operador soma.

Exemplo:

3 + 5

Esta é uma expressão muito básica que não tem muito sentido por si só.

Faz a soma entre os dois operadores número 3 e 5, porém, não serve muito

porque não se faz nada com o resultado. Normalmente combinam-se mais de

um operador para criar expressões mais úteis. A expressão seguinte é uma

combinação entre dois operadores, um realiza uma operação matemática e o

outro serve para salvar o resultado.

Exemplo:

minhaVariavel = 23 * 5

No exemplo anterior, o operador * se utiliza para realizar uma

multiplicação e o operador = se utiliza para atribuir o resultado em uma

variável, de modo que salvamos o valor para seu posterior uso.

Os operadores podem ser classificados segundo o tipo de ações que

realizam. A seguir veremos cada um destes grupos de operadores e

descreveremos a função de cada um.

Operadores aritméticos

São os utilizados para a realização de operações matemáticas simples

como a soma, diferença ou multiplicação. Em javascript são os seguintes:

+ Soma de dois valores

- Diferença de dois valores, também se pode utilizar para mudar o sinal de um

número se o utilizamos com um só operando -23

* Multiplicação de dois valores

/ Divisão de dois valores

% O resto da divisão de dois números (3%2 devolveria 1, o resto de dividir 3

entre 2)

++ Incremento em uma unidade, se utiliza com um só operando

-- Decremento em uma unidade, utilizado com um só operando

Exemplos

preço = 128 //introduzo um 128 na variável preço

unidades = 10 //outra atribuição, logo veremos operadores de atribuição

fatura = preço * unidades //multiplico preço por unidades, obtenho o valor fatura

resto = fatura % 3 //obtenho o resto de dividir a variável fatura por 3

preço++ //incrementa em uma unidade o preço (agora vale 129)

Operadores de atribuição

Servem para atribuir valores às variáveis, já utilizamos em exemplos

anteriores o operador de atribuição =, mas existem outros operadores deste

tipo, que provém da linguagem C e que muitos dos leitores já conhecerão.

= Atribuição. Atribui a parte da direita do igual à parte da esquerda. À direita se

colocam os valores finais e à esquerda geralmente se coloca uma variável

onde queremos salvar o dado.

+= Atribuição com soma. Realiza a soma da parte da direita com a da esquerda

e salva o resultado na parte da esquerda.

-= Atribuição com diferença

*= Atribuição da multiplicação

/= Atribuição da divisão

%= Se obtém o resto e se atribui

Exemplos

poupança = 7000 //atribui um 7000 à variável poupança

poupança += 3500 //incrementa em 3500 a variável poupança, agora vale

10500

poupança /= 2 //divide entre 2 minha poupança, agora ficam 5250

Operadores de cadeias

As cadeias de caracteres, ou variáveis de texto, também têm seus

próprios operadores para realizar ações típicas sobre cadeias. Apesar do

javascript ter somente um operador para cadeias se podem realizar outras

ações com uma série de funções pré-definidas na linguagem que veremos

mais adiante.

+ Concilia duas cadeias, pega a segunda cadeia a seguir da primeira.

Exemplo

cadeia1 = "ola"

cadeia2 = "mundo"

cadeiaConciliada = cadeia1 + cadeia2 //cadeia conciliada vale "olamundo"

Um detalhe importante que pode ser visto neste caso, é que o operador +

serve para dois usos distintos, se seus operandos são números, os soma, mas

se se trata de cadeias, as concilia. Isto ocorre em geral com todos os

operadores que se repetem na linguagem, javascript é suficientemente esperto

para entender que tipo de operação realizar mediante uma comprovação dos

tipos que estão implicados nela.

Um caso que seria confuso é o uso do operador + quando se realiza a

operação com operadores texto e numéricos misturados. Neste caso javascript

assume que se deseja realizar uma conciliação e trata aos dois operandos

como se tratasse de cadeias de caracteres, inclusive se a cadeia de texto que

temos for um número. Isto veremos mais facilmente com o seguinte exemplo.

meuNumero = 23

minhaCadeia1 = "pedro"

minhaCadeia2 = "456"

resultado1 = meuNumero + minhaCadena1 //resultado1 vale "23pedro"

resultado2 = meuNumero + minhaCadeia2 //resultado2 vale "23456"

minhaCadeia2 += meuNumero //minhaCadena2 agora vale "45623"

Como podemos ver, também no caso do operador +=, se estamos tratando

com cadeias de texto e números misturados, tratará aos dois operadores como

se fossem cadeias.

Operadores lógicos

Estes operadores servem para realizar operações lógicas, que são aquelas que

dão como resultado um verdadeiro ou um falso, e se utilizam para tomar

decisões em nossos scripts. Ao invés de trabalhar com números, para realizar

este tipo de operações se utilizam operandos boleanos, que conhecemos

anteriormente, que são o verdadeiro (true) e o falso (false). Os operadores

lógicos relacionam os operandos boleanos para dar como resultado outro

operando boleano, tal como podemos ver no seguinte exemplo.

Se tenho fome e tenho comida, então irei comer

Nosso programa javascript utilizaria neste exemplo um operando boleano para

tomar uma decisão. Primeiro irá ver se tenho fome, se é certo (true) irá ver se

disponho de comida. Se são os dois são certos, poderá comer. No caso de que

não tenha comida ou de que não tenha fome não comeria, assim como se não

tenho fome nem comida. O operando em questão é o operando Y, que valerá

verdadeiro (true) no caso de que os dois operandos sejam verdadeiros.

! Operador NO ou negação. Se é true passa a false e vice-versa.

&& Operador Y, se são os dois verdadeiros vale verdadeiro.

|| Operador O, vale verdadeiro se pelo menos um deles for verdadeiro.

Exemplo

meuBoleano = true

meuBoleano = !meuBoleano //meuBoleano agora vale false

tenhofome = true

tenhoComida = true

comoComida = tenhoFome && tenhoComida

Operadores condicionais

Servem para realizar expressões condicionais mais complexas que

desejarmos. Estas expressões se utilizam para tomar decisões em função da

comparação de vários elementos, por exemplo, se um número é maior que

outro ou se são iguais. Os operadores condicionais se utilizam nas expressões

condicionais para tomar decisões. Como estas expressões condicionais serão

objeto de estudo mais adiante será melhor descrever os operadores

condicionais mais adiante. De qualquer forma, aqui podemos ver a tabela de

operadores condicionais.

== Comprova se dois números são iguais

!= Comprova se dois números são distintos

> Maior que, devolve true se o primeiro operador for maior que o segundo

< Menor que, é true quando o elemento da esquerda for menor que o da direita

> = Maior igual.

< = Menor igual

Operadores Javascript III

Vemos o último tipo de operador, a nível de bit, e a precedência de operadores

(quais se executam antes e depois).

Por Miguel Angel Alvarez - Tradução de JML

Publicado em: 17/10/04

Valorize este artigo:

Operadores a nível de bit

Estes são muito pouco correntes e é possível que você nunca chegue a utilizá-

los. Seu uso se realiza para efetuar operações com zeros e uns. Tudo o que

maneja um computador são zeros e uns, a pesar de nós usarmos números e

letras para nossas variáveis na verdade estes valores estão escritos

internamente em forma de zeros e uns. Em alguns casos, poderemos

necessitar realizar operações tratando as variáveis como zeros e uns, e para

isso, utilizaremos estes operandos. Nesta manual se tornaria um pouco

extenso demais se realizássemos uma discussão sobre este tipo de

operadores, mas aqui você poderá ver estes operadores por acaso algum dia

fizer falta.

& Y de bits

^ Xor de bits

| O de bits

<< >> >>> >>>= >>= <<= Várias classes de mudanças

Precedência dos operadores

A avaliação de uma sentença das que vimos nos exemplos anteriores é

bastante simples e fácil de interpretar, mas quando em uma sentença entram

em jogo uma infinidade de operadores diferentes pode haver uma confusão na

hora de interpretá-la e avaliar quais operadores são os que se executam antes

que outros. Para marcar umas pautas na avaliação das sentenças e que estas

se executem sempre igual e com sentido comum existe a precedência de

operadores, que não é mais que a ordem pela qual se irão executando as

operações que eles representam. À princípio todos os operadores se avaliam

da esquerda para a direita, mas existem umas normas adicionais, pelas quais

http://www.criarweb.com/contato/contacta.php?destinatario=3

http://www.criarweb.com/artigos/209.php


determinados operadores se avaliam antes que outros. Muitas destas regras de

precedência foram tiradas das matemáticas e são comuns a outras linguagens,

podemos vê-las a seguir.

() [] . Parêntesis, colchetes e o operador ponto que serve para os objetos

! - ++ -- negação, negativo e incrementos

* / % Multiplicação, divisão e módulo

+- Soma e diferença

<< >> >>> Mudanças a nível de bit

< <= > >= Operadores condicionais

== != Operadores condicionais de igualdade e desigualdade

& ^ | Lógicos a nível de bit

&& || Lógicos boleanos

= += -= *= /= %= <<= >>= >>>= &= ^= != Atribuição

Nos seguintes exemplos podemos ver como as expressões poderiam chegar a

ser confusas, mas com a tabela de precedência de operadores poderemos

entender sem erros qual é a ordem pela qual se executam.

12 * 3 + 4 - 8 / 2 % 3

Neste caso, primeiro se executam os operadores * / y %, da esquerda a direita,

com o qual se realizariam estas operações. Primeiro a multiplicação e logo a

divisão por estar mais à esquerda do módulo.

36 + 4 - 4 % 3

Agora o módulo.

36 + 4 - 1

Por último as somas e as diferenças da esquerda para direita.

40 - 1

39

De qualquer forma, é importante se dar conta que o uso dos parênteses pode

nos economizar muitos quebra-cabeças e, sobretudo, a necessidade de

sabermos de memória a tabela de precedência dos operadores. Quando

virmos pouco claro a ordem com a qual se executarão as sentenças podemos

utilizá-las e assim, forçar que se avalie antes o pedaço da expressão que se

encontra dentro dos parênteses.


Controle de tipos

É importante conhecermos o tipo das variáveis para trabalhar sem erros.

Veremos como obtê-lo com Javascript.




Vimos para determinados operadores que é importante o tipo de dados que

estão manejando, visto que se os dados são de um tipo irão realizar operações

distintas que se são de outro.

Assim, quando utilizávamos o operador +, se se tratava de números, os

somava, mas se se tratava de cadeias de caracteres, os conciliava. Vemos

então, que o tipo dos dados que estamos utilizando sim que importa e que

teremos que estar pendentes a este detalhe se quisermos que nossas

operações se realizem tal como esperávamos.

Para comprovar o tipo de um dado se pode utilizar outro operador que está

disponível a partir de javascript 1.1, o operador typeof, que devolve uma cadeia

de texto que descreve o tipo do operador que estamos comprovando.

var boleano = true

var numerico = 22

var numerico_flutuante = 13.56

var texto = "meu texto"

var data = new Date()

document.write("<br>O tipo de boleano é: " + typeof boleano)

document.write("<br>O tipo de numerico é: " + typeof numerico)

document.write("<br>O tipo de numerico_flutuante é: " + typeof

numerico_flutuante)

document.write("<br>O tipo de texto é: " + typeof texto)

document.write("<br>O tipo de data é: " + typeof data)

Este script dará como resultado o seguinte:

O tipo de boleano é: boolean

O tipo de numerico é: number

O tipo de numerico_flutuante é: number

O tipo de texto é: string


O tipo de data é: object

Neste exemplo podemos ver que se imprime na página os distintos tipos das

variáveis. Estes podem ser os seguintes:

boolean, para os dados boleanos. (True ou false)

number, para os numéricos.

string, para as cadeias de caracteres.

object, para os objetos.

Queremos destacar apenas mais dois detalhes:

1) Os números, já tendo ou não parte decimal, são sempre do tipo de dados

numéricos.

2) Uma das variáveis é um pouco mais complexa, é a variável data que é um

objeto da classe Date(), que se utiliza para o manejo de datas nos scripts. Mais

adiante a veremos, assim como os objetos.

Estruturas de controle

Introdução às estruturas de controle. Numeramos as que temos disponíveis em

Javascript.




Os scripts vistos até agora foram tremendamente simples e lineares: iam-se

executando as sentenças simples uma atrás da outra desde o princípio até o

fim. Entretanto, isto não tem porque ser sempre assim, nos programas

geralmente necessitaremos fazer coisas distintas, dependendo do estado de

nossas variáveis realizar um mesmo processo muitas vezes sem escrever a

mesma linha de código uma e outra vez.

Para realizar coisas mais complexas em nossos scripts se utilizam as

estruturas de controle. Utilizando-as podemos realizar tomadas de decisões e

loops. Nos seguintes capítulos vamos conhecer as distintas estruturas de

controle que existem em Javascript.




Tomada de decisões

Servem para realizar umas ações ou outras em função do estado das variáveis.

Ou seja, tomar decisões para executar umas instruções ou outras dependendo

do que esteja ocorrendo neste instante em nossos programas.

Por exemplo, dependendo se o usuário que entra em nossa página for maior

de idade ou não, podemos lhe permitir ou não ver os conteúdos de nossa

página.

Se idade é maior que 18 então:

Deixo-lhe ver o conteúdo para adultos

Se não

Mando-lhe fora da página

Em javascript podemos tomar decisões utilizando dois enunciados distintos.

IF

SWITCH

Loops

Os loops se utilizam para realizar certas ações repetidamente. São muito

utilizados em todos os níveis na programação. Com um loop podemos por

exemplo, imprimir em uma página os números de 1 ao 100 sem a necessidade

de escrever cem vezes a instrução a imprimir.

Desde o 1 até o 100

Imprimir o número atual

Em javascript existem vários tipos de loops, cada um está indicado para um

tipo de repetição distinto e são os seguintes:

FOR

WHILE

DO WHILE

Como já assinalamos as estruturas de controle são muito importantes em

Javascript e em qualquer linguagem de programação. É por isso que nos

seguintes capítulos veremos cada uma destas estruturas detalhadamente,

descrevendo seu uso e oferecendo alguns exemplos.


Estrutura IF

Vemos como trabalhar com a estrutura de controle IF em Javascript.




IF é uma estrutura de controle utilizada para tomar decisões. É uma condicional

que realiza umas ou outras operações em função de uma expressão. Funciona

da seguinte maneira, primeiro se avalia uma expressão se o resultado dá

positivo realizam-se as ações relacionadas com o caso positivo.

A sintaxe da estrutura IF é a seguinte:

if (expressão) {

ações a realizar em caso positivo

...

}

Opcionalmente se podem indicar ações a realizar no caso de que a avaliação

da sentença dê resultados negativos.

if (expressão) {

ações a realizar em caso positivo

...

} else {

ações a realizar em caso negativo

...

}

Observemos várias coisas: Para começar vemos como com umas chaves

englobam as ações que queremos realizar no caso de que se cumpram ou não

as expressões. Estas chaves devem ser colocadas sempre, exceto no caso de

que somente haja uma instrução como ações a realizar, que são opcionais.

Outro detalhe que está descarado é a margem que colocamos em cada um dos

blocos de instruções para executar nos casos positivos e negativos. Esta

margem é totalmente opcional, somente fizemos assim para que a estrutura IF

se compreenda de uma maneira mais visual. As quebras de linhas também não

são necessárias e foram assim colocadas para que se veja melhor a estrutura.

Poderíamos perfeitamente colocar toda a instrução IF na mesma linha de

código, mas isso não ajudará que as coisas estejam claras. Nós, e qualquer




programador, aconselhamos que utilizem as margens e as quebras de linhas

necessárias para que as instruções possam ser entendidas melhor, hoje e

dentro de um mês, quando já não será tão fácil lembrar o que foi feitos em seus

scripts.

Vejamos um exemplo de condicionais IF.

if (dia == "Segunda-feira")

document.write ("Que tenha um ótimo começo de semana")

Se for segunda-feira nos desejará uma ótima semana. Não fará nada em caso

contrário. Como neste exemplo somente indicamos uma instrução para o caso

positivo, não será preciso utilizar as chaves. Observe também no operador

condicional que consta de dois signos "igual".

Vamos ver agora outro exemplo, um pouco mais comprido.

if (credito >= preço) {

document.write("comprou o artigo " + novoArtigo) //mostro compra

carrinho += novoArtigo //coloco o artigo no carrinho da compra

credito -= preço //diminuo o crédito conforme o preço do artigo

} else {

document.write("acabou o seu crédito") //informo que lhe falta dinhero

window.location = "carrinhodacompra.html" //vou à página do carrinho

}

Este exemplo é um pouco mais complexo, e também um pouco fictício. O que

faço é comprovar se tenho crédito para realizar uma suposta compra. Para

isso, vejo se o crédito é maior ou igual que o preço do artigo, se é assim,

informa da compra, coloco o artigo no carrinho e subtraio o preço ao crédito

acumulado. Se o preço do artigo é superior ao dinheiro disponível, informo a

situação e mando ao navegador à página onde se mostra seu carrinho da

compra.

Expressões condicionais

A expressão a avaliar se coloca sempre entre parêntesis e está composta por

variáveis que se combinam entre si mediante operadores condicionais.

Lembramos que os operadores condicionais relacionavam duas variáveis e

devolviam sempre um resultado boleano. Por exemplo, um operador

condicional é o operador "é igual" (==), que devolve true no caso de que os

operandos sejam iguais ou false no caso de que sejam distintos.

if (idade > 18)



document.write("pode ver esta página para adultos")

Neste exemplo, utilizamos em operador condicional "é maior" (>). Neste caso,

devolve true se a variável idade é maior que 18, com o que se executaria a

linha seguinte que nos informa de que se pode ver o conteúdo para adultos.

As expressões condicionais podem ser combinadas com as expressões lógicas

para criar expressões mais complexas. Lembramos que as expressões lógicas

são as que têm como operandos aos boleanos e que devolvem outro valor

boleano. São os operadores de negação lógica, E lógico e O lógico.

if (bateria == 0 && redeEletrica = 0)

document.write("seu laptop vai se apagar em segundos")

O que fazemos é comprovar se a bateria de nosso suposto computador está a

zero (acabada) e também comprovamos se o computador não tem rede elétrica

(se está fora da tomada). Logo, o operador lógico os relaciona com um E, de

modo que se está sem bateria E sem rede elétrica, informo que o ordenador vai

se apagar.

A lista de operadores que se podem utilizar com as estruturas IF, podem ser

vistos no capítulo de operadores condicionais e operadores lógicos.

Estrutura IF (parte II)

Vemos mais coisas sobre a estrutura IF: a aninhamento de IFs e o operador ?,

um IF simples.




Sentenças IF aninhadas

Para fazer estruturas condicionais mais complexas podemos aninhar sentenças

IF, ou seja, colocar estruturas IF dentro de outras estruturas IF. Com um só IF

podemos avaliar e realizar uma ação ou outra segundo duas possibilidades,

mas se temos mais possibilidades que avaliar devemos aninhar Ifs para criar o

fluxo de código necessário para decidir corretamente.



Por exemplo, se desejo comprovar se um número é maior ou igual ao outro,

tenho que avaliar três possibilidades distintas. Primeiro, posso comprovar se os

dois números são iguais, se são, já está resolvido o problema, mas se não são

iguais ainda terei que ver qual dos dois é o maior. Vejamos este exemplo em

código Javascript.

var numero1=23

var numero2=63

if (numero1 == numero2){

document.write("Os dois números são iguais")

}else{

if (numero1 > numero2) {

document.write("O primeiro número é maior que o segundo")

}else{

document.write("O primeiro número é menor que o segundo")

}

}

O fluxo do programa é como comentávamos antes, primeiro se avalia se os

dois números são iguais. No caso positivo se mostra uma mensagem o

informando. No caso contrário, já sabemos que são distintos, mas ainda

devemos averiguar qual dos dois é maior. Para isso, faz-se outra comparação

para saber se o primeiro é maior que o segundo. Se esta comparação dá

resultados positivos mostramos uma mensagem dizendo que o primeiro é

maior que o segundo, em caso contrário indicaremos que o primeiro é menor

que o segundo.

Voltamos a ressaltar que as chaves neste caso são opcionais, pois só se

executa uma sentença para cada caso. Ademais, as quebras de linhas e as

margens são opcionais em todo caso e nos serve somente para ver o código

de uma maneira mais ordenada. Manter o código bem estruturado e escrito de

una maneira compreensível é muito importante, já que nos fará a vida mais

agradável na hora de programar e mais adiante quando tenhamos que revisar

os programas. Neste manual utilizarei uma anotação como a que pode ser vista

nas linhas anteriores, e também será visto adiante, ademais manterei essa

anotação em todo momento. Isto sem lugar á dúvidas fará com que os códigos

com exemplos sejam compreensíveis mais rapidamente, se não fizéssemos

assim, seria um verdadeiro sacrifício lê-los. Esta mesma receita é aplicável aos

códigos que você irá criar e o principal beneficiado será você mesmo e os

companheiros que cheguem a ler seu código.

Operador IF

Existe um operador que ainda não vimos e é uma forma mais esquemática de




realizar alguns IF simples. Provém da linguagem C, onde se escrevem muitas

poucas linhas de código que resulta muito elegante. Este operador é um claro

exemplo de economia de linhas e caracteres ao escrever os scripts. Será visto

rapidamente, pois a única razão pela qual o incluo é para que saiba que existe

e se o encontra em alguma ocasião por aí, você saiba identificá-lo e como

funciona.

Um exemplo de uso de operador IF pode ser visto a seguir:

Variável = (condição) ? valor1 : valor2

Este exemplo não só realiza uma comparação de valores, como também atribui

um valor a uma variável. O que faz é avaliar a condição (colocada entre

parênteses) e se é positiva atribui o valor1 à variável e no caso contrário lhe

atribui o valor 2. Vejamos um exemplo:

momento = (hora_atual < 12) ? "Antes de meio-dia" : "Depois de meio-dia"

Este exemplo olha se a hora atual é maior que 12. Sendo assim, quer dizer que

agora é antes de meio-dia, assim que atribui "Antes de meio-dia" à variável

momento. Se a hora é maior ou igual a 12 é que é depois de meio-dia, com o

que se atribui o texto "Depois de meio-dia" à variável momento.

Estrutura SWITCH

Utilizada para tomar decisões em função de distintos estados das variáveis.




É a outra opção disponível em Javascript para tomar decisões em função de

distintos estados das variáveis. Esta expressão se utiliza quando temos

múltiplas possibilidades como resultado da avaliação de uma sentença.

A estrutura SWITCH se incorporou a partir da versão 1.2 de Javascript

(Netscape 4 e Internet Explorer 4). Sua sintaxe é a seguinte:

switch (expressão) {

case valor1:

Sentenças a executar se a expressão tem como valor a valor1



break

case valor2:


break

case valor3:


break

default:

Sentenças a executar se o valor não é nenhum dos anteriores

}

A expressão se avalia, se vale valor1 se executam as sentenças relacionadas

com esse caso. Se a expressão vale valor2 se executam as instruções

relacionadas com esse valor e assim, sucessivamente, por tantas opções como

desejarmos. Finalmente, para todos os casos não contemplados anteriormente

se executa o caso por padrão.

A palavra break é opcional, mas se não a colocamos a partir de que se

encontre coincidência com um valor se executarão todas as sentenças

relacionadas com este e todas as seguintes. Ou seja, se em nosso esquema

anterior não tivesse nenhuma expressão que valesse valor1, se executariam

sentenças relacionadas com valor1 e também as relacionadas com valor2,

valor3 e default.

Também é opcional a opção default ou opção por padrão.

Vejamos um exemplo de uso desta estrutura. Suponhamos que queremos

indicar que dia da semana é. Se o dia é 1 (segunda-feira) colocamos uma

mensagem indicando, se o dia é 2 (terça) devemos colocar uma mensagem

diferente e assim, sucessivamente para cada dia da semana, menos no 6

(sábado) e 7 (domingo) que queremos mostrar a mensagem "é fim de

semana". Para dias maiores que 7 indicaremos que esse dia não existe.

Switch (dia_da_semana) {

case 1:

document.write("É segunda-feira")

break

case 2:

document.write("É terça-feira")

break

case 3:

document.write("É quarta-feira")

break

case 4:

document.write("É quinta-feira")

break

case 5:

document.write("É sexta-feira ")

break

case 6:

case 7:

document.write("É fim de semana")

break

default:

document.write("Esse dia não existe")

}

O exemplo é relativamente simples, somente pode ter uma pequena

dificuldade, consistente em interpretar o que passa no caso 6 e 7, que

havíamos dito que tínhamos que mostrar a mesma mensagem. No caso 6 na

verdade não indicamos nenhuma instrução, mas como tampouco colocamos

um break se executará a sentença ou sentenças do caso seguinte, que

correspondem com a sentença indicada no caso 7 que é a mensagem que

informa que é fim de semana. Se o caso é 7 simplesmente se indica que é fim

de semana, tal como se pretendia.

Loop FOR

Descrição e exemplos de funcionamento do loop FOR.




O loop FOR se utiliza para repetir mais instruções um determinado número de

vezes. Entre todos os loops, o FOR costuma ser utilizado quando sabemos ao

certo o número de vezes que queremos que seja executada a sentença. A

sintaxe do loop se mostra a seguir:

for (iniciação;condição;atualização) {

sentenças a executar em cada repetição

}

O loop FOR tem três partes incluídas entre os parênteses. A primeira é a


iniciação, que se executa somente ao começar a primeira repetição do loop.

Nesta parte costuma-se colocar a variável que utilizaremos para levar a conta

das vezes que se executa o loop.

A segunda parte é a condição, que se avaliará cada vez que comece a

repetição do loop. Contém uma expressão para comprovar quando se deve

deter o loop, ou melhor dizendo, a condição que se deve cumprir para que

continue a execução do loop.

Por último temos a atualização, que serve para indicar as mudanças que

quisermos executar nas variáveis cada vez que termine a interação do loop,

antes de comprovar se se deve seguir executando.

Depois do for se colocam as sentenças que queremos que se executem em

cada repetição, limitadas entre chaves.

Um exemplo de utilização deste loop pode ser visto a seguir, onde se

imprimirão os números do 0 ao 10.

var i

for (i=0;i<=10;i++) {

document.write(i)

}

Neste caso se inicia a variável i a 0. Como condição para realizar uma

repetição, tem de se cumprir que a variável i seja menor ou igual a 10. Como

atualização se incrementará em 1 a variável i.

Como se pode comprovar, este loop é muito potente, já que em uma só linha

podemos indicar muitas coisas distintas e muito variadas.

Por exemplo, se queremos escrever os número do 1 ao 1.000 de dois em dois,

será escrito o seguinte loop:

for (i=1;i<=1000;i+=2)

document.write(i)

Se observarmos, em cada repetição atualizamos o valor de i incrementando-lhe

em 2 unidades.

Outro detalhe: não utilizamos as chaves englobando as instruções do loop FOR

porque só tem uma sentença e neste caso não é obrigatório, tal como

acontecia com as instruções do IF.


Se quisermos contar decrescentemente do 343 ao 10 utilizaríamos este loop.

for (i=343;i>=10;i--)

document.write(i)

}

Neste caso decrementamos em uma unidade a variável i em cada repetição.

Exemplo

Vamos fazer uma pausa para assimilar o loop for com um exercício que não

implica nenhuma dificuldade se entendemos o funcionamento do loop.

Trata-se de fazer um loop que escreva em uma página web os cabeçalhos

desde

até

com um texto que ponha "Cabeçalho de nível x".

O que desejamos escrever em uma página web mediante Javascript é o

seguinte:

< H1>Cabeçalho de nível 1</H1>

< H2>Cabeçalho de nível 2</H2>

< H3> Cabeçalho de nível 3</H3>




Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em

cada repetição escreveremos o respectivo cabeçalho.

for (i=1;i<=6;i++) {

document.write("<H" + i + ">Cabeçalho de nível " + i + "</H" + i + ">")

}

Loops WHILE e DO WHILE

Descrição e diferentes usos dos dois tipos de loops WHILE com alguns

exemplos.





Vejamos agora os dois tipos de loops WHILE que podemos utilizar em

Javascript e os usos de cada um.

Loop WHILE

Estes loops se utilizam quando queremos repetir um número indefinido de

vezes a execução de umas sentenças, sempre que se cumpra uma condição.

Sim, que é mais simples de compreender que o loop FOR, pois não incorpora

na mesma linha a iniciação das variáveis, sua condição para continuar

executando e sua atualização. Somente se indica, como veremos a seguir, a

condição que tem que se cumprir para que se realize uma repetição.

while (condição){

sentenças a executar

}

Um exemplo de código onde se utiliza este loop pode ser visto a seguir:

var color = ""

while (color != "vermelho")

color = me dá uma cor

}

Este é um exemplo do mais simples do que se pode fazer com um loop while.

O que faz é pedir que o usuário introduza uma cor, mas que não seja a cor

vermelha. Para executar um loop como este primeiro temos que iniciar a

variável que vamos utilizar na condição de repetição do loop. Com a variável

iniciada podemos escrever o loop, que comprovará para executar que a cor da

variável seja diferente de "vermelha". Em cada repetição do loop pede-se uma

nova cor ao usuário para atualizar a variável cor e termina-se a repetição, com

o que retornamos ao princípio do loop, onde temos que voltar a avaliar se o

que há na variável cor é "vermelha" e assim sucessivamente enquanto não

seja introduzido como cor o texto "vermelho". Obviamente, a expressão "me dá

uma cor" não é Javascript, mas como ainda não sabemos como escrever isso

em Javascript, é melhor vê-lo mais adiante.

Loop DO...WHILE




É o último dos loops que há em Javascript. Utiliza-se geralmente quando não

sabemos quantas vezes haverá de se executar o loop, assim como o loop

WHILE, com a diferença de que sabemos ao certo que o loop pelo menos se

executará uma vez.

Este tipo de loop se introduziu em Javascript 1.2, portanto, nem todos os

navegadores o suportam, somente os de versão 4 ou superior. Em qualquer

caso, qualquer código que se queira escrever com DO...WHILE pode ser

escrito também utilizando um loop WHILE, com o qual em navegadores antigos

deverá traduzir o loop DO...WHILE por um loop WHILE.

A sintaxe é a seguinte:

do {

sentenças do loop

} while (condição)

O loop se executa sempre uma vez e ao final se avalia a condição para dizer

se se executa outra vez o loop ou se termina sua execução.

Vejamos o exemplo que escrevemos para um loop WHILE neste outro tipo de

loop:

var color

do {

color = me dá uma cor

} while (color != "vermelho")

Este exemplo funciona exatamente igual que o anterior, exceto que não

tivemos que iniciar a variável cor antes de introduzirmos no loop. Pede uma cor

contanto que a cor introduzida seja diferente de "vermelho".

Exemplo

Vamos ver a seguir um exemplo mais prático sobre como trabalhar com um

loop WHILE. Como é muito difícil fazer exemplos práticos, com o pouco que

sabemos sobre Javascript, vamos adiantar uma instrução que ainda não

conhecemos.

Neste exemplo vamos declarar uma variável e iniciá-la a 0. Logo, iremos

somando a essa variável um número aleatório do 1 ao 100 até somarmos

1.000 ou mais, imprimindo o valor da variável soma depois de cada operação.

Será necessário utilizar o loop WHILE porque não sabemos exatamente o

número de repetições que teremos que realizar.


var soma = 0

while (soma < 1000){

soma += parseInt(Math.random() * 100)

document.write (soma + "<br>")

}

Supomos que no que diz respeito ao loop WHILE não haverá problemas, mas

onde sim que pode haver é na sentença utilizada para tomar um número

aleatório. Entretanto, não é necessário explicar aqui a sentença porque já

temos planejado fazer mais adiante.

Break e Continue

Duas instruções que aumentam o controle sobre os loops. Servem para pará-

los ou para continuar com a seguinte repetição.




De maneira adicional ao uso das distintas estruturas de loop se podem utilizar

duas instruções para

Deter a execução de um loop e sair dele

Deter a repetição atual e voltar ao princípio do loop.

São as instruções break e continue.

Break

Detém-se um loop utilizando a palavra break. Deter um loop significa sair dele

e deixá-lo todo como está para continuar com o fluxo do programa

imediatamente depois do loop.

for (i=0;i<10;i++){

document.write (i)

escribe = diga-me se continuo

if (escribe == "no")

break

}



Este exemplo escreve os números do 0 ao 9 e em cada repetição do loop,

pergunta ao usuário se deseja continuar. Se o usuário diz qualquer coisa

continua, exceto quando diz "não" que então se sai do loop e deixa a conta por

onde havia deixado.

Continue

Serve para voltar ao princípio do bucle em qualquer momento, sem executar as

linhas que haja por debaixo da palavra continue.

var i=0

while (i<7){

incrementar = diga-me se incremento

if (incrementar == "no")

continue

i++

}

Este exemplo, em condições normais contaria até desde i=0 até i=7, mas cada

vez que se executa o loop pergunta ao usuário se deseja incrementar a

variável ou não. Se se introduz "não" se executa a sentença continue, com o

qual se volta ao princípio do loop sem chegar a incrementar em 1 a variável i, já

que se ignoram as sentenças que hajam por debaixo do continue.

Exemplo

Um exemplo mais prático sobre estas instruções pode ser visto a seguir. Trata-

se de um loop FOR planejado para chegar até 1.000, mas que vamos pará-lo

com break quando chegarmos a 333.

for (i=0;i<=1000;i++){

document.write(i + "<br>")

if (i==333)

break;

}

Loops aninhados em Javascript

Explicamos o que é um loop aninhado, como funcionam e para que servem.

Vemos alguns exemplos.






Aninhar um loop consiste colocar esse loop dentro de outro. O aninhamento de

loops é necessário para fazer determinados processamentos um pouco mais

complexos dos que os que vimos nos exemplos anteriores e com certeza que

em sua experiência como programador já deve ter utilizado ou senão, utilizará

em um futuro.

Um loop aninhado tem a estrutura como a que segue abaixo. Vamos explicá-lo

através destas linhas:

for (i=0;i<10;i++){

for (j=0;j<10;j++) {

document.write(i + "-" + j)

}

}

A execução funcionará da seguinte forma. Para começar inicia-se o primeiro

loop, com o que a variável i valerá 0 e a seguir inicia-se o segundo loop, com o

que a variável j valerá também 0. Em cada repetição imprime-se o valor da

variável i, um hífen ("-") e o valor da variável j, como as duas variáveis valem 0,

se imprimirá o texto "0-0" na página web.

O loop que está aninhado (mais para dentro) é o que mais se executa, neste

exemplo, para cada repetição do loop mais externo, o loop aninhado se

executará por completo uma vez, ou seja, fará suas 10 repitições. Na página

web se escreveriam estes valores, na primeira repetição do loop externo e

desde o princípio:

0-0

0-1

0-2

0-3

0-4

0-5

0-6

0-7

0-8

0-9

Para cada repetição do loop externo se executarão as 10 repetições do loop



interno ou aninhado. Vimos a primeira repetição, agora veremos as seguintes

repetições do loop externo. Em cada uma acumula uma unidade na variável i,

com o que sairiam estes valores.

1-0

1-1

1-2

1-3

1-4

1-5

1-6

1-7

1-8

1-9

E logo estes:

2-0

2-1

2-2

2-3

2-4

2-5

2-6

2-7

2-8

2-9

Assim até que terminem os dois loops, que seria quando se alcançasse o valor

9-9.

Vejamos um exemplo muito parecido ao anterior, embora um pouco mais útil.

Trata-se de imprimir na página todas as tabelas multiplicar. Do 1 ao 9, ou seja,

a tabela do 1, a do 2, do 3...

for (i=1;i<10;i++){

document.write("<br><b>La tabla del " + i + ":</b><br>")

for (j=1;j<10;j++) {

document.write(i + " x " + j + ": ")

document.write(i*j)

document.write("<br>")

}

}

Com o primeiro loop controlamos a tabela atual e com o segundo loop a

desenvolvemos. No primeiro loop escrevemos um título, em negrito, indicando

a tabela que estamos escrevendo, primeiro a do 1 e logo as outras em ordem

crescente até o 9. Com o segundo loop escrevo cada um dos valores de cada

tabela. Pode-se ver o exemplo em funcionamento neste link.

Funções em Javascript

Definimos o conceito de função e aprendemos a criá-las e a chamá-las.




Agora veremos um assunto muito importante, sobretudo para os que nunca

programaram e estão dando seus primeiros passos no mundo da programação

com Javascript, já que veremos um conceito novo, o de função, e os usos que

têm. Para os que já conhecem o conceito de função também será um capítulo

útil, pois também veremos a sintaxe e o funcionamento das funções em

Javascript.

O que é uma função

Na hora de fazer um programa levemente grande existem determinados

processos que se podem conceber de forma independente, e que são mais

simples de resolver que o problema inteiro. Ademais, estes costumam ser

realizados repetidas vezes ao longo da execução do programa. Estes

processos podem se agrupar em uma função, definida para que não tenhamos

que repetir uma vez ou outra esse código em nossos scripts, e sim,

simplesmente chamamos a função, e ela se encarrega de fazer tudo o que

deve.

Portanto, podemos ver uma função como uma série de instruções que

englobamos dentro de um mesmo processo. Este processo poderá logo ser

executado desde qualquer outro site somente ao ser chamado. Por exemplo,

em uma página web pode haver uma função para mudar a cor de fundo e de

qualquer ponto da página poderíamos chamá-la para que nos mude a cor

quando desejarmos.

As funções utilizam-se constantemente, não só as que você escreve como

também as que já estão definidas no sistema, pois todas as linguagens de


http://www.criarweb.com/artigos/exemplos/javascript/tabelamultiplicar.html




programação têm um montão de funções para realizar processos habituais

como, por exemplo, obter a hora, imprimir uma mensagem na tela ou converter

variáveis de um tipo a outro. Já vimos alguma função em nossos simples

exemplos anteriores quando fazíamos um document.write() na verdade

estávamos chamando à função write() associada ao documento da página que

escreve um texto na página. Nos capítulos de funções vamos ver primeiro

como realizar nossas próprias funções e como chamá-las logo. Ao longo do

livro veremos muitas das funções definidas em Javascript que devemos utilizar

para realizar distintos tipos de ações habituais.

Como se escreve uma função

Uma função deve-se definir com uma sintaxe especial que vamos conhecer a

seguir:

function nomefuncao (){

instruções da função

...

}

Primeiro escreve-se a palavra função, reservada para este uso. Seguidamente

se escreve o nome da função, que como os nomes de variáveis podem ter

números, letras e algum caractere adicional como um hífen abaixo. A seguir se

colocam entre chaves as diferentes instruções da função. As chaves no caso

das funções não são opcionais, ademais é útil colocá-las sempre como se vê

no exemplo, para que seja visto facilmente a estrutura de instruções que

engloba a função.

Vejamos um exemplo de função para escrever na página uma mensagem de

boas vindas dentro de etiquetas <H1> para que fique mais ressaltado.

function escreverBoasvindas(){

document.write("<H1>Olá a todos</H1>")

}

Simplesmente escreve na página um texto, é uma função tão simples que o

exemplo não expressa suficientemente o conceito de função, mais já veremos

outras mais complexas. As etiquetas H1 não se escrevem na página, e sim são

interpretadas como o significado da mesma, neste caso que escrevemos uma

cabeçalho de nível 1. Como estamos escrevendo em uma página web, ao

colocar etiquetas HTML se interpretam como o que são.

Como chamar a uma função



Quando se chamam às funções: Para executar uma função temos que chamá-

la em qualquer parte da página, com isso conseguiremos que se executem

todas as instruções que tem a função entre as duas chaves. Para executar a

função utilizamos seu nome seguido dos parênteses.

NomeDaFuncao()

Onde colocamos as funções

Vemos a maneira de inserir as funções Javascript de cliente dentro das

páginas web.




À princípio, podemos colocar as funções em qualquer parte da página, é claro

que sempre entre etiquetas <SCRIPT>. Não obstante, existe uma limitação na

hora de colocá-la em relação aos lugares de onde for chamada. O mais normal

é colocar a função antes de qualquer chamada à mesma e assim, certamente

não iremos nos enganar.

Teoricamente, a função deve-se definir no bloco <SCRIPT> onde esteja a

chamada à função, embora seja indiferente se a chamada se encontrar antes

ou depois da função, dentro do mesmo bloco <SCRIPT>.

< SCRIPT>

minhaFuncao()

function minhaFuncao(){

//faço algo...

document.write("Isto está bem")

}

< /SCRIPT>

Este exemplo funciona corretamente porque a função está declarada no

mesmo bloco que sua chamada.

Também é válido que a função se encontre em um bloco <SCRIPT> anterior ao

bloco onde está a chamada.

<HTML>




< HEAD>

<TITLE>MINHA PÁGINA</TITLE>

< SCRIPT>


//faço algo...


}

< /SCRIPT>

< /HEAD>

< BODY>

< SCRIPT>

minhaFuncao()

< /SCRIPT>

< /BODY>

< /HTML>

Vemos um código completo sobre como poderia ser uma página web onde as

funções estão no cabeçalho. Um lugar muito bom para colocá-las, porque se

supõem que no cabeçalho ainda não vão utilizar e sempre poderemos desfrutar

deles no corpo porque certamente já foram declarados.

Este último em compensação seria um erro:

O que será um erro é uma chamada a uma função que se encontra declarada

em um bloco <SCRIPT> posterior.

< SCRIPT>

minhaFuncao()

< /SCRIPT>

< SCRIPT>


//faço algo...


}

< /SCRIPT>

Parâmetros das funções

Vemos o que são os parâmetros em chamadas à funções e como utilizá-los.






As estruturas que vimos anteriormente sobre funções não são as únicas que

devemos aprender para manejá-las em toda a sua potência. As funções

também têm uma entrada e uma saída, que se podem utilizar para receber e

devolver dados.

Parâmetros

Os parâmetros se usam para mandar valores à função, com os quais ela

trabalhará para realizar as ações. São os valores de entrada que recebem uma

função. Por exemplo, uma função que realizasse uma soma de dois números

teria como parâmetros a esses dois números. Os dois números são a entrada,

assim como a saída seria o resultado, mais isso será visto mais tarde.

Vejamos um exemplo anterior no qual criávamos uma função para mostrar uma

mensagem de boas vindas à página web, mas que agora passaremos um

parâmetro que vai conter o nome da pessoa a qual se vai saudar.

function escreverBoasvindas(nome){

document.write("<H1>Ola " + nome + "</H1>")

}

Como podemos ver no exemplo, para definir na função um parâmetro temos

que por o nome da variável que vai armazenar o dado que passarmos. Essa

variável, que neste caso se chama nome, terá como valor o dado que

passarmos a esta função quando a chamarmos, alé disso, a variável terá vida

durante a execução da função e deixará de existir quando a função terminar

sua execução.

Para chamar a uma função que tem parâmetros coloca-se entre parêntesis o

valor do parâmetro. Para chamar à função do exemplo haveria que escrever:

escreverBoasvindas("Alberto Garcia")

Ao chamar à função assim, o parâmetro nome toma como valor "Alberto

Garcia" e ao escrever a saudação na tela escreverá "Olá Alberto Garcia" entre

etiquetas <H1>.

Os parâmetros podem escrever qualquer tipo de dados, numérico, textual,



boleano ou um objeto. Realmente não especificamos o tipo do parâmetro, por

isso devemos ter um cuidado especial ao definir as ações que realizamos

dentro da função e ao passar valores à função para assegurarmos que tudo é

conseqüente com os tipos de nossas variáveis ou parâmetros.

Múltiplos parâmetros

Uma função pode receber tantos parâmetros quanto quisermos e para

expressá-lo colocam-se os parâmetros separados por vírgulas dentro dos

parênteses. Vejamos rapidamente a sintaxe para que a função de antes receba

dois parâmetros, primeiro, o nome a quem saudar e segundo, a cor do texto.

function escreverBoasvindas(nome,corTexto){

document.write("<FONT color=" + corTexto + ">)

document.write("<H1>Olá " + nome + "</H1>")

document.write("</FONT>")

}

Chamaríamos à função com esta sintaxe. Entre parênteses colocaremos os

valores dos parâmetros.

var meuNome = "Pedro"

var minhaCor = "red"

escreverBoasvindas(meuNome,minhaCor)

Coloquei entre parênteses, duas variáveis no lugar de dois textos entre aspas.

Quando colocamos variáveis entre os parâmetros na verdade o que estamos

passando à função são os valores que contém as variáveis e não as mesmas

variáveis.

Parâmetros passam-se por valor

Para seguir a linha do uso de parâmetros em nossos programas Javascript,

temos que indicar que os parâmetros das funções se passam por valor. Isto

quer dizer que mesmo que modifiquemos um parâmetro em uma função a

variável original que havíamos passado não mudará seu valor. Pode-se ver

facilmente com um exemplo.

function passoPorValor(meuParametro){

meuParametro = 32

document.write("mudei o valor a 32")

}

var minhaVariavel = 5

passoPorValor(minhaVariavel)



document.write ("o valor da variavel e: " + minhaVariavel)

No exemplo, temos uma função que recebe um parâmetro, e que modifica o

valor do parâmetro atribuindo-lhe o valor 32. Também temos uma variável, que

iniciamos a 5 e posteriormente chamamos à função passando esta variável

como parâmetro. Como dentro da função modificamos o valor do parâmetro

poderia acontecer da variável original mudasse de valor, mas como os

parâmetros não modificam o valor original das variáveis, esta não muda de

valor. Deste modo, ao imprimir na tela o valor de minhaVariavel se imprimirá o

número 5, que é o valor original da variável, no lugar de 32 que era o valor col

o que havíamos atualizado o parâmetro.

Em javascript somente se podem passar as variáveis por valor.

Valores de retorno

Veremos como as funções podem devolver valores. Também veremos um

apontamento sobre o âmbito de variáveis em funções em Javascript.




As funções também podem retornar valores, de modo que ao executar a

função poderá se realizar ações e dar um valor como saída. Por exemplo, uma

função que calcula o quadrado de um número terá como entrada -tal como

vimos- a esse número e como saída terá o valor resultante de encontrar o

quadrado desse número. Uma função que devolva o dia da semana teria como

saída em dia da semana.

Vejamos un exemplo de função que calcula a média de dois números. A função

receberá os dois números e retornará o valor da média.

function media(valor1,valor2){

var resultado

resultado = (valor1 + valor2) / 2

return resultado

}

Para especificar o valor que retornará a função se utiliza a palavra return

seguida do valor que se deseja devolver. Neste caso se devolve o conteúdo da


variável resultado, que contém a média dos dois números.

Para receber os valores que devolve uma função se coloca o operador de

atribuição =. Para ilustrar isto, pode-se ver este exemplo, que chamará à

função média() e salvará o resultado da média em uma variável para logo,

imprimi-la na página.

var minhaMedia

minhaMedia = media(12,8)

document.write (minhaMedia)

Múltiplos return

Em uma mesma função podemos colocar mais de um return. Logicamente só

vamos poder retornar uma coisa, mas dependendo do que tenha acontecido na

função poderá ser de um tipo ou de outro, com uns dados ou outros.

Nesta função podemos ver um exemplo de utilização de múltiplos return. Trata-

se de uma função que devolve um 0 se o parâmetro recebido era par e o valor

do parâmetro se este era ímpar.

function multiploReturn(numero){

var resto = numero % 2

if (resto == 0)

return 0

else

return numero

}

Para averiguar se um número é par encontramos o resto da divisão ao dividi-lo

entre 2. Se o resto é zero é porque era par e devolvemos um 0, em caso

contrário -o número é ímpar- devolvemos o parâmetro recebido.

Âmbito das variáveis em funções

Dentro das funções podemos declarar variáveis, inclusive os parâmetros são

como variáveis que se declaram no cabeçalho da função e que se iniciam ao

chamar a função. Todas as variáveis declaradas em uma função são locais a

essa função, ou seja, somente terão validade durante a execução da função.

Podemos declarar variáveis em funções que tenham o mesmo nome que uma

variável global à página. Então, dentro da função a variável que terá validade é

a variável local e fora da função terá validade a variável global à página.

Em troca, se não declaramos as variáveis nas funções se entenderá por

javascript que estamos fazendo referência a uma variável global à página, de

modo que se não está criada, a variável a cria, mas sempre global à página no

lugar de local à função.

Arrays em Javascript

Vemos o que são os arrays, para que servem e como utilizá-los.




Nas linguagens de programação existem estruturas de dados especiais que

nos servem para salvar informações mais complexas do que simples variáveis.

Uma estrutura típica em todas as linguagens é o Array, que é como uma

variável onde podemos introduzir vários valores, ao invés de somente um como

ocorre com as variáveis normais.

Os arrays nos permitem salvar várias variáveis e acessá-las de maneira

independente, é como ter uma variável com distintos compartimentos onde

podemos introduzir dados distintos. Para isso utilizamos um índice que nos

permite especificar o compartimento ou posição ao qual estamos nos referindo.

Os arrays foram introduzidos em versões Javascript 1.1 ou superiores, ou seja,

somente podemos utilizá-los a partir dos navegadores 3.0. Para navegadores

antigos se pode simular o array utilizando sintaxe de programação orientada a

objetos, mas dada a complexidade desta tarefa, pelo menos no momento em

que nos encontramos e as poucas ocasiões que os deveremos utilizar, vamos

ver como utilizar o autêntico array de Javascript.

Criação de Arrays

O primeiro passo para utilizar um array é criá-lo. Para isso utilizamos um objeto

Javascript já implementado no navegador. Veremos adiante um tema para

explicar o que é a orientação a objetos, embora não será necessário para

poder entender o uso dos arrays. Esta é a sentença para criar um objeto array:

var meuArray = new Array()

Isto cria um array na página que está se executando. O array se cria sem



nenhum conteúdo, ou seja, não terá nenhum campo ou compartimento criado.

Também podemos criar o array especificando o número de compartimentos

que vai ter.

var meuArray = new Array(10)

Neste caso indicamos que o array vai ter 10 posições, ou seja, 10 campos

onde salvar dados.

É importante observarmos que a palavra Array em código Javascript se

escreve com a primeira letra em maiúscula. Como em Javascript as maiúsculas

e minúsculas sim que importam, se escrevemos em minúscula não funcionará.

Podemos introduzir no array qualquer dado, tanto se indicamos ou não o

número de campos do array. Se o campo está criado se introduz simplesmente

e se o campo não estava ccriado se cria e logo, se introduz o dado, com o qual

o resultado final será o mesmo. Esta criação de campos é dinâmica e se

produz ao mesmo tempo, que os scripts se executam. Vejamos a seguir como

introduzir valores em nossos arrays.

meuArray[0] = 290

meuArray[1] = 97

meuArray[2] = 127

Introduzem-se indicando entre colchetes o índice da posição onde queríamos

salvar o dado. Neste caso introduzimos 290 na posição 0, 97 na posição 1 e

127 na 2. Os arrays começam sempre na posição 0, portanto, um array que

tenha por exemplo 10 posições, terá campos do 0 ao 9. Para recolher dados de

um array fazemos da mesma forma: colocando entre colchetes o índice da

posição a qual queremos acessar. Vejamos como se imprimiria na tela o

conteúdo de um array.


meuArray[0] = 155

meuArray[1] = 4

meuArray[2] = 499

for (i=0;i<3;i++){

document.write("Posição " + i + " do array: " + meuArray[i])


}

Criamos um array com três posições, logo introduzimos um valor em cada uma



das posições do array e finalmente imprimimos. Em geral, o percurso por

arrays para imprimir suas posições ou qualquer outra coisa se faz utilizando

loops. Neste caso utilizamos um loop FOR que vai desde o 0 até o 2.

Podemos ver o exemplo em funcionamento em outra página.

Tipos de dados nos arrays

Nos campos dos arrays podemos salvar dados de qualquer tipo. Podemos ver

um array onde introduzimos dados de tipo caractere.

meuArray[0] = "Ola"

meuArray[1] = "a"

meuArray[2] = "todos"

Inclusive, em Javascript podemos salvar distintos tipos de dados nos campos

de um mesmo array. Ou seja, podemos introduzir números em uns campos,

textos em outros, boleanos ou qualquer outra coisa que desejarmos.

meuArray[0] = "criarweb.com"

meuArray[1] = 1275

meuArray[1] = 0.78

meuArray[2] = true

Longitude dos Arrays

Aprendemos mais coisas sobre o funcionamento dos arrays e sua propriedade

length.




Todos os arrays em javascript, além de armazenar o valor de cada uma de

suas posições também armazenam o número de posições que têm. Para isso,

utilizam uma propriedade do objeto array, a propriedade length. Já veremos o

que é uma propriedade em objetos, mas para nosso caso podemos imaginar

que é como uma variável, adicional às posições, que armazena um número

igual ao número de campos do array.

Para acessar a uma propriedade de um objeto há que utilizar o operador ponto.

http://www.criarweb.com/artigos/exemplos/javascript/ex_array.html



Escreve-se o nome do array que queremos acessar ao número de posições

que tem, sem colchetes nem parênteses, seguido de um ponto e a palavra

length.

var meuArray = new Array()

meuArray[0] = 155

meuArray[1] = 499

meuArray[2] = 65

document.write("Longitude do array: " + meuArray.length)

Este código imprimiria na tela o número de posições do array, que neste caso é

3. Recordamos que um array com 3 posições abarca desde a posição 0 a 2.

É muito habitual que se utilize a propriedade length para poder percorrer um

array por todas suas posições. Para ilustrá-lo vamos ver um exemplo de

percurso por este array para mostrar seus valores.

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

document.write(meuArray[i])

}

Há que observar que o loop for se executa sempre que i valer menos que a

longitude do array, extraída de sua propriedade length.

O seguinte exemplo nos servirá para conhecer melhor os percursos pelos

arrays, o funcionamento da propriedade length e a criação dinâmica de novas

posições. Vamos criar um array com 2 posições e preencher seu valor.

Posteriormente, introduziremos um valor na posição 5 do array. Finalmente,

imprimiremos todas as posições do array para ver o que acontece.


meuArray[0] = "Colômbia"

meuArray[1] = "Estados Unidos"

meuArray[5] = "Brasil"

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

document.write("Posição " + i + " do array: " + meuArray[i])


}


O exemplo é simples. Pode-se apreciar que fazemos um percurso pelo array

desde 0 até o número de posições do array (indicado pela propriedade length).

No percurso vamos imprimindo o número da posição seguido do conteúdo do

array nesta posição. Mas podemos ter uma dúvida ao perguntarmos qual será

o número de elementos deste array, já que o havíamos declarado com 2 e logo

lhe introduzimos um terceiro na posição 5. Ao ver a saída do programa

poderemos contestar nossas perguntas. Será algo parecido a isto:

Posição 0 do array: Colômbia

Posição 1 do array: Estados Unidos

Posição 2 do array: null



Posição 5 do array: Brasil

Pode-se ver claramente que o número de posições é 6, da 0 a 5. O que

ocorreu é que ao introduzir um dado na posição 5, todas os campos que não

estavam criados até o quinto se criaram também.

As posições da 2 a 4 estão sem iniciar. Neste caso nosso navegador escreveu

a palavra null para expressar isto, mas outros navegadores poderão utilizar a

palavra undefined. Veremos mais adiante qual é este null e onde o podemos

utilizar, o importante agora é compreender como trabalham os arrays e utiliza-

los corretamente.

Arrays multidimensionais

Vemos o que são os arrays multidimensionais e como utilizá-los. Ademais

explicamos como iniciar arrays em sua declaração.




Os arrays multidimensionais são estruturas de dados que armazenam os

valores em mais de uma dimensão. Os arrays que vimos até agora armazenam

valores em uma dimensão, por isso para acessar às posições utilizamos

somente um índice. Os arrays de 2 dimensões salvam seus valores de alguma

forma como em filas e colunas e por isso, necessitaremos dois índices para

acessar a cada uma de suas posições.




Com outras palavras, um array multidimensional é como um contêiner que

guardará mais valores para cada posição, ou seja, como se os elementos do

array fossem por sua vez outros arrays.

Em Javascript não existe um autêntico objeto array-multidimensinal. Para

utilizar estas estruturas poderemos definir arrays onde, em cada uma de suas

posições haverá outro array. Em nossos programas poderemos utilizar arrays

de qualquer dimensão, veremos a seguir como trabalhar com de duas

dimensões, que serão os mais comuns.

Neste exemplo vamos criar um array de duas dimensões onde teremos por um

lado cidades e por outro a temperatura média que faz em cada uma durante os

meses de inverno.

var temperaturas_medias_cidade0 = new Array(3)

temperaturas_medias_cidade0[0] = 12



var temperaturas_medias_cidade1 = new Array (3)




var temperaturas_medias_cidade2 = new Array (3)




Com as anteriores linhas criamos três arrays de 1 dimensão e três elementos,

como os que já conhecíamos. Agora criaremos um novo array de três

elementos e introduziremos dentro de cada um de seus campos os arrays

criados anteriormente, com o qual teremos um array de arrays, ou seja, um

array de 2 dimensões.

var temperaturas_cidades = new Array (3)

temperaturas_cidades[0] = temperaturas_medias_cidade0



Vemos que para introduzir o array inteiro fazemos referência ao mesmo sem

parênteses nem colchetes, simplesmente com seu nome. O array

temperaturas_cidades é nosso array bidimensinal.


Também é interessante ver como se realiza um percurso por um array de duas

dimensões. Para iso temos que fazer um percorrido por cada um dos campos

do array bidimensional e dentro destes fazer um novo percorrido para cada um

de seus campos internos. Ou seja, um percorrido por um array dentro de outro.

O método para fazerum percorrido dentro de outro é colocar um loop dentro de

outro, o que se chma de loop aninhado. Pode ser complicado fazer um loop

aninhado, mas nós já tivemos a oportunidade de praticar em um capítulo

anterior. Portanto, neste exemplo vamos colocar um loop FOR dentro de outro.

Ademais, vamos escrever os resultados em uma tabela, o que complicará um

pouco o script, mas poderemos ver como construir uma tabela de javascript, à

medida que realizarmos o percurso aninhado ao loop.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>");

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

document.write("<tr>")

document.write("<td><b>Cidade " + i + "</b></td>")

for (j=0;j<temperaturas_cidades[i].length;j++){

document.write("<td>" + temperaturas_cidades[i][j] + "</td>")

}

document.write("</tr>")

}

document.write("</table>")

Este script é um pouco mais complexo do que os que vimos anteriormente. A

primeira ação consiste em escrever o cabeçalho da tabela, ou seja, a etiqueta

<TABLE> junto com seus atributos. Com o primeiro loop realizamos um

percorrido à primeira dimensão do array e utilizamos a variável i para levar a

conta da posição atual. Por cada iteração deste loop escrevemos uma fila e

para começar a fila abrimos a etiqueta <TR>. Ademais, escrevemos em um

campo o número da cidade que estamos percorrendo nesse momento.

Posteriormente, colocamos outro loop que vai percorrendo cada um dos

campos do array em sua segunda dimensão e escrevemos a temperatura da

cidade atual em cada um dos meses, dentro de sua etiqueta <TD>. Uma vez

que acaba o segundo loop se imprimiram as três temperaturas e, portanto, a

fila está terminada. O primeiro loop continua se repetindo até que todas as

cidades estão impressas e uma vez terminado fechamos a tabela.

Podemos ver o exemplo em funcionamento e examinar o código do script

inteiro.

Iniciação de arrays

http://www.criarweb.com/artigos/228.php?manual=9


http://www.criarweb.com/artigos/exemplos/javascript/arraymultidimensional.html


Para terminar com o tema dos arrays vamos ver uma maneira de iniciar seus

valores ao mesmo tempo que o declaramos, assim podemos realizar de uma

forma mais rápida o processo de introduzir valores em cada uma das posições

do array.

Vimos que o método normal de criar um array era através do objeto Array,

colocando entre parênteses o número de campos do array ou não colocando

nada, de modo que o array se crie sem nenhuma posição. Para introduzir

valores a um array se faz igualmente, porém colocando entre parênteses os

valores com os que desejamos preencher os campos separados por vírgula.

Vejamos com um exemplo que cria um array com os nomes dos dias da

semana.

var diasSemana = new

Array("Segunda","Terça","Quarta,","Quinta","Sexta","Sábado","Domingo")

O array se cria com 7 campos, do 0 ao 6 e em cada campo se escreve o dia da

semana correspondente (Entre aspas porque é um texto).

Agora vamos ver algo mais complicado, trata-se de declarar o array

bidimensional que utilizamos antes para as temperaturas das cidades nos

meses em uma só linha, introduzindo os valores de uma só vez.

var temperaturas_cidades = new Array(new Array (12,10,11), new

Array(5,0,2),new Array(10,8,10))

No exemplo introduzimos em cada campo do array outro array que tem como

valores as temperaturas de uma cidade em cada mês.

Pausa e conselhos Javascript

Fazemos uma pausa no manual de Javascript para oferecer uma série de

conselhos úteis.




Até aqui vimos a maior parte da sintaxe e da forma de funcionar da linguagem

Javascript. Agora podemos escrever scripts simples que façam uso de

variáveis, funções, arrays, estruturas de controle e toda classe de operadores.



Com tudo isto, conhecemos a linguagem, mas ainda temos muito chão pela

frente para dominar Javascript e saber fazer todos os efeitos possíveis em

páginas web, que definitivamente é o que nos interessa.

De qualquer forma, este manual foi feito com muita calma, com a intenção de

que as pessoas que não estejam familiarizadas com o mundo da programação

possam também ter acesso à linguagem e aprendam as técnicas básicas que

permitirão afrontar futuros retos na programação. Esperamos então que o

andamento deste manual tenha sido proveitoso para os mais inexperientes e

que agora possam entender com facilidade as seguintes lições ou exemplos, já

que conhecem as bases sobre as que estão implementados.

Antes de acabar, vamos dar uma série de conselhos a seguir na hora de

programar nossos scripts que nos possam ajudar a tornar a vida mais fácil.

Alguns conselhos são novos e importantes, outros foram assinalados

anteriormente, mas sem dúvida não custa nada relembrar.

Distintos navegadores

A primeira coisa importante para assinalar é que Javascript é uma linguagem

muito dinâmica e que foi implementada pouco a pouco, à medida que saiam

novos navegadores. Se pensarmos no Netscape 2, o primeiro navegador que

incluía Javascript, e o Netscape 6 ou Internet Explorer 6 daremos conta que já

se passaram um mundo de novidades entre eles. Javascript mudou pelo

menos tanto como os navegadores e isso, representa um problema para os

programadores, porque têm que estar a par das distintas versões e a maneira

de funcionar que têm.

As bases de javascript, sobre as que falamos até agora, nã mudaram

praticamente nada. Somente em algumas ocasiões, que assinalamos segundo

as conhecíamos -como os arrays, por exemplo - a linguagem evoluiu um

pouco. Entretanto, à medida que novas tecnologias, como o DHTML, se

desenvolveram, os navegadores variaram sua maneira de maneja-las.

Nosso conselho é que estejam a par das coisas que funcionam em uns e

outros sistemas e que programem para que suas páginas sejam compatíveis

com o maior número de navegadores. Para buscar este último é muito

aconselhável provar as páginas em várias plataformas distintas. Também é

muito útil deixar de lado os últimos avances, ou seja, não ir à última novidade, e

sim ser um pouco conservadores, para que as pessoas que atualizaram menos

o browser possam também visualizar os conteúdos.

Conselhos para fazer um código simples e fácil de manter

Agora vamos dar uma série de conselhos para o código de nossos scripts seja

mais claro e livre de erros. Muitos deles já assinalamos, e somos livres de

aplicá-los ou não, mas se fazemos nossa tarefa como programadores pode ser




muito mais agradável, na só hoje, como também o dia em que tenhamos que

revisar os scripts em suas manutenções.

Utilize comentários habitualmente para que o que estiver sendo feito nos

scripts possa ser recordado por você e qualquer pessoa que tenha que lê-los

mais adiante.

Tenha cuidado com o âmbito das variáveis, lembre-se que existem variáveis

globais e locais, que inclusive podem ter os mesmos nomes e conheça em

cada momento a variável que tem validade.

Escreva um código suficientemente claro, que se consegue com quebras de

linhas depois de cada instrução, uma margem adequada (colocar margens a

cada linha para indicar em que bloco estão incluídas), utilizar as chaves {}

sempre, embora não sejam obrigatórias e em geral, manter sempre o mesmo

estilo na hora de programar.

Aplique um pouco de consistência ao manejo de variável. Declare as variáveis

com var. Não mude o tipo do dado que contem (se era numérico não coloque

logo texto, por exemplo). Dê nomes compreensíveis para saber em todo

momento o que contém. Inclusive na hora de dar os nomes você pode aplicar

uma norma, que se trata de que indiquem em seus nomes o tipo de dado que

contém. Por exemplo, as variáveis de texto podem começar por uma s (de

String), as variáveis numéricas podem começar por uma n ou as booleanas por

uma b.

Prove seus scripts aos poucos à medida que for programando. Você pode

escrever um pedaço de código e provar antes de continuar para ver que tudo

funciona corretamente. É mais fácil encontrar os erros de código em blocos

pequenos do que em blocos grandes.

Tratamento de erros em Javascript

Vamos explicar os erros comuns que podemos cometer e como evitá-los e

depurá-los. Ademais veremos uma pequena conclusão da primeira parte do

manual.





Para acabar a primeira parte do manual de javascript vamos explicar os erros

comuns que podemos cometer e como evita-los e depura-los. Ademais

veremos uma pequena conclusão da primeira parte do manual.

Erros comuns

Quando executamos os scripts podem ocorrer dois tipos de erros de sintaxe ou

de execução, os vemos a seguir.

Erros de sintaxe ocorrem por escrever de maneira errônea as linhas de código,

equivocar-se na hora de escrever o nome de uma estrutura, utilizar

incorretamente as chaves ou os parênteses ou qualquer coisa similar.

Javascript indica estes erros à medida que está carregando os scripts em

memória, o que faz sempre antes de executa-loa, como foi indicado nos

primeiros capítulos. Quando o analizador sintático de javascript detecta um erro

destes se apresenta a mensagem de erro.

Erros de execução ocorrem quando estão se executando os scripts. Por

exemplo, podem ocorrer quando chamamos a uma função que não foi definida.

Javascript não indica estes erros até que não se realize a chamada à função.

A maneira que têm javascript de mostrar um erro pode variar de um navegador

a outro. Em versões antigas mostrava-se uma janelinha com o erro e um botão

de aceitar, tanto em Internet Explorer como em Netscape. Atualmente, os erros

de javascript permanecem um pouco mais ocultos ao usuário. Isto é bom,

porque se nossas páginas têm algum erro em alguma plataforma não será

muito incômodo para o usuário que em muitas ocasiões não perceberá.

Entretanto, para o programador pode ser um pouco mais incômodo de revisar e

se necessitará conhecer a maneira que se mostram os erros para que possam

ser consertados.

Em versões de Internet Explorer maiores que a 4 mostra-se o erro na barra de

estado do navegador e pode-se ver uma descrição maior do erro se clicamos

duas vezes no ícone de alerta amarelo que aparece na barra de estado. Em

Netscape aparece também uma mensagem na barra de estado que ademais

nos indica que para mostrar mais informação devemos teclar "javascript:" na

barra de endereços (onde escrevemos as URL para acessar às páginas). Com

isso conseguimos que apareça a Consola javascript, que nos mostra todos os

erros que se encontram nas páginas.

Também podemos cometer falhas na programação que façam com que os

scripts não funcionem tal e como desejávamos e que javascript não detecta

como erros e portanto, não mostra nenhuma mensagem de erro.




Para deixar claro, veremos um exemplo no qual nosso programa pode não

funcionar como desejamos sem que javascript ofereça nenhuma mensagem de

erro. Neste exemplo, trataríamos de somar duas cifras, mas se uma das

variáveis é do tipo texto poderíamos encontrar com um erro.

var numero1 = 23

var numero2 = "42"

var soma = numero1 + numero2

Quanto vale a variável soma? Como muitos já sabem, a variável soma vale

"2342" porque ao tentar somar uma variável numérica e outra textual, tratam-se

as duas como se fossem do tipo texto e portanto, o operador + se aplica como

uma concatenação de cadeias de caracteres. Se não estamos ao par desta

questão poderíamos ter um erro em nosso script já que o resultado não é o

esperado e ademais o tipo da variável que se soma não é numérico e sim, uma

cadeia de caracteres.

Evitar erros comuns

Vamos ver agora uma lista dos erros típicos cometidos por inexperientes na

programação em geral e em javascript em particular, e também, por não tão

inexperientes.

Utilizar = em expressões condicionais no lugar de == é um erro difícil de

detectar quando se comete, se utilizamos um só igual o que estamos fazendo é

uma atribuição e não uma comparação para ver se dois valores são iguais.

Não conhecer a procedência de operadores e não utilizar parênteses para

agrupar as operações que se deseja realizar. Neste caso nossas operações

podem dar resultados não desejados.

Usar aspas duplas e simples erroneamente. Lembre-se que podem se utilizar

aspas duplas ou simples indistintamente, com a seguinte norma: dentro de

aspas duplas devem se utilizar aspas simples e vice-versa.

Esquecer de fechar chave ou fechar uma chave a mais.

Colocar várias sentenças na mesma linha sem separá-las de ponto e vírgula.

Isto costuma acontecer nos manipuladores de eventos, como onclick, que

veremos mais adiante.

Utilizar uma variável antes de iniciá-la ou não declarar as variáveis com var

antes de utiliza-las também são erros comuns. Lembre-se que se não a

declaras poderá estar fazendo referência a uma variável global no lugar de


uma local.

Contar as posições dos arrays a partir de 1. Lembre-se que os arrays começam

pela posição 0.

Depurar erros javascript

Qualquer programa é suscetível de conter erros. Javascript nos informará de

muitos dos erros da página: os que têm relação com a sintaxe e os que têm

lugar no momento da execução dos scripts a causa de equivocarmos ao

escrever o nome de uma função ou de uma variável. Entretanto, não são os

únicos erros que podemos encontrar, também estão os erros que ocorrem sem

que javascript mostre a correspondente mensagem de erro, como vimos

anteriormente, mas que fazem com que os programas não funcionem como

esperávamos.

Para todo tipo de erro, uns mais fáceis de detectar que outros, devemos utilizar

alguma técnica de depuração que nos ajude a encontra-los. Linguagens de

programação mais potentes que a que tratamos agora incluem importantes

ferramentas de depuração, porém em javascript devemos nos contentar com

uma rudimentar técnica. Trata-se de utilizar uma função pré-definida, a função

alert() que recebe entre parênteses um texto e o mostra em uma pequena

janela que tem um botão de aceitar.

Com a função alert() podemos mostrar em qualquer momento o conteúdo das

variáveis que estamos utilizando em nossos scripts. Para isso colocamos entre

parênteses a variável que desejamos ver seu conteúdo. Quando se mostra o

conteúdo da variável o navegador espera que apertemos o botão de aceitar e

quando o fazemos continua com as seguintes instruções do script.

Este é um simples exemplo sobre como se pode utilizar a função alert() para

mostrar o conteúdo das variáveis.

var n_atual = 0

var soma = 0

while (soma<300){

n_atual ++

soma += soma + n_atual

alert("n_atual vale " + n_atual + " e soma vale " + soma)

}

Com a função alert() se mostra o conteúdo das duas variáveis que utilizamos

no script. Algo similar a isto é o que teremos que fazer para mostrar o conteúdo

das variáveis e saber como estão funcionando nossos scripts, se vai tudo bem

ou se há algum erro.

Conclusão

Até aqui conhecemos a sintaxe javascript em profundidade. Embora ainda

faltam coisas importantes de sintaxe, a visão que se pode ter da linguagem

será suficiente para enfrentar os problemas mais fundamentais. Mais adiante

apresentaremos outras reportagens para aprender a utilizar os recursos com os

quais contamos na hora de fazer efeitos em páginas web.

Veremos a hierarquia de objetos do navegador, como construir nossos próprios

objetos, as funções pré-definidas de javascript, características do HTML

Dinâmico, trabalho com formulários e outras coisas importantes para dominar

todas as possibilidades da linguagem.

Introdução ao manual II de Javascript

Começamos o segundo manual de Javascript com um repasso aos temas que

vamos abordar.




Nesta segunda parte do manual de Javascript vamos tratar de explicar todos os

recursos com os que conta um programador de Javascript e com os que pode

criar todo tipo de efeitos e aplicações.

Para ler e entender bem o que vem nos seguintes capítulos é necessário ter

lido antes a primeira parte deste manual: Programação em Javascript I, onde

se explicam as bases sobre as que temos que assentar os seguintes

conhecimentos. Na primeira parte deste manual conhecemos a origem e as

aplicações de Javascript, mas, sobretudo ressaltamos sua sintaxe que é muito

importante para entender os scripts que faremos nos seguintes capítulos.

Os objetivos dos seguintes capítulos cobrirão aspectos diversos de Javascript

como:

Funções incorporadas na linguagem Javascript

Os objetos em Javascript

Hierarquia de objetos do navegador


http://www.criarweb.com/javascript2/



http://www.criarweb.com/javascript/


Trabalho com formulários

Controle de janelas secundárias e frames

Eventos

Como se pode ver, todos os temas têm um forte caráter prático e cobrem

vários aspectos com os quais formamos a nível avançado em Javascript.

Esperamos que sirvam para iluminar uma área tão ampla do desenvolvimento

de páginas web como é o scripting do lado do cliente.

Vamos sem mais pausa com esta segunda parte do manual, que será muito

mais interessante e prática que a primeira.

Biblioteca de funções Javascript

Javascript, assim como qualquer outra linguagem, coloca a nossa disposição

um conjunto de funções.




Em todas as linguagens de programação existem bibliotecas de funções que

servem para fazer diversas coisas e muito competitiva na hora de programar.

As bibliotecas das linguagens de programação economizam a tarefa de

escrever as funções comuns que em geral os programadores podem

necessitar. Uma linguagem de programação bem desenvolvida terá uma boa

quantidade delas. Em algumas ocasiões é mais complicado conhecer todas as

bibliotecas do que aprender a programar a linguagem.

Javascript contem uma boa quantidade de funções em suas bibliotecas. Como

se trata de uma linguagem que trabalha com objetos, muitas das bibliotecas se

implementam através de objetos. Por exemplo, as funções matemáticas ou as

de manejo de strings se implementam mediante os objetos Math e String.

Entretanto, existem algumas funções que não estão associadas a nenhum

objeto e são as que veremos neste capítulo, já que ainda não conhecemos os

objetos e não os necessitaremos para estuda-las.

Estas são as funções que Javascript coloca à disposição dos programadores.

eval(string)

Esta função recebe uma cadeia de caracteres e a executa como se fosse uma

sentença de Javascript.







parseInt(cadeia,base)

Recebe uma cadeia e uma base. Devolve um valor numérico resultante de

converter a cadeia em um número na base indicada.

parseFloat(cadeia)

Converte a cadeia em um número e o devolve.

escape(caractere)

Devolve um caractere que recebe por parâmetro em uma codificação ISO Latin

1.

unescape(caractere)

Faz exatamente o oposto da função escape.

isNaN(número)

Devolve um booleano dependendo do que recebe por parâmetro. Se não é um

número devolve um true, se é um número devolve false.

As bibliotecas que se implementam mediante objetos e as do manejo do

explorador, que também se manejam com objetos, serão vistas mais adiante.

Vamos ver algum exemplo com as funções mais importantes desta lista.

Exemplos das funções da biblioteca Javascript

Vemos vários exemplos de funções da biblioteca: eval(), parseInt(), isNaN()...




Agora podemos ver vários exemplos de utilização de funções da biblioteca que

proporciona Javascript.

Função eval

Esta função é muito importante, tanto que existem algumas aplicações de

Javascript que não poderiam se realizar se não a utilizamos. A utilização desta

função é muito simples, mas pode ser que seja mais complexo entender em

que caso utiliza-la porque às vezes é um pouco sutil sua aplicação.

Com os conhecimentos atuais não podemos dar um exemplo muito

complicado, mas pelo menos podemos ver em funcionamento a função. Vamos


utilizá-la em uma sentença um pouco rara e que não serve muito, mas se

conseguimos entendê-la, conseguiremos entender também a função eval.

var meuTexto = "3 + 5"

eval("document.write(" + meuTexto +")")

Primeiro, criamos uma variável com um texto, na seguinte linha utilizamos a

função eval e como parâmetro lhe passamos uma instrução javascript para

escrever na tela. Se concatenamos os strings que existem dentro dos

parênteses da função eval ficaria asim.

document.write(3 + 5)

A função eval executa a instrução que for passada por parâmetro, portanto

executará esta sentença, o que dará como resultado que se escreva um 8 na

página web. Primeiro se resolve a soma que há entre parênteses, com o qual

obtemos o 8 e logo se executa a instrução de escrever na tela.

Função parseInt

Esta função recebe um número, escrito como uma cadeia de caracteres, e um

número que indica uma base. Na verdade pode receber outros tipos de

variáveis, dado que as variáveis não têm tipo em Javascript, mas costuma-se

utilizar passando um string para converter a variável de texto em um número.

As distintas bases que pode receber a função são 2, 8, 10 e 16. Se não

passamos nenhum valor como base a função interpreta que a base é decimal.

O valor que devolve a função sempre tem base 10, de modo que se a base não

é 10 converte o número a essa base antes de devolvê-lo.

Vejamos uma série de chamadas à função parseInt para ver o que devolve e

entender um pouco mais a função.

document.write (parseInt("34"))

Devolve o número 34

document.write (parseInt("101011",2))


document.write (parseInt("34",8))


document.write (parseInt("3F",16))


Esta função se utiliza na prática para um monte de coisas distintas no manejo

com números, por exemplo, obter a parte inteira de um decimal.



document.write (parseInt("3.38"))

Devolve o número 3

Também é muito habitual seu uso para saber se uma variável é numérica, pois

se passamos um texto à função que não seja numérico nos devolverá NaN

(Not a Number) o que quer dizer que Não é um Número.

document.write (parseInt("criarweb.com"))

Devolve o número NaN

Este mesmo exemplo é interessante com uma modificação, pois se passamos

uma combinação de letras e números, daria o seguinte.

document.write (parseInt("16XX3U"))


document.write (parseInt("TG45"))

Devolve o número NaN

Como se pode ver, a função tenta converter o string em número e senão pode,

devolve NaN.

Todos estes exemplos, meio desconexos, sobre como trabalha parseInt serão

revisados mais adiante em exemplos mais práticos quando tratarmos o

trabalho com formulários.

Função isNaN

Esta função devolve um booleano dependendo se o que se recebe é um

número ou não. O único que pode receber é um número ou a expressão NaN.

Se recebe um NaN devolve true e se recebe um número devolve false. É uma

função muito simples de entender e de utilizar.

A função costuma trabalhar em combinação com a função parseInt ou

parseFloat, para saber se o que devolvem estas duas funções é um número ou

não.

meuInteger = parseInt("A3.6")

isNaN(meuInteger)

Na primeira linha atribuímos a variável meuInteger o resultado de tentar

converter a inteiro o texto A3.6. Como este texto não se pode converter a

número, a função parseInt devolve NaN. A segunda linha comprova se a

variável anterior é NaN e sendo assim devolve um true.

meuFloat = parseFloat("4.7")

isNaN(meuFloat)


Neste exemplo convertemos um texto a número com decimais. O texto se

converte perfeitamente porque corresponde com um número. Ao receber um

número a função isNaN devolve um false.

Objetos em Javascript Vemos uma primeira introdução ao mundo dos objetos em geral e em particular na linguagem Javascript.




Vamos entrar em um tema muito importante de Javascript como são os

objetos. É um tema que ainda não vimos e sobre o qual adiante vamos tratá-lo

constantemente, pois todas as coisas em Javascript, inclusive as mais simples,

vamos realizar através do manejo de objetos. De fato, nos exemplos realizados

até agora fizemos um grande esforço para não utilizar objetos e ainda assim, o

utilizamos em alguma ocasião, pois é muito difícil encontrar exemplos em

Javascript que, embora sendo simples, não façam uso deles.

A programação orientada a objetos representa uma nova maneira de pensar na

hora de fazer um programa. Javascript não é uma linguagem de programação

orientada a objetos, embora os utiliza em muitas ocasiões: podemos criar

novos objetos e utilizar muitos que estão criados desde um princípio.

Entretanto, a maneira de programar não vai mudar muito e o que vimos até

aqui relativo à sintaxe, funções, etc., pode ser utilizado da mesma forma que foi

indicado. Somente vamos aprender uma espécie de estrutura nova.

Para começar a aprofundarmos na programação orientada a objetos é

imprescindível que se leia um pequeno artigo publicado em CriarWeb sobre

este tema. Depois de sua leitura você pode continuar com estas linhas e se já

conhece a programação orientada a objetos continue lendo sem pausa.

Como instanciar objetos

Instanciar um objeto é a ação de criar um exemplar de uma classe para poder

trabalhar com ele logo. Lembramos que um objeto se cria a partir de uma

classe e a classe é a definição das características e funcionalidades de um

objeto. Com as classes não se trabalha, estas somente são definições, para

trabalhar com uma classe devemos ter um objeto instanciado dessa classe.

Em javascript para criar um objeto a partir de uma classe se utiliza a instrução





new, desta maneira.

var meuObjeto = new minhaClasse()

Em uma variável que chamamos meuObjeto atribuo um novo (new) exemplar

da classe minhaClase. Os parênteses se preenchem com os dados que a

classe necessita para iniciar o objeto, se não há que colocar nenhum

parâmetro, coloca-se os parênteses vazios. N a verdade o que se faz quando

se cria um objeto é chamar ao construtor dessa classe e o construtor é o

encarregado de cria-lo e e inicia-lo. Falaremos sobre isso mais adiante.

Como acessar às propriedades e métodos dos objetos

Em Javascript podemos acessar às propriedades e aos métodos de objetos de

forma similar a como se faz em outras linguagens de programação, com o

operador ponto (".").

As propriedades se acessam colocando o nome do objeto seguido de um ponto

e o nome da propriedade que se deseja acessar. Desta maneira:

meuObjeto.minhaPropriedade

Para chamar aos métodos utilizamos uma sintaxe similar, mas colocando ao

final entre parênteses os parâmetros que passamos aos métodos. Do seguinte

modo:

meuObjeto.meuMetodo(parametro1,parametro2)

Se o método não recebe parâmetros colocamos os parênteses também, mas

sem nada dentro.

meuObjeto.meuMetodo()

Objetos incorporados em Javascript Lista dos objetos que temos a nossa disposição na hora de trabalhar com

Javascript.







Sabendo já o que é a programação orientada a objetos vamos introduzir o manejo de objetos em Javascript e para isso vamos começar com o estudo das classes pré-definidas que implementam as livrarias para o trabalho com strings, matemáticas, datas etc. As classes que vamos ver a seguir são as seguintes:

String, para o trabalho com cadeias de caracteres. Date, para o trabalho com datas. Math, para realizar funções matemáticas. Number, para realizar algumas coisas com números Boolean, trabalho com booleanos.

Nota: As classes se escrevem com a primeira letra em maiúsculas.

Tem que ficar claro que uma classe é uma espécie de “declaração de

características e funcionalidades" dos objetos. Com outras palavras, as

classes são descrições da forma e do funcionamento dos objetos. Com

as classes geralmente não se realiza nenhum trabalho, mas sim com

os objetos, que criamos a partir das classes.

Uma vez compreendida a diferença entre objetos e classes, cabe assinalar que String é uma classe, o mesmo que Date. Se quisermos

trabalhar com cadeias de caracteres ou datas necessitamos criar objetos das classes String e Date respectivamente. Como sabemos,

Javascript é uma linguagem sensível às letras maiúsculas e minúsculas, e neste caso, as classes, por convenção, sempre se

escrevem com a primeira letra em maiúscula e também a primeira letra das palavras seguintes, se é que o nome da classe está

composto por várias palavras. Por exemplo, se tivéssemos a classe de "Alunos universitarios" se escreveria com a -A- de alunos e a -U- de universitarios em maiúsculo. AlunosUniversitarios seria o nome de

nossa suposta classe.

Há outros que pertencem a este mesmo conjunto, os enumeramos aqui para que fique a constância deles, porém não os abordaremos nos capítulos seguintes.

Array, já vimos em capítulos correspondentes ao primeiro manual de Javascript.

Também a classe Function, foi vista parcialmente ao estudar as funções.

Existe outra classe RegExp que serve para construir padrões que veremos talvez junto com Function quando tratarmos de temas ainda mais avançados.

Nota: Uso de maiúsculas e minúsculas. Já que paramos

anteriormente para falar sobre o uso de maiúsculas em certas letras

dos nomes das classes, vamos terminar de explicar a convenção que

se realiza em Javascript para nomear os elementos.








Para começar, qualquer variável costuma-se escrever em minúsculas,

embora se este nome de variável se compõe de várias palavras,

costuma-se escrever em maiúscula a primeira letra das seguintes

palavras. Isto se faz em qualquer tipo de variável ou nome nos nomes

das classes, onde se escreve também em maiúscula o primeiro

caractere da primeira palavra.

Exemplos:

Number, que é uma classe se escreve com a primeira em maiúscula. RegExp, que é o nome de outra classe composto por duas palavras,

tem a primeira letra das duas palavras em maiúscula. minhaCadeia, que suponhamos que é um objeto da classe String, se

escreve com a primeira letra em minúscula e a primeira letra da segunda palavra em maiúscula.

data, que suponhamos que é um objeto da classe Date, se escreve em minúsculas por ser um objeto.

minhaFunção(), que é uma função definida por nós, costuma-se escrever com minúscula a primeira.

Como dissemos, esta é a norma geral para dar nomes às variáveis, classes, objetos, funções,, etc. em Javascript. Se a seguimos assim, não teremos problemas na hora de saber se um nome em Javascript tem ou não alguma maiúscula e ademais todo nosso trabalho será mais claro e fácil de seguir por outros programadores ou por nós mesmos no caso de retomar um código uma vez passado algum

tempo.

Classe string em Javascript A classe que serve para manejar cadeias de caracteres. Estudamos suas propriedades e a lista completa de métodos.




Em javascript as variáveis de tipo texto são objetos da classe String. Isto quer

dizer que cada uma das variáveis que criamos de tipo texto tem uma série de

propriedades e métodos. Lembramos que as propriedades são as

características, como, por exemplo, longitude em caracteres do string e os

métodos são funcionalidades, como podem ser extrair um substring ou colocar

o texto em maiúsculas.



Para criar um objeto da classe String a única coisa que há que fazer é atribuir

um texto a uma variável. O texto vai entre aspas, como já vimos nos capítulos

de sintaxe. Também se pode criar um objeto string com o operador new, que

veremos mais adiante. A única diferença é que em versões de Javascript 1.0

não funcionará new para criar os Strings.

Propriedades de String

Length

A classe String tem somente uma propriedade: length, que salva o número de

caracteres do String.

Métodos de String

Os objetos da classe String têm uma boa quantidade de métodos para realizar

muitas coisas interessantes. Primeiro, vamos ver uma lista dos métodos mais

interessantes e logo, veremos outra lista de métodos menos úteis.

charAt(índice)

Devolve o caractere que há na posição indicada como índice. As posições de

um string começam em 0.

indexOf(caractere,desde)

Devolve a posição da primeira vez que aparece o caractere indicado por

parâmetro em um string. Se não encontra o caractere no string devolve -1. O

segundo parâmetro é opcional e serve para indicar a partir de que posição se

deseja que comece a busca.

lastIndexOf(caractere,desde)

Busca a posição de um caractere exatamente igual a como faz a função

indexOf, mas desde o final no lugar do princípio. O segundo parâmetro indica o

número de caracteres desde onde se busca, igual que em indexOf.

replace(substring_a_buscar,novoStr)

Implementado em Javascript 1.2, serve para substituir porções do texto de um

string por outro texto, por exemplo, poderíamos utilizá-lo para substituir todas

as aparições do substring "xxx" por "yyy". O método não substitui no string, e

sim, devolve uma resultante de fazer essa substituição. Aceita expressões

regulares como substring a buscar.

split(separador)

Este método só é compatível com javascript 1.1 em diante. Serve para criar um

vetor a partir de um String no que cada elemento é a do String que está


separada pelo separador indicado por parâmetro.

substring(início,fim)

Devolve o substring que começa no caractere de início e termina no caractere

de fim. Se intercambiarmos os parâmetros de início e fim também funciona.

Simplesmente nos dá o substring que há entre o caractere menor e o maior.

toLowerCase()

Coloca todos os caracteres de um string em minúsculas.

toUpperCase()

Coloca todos os caracteres de um string em maiúsculas.

toString()

Este método tem todos os objetos e se usa para convertê-los em cadeias.

Até aqui vimos os métodos que nos ajudará a respeito das cadeias. Agora

vamos ver outros métodos que são menos úteis, mas que há que indicá-los

para que fique a constância de todos. Todos servem para aplicar estilos a um

texto e é como se utilizássemos etiquetas HTML. Vejamos como:

anchor(name)

Converte em uma âncora (lugar a onde encaminhar um link) uma cadeia de

caracteres usando como o atributo name da etiqueta o que recebe por

parâmetro.

big()

Aumenta o tamanho de letra do string. É como se colocássemos em um string

ao princípio a etiqueta <BIG> e ao final </BIG>.

blink()

Para que pisque o texto do string, é como utilizar a etiqueta <BLINK>. Vale

somente para Netscape.

bold()

Como se utilizássemos a etiqueta <B>.

fixed()

Para utilizar uma fonte com um espaçamento único, etiqueta <TT>.

fontColor(color)

Coloca a fonte a essa cor. Como utilizar a etiqueta <FONT

color=a_cor_indicada>.



fontSize(tamanho)

Coloca a fonte no tamanho indicado. Como se utilizássemos a etiqueta

<FONT> com o atributo size.

italics()

Coloca a fonte em cursiva. Etiqueta <I>.

link(url)

Coloca o texto como um link à URL indicada. É como se utilizássemos a

etiqueta <A> com o atributo href indicado como parâmetro.

small()

É como utilizar a etiqueta <SMALL>

strike()

É Como utilizar a etiqueta <STRIKE>, que serve para que o texto apareça

riscado.

sub()

Atualiza o texto como se estivesse utilizando a etiqueta <SUB>, de subíndice.

sup()

É Como se utilizássemos a etiqueta <SUP>, de superíndice.

Exemplos de funcionamento da classe String Realizamos dois scripts em Javascript para ilustrar o funcionamento de alguns métodos e propriedades da classe String.




Agora veremos uns exemplos sobre como se utilizam os métodos e

propriedades do objeto String.

Exemplo de strings 1

Vamos escrever o conteúdo de um string com um caractere separador ("-")

entre cada um dos caracteres do string.

var meuString = "Ola Amigos"

var result = ""



for (i=0;i<meuString.length-1;i++) {

result += meuString.charAt(i)

result += "-"

}

result += meuString.charAt(meuString.length - 1)

document.write(result)

Primeiro, criamos duas variáveis, uma com o string a percorrer e outra com um

string vazio, onde salvaremos o resultado. Logo, fazemos um loop que percorre

desde o primeiro até o penúltimo caractere do string -utilizamos a propriedade

length para conhecer o número de caracteres do string- e em cada iteração

colocamos um caractere do string seguido de um caractere separador "-".

Como ainda nos resta o último caractere para colocar, o colocamos na seguinte

linha depois do loop. Utilizamos a função charAt para acessar as posições do

string. Finalmente, imprimimos na página o resultado.

Podemos ver o exemplo em funcionamento em uma página a parte.


Vamos fazer um script que rompa um string em duas metades e as imprima por

tela. As metades serão iguais, sempre que o string tenha um número de

caracteres par. No caso de que o número de caracteres seja ímpar não poderá

ser feito a metade exata, mas partiremos o string o mais aproximado à metade.

var meuString = "0123456789"

var metade1,metade2

posicao_metade = meuString.length / 2

metade1 = meuString.substring(0,posicao_metade)

metade2 = meuString.substring(posicao_metade,meuString.length)

document.write(metade1 + "<br>" + metade2)

As duas primeiras linhas servem para declarar as variáveis que vamos utilizar e

iniciar o string para partir. Na seguinte linha, encontramos a posição da metade

do string.

Nas seguintes linhas é onde realizamos o trabalho de colocar em uma variável

a primeira metade do string e na outra a segunda. Para isso, utilizamos o

método substring passando como início e fim no primeiro caso desde 0 até a


http://www.criarweb.com/artigos/exemplos/javascript2/string1.html

metade e no segundo desde a metade até o final. Para finalizar imprimimos as

duas metades com uma quebra de linhas entre elas.

Classe Date em Javascript Explicamos a classe que se utiliza em Javascript para o manejo de datas e horas, comentando seus métodos e propriedades.




Sobre este objeto recai todo o trabalho com datas em Javascript, como obter

uma data, o dia, a hora e outras coisas. Para trabalhar com datas

necessitamos instanciar um objeto da classe Date e com ele já podemos

realizar as operações que necessitamos.

Um objeto da classe Date pode ser criado de duas maneiras distintas. Por um

lado podemos criar o objeto com o dia e hora atuais e por outro podemos cria-

lo com um dia e hora distintos aos atuais. Isto depende dos parâmetros que

passemos ao construir os objetos.

Para criar um objeto fecha com o dia e hora atuais, colocamos os parênteses

vazios ao chamar ao construtor da classe Date.

minhaData = new Date()

Para criar um objeto data com um dia e hora diferentes dos atuais temos que

indicar entre parênteses o momento para iniciar o objeto. Existem várias

maneiras de expressar um dia e hora válida, por isso podemos construir uma

data nos guiando por vários esquemas. Estes são dois deles, suficientes para

criar todo tipo de datas e horas.

minhaData = new Date(ano,mês,dia,hora,minutos,segundos)

minhaData = new Date(ano,mês,dia)

Os valores que deve receber o construtor são sempre numéricos. Um detalhe,

o mês começa por 0, ou seja, janeiro é o mês 0. Se não indicamos a hora, o

objeto data se cria com hora 00:00:00.

Os objetos da classe Date não têm propriedades, mas existem um montão de

métodos que têm, vamos vê-los agora.




getDate()

Devolve o dia do mês.

getDay()

Devolve o dia da semana.

getHours()

Retorna a hora.

getMinutes()

Devolve os minutos.

getMonth()

Devolve o mês (atenção ao mês que começa por 0).

getSeconds()

Devolve os segundos.

getTime()

Devolve os segundos transcorridos entre o dia 1 de janeiro de 1970 e a data

correspondente ao objeto ao que se passa a mensagem.

getYear()

Retorna o ano, ao que se restou 1900. Por exemplo, para o 1995 retorna 95,

para o 2005 retorna 105. Este método está obsoleto em Netscape a partir da

versão 1.3 de Javascript e agora se utiliza getFullYear().

getFullYear()

Retorna o ano com todos os dígitos. Usar este método para estar certos de que

funcionará todo bem em datas posteriores ao ano 2000.

setDate()

Atualiza o dia do mês.

setHours()

Atualiza a hora.

setMinutes()

Muda os minutos.

setMonth()

Muda o mês (atenção ao mês que começa por 0).

setSeconds()

Muda os segundos.

setTime()

Atualiza a data completa. Recebe um número de segundos desde 1 de janeiro

de 1970.

setYear()

Muda o ano recebe um número, ao que lhe soma 1900 antes de coloca-lo

como ano da data. Por exemplo, se recebe 95 colocará o ano 1995. Este

método está obsoleto a partir de Javascript 1.3 em Netscape. Agora se utiliza

setFullYear(), indicando o ano com todos os dígitos.

setFullYear()

Muda o ano da data ao número que recebe por parâmetro. O número se indica

completo ex: 2005 ou 1995. Utilizar este método para estar certo de que tudo

funciona para datas posteriores a 2000.

Como foi possível apreciar, há algum método obsoleto por questões relativas

ao ano 2000: setYear() e getYear(). Estes métodos se comportam bem na

Internet Explorer e não nos dará nenhum problema utiliza-los. Entretanto, não

funcionarão corretamente em Netscape, portanto é interessante utilizarmos em

seu lugar os métodos getFullYear() e setFullYear(), que funcionam bem em

Netscape e Internet Explorer.

Exemplo de funcionamento de Date Exercício realizado para ilustrar o funcionamento da classe Date em Javascript.




Neste exemplo vamos criar duas datas, uma com o instante atual e outra com

data do passado. Em seguida, imprimiremos as duas e extrairemos seu ano

para imprimi-lo também. Logo, atualizaremos o ano de uma das datas e

voltaremos a escreve-la com um formato mais legível.

//nestas linhas criamos as datas

minhaDataaAtual = new Date()

minhaDataPassada = new Date(1998,4,23)

//nestas linhas imprimimos as datas.




document.write (minhaDataAtual)

document.write ("<br>")

document.write (minhaDtaPassada)

//extraímos o ano das duas datas

anoAtual = minhaDataAtual.getFullYear()

anoPassado = minhaDataPassada.getFullYear()

//Escrevemos em ano na página

document.write("<br>O ano atual é: " + anoAtual)

document.write("<br>O ano passado é: " + anoPassado)

//mudamos o ano na data atual

minhaDataAtual.setFullYear(2005)

//extraímos o dia, mês e ano

dia = minhaDataAtual.getDate()

mes = parseInt(minhaDataAtual.getMonth()) + 1

ano = minhaDataAtual.getFullYear()

//escrevemos a data em um formato legível


document.write (dia + "/" + mes + "/" + ano)

Há que destacar um detalhe antes de terminar, é que o número do mês pode

começar desde 0. Pelo menos no Netscape com o qual realizamos as provas

começava o mês em 0. Por esta razão somamos um ao mês que devolve o

método getMonth.

Existem mais detalhes para destacar, pois é que no Netscape o método

getFullYear() devolve os anos transcorridos desde 1900, com o qual ao obter o

ano de uma data de, por exemplo, 2005, indica que é o ano 105. Para obter o

ano completo temos a nossa disposição o método getFullYear() que devolveria

2005 da mesma forma que em Netscape e Internet Explorer.

Muita atenção no trabalho com datas em distintas plataformas, visto que

poderia ser problemático o fato de oferecerem distintas saídas aos métodos de

manejo de datas, dependendo sempre da marca e versão de nosso navegador.

Classe Math em Javascript A classe que utilizamos para realizar cálculos matemáticos de todo tipo.







A classe Math proporciona os mecanismos para realizar operações

matemáticas em Javascript. Algumas operações se resolvem rapidamente com

os operadores aritméticos que já conhecemos, como a multiplicação ou soma,

mas existe uma série de operações matemáticas adicionais que têm que se

realizar usando a classe Math como podem ser calcular um seno ou fazer uma

raiz quadrada.

De modo que para qualquer cálculo matemático complexo utilizaremos a classe

Math, com uma particularidade. Até agora, cada vez que quiséssemos fazer

algo com uma classe deveríamos instanciar um objeto dessa classe e trabalhar

com o objeto e no caso da classe Math se trabalha diretamente com a classe.

Isto se permite porque as propriedades e métodos da classe Math são o que se

chama propriedades e métodos de classe e para utiliza-los se opera através da

classe no lugar dos objetos. Com outras palavras, para trabalhar com a classe

Math não deveremos utilizar a instrução new e utilizaremos o nome da classe

para acessar a suas propriedades e métodos.

Propriedades de Math

As propriedades salvam valores que provavelmente necessitaremos em algum

momento se estamos fazendo cálculos matemáticos. É provável que estas

propriedades sejam um pouco raras para as pessoas que desconhecem as

matemáticas avançadas, mas os que as conhecem saberão de sua utilidade.

E

Número E ou constante de Euler, a base dos logaritmos neperianos.

LN2

Logaritmo neperiano de 2.

LN10

Logaritmo neperiano de 10.

LOG2E

Logaritmo em base 2 de E.

LOG10E

Logaritmo em base 10 de E.

PI



Conhecido número para cálculo com círculos.

SQRT1_2

Raiz quadrada de um meio.

SQRT2

Raiz quadrada de 2.

Métodos de Math

Ainda assim, temos uma série de métodos para realizar operações

matemáticas típicas, embora um pouco complexas. Todos os que conheçam as

matemáticas a um bom nível conhecerão o significado destas operações.

abs()

Devolve o valor absoluto de um número. O valor depois de tirar o signo.

acos()

Devolve o arco co-seno de um número em radianos.

asin()

Devolve o arco co-seno de um número em radianos.

atan()

Devolve um arco tangente de um número.

ceil()

Devolve o inteiro igual ou imediatamente seguinte de um número. Por exemplo,

ceil(3) vale 3, ceil(3.4) é 4.

cos()

Retorna o co-seno de um número.

exp()

Retorna o resultado de elevar o número E por um número.

floor()

O contrário de ceil(), pois devolve um número igual ou imediatamente inferior.

log()

Devolve o logaritmo neperiano de um número.

max()

Retorna o maior de 2 números.

min()

Retorna o menor de 2 números.

pow()

Recebe dois números como parâmetros e devolve o primeiro número elevado

ao segundo número.

random()

Devolve um número aleatório entre 0 e 1. Método criado a partir de Javascript

1.1.

round()

Arredonda ao inteiro mais próximo.

sin()

Devolve o seno de um número com um ângulo em radianos.

sqrt()

Retorna a raiz quadrada de um número.

tan()

Calcula e devolve a tangente de um número em radianos.

Exemplo de utilização da classe Math

Vamos ver um simples exemplo sobre como utilizar métodos e propriedades da

classe Math para calcular o seno e o co-seno de 2 PI radianos (uma volta

completa). Como alguns de vocês sabem, o co-seno de 2 PI radianos deve dar

como resultado 1 e o seno 0.

document.write (Math.cos(2 * Math.PI))


document.write (Math.sin(2 * Math.PI))

2 PI radianos é o resultado de multiplicar 2 pelo número PI. Esse resultado é o

que recebe o método cos, e dá como resultado 1. No caso do seno, o resultado

não é exatamente 0 mas está aproximado com uma exatidão demais de um

milésimo de fração. Escrevem-se o seno e co-seno com uma quebra de linha

no meio para que fique mais claro.

Classe Number em Javascript Classe que modela o tipo de dados numéricos.




A classe Number modela o tipo de dados numéricos. Foi acrescentado na versão 1.1 de Javascript (com Netscape Navigator 3). Serve para criar objetos que têm dados numéricos como valor. É muito provável que você não chegue a utilizar em nenhuma ocasião. Pelo menos em todos os scripts que servem para fazer as coisas mais distintas e úteis.

Nota: Conhecemos o tipo de dados numéricos no primeiro manual de javascript. Este nos servia para salvar valores

numéricos sem mais. Este objeto modela este tipo de dados e a classe em si, oferece algum método que pode ser útil. Para os cálculos matemáticos e o uso de números em geral vamos utilizar sempre as variáveis numéricas vistas anteriormente.

O valor do objeto Number que se cria depende do que receba o construtor da

classe Number. Com estas regras:

- Se o construtor recebe um número, então inicia o objeto com o número que

recebe. Se receber um número entre aspas, o converte a valor numérico,

devolvendo também tal número.

- Devolve 0 em caso de que não receba nada.

- No caso de que receba um valor não numérico devolve NaN, que significa

"Not a Number" (Não é um número)

- Se receber false se inicia a 0 e se receber true se inicia a 1.

Seu funcionamento pode ser resumido nestes exemplos.

var n1 = new Number()

document.write(n1 + "<br>")

//mostra um 0

var n2 = new Number("oi")


//mostra NaN



http://www.criarweb.com/artigos/%20http:/www.criarweb.com/javascript/

http://www.criarweb.com/artigos/%20http:/www.criarweb.com/javascript/

var n3 = new Number("123")


//mostra 123

var n4 = new Number("123asdfQWERTY")


//mostra NaN

var n5 = new Number(123456)


//mostra 123456

var n6 = new Number(false)


//mostra 0

var n7 = new Number(true)


//mostra 1

Propriedades da classe Number

Esta classe também nos oferece várias propriedades que contém os seguintes

valores:

NaN

Como vimos, significa Not a Number, ou em português, não é um número.

MAX_VALUE e MIN_VALUE

Salvam o valor do máximo e do mínimo valor que se pode representar em

Javascript

NEGATIVE_INFINITY e POSITIVE_INFINITY

Representam os valores, negativos e positivos respectivamente, a partir dos

quais há transbordamento.

Estas propriedades são de classe, portanto acessaremo-las a partir do nome

da classe, tal como podemos ver neste exemplo no qual se mostra cada um

dos seus valores.

document.write("Propriedade NaN: " + Number.NaN)


document.write("Propriedade MAX_VALUE: " + Number.MAX_VALUE)


document.write("Propriedade MIN_VALUE: " + Number.MIN_VALUE)


document.write("Propriedade NEGATIVE_INFINITY: " +

Number.NEGATIVE_INFINITY)


document.write("Propriedade POSITIVE_INFINITY: " +

Number.POSITIVE_INFINITY)

Classe Boolean em Javascript Outra das classes incorporadas em Javascript, neste caso para criar valores booleanos a partir de valores não booleanos.




Esta classe serve para criar valores booleanos. Foi acrescentado na versão 1.1 de Javascript (com Netscape Navigator 3). Uma de suas possíveis é a de conseguir valores booleanos a partir de dados de qualquer outro tipo.

Nota: Conhecemos o tipo de dados boolean no primeiro manual de Javascript. Este nos servia para salvar um valor

verdadeiro (true) ou falso (false). Esta classe modela esse tipo de dados para criar objetos booleanos.

Dependendo do que receba o construtor da classe Boolean o valor do objeto

booleano que se cria será verdadeiro ou falso, da seguinte maneira:

- Inicia-se a false quando você não passa nenhum valor ao construtor, ou se

passa uma cadeia vazia, o número 0 ou a palavra false sem aspas.

- Inicia-se a true quando recebe qualquer valor entre aspas ou qualquer

número distinto de 0.

Pode-se compreender o funcionamento deste objeto facilmente se

examinarmos alguns exemplos.

var b1 = new Boolean()

document.write(b1 + "<br>")

//mostra false

var b2 = new Boolean("")





//mostra false

var b25 = new Boolean(false)


//mostra false

var b3 = new Boolean(0)


//mostra false

var b35 = new Boolean("0")


//mostra true

var b4 = new Boolean(3)


//mostra true

var b5 = new Boolean("Olá")


//mostra true

Criação de classes em Javascript Agora que já sabemos o que são os objetos, vamos ver como podemos criar nossos próprios objetos em Javascript.




Agora que já conhecemos um pouco os objetos e aprendemos a manejá-los

podemos passar a um tema mais avançado, como é o de construir nossos

próprios objetos, que pode ser útil em certas ocasiões para temas avançados.

Então vamos a ver como podemos definir nossos próprios objetos, com suas

propriedades e métodos, de maneira que aprendamos o mecanismo, mas sem

entrar muito em aspectos práticos que deixaremos para exemplos no futuro.

Para criar nossos próprios objetos devemos criar uma classe, que lembramos

que é algo assim como a definição de um objeto com suas propriedades e

métodos. Para criar a classe em Javascript devemos escrever uma função

especial, que se encarregará de construir o objeto na memória e inicia-lo. Esta




função chama-se construtor na terminologia da programação orientada a

objetos.

function MinhaClasse (valor_iniciacao){

//Inicio as propriedades e métodos

this.minhaPropriedade = valor_iniciacao

this.meuMetodo = nome_de_uma_funcao_definida

}

Isso era um construtor. Utiliza a palavra this para declarar as propriedades e

métodos do objeto que se está construindo. This faz referência ao objeto que

se está construindo, pois lembremos que a esta função a chamaremos para

construir um objeto. A esse objeto que se está construindo lhe vamos

atribuindo valores em suas propriedades e também lhe vamos atribuindo

nomes de funções definidas para seus métodos. Ao construir um objeto

tecnicamente é igual que declarar uma propriedade ou um método, somente

difere em que a uma propriedade lhe atribuímos um valor e a um método lhe

atribuímos uma função.

A classe AlunoUniversitário

Veremos tudo mais detalhadamente se fazemos um exemplo. Neste exemplo,

vamos criar um objeto estudante universitário. Como estudante terá umas

características como o nome, a idade ou o número de matrícula. Ademais

poderá ter algum método como, por exemplo, matricular ao aluno.

Construtor: Colocamos propriedades

Vejamos como definir o construtor da classe Alunouniversitário, mas somente

vamos colocar por agora as propriedades da classe.

function AlunoUniversitario(nome, idade){

this.nome = nome

this.idade = idade

this.numMatricula = null

}

O construtor recebe os valores de iniciação como parâmetros, neste caso é só

o nome e a idade, porque o número de matrícula o aluno não recebe até que

esteja matriculado. É por isso que atribuímos a null a propriedade

numMatrícula.

Criação de classes em Javascript II Aprendemos a construir métodos e a associá-los aos nossos próprios objetos de Javascript. Também repassamos como instanciar nossos objetos a partir das definições da classe.




Para construir um método devemos criar uma função. Uma função que se

constrói com a intenção de que seja um método para uma classe pode utilizar

também a variável this, que faz referência ao objeto sobre o que invocamos o

método. Portanto, devemos recordar que para chamar a um método devemos

ter um objeto e this faz referência a esse objeto.

function matriculese(num_matricula){

this.numMatricula = num_matricula

}

A função matricular recebe um número de matrícula por parâmetro e o atribui à

propriedade numMatricula do objeto que recebe este método. Assim,

preenchemos o da propriedade que nos faltava.

Vamos construir outro método que imprime os dados do aluno.

function imprimir(){

document.write("Nome: " + this.nome)

document.write("<br>Idade: " + this.idade)

document.write("<br>Número de matrícula: " + this.numMatricula)

}

Esta função vai imprimindo todas as propriedades do objeto que recebe o

método.

Construtor: Colocamos métodos

Para colocar um método em uma classe devemos atribuir a função que

queremos que seja o método ao objeto que está sendo criado. Vejamos como

ficaria o construtor da classe AlunoUniversitario com o método matricular.


this.nome = nome

this.idade = idade



this.matriculese = matriculese

this.imprimir = imprimir

}

Vemos que nas últimas linhas atribuímos aos métodos os nomes das funções

que contém seu código.

Para instanciar um objeto

Para instanciar objetos da classe AlunoUniversitario utilizamos a sentença new,

que já tivemos a oportunidade de ver em outras ocasiões.

meuAluno = new AlunoUniversitario("José Dias",23)

Criação de classes em Javascript III Para ilustrar o modo de trabalho com classes e objetos apresentamos o exemplo completo, no qual criamos uma classe, instanciamos objetos e os utilizamos.




Para ilustrar o trabalho com objetos e terminar com o exemplo do

AlunoUniversitário, vamos ver todo este processo em um só script no qual

definiremos a classe e logo a utilizaremos um pouquinho.

//definimos o método matriculese para a classe AlunoUniversitario

function matriculese(num_matricula){

this.numMatricula = num_matricula

}

//definimos o método imprimir para a classe AlunoUniversitario

function imprimir(){

document.write("<br>Nome: " + this.nome)

document.write("<br>Idade: " + this.idade)

document.write("<br>Número de matrícula: " + this.numMatricula)

}

//definimos o construtor para a classe




this.nome = nome

this.idade = idade


this.matriculese = matriculese

this.imprimir = imprimir

}

//criamos um aluno

meuAluno = new AlunoUniversitario("José Dias",23)

//pedimos que se imprima

meuAluno.imprimir()

//pedimos que se matricule

meuAluno.matriculese(305)

//pedimos que se imprima de novo (com o número de matrícula preenchido)

meuAluno.imprimir()

Se desejarmos, podemos ver o script em funcionamento em uma página a

parte.

No momento não vamos mais falar sobre como criar e utilizar nossos próprios

objetos, mas no futuro trataremos este tema com mais profundidade e faremos

algum exemplo adicional.

Hierarquia de objetos do navegador São os objetos que estão disponíveis em Javascript para controlar qualquer elemento presente na página web.




Chegamos ao tema mais importante para aprender a manejar Javascript com

toda sua potência, o tema no qual aprenderemos a controlar ao navegador e os

distintos elementos da página.

Sem dúvida, este tema dará muita vida aos nossos exemplos, já que até agora

não tinham muito caráter prático porque não trabalhavam com o navegador e

com as páginas, que é realmente para o que está feito Javascript. De modo

que esperamos a partir de agora que o manual seja mais entretido para todos,

http://www.criarweb.com/artigos/exemplos/javascript2/usos_objetos.html

http://www.criarweb.com/artigos/exemplos/javascript2/usos_objetos.html




porque cobrirá os aspectos mais práticos.

Quando se carrega uma página, o navegador cria uma hierarquia de objetos na

memória que servem para controlar os distintos elementos de tal página. Com

Javascript e com a nomenclatura de objetos que aprendemos, podemos

trabalhar com essa hierarquia de objetos, acessar às suas propriedades e

invocar seus métodos.

Qualquer elemento da página pode ser controlado de uma maneira ou de outra

acessando a essa hierarquia. É crucial conhecê-la bem para poder controlar

perfeitamente as páginas web com Javascript ou qualquer outra linguagem de

programação do lado do cliente.

Exemplo de acesso à hierarquia

Antes de começar a ver rigorosamente a hierarquia de objetos do navegador,

vamos ver o exemplo típico de acesso a uma propriedade desta hierarquia para

mudar o aspecto da página. Trata-se de uma propriedade da página que

armazena a cor de fundo da página web: a propriedade bgColor do objeto

document.

document.bgColor = "red"

Se executarmos esta sentença em qualquer momento, mudamos a cor de

fundo da página para vermelho. Há que observar que a propriedade bgColor

tem a "C" em maiúscula. É um erro típico se equivocar com as maiúsculas e

minúsculas na hierarquia. Se não o escrevemos bem não funcionará e em

alguns casos nem sequer dará uma mensagem de erro.

Nesta página definida com a cor de fundo branca mudamos essa propriedade

com Javascript, com o que sairá com a cor de fundo vermelha.

< HTML>

< HEAD>

<TITLE>Prova bgColor</TITLE>

< /HEAD>

< BODY bgcolor=white>

< script>

document.bgColor = "red"

< /script>

< /BODY>

< /HTML>



Podemos ver esta página em funcionamento em uma janela a parte.

Nos exemplos que vimos até agora também fizemos uso dos objetos da

hierarquia do navegador. Teoricamente utilizamos muito o método write() do

objeto document para escrever um texto na página.

document.write("O texto a escrever")

Trabalhando com a hierarquia em Javascript Vemos por alto a hierarquia inteira, detalhando alguns de seus elementos e uma explicação sobre como acessa-los.




Vamos ver agora como está composta esta hierarquia. Os objetos que fazem parte dela estão representados no seguinte gráfico.

http://www.criarweb.com/artigos/exemplos/javascript2/bgcolor.html


Hierarquia de objetos do navegador em Javascript 1.2. Poderia faltar por percorre algum objeto, mas serve perfeitamente para ter uma

idéia de como se organizam os objetos na hierarquia.

Como se pode observar, todos os objetos começam em um objeto que se

chama window. Este objeto oferece uma série de métodos e propriedades para

controlar a janela do navegador. Com eles podemos controlar o aspecto da

janela, a barra de estado, abrir janelas secundárias e outras coisas que

veremos mais adiante quando explicarmos com detalhe o objeto.

Além de oferecer controle, o objeto window dá acesso a outros objetos como o

documento (a página web que se está visualizando), o histórico de páginas

visitadas ou os distintos frames da janela. De modo que para acessar a

qualquer outro objeto da hierarquia deveríamos começar pelo objeto window.

Tanto é que javascript entende perfeitamente que a hierarquia começa em



window embora no o atribuímos.

Nos exemplos incluídos no capítulo anterior podíamos ter escrito também as

sentenças de acesso à hierarquia começando pelo objeto window, desta

maneira.

window.document.bgColor = "red"

window.document.write("O texto a escrever")

Não o fizemos para que o código ficasse mais claro e economizar algo de

texto, mas agora já sabemos que toda a hierarquia começa no objeto window.

As propriedades de um objeto podem ser por sua vez outros objetos

Muitas das propriedades do objeto window são por sua vez outros objetos. É o

caso de objetos como o histórico de páginas web ou o objeto documento, que

têm por sua vez outras propriedades e métodos.

Entre eles se destaca o objeto document, que contem todas as propriedades e

métodos necessários para controlar muitos aspectos da página. Já vimos

alguma propriedade como bgColor, mas tem muitas outras como o título da

página, as imagens que existem incluídas, os formulários, etc. Muitas

propriedades deste objeto são por sua vez outros objetos, como os formulários.

Veremos tudo isto quando tratarmos cada um dos objetos separadamente.

Ademais, o objeto document tem métodos para escrever na página web e para

manejar eventos da página.

Navegação através da hierarquia

O objetivo deste capítulo sobre a hierarquia de objetos é aprender a navegar

por ela para acessar a qualquer elemento da página. Esta não é uma tarefa

difícil, mas pode haver algum caso especial em que acessar aos elementos da

página se faça de uma maneira que ainda não comentamos.

Como já dissemos, toda a hierarquia começa no objeto window, embora não

era necessário fazer referência a window para acessar a qualquer objeto da

hierarquia. Logo, em importância está o objeto document, onde podemos

encontrar alguma propriedade especial que vale a pena comentar

separadamente, porque seu acesso é um pouco diferente. Trata-se fdas

propriedades que são arrays, por exemplo, a propriedade imagens é um array

com todas as imagens da página web. Também encontramos arrays para

salvar os links da página, os applets, os formulários e as âncoras.

Quando uma página se carrega, o navegador constrói na memória a hierarquia



de objetos. De maneira adicional, constrói também estes arrays de objetos. Por

exemplo, no caso das imagens, vai criando o array colocando na posição 0 a

primeira imagem, na posição 1 a segunda imagem e assim até que

introduzimos todas. Vamos ver um loop que percorre todas as imagens da

página e imprime sua propriedade src, que contem a URL onde está situada a

imagem.

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

document.write(document.images[i].src)


}

Utilizamos a propriedade length do array imagens para limitar o número de

interações do loop. Logo, utilizamos o método write() do objeto document

passando o valor de cada uma das propriedades src de cada imagem.

Podemos ver uma página con varias imágenes donde se accede a sus

propiedades com o loop anterior.

Agora vamos ver o uso de outro array de objetos. Neste caso vamos acessar

um pouco mais dentro da hierarquia para chegar à matriz elements dos objetos

formulário, que contem cada um dos elementos que compõem o formulário.

Para isso, teremos que acessar a um formulário da página, ao que poderemos

acessar pelo array de formulários, e dentro dele à propriedade elements, que é

outro array de objetos. Para cada elemento do formulário vamos escrever sua

propriedade value, que corresponde com a propriedade value que colocamos

em HTML.

for (i=0;i<document.forms[0].elements.length;i++){

document.write(document. forms[0].elements[i].value)


}

é um loop muito parecido ao que tínhamos para percorrer as imagens, com a

diferença que agora percorremos o vector de elements, ao que acessamos

pela hierarquia de objetos passando pelo array de formulários em sua posição

0, que corresponde como primeiro formulário da página.

Para ver este exemplo em funcionamento, temos uma página com um

formulário onde executa este percorrido a seus elementos.

Com isto, aprendemos a nos mover pala hierarquia de objetos, com o que

poderemos acessar a qualquer elemento do navegador ou a página. Mais

http://www.criarweb.com/artigos/exemplos/javascript2/ex-hierarquia1.html




adiante conheceremos com detalhe cada um dos objetos da hierarquia,

começando pelo objeto window e baixando pela hierarquia até ver todos.

Objeto Window de Javascript Estudamos o objeto window de Javascript que nos serve para controlar a janela do navegador. Detalhamos suas propriedades e damos um exemplo.




É o objeto principal na hierarquia e contém as propriedades e métodos para

controlar a janela do navegador. Dele dependem todos os demais objetos da

hierarquia. Vamos ver a lista de suas propriedades e métodos.

Propriedades do objeto window

A seguir podemos ver as propriedades do objeto window. Existem algumas

muito úteis e outras menos.

closed

Indica a possibilidade de que tenha fechado a janela. (Javascript 1.1)

defaultStatus

Texto que se escreve por padrão na barra de estado do navegador.

document

Objeto que contem na página web que está sendo mostrada.

Frame

Um objeto frame de uma página web. Acessa-se pelo nome dele.

frames array

O vetor que contem todos os frames da página. Acessa-se pelo índice a partir

de 0.

history

Objeto histórico de páginas visitadas.

innerHeight

Tamanho em pixels do espaço onde se visualiza a página, na vertical.




(Javascript 1.2)

innerWidth

Tamanho em pixels do espaço onde se visualiza a página, na horizontal.

(Javascript 1.2)

length

Número de frames da janela.

location

A URL do documento que está sendo visualizando. Podemos mudar o valor

desta propriedade para irmos a outra página. Ver também a propriedade

location do objeto document.

locationbar

Objeto barra de endereços da janela. (Javascript 1.2)

menubar

Objeto barra de menus da janela. (Javascript 1.2)

name

Nome da janela. Atribuímos quando abrimos uma nova janela.

opener

Faz referência à janela do navegador que abriu a janela onde estamos

trabalhando. Será vista com mais detalhes no tratamento de janelas com

Javascript.

outherHeight

Tamanho em pixels do espaço de toda a janela, na vertical. Isto inclui as barras

de deslocamento, botões, etc. (Javascript 1.2)

outherWidth

Tamanho em pixels do espaço de toda a janela, na horizontal. Isto inclui as

barras de deslocamento. (Javascript 1.2)

parent

Faz referência à janela onde está situado o frame que estamos trabalhando.

Veremos detalhadamente ao estudar o controle de frames com Javascript.

personalbar

Objeto barra pessoal do navegador. (Javascript 1.2)

self


Janela ou frame atual.

scrollbars

Objeto das barras de deslocamento da janela.

status

Texto da barra de estado.

statusbar

Objeto barra de estado do navegador. (Javascript 1.2)

toolbar

Objeto barra de ferramentas. (Javascript 1.2)

top

Faz referência à janela onde está situado o frame que estamos trabalhando.

Como a propriedade parent.

window

Faz referência à janela atual, assim como a propriedade self.

Vamos ver um exemplo de utilização da propriedade status do objeto window.

Esta propriedade serve para escrever um texto na barra de estado do

navegador (a barra debaixo da janela). Neste exemplo tivemos que nos

adiantar um pouco no andamento do manual, pois utilizamos um manipulador

de eventos e que ainda não vimos o que são. Em concreto, utilizamos o

manipulador de eventos onclick, que serve para executar sentenças Javascript

quando o usuário clica um elemento da página.

Os manipuladores de eventos são colocados em etiquetas HTML, em nosso

caso, colocamos em um botão de formulário. As sentenças Javascript

associadas ao evento onclick do botão serão executadas quando clicarmos o

botão.

Vejamos já o código que faz com que mude o texto da barra de estado quando

clicarmos um botão.

< form>

< input type="Button" value="Clique-me!" onclick="window.status='Olá a todo

mundo!'">

< /form>

Simplesmente atribuímos um texto à propriedade status do objeto window. O


texto que colocamos na barra de estado está escrito entre aspas simples

porque estamos escrevendo dentro de umas aspas duplas.

Métodos de window em Javascript O objeto window de Javascript tem a disposição dos programadores uma longa lista de métodos. Estudaremos e veremos exemplos.




Vamos ver agora os distintos métodos que tem o objeto window. Muitos destes

métodos terão que ser vistos separadamente porque são muito úteis e ainda

não o utilizamos, agora vamos lista-los e já veremos alguns exemplos.

alert(texto)

Apresenta uma janela de alerta onde se pode ler o texto que recebe por

parâmetro.

back()

Ir uma página atrás no histórico de páginas visitadas. Funciona como o botão

de voltar da barra de ferramentas. (Javascript 1.2)

blur()

Tirar o foco da janela atual. (Javascript 1.1)

captureEvents(eventos)

Captura os eventos que se indiquem por parâmetro (Javascript 1.2).

clearInterval()

Elimina a execução de sentenças associadas a um intervalo indicadas com o

método setInterval().(Javascript 1.2)

clearTimeout()

Elimina a execução de sentenças associadas a um tempo de espera indicadas

com o método setTimeout().

close()

Fecha a janela. (Javascript 1.1)

confirm(texto)

Mostra uma janela de confirmação e permite aceitar ou rejeitar.


find()

Mostra uma janelinha de busca. (Javascript 1.2 para Netscape)

focus()

Coloca o foco da aplicação na janela. (Javascript 1.1)

forward()

Ir uma página adiante no histórico de páginas visitadas. Como se clicássemos

o botão de adiante do navegador. (Javascript 1.2)

home()

Ir à página de início o explorador que tenha configurado. (Javascript 1.2)

moveBy(pixelsX, pixelsY)

Move a janela do navegador os pixels que se indicam por parâmetro para a

direita e para baixo. (Javascript 1.2)

moveTo(pixelsX, pixelsY)

Move a janela do navegador à posição indicada nas coordenadas que recebe

por parâmetro. (Javascript 1.2)

open()

Abre uma janela secundária do navegador.

print()

Como se clicássemos o botão de imprimir do navegador. (Javascript 1.2)

prompt(pergunta,inicio_da_resposta)

Mostra uma caixa de diálogo para pedir um dado. Devolve o dado que se

escreveu.

releaseEvents(eventos)

Deixa de capturar eventos do tipo que se indique por parâmetro. (Javascript

1.2)

resizeBy(pixelslargo,pixelsAlto)

Redimensiona o tamanho da janela, acrescentando ao seu tamanho atual os

valores indicados nos parâmetros. O primeiro para a altura e o segundo para a

largura. Admite valores negativos se se deseja reduzir a janela. (Javascript 1.2)

resizeTo(pixelslargo,pixelsAlto)

Redimensiona a janela do navegador para que ocupe o espaço em pixels que

se indica por parâmetro (Javascript 1.2)


routeEvent()

Encaminha um evento pela hierarquia de eventos. (Javascript 1.2)

scroll(pixelsX,pixelsY)

Faz um scroll da janela para a coordenada indicada por parâmetro. Este

método está desaconselhado, pois agora se debería utilizar

scrollTo()(Javascript 1.1)

scrollBy(pixelsX,pixelsY)

Faz um scroll do conteúdo da janela relativo à posição atual. (Javascript 1.2)

scrollTo(pixelsX,pixelsY)

Faz um scroll da janela à posição indicada pelo parâmetro. Este método tem

que ser utilizado ao invés do scroll. (Javascript 1.2)

setInterval()

Define um script para que seja executado indefinidamente em cada intervalo de

tempo. (Javascript 1.2)

setTimeout(sentença,segundos)

Define um script para que seja executado uma vez depois de um tempo de

espera determinado.

stop()

Como clicar o botão de stop da janela do navegador. (Javascript 1.2)

Para ilustrar um pouco melhor o funcionamento de algum destes métodos -os

mais estranhos-, criamos uma página web que os utiliza. O código da página

mostra-se a seguir e também podemos ver a página em funcionamento.

< form>

< input type="button" value="Janela de busca (Somente Netscape)"

onClick="window.find()">

< br>

< br>

< input type="button" value="Mover a janela 10 direita,10 abaixo"

onClick="moveBy(10, 10)">

< br>

< br>

< input type="button" value="Mover a janela ao ponto (100,10)"

onClick="moveTo(100, 10)">

< br>

< br>


http://www.criarweb.com/artigos/exemplos/javascript2/metodos_window.html

< input type="button" value="Imprimir esta página" onClick="print()">

< br>

< br>

< input type="button" value="Aumentar a janela 10 largura,10 comprimento"

onClick="resizeBy(10, 10)">

< br>

< br>

< input type="button" value="Fixar o tamanho da janela em 400 x 200"

onClick="resizeTo(400, 200)">

< br>

< br>

< input type="button" value="Scroll acima de tudo" onClick="scroll(0,0)">

< br>

< br>

< input type="button" value="Scroll acima 10 pixels" onClick="scrollBy(0,-10)">

< /form>

Estes exemplos são muito simples, embora pouco práticos. Unicamente trata-

se de uma série de botões que, ao clica-los, chamam a outros tantos métodos

do objeto window. No atributo onclick da etiqueta do botão se indicam as

sentenças Javascript que queremos que se executem quando se clica sobre tal

botão.

No capítulo seguinte veremos outros exemplos realizados com métodos do

objeto window de Javascript, um pouco mais detalhados.

Exemplos de métodos de Window Outros exemplos de métodos do objeto window de Javascript, relatados com detalhe.




Agora vamos realizar algum exemplo de utilização dos métodos da janela.

Vamos nos centrar nos exemplos que servem para por caixas de diálogo, que

são muito úteis.

Caixa de alerta


Para por um texto em uma janelinha com um botão de aceitar. Recebe o texto

por parâmetro.

window.alert("Este é o texto que sai")

Como o objeto window se subentende podemos escrevê-lo assim.

alert("Este é o texto que sai")

Coloca-se uma janela como a que pode se ver nesta página.

Caixa de confirmação

Mostra uma janela com um texto indicado por parâmetro e um botão de aceitar

e outro de rejeitar. Dependendo do botão que se clica devolve um true (se

clicar aceitar) ou um false (se clicar rejeitar).

< script>

var resposta = confirm("Aceite-me ou rejeite-me")

alert ("Você clicou: " + resposta)

< /script>

Este script mostra uma caixa de diálogo confirm e logo mostra em outra caixa

de diálogo alert o conteúdo da variável que devolveu a caixa de diálogo.

Novamente, podemos ver o funcionamento deste script se acessamos a esta

página a parte.

Caixa de introdução de um dado

Mostra uma caixa de diálogo onde se formula uma pergunta e existe um campo

de texto para escrever uma resposta. O campo de texto aparece preenchido

com o que se escreva no segundo parâmetro do método. Também existe um

botão de aceitar e outro de cancelar. Neste caso de clicar aceitar, o método

devolve o texto que foi escrito. Se foi clicado cancelar, devolve null.

O exemplo seguinte serve para pedir o nome da pessoa que está visitando a

página e logo mostrar na página uma saudação personalizada. Utiliza um loop

para repetir a tomada de dados sempre que o nome da pessoa seja null

(porque clicou o botão de cancelar), ou seja, um string vazio (porque não

escreveu nada).

< script>

nome = null

while (nome == null || nome == ""){

http://www.criarweb.com/artigos/exemplos/javascript2/caixaalerta.html

http://www.criarweb.com/artigos/exemplos/javascript2/caixaconfirm.html

http://www.criarweb.com/artigos/exemplos/javascript2/caixaconfirm.html

nome = prompt("Diga-me seu nome:","")

}

document.write("<h1>Olá " + nome + "</h1>")

< /script>

Se observarmos na caixa prompt, veremos que recebe dois parâmetros. O

segundo era o texto por padrão que sai na caixa como resposta. Deixamos

como um string vazio para que não sai nada como texto por padrão.

Podemos ver este último script em funcionamento em uma página a parte.

Até aqui os exemplos dos métodos do objeto window. De qualquer forma, no

resto do manual teremos ocasião de ver como trabalhar com muitas

propriedades e métodos deste objeto.

Objeto document em Javascript Uma descrição do objeto de Javascript que serve para controlar o documento que se visualiza no navegador. Também há uma lista de todas suas propriedades.




Com o objeto document controla-se a página web e todos os elementos que

contem. O objeto document é a página atual que está sendo visualizada nesse

momento. Depende do objeto window, mas também pode depender do objeto

frame no caso de que a página esteja sendo mostrada em um frame.

Propriedades do objeto document

Vejamos uma lista das propriedades do objeto document e logo veremos algum

exemplo.

alinkColor

Cor dos links ativos

Anchor

Uma âncora da página. Consegue-se com a etiqueta <A

name="nome_da_ancora">. Acessa-se pelo seu nome.

anchors array

http://www.criarweb.com/artigos/exemplos/javascript2/caixaprompt.html




Um array das âncoras do documento.

Applet

Um applet da página. Acessa-se pelo seu nome. (Javascript 1.1)

applets array

Um array com todos os applets da página. (Javascript 1.1)

Area

Uma etiqueta <AREA>, das que estão vinculadas aos mapas de imagens

(Etiqueta ). Acessa-se pelo seu nome. (Javascript 1.1)

bgColor

A cor de fundo do documento.

classes

As classes definidas na declaração de estilos CSS. (Javascript 1.2)

cookie

Uma cookie

domain

Nome do domínio do servidor da página.

Embed

Um elemento da página incrustado com a etiqueta <EMBED>. Acessa-se pelo

seu nome. (Javascript 1.1)

embeds array

Todos os elementos da página incrustados com <EMBED>. (Javascript 1.1)

fgColor

A cor do texto. Para ver as mudanças há que reescrever a página.

Form

Um formulário da página. Acessa-se pelo seu nome.

forms array

Um array com todos os formulários da página.

ids

Para acessar a estilos CSS. (Javascript 1.2)

Image

Uma imagem da página web. Acessa-se pelo seu nome. (Javascript 1.1)

images array

Cada uma das imagens da página introduzidas em um array. (Javascript 1.1)

lastModified

A data de última modificação do documento.

linkColor

A cor dos links.

Link

Um link da página. Acessa-se pelo seu nome.

links array

Um array com cada um dos links da página.

location

A URL do documento que se está visualizando. É somente de leitura.

referrer

A página da qual vem o usuário.

tags

Estilos definidos às etiquetas de HTML na página web. (Javascript 1.2)

title

O título da página.

URL

O mesmo que location, mas é aconselhável utilizar location já que URL não

existe em todos os navegadores.

vlinkColor

A cor dos links visitados.

Exemplos de propriedades de document Vemos vários exemplos de acesso e manipulação das propriedades do objeto document de Javascript.





Depois de estudar as propriedades do objeto document, veremos algum exemplo para ilustrar o modo de acesso e utilização das mesmas. Exemplo com a propriedade bgColor Vamos utilizar o evento onclick para colocar três botões na página que ao clicá-los mudará a cor de fundo da página. < script> function mudaCor(colorin){ document.bgColor = colorin

} < /script> < form> < input type="Button" value="Vermelho" onclick="mudaCor('ff0000')"> < input type="Button" value="Verde" onclick="mudaCor('00ff00')"> < input type="Button" value="Azul" onclick="mudaCor('0000ff')"> < /form> Primeiro, definimos uma função que será a encarregada de mudar a cor e logo três botões que chamarão a função quando forem clicados passando a cor como parâmetro. Podemos ver o exemplo em funcionamento. Propriedade title A propriedade title salva a cadeia que conforma o título de nossa página web. Se acessarmos a tal propriedade obteremos o título e se a mudamos, mudará o título da página web.

Nota: Lembramos que o título pode ser visto na barra que está acima de tudo da janela do navegador.

Vamos mostrar o título da página em uma caixa de alerta.

alert (document.title)

Agora vamos fazer uma função que modifica o título da página, atribuindo-lhe o

texto que chegue por parâmetro.

function mudaTitulo(texto){

document.title = texto

http://criarweb.com/artigos/340.php?manual=15

http://www.criarweb.com/artigos/exemplos/javascript2/mudar_cor.html



}

Como no exemplo anterior, vamos criar vários botões que chamem a função

passando-lhe distintos textos, que se colocarão no título da página.

< form>

< input type="Button" value="Titulo = Olá a todos" onclick="mudaTitulo('Olá a

todos')">

< input type="Button" value="Titulo = Bem-vindos a minha página web"

onclick="mudaTitulo('Bem-vindos a minha página web')">

< input type="Button" value="Titulo = Mais dias que trabalhamos"

onclick="mudaTitulo('Mais dias que trabalhamos')">

< /form>

Métodos de document Vemos uma lista dos eventos disponíveis no objeto document.




O objeto document, localizado abaixo do objeto window na hierarquia de

objetos de Javascript, também tem uma lista de métodos interessantes.

Veremos a seguir:

captureEvents()

Para capturar os eventos que acontecem na página web. Recebe como

parâmetro o evento que se deseja capturar.

close()

Fecha o fluxo do documento. (Será visto mais adiante neste manual um artigo

sobre o fluxo do documento)

contextual()

Oferece uma linha de controle dos estilos da página. No caso de desejarmos

especificá-los com Javascript.

getSelection()

Devolve um string que contem o texto que foi selecionado. Funciona somente

em Netscape.

handleEvent()








Invoca o manipulador de eventos do elemento especificado.

open()

Abre o fluxo do documento.

releaseEvents()

Libera os eventos capturados do tipo que se especifique, enviando-os aos

objetos seguintes na hierarquia.

routeEvent()

Passa um evento capturado através da hierarquia de eventos habitual.

write()

Escreve dentro da página web. Podemos escrever etiquetas HTML e texto

normal.

writeln()

Escreve igual que o método write(), embora coloque uma quebra de linha no

final.

Os eventos de document servem principalmente para controlar duas coisas.

Um grupo nos oferece uma série de funções para o controle dos documentos,

como escrever, abrir ou fechar. Veremos no próximo capítulo que fala sobre o

controle do fluxo de escritura do documento. O outro grupo oferece ferramentas

para o controle dos eventos no documento e o veremos mais adiante quando

tratarmos com detalhe o tema de eventos.

O método getSelection() fica para nós um pouco solto, pois só funciona nos

navegadores de Netscape e portanto, não é muito útil para as aplicações que

desejarmos que sejam compatíveis em todos os sistemas. Mesmo assim,

faremos um exemplo sobre este método, já que os outros serão vistos nos

próximos capítulos.

O exemplo consiste em uma página que tem um pouco de texto e um botão.

Na página poderemos selecionar algo de texto e logo, apertar o botão que

chama a uma função que mostra em uma caixa alert o texto que foi

selecionado. O código é o seguinte:

< html>

< head>

< title>Resgatar o selecionado</title>

< script language="JavaScript">

function mostrarSelecionado(){

alert("Foi selecionado:\n" + document.getSelection())


}

< /script>

< /head>

< body>

< h1>Resgatar o selecionado</h1>

< br>

< form>

< input type="button" value="clica-me!" onClick="mostrarSelecionado()">

< /form>

Selecione qualquer texto da página e clique o botão.

< /body>

< /html>

Pode-se ver em funcionamento o script em uma página a parte, embora

somente funcionará em Netscape e Internet Explorer dará un error.

Fluxo de escritura do documento É o processo no qual o navegador escreve a página. Para escrever na

página em Javascript o fluxo do documento deve estar aberto.




Sobre o objeto document também é interessante falar um pouco sobre o fluxo de escritura do documento ou página web. Quando o navegador lê uma página web vai interpretando e escrevendo em sua janela. O processo no qual o navegador está escrevendo a página lhe chamamos fluxo de escritura do documento. O fluxo começa quando a página começa a ser escrita e dura até que esta termine de ser escrita. Uma vez terminada a escritura da página, o fluxo de escritura do documento se fecha automaticamente. Com isto termina a recarga da página. Uma vez fechado o fluxo, não se pode mais escrever na página web, nem texto nem imagens nem outros elementos. Em javascript, temos que respeitar o fluxo de escritura do documento forçosamente. É por isso que só podemos executar sentenças document.write() (método write() do objeto document) quando está aberto o fluxo de escritura do documento, ou o que é igual, enquanto a página está sendo recarregada.

http://www.criarweb.com/artigos/exemplos/javascript2/mostrar-selecionado.html






Lembramos as duas formas de executar um script em Javascript:

Execução dos scripts enquanto a página está sendo recarregada. Aqui poderemos executar document.write() e fizemos habitualmente nos exemplos anteriores.

Execução dos scripts quando a página foi recarregada, como resposta a um evento do usuário. Aqui, não podemos fazê-lo porque a página terminou de recarregar, de fato, não o fizemos nunca até agora.

Há o ponto em que não se pode escrever na página quando já está fechado o

fluxo. Na verdade sim que pode, mas necessitamos abrir o fluxo outra vez para

escrever na página, tanto é assim que embora nós não abramos explicitamente

Javascript se encarregará disso. O que tem que ficar claro é que se fazemos

um document.write(), o fluxo tem que estar aberto e se não estiver se abrirá. O

problema de abrir o fluxo de escritura do documento, uma vez já está escrita a

página, é que todo o conteúdo é apagado.

Para que fique claro vamos fazer um script para escrever na página uma vez

esta tenha sido recarregada. Simplesmente necessitamos um botão e ao clicá-

lo executar o método write() do objeto document.

< form>

< INPUT type=button value=escribir onclick="window.document.write('olá')">

< /form>

Se observarmos, no manipulador de eventos onclick, colocamos a hierarquia

de objetos desde o princípio, ou seja, começando pelo objeto window. Isto é

porque existem alguns navegadores que não subentendem o objeto window

nas mesmas sentenças sentencias escritas nos manipuladores de eventos.

Podemos ver o exemplo em funcionamento.

O resultado da execução pode variar de um navegador a outro, mas de

qualquer forma se apagará a página que se está executando.

Métodos open() e close() de document

Os métodos open() e close() do objeto document servem para controlar o fluxo

do documento desde Javascript. Permite-nos abrir e fechar o documento

explicitamente.

O exemplo de escritura na página anterior deveria haver sido escrito com sua

correspondente abertura e fechamento do documento e teria ficado algo

parecido a isto.


http://www.criarweb.com/artigos/exemplos/javascript2/fluxo-documento.html

< script>

function escreve(){

document.open()

window.document.write('Olá')

document.close()

}

< /script>

< form>

< INPUT type=button value=escrever onclick="escreve()">

< /form>

Vemos que agora não escrevemos as sentenças dentro do manipulador,

porque, quando há mais de uma sentença, fica mais claro colocar uma

chamada a uma função e na função colocamos as sentenças que quisermos.

As sentenças do exemplo anterior, que cobrem a abertura, escritura e

fechamento do documento. Podem ser vistas aqui.

Trabalho com formulários em Javascript Para continuar vamos ver uma série de capítulos enfocados em aprender a trabalhar com os formulários. Agora veremos como acessar aos

formulários e seus elementos.




Para continuar vamos ver uma série de capítulos enfocados em aprender a trabalhar com os formulários, acessar aos seus elementos para controlar seus valores e atualizá-los. O objeto form depende na hierarquia do objeto document. Em um objeto form podemos encontrar alguns métodos e propriedades, mas o mais destacado que poderemos encontrar é cada uno dos elementos do formulário. Ou seja, de um formulário dependem todos os elementos que existem dentro, como podem ser campos de texto, caixas de seleção, áreas de texto, botões de radio, etc. Para acessar a um formulário pelo objeto document podemos faze-lo de duas

formas.

1. A partir de seu nome, atribuído com o atributo NAME de HTML.

http://www.criarweb.com/artigos/exemplos/javascript2/fluxo-documento2.html





2. Mediante a matriz de formulários do objeto document, com o índice do formulário ao que queremos acessar.

Para este formulário < FORM name="f1"> < INPUT type=text name=campo1> < INPUT type=text name=campo2> < /FORM> Poderemos acessar com seu nome desta maneira. document.f1 Ou com seu índice, se supormos que é o primeiro da página. document.forms[0] De maneira similar acessamos aos elementos de um formulário, que dependem do objeto form.

1. A partir do nome do objeto atribuído com o atributo NAME de HTML. 2. Mediante a matriz de elementos do objeto form, com o índice do

elemento ao que queremos acessar.

Poderíamos acessar ao campo 1 do anterior formulário de duas maneiras. Com

seu nome faríamos assim.

document.f1.campo1

ou a partir do array de elementos.

document.f1.elements[0] (utilizamos o índice 0 porque é o primeiro elemento e

em Javascript os arrays começam por 0.)

Se desejarmos acessar ao segundo campo do formulário, escreveríamos uma

destas duas coisas:

document.f1.campo2

document.f1.elements[1]

Lembramos que também podemos acessar a um formulário pelo array de

forms, indicando o índice do formulário ao qual acessar. Deste modo, o acesso

ao campo2 seria o seguinte:

document.forms[0].campo2

document.forms[0].elements[1]


Nestes casos, supomos que este formulário é o primeiro que está escrito no

código HTML, por isso lhe acessamos com o índice 0.

Esperamos que tenha ficado claro o acesso a formulários e a seus campos.

Passaremos então, a um exemplo para praticar tudo isto.

Ex. de trabalho com formulários. Calculadora simples Veremos um exemplo do trabalho com formulários no qual desenvolveremos uma calculadora simples.




Para ilustrar um pouco o trabalho com formulários, vamos realizar um exemplo

prático. Pode ser que algumas coisas das quais vamos tratar, fiquem um pouco

no ar por não terem sido explicadas detalhadamente antes, mas certamente

nos serve para estarmos por dentro de como se trabalha com formulários e as

possibilidades que temos.

Exemplo de calculadora simples

Neste exemplo vamos construir uma calculadora, embora bastante simples,

que permita realizar as operações básicas. Para fazer a calculadora vamos

realizar um formulário no qual vamos colocar três campos de texto, os dois

primeiros para as parcelas e um terceiro para o resultado. Ademais haverá uns

botões para fazer as operações básicas.

O formulário da calculadora pode ser visto aqui.

< form name="calc">

< input type="Text" name="parcela1" value="0" size="12">

< br>


< br>

< input type="Button" name="" value=" + " onclick="calcula('+')">

< input type="Button" name="" value=" - " onclick="calcula('-')">

<input type="Button" name="" value=" X " onclick="calcula('*')">

< input type="Button" name="" value=" / " onclick="calcula('/')">

< br>

< input type="Text" name="resultado" value="0" size="12">


< /form>

Mediante uma função vamos acessar aos campos do formulário para buscar as

parcelas em duas variáveis. Os campos de texto têm uma propriedade

chamada value que é onde podemos obter o que têm escrito nesse momento.

Mais tarde recorreremos a função eval() para realizar a operação. Colocaremos

por último o resultado no campo de texto criado em terceiro lugar, utilizando

também a propriedade value do campo de texto.

Chamamos à função que realiza o cálculo (que podemos ver a seguir)

apertando os botões de cada uma das operações. Tais botões podem ser

vistos no formulário e contém um atributo onclick que serve para especificar as

sentenças Javascript que desejarmos que se executem quando o usuário clicar

sobre ele. Neste caso, a sentença a executar é uma chamada à função

calcula() passando como parâmetro o símbolo ou a parcela da operação que

desejarmos realizar.

O script com a função calcula()

< script>

function calcula(operacao){

var parcela1 = document.calc.parcela1.value


var result = eval(parcela1 + operacao + parcela2)

document.calc.resultado.value = result

}

< /script>

A função eval(), lembramos, que recebia um string e o executava como uma

sentença Javascript. Neste caso, irá receber um número que concatenado a

uma operação e outro número será sempre uma expressão aritmética que

eval() solucionará perfeitamente.

Podemos ver o exemplo da calculadora em funcionamento.

O acesso a outros elementos dos formulários se faz de maneira parecida a

respeito da hierarquia de objetos, entretanto, como cada elemento tem suas

particularidades as coisas que poderemos fazer com eles diferirão um pouco.

Isto será visto mais adiante.

Propriedades e métodos do objeto form


http://www.criarweb.com/artigos/%20http:/criarweb.com/artigos/292.php?manual=15




http://www.criarweb.com/artigos/exemplos/javascript2/calculadora-simples.html

Damos uma olhada nas diferentes propriedades e métodos do objeto form de Javascript. Mostramos algum exemplo de utilização de propriedades e uma simples validação de formulário e envio com o método submit ().




Vamos ver agora o objeto form por si só, para destacar suas propriedades e

métodos.

Propriedades do objeto form

Têm umas propriedades para ajustar seus atributos mediante Javascript.

action

É a ação que queremos realizar quando se submete um formulário. Coloca-se

geralmente um endereço de correio ou a URL a qual lhe mandaremos os

dados. Corresponde com o atributo ACTION do formulário.

elements array

A matriz de elementos contém cada um dos campos do formulário.

encoding

O tipo de codificação do formulário

length

O número de campos do formulário.

method

O método pelo qual mandamos a informação. Corresponde com o atributo

METHOD do formulário.

name

O nome do formulário, que corresponde com o atributo NAME do formulário.

target

A janela ou frame no qual está dirigido o formulário. Quando se submete se

atualizará a janela ou frame indicado. Corresponde com o atributo target do

formulário.

Exemplos de trabalho com as propriedades



Com estas propriedades podemos mudar dinamicamente com Javascript os

valores dos atributos do formulário para fazer com ele o que se deseje

dependendo das exigências do momento.

Por exemplo, poderíamos mudar a URL que receberia a informação do

formulário com a instrução.

document.meuFormulário.action = "minhaPágina.asp"

Ou mudar o target para submeter um formulário em uma possível janela

secundária chamada minha_janela.

document.meuFormulário.target = "minha_janela"

Métodos do objeto form

Estes são os métodos que podemos invocar com um formulário.

submit()

Para fazer com que o formulário se submeta, embora não se tenha clicado o

botão de submit.

reset()

Para reiniciar todos os campos do formulário, como se tivéssemos clicado o

botão de reset. (Javascript 1.1)

Exemplo de trabalho com os métodos

Vamos ver um exemplo muito simples sobre como validar um formulário para

submete-lo no caso de que esteja preenchido. Para isso, vamos utilizar o

método submit() do formulário.

O mecanismo é o seguinte: em vez de colocar um botão de submit colocamos

um botão normal (<INPUT type="button">) e fazemos que ao clicar esse botão

se chame a uma função que é a encarregada de validar o formulário e, no caso

de que esteja correto, submete-lo.

O formulário ficaria assim:

< form name="meuFormulário" action="mailto:[email protected]"

enctype="text/plain">

< input type="Text" name="campo1" value="" size="12">

< input type="button" value="Enviar" onclick="validaSubmite()">

< /form>

Observamos que não há um botão de submit, e sim, um botão normal com uma

chamada a uma função que podemos ver a seguir.

function validaSubmete(){

if (document.meuFormulário.campo1.value == "")

alert("Deve preencher o formulário")

else

document.meuFormulário.submit()

}

Na função se comprova que se o que está escrito no formulário é um string

vazio. Se for isso, mostra-se uma mensagem de alerta que informa que se

deve preencher o formulário. No caso de haver algo no campo de texto

submete o formulário utilizando o método submit do objeto form.

Controle de campos de texto com Javascript Explicação e documentação dos campos de texto e seu controle com Javascript. Incluem-se os campos de tipo text, password e hidden.




Vamos ver agora os campos onde podemos salvar cadeias de texto, ou seja, os campos de texto, password e hidden. Existe outro campo relacionado com a escritura de texto, o campo TextArea, que veremos mais adiante. Campo Text É o campo que obtemos ao escrever a etiqueta <INPUT type="text">. Utilizamos até este momento em vários exemplos, mas vamos parar um momento nele para descrever suas propriedades e métodos. Propriedades do campo text

Vemos a lista de propriedades destos tipos de campo. defaultValue É o valor por padrão que tem um campo. O que contém o atributo VALUE da etiqueta <INPUT>. form Faz referência ao formulário.



name Contem o nome deste campo de formulário type Contem o tipo de campo de formulário que é. value O texto que está escrito no campo. Vamos ver um exemplo sobre o que pode fazer a propriedade defaultValue. Neste exemplo, temos um formulário e um botão de reset. Se clicarmos o botão de reset, o campo de texto se esvazia porque seu value de HTML era um string vazio. Mas se clicarmos o botão seguinte, chamamos a função que muda o valor por padrão desse campo de texto, de modo que ao clicar o botão de reset mostrará o novo valor por padrão. Este é o código da página completa.

< html> < head>

<title>Mudar o valor por padrao</title> <script>

function mudaPadrao(){ document.meuFormulario.campo1.defaultValue = "Olá!!"

} </script> < /head>

< body>

< form name="meuFormulario" action="mailto:[email protected]" enctype="text/plain">

< input type="Text" name="campo1" value="" size="12"> < input type="Reset">

< br> < br>

< input type="button" value="Muda valor por padrao" onclick="mudaPadrao()"> < /form> < /body> < /html>

Métodos do objeto Text Pode-se invocar os seguintes métodos sobre os objetos tipo Text. blur() Retira o foco da aplicação do campo de texto. focus() Coloca o foco da aplicação no campo de texto.


select() Seleciona o texto do campo. Como exemplo vamos mostrar uma função que seleciona o texto de um campo de texto de um formulário como o da página do exemplo anterior. Para fazê-lo utilizamos dois métodos, o primeiro para passar o foco da aplicação ao campo de texto e o segundo para selecionar o texto.

function selecionaFoco(){ document.meuFormulario.campo1.focus() document.meuFormulario.campo1.select()

}

Pode-se ver em funcionamento nesta página.

Campos Password

Estes funcionam como os hidden, com a peculiaridade que o conteúdo do

campo não pode se ver escrito no campo, por isso saem asteriscos no lugar do

texto.

Campos Hidden

Os campos hidden são como campos de texto que estão ocultos para o

usuário, ou seja, que nã se vêem na página. São muito úteis no

desenvolvimento de webs para passar variáveis nos formulários aos quais o

usuário não deve ter acesso.

Colocam-se com HTML com a etiqueta <INPUT type=hidden> e se preenchem

os dados com seu atributo value. Mais tarde poderemos mudar o dado que

figura no campo acessando à propriedade value do campo de texto assim

como fizemos antes.

document.meuFormulario.CampoHidden.value = "novo texto"

O campo hidden tem somente algumas das propriedades dos campos de texto.

Teoricamente, tem a propriedade value e as propriedades que são comuns de

todos os campos de formulário: name, from e type, que já foram descritos para

os campos de texto.

Controle de checkbox em javascript

http://www.criarweb.com/artigos/exemplos/javascript2/exemplo-text2.html



Capítulo sobre o controle do elemento de formulário tipo checkbox ou caixa de verificação. Estudamos seus métodos e propriedades, com exemplos.




Os checkbox são umas caixas que permitem marca-las ou não para verificar alguma coisa em um formulário. Podemos ver uma caixa checkbox a seguir:

Os checkbox se conseguem com a etiqueta <INPUT type=checkbox>. Com o atributo NAME da etiqueta <INPUT> podemos lhe dar um nome para logo acessa-la com javascript. Com o atributo CHECKED indicamos que o campo deve aparecer checado por padrão. Com Javascript, a partir da hierarquia de objetos do navegador, temos acesso ao checkbox, que depende do objeto form do formulário onde está incluído. Propriedades de um checkbox As propriedades que têm um checkbox são as seguintes: checked Informa sobre o estado do checkbox. Pode ser true ou false. defaultChecked Se está checada por padrão ou não. value O valor atual do checkbox. Também têm as propriedades form, name, type como qualquer outro elemento de formulário. Métodos do checkbox Vejamos a lista dos métodos de um checkbox.

click() É como se clicássemos sobre o checkbox, ou seja, muda o estado do checkbox. blur() Retira o foco da aplicação do checkbox.




focus() Coloca o foco da aplicação no checkbox. Para ilustrar o funcionamento das checkbox vamos ver uma página que tem um checkbox e três botões. Os dois primeiros para mostrar as propriedades checked e value e o terceiro para invocar a seu método click() com objetivo de simular um clique sobre o checkbox. < html> < head> <title>Exemplo Checkbox</title> < script> function alertaChecked(){ alert(document.meuFormulario.meuCheck.checked) } function alertaValue(){ alert(document.meuFormulario.meuCheck.value) } function metodoClick(){ document.meuFormulario.meuCheck.click() } < /script> < /head> < body> < form name="meuFormulario" action="mailto:[email protected]" enctype="text/plain"> < input type="checkbox" name="meuCheck"> < br> < br> < input type="button" value="informa de sua propriedade checked" onclick="alertaChecked()"> < input type="button" value="informa de sua propriedade value" onclick="alertaValue()"> < br> < br> < input type="button" value="Simula um clique" onclick="metodoClick()"> < /form> < /body> < /html>

Controle de botões de radio em Javascript Explicação sobre o manejo de radio buttons em Javascript. Lista de métodos e propriedades junto com algum exemplo de seu funcionamento.





O botão de radio (ou radio button em inglês) é um elemento de formulário que permite selecionar uma opção e somente uma, sobre um conjunto de possibilidades. Pode-se ver a seguir:

Branco

Vermelho

Verde

Nota: Na parte acima podemos ver três radio buttons ao invés de um só. Colocam-se três botões porque assim podemos examinar seu

funcionamento ao formar parte de um grupo. Vejamos que ao selecionar uma opção se desmarca a opção que estiver marcada

antes.

Consegue-se com a etiqueta <INPUT type=radio>. Com o atributo NAME da etiqueta <INPUT> damos um nome para agrupar os radio button e que somente se possa escolher uma opção entre várias. Com o atributo value indicamos o valor de cada um dos radio buttons. O atributo checked nos serve para indicar qual dos radio butons tem que estar selecionado por padrão.

Referencia: Explicamos com detalhe a criação de botões de radio em nosso manual de HTML, no capítulo Outros elementos de formulários.

Quando em uma página temos um conjunto de botões de radio cria-se um

objeto radio por cada um dos botões. Os objetos radio dependem do formulário

e pode-se acessá-los pelo array de elements, entretanto também cria-se um

array com os botões de radio. Este array depende do formulário e tem o

mesmo nome que os botões de radio.

Propriedades do objeto radio

Vejamos uma lista das propriedades deste elemento.

checked

Indica se está checado ou não um botão de radio.

defaultChecked

Seu estado padrão.

value

O valor do campo de radio, atribuído pela propriedade value do radio.


Length (como propriedade do array de radios)

O número de botões de radio que formam parte no grupo. Acessível no vetor

de radios.

Métodos do objeto radio

São os mesmos que tinha o objeto checkbox.

Exemplo de utilização

Vejamos com um exemplo o método de trabalho com os radio buttons no qual

vamos colocar vários deles e cada um terá associado uma cor. Também

haverá um botão e ao clicá-lo mudaremos a cor de fundo da tela a cor que

esteja selecionada no conjunto de botões de radio.

Vamos ver a página inteira e em seguida comentamos.

< html>

< head>

<title>Exemplo Radio Button</title>

< script>

function mudaCor(){

var i

for (i=0;i<document.fcores.colorin.length;i++){

if (document.fcores.colorin[i].checked)

break;

}

document.bgColor = document.fcores.colorin[i].value

}

< /script>

< /head>

< body>

< form name=fcolores>

< input type="Radio" name="colorin" value="ffffff" checked> Branco

< br>

< input type="Radio" name="colorin" value="ff0000"> Vermelho

< br>

< input type="Radio" name="colorin" value="00ff00"> Verde

< br>

< input type="Radio" name="colorin" value="0000ff"> Azul

< br>

< input type="Radio" name="colorin" value="ffff00"> Amarelo

< br>


< input type="Radio" name="colorin" value="ff00ff"> Lilás

< br>

< input type="Radio" name="colorin" value="000000"> Preto

< br>

< br>

< input type="Button" name="" value="Muda Cor" onclick="mudaCor()">

< /form>

< /body>

< /html>

Primeiro, podemos observar no formulário e na lista de botões de radio. Todos

se chamam "colorin", portanto estão associados em um mesmo grupo. Além

disso, vemos que o atributo value de cada botão muda. Também vemos um

botão abaixo de tudo.

Com esta estrutura de formulário teremos um array de elements de 9

elementos, os 8 botões de radio e o botão debaixo.

Ademais, teremos um array de botões de radio que se chamará colorin e

depende do formulário, acessível desta maneira:

document.form.colorin

Este array tem em cada posição um dos botões de radio. Assim, na posição 0

está o botão de cor branca, na posição 1 o de cor vermelha... Para acessar a

estes botões de radio fazemos pelo seu índice.

document.fcores.colorin[0]

Se quisermos acessar por exemplo à propriedade value do último botão de

radio escrevemos o seguinte:

document.fcores.colorin[7].value

A propriedade length do array de radios nos indica o número de botões de

radio que fazem parte do grupo.

document.fcores.colorin.length

Neste caso, a propriedade length valerá 8.

Com estas notas poderemos entender mais ou menos bem a função que se

encarrega de encontrar o radio button selecionado e mudar a cor de fundo da

página.


Define-se uma variável na qual introduziremos o índice do radio button que

temos selecionado. Para isso, vamos percorrendo o array de botões de radio

até encontrarmos o que tem sua propriedade checked a true. Nesse momento,

saímos do loop, com o qual a variável i armazena o índice do botão de radio

selecionado. Na última linha mudamos a cor de fundo pelo que que estiver

selecionado no atributo value do radio button.

Controle de campos select com Javascript Controle de campos Descrição e exemplo para o controle de campos de formulário select, também chamados de combo box.




O objeto select de um formulário é uma dessas listas dinâmicas que nos permitem selecionar um elemento. Desdobram-se apertando sobre uma seta, a seguir pode-se escolher um elemento e para acabar voltam a se dobrarem. Pode-se ver um elemento select de um formulário a seguir.

Um destes elementos pode ser obtido utilizando a etiqueta

Propriedades do objeto select Vamos ver uma lista das propriedades deste elemento de formulário. length Salva a quantidade de opções do campo select. Quantidade de etiquetas <OPTION> Option Faz referência a cada uma das suas opções. São por si mesmas objetos. options Um array com cada uma das opções do select. selectedIndex É o índice da opção que se encontra selecionada. A parte das conhecidas propriedades comuns a todos os elementos de



formulário: form e name e type. Métodos do objeto select Os métodos são somente 2 e já conhecemos seu significado. blur() Para retirar o foco da aplicação desse elemento de formulário. focus() Para colocar o foco da aplicação. Objeto option Temos que pararmos para ver também este objeto para entender melhor o campo select. Lembramos que as option são as distintas opções que tem um select, expressadas com a etiqueta <OPTION>. Propriedades de option Estes objetos só têm propriedades, não têm métodos. Vamos vê-las. defaultSelected Indica com um true ou um false se essa opção é a padrão. A opção padrão se consegue com HTML colocando o atributo selected a um option. index O índice dessa opção dentro do select. selected Indica se essa opção se encontra selecionada ou não. text É o texto da opção. O que o usuário pode ver no select, que se escreve depois da etiqueta . value Indica o valor da opção, que se introduz com o atributo VALUE da etiqueta <OPTION>. Exemplo de aceso a um select

Vamos ver um exemplo sobre como se acessa a um select com Javascript, como podemos acessar suas diferentes propriedades e à opção selecionada. Vamos começar vendo o formulário que tem o select com o qual vamos trabalhar. É um select que serve para valorizar o web que estamos visitando. < form name="fomul"> Valoracao sobre este web:



< select name="minhaSelect"> < option value="10">Muito bom < option value="5" selected>Regular < option value="0">Muito ruim < /select> < br> < br> < input type=button value="Digame propriedades" onclick="digamePropriedades()"> < /form> Agora vamos ver uma função que percorre as propriedades mais significativas do campo select e as apresenta em uma caixa alert. function digamePropriedades(){ var texto texto = "O número de opções do select: " + document.formul.minhaSelect.length var indice = document.formul.minhaSelect.selectedIndex texto += "\nIndice da opção escolhida: " + indice var valor = document.formul.minhaSelect.options[indice].value texto += "\nValor da opção escolhida: " + valor var textoEscolhido = document.formul.minhaSelect.options[indice].text texto += "\nTexto da opção escolhida: " + textoEscolhido alert(texto) } Esta função cria uma variável de texto onde vai introduzindo cada uma das propriedades do select. A primeira, contem o valor da propriedade length do select, a segunda, o índice da opção selecionada e as duas seguintes, contém o valor e o texto da opção selecionada. Para acessar à opção selecionada utilizamos o array options com o índice percorrido na segunda variável. Podemos ver o exemplo em funcionamento aqui. Propriedade value de um objeto select Para acessar ao valor selecionado de um campo select podemos utilizar a propriedade value do campo select no lugar de acessar a partir do vector de options.

Para o anterior formulário seria algo parecido a isto. formul.minhaSelect.value Entretanto, esta propriedade só está presente em navegadores Internet Explorer, portanto é recomendável acessar utilizando o vetor de options com o índice da posição selecionada se desejarmos que a página seja compatível com todos os navegadores. Quisemos acrescentar este ponto para que, se

http://www.criarweb.com/artigos/exemplos/javascript2/exemplo-select.html

alguma vez utilizarmos ou vermos utilizar este método de acesso, sabemos seu problema e porque é melhor utilizar o vetor de options.

Controle de elementos Textarea em Javascript Os elementos textarea são os campos que permitem introduzir várias linhas de texto. Aprendemos a controlá-los com programação Javascript.




Para acabar de descrever todos os elementos de formulários vamos ver o objeto textarea que é um elemento que apresenta um lugar para escrever texto, igual que os campos text, mas com a particularidade que podemos escrever várias linhas de uma só vez. O campo textarea pode ser visto a seguir.

Nos Textarea

Podemos colocar o texto

Em várias linhas

Um campo textarea se consegue com a etiqueta

. Com o atributo name podemos

</body>

Propriedades de textarea

Pode-se ver uma lista das propriedades disponíveis em um textarea a seguir,

que são os mesmo que um campo de texto.

defaultValue

Que contém o valor padrão do textarea.

value

Que contém o texto que está escrito no textarea.

Além disso, têm as conhecidas propriedades de elementos de formulário form,

name e type.

Métodos de textarea


Vejamos uma lista dos métodos, que são os mesmos que em um campo de

texto.

blur()

Para tirar o foco da aplicação do textarea.

focus()

Para colocar o foco da aplicação no textarea.

select()

Seleciona o texto do textarea.

Vamos ver um exemplo a seguir que apresenta um formulário que tem um

textarea e um botão. Ao apertar o botão conta-se o número de caracteres e

coloca-se em um campo de texto.

Para acessar ao número de caracteres fazemos a partir da propriedade value

do objeto textarea. Como value contém um string podemos acessar à

propriedade length que têm todos os strings para averiguar sua longitude.

O código da página pode ser visto aqui.

< html>

< head>

<title>Exemplo textarea</title>

< script>

function conta(){

numCaracteres = document.formul.texto.value.length

document.formul.numCaracteres.value = numCaracteres

}

< /script>

< /head>

< body>

< form name="formul">

< textarea name=texto cols=40 rows=3>

Este é o texto padrão

< /textarea>

< br>

< br>

Número de caracteres <input type="Text" name="numCaracteres" size="4">

< br>

< br>

< input type=button value="Conta caracteres" onclick="conta()">

< /form>


< /body>

< /html>

Os eventos em Javascript Uma explicação sobre o que são os eventos e como definir suas ações associadas em Javascript.




Os eventos são a maneira que temos em Javascript de controlar as ações dos

visitantes e definir um comportamento da página quando se produzam. Quando

um usuário visita uma página web e interage com ela se produzem os eventos

e com Javascript podemos definir o que queremos que ocorra quando se

produzam.

Com Javascript podemos definir o que acontece quando se produz um evento

como poderia ser que um usuário clique sobre um botão, edite um campo de

texto ou abandone a página.

O manejo de eventos é o cavalo de batalha para fazer páginas interativas,

porque com eles podemos responder às ações dos usuários. Até agora neste

manual podemos ver muitos exemplos de manejo de um dos eventos de

Javascript, o evento onclick, que se produz ao clicar um elemento da página.

Até agora aplicamos sempre o evento a um botão, mas poderíamos aplica-lo a

outros elementos da página.

Como se define um evento

Para definir as ações que queremos realizar ao produzir um evento utilizamos

os manipuladores de eventos. Existem muitos tipos de manipuladores de

eventos, para muitos tipos de ações do usuário. O manipulador de eventos se

coloca na etiqueta HTML do elemento da página que queremos que responda

às ações do usuário.

Por exemplo, temos o manipulador de eventos onclick, que serve para

descrever ações que queremos que se executem quando se clique. Se

quisermos que ao clicar sobre um botão aconteça alguma coisa, escrevemos o

manipulador onclick na etiqueta <INPUT type=button> desse botão. Algo

parecido a isto.





< INPUT type=button value="clica-me" onclick="sentencas_javascript...">

Coloca-se um atributo novo na etiqueta que tem o mesmo nome que o evento,

neste caso onclick. O atributo se iguala às sentenças Javascript que queremos

que se executem ao se produzir o evento.

Cada elemento da página tem sua própria lista de eventos suportados, vamos

ver outro exemplo de manejo de eventos, desta vez sobre um menu

desdobrável, no qual definimos um comportamento quando mudamos o valor

selecionado.

< SELECT onchange="window.alert('Mudou a seleção')">

< OPTION value="opcao1">Opcao 1

< OPTION value="opcao2">Opcao 2

< /SELECT>

Nets exemplo, cada vez que se muda de opção mostra uma caixa de alerta.

Podemos vê-lo em uma página a parte.

Dentro dos manipuladores de eventos podemos colocar tantas instruções

quantas desejarmos, mas sempre separadas por ponto e vírgula. O habitual é

colocar uma só instrução, e se se deseja colocar mais de uma, costuma-se

criar uma função com todas as instruções e dentro do manipulador se coloca

uma só instrução que é chamada à função.

Vamos ver como se colocariam em um manipulador várias instruções.

< input type=button value=Cliacame

onclick="x=30; window.alert(x); window.document.bgColor = 'red'">

São instruções muito simples como atribuir a x o valor 30, fazer uma janela de

alerta com o valor de x e mudar a cor do fundo a vermelho. Podemos ver o

exemplo em uma página a parte.

Entretanto, tantas instruções postas em um manipulador ficam um pouco

confusas, seria melhor criar uma função assim:

< script>

function executaEventoOnclick(){

x = 30

window.alert(x)

window.document.bgColor = 'red'

}

< /script>

http://www.criarweb.com/artigos/exemplos/eventosjs/ex1.html




< FORM>

< input type=button value=Pulsame onclick="executaEventoOnclick()">

< /FORM>

Agora utilizamos mais texto para fazer o mesmo, mas com certeza deve lhe

parecer mais claro este segundo exemplo. Se se deseja, pode-se ver esta

última página em uma janela a parte

Hierarquia pelo objeto window

Nos manipuladores de eventos tem que se especificar a hierarquia inteira de

objetos do navegador, começando sempre pelo objeto window. Isto é

necessário porque existe algum browser antigo que não subentende o objeto

window quando se escrevem sentenças Javascript vinculadas a manipuladores

de eventos.

Os manipuladores de eventos em Javascript Lista dos manipuladores de eventos mais habituais da linguagem Javascript, junto com uma descrição de cada um.




Agora vamos ver uma lista dos manipuladores de eventos que existem disponíveis em Javascript, oferecendo uma pequena descrição de cada um.

Nota: Estes manipuladores são os mais comuns, presentes em Javascript 1.2 de Netscape Navigator. Existem outros manipuladores

que também são muito interessantes e veremos mais adiante capítulos de temas avançados de eventos.

A lista de manipuladores de eventos contém o nome do manipulador em negrito, sua descrição e finalmente a versão de Javascript que

incorporou tal manipulador.

onabort

Este evento se produz quando um usuário detém a carga de uma imagem, seja

porque detém a carga da página ou porque realiza uma ação que a detém,

como por exemplo, sair da página.

Javascript 1.1






onblur

Desata-se um evento onblur quando um elemento perde o foco da aplicação. O

foco da aplicação é o lugar onde está situado o cursor, por exemplo, pode estar

situado sobre um campo de texto, uma página, um botão ou qualquer outro

elemento.

Javascript 1.0

onchange

Desata-se este evento quando muda o estado de um elemento de formulário,

às vezes não se produz até que o usuário retire o foco da aplicação do

elemento. Javascript 1.0

Javascript 1.0

onclick

Produz-se quando se clica o botão do mouse sobre um elemento da página,

geralmente um botão ou um link.

Javascript 1.0

ondragdrop

Produz-se quando um usuário solta algo que havia arrastado sobre a página

web.

Javascript 1.2

onerror

Produz-se quando não se pode carregar um documento ou uma imagem e esta

fica quebrada.

Javascript 1.1

onfocus

O evento onfocus é o contrário de onblur. Produz-se quando um elemento da

página ou a janela ganham o foco da aplicação.

Javascript 1.0

onkeydown

Este evento é produzido no instante que um usuário pressiona uma tecla,

independentemente que a solte ou não. É produzido no momento do clique.

Javascript 1.2

onkeypress

Ocorre um evento onkeypress quando o usuário deixa uma tecla clicada por

um tempo determinado. Antes deste evento se produz um onkeydown no

momento que se clica a tecla..

Javascript 1.2


onkeyup

Produz-se quando o usuário deixa de apertar uma tecla. É produzido no

momento que se libera a tecla.

Javascript 1.2

onload

Este evento se desata quando a página, ou em Javascript 1.1 as imagens,

terminaram de se carregar.

Javascript 1.0

onmousedown

Produz-se o evento onmousedown quando o usuário clica sobre um elemento

da página. onmousedown se produz no momento de clicar o botão, soltando ou

não.

Javascript 1.2

onmousemove

Produz-se quando o mouse se move pela página.

Javascript 1.2

onmouseout

Desata-se um evento onmuoseout quando a seta do mouse sai da área

ocupada por um elemento da página.

Javascript 1.1

onmouseover

Este evento desata-se quando a seta do mouse entra na área ocupada por um

elemento da página.

Javascript 1.0

onmouseup

Este evento se produz no momento que o usuário solta o botão do mouse, que

previamente havia clicado.

Javascript 1.2

onmove

Evento que se executa quando se move a janela do navegador, ou um frame.

Javascript 1.2

onresize

Evento que se produz quando se redimensiona a janela do navegador, ou o

frame, no caso de que a página os tenha.

Javascript 1.2


onreset

Este evento está associado aos formulários e se desata no momento que um

usuário clica no botão de reset de um formulário.

Javascript 1.1

onselect

Executa-se quando um usuário realiza uma seleção de um elemento de um

formulário.

Javascript 1.0

onsubmit

Ocorre quando o visitante aperta sobre o botão de enviar o formulário. Executa-

se antes do envio propriamente dito.

Javascript 1.0

onunload

Ao abandonar uma página, seja porque se clique em um link que nos leva a

outra página ou porque se fecha a janela do navegador, se executa o evento

onunload.

Javascript 1.0

Exemplos de eventos em Javascript. Onabort Oferecemos um novo exemplo para o evento onabort.




Ao longo dos manuais I e II de Javascript, mostramos muitos exemplos de

utilização dos manipuladores de eventos. Aqui, veremos exemplos simples que

nos ocorrem para utilizar outros manipuladores que ainda não vimos.

Evento onabort

Vejamos um primeiro exemplo, neste caso sobre o evento onabort. Este evento

se ativa ao se cancelar o carregamento de uma página, seja porque se clica o

botão de cancelar ou porque o usuário sai da página por outro link.

Este exemplo contém uma imagem que tem o evento onabort atribuído para

que se execute uma função no caso de que a imagem não chegue a se

carregar. A função informa ao usuário de que a imagem não chegou a se

carregar e lhe pergunta deseja carrega-la outra vez. Se o usuário responde que


http://criarweb.com/javascript/

http://criarweb.com/javascript2/


sim, então começa a baixar a imagem outra vez. Se responde que não, não faz

nada. A pergunta é feita com uma caixa confirm de Javascript.

< html>< head>

<title>Evento onabort</title>

< script>

function perguntarSeguir(){

resposta = confirm ("O carregamento da página foi detido e há uma imagem

que você não está vendo.\nDeseja carregar a imagem?")

if (resposta)

document.img1.src = "http://criarweb.com/artigos/imagens/desarrollogrande.gif"

}

< /script>

< /head>

< body>

< img name=img1 src="http://

http://criarweb.com/artigos/imagens/desarrollogrande.gif " width=500

height=458 alt="Imagem que pesa 115K" border="0"

onabort="perguntarSeguir()">

< br>

Clique o botão de parar o carregamento da página e se colocará em

funcionamento o evento onerror

< /body>

< /html>

Este exemplo estaria bem se sempre se detivesse o carregamento por clicar o

botão de cancelar, mas o que acontece é que o usuário cancelou por ir a outra

página através de um link, sairá a caixa de confirmação, mas não ocorrerá

nada independentemente do que se responda e o navegante irá

irremediavelmente à nova página.

Exemplo do evento onblur em Javascript

Script em Javascript que mostra o trabalho com o evento onblur. Comprova-se a validade de um dado ao sair do campo de texto aonde está escrito.





Onblur se ativa quando o usuário retira o foco da aplicação de um elemento da

página. O foco da aplicação é o lugar onde está o cursor.

Se por exemplo, estamos situados em um campo de texto e saímos de tal

campo, Seja porque clicamos com o mouse em outro campo do formulário ou

em uma área vazia, ou seja porque o usuário apertou o botão tabulador (Tab)

que move o foco até o seguinte elemento da página.

Se eu desejo que, ao se situar fora de um campo de texto, se comprove que o

valor introduzido é correto posso utilizar onblur e chamar a uma função que

comprove se o dado é correto. Se não for correto posso obrigar ao foco da

aplicação a se situar novamente sobre o campo de texto e avisar ao usuário

para que mude tal valor.

Pode ser uma maneira interessante de assegurarmos que em um campo de

texto encontra-se um valor válido. Embora tenha algum problema, como

veremos mais adiante.

Vamos começar por um caso simples, no qual somente desejamos comprovar

um campo de texto para assegurarmos que é um número inteiro.

<html>

< head>

<title>Evento onblur</title>

< script>

function validarInteiro(valor){

//tento converter a inteiro.

//se era um inteiro não lhe afeta, se não era tenta converte-lo

valor = parseInt(valor)

//Comprovo se é um valor numérico

if (isNaN(valor)) {

//então (não é número) devolvo o valor cadeia vazia

return ""

}else{

//Em caso contrário (Se era um número) devolvo o valor

return valor

}

}

function comprovaValidoInteiro(){


inteioValidado = validarInteiro(document.f1.numero.value)

if (inteiroValidado == ""){

//se era a cadeia vazia é que não era válido. Aviso

alert ("Deve escrever um inteiro!")

//seleciono o texto

document.f1.numero.select()

//coloco outra vez o foco

document.f1.numero.focus()

}else

document.f1.numero.value = inteiroValidado

}

< /script>

< /head>

< body>

< form name=f1>

Escreva um número inteiro: <input type=text name=numero size=8 value=""

onblur="comprovaValidoInteiro()">

< /form>

< /body>

< /html>

Ao sair do campo de texto (onblur) se executa comprovaValidoInteiro(), que

utiliza a função validarInteiro. Se o valor devolvido pela função não for o de um

inteiro, neste caso se receberia uma cadeia vazia, mostra uma mensagem em

uma caixa alert, seleciona o texto escrito na caixa e coloca o foco da aplicação

na caixa de texto, para que o usuário coloque outro valor.

Até que o visitante não escreva um número inteiro no campo de texto o foco da

aplicação permanecerá no campo e continuará recebendo mensagens de erro.

Continuação do exemplo de onblur Fazemos um exemplo de validação de campos de un formulário utilizando como base o evento onblur e solucionando um problema de bucle infinito.




Vimos o exemplo no exemplo do método onblur relatado anteriormente uma possível técnica para comprovar os dados de um campo de formulário. Agora vamos ver como evoluir esta técnica se tivermos mais de um campo a validar,




dado que se pode complicar bastante o problema. De fato, antes de ler nossa solução proposta, creio que seria um bom exercício para o leitor praticar esse mesmo exemplo para os dois campos e trabalhar um pouco com a página para ver se encontramos algum problema. Muito provavelmente, encontraremos com um curioso loop infinito que nos vai dar mais quebra-cabeça para solucionar. Na prática, o leitor pode tentar validar um número inteiro e um código postal. Para validar um código postal necessitamos comprovar que é uma cadeia de texto composta geralmente por 5 caracteres e todos são inteiros. Se alguém quiser tentar, a função para validar um código postal seria algo parecido com isto: function ValidoCP(){ CPValido=true //se não tem 5 caracteres não é válido if (document.f1.codigo.value.length != 5) CPValido=false else{ for (i=0;i<5;i++){ CAtual = document.f1.codigo.value.charAt(i) if (validarInteiro(CAtual)==""){ CPValido=false break; } } } return CPValido } Simplesmente se encarrega de comprovar que o campo de texto contém 5 caracteres e de fazer um percorrido por cada um dos caracteres para comprovar que todos são inteiros. A princípio se supõem que o código postal é correto, colocando a variável CPValido a true, e se alguma comprovação falha muda-se o estado correto a incorreto, passando tal variável a false. Pode-se comprovar ao montar o exemplo com dois campos...nós agora vamos dar uma solução ao problema bastante complicadinha, pois incluímos

instruções para evitar o efecto do loop infinito. Não vamos ver o exemplo que daria o erro, deixamos para aqueles que desejarem tentar por si mesmo e recomendamos fazer isto porque assim, compreenderemos melhor o seguinte código. < html> < head> <title>Evento onblur</title>




< script> avisado=false function validarInteiro(valor){ //tento converter a inteiro. //se era um inteiro nao lhe afeta, e se nao era tenta converte-lo valor = parseInt(valor) //Comprovo se é um valor numérico if (isNaN(valor)) { //entao (nao é numero) devolvo o valor cadeia vazia return "" }else{ //No caso contrario (Se era um número) devolvo o valor return valor } } function comprovaValidoInteiro(){ inteiroValidado = validarInteiro(document.f1.numero.value) if (interoValidado == ""){ //se era a cadeia vazia é que nao era válido. Aviso if (!avisado){ alert ("Deve escrever um inteiro!") //seleciono o texto document.f1.numero.select() //coloco outra vez o foco document.f1.numero.focus() avisado=true setTimeout('avisado=false',50) } }else document.f1.numero.value = inteiroValidado } function comprovaValidoCP(){ CPValido=true //se nao tem 5 caracteres nao é válido if (document.f1.codigo.value.length != 5) CPValido=false else{ for (i=0;i<5;i++){

CAtual = document.f1.codigo.value.charAt(i) if (validarInteiro(CAtual)==""){ CPValido=false break; } } } if (!CPValido){ if (!avisado){

//se nao é valido, aviso alert ("Deve escrever um código postal válido") //seleciono o texto document.f1.codigo.select() //coloco outra vez o foco //document.f1.codigo.focus() avisado=true setTimeout('avisado=false',50) } } } < /script> < /head> < body> < form name=f1> Escreva um número inteiro: <input type=text name=numero size=8 value="" onblur="comprovaValidoInteiro()"> < br> Escreva um código postal: <input type=text name=codigo size=8 value="" onblur="comprovaValidoCP()"> *espera uma cadeia com 5 carácteres numéricos < /form> < /body> < /html> Este exemplo continua a guia do primeiro exemplo de onblur deste artigo, incluiendo um novo campo a validar. Para solucionar o tema do loop infinito, que vocês poderam investigar por vocês mesmos e no qual se mostrava uma caixa de alerta atrás da outra indefinidamente, utilizamos uma variável chamada avisado que contem um true se já foi avisado de que o campo estava mal e um false se ainda não foi avisado. Quando se mostra a caixa de alerta, se comprova se foi avisado ou não ao usuário. Se já foi avisado não se faz nada, evitando que se mostrem mais caixas de alerta. Se ainda não foi avisado mostra-se a caixa de alerta e coloca-

se o foco no campo que era incorreto. Para restituir a variável avisado a false, de modo que a próxima vez que se escreva mal o valor se mostre a mensagem correspondente, se utiliza o método setTimeout, que executa a instrução com um atraso, neste caso de 50 milésimos de segundos. O suficiente para que não se meta em um loop infinito.

Nota: Depois de todos os apetrechos que tivemos que colocar para que este

http://www.criarweb.com/artigos/%20http:/criarweb.com/artigos/402.php?manual=15%20

evento se comporte corretamente para cumprir com o objetivo desejado, é possível pensar que não vale a pena utiliza-lo neste objetivo. Podemos fazer

uso do evento onchange, ou comprovar todos os campos de uma vez só quando o usuário decidiu envia-lo.

Elementos de formulário select associados Como fazer com Javascript que um elemento de formulário select mude suas opções quando mude outro elemento select da página. De modo que cada opção de um select tenha um grupo de opções possíveis para o outro select.




Vamos conhecer um dos truques mais solicitados de Javascript, que tem muita relação com o tema de formulários e onde se utiliza o evento onchange de Javascript. É um exemplo sobre como realizar uma página com dois selects onde, segundo o valor escolhido em um deles, mudem as opções possíveis do outro select. O melhor para ver o que vamos fazer é ver uma página web onde se mostra em funcionamento o script. Para ver seu funcionamento, devemos mudar a seleção do primeiro select e comprovaremos como as opções do segundo select mudam automaticamente. O exemplo que ilustramos utiliza estados e países. Ao escolher no primeiro select um país, no segundo deve nos mostrar os estados desse país para que possamos escolher um estado, mas somente um que esteja no país selecionado no primeiro término. Conhecer o objeto select e os option É importante conhecer os objetos de formulário select e os option. Os select correspondem com as caixas de seleção desdobráveis e os option com cada uma das opções da caixa desdobrável. Podemos ver um artigo que fala sobre isso. Teoricamente nos interessa fazer várias coisas que têm a ver com extrair o valor de um select em qualquer momento, observar seu número de opções e, para cada opção, colocar seu valor e seu texto associado. Tudo isto aprenderemos a fazer neste exemplo.

Referência: Para conhecer o trabalho e a hierarquia de objetos



http://www.criarweb.com/artigos/exemplos/javascript2/select_associado_javascript.html




javascript (Tudo isso é a base do trabalho com os elementos das

páginas em Javascript) devemos ler o manual de Javascript II.

Modo de solucionar o problema Para começar, vamos utilizar um formulário com dois selects, um para o país e outro para o estado. < form name="f1"> < select name=pais onchange="muda_estado()"> < option value="0" selected>Selecione... < option value="1">Espanha < option value="2">Brasil

< option value="3">Portugal < option value="4">França < /select> < select name=estado> < option value="-">- < /select> < /form> Observamos no select associado ao país deste formulário que, quando se muda a opção de país, deve-se chamar a função muda_estado(). Veremos mais adiante esta função, agora é importante observar que está associada ao evento onchange que se ativa quando muda a opção no select. Todo o resto será código Javascript. Começamos definindo um montão de de arrays com os estados de cada país. Neste caso temos só 4 países, então necessitaremos 4 arrays. Em cada array tenho uma lista de estados de cada país, colocados em cada um dos elementos do array. Ademais, deixaremos o primeiro campo com um valor "-" que indica que não foi selecionado nenhum estado. var estados_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...") var estados_2=new Array("-","Rio de Janeiro","Bahia","São Paulo","Santa Catarina","Minas Gerais","...") var estados_3=new Array("-","Algarve","Alentejo","Norte","Vale do Tejo","...")

var estados_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...") Observemos que os índices do array de cada país se correspondem com os do select do país. Por exemplo, a opção Espanha, tem o valor associado 1 e o array com os estados de Espanha se chama estados_1.




O script se completa com uma função que realiza o carregamento dos estados no segundo select. O mecanismo realiza basicamente estas ações:

Detecto o país que foi selecionado Se o valor do país não for 0 (o valor 0 é quando não foi selecionado

nenhum país) o Tomo o array de estados adequado, utilizando o índice do país. o Marco o número de opções que deve ter o select de estados o Para cada opção do select, coloco seu valor e texto associado,

que faz corresponder com o indicado no array de estados. SE NÃO (O valor de país é 0, não foi selecionado país)

o Coloco no select de estado um único option com o valor "-", que significava que não havia estado.

Coloco a opção primeira do select de estado como o selecionado.

A função tem o seguinte código. Está comentado para que se entenda melhor.

function muda_estado(){

//tomo o valor do select do pais escolhido

var pais

pais = document.f1.pais[document.f1.pais.selectedIndex].value

/vejo se o pais está definido

if (pais != 0) {

//se estava definido, entao coloco as opcoes do estado correspondente.

//seleciono o array de estado adequado

meus_estados=eval("estados_" + pais)

//calculo o numero de estados

num_estados = meus_estados.length

//marco o número de estados no select

document.f1.estado.length = num_estados

//para cada estado do array, o introduzo no select

for(i=0;i<num_estados;i++){

document.f1.estado.options[i].value=meus_estados[i]

document.f1.provincia.options[i].text=meus_estados[i]

}

}else{

//se não havia estado selecionado, elimino os estados do select

document.f1.estado.length = 1

//coloco um traço na única opção que deixei

document.f1.estado.options[0].value = "-"

document.f1.estado.options[0].text = "-"

}

//marco como selecionada a opção primeira de estado

document.f1.estado.options[0].selected = true

}

Evento onunload de Javascript Exemplo de uso do evento onunload em Javascript para abrir uma janela secundária quando o usuário abandona a página.




Vejamos um exemplo do evento onunload, que, lembramos, ativa-se quando o

usuário abandona a página web. Portanto, onunload serve para executar uma

ação quando o usuário sai da página, seja porque clica um link que leva fora da

página ou porque fecha a janela do navegador.

O exemplo que desejamos mostrar serve para abrir uma página web em outra

janela quando o usuário abandona a página. Deste modo, atuam muitos dos

incômodos popups das páginas web, abrindo-se justo quando abandonamos o

site que estávamos visitando.

<html>

< head>

<title>Abre ao sair</title>

<script>

function abrejanela(){

window.open("http://www.google.com.br","venda","")

}

</script>

< /head>

< body onunload="abrejanela()">

< a href="http://www.criarweb.com">CW!!</a>

< /body>

< /html>

O exemplo é tão simples que quase sobram as explicações. Simplesmente

criamos uma função que abre uma janela secundária e a associamos com o

evento onunload, que se coloca na etiqueta <body>.

Evento onload de Javascript






Com o evento onload podemos executar ações justo quando terminem de se carregar todos os elementos da página.




O evento onload de Javascript se ativa quando termina de se carregar a

página. Deve ser colocado na etiqueta , embora em versões modernas de

Javascript, também o aceitam outros elementos como as imagens.

Com o evento onload podemos executar ações justo quando terminem de se

carregar todos os elementos da página. É um evento bastante utilizado, pois é

muito habitual que seja desejado realizar ações nesse preciso instante. Em

nosso exemplo, vamos ver como poderíamos fazer um script para motivar aos

nossos visitantes que nos votem em um ranking qualquer de páginas web.

A idéia é que a página se carregue inteira e, uma vez estando carregada,

apareça uma janela de Javascript onde se proponha ao visitante votar a

página. É interessante esperar que termine de carregar a página inteira para

que o visitante possa ver a web que se propõe votar, antes de realmente

pedirmos seu voto.

O código seria o seguinte:

< html>

< head>

<title>Vote-me!!</title>


function pedirVoto(){

if (confirm("Esta página está muito legal (como pode ser vista). Dê o seu

voto!")){

window.open("http://www.oquefor.com/votar.php?idvoto=12111","","")

}

}

< /script>

< /head>

< body onload="pedirVoto()">

< h1>Página SuperLegal</h1>

< br>

Esta página está muito bonita. Sou o autor e posso garantir que não há muitas

páginas com tanta qualidade na Internet






< br>

< br>

< a href="#">Entrar</a>

< /body>

< /html>

Observamos que na etiqueta <body> temos o evento onload="pedirVoto()". Ou

seja, que quando se carregue a página se chamará a uma função chamada

pedirVoto(), que definimos no bloco de script que temos no cabeçalho.

A função pedirVoto() utiliza uma caixa confirm para saber se realmente o

usuário deseja nos votar. A função confirm() mostra uma caixa com um texto e

dois botões, para aceitar ou cancelar. O texto é o que recebe por parâmetro.

Dependendo do que se clique nos botões, a função confirm() devolverá um

true, se se clicou o botão aceitar, ou um false, no caso de que se clicasse

sobre cancelar.

A função confirm() está por sua vez colocada dentro de um bloco condicional if,

de modo que, dependendo do que se clicou na caixa confirm, o if se avaliará

como positivo ou negativo. Neste caso, somente realizam-se ações se se clicou

sobre aceitar.

Para acessar à página onde se contabiliza nosso voto temos o método

window.open(), que serve para abrir janelas secundarias ou popups.

Mostramos a página onde se vota em uma janela secundária para que o

visitante não saia de nosso web, já que acaba de entrar e não queremos que

vá embora.

Com isto, fica mais ou menos ilustrado como fazer uso do evento onload. Com

certeza haverá muitos mais casos onde utilizá-lo em suas criações.

Manipuladores de eventos em Javascript 1.3 Lista de todos os manipuladores de eventos na linguagem Javascript 1.3.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga




Nos artigos anteriores de CriarWeb.com vimos diversas informações relativas aos eventos em Javascript. Agora, vamos dar uma lista que sirva como

referência para os programadores com Javascript 1.3.

Especificamente, vimos antes os seguintes artigos que convém repassar:

Os eventos em Javascript Manipuladores de eventos de Javascript

No artigo de manipuladores de eventos de Javascript vimos os eventos das versões de Javascript 1.0, 1.1 e 1.2, mas neste momento vamos apresentar a lista dos manipuladores de eventos de Javascript 1.3.

Cada evento tem um nome, por exemplo "click". Os manipuladores de eventos, que são usados para invocar uma série de comandos quando se produz um evento, têm sempre a palavra "on" seguida do nome do evento. Por exemplo, "onclick".

Manipuladores de eventos (Event Handlers) em Javascript 1.3 Abort (onabort): Se produz quando se abortou o carregamento de um elemento da página, por exemplo uma imagem.

Blur (onblur): este evento é processado quando um elemento da página, geralmente um elemento de formulário, perde o foco da aplicação.

Change (onchange): Este evento se produz quando o usuário muda o conteúdo de um elemento de formulário, tipo select, input ou textarea.

Click (onclick): Se produz quando o usuário clica sobre um elemento da página, que pode ser um botão, um link, etc.

DblClick (ondblclick): Este evento é produzido quando o usuário clica duas vezes em um elemento de formulário ou em um link.

DragDrop (ondragdrop): Este evento se produz quando o usuário arrasta e solta um objeto na janela do navegador.

Error (onerror): produzido quando houve um erro no carregamento de um elemento da página ou de um documento.

Focus (onfocus): Este evento se produz quando um elemento da página, geralmente um elemento de formulário, ganha o foco da aplicação.

KeyDown (onkeydown): Este evento se dispara quando o usuário pressiona uma tecla.

KeyPress (onkeypress): O evento onkeypress é disparado quando o usuário pressiona ou mantém pressionada uma tecla.



http://www.criarweb.com/artigos/manipuladores-eventos-javascript.html




KeyUp (onkeyup): Se produz quando o usuário solta uma tecla que tinha pressionada.

Load (onload): Se executa quando a página termina de ser carregada, ou então todos os frames do conjunto de FRAMESET.

MouseDown (onmousedown): Este evento se produz quando o usuário aperta o botão do mouse.

MouseMove (onmousemove): Se executa quando o usuário move o mouse.

MouseOut (onmouseout): É disparado quando o usuário retira o ponteiro do mouse. Por exemplo, se colocamos onmouseout sobre uma imagem, o evento é disparado no momento em que o usuário sai com o ponteiro do mouse dessa imagem.

MouseOver (onmouseover): Este evento se desata quando o usuário move o ponteiro do mouse sobre um elemento. Imaginemos que colocamos este evento em uma imagem, então se produz, uma só vez, no momento de entrar com o ponteiro na área ocupada por essa imagem.

MouseUp (onmouseup): Este evento se produz quando o usuário solta ou deixa de pressionar o botão do mouse.

Move (onmove): Se produz quando o usuário ou um script movem a janela do navegador.

Reset (onreset): O evento se executa quando se reseta o conteúdo de um formulário, clicando em um botão de reset do formulário, se tiver.

Resize (onresize): É disparado quando o usuário, ou um script, alteram o tamanho de uma janela do navegador ou de um frame.

Select (onselect): O evento se produz quando o usuário seleciona um texto de um textarea ou de um campo de texto normal.

Submit (onsubmit): Se lança quando se aperta o botão de submeter de um formulário, assim que permite executar código quando o usuário envia o formulário.

UnLoad (onunload): Evento produzido quando o usuário sai de um

documento, ou seja, ao sair da página web, seja por pressionar um link que leva a outra página ou por fechar a janela do navegador.

Efeitos rápidos com Javascript Antes de aprofundarmos na matéria, veremos alguns exemplos de códigos simples de grande utilidade.





Antes de aprofundarmos na matéria, podemos ver uma série de efeitos rápidos que se podem programar com Javascript. Isto, pode nos dar uma idéia más clara e exata das capacidades e da potência da linguagem na hora de percorrer os próximos capítulos. Abrir uma janela secundária Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante atrativas. Por exemplo podemos ver como abrir uma janela

secundária sem barras de menus que mostre o buscador Google. O código seria o seguinte: < script> window.open("http://www.google.com","","width=550,height=420,menubar=no") < /script> Podemos ver o exemplo em funcionamento aqui. Uma mensagem de boas vindas Podemos mostrar uma caixa de texto emergente ao terminar de carregar o portal de nosso site web, que poderia dar as boas vindas aos visitantes. < script> window.alert("Bem-vindo ao meu site web. Obrigado...") < /script> Podemos ver o exemplo em uma página a parte. Data atual Vejamos agora um simples script para mostrar a data de hoje. Às vezes é muito interessante mostrá-la nas webs para dar um efeito de que a página está "ao dia", ou seja, está atualizada. < script> document.write(new Date())< /script> Estas linhas deveriam ser introduzidas dentro do corpo da página no lugar onde quisermos que apareça a data da última atualização. Podemos ver o exemplo em funcionamento aqui.

Nota: Um detalhe a destacar é que a data aparece em um formato um pouco raro, indicando também a hora e outros atributos da mesma,



http://www.criarweb.com/artigos/exemplos/javascript/abrir_vent_1.html


http://www.criarweb.com/artigos/exemplos/javascript/boasvindas_1.html

http://www.criarweb.com/artigos/exemplos/javascript/data.html

http://www.criarweb.com/artigos/exemplos/javascript/data.html

mas já aprenderemos a obter exatamente o que desejarmos no formato correto.

Botão de voltar Outro exemplo rápido pode ser visto a seguir. Trata-se de um botão para voltar para trás, como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de código que mistura HTML e Javascript para criar este botão que mostra a página anterior no histórico, se é que havia. < input type=button value=Atrás onclick="history.go(-1)"> O botão será parecido ao seguinte. Podemos clicá-lo para ver seu funcionamento (deveria nos levar à página anterior).

Como diferença com os exemplos anteriores, há que destacar que neste caso

a instrução Javascript se encontra dentro de um atributo de HTML, onclick, que

indica que essa instrução tem de ser executada como resposta ao clicar no

botão.

É possível comprovar a facilidade com a qual se podem realizar algumas ações

interessantes, e existiriam muitas outras mostras, mas que reservamos para

capítulos posteriores.

Abertura e configuração de popups com Javascript Este artigo lhe mostrará com detalhes como abrir janelas e configurar sua

forma.




Em determinadas ocasiões é muito útil abrir um link em uma janela secundária, ou seja, uma janela a parte que se abre para mostrar uma informação específica. Algumas vantagens de abrir um link em uma janela secundária seriam:

O usuário não sai da página onde estava o link. A janela secundária pode ser configurada livremente com o qual podem

ser feitas janela maiores ou menores e com mais ou menos menus. Em geral, o grau de controle da janela secundária utilizando Javascript

aumenta.

Clique aqui para ver o

que é uma janela

secundária




Para abrir uma janela secundária podemos fazer de duas maneiras, com HTML e com Javascript. Vejamos cada uma delas:

Abrir uma janela com HTML

Pode-se conseguir abrir uma janela secundária muito facilmente simplesmente com HTML. Para isso podemos utilizar o atributo TARGET das etiquetas HREF. Se colocamos target="_blank" no link, a página se abrirá numa janela secundária. Também podemos colocar target="xxx" para que o link se apresente na janela chamada xxx ou no frame xxx. O link teria que ter esta forma:

< a href="minhapagina.html" target="_blank"> O problema de abrir uma página secundária com HTML consiste em que não podemos definir a forma desta e nem poderemos exercer maior controle sobre ela tal como comentávamos entre as vantagens de abrir uma janela secundária com Javascript. A janela que se abre sempre será como o usuário tenha definido por padrão em seu navegador.

Abrir uma janela com Javascript

Para abrir uma janela com Javascript podemos utilizar a sentença window.open(). Não tem problema se você não conhece Javascript, visto que é muito simples utiliza-lo para este caso. Veremos passo a passo como abrir uma janela secundária utilizando Javascript. 1. Sentença Javascript para abrir uma janela A sentença é simplesmente a função window.open(), o mais complicado é saber como utilizar esta função, mas agora veremos que não requer nenhuma complicação. A função window.open() recebe três parâmetros, que se colocam dentro dos parênteses, deste modo: window.open(URL,nome_da_janela,forma_da_janela)

Vejamos rapidamente cada um destes parâmetros separadamente. URL: representa o URL que desejamos abrir na janela secundária, por exemplo http://www.criarweb.com nome_da_janela: é o nome que se atribui a esta janela para dirigir links com o atributo target do HTML forma_da_janela: se indica o aspecto que vai ter a janela secundáaria. Por



exemplo, pode-se definir sua altura, largura, se têm barras de deslocamento, etc Vejamos um exemplo de sentença Javascript completa para abrir uma janela secundária: window.open("http://www.criarweb.com" , "janela1" , "width=120,height=300,scrollbars=NO") Isto quer dizer que abra a página inicial de criarweb.com em uma janela secundária a qual vamos chamar janela1. Ademais, a janela será de 120 pixels de largura, 300 de altura e não terá barras de deslocamento. Um esclarecimento adicional, se depois de abrir essa janela colocarmos outro link na página que abria a janela cujo atributo target está dirigido para o nome_da_janela (neste caso janela1), este link será mostrado na janela secundária. 2. Função que abre uma janela Os mais cômodo para abrir uma janela é colocar uma função Javascript que se encarregue das tarefas de abri-la e que receba por parâmetro a URL que se deseja abrir. O script é simples, vejamos a seguir: < script language=javascript> function janelaSecundaria (URL){ window.open(URL,"janela1","width=120,height=300,scrollbars=NO") } < /script> 3. Colocamos um link Este link não deve estar dirigido diretamente à página que quisermos abrir, e sim, à sentença Javascript necessária para abrir a janela secundária. Para executar uma sentença Javascript com o clique de um link, fazemos assim: <a href="javascript:sentenca_javascript_para_abrir_a_janela"> 4. O link chama à função que abre a janela

Agora Vejamos como ficaria todo esse link na página. <a href="javascript:janelaSecundaria('http://www.criarweb.com')"> Clique neste link para abrir a janela secundaria</a> Que dá como resulado:

Clique neste link para abrir a janela secundária

(Na página que formos colocar este link deveríamos ter o script que fizemos anteriormente que continha a função para abrir a janela.)

Há que observar que as aspas simples são as que são colocadas para definir o URL que se passa como parâmetro da função janelaSecundaria(). São aspas simples porque o href do link já tem umas aspas duplas, e dentro das aspas duplas sempre se deve utilizar aspas simples a não ser que desejemos fechar as aspas duplas.

Parâmetros para dar forma a uma janela

Estes atributos podem ser utilizados na função window.open() para definir a forma que desejar que tenha sua janela secundária.

Width Ajusta a largura da janela. Em pixels

Height Ajusta a altura da janela

Top Indica a posição da janela. Na verdade é a distancia em

pixels que existe entre a borda superior da tela e a

borda superior da janela.

Left Indica a posição da janela. Em concreto é a distancia

em pixels que existe entre a borda esquerda da tela e a

borda da janela.

Scrollbars Para definir de forma exata se saem ou não as barras

de deslocamento. scrollbars=NO fazem com que nunca

saiam. Scrollbars=YES faz com que sempre saiam

(sempre em ie e somente se forem necessárias em

NTS).

Resizable Establece se se pode ou não modificar o tamanho da

janela. Com resizable=YES pode-se modificar o

tamanho e com resizable=NO consegue-se um tamanho

fixo.

Directories

(barra diretorios)

A partir de aqui se enumeram outra série de

propriedades que serven para mostrar ou não um

elemento da barra de navegação que tem os

navegadores mais populares, como poderia ser a barra

de menus ou a barra de estado.

Location

(barra endereços)

Menubar

(barra de menus) Quando colocamos o atributo=YES estamos forçando

que esse elemento seja visto. Quando colocamos

atributo=NO o que fazemos é evitar que esse elemento

seja visto.

Status

(barra de estado)

Titlebar

(a barra do título)

Toolbar

(barra de ferramentas)

Abrir uma janela sem um link

Em outras ocasiões desejaremos abrir uma janela secundária

automaticamente, ou seja, sem a necessidade de que o usuário clique sobre

nenhum link. Neste caso, o código da função janelaSecundaria nos serve

também e teremos que acrescentar uma linha de código Javascript em seguida

da função janelaSecundaria. Esta linha a acrescentar simplesmente será uma

chamada à função que se executará Segundo esteja carregando a página.

Vejamos como ficaria este código:

< script language=javascript>

function janelaSecundaria (URL){

window.open(URL,"janela1","width=120,height=300,scrollbars=NO")

}

janelaSecundaria("http://www.criarweb.com");

< /script>

Fica em negrito o que seria a chamada à função que abre a janela secundária,

como está fora de uma função se executa segundo estiver carregando a

página.

Acessso por senha Javascript Este artigo explica passo a passo como criar um sistema para proteger por senha umas páginas em sua web. Utilizamos Javascript, uma

linguagem acessível a todo mundo.






Lamentavelmente, javascript não é uma linguagem com a qual se possa realizar um método interessante para fazer com que algumas páginas de nosso site somente seja acessíveis se se introduz uma senha correta. Mesmo assim, existe um mecanismo para poder realizar isto, que não é muito avançado nem muito seguro, mas pode dar um efeito em nossas páginas que estamos desejando. Trata-se de colocar páginas web em nosso espaço de links, para que ninguém possa acessa-las. Esta é toda a segurança que podemos dar a nossas páginas: como não existem links dirigidos para elas, ninguém poderá acessa-las. A única maneira de acessar as páginas seria conhecendo o nome de arquivo e escrever a URL do mesmo, mas como também não vamos publicar o nome do arquivo, poderemos estar quase certos de que ninguém acertará

construir o endereço da página que queremos ocultar. Logo, criaremos um formulário muito simples, que incluirá um campo de texto e um botão. No campo de texto teremos que escrever o nome do arquivo que se deseja ver e ao clicar o botão javascript seremos conduzidos para a página que tiver esse

nome de arquivo. Nesse ponto pode acontecer duas coisas:

1. Primeiro, que o nome de arquivo seja incorreto, ou seja, inventamos a senha mas não acertamos com o nome da página escondida. Neste caso, se mostraria uma página de erro típica, dessas que o servidor mostra quando tentamos acessar a uma página que não existe.

2. Segundo, que o nome da página seja correto, ou seja, que a senha que introduzimos seja igual ao nome do arquivo queremos acessar. Neste caso, javascript nos conduzirá ao lugar correto e poderemos ver a página oculta.

Vejamos passo a passo como construir este sistema de acesso por senha:

1.- As páginas para desenvolver

Temos que trabalhar com 2 páginas web pelo menos, uma para colocar o formulário e outra que seria a página oculta. Teremos estas páginas colocadas no mesmo diretório, com o qual simplificaremos um pouco o problema.

2.- Formulário para a senha

Na página que quisermos colocar o acesso por senha, devemos colocar o seguinte formulário: < FORM name=formsenha> < INPUT type=password name=senha> < INPUT type=button value=Acessar> < /FORM>




3.- Função que nos envia à página oculta

Como a página oculta tem como nome de arquivo o que tivermos escrito no campo de texto, poderemos acessa-la da seguinte forma: < SCRIPT> function acesso(){ window.location = document.formsenha.senha.value + ".html" } < /SCRIPT> A função é muito simples, o único que faz é concatenar o nome que foi escrito no campo de texto com ".html" e nos manda, utilizando window.location, diretamente à página cujo nome acaba de ser construido.

Como concatenamos com ".html" o nome do arquivo escrito no formulário, o nome que escrevermos deverá ir sem ".html".

4.- Incluir no botão a chamada à função

Com o objetivo de que ao clicar o botão o navegador nos leve à página oculta, temos que fazer com que ao clica-lo, seja chamada a função acesso definida no ponto anterior. Isto se consegue mediante o atributo onclick, que devemos inserir na etiqueta do botão. < INPUT type=button value=Acessar onclick="acesso()">

5.- Código inteiro da página

Podemos ver a seguir o código da página inteira. Somente mostramos o código da página que tem o formulário, porque a página oculta poderá ser como cada um desejar. < html> < head> <title>senha acesso</title> < /head> < body>

< SCRIPT> function acesso(){ window.location = document.formsenha.senha.value + ".html" } < /SCRIPT> < FORM name=formsenha> < INPUT type=password name=senha>

< INPUT type=button value=Acessar onclick="acesso()"> < /FORM> < /body> < /html>

6.- Últimos anotações

Uma coisa importante na hora de conseguir que o script seja mais confiável

consiste em criar páginas com um nome de arquivo difíicil de se inventar.

Como o nome da página é a senha com a qual vai ser acessada a página

necessitaremos que tal nome seja um pouco complexo, como por exemplo,

fks12dmxc53.html. Se a página senha se chamasse por exemplo, index.html

qualquer um com um pouco de imaginação poderia inventa-la.

Antes de terminar, cabe repetir que este não é o método mais seguro que

existe para criar scripts para realizar acessos restringidos, é somente uma

pequena astúcia que "funciona". Para realizar este objetivo com melhores

resultados temos linguagens como ASP, PHP ou CGI. Também podemos

restringir o acesso às páginas utilizando o própio sistema operativo e a

autentificação que este implementa, tal vez seja a opção mais cômoda, embora

não seja cem porcento provável que o nosso provedor de hospedagem nos

permita.

Rollover com Javascript Aprenda a fazer um efeito de iluminação sobre uma imagem ao passar o mouse por cima. Pelo ponto de vista prático, você mesmo será capaz de fazer em alguns minutos.




Fazer com que mude uma imagem ao passar o mouse por cima, como convidando a clicar, chamamos de rollover. É um dos efeitos mais vistosos que podemos incluir em uma página web con poucas linhas de Javascript, e sem necessidade de saber programar. Vamos ver a técnica pela prática e com uma elemental receita:

1. Nomeamos a imagem

Exemplo de rollover





Colocamos na página a imagem que tem o desenho apagado. Além disso, lhe atribuímos um nome, para poder nos referirmos a ela mediante JavaScript.

<img src="desenho_apagado.gif" name="imagen1">

2. Colocamos um link na imagem Agora colocamos o link cujo queremos navegar no momento no qual o usuário clique nele.

<a href="ir_a.html">

3. Começamos com JavaScript Devemos colocar dois atributos HTML ao link que vai nos servir para realizar o efeito buscado. OnMouseOver, com ele indicaremos, mediante JavaScirpt, a ação a realizar quando pousarmos o mouse em cima da imagem. OnMouseOut nos serve para definir o evento de retirar o mouse da imagem,

<a href="ir_a.html" onmouseover="-Código JavaScript-" onmouseout="-Código JavaScript-">

4. Pegamos as imagens com JavaScript Vamos declarar duas variáveis com JavaScript para salvar as imagens iluminada e apagada. Para isso, vamos utilizar a etiqueta <SCRIPT> de HTML. Podemos colocar o script em qualquer lugar, mas seria mais adequado colocar antes da imagem. Os números que vocês verão correspondem com a largura e com a altura da imagem que estão pegando.

<script language=javascript> iluminada = new Image(84,34) iluminada.src = "desenho_iluminado.gif" apagada = new Image(84,34) apagada.src = "desenho_apagado.gif" </script>

5. Escrevemos o código dos eventos Para acessar um elemento de JavaScript utilizamos a hierarquia de objetos de JavaScript. Pode ser complicada, mas nosso objetivo é simples, assim faremos:



window.document['nome_da_imagem'].src = variavel_imagem_javascript.src

Teoricamente, os atributos HTML dos eventos onmouseover e onmouseout ficarão assim: onmouseover="window.document['imagem1'].src= iluminada.src onmouseout="window.document['imagem1'].src = apagada.src

5. Este é o código completo


iluminada = new Image(84,34)

iluminada.src = "desenhoiluminado.gif"

apagada = new Image(84,34)

apagada.src = "desenhoapagado.gif"

< /script>

< a href="ir_a.html"

onmouseover="window.document['imagem1'].src = iluminada.src"

onmouseout="window.document['imagem1'].src = apagada.src">

< img src="images/eugimlogo.gif" border=0 name="imagem1" width=84

height=34>

< /a>

Isto é o único que vocês deve ser feito para iluminar uma imagem, é um

primeiro passo, agora vocês podem provar com um grupo de imagens para

criar uma barra de navegação dinâmica com Javascript!

Navegador dinâmico Javascript Mostramos com um exemplo prático como criar uma barra de navegação dinâmica com algumas imagens e Javascript.















Vamos ver como fazer, com Javascript e umas imagens, uma barra de navegação para uma página web, que mude quando o mouse passe por cima. Esta ajuda técnica está pensada para ser lida em seguida do informe Rollover com Javascript, publicado em CriarWeb, pois contém as bases sobre o que vamos trabalhar agora.

1. Construimos as imagens

Temos que construir duas versões de barra de navegação, umas que esteja iluminada, por assim dizer, e outra que esteja um pouco apagada. Ao passar o mouse mudaremos de uma a outra.

Aqui estão as imagens que propomos para este exercício:

APAGADAS ILUMINADAS

2. Criamos a barra com HTML

Com uma tabela de HTML vamos fazer a barra de navegação para a página, ainda sem movimento. Cm estes detalhes:

À princípio colocamos as imagens apagadas Cada imagem tem um link à página correspondente Demos um nome diferente a cada imagem com o atributo name. desde

imagem1 até a imagem6. Nossa tabela tem cellpadding e cellspacing 0 para que não fique

separação entre as imagens. Por esta última razão, também não devemos deixar espaço em branco no código HTML entre os TD e as imagens.

<table cellspacing="0" cellpadding="0" border="0">

<tr>

<td><a href="portada.html"><img src="portada1.gif" width=110 height=16

alt="Portada" border="0" name="imagem1"></a></td>


















































</tr>

<tr>

<td><a href="aficciones.html"><img src="aficciones1.gif" width=110

height=16 alt="Aficciones" border="0" name="imagem2"></a></td>

</tr>

<tr>

<td><a href="curriculum.html"><img src="curriculum1.gif" width=110

height=16 alt="Curriculum" border="0" name="imagem3"></a></td>

</tr>

<tr>

<td><a href="mitierra.html"><img src="mitierra1.gif" width=110 height=16

alt="Mi tierra" border="0" name="imagem4"></a></td>

</tr>

<tr>

<td><a href="amigos.html"><img src="amigos1.gif" width=110 height=16

alt="Amigos" border="0" name="imagem5"></a></td>

</tr>

<tr>

<td><a href="links.html"><img src="links1.gif" width=110 height=16

alt="Links" border="0" name="imagem6"></a></td>

</tr>

</table>

3. Pré-carregamos as imagens

Para ter as imagens já em nosso explorador antes de que sejam utilizadas, devemos pré-carregar usando Javascript, assim conseguiremos que o efeito de rollover seja rápido, e mudem as imagens velozmente segundo se passe o mouse. Utilizaremos este código, que se coloca no cabeçalho do documento HTML:

<script>

iluminada1 = new Image(110,16) iluminada1.src = "portada2.gif" apagada1 = new Image(110,16) apagada1.src = "portada1.gif"

iluminada2 = new Image(110,16)

iluminada2.src = "aficciones2.gif" apagada2 = new Image(110,16)

apagada2.src = "aficciones1.gif"

iluminada3 = new Image(110,16) iluminada3.src = "curriculum2.gif"

apagada3 = new Image(110,16) apagada3.src = "curriculum1.gif"

iluminada4 = new Image(110,16) iluminada4.src = "mitierra2.gif" apagada4 = new Image(110,16) apagada4.src = "mitierra1.gif"

iluminada5 = new Image(110,16) iluminada5.src = "amigos2.gif" apagada5 = new Image(110,16) apagada5.src = "amigos1.gif"


iluminada6.src = "links2.gif" apagada6 = new Image(110,16)

apagada6.src = "links1.gif"

</script>

4. Os eventos

Temos que definir os eventos onmouseover e onmouseout para cada um dos links, indicando a mudança da imagem à iluminada e à apagada respectivamente.

onmouseover="window.document['imagem1'].src =iluminada1.src" onmouseout="window.document['imagem1'].src = apagada1.src"






5. Código inteiro

Isso é tudo que se necessita. A seguir podemos ver o código inteiro deste exemplo:

<html> <head>

<title>Navegador</title> <script>

iluminada1 = new Image(110,16) iluminada1.src = "portada2.gif" apagada1 = new Image(110,16) apagada1.src = "portada1.gif"


iluminada2.src = "aficciones2.gif" apagada2 = new Image(110,16)

apagada2.src = "aficciones1.gif"

iluminada3 = new Image(110,16) iluminada3.src = "curriculum2.gif"

apagada3 = new Image(110,16) apagada3.src = "curriculum1.gif"

iluminada4 = new Image(110,16) iluminada4.src = "mitierra2.gif" apagada4 = new Image(110,16) apagada4.src = "mitierra1.gif"

iluminada5 = new Image(110,16) iluminada5.src = "amigos2.gif" apagada5 = new Image(110,16) apagada5.src = "amigos1.gif"


iluminada6.src = "links2.gif" apagada6 = new Image(110,16)

apagada6.src = "links1.gif"

</script> </head>

<body bgcolor="#6e6d52"> <table cellspacing="0" cellpadding="0" border="0">

<tr> <td><a href="portada.html"

onmouseover="window.document['imagem1'].src =iluminada1.src" onmouseout="window.document['imagem1'].src = apagada1.src"><img

src="portada1.gif" width=110 height=16 alt="Portada" border="0"

name="imagen1"></a></td> </tr> <tr>

< td><a href="aficciones.html" onmouseover="window.document['imagem2'].src =iluminada2.src"

onmouseout="window.document['imagem2'].src = apagada2.src"><img src="aficciones1.gif" width=110 height=16 alt="Aficciones" border="0"


< td><a href="curriculum.html" onmouseover="window.document['imagem3'].src =iluminada3.src"

onmouseout="window.document['imagem3'].src = apagada3.src"><img src="curriculum1.gif" width=110 height=16 alt="Curriculum" border="0"


< td><a href="mitierra.html" onmouseover="window.document['imagem4'].src =iluminada4.src"

onmouseout="window.document['imagem4'].src = apagada4.src"><img src="mitierra1.gif" width=110 height=16 alt="Mi tierra" border="0"


< td><a href="amigos.html" onmouseover="window.document['imagem5'].src =iluminada5.src"

onmouseout="window.document['imagem5'].src = apagada5.src"><img src="amigos1.gif" width=110 height=16 alt="Amigos" border="0"


< td><a href="links.html" onmouseover="window.document['imagem6'].src =iluminada6.src"

onmouseout="window.document['imagem6'].src = apagada6.src"><img src="links1.gif" width=110 height=16 alt="Links" border="0"

name="imagen6"></a></td> </tr>

</table>

</body> </html>

Exemplo funcionando





Evidentemente, existem muitas outras maneiras de fazer uma barra de

navegação, mas esta é uma boa forma. Com um pouco de criatividade você

pode criar umas imagens bonitas que façam uns efeitos legais ao passar o

mouse por cima.

Navegador desdobrável Para aprender em poucos passos a criar um navegador formado por um menu desdobrável. Ao selecionar uma opção do menu iremos a uma

página distinta.




Está na moda incluir um navegador de website consistente em um campo desdobrável de formulário ou de caixa de seleção que, ao selecionar um de seus elementos, que se correspondem com seções do site, nos leve à seção

que pretendemos visitar de maneira automática.

Pode ser visto a seguir um exemplo.

Este tipo de controle possui várias vantagens, entre as quais podemos destacar:

Ocupa pouco espaço na página Pode-se colocar quantas opções se desejar É uma ferramenta muito visual e prática É muito fácil de implementar

Passos a realizar:

Para conseguir um navegador assim em nossa página web devemos enfrentar uma tarefa que poderia ser dividida em duas partes. Por um lado, devemos






















criar um formulário que contenha a caixa de seleção desdobrável e por outro, um simples script que dê vida à caixa, ou seja, que prepare a caixa para que o navegador se dirija à página selecionada. Vamos ver separadamente cada um destes elementos.

Formulário

Custará da etiqueta <form> para abrir e fechar o formulário. Daremos um nome ("navegador") ao formulário para poder acessa-lo mais tarde usando Javascript.

Dentro do formulário colocaremos um único elemento: o campo de seleção múltipla desdobrável. Daremos um nome também ao campo ("secoes") para poder acessá-lo usando Javascript. Este campo conterá as diferentes opções

que queremos que sejam apresentadas no menu desdobrável. Estas poderão ser seções de sua web ou também, páginas que estejam fora do site.

Vamos ver o código do formulário antes de continuar com a explicação:

<form name=navegador> < select name="secoes"> < option value="no">Seções e serviços de CriarWeb < option value="no">-------------------------------------- <option value="http://www.criarweb.com/">Portal < option value="http://www.criarweb.com/manuais.asp">Manuais < option value="http://www.criarweb.com/divulgacao">Divulgação de páginas < option value="http://www.criarweb.com/contribue/">Colaborar < option value="no">-------------------------------------- <option value="http://www.criarweb.com/contato/">Entrar em contato < option value="http://www.criarweb.com/livro_visitas/">Livro de visitas < /select> < /form>

Se você observar, cada opção corresponde a uma das seções ou serviços de criarweb e está composta por duas partes importantes, a primeira corresponde com o atributo value da etiqueta <option>, que é igual à URL absoluta da página ao qual queremos nos dirigir. A segunda parte destacável corresponde com o nome que desejarmos que seja visto na caixa de seleção.

É também importante destacar que incluímos alguma opção que não quisemos que nos direcione a nenhum lugar. São opções para separar as seções dos serviços ou a primeira opção, para indicar que este menu desdobrável contém as seções e serviços de criarweb. As opções que não quisermos que nos levem a outra página são marcadas com um "no" em seu atributo value.

O script

Agora vamos ver qual é o script que utilizamos para animar este menu desdobrável. É muito simples, podemos vê-lo a seguir:

<script language=javascript>

function destino(){

url = document.navegador.secoes.options[document.navegador.secoes.selectedIndex].value

if (url != " no") window.location = url;

}

</script>

Basicamente é uma função que recupera o value da opção selecionada na

caixa de seleção desdobrável e o armazena em uma variável chamada url. Posteriormente, se a variável url não contém a palavra "no", leva ao navegador à posição selecionada, ou seja, ao url que havíamos buscado. Lembrem que se marcávamos o value de uma opção a "no" é que não desejávamos que o navegador viajasse a outro endereço.

O evento OnChange

Isto não funcionaria se não vinculássemos o evento onchange da caixa de seleção à função destino que vimos agora pouco. O evento onchange se dispara quando se muda o valor selecionado dentro do menu desdobrável e devemos fazer com que chame a função destino. Para isso, na etiqueta <select> devemos incluir o seguinte atributo onchange="destino()". A etiqueta ficaria assim:

<select name="secoes" onchange="destino()">

Com tudo isto junto você já terá um bonito navegador desdobrável e, esperamos, a capacidade para personalizá-lo a seu gosto. Mais uma coisa: se o seu site tem frames deverá ser feito algumas mudanças no script para que tudo funcione corretamente.

Navegador desdobrável com frames

É a continuação da ajuda técnica para criar um menu desdobrável. Neste caso se realiza uma adaptação do script para que possa ser utilizado em um site desenhado com frames.




Este é um artigo que debe ser lido como continuação do artigo Como fazer um navegador desdobrável, publicado em criarweb.com. Nesse artigo mostrávamos como criar um navegador desdobrável com um elemento SELECT de um formulário.

Muitos visitantes já utilizaram o script com sucesso, mas alguns escreveram com dúvidas de sua utilização em uma página realizada com frames. A dúvida consiste em que o navegador somente nos atualiza o frame no qual está, e o interessante para eles seria que atualizasse um frame diferente. É um problema muito lógico visto que muitas vezes o navegador se coloca de modo que esteja sempre visível, em um frame onde temos os controles de navegação e a área que desejarmos que se atualize é a correspondente ao frame principal.

Mudanças no script

O único lugar onde vamos ter que fazer mudanças é no script que contem a

função a qual chamamos destino(). Há que adaptar essa função para que

possamos mudar a página de um frame distinto ao que estamos.

Em nosso exemplo anterior fazíamos window.location = url para mudar o

conteúdo do frame onde estava o navegador. Agora devemos mudar o

window.location de um frame distinto a este e para acessar a location de um

frame distinto se consegue através desta inter-ligações de objetos:

window.parent.frames[].window.location

frames[] é um vetor de frames onde o primeiro frame do FRAMESET seria

frames[0], o segundo seria frames[1] e assim sucessivamente. Caso não tenha

ficado claro, vejamos com um exemplo.

Temos este FRAMESET

< frameset rows="*,40">

<frame name="principal" src="index.html" marginwidth="10" marginheight="10"

scrolling="auto" frameborder="no">

<frame name="menudesdobravel" src="desdob.html" marginwidth="10"








marginheight="10" scrolling="auto" frameborder="no">

< /frameset>

No segundo frame temos a página que contem menu desdobrável. Como é o

segundo frame acessaríamos a sua location desta maneira:

window.parent.frames[1].window.location = url

O script inteiro ficaria assim:


function destino(){

url =

document.navegador.secoes.options[document.navegador.secoes.selectedInde

x].value

if (url != "no") window.parent.frames[0].window.location = url;

}

< /script>

Isso é tudo, já não faz falta mudar mais coisas para cumprir nossos objetivos.

Texto em movimento na barra de estado Vemos um simples script para fazer com que se mova um texto pela barra de estado de nosso navegador.




Vamos ver neste artigo como fazer para que se mova um texto pela barra de estado de nosso navegador. É um script bastante simples e corrente. Sem dúvida, pode ser fácil pegar o script, copiar em nossa página e fazê-lo funcionar, mas nós vamos procurar uma explicação para que tudo fique mais claro e entendamos um pouco o que estamos fazendo.

Este script vai criar um texto que se moverá da direita à esquerda pela barra de estado. Pode-se ver na página de exemplo. Agora vejamos os distintos passos. 1. Defino umas variáveis iniciais O script pode mover o texto que nós desejarmos e para configurá-lo há que criar uma variável que chamamos texto_estado onde introduziremos nosso




http://www.criarweb.com/artigos/reportajes/archivos/exemplotextobarraestado.html

texto. var texto_estado = " Bem-vindo a minha página web" Podemos notar que foram introduzidos uns espaços antes que o texto. São para que se crie um espaço na barra de estado entre a saída do texto e a entrada deste pelo outro lado. O número de espaços em branco pode ser modificado livremente, assim como o texto que se mostra. Também será necessário criar uma variável chamada posição onde vamos salvar a posiç/ao do texto na barra de estado. var posicao = 0 2. Função para mover o texto Agora vamos ver a função, a qual chamaremos move_texto(), que se encarrega de mover o texto pela barra de estado. Entender esta função pode ser um pouco complexo se não se conhece um pouco a linguagem Javascript. De qualquer forma, podemos também copia-la e cola-la em nossas páginas

embora não consigamos entender. Realiza quatro ações básicas:

Move a posição atual, atualizando a variável posição. Se chegarmos ao final da cadeia, volta-se ao princípio if (posicao < texto_estado.length) posicao ++; else posicao = 1;

Cria uma cadeia a partir do texto original. A cadeia criada contém o texto que existe desde a posição atual até o final concatenado com o que há desde o princípio até a posição atual. Este é o passo que realmente gera o movimento, porque vai mudando a cadeia que logo escreveremos à medida que a posição também muda. string_atual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao)

Escreve a cadeia resultante da operação anterior na barra de estado. window.status = string_atual

A função chama-se a si mesma para continuar o movimento. Para isso, utiliza-se uma função muito socorrida, setTimeout(), que serve para executar uma sentença com atraso de tempo. A função recebe a sentença para executar (que neste caso, é uma chamada a mesma

função) e o número de milésimos de segundos que tem que esperar para executa-la, neste caso 50. setTimeout("move_texto()",50)

A função inteira tem este código: function move_texto(){ if (posicao < texto_estado.length) posicao ++;



else posicao = 1; string_actual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao) window.status = string_atual setTimeout("move_texto()",50) } 3. Chamamos à função Para começar a mover o texto pela página temos que realizar uma chamada à função que se encarrega disso. Será mais claro o código da página se colocarmos a chamada à função depois que tiver sido definida, embora não seja obrigatório. move_texto() 4. Tudo junto Para acabar, podemos observar a seguir o código inteiro de uma página web que move texto pela sua barra de estado. É um página bastante simples depois de tudo. <html> <head> <title>Texto ena barra de estado</title> <script language="javascript"> //texto da mensagem var texto_estado = " Bem-vindos a minha página web" var posicao = 0 //funcao para mover o texto da barra de estado function move_texto(){ if (posicao < texto_estado.length) posicao ++; else posicao = 1; string_atual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao) window.status = string_atual setTimeout("move_texto()",50)

} move_texto() </script> </head>

<body> <h1>Exemplo de script com um texto na barra de estado</h1>

</body> </html> Pode-se ver o exemplo em funcionamento. 5. Outro exemplo Dependendo do script que utilizarmos para mover o texto da barra de estado conseguiremos uns efeitos ou outros. A seguir podemos ver um segundo exemplo sobre como mover um texto pela barra de estado utilizando um efeito de movimento distinto. Não vamos comentar este segundo exemplo porque já se encontra comentado no próprio código fonte, mas poderemos ver que é muito parecido ao anterior. <html> <head> <title>Segundo exemplo de texto em movimento</title> </head>

<body> <h1>Texto em movimento na barra de estado</h1> <h2>Exemplo 2</h2>

<script language="javascript">

//variável com o texto a mostrar var texto = "Bem-vindos a minha página web!!!" //variavel coma osicao no texto. Colocar sempre a 0 var pos = 0

//crio uma funcao para mudar o texto da barra de estado function textoEstado(){ //incremento a posicao em 1 e extraio o texto a mostrar neste momento. pos = pos + 1 textoAtual = texto.substring(0,pos) //coloco o texto que quero mostrar na barra de estado do navegador window.status = textoAtual //Chamamos outra vez a esta funcao para que continue mostrando texto if (pos == texto.length){ //se chegamos ao final, volto ao principio e faco um atraso superior

pos = 0 setTimeout("textoEstado()",1500) } else{ //se nao chegamos ao final, continuo com a funcao um atraso minimo. setTimeout("textoEstado()",100) } }

http://www.criarweb.com/artigos/reportajes/archivos/exemplotextobarraestado.html

http://www.criarweb.com/artigos/reportajes/archivos/exemplotextobarraestado2.html

http://www.criarweb.com/artigos/reportajes/archivos/exemplotextobarraestado2.html

//chamo à função para colocar o texto em movimento textoEstado() </script>

</body> </html>

Marcar ou desmarcar todos os checkboxes de um formulário com Javascript Realizamos uma função de Javascript para que se possa selecionar todos os checkboxes ou caixas de seleção de um formulário de uma só vez, clicando somente um link. Fazemos também a função para desmarcar

todos os elementos de uma só vez.




O exercício que vamos relatar neste artigo é bastante típico de trabalho com

formulários em Javascript. Trata-se de fazer um link para que se possa marcar

todos os campos checkbox que houver em um formulário de uma só vez, ou

seja, sem ter que clica-los um por um para marcar todos. Também faremos a

função que permite desmarcar todos os campos checkbox do formulário de

uma só vez.

O exercício é simples de entender, mas podemos vê-lo em uma página a parte

para termos uma idéia exata de nossas intenções.

O formulário HTML

Temos um formulário criado com HTML que é onde estarão os checkboxes que

serão marcados e desmarcados automaticamente. O formulário é muito

simples. Vemos a seguir:

< form name="f1">

Nome: <input type="text" name="nome">

< br>

< input type="checkbox" name="ch1"> Opcao 1

< br>


< br>



http://www.criarweb.com/artigos/exemplos/tallerjs/formulario-check.html

< br>


< br>

//Outro campo de formulario:

< select name=outro>

< option value="1">Selecao 1

< option value="2">Selecao 2

< /select>

< br>

< input type="submit">

< br>

< br>

< a href="javascript:selecionar_todo()">Marcar todos</a> |

< a href="javascript:deselecionar_todo()">Marcar nenhum</a>

< /form>

O único que devemos observar é que colocamos diversos tipos de elementos

no formulário. Na verdade só vamos trabalhar com o estado dos checkbox,

mas não incluímos outros elementos porque o habitual em um formulário é que

tenham elementos de vários tipos.

No final do formulário temos dois links para marcar ou desmarcar todos os

checkboxes de uma só vez. Estes links chamam a duas funções Javascript que

veremos agora.

Funções de Javascript

function selecionar_tudo(){

for (i=0;i<document.f1.elements.length;i++)

if(document.f1.elements[i].type == "checkbox")

document.f1.elements[i].checked=1

}

A função selecionar_tudo() realiza um percorrido por todos os elementos do

formulário. Para fazer um percorrido por todos os campos utiliza-se o array

"elements", que salva uma referência com cada elemento que houver dentro do

formulário.

No percorrido comprova se o elemento atual é de tipo "checkbox" (lembrar que

o array elements contem todos os elementos, mas somente desejamos operar

com os que sejam checkbox) e nesse caso, simplesmente atualiza-se o atributo

"checked" ao valor 1, com o qual o chekbox se marcará.

function deselecionar_tudo(){

for (i=0;i<document.f1.elements.length;i++)

if(document.f1.elements[i].type == "checkbox")

document.f1.elements[i].checked=0

}

A função deselecionar_tudo() é quase igual que a anterior. Realiza um

percorrido a todos os elementos e no caso que sejam checkbox, se fixa a zero

o atributo "checked" para que a caixa de seleção fique desmarcada.

Desabilitar o menu contextual do navegador com Javascript Um script em Javascript para evitar que funcione o menu contextual do navegador, que sai ao clicar com o botão direito do mouse sobre a página. De modo que não possam ver o código fonte nem acessar a outras opções parecidas.




Neste artigo vamos mostrar um método para desabilitar o menu contextual do navegador, que aparece clicando com o botão direito em qualquer área da página. Assim, podemos evitar que o usuário tenha acesso a algumas das opções do navegador, como ver o código fonte.

A primeira coisa que queremos destacar é que este exemplo não protege o código das páginas web que estamos publicando. Simplesmente coloca algumas travas para ver como fizemos a página, mas qualquer usuário espertinho poderá acessar ao código da página se realmente quiser.

Para começar, na barra de menus do navegador, em "exibir - código fonte", pode-se acessar também ao código fonte das páginas. Portanto, se desejarmos que não seja visto nosso código, teremos que mostrar a página em uma nova janela do navegador, que devemos abrir mediante Javascript para que não inclua as barras de menus.

Mesmo se conseguíssemos evitar mostrar a barra de menus e o menu contextual, um usuário ainda poderia desabilitar Javascript para tentar ver o menu contextual sem que a página o empeça.

Porém, devemos saber que quando se envia uma página a um visitante, o arquivo HTML é salvo no disco rígido local desse usuário, então em último caso, a pessoa interessada simplesmente tem que acessar seus arquivos temporários da Internet para localizar a página que tem o código que deseja visualizar. Como o arquivo está fisicamente em seu computador, poderá fazer o




que desejar com ele: abrir, modificar, salvar com outro nome, etc. Portanto nossos códigos nunca estarão totalmente seguros.

Nota: A melhor solução para proteger um código é escrevê-lo no lado do servidor, com linguagens como ASP ou PHP. Ao estar no lado do

servidor, os scripts se executarão no servidor e o visitante só receberá o código gerado dessa execução, no próprio código ASP ou PHP.

Portanto, não pode ser feito nada definitivo para ocultar um código que se executa no cliente, portanto esta solução proposta é só um detalhe que pode entorpecer a captura de um código, mas não serve para protege-lo definitivamente.

Sendo assim, o código que vamos a propor é muito mais simples do que se

pode pensar. Simplesmente utilizaremos um evento de Javascript que se chama "oncontextmenu" e depende de "document". Atribuiremos uma função a este evento, que se executará no momento em que o usuário clique o botão direito para visualizar o menu contextual.

A função que vamos atribuir a este evento é a seguinte:

function desabilitar(){ alert ("Esta função está desabilitada.\n\nDesculpem as moléstias.") return false }

A função mostra uma mensagem de advertência, mas observemos o return false: é necessário para que não chegue a mostrar o menu contextual, porque se não colocarmos, se mostraria a mensagem de alerta mas em seguida se mostraria também o menu contextual, com o qual não serviria para nada o script.

Para atribuir esta função ao evento oncontextmenu, realizamos este código:

document.oncontextmenu=desabilitar

Tão simples como isso. O script completo, que colocaríamos entre <head> e </head> ficaria assim:

< script language=JavaScript> < !--

function desabilitar(){ alert ("Esta função está desabilitada.\n\nDesculpem as moléstias.") return false } document.oncontextmenu=desabilitar



// --> < /script>

Relógio em Javascript Aprendemos a criar um relógio simples mediante Javascript e lhe aplicamos algumas melhoras.




Vamos ver um workshop prático sobre Javascript com o qual poderemos incluir um relógio em nossa página web. É um simples script, que poderemos colocar simplesmente copiando e colando, embora procuraremos explica-lo um pouco para os que estejam em condições de entender Javascript. Para começar, vamos ver o reloginho que pretendemos criar:

É um relógio muito simples de maneira intencionada, para que possamos entender bem o exercício. Logo, o complicamos um pouco mais para lhe dar algo mais de atração. Construir o formulário Começamos colocando o campo de texto onde será mostrado o relógio. Devemos colocar um pequeno formulário onde somente teremos um campo de texto. < form name="form_relogio"> < input type="text" name="relogio" size="10"> < /form> Não deveria haver nenhum problema nessas linhas de HTML. Só colocamos as etiquetas de início e final do formulário e dentro um campo de texto. Atribuímos um nome tanto ao formulário como ao campo de texto para logo acessarmos

por esse nome mediante Javascript. Função para atualizar o valor do relógio Temos que construir uma função que busque a hora do sistema e a mostre no campo de texto. Para pegar a hora vamos fazer uso do objeto Date de Javascript.





momentoAtual = new Date() Se criarmos uma nova instância do objeto Date sem lhe passar parâmetros, inicia-se à data e hora atuais. Logo temos que obter dessa instância de Date o que nos interessa, que é a hora, os minutos e segundos. Fazemos isto utilizando os correspondentes métodos do objeto Date. hora = momentoAtual.getHours() minuto = momentoAtual.getMinutes() segundo = momentoAtual.getSeconds() Agora combinamos os resultados para construir a hora com o formato que desejarmos. horaImprimivel = hora + " : " + minuto + " : " + segundo Por último colocamos no campo de texto dol formulário o valor atual da hora. document.form_reloj.reloj.value = horaImprimible Por agora a função fica desta maneira: function moveRelogio(){ momentoAtual = new Date() hora = momentoAtual.getHours() minuto = momentoAtual.getMinutes() segundo = momentoAtual.getSeconds() horaImprimivel = hora + " : " + minuto + " : " + segundo document.form_relogio.relogio.value = horaImprimivel } A função deve charmar a si mesma Com estas linhas de código obtemos a hora e a atualizamos em seu campo de texto, mas ainda não terminou, necessitamos que essa função se chame constantemente e cada segundo para que atualize o valor de nosso campo de

texto constantemente também. Para isso, o melhor é que a função se encarregue também de chamar a si mesma a cada segundo, assim voltará a fazer todo o processo de obtenção e atualização da hora e por último chamará a si mesma ao final de um segundo. Este processo se repetirá sempre até sairmos da página. A linha de código para chamar a si mesma, que colocaremos na última linha da função é a seguinte:


setTimeout("moveRelogio()",1000) A função setTimeout serve para fazer o adiantamento antes de executar a sentença. A sentença é uma simples chamada à função e o adiantamento é de 1000 milésimos de segundos (um segundo). Colocar o relógio em funcionamento Finalmente necessitamos colocar o relógio em funcionamento. Isto pode ser feito uma vez terminado o carregamento da página com o administrador de eventos onload, que coloca-se no <body>. < body onload="moveRelogio()"> Isto quer dizer que quando termine de carregar a página se chamará à função moveRelogio(), que se encarregará de mover o relógio e chamar a si mesmo para fazer o processo de maneira contínua. Código inteiro O código da página fica desta maneira: < html> < head> <title>Relogio com Javascript</title> < script language="JavaScript"> function moveRelogio(){ momentoAtual = new Date() hora = momentoAtual.getHours() minuto = momentoAtual.getMinutes() segundo = momentoAtual.getSeconds() horaImprimivel = hora + " : " + minuto + " : " + segundo document.form_relogio.relogio.value = horaImprimivel setTimeout("moveRelogio()",1000) } < /script> < /head>

< body onload="moveRelogio()"> Vemos aqui o relógio funcionando... < form name="form_relogio"> < input type="text" name="relogio" size="10"> < /form>

< /body> < /html> Acréscimos para o relógio Podemos fazer muitas coisas para melhorar os aspectos deste relógio. Por exemplo, dar um pouco de estilo ao campo de texto ou fazer co que ninguém possa pousar em cima do campo de texto para atualizar manualmente o valor da hora. Vamos ver alguma coisinha: Estilo ao relógio Com folhas de estilo podemos mudar a aparência do relógio para torná-lo um pouco mais especial. Este é um exemplo o qual poderíamos colocar. < input type="text" name="relogio" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;"> Evitar que acessem ao campo de texto Assim ninguém poderá modificar o texto do relógio manualmente. Conseguimos isso com Javascript. O administrador de eventos onfocus se ativa quando o campo de texto adquire o foco da aplicação. Nesse momento noós tiraremos o foco da aplicação com o método blur(). O botão ficaria assim: < input type="text" name="relogio" size="10" onfocus="window.document.form_relogio.relogio.blur()"> Fazer com que sempre tenhamos dois dígitos na hora, minutos e segundos. Para conseguir que a hora tenha sempre um formato hh : mm : ss devemos brincar um pouco com os valores de tempo como se fossem strings. Para isso, o primeiro que teremos que fazer é construir um string a partir do valor (hora, minuto ou segundo) que quisermos formatar. Logo, observaremos esse string para saber se temos que lhe acrescentar um dígito ao valor. Vejamos como obtemos o string a partir do número de segundos obtido. Faremos para os segundos, logo, a hora e os minutos serão realizados de maneira similar.

str_segundo = new String (segundo) Em seguida, observamos se temos só um caractere no string, porque se for assim, temos que concatenar um zero ("0") ao princípio. if (str_segundo.length == 1) segundo = "0" + segundo

http://www.criarweb.com/artigos/173.php?

Tudo junto Vejamos outra vez nosso exemplo em uma só peça para ver como ficam todas estas melhoras: < html> < head> <title>Relogio com Javascript</title> < script language="JavaScript"> function moveRelogio(){ momentoAtual = new Date() hora = momentoAtual.getHours() minuto = momentoAtual.getMinutes() segundo = momentoAtual.getSeconds() str_segundo = new String (segundo) if (str_segundo.length == 1) segundo = "0" + segundo str_minuto = new String (minuto) if (str_minuto.length == 1) minuto = "0" + minuto str_hora = new String (hora) if (str_hora.length == 1) hora = "0" + hora horaImprimible = hora + " : " + minuto + " : " + segundo document.form_relogio.relogio.value = horaImprimivel setTimeout("moveRelogio()",1000) } < /script> < /head> < body onload="moveRelogio()"> Vemos aqui o relógio funcionando... < form name="form_relogio">

< input type="text" name="relogio" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;" onfocus="window.document.form_relogio.relogio.blur()"> < /form> < /body> < /html> Este segundo relógio pode ser visto a seguir:

Se desejarmos podemos abrir uma página web para visualizar:

Scripts diferentes para cada navegador Vemos como incluir de uma maneira simples uma biblioteca de scripts diferentes para cada navegador.

Por Carlos Cuenca Díaz



Um dos maiores problemas que um programador encontra na hora de criar páginas com DHTML é lidar com os diferentes modelos de objetos que têm cada um dos navegadores, e cujas diferenças não só se dão com os navegadores das distintas companhias, como também entre a mesma companhia há diferenças na modalidade dos objetos dependendo das versões. Por exemplo, o modelo de objetos de Netscape 6 é diferente do modelo de objetos de Netscape 4. Tudo isto nos cria o problema na hora de escrever scripts de ter que duplicar o código de cada uma das nossas funções dependendo do navegador que se utiliza. Devido à grande variedade de navegadores e versões disponíveis, isto faz com que nossas funções acabem sendo muito maiores e mais ilegíveis do que o esperado. Uma solução para este problema é a criação de diferentes arquivos que contenham os scripts para cada um dos navegadores que existem, ligando no momento do carregamento da página com o arquivo de scripts do navegador e a versão que estamos utilizando. Desta forma, os scripts são muito mais simples já que um script se criará enfocado a uma só versão, e ademais, no caso de que saia no mercado um novo navegador com um modelo de objetos diferente, não teremos que mudar todos nossos scripts, simplesmente bastará modificar o script que detecta o navegador, e em seguida escrever um novo arquivo que contenha os mesmos scripts que os anteriores, mas com o novo modelo de objetos.

O seguinte código pretende ser um exemplo reduzido do anteriormente exposto. Nosso objetivo será diferenciar entre Netscape e Internet Explorer, de forma que ao clicar sobre um único botão, apareça uma mensagem de alerta diferente dependendo do navegador que utilizarmos.






O primeiro passo é a criação dos diferentes arquivos que vão conter os scripts específicos para cada um dos navegadores. Em nosso caso serão dois arquivos, um que chamaremos Internet.js que conterá os scripts para Internet Explorer, e outro chamado Netscape.js que conterá os scripts para Netscape. O conteúdo de Internet.js será o seguinte: function mostraAlerta(){ alert("Estou utilizando IE") } O conteúdo de Nescape.js será o seguinte: function mostraAlerta(){ alert("Estou utilizando NS") } Por outro lado, no cabeçalho de cada uma das páginas, deveremos incluir um script que ligue a cada um dos navegadores, dependendo do que utiliza o usuário. < script language="javascript"> ns=(document.layers)? true:false ie=(document.all)? true:false ponNs="<script language='javascript1.2' src='netscape.js'> <\/script>" ponIe="<script language='javascript1.2' src='internet.js'> <\/script>" if (ns) {document.write(colocarNs)} if (ie) {document.write(colocarIe)} < /script>

* Observem na contra-barra "\" colocada antes da barra "/" em </script> nos document.write().

Por último incluímos no corpo da página um botão que chama à função que

está definida dentro dos arquivos de scripts:

< input type="button" value="Clicar" onclick="mostraAlerta()">

De forma que a página fique com o seguinte aspecto:

< html>

< head>

<title>Untitled</title>

< script language="javascript">

ns=(document.layers)? true:false

ie=(document.all)? true:false

ponNs="<script language='javascript1.2' src='netscape.js'> <\/script>"

ponIe="<script language='javascript1.2' src='internet.js'> <\/script>"

if (ns) {document.write(colocarNs)}

if (ie) {document.write(colocarIe)}

< /script>

< /head>

< body>

< form>

< input type="button" value="Clicar" onclick="mostraAlerta()">

< /form>

< /body>

< /html>

Tamanho dos campos relativo ao navegador Dependendo do navegador, os campos de texto têm tamanhos diferentes. Com javascript evitamos isso.




Se criarmos um formulário com uns campos de texto em uma página web

poderemos observar que Internet Explorer não coloca o mesmo tamanho aos

campos de texto que Netscape. Na verdade, os campos que coloca Netscape

são de um tamanho maior para um mesmo atributo size no campo.

Geralmente se soluciona colocando os campos de texto menores para que

caibam no desenho em Netscape, mas em algumas ocasiões queremos que os

campos sejam do tamanho justo e que no Internet Explorer não sejam tão





pequenos e no Netscape tão grandes. Isto pode acontecer, por exemplo, em

desenhos calculados muito à medida.

Concretizando, o tamanho dos campos se aplica com o atributo size da

etiqueta <INPUT> e queremos fazer com que o size indicado dependa do

navegador que estivermos usando.

Distinguir os navegadores

Para isso deveremos criar um script de Javascript que distinga entre os dois

navegadores e escrever mediante javascript o atributo size com um valor

distinto para cada caso.

Distinguir dinamicamente entre os navegadores é uma tarefa que pode ser

bastante complicada e digna de outro artigo, mas poderíamos fazer de uma

maneira parecida a esta:

if (document.layers)

//faco coisas para Netscape 4

else

// faco coisas para outros navegadores

Com este código discrimino somente entre a versão 4 de Netscape e todos os

demais navegadores. É porque Netscape 4 é o único navegador cuja hierarquia

de objetos inclui um objeto denominado layers. Ao introduzir esse nome de

objeto na expressão a avaliar do if, obteremos casos positivos se o objeto

existe (Netscape4) e negativos se não existirem (os demais).

Escrever coisas distintas em cada caso

Agora vamos colocar o código Javascript que escreveria um campo de texto

com um valor de size distinto para cada navegador.


document.write("<INPUT type=text size=12>")

else


Colocamos o script em um formulário

É bem simples, só nos resta colocar esse código dentro de um formulário e

teremos um campo de texto com sizes distintos, mas com o mesmo tamanho

na tela.


< FORM>




else


< /script>

< /FORM>

Estilos diferentes para cada navegador Scripts que nos permitem aplicar estilos diferentes aos elementos da página, em um dos casos nos apoiamos na tecnologia CSS para aumentar a potência.




Graças a um e-mail de um usuário que queria colocar um fundo de tela

diferente dependendo do tipo de navegador que nos fez pensar em dois scripts

que podem servir para este Workshop de Javascript.

Trata-se de uns scripts que permitem mostrar estilos na página web

dependendo do navegador com o qual se acessa à página, de modo que se um

usuário entra com IExplorer veria um fundo, tipografias e outros elementos com

formas ou estilos diferentes dos que veria outro usuário que tenha acessado

com Netscape.

Começamos pelo exemplo exato que nos pedia o usuário do e-mail, para

colocar somente fundos diferentes. É um script bastante específico que para

muitos de vocês parecerá "inútil", mas pelo menos servirá para aprender

alguma coisinha.

Com a etiqueta <BODY>

A primeira idéia que tive foi de escrever a etiqueta <BODY> inteira dentro de

um bloco de script onde temos um if que nos permite distinguir entre

navegadores.

O código ficaria algo assim:

< html>




http://www.criarweb.com/workshop_javascript/


< head>

< /head>



document.write ("<body background=nts.jpg>")

else

document.write ("<body background=ie.jpg>")

< /script>

< /body>

< /html>

Vemos que para averiguar se temos Netscape ou Internet Explorer acessamos

ao objeto layers do documento. Como só Netscape tem esse objeto, somente

para Netscape essa avaliação será verdadeira. Isto é um truque rápido, embora

deveria ser estudado à parte porque não funciona bem com todos os

navegadores, por exemplo, Netscape 6 mostraria o fundo de Explorer. Na

verdade, só se distingue entre Netscape 4 e todos os demais navegadores, já

que certamente, esse objeto só está disponível nesse navegador.

Voltando ao exemplo, dependendo se se utiliza Netscape 4 ou outro navegador

se mostra uma etiqueta <BODY> com um atributo, o da imagem de fundo

diferente.

Com estilos

Existe outra maneira de atribuir fundos diferentes dependendo do navegador e

não só os fundos como também tipos de letra, tamanhos e em geral todo o que

pode ser definido utilizando os estilos CSS.

Neste exemplo, supomos que sabe algo de CSS e da definição de estilos para

todo um site incluído em um arquivo externo com sintaxe CSS. Para conhecer

as CSS temos um excelente manual em CriarWeb.com.

A base do exemplo é a mesma, utilizamos um bloco script no qual averiguamos

que navegador está sendo utilizando e dependendo do navegador mostra-se

uma etiqueta com uns atributos ou outros. Na verdade, a etiqueta que

colocamos dinamicamente em função do navegador é <LINK> que serve para

incluir uma declaração de estilos externa.

Seria algo assim:

http://www.criarweb.com/css/

< html>

< head>

<title>Linko com estilos dinamicamente</title>

< script LANGUAGE="JavaScript">

if (document.layers) {

document.write("<LINK REL='stylesheet' HREF='estilo_nt.css'

TYPE='text/css'>"); }

else {

document.write("<LINK REL='stylesheet' HREF='estilo_ie.css'

TYPE='text/css'>"); }

< /script>

< /head>

< body>

< h1>Bem-vindos a minha página</h1>

< /body>

< /html>

Como vemos, no caso de estar em Netscape 4 se carregará a folha de estilos

chamada "estilo_nt.css" e se nosso navegador é outro qualquer se carregará

"estilo_ie.css".

Este segundo caso pode ser utilizado para muitas coisas. Principalmente pode-

se utilizar para evitar um efeito que existe no uso de diferentes navegadores,

que consiste em que na mesma definição de fontes, os tamanhos das mesmas

diferem em Netscape e Internet Explorer. (As mesmas fontes, em Netscape

saem menores que em Explorer). É por isso que incluindo uma folha de estilos

diferente pode-se colocar os tamanhos das fontes desejados para cada

navegador.

Isso é tudo. Esperemos que estes scripts dêem idéias para resolver outros

problemas.

Tabela de cores com Javascript Uma tabela que mostra as cores puras em todas as definições. Está construída com Javascript adicionando três loops.






Em HTML construímos qualquer cor misturando o vermelho, verde e azul (RGB) nas proporções que desejarmos. Isto é um fato que deveria saber antes de ler este artigo. Explicamos com detalhes a construção de cores no artigo As cores e HTML. Será necessário que, aquele que não estiver familiarizado com este assunto, leia o artigo. Além de como construir cores, o artigo As cores e HTML mostra também quais são as cores puras, que se vêem sem problemas em todas as profundidades de cor que possa ter a configuração dos computadores dos visitantes. Para a construção de cores puras misturamos as cores RGB sempre nestas quantidades 00, 33, 66, 99, CC, FF. Novamente, para quem não conhece isto deve ler a reportagem assinalada anteriormente.

O exemplo que pretendemos construir tem a ver com as cores puras em tyodas as definições. Trata-se de construir uma tabela em uma página web que contenha todos as cores puras, além do código RGB de cada cor. Esta tabela pode servir para selecionar uma cor que pretendemos utilizar em uma página web. Se nos limitarmos somente a utilizar as cores da tabela teremos a segurança que nossa paleta será respeitada em todos os casos. Para gerar todos as cores puras vamos utilizar três arrays Javascript com os possíveis valores para cada uma das cores RGB. Portanto, teremos três arrays como os que podem ser vistos a seguir: var r = new Array("00","33","66","99","CC","FF"); var g = new Array("00","33","66","99","CC","FF"); var b = new Array("00","33","66","99","CC","FF"); Para escrever a tabela na página web, faremos um percorrido a estes três arrays. Para isso, vamos utilizar loops aninhados, que são loops dentro de outros loops. Vamos tratar de explicar porque necessitamos os loops aninhados; se fizermos as contas das cores que devemos ir gerando obteremos uma lista como a que segue: #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF... Pode-se ver a conta completa aqui. Então, vemos que no início os três valores de RGB valem 00 e como em sucessivas repetições se vai aumentando o valor de B (o valor atribuído ao azul) até chegarmos a FF. Para continuar, aumenta-se o valor de G e voltamos a realizar a conta com B. É como se contássemos e as unidades fossem os valores de RBG. O caso é que realizamos a conta com o valor B, quando chegamos a FF






http://www.criarweb.com/artigos/exemplos/tallerjs/listacores.html

aumentamos o valor de G e quando chegarmos a FF em G aumentaremos em um valor R. Assim, pode-se ver a estrutura em pseudocódigo como esta. Contamos desde 00 até FF com o valor R{ Contamos desde 00 até FF com o valor G{ Contamos desde 00 até FF com o valor R{ Imprimimos o valor atual de RGB } } } Esta estrutura imprime todos as cores puras, e já é próxima a nossa solução, embora ainda não esteja escrita em Javascript e falte colocar todas as etiquetas HTML que necessitamos para mostrar uma tabela em uma página web. Como não importa ir um pouco mais devagar contanto que todo o mundo entenda o problema, vamos escrever em Javascript este loop para que simplesmente liste as cores puras, sem introduzi-las ainda em uma tabela. Será interessante para ver um pouco melhor o funcionamento de loops aninhados. //criamos os arrays var r = new Array("00","33","66","99","CC","FF"); var g = new Array("00","33","66","99","CC","FF"); var b = new Array("00","33","66","99","CC","FF"); //fazemos o loop aninhado for (i=0;i<r.length;i++) { for (j=0;j<g.length;j++) { for (k=0;k<b.length;k++) { //creamos el color var nuevoc = "#" + r[i] + g[j] + b[k]; //imprimimos a cor document.write(novoc + "<br>"); } } } Para percorrer um array os loops se criam com um índice que servirá para acessar à posição atual do array. Os índices em arrays começam em 0, é por

isso que nossos loops for contém uma iniciação a 0 da variável que vai servir de índice. Ademais o índice deve crescer de um em um até chegar à última posição do array, que se obtém acessando a sua propriedade length (que salva a longitude ou o número de elementos do array). Colocando um loop dentro de outro poderemos realizar essa conta. O loop mais externo será o que menos vezes se executar, portanto com o loop exterior levaremos a conta de R. O loop do meio será para levar a conta de G e o mais interno (o que mais vezes se repetirá) para levar a conta de B, que é o valor



que vai mudando constantemente. Podemos vê-la em funcionamento neste link. A tabela das cores completa Para terminar, vamos ver o exemplo completo, com todas as linhas de código que incluem os textos HTML necessários para que a tabela saia convenientemente formatada e com as cores de fundo em cada uma das células iguais à cor atual. Para isso, o primeiro que faremos é escrever o cabeçalho da tabela e a finalização da mesma, que ficam fora da estrutura de loops. Dentro dos loops realizaremos as sentenças para imprimir cada uma das filas e células da tabela. Nossa tabela vai ter em cada fila um conjunto de cores, onde os valores RG não mudam e o valor B varia entre todos os possíveis. Na seguinte fila se incrementaria em um o valor G e faríamos outra vez a conta de valores B... assim até terminarmos com todos os valores R, G e B possíveis. O código é o seguinte: < table width="80%"> < script language="javascript"> var r = new Array("00","33","66","99","CC","FF"); var g = new Array("00","33","66","99","CC","FF"); var b = new Array("00","33","66","99","CC","FF"); for (i=0;i<r.length;i++){ for (j=0;j<g.length;j++) { document.write("<tr>"); for (k=0;k<b.length;k++) { var novoc = "#" + r[i] + g[j] + b[k]; document.write("<td bgcolor=\"" + novoc + "\" align=center>"); document.write(novoc); document.write("</td>"); } document.write("</tr>"); } }

< /script> < /table> Vemos que antes de começar o loop mais interno, cria-se uma nova célula com <TR> e que quando se acaba, termina também a célula com </TR>. Ademais, dentro do loop mais interno se compõe primeiro a cor atual e logo se escreve uma célula com o atributo bgcolor atribuído a essa cor atual e dentro dela o texto da cor atual.

http://www.criarweb.com/artigos/exemplos/tallerjs/listacores.html

A tabela que nos gera este script pode ser vista aqui:

#000000 #000033 #000066 #000099 #0000CC #0000FF

#003300 #003333 #003366 #003399 #0033CC #0033FF

#006600 #006633 #006666 #006699 #0066CC #0066FF

#009900 #009933 #009966 #009999 #0099CC #0099FF

#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF

#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF

#330000 #330033 #330066 #330099 #3300CC #3300FF

#333300 #333333 #333366 #333399 #3333CC #3333FF

#336600 #336633 #336666 #336699 #3366CC #3366FF

#339900 #339933 #339966 #339999 #3399CC #3399FF



#660000 #660033 #660066 #660099 #6600CC #6600FF

#663300 #663333 #663366 #663399 #6633CC #6633FF

#666600 #666633 #666666 #666699 #6666CC #6666FF

#669900 #669933 #669966 #669999 #6699CC #6699FF



#990000 #990033 #990066 #990099 #9900CC #9900FF

#993300 #993333 #993366 #993399 #9933CC #9933FF

#996600 #996633 #996666 #996699 #9966CC #9966FF

#999900 #999933 #999966 #999999 #9999CC #9999FF



#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF




#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF

#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF

#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF




#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF

#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Sub-menu em outra janela Faremos um sub-menu de opções que se mostra em uma janela secundária e uma vez selecionada a opção do sub-menu se transfere para a janela pai.




Vamos realizar um pequeno exemplo sobre como trabalhar com janelas

secundárias ou popups. As janelas secundárias são essas janelinhas que se

abrem além da janela principal do navegador e em geral, molestam um pouco

em determinados sites gratuitos.

Para abrir essas janelas se utiliza a linguagem Javascript, mais concretamente,

o método open() do objeto window. Não vamos explicá-lo aqui, porque já temos

um artigo inteiro que explica detalhadamente a abertura de janelas secundárias

e as características com as quais podemos abrir: Abrir janelas secundárias

Neste exemplo, iremos um pouco mais além, vamos criar uma janela

secundária e a partir dela, vamos acessar às propriedades da janela pai, ou

seja, a janela que a abriu. O exercício será o seguinte:

Teremos uma página com fundo branco, um campo de texto vazio e um botão.

Quando se clique o botão, abriremos um popup que conterá uma tabela com as

cores puras de HTML. O visitante poderá selecionar uma dessas cores e então,

o fundo da página pai mudará para esta cor e a cor será escrita no campo de

texto. É muito mais fácil ver o exemplo em funcionamento para compreender a

explicação.

Página pai

A página original conterá um simples formulário com um botão e um campo de

texto. Ademais, conterá o script Javascript necessário para abrir a janela

secundária.

< html>

< head>

<title>Sub-menu em janela a parte</title>


function lancarSubmenu(){

window.open("submenu_janela2.html","janela1","width=400,height=400,scrollba

rs=YES")






http://www.criarweb.com/artigos/exemplos/tallerjs/submenu_janela1.html


}

</script>

< /head>

< body bgcolor="#ffffff">

< form>

< input type="text" name="colorin" size="12" maxlength="12">

< br>

< br>

< input type="button" value="Lançar sub-menu" onclick="lancarSubmenu()">

< /form>

< /body>

< /html>

A função lancarSubmenu() é a que contém o script para abrir o popup. Para

isso utiliza o método open() do objeto window, cujo uso foi descrito no artigo de

Abrir janelas secundárias.

O formulário é dos mais normais. O único destacável é o atributo onclick do

botão, que serve para definir as ações para serem executadas ao clicarmos o

botão, neste caso uma chamada à função que abre a janela secundária.

Página secundária

A página secundária é um pouco mais complexa, mas a parte que nos

interessa neste exercício é bastante simples. O importante da página é que tem

que acessar à janela pai para modificar seu estado e para isso utiliza um objeto

Javascript: opener.

O objeto opener está disponível nas páginas que são janelas secundárias e faz

referência à janela que a abriu, ou seja, a janela pai. Em outras palavras, o

objeto opener na janela popup é um sinônimo do objeto window na janela pai.

O script que acessa à janela pai é o seguinte:


function atualizaPai(minhaCor){

window.opener.document.bgColor = minhaCor

window.opener.document.forms[0].colorin.value = minhaCor

}

< /script>

A função atualizaPai() é a encarregada de realizar o trabalho. Recebe o código

da cor sobre a qual foi clicada. Na primeira linha mudamos a cor da página web

pai e na segunda linha colocamos o código RGB da cor recebida por parâmetro

http://www.criarweb.com/artigos/%20http:/www.criarweb.com/artigos/407.php

no campo de texto.

Como vemos, o objeto opener também depende do objeto window da página,

como todos os demais objetos da hierarquia Javascript.

O resto da página é parecido a um artigo anterior de Javascript no qual

escrevíamos com Javascript uma tabela de cores puras, com umas pequenas

modificações para adapta-la às nossas necessidades. Pode-se ver a seguir:

< table width="80%" align="center" cellpadding="1" cellspacing="1">

< script language="javascript">

var r = new Array("00","33","66","99","CC","FF");

var g = new Array("00","33","66","99","CC","FF");

var b = new Array("00","33","66","99","CC","FF");

for (i=0;i<r.length;i++)

for (j=0;j<g.length;j++) {

document.write("<tr>");

for (k=0;k<b.length;k++) {

var nuevoc = "#" + r[i] + g[j] + b[k];

document.write("<td bgcolor=\"" + novoc + "\" align=center><font size=1

face=verdana>");

document.write("<a href=\"javascript:atualizaPai('" + novoc + "')\">");

document.write(novoc);

}

document.write("</a></font></tr>");

}

< /script>

< /table>

Visto a complicação deste script e dado que não vamos explicá-lo tudo outra

vez, pode ser altamente recomendável a leitura do artigo anterior chamado

Tabela de cores com Javascript.

O mais importante para nós agora é entender que este script cria uma tabela

com todos as cores puras, colocadas cada uma em uma célula. Dentro de cada

célula se escreve um link que chama à função atualizaPai() passando-lhe o

código da cor que há que ser utilizada.

Degradê de cor Javascript Script para conseguir um degrade da cor de fundo da página web. Um exemplo é simples e o outro, mais complexo, se adapta a muitos

degrades diferentes.







Vamos ver um exemplo típico de efeito especial em uma página web: um degrade de cores para o fundo da página. O degrade consiste em mudar a cor de fundo da página aos poucos para ir se aproximando à outra cor. Podemos fazer muitos degrades diferentes para páginas web com pouco esforço, poucos conhecimentos técnicos e bastante imaginação. Pode-se ver um exemplo de degrade em uma página a parte, para ter uma idéia exata do que vamos explicar neste artigo. Ademais, no final do artigo, veremos um script que permite fazer uma ampla gama de degrades, como este exemplo de degrade mais complexo. Complicação do degrade A maior complicação que encontramos na hora de criar um script para fazer um degrade é que as cores se expressam em hexadecimal e em Javascript trabalhamos com números decimais. De modo que, para converter nossos números decimais em hexadecimais e poder assim utiliza-los para indicar cores criamos uma função especial: function converteHexadecimal(num){ var hexaDec = Math.floor(num/16) var hexaUni = num - (hexaDec * 16) return hexadecimal[hexaDec] + hexadecimal[hexaUni] } A função devolve o número passado por parâmetro em forma hexadecimal. Por exemplo, se recebe 140 devolve 8C. Se recebe 15 devolve 0F. Para isso, temos a ajuda de um Array criado anteriormente que salva conversão de números decimais a hexadecimais das unidades básicas, ou seja, do 0 à letra F. Esta é a linha que cria o Array. hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F") A função primeiro calcula os grupos de 16 que podem ser feitos a partir do número que recebemos. Os números destes grupos seriam as "hexa-dezenas". Logo, calculamos o resto da divisão anterior, ou dito de outra forma, quantas unidades nos restam depois de tomar estas "hexa-dezenas". Este segundo número, serão as unidades. Ao juntar as unidades com os grupos de 16 que


http://www.criarweb.com/artigos/exemplos/tallerjs/degradado_simples.html

http://www.criarweb.com/artigos/exemplos/tallerjs/degradado1.html


obtivemos, convertendo ambos valores por meio do array de conversão decimal a hexadecimal, conseguimos a conversão buscada. Criando a seqüência de cores para o degrade Uma vez que pudermos converter do valor decimal (necessário para levar a conta em Javascript) ao hexadecimal (necessário para indicar um cor) nossa única tarefa será contar em decimal as cores e converte-las a hexadecimal antes de mudar a propriedade document.bgColor, que como sabemos é a propriedade que salva a cor de fundo da página. Quisemos fazer um primeiro exemplo muito simples para que possa ser entendido mais facilmente. O exemplo foi mostrado anteriormente em funcionamento. Trata-se de uma escala de cinzas que começa em preto e termina em branco. cor_decimal = 0 Primeiro, iniciamos a variável cor_decimal, que é a que salva a cor atual a mostrar, em formato decimal. Só salvamos um valor da cor pois, ao ser uma escala de cinzas, todos os valores RGB são o mesmo. Teremos uma função chamada degrade que será a encarregada de realizar a maior parte do trabalho. function degrade(){ cor_decimal ++ cor_hexadecimal = converteHexadecimal(cor_decimal) document.bgColor = cor_hexadecimal + cor_hexadecimal + cor_hexadecimal //chamo com um atraso if (cor_decimal < 255) setTimeout("degrade()",1) } A função se encarrega de incrementar a cor_decimal em uma unidade, converte-la em hexadecimal e coloca-la dentro de propriedade document.bgColor para atualizar o fundo da página. Finalmente, e nisso se baseiam muitos efeitos especiais de Javascript, se chama a função a si mesma com um atraso. No exemplo podemos ver que se

a cor_decimal for menor de 255 (que é o máximo que se pode alcançar em cores) se chama à função com setTimeout, que é a que nos cria o atraso. O código deste exemplo simples pode ser visto inteiro a seguir: < html> < head> <title>Exemplo de degrade 1</title> < /head>


< body bgcolor=000000> < h1 align="center">Degradando...</h1> < h2>Exemplo 1</h2> Nesta página podemos ver um exemplo de degrade de preto a branco, com uma só passada. Só se vê o texto quando o fundo for suficientemente branco para que contraste. < script language="javascript"> hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F") function converteHexadecimal(num){ var hexaDec = Math.floor(num/16) var hexaUni = num - (hexaDec * 16) return hexadecimal[hexaDec] + hexadecimal[hexaUni] } cor_decimal = 0 function degrade(){ cor_decimal ++ cor_hexadecimal = converteHexadecimal(cor_decimal) document.bgColor = cor_hexadecimal + cor_hexadecimal + cor_hexadecimal //chamo com um atraso if (cor_decimal < 255) setTimeout("degrade()",1) } degrade() < /script> < /body> < /html> Se quisermos, também podemos ver o exemplo em funcionamento em uma página a parte. Mais degrades

Provavelmente este não seja o exemplo mais útil para o leitor que deseja implementar um degrade em sua página, pois é um pouco simples e específico. Para solucionar este assunto, criamos um sistema onde ode se configurar o tipo de degrade da página com uma série de variáveis. É um exemplo que se baseia no que acabamos de ver, embora tenha muitas variáveis para parametrizar o comportamento do degrade e que se adapte às necessidades do desenvolvedor.




Por falta de tempo não vamos a explicar todo o script, iremos observar somente as variáveis que permitem configura-lo. cor_inicio = new Array(150,150,255) Com cor_incio configuramos a cor que se mostra ao princípio na página. Indicamos com um array, onde em cada campo, colocamos o valor decimal de cada um das três cores RGB. cor_fim = new Array(255,99,0) Com cor_fim configuramos a cor a qual vai tender nossa degrade, de maneira idêntica a como fizemos em cor_inicio passos = 100 é o número de passos que vamos utilizar para alcançar o valor da cor final, desde a cor de início. comportamento = 1 Esta variável serve para definir o comportamento do script em quatro possíveis valores:

1. Realiza um loop infinito desde a cor de início à cor fim e da cor fim à cor de início, para voltar a começar. E irá repetindo sempre.

2. Realiza uma passada desde a cor de início à cor fim. Termina quando acaba a passada.

3. Realiza uma passada da cor de início ao fim e uma volta desde o fim ao início. Termina quando realiza a ida e a volta.

4. Um loop infinito com uma parada de 10 segundos entre quando fez a ida e a volta, antes de voltar a começar outra ida e volta.

Validar inteiro no campo de formulário Script para validar um campo de formulário de maneira que saibamos com certeza que dentro do campo existe sempre um número inteiro.




Suponhamos que temos um campo de um formulário onde queremos que figure sempre um valor numérico inteiro. Um exemplo poderia ser um campo onde queremos salvar o número de um ano, onde, logicamente, não cabem decimais e nem letras.



Neste exercício vamos realizar um script que procure obter um número inteiro do valor que tiver escrito o usuário em um campo de texto. Se for um número inteiro ou puder converte-lo a um inteiro, coloque tal valor inteiro no campo. Se não puder obter um valor numérico inteiro apague o conteúdo do campo e deixe-o vazio. Faremos com Javascript, já que é a linguagem do lado do cliente -para operar no âmbito do navegador- mais difundida.

Para aclarar o funcionamento do exercício podemos ver o exemplo completo em uma página a parte.

Este exercício serve também para aprender a manejar as funções incorporadas de Javascript parseInt() e isNaN(). A primeira serve para converter um valor a número inteiro e a segunda para ver se um dado é um valor numérico. As duas podem conhecidas com mais profundidade nos primeiros capítulos do manual de Javascript II.

Outro tema importante que há que conhecer é a hierarquia de objetos do navegador, porém neste caso, faremos um esforço em explica-la para aquelas pessoas que não a conheçam.

Função validarInteiro()

Primeiro, vamos realizar uma função que fará a maior parte do trabalho, visto que é a encarregada de validar se um dado é um número inteiro. Esta função recebe um valor, que é o dado que desejamos validar e se for um inteiro devolverá tal qual. Se não for, tentará convertê-lo a inteiro e se conseguir devolverá esse valor. Finalmente, se a tentativa de converte-lo não der resultado, devolverá uma cadeia vazia.

function validarInteiro(valor){ //tento converter a inteiro. //se for um inteiro nao lhe afeta, se não for tenta convertelo valor = parseInt(valor) //Comprovo se é um valor numérico if (isNaN(valor)) { //entao (nao e numero) devuelvo el valor cadena vacia return "" }else{ //No caso contrario (Se for um número) devolvo o valor return valor

} }

Formulário

Vemos o formulário que necessitaremos para colocar o campo de texto. É um formulário como outro qualquer, o único detalhe é que nos preocupamos por lhe dar nome tanto ao formulário em si como ao campo de texto.


http://www.criarweb.com/artigos/exemplos/tallerjs/validarentero.html





Posteriormente, utilizaremos esses nomes para referirmos aos elementos mediante Javascript.

Também temos um campo de formulário do tipo botão, que serve neste caso para indicar que quando se clique, chamará à função validarFormulario(). Para indicar isto se utiliza o atributo onclick do campo botão e entre aspas podemos ver o que queremos que se execute, neste caso a função indicada.

< form name=formul> < input type=text name=texto> < input type=button value=validar onclick="validarFormulario()"> < /form>

Função validarFormulario()

Esta função extrai o dado do campo de texto e o passa à função validarInteiro(), que nos devolverá um valor que teremos que colocar de novo no campo de texto. Para acessar ao formulário utilizamos a hierarquia de objetos do navegador, que para quem não sabe, é um conjunto de objetos que fazem referência a todos os elementos da página.

O acesso aos elementos da página se realiza começando no objeto window, que é o primeiro da hierarquia. Logo, continua pelo objeto document -que salva todo o documento- e em nosso exemplo, baixaremos ao formulário para poder acessar definitivamente ao campo de texto, que era onde queríamos chegar. Com este esquema:

window.document.formul.texto

Observamos que se utilizam os nomes do formulário e o campo que colocamos no atributo name das etiquetas HTML destes elementos.

Todos os campos de texto têm uma propriedade value que é onde se salva o texto que leva escrito dentro. De modo que se quisermos acessar ao que tem escrito o campo de texto escreveremos isto:

window.document.formul.texto.value

Agora que sabemos tudo o que foi dito anteriormente deveríamos entender perfeitamente o código da função.

function validarFormulario(){ //extraimos o valor do campo textoCampo = window.document.formul.texto.value //o validamos como inteiro textoCampo = validarInteiro(textoCampo) //colocamos o valor de novo window.document.formul.texto.value = textoCampo }


Conclusão

Com tudo isto completamos o exercício. Podemos ver como funcionaria a página inteira para observar os resultados finais.

Por si só pode ser que não tenha um resultado muito produtivo este exemplo, porém pode ser um início para começar a validar formulários mais complexos. Com um pouco de imaginação e esforço podemos fazer funções que validem outros campos do formulário para ver se o que contém são textos, se são suficientemente longos ou curtos, validar números com decimais, etc. Tudo isso se faria de forma parecida como vimos antes, acrescentando o código à funão validarFormulario() e talvez construindo algumas funções acessórias adicionais como validarInteiro().

Esperamos que tenha bom proveito, a pesar de ser pouco.

Exemplos de funcionamento da classe String Realizamos dois scripts em Javascript para ilustrar o funcionamento de alguns métodos e propriedades da classe String.




Agora vamos ver uns exemplos sobre como se utilizam os métodos e

propriedades do objeto String.


Vamos escrever o conteúdo de um string com um caractere separador ("-")

entre cada um dos caracteres do string.

var meuString = "Ola Amigos"

var result = ""

for (i=0;i<meuString.length-1;i++) {

result += meuString.charAt(i)

result += "-"

}

result += meuString.charAt(meuString.length - 1)

document.write(result)

Primeiro, criamos duas variáveis, uma com o string a percorrer e outra com um

string vazio, onde salvaremos o resultado. Logo, fazemos um loop que percorre





desde o primeiro até o penúltimo caractere do string -utilizamos a propriedade

length para conhecer o número de caracteres do string- e em cada iteração

colocamos um caractere do string seguido de um caractere separador "-".

Como ainda nos resta o último caractere por colocar, o colocaremos na

seguinte linha depois do loop. Utilizamos a função charAt para acessar às

posições do string. Finalmente imprimimos na página o resultado.



Vamos fazer um script que rompa um string em duas metades e as imprima por

tela. As metades serão iguais, sempre que o string tiver um número de

caracteres par. No caso de que o número de caracteres seja ímpar não se

poderá fazer a metade exata, porém partiremos o string o mais aproximado à

metade.

var meuString = "0123456789"

var metade1,metade2

posicao_metade = meuString.length / 2

metade1 = meuString.substring(0,posicao_metade)

metade2 = meuString.substring(posicao_metade,meuString.length)

document.write(metade1 + "<br>" + metade2)

As duas primeiras linhas servem para declarar as variáveis que vamos utilizar e

iniciar o string a partir. Na seguinte linha encontramos a posição da metade do

string.

Nas duas seguintes linhas é onde realizamos o trabalho de colocar em uma

variável a primeira metade do string e na outra a segunda. Para isso, utilizamos

o método substring passando-lhe como início e fim no primeiro caso desde 0

até a metade e no segundo desde a metade até o final. Para finalizar

imprimimos as duas metades com uma quebra de linha entre elas.

Exemplo de funcionamento de Date Exercício realizado para ilustrar o funcionamento da classe Date em Javascript.



http://www.criarweb.com/artigos/exemplos/javascript2/ex_string1.html




Neste exemplo vamos criar duas datas, uma com o instante atual e outra com

data do passado. Em seguida, imprimiremos as duas e extrairemos seu ano

para imprimi-lo também. Logo, atualizaremos o ano de uma das datas e

voltaremos a escreve-la com um formato mais legível.

//nestas linhas criamos as datas

minhaDataaAtual = new Date()

minhaDataPassada = new Date(1998,4,23)

//nestas linhas imprimimos as datas.

document.write (minhaDataAtual)


document.write (minhaDtaPassada)

//extraímos o ano das duas datas

anoAtual = minhaDataAtual.getFullYear()

anoPassado = minhaDataPassada.getFullYear()

//Escrevemos em ano na página

document.write("<br>O ano atual é: " + anoAtual)

document.write("<br>O ano passado é: " + anoPassado)

//mudamos o ano na data atual

minhaDataAtual.setFullYear(2005)

//extraímos o dia, mês e ano

dia = minhaDataAtual.getDate()

mes = parseInt(minhaDataAtual.getMonth()) + 1

ano = minhaDataAtual.getFullYear()

//escrevemos a data em um formato legível


document.write (dia + "/" + mes + "/" + ano)

Há que destacar um detalhe antes de terminar, é que o número do mês pode

começar desde 0. Pelo menos no Netscape com o qual realizamos as provas

começava o mês em 0. Por esta razão somamos um ao mês que devolve o

método getMonth.

Existem mais detalhes para destacar, pois é que no Netscape o método

getFullYear() devolve os anos transcorridos desde 1900, com o qual ao obter o

ano de uma data de, por exemplo, 2005, indica que é o ano 105. Para obter o

ano completo temos a nossa disposição o método getFullYear() que devolveria

2005 da mesma forma que em Netscape e Internet Explorer.

Muita atenção no trabalho com datas em distintas plataformas, visto que

poderia ser problemático o fato de oferecerem distintas saídas aos métodos de

manejo de datas, dependendo sempre da marca e versão de nosso navegador.

Link aleatório Javascript Criamos um link que nos leva a qualquer URL aleatoriamente, entre várias possibilidades.




Vamos criar um efeito típico em páginas web que consiste em um link que nos

levará a um site escolhido de forma aleatória. Para termos um idéia exata

podemos ver o exemplo em funcionamento.

Para isso vamos utilizar Javascript. Embora por algumas razões não seja a

melhor linguagem para fazer este exercício, sim que vai ser extremamente

simples e acreditamos que também será instrutivo para os leitores.

Para começar, vamos criar um array com os diferentes sites para onde poderia

nos conduzir nosso link. Temos que definir este array, logicamente, dentro de

um bloco

Esa declaração do array seria algo parecido a isso:

var enderecos = new

Array("http://www.terra.com","http://www.google.com","http://www.yahoo.com")

Como pode ser visto, na mesma linha na qual se declara o array se introduzem

os valores de cada um de seus campos, utilizando o método rápido de

declaração e de preenchimento de arrays em Javascript. Quanto mais valores

escrevermos, mais aleatório será o exercício, podendo colocar mais links sem

ter que editar o resto do código do programa. Em nosso exemplo completo

temos uma lista muito maior de links.

Continuamos colocando o link que se apresentará como "Link Aleatório", que

nos levará a um site aleatório, dentro das possibilidades.





http://www.criarweb.com/artigos/exemplos/tallerjs/link_aleatorio.html


< a href="javascript:linkAleatorio()">Link Aleatorio</a>

Como vemos, o link se encarrega de chamar a uma função que será a que vai

extrair uma URL do array anterior e nos transferir a este lugar. A função terá

esta forma:

function linkAleatorio(){

aleat = Math.random() * enderecos.length

aleat = Math.floor(aleat)

window.location=enderecos[aleat]

}

Como se pode ver, o primeiro que faz a função é obter um valor aleatório entre

0 e "enderecos.length", que é o número de URLs de nosso array. Se

mudarmos o número de URLs do array este script continuará funcionando

perfeitamente, porque os limites se extraem diretamente da propriedade length

do array que contém os endereços.

Para obter esse número aleatório se utiliza o método random da classe Math,

que devolve um número entre 0 e 1. Ao multiplica-lo pelo número de posições

do array obtemos um número entre 0 e o número de posições do array. Porém

este número está em um número flutuante, ou seja, é um número decimal, que

não nos serve como índice de um array. Por isso lhe aplicamos o método floor,

também do objeto Math, para obter a parte inteira deste número.

Por último se atualiza a propriedade location do objeto window com o valor do

array na posição aleatória, o que faz com que o navegador se dirija à página

aleatória, dentro das distintas possibilidades.

Exemplo completo

Para ver de maneira global este exercício, transcrevemos aqui todo o código

utilizado.

< html>

< head>

<title>Link Aleatorio</title>

<script>

var enderecos = new Array("http://www.terra.com.br",

"http://www.google.com.br", "http://jbonline.terra.com.br",

"http://www.lycos.com", "http://br.yahoo.com", "http://www.altavista.com",

"http://www.hotbot.com", "http://www.buscopio.com", "http://oglobo.globo.com",

"http://www.excite.com", "http://br.cade.yahoo.com",


"http://www.mercadolivre.com.br", "http://br.weather.com",

"http://www.buscape.com.br", "http://www.msn.com",

"http://www.astrolabio.net")

function linkAleatorio(){

aleat = Math.random() * enderecos.length


window.location=enderecos[aleat]

}

</script>

< /head>

< body>

< a href="javascript:linkAleatorio()">LinkAleatorio</a>

< /body>

< /html>

Geração de números aleatórios Javascript Artigo no qual se cria uma função para gerar números aleatórios na linguagem Javascript.




Em Javascript dispomos da classe Math, muito útil quando queremos fazer cálculos matemáticos de certa complexidade. Tal classe está explicada e documentada em um capítulo do manual de Javascript II. Para os que necessitarem, também temos explicações do que são as classes e os objetos. Neste workshop de Javascript vamos construir uma simples função para criar um número aleatório, entre um mínimo e um máximo, que poderemos utilizar logo em outros scripts mais complexos. Aqui temos o código que usa o método random da classe Math para obter um número aleatório com Javascript.

var aleatorio = Math.random() Assim criamos uma variável aleatória à que atribuímos o resultado de executar o método random da classe Math. O número aleatório que obtemos sempre estará compreendido entre 0 e 1. Se desejarmos obter um número aleatório em outra categoria, poderemos consegui-lo com um pouco de matemática e com a classe Math. Para ilustrar







isso vamos fazer uma função que devolve um número aleatório compreendido em um intervalo. O intervalo o recebe como parâmetro com duas variáveis, uma para o limite pela parte inferior e outra para o limite pela parte superior. function aleatorio(inferior,superior){ numPossibilidades = superior - inferior aleat = Math.random() * numPossibilidades aleat = Math.floor(aleat) return parseInt(inferior) + aleat } A função que fizemos é muito simples, porém funciona perfeitamente para todos os tipos de intervalos que possamos passar, tanto com números positivos como negativos. O primeiro que fazemos é obter o número de possibilidades diminuindo ao limite superior o inferior. Logo, multiplicamos tal numero de possibilidades pelo número aleatório obtido (que está entre 0 e 1), com o qual obtemos um número aleatório entre 0 e o número de possibilidades. O número tem um monte de decimais, e neste exemplo desejamos obter um número inteiro, sem decimais. Por isso, logo utilizamos o método round() da clase Math, que nos dá o inteiro mais próximo. Como o número ainda está entre 0 e o número de possibilidades temos que somar o limite inferior, com o que estará dentro da categoria que desejarmos. Este último valor será em que devolva a função. Esta função pode-se ver em funcionamento em uma página a parte. No exemplo, construímos um pequeno formulário que podemos preencher com o mínimo e o máximo e quando apertamos sobre o botão se mostrará o valor aleatório no campo abaixo de tudo.

Um exemplo do que podemos fazer com um número aleatório pode ser criar um link aleatório em uma página web. Podemos vê-lo no exemplo Link aleatório em Javascript. Ademais, neste exemplo cria-se o número aleatório de maneira ligeiramente distinta a como vimos agora, o que pode ser interessante para aprender melhor a usar os métodos da classe Math.

Comprovar se as senhas são iguais Em um formulário onde foram escritas duas senhas, explicamos como comprovar, utilizando Javascript, que são iguais antes de manda-las ao servidor.




http://www.criarweb.com/artigos/exemplos/tallerjs/ex_math_aleatorio.html





Em um formulário de registro de usuários é muito habitual que desejemos incluir um campo chave, que o usuário poderia utilizar para acessar aos serviços da web onde está se registrando ou para atualizar mais adiante a informação introduzida. Para realizar um formulário onde se escreva a senha, o normal é apareçam dois campos para introduzir a mesma senha e que o usuário que a introduza esteja forçado a escrever a senha duas vezes, sendo as duas senhas iguais. Isto nos ajuda a que o usuário não se engane ao escrever a senha por uma falha na datilografia, já que é complicado que erre duas vezes ao escrever a senha. Com Javascript podemos fazer uma comprovação -no cliente- para ver se foi introduzida a mesma senha nos dois campos e se for assim, mandar o formulário ao servidor ou fazer aquelas ações necessárias para continuar com o registro desse visitante. No caso de que as duas senhas sejam diferentes, o usuário deve ser informado da situação para que volte a introduzir a senha desejada corretamente. Comprovar se dois campos de formulário são iguais É uma ação bastante simples. Simplesmente devemos extrair os dois valores salvos nos campos do formulário onde foi escrita a senha e a repetição da senha. Logo, com um enunciado if, podemos comprovar se estes dois dados são o mesmo ou não e fazer as sentenças necessárias em cada caso. A função poderia ter uma forma como esta: function comprovarSenha(){ senha1 = document.f1.senha1.value senha2 = document.f1.senha2.value if (senha1 == senha2) alert("As duas senhas são iguais...\nRealizaríamos as ações do caso positivo") else alert("As duas senhas são diferentes...\nRealizaríamos as ações do caso negativo") }

Nota: Se desejarmos mandar o formulário ao servidor depois de ter visto que as duas senhas são iguais, ou seja, se depois da

comprovação queremos submeter o formulário, poderíamos executar o método submit() do objeto form.

document.f1.submit()

Observe que o formulário onde estamos acessando pela hierarquia de objetos





do navegador chama-se "f1". Isso quer dizer que a etiqueta <FORM> do

formulário onde estão os dois campos tem o atributo name="f1". Se nosso

formulário se chama de outra maneira teríamos que mudar as linhas onde se

acessa aos dois campos da senha, substituindo "f1" pelo nome do nosso

formulário. Da mesma forma, os dois campos onde se escrevem as senhas em

nosso exemplo se supõem que se chamam "senha1" e "senha2", se não for

assim, também teríamos que mudar esse nome para o que foi colocado.

Para ver mais claramente, temos aqui o código do formulário onde se

encontram os campos e seus nomes.

< form action="" name="f1">

Contraseha: <input type="password" name="senha1" size="20">

< br>

Repete contrasenha: <input type="password" name="senha2" size="20">

< br>

< input type="button" value="Comprovar se são iguais"

onClick="comprovarSenha()">

< /form>

Conclusão

Dada sua simplicidade, este exemplo não deveria supor muito problema.

Resta-nos ver o código do exemplo completo e, se desejarmos, acessar a uma

página onde se mostra o exercício em funcionamento.

< html>

< head>

<title>Validar se a senha e a repetição da senha são iguais</title>

< script>

function comprovarSenha(){

senha1 = document.f1.senha1.value

senha2 = document.f1.senha2.value

if (senha1 == senha2)

alert("As duas senhas são iguais...\nRealizaríamos as ações do caso positivo")

else

alert("As duas senhas são diferentes...\nRealizaríamos as ações do caso

negativo")

}

< /script>

< /head>

< body>

http://www.criarweb.com/artigos/exemplos/tallerjs/comprobar_contrasenas.html

http://www.criarweb.com/artigos/exemplos/tallerjs/comprobar_contrasenas.html

< h1>Validar se a senha e a repetição da senha são iguais</h1>

< br>

Escreva uma senha duas vezes, uma em cada campo, e clique o botão.

Javascript lhe dirá se as duas são iguais.

< br>

< form action="" name="f1">

Contrasenha: <input type="password" name="senha1" size="20">

< br>

Repita contrasenha: <input type="password" name="senha2" size="20">

< br>

< input type="button" value="Comprovar se são iguais"

onClick="comprovarSenha()">

< /form>

< /body>

< /html>

Ex. de trabalho com formulários. Calculadora simples Veremos um exemplo do trabalho com formulários no qual desenvolveremos uma calculadora simples.




Para ilustrar um pouco o trabalho com formulários, vamos realizar um exemplo

prático. Pode ser que algumas coisas das quais vamos tratar, fiquem um pouco

no ar por não terem sido explicadas detalhadamente antes, mas certamente

nos serve para estarmos por dentro de como se trabalha com formulários e as

possibilidades que temos.

Exemplo de calculadora simples

Neste exemplo vamos construir uma calculadora, embora bastante simples,

que permita realizar as operações básicas. Para fazer a calculadora vamos

realizar um formulário no qual vamos colocar três campos de texto, os dois

primeiros para as parcelas e um terceiro para o resultado. Ademais haverá uns

botões para fazer as operações básicas.



O formulário da calculadora pode ser visto aqui.

< form name="calc">


< br>


< br>

< input type="Button" name="" value=" + " onclick="calcula('+')">

< input type="Button" name="" value=" - " onclick="calcula('-')">

<input type="Button" name="" value=" X " onclick="calcula('*')">

< input type="Button" name="" value=" / " onclick="calcula('/')">

< br>

< input type="Text" name="resultado" value="0" size="12">

< /form>

Mediante uma função vamos acessar aos campos do formulário para buscar as

parcelas em duas variáveis. Os campos de texto têm uma propriedade

chamada value que é onde podemos obter o que têm escrito nesse momento.

Mais tarde recorreremos a função eval() para realizar a operação. Colocaremos

por último o resultado no campo de texto criado em terceiro lugar, utilizando

também a propriedade value do campo de texto.

Chamamos à função que realiza o cálculo (que podemos ver a seguir)

apertando os botões de cada uma das operações. Tais botões podem ser

vistos no formulário e contém um atributo onclick que serve para especificar as

sentenças Javascript que desejarmos que se executem quando o usuário clicar

sobre ele. Neste caso, a sentença a executar é uma chamada à função

calcula() passando como parâmetro o símbolo ou a parcela da operação que

desejarmos realizar.

O script com a função calcula()

< script>

function calcula(operacao){



var result = eval(parcela1 + operacao + parcela2)

document.calc.resultado.value = result

}

< /script>

A função eval(), lembramos, que recebia um string e o executava como uma

sentença Javascript. Neste caso, irá receber um número que concatenado a

uma operação e outro número será sempre uma expressão aritmética que




eval() solucionará perfeitamente.

Podemos ver o exemplo da calculadora em funcionamento.

O acesso a outros elementos dos formulários se faz de maneira parecida a

respeito da hierarquia de objetos, entretanto, como cada elemento tem suas

particularidades as coisas que poderemos fazer com eles diferirão um pouco.

Isto será visto mais adiante.

Enviar ao navegador a outra página se não tiver Javascript Uma técnica pela qual podemos dirigir ao navegador a outra página no caso de que não suporte scripts em Javascript.




Imaginemos uma página que, para se ver bem, necessite ter habilitada a

possibilidade de executar scripts em Javascript e que, se não tiver habilitado

Javascript, não funcionasse bem e não pudesse mostrar todos os conteúdos.

Em um caso como este seria muito útil dispor de uma função que detecte se

está habilitado ou não Javascript para, no caso de que não seja assim, se

envie ao navegador o outro endereço.

Pois esta função que detecta se está ou não habilitado Javascript não se pode

fazer tão ricamente, pelo menos utilizando Javascript. Imagine que você não

dispõe de Javascript, o navegador não poderia então executar essa função e

nunca detectaria que não há Javascript.

Por sorte temos um enunciado <NOSCRIPT></NOSCRIPT> que nos serve

para indicar ações a tomar no caso de que não esteja habilitado Javascript.

Utilizando essa etiqueta podemos colocar um link para que se veja só nos

navegadores que não têm Javascript:

< NOSCRIPT>

Seu navegador não suporta Javascript. <a href="no_javas.html">Entre em uma

página que não o utiliza</a>

< /NOSCRIPT>

Podemos ainda ir um passo mais longe e utilizar a etiqueta META tipo


http://www.criarweb.com/artigos/exemplos/javascript2/calculadora-simples.html




"Refresh" para que o navegador se refresque automaticamente e se dirija a

outra página que não inclua programação em Javascript.

É uma opção muito mais interessante, porque não temos que esperar que o

visitante clique no link e assim nos certificamos que, apesar de alguém não

encontrar o link, o navegador o encaminha corretamente.

< NOSCRIPT>

< META HTTP-EQUIV="Refresh" CONTENT="3;URL=no_javas.html">

< /NOSCRIPT>

Obviamente, isto só funcionará se nosso navegador aceita este tipo de

etiquetas de refresh automático, embora os navegadores mais habituais sim

que as aceitam.

Aliás, a etiqueta de refresh deve ser colocada no cabeçalho (Dentro de

<HEAD></HEAD>). O primeiro dado do valor de refresh é o tempo de espera

antes de se atualizar em segundos, neste caso 3 segundos. O segundo dado é

o endereço ao qual queremos enviar o navegador, neste caso

no_javascript.html.

Confirmação de envio de formulário Script em Javascript para que o usuário aceite ou cancele o envio de um formulário quando apertar o botão de enviar.




Este artigo amplia uma dúvida de um usuário de CriarWeb.com. A pergunta em concreto que nos realizou o usuário era como fazer um formulário que, ao envia-lo, nos pergunte se realmente se deseja enviar.

A pergunta em concreto era a seguinte:

Estou fazendo um formulário e desejo que, ao envia-lo, me mostre uma janela de confirmação de envio do formulário, dessas que têm um botão de aceitar e outro de cancelar. Então, se se aceita o envio, se enviaria o formulário.... se

não se aceita, o formulário não seja enviado.

Resposta




Isto tem muito a ver com o tema de tratamento de formulários. A resposta baseia sua maior técnica no fato de substituir o botão de submit por um botão normal. Com o botão normal não se envia o formulário diretamente e sim, chama a uma função que realiza a confirmação e, no caso positivo, envia o formulário.

O botão que colocaríamos no formulário em substituição do botão de submit seria o seguinte:

< input type=button onclick="pergunta()" value="Enviar">

Observemos que o botão tem definida uma ação no momento em que se clica. A ação em concreto faz com que se execute a função pergunta(), que será a que realize a confirmação e envie o formulário no caso positivo. Seu código pode ser visto a seguir.

< script language="JavaScript"> function pergunta(){ if (confirm('Tem certeza que quer enviar este formulário?')){ document.seuformulario.submit() } } < /script>

A caixa confirm devolve true ou false dependendo de se se clica o botão de aceitar ou cancelar. Esse valor se utiliza em um enunciado if para decidir se se envia o formulário, com seu método submit(), ou não se faz nada.

O código completo de uma página que realiza esta tarefa em um formulário é o seguinte: < html> < head> <title>Confirmação de envio de formulário</title> < script language="JavaScript"> function pergunta(){ if (confirm('Tem certeza que quer enviar este formulário?')){ document.seuformulario.submit() } } < /script>

< /head> < body> < form name=tuformulario action="http://www.criarweb.com"> < input type="text" name="qualquercampo"> < input type=button onclick="pergunta()" value="Enviar"> < /form>



< /body> < /html>

Javascript para se posicionar em um select Script em Javascript para se posicionar mediante o clique de teclas do teclado dentro dos elementos de um campo select de formulário.

Por Ignacio Rodriguez



Trata-se de um script para se posicionar em um elemento de um select, ou

seja, para conseguir que, clicando umas teclas do teclado que poderiam

corresponder com as primeiras letras de um elemento do select, o elemento

selecionado do tal select seja aquele que corresponda com as letras pulsadas.

É uma descrição um pouco longa, mas na verdade o efeito é simples. Nos

select das páginas web, ao clicar uma tecla, o select se move ao primeiro

elemento que tem como inicial essa tecla. Entretanto, se há muitos elementos

no select, o usuário pode achar que essa ajuda fica um pouco curta, já que

teria que, logo clicar a inicial do elemento buscado, repassar todos os

elementos que começam por essa letra até encontrar o que busca. O presente

exemplo melhora essa função de busca nos select, já que permite realizar o

clique de várias teclas seguidas e vai mostrando aquele elemento que começa

por todas as letras que vão sendo clicadas (uma atrás da outra) até que se

aperta a tecla Enter, momento no qual se supõe que encontramos o elemento

adequado e queremos continuar com o preenchimento de outros campos do

formulário.

Neste exemplo foi criado um select com os nomes de diferentes países. Se, por

exemplo, queremos buscar o país Estados Unidos, nos selects normais

podemos clicar a E (inicial de Estados Unidos) e buscar entre todos os países

até que aparece o que queremos. Porém, com a implementação deste script

poderemos clicar a E, com o que se posicionará no primeiro país que comece

por E (que não tem porque ser o que buscamos, na prática será Equador).

Logo, podemos clicar a letra S, com o qual se mostrará Espanha, que não é o

que buscamos. Mais tarde clicaria-se a T, aparecendo Estônia e, por último, ao

clicar a tecla A, já apareceria o elemento que buscávamos, ESTAdos Unidos.

O script

O script encontra-se comentado dentro do próprio código, para que possa ser






compreendido facilmente, ou pelo menos suas bases. Basicamente, utiliza-se o

evento de teclado onKeyPress no elemento select dos países, de modo que,

quando se clique uma tecla, se tivermos o foco no select, se chamará a uma

função que se encarregará de fazer o trabalho mais duro.

Tal trabalho consiste em pegar a tecla que foi clicada e salva-la em uma

estrutura de dados, ademais de selecionar o elemento mais próximo ao valor

atual da estrutura de dados. Por último, clica-se a tecla enter, deixa-se o select

com o último valor selecionado e passa-se o foco ao seguinte elemento do

formulário para que o usuário continua preenchendo-o.

< script language="JavaScript1.2">

var digitos=10 //quantidade de digitos buscados

var ponteiro=0

var buffer=new Array(digitos) //declaração do array Buffer

var cadeia=""

function buscar_op(obj,objfoco){

var letra = String.fromCharCode(event.keyCode)

if(ponteiro >= digitos){

cadeia="";

ponteiro=0;

}

//se se pressiona a tecla ENTER, apago o array de teclas pressionadas e salto

a outro objeto...

if (event.keyCode == 13){

apagar_buffer();

if(objfoco!=0) objfoco.focus(); //evita foco a outro objeto se objfoco=0

}

//senao busco a cadeia teclada dentro do combo...

else{

buffer[ponteiro]=letra;

//salvo na posicao ponteiro a letra teclada

cadeia=cadeia+buffer[ponteiro]; //armo uma cadeia com os dados que vao

ingressando ao array

ponteiro++;

//barro todas as opcoes que contem o combo e comparo a cadeia...

for (var opcombo=0;opcombo < obj.length;opcombo++){

if(obj[opcombo].text.substr(0,ponteiro).toLowerCase()==cadeia.toLowerCase()){

obj.selectedIndex=opcombo;

}

}

}

event.returnValue = false; //invalida a acao de clique de tecla para evitar busca

do primeiro caractere

}

function apagar_buffer(){

//inicia a cadeia buscada

cadeia="";

ponteiro=0;

}

</script>

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="544" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="89" height="29"></td>

<td width="114"></td>



</tr>

<tr>

<td height="19"></td>

<td valign="top">

<select name="combo1" onKeypress=buscar_op(this,text2)

onblur=borrar_buffer() onclick=borrar_buffer()>

<option>Argentina</option>

<option>Australia</option>

<option>Bolivia</option>

<option>Brasil</option>

<option>Canada</option>

<option>Colombia</option>

<option>Dinamarca</option>

<option>Estados Unidos</option>

<option>Estonia</option>

<option>Austria</option>

<option>Bulgaria</option>

<option>Chile</option>

<option>Espanha</option>

<option>China</option>

<option>Costa Rica</option>

<option>Croacia</option>

<option>Equador</option>

</select>

</td>

<td></td>

<td></td>

</tr>

<tr>


<td></td>

<td></td>

<td></td>

</tr>

<tr>


<td colspan="2" valign="top">

<input type="text" name="text2">

</td>

<td></td>

</tr>

<tr>


<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

Esperamos que vocês possam entender o script e utiliza-lo em suas páginas

web.

Inibir um campo texto de formulário com Javascript Fazer com que um campo de formulário fique desabilitado, ou seja, que não possa clicar encima e mudar seu valor.





Desta vez faremos um workshop muito rápido e simples com Javascript para fazer com que um campo de formulário de tipo texto encontre-se inibido, ou seja, que não possamos clicar encima dele para editar seu conteúdo. Focus e Blur A maneira de fazê-lo requer o conhecimento de dois conceitos habituais de Javascript relacionados com o foco da aplicação. O conceito focus, está relacionado com ganhar foco da aplicação. O método focus(), que têm os campos de texto e outros elementos de formulário, serve para outorgar o foco da aplicação a esse elemento. O administrador de evento onfocus aparece quando um elemento ganha o foco da aplicação. O conceito blur, está associado a perder o foco da aplicação. O método blur() serve para que os elementos de formulário percam o foco e o administrador de eventos onblur se ativa quando o elemento a que o apliquemos perda o foco da aplicação. O exercício Para inibir um campo de formulário podemos fazer com que o usuário nunca possa clicar nesse elemento ou então, que se chegar a clicar seja repelido imediatamente. Para isto o único que temos que fazer é retirar o foco de um elemento quando tiver ganhado. Nós utilizaremos o evento onfocus para detectar o instante no qual o elemento ganha o foco e nesse momento faremos uso do método blur() para retirar o foco. O código é extremamente simples para tanta explicação: < form> < input type="text" value="122" onfocus="this.blur()"> < /form> O único detalhe que vale a pena assinalar é o uso da palavra this, que faz referência ao elemento onde se está utilizando, nesse caso o campo de texto. this.blur() seria uma simples chamada ao método blur() no elemento de formulário onde está colocada.

Pode ser visto em funcionamento aqui: 122

Mostrar e ocultar camadas com IE 5,6 NS 6,7 Explicação e exemplos sobre a maneira de mostrar e ocultar camadas com o método getElementById() de Javascript.








O primeiro a fazer é definir as funções de mostrar e ocultar. Estas duas funções, receberão por parâmetro, o nome da camada que queremos mostrar ou ocultar, a seguir, mediante a função getElementById, acessaremos às propriedades da camada, e através de style aos estilos que nos definem se a camada está visível ou não (propriedade visibility), ativando-a ou desativando-a segundo a função.

Referência: Falamos sobre a função getElementById() no artigo Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera

< script language="Javascript">

function mostrar(nomeCamada){

document.getElementById(nomeCamada).style.visibility="visible";

}

function ocultar(nomeCamada){

document.getElementById(nomeCamada).style.visibility="hidden";

}

< /script>

A seguir é necessário definir as camadas, e chamar em algum momento às

funções definidas. Utilizaremos os eventos onMouseOver e onMouseOut da

camada 1 para mostrar e ocultar a camada 2.

< div id="camada1"

style="position:absolute;width:100;height:100;top:100;left:100;background-

color:blue" onmouseout="ocultar('camada2')"

onmouseover="mostrar('camada2')">Camada 1</div>

< div id="camada2"


color:red;visibility:hidden">Camada 2</div>

Ao passar por cima da camada 1 se mostrará a 2, e ao sair da camada 1, se

ocultará a dois.

Exemplo completo:

<html>

< head>





<title>Untitled</title>


function mostrar(nomeCamada){

document.getElementById(nomeCamada).style.visibility="visible";

}

function ocultar(nomeCamada){

document.getElementById(nomeCamada).style.visibility="hidden";

}

< /script>

< /head>

< body>

< div id="camada1"


color:blue" onmouseout="ocultar('camada2')"

onmouseover="mostrar('camada2')">Camada 1</div>

< div id="camada2"


color:red;visibility:hidden">Camada 2</div>

< /body>

< /html>

Movimento de Camadas com IE 5,6 NS 6,7 Exemplo de DHTML, com o qual podemos criar um movimento com camadas.




Para deslocar uma camada pela tela, é necessário modificar os atributos Top e Left.

Referência: Falamos sobre a função getElementById(), necessária para entender a maneira de trabalhar neste artigo, no documento

Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera

Top define a posição vertical da camada desde a parte superior da tela

Left define a posición horizontal da camada desde a parte esquerda da tela.

Ao modificar os valores de Top e Left conseguiremos o movimento da camada.






Por último, temos que redesenhar os valores que armazenam uma cadeia de

texto com o valor e as unidades, por isso será necessário converter os valores

que se armazenam dentro das propriedades antes de poder utiliza-los.

Por exemplo, um valor armazenado em top o left poderá ser 140px.

Por este motivo é necessário utilizar a função parseInt para poder converter os

valores a números.

A seguir mostra-se um exemplo, que desloca uma camada 5 pixels cada vez

que se clica o botão:

A função recebe por parâmetro o nome da camada que se deseja mover,

acessa mediante a função getElementById à propriedade de top, mediante

ParseInt a converte a um inteiro, soma 5 unidades, e a seguir escreve o novo

valor no estilo da camada.


function mover(nomeCamada){

valor=document.getElementById(nomeCamada).style.top;

numero=parseInt(valor);

numero+=5;

document.getElementById(nomeCamada).style.top=numero;

}

< /script>

Exemplo completo:

<html>

< head>

< title>Untitled</title>


function mover(nomeCamada){

valor=document.getElementById(nomeCamada).style.top;

numero=parseInt(valor);

numero+=5;

document.getElementById(nomeCamada).style.top=numero;

}

< /script>

< /head>

< body>

< div id="camada1"



color:blue">Camada 1</div>

< form name="meuform" action="#">

< input type="button" onclick="mover('camada1')" value="Mover Camada">

< /form>

< /body>

< /html>

Escritura nas Camadas com IE 5, 6, NS 6, 7 Mecanismo e funções simples para escrever dinamicamente texto em uma camada.




O texto que se encontra armazenado dentro de uma camadas, se encontra dentro da propriedade innerHTML. Esta propriedade, está implementada no Internet Explorer desde a versão 4, e Netscape o incorporou nas versões 6 e 7 apesar de que não se encontra definido no padrão do W3C.

Referência: Este artigo oferece ajudas para a qual é necessário conhecer um pouco Javascript e o método getElementById().

Recomendamos consultar estes links:

Programação em JavaScript Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera

A propriedade armazena o código HTML que se corresponde com o que se

visualiza dentro da camada, ou seja, se a camada contém " ola " a propriedade

conterá " ola " entretanto, se a propriedade contém um link

http://www.criarweb.com então a cadeia de texto conterá

"http://www.criarweb.com, por isso poderá ser escrito qualquer tipo de conteúdo

dentro da camada.

O seguinte exemplo, contém um formulário com uma caixa de texto, o usuário

pode escrever qualquer texto ou código HTML, e ao clicar o botão, este se

mostrará dentro da camada.

A função recebe por parâmetro o nome de uma camada e o formulário que

contém a caixa de texto, salva o valor do quadro de texto dentro de uma

variável e a seguir atribui à propriedade innerHTML da camada:

function escreveCamada(camada,formulario){




http://www.criarweb.com/manual/javascript/



http://www.criarweb.com/

texto=formulario.caixa.value;

document.getElementById(camada).innerHTML=texto;

}

Exemplo completo:

< html>

< head>

< title>Untitled</title>


function escreveCamada(camada,formulario){

texto=formulario.caixa.value;

document.getElementById(camada).innerHTML=texto;

}

< /script>

< /head>

< body>

< div id="minhacamada"


color:yellow"> </div>

< form name="meuformulario" action="#">

Texto: <input type="text" name="caixa" size="50"> <input type="button"

onclick="escreveCamada('minhacamada',this.form)" value="escrever">

< /form>

< /body>

< /html>

Como iluminar tabelas, células ou filas Curioso efeito conseguido com Javascript, que nos permite jogar com a transparência de qualquer imagem.

Por Fabio Núñez Iturriaga



Passo 1: Colocar este script no head <head> xxx </head> < script> function um(src,cor_entrada) { src.bgColor=cor_entrada;src.style.cursor="hand"; } function dois(src,cor_default) { src.bgColor=cor_default;src.style.cursor="default";



} < /script> Passo 2: Se o que você quer é que se ilumine uma célula observe o seguinte código: < table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center"> < tr> < td> < table border="0" cellspacing="1"cellpadding="0" align="center" width="278"> < tr bgcolor="#FFFFFF"> < td onMouseOver="um(this,'cccccc');" onMouseOut="dois(this,'FFFFFF');" align="center" width="100" valign="middle"><font face="Arial, Helvetica, sans-serif" size="1"> PASSE POR CIMA</font></td> < td width="95"> </td> < td width="83"> </td> < /tr> < tr bgcolor="#FFFFFF"> < td width="100"> </td> < td width="95"> </td> < td width="83"> </td> </tr> < tr bgcolor="#FFFFFF"> < td width="100"> </td> < td width="95"> </td> <td width="83"> </td> < /tr> </table> </td> < /tr> </table>

PASSE POR CIMA

Passo 3: Se o que você quer é que se ilumine uma fila observe o seguinte código: < table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000"

align="center" width="317"> < tr> < td> < table border="0" cellspacing="1" cellpadding="0" align="center" width="325"> < tr onMouseOver="um(this,'cccccc');" onMouseOut="dois(this,'FFFFFF');" bgcolor="#FFFFFF"> < td align="center" width="108" valign="middle" height="17"> < font face="Arial, Helvetica, sans-serif" size="1">PASSE POR


CIMA</font></td> < td width="114" height="17"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < td width="99" height="17"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < /tr> < tr bgcolor="#FFFFFF"> < td width="108"> </td> < td width="114"> </td> < td width="99"> </td> </tr> < tr bgcolor="#FFFFFF"> < td width="108"> </td> <td width="114"> </td> <td width="99"> </td> < /tr> </table> < /td> < /tr> < /table>

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

Passo 3: Se o que você quer é que se ilumine uma tabela completa observe o seguinte código: < table border="0" cellspacing="1" cellpadding="0" bgcolor="#000000" align="center" width="317"> < tr> <td> < table border="0" cellspacing="1" cellpadding="0" align="center" width="325" height="62" onMouseOver="um(this,'cccccc');" onMouseOut="dois(this,'FFFFFF');" bgcolor="#FFFFFF"> < tr> < td align="center" width="108" valign="middle" height="17"> < font face="Arial, Helvetica,sans-serif" size="1">PASSE POR

CIMA</font></td> <td width="114" height="17"> <div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> <td width="99" height="17"> <div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>

< /td> < /tr> < tr> < td width="108"> < div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < td width="114"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> < td width="99"> < div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < /tr> < tr> <td width="108"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> <td width="114"> <div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> <td width="99"> <div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> </tr> < /table> </td> < /tr> < /table>

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

Paso 4: Se o que você quer é que se iluminem as bordas de uma tabela observe o seguinte código: < table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" align="center" width="317"> <tr> < td>

< table onMouseOver="um(this,'000000');" onMouseOut="dois(this,'CCCCCC');" border="0" cellspacing="1" cellpadding="0" align="center" width="325" height="60"> < tr bgcolor="#FFFFFF"> < td align="center" width="108" valign="middle" height="17"> < font face="Arial, Helvetica,sans-serif" size="1">PASSE POR CIMA</font></td> < td width="114" height="17"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> < td width="99" height="17"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < /tr> < tr bgcolor="#FFFFFF"> < td width="108"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < td width="114"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < td width="99"> < div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> < /td> < /tr> < tr bgcolor="#FFFFFF"> <td width="108"> < div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> <td width="114"> <div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div> </td> <td width="99"> <div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE

POR CIMA</font></div> </td> </tr> </table> </td> </tr> </table>

PASSE POR PASSE POR PASSE POR

CIMA CIMA CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

PASSE POR CIMA

Inibir radio button com Javascript Workshop de Javascript para desabilitar botões de radio para que, ao clica-los, fique sempre marcada a opção por padrão.




Veremos neste workshop como se pode desabilitar um elemento de formulário de tipo radio button. Com outras palavras, vamos ver a maneira de fazer com que, ao clicar um campo tipo radio de um formulário, não mude a opção escolhida por padrão no código HTML da página. Pode-se ver o exemplo em funcionamento sob estas linhas. Observem que, ao clicar os radio button, não muda a opção escolhida inicialmente, que é a primeira.

Olá pessoal!

Aqui estamos

E você aí?

Detalhes prévios Os campos de formulário tipo radio se manejam como um grupo. Na hierarquia de objetos do navegador ficam debaixo do objeto form e dentro de um array que toma o nome atribuído ao grupo de botões. Pode-se ver esta formação no artigo Controle de botões de radio em Javascript. Solução A maneira que nós implementamos de solucionar este assunto é definindo uma

variável com o índice do array do botão de radio que tem que estar selecionado. Ademais, teremos uma função que se chamará ao clicar em qualquer botão de radio que se encarregará de selecionar o botão de radio por padrão, deste modo, embora selecionemos outro elemento do conjunto, se selecionará automaticamente o elemento marcado por padrão. Ademais, a função receberá o índice do botão de radio clicado e retirará o foco da aplicação de tal elemento.







Podemos ver o código a seguir: < html> < head> <title>Exemplo para desabilitar radio butons</title> < script> indice_marcado = 0 function desabilitar(formulario,idradio){ formulario.meuradio[indice_marcado].checked = true formulario.meuradio[idradio].blur() } < /script> < /head> < body> < h1>Exemplo para desabilitar radio butons</h1> < form name="f1"> < input type="radio" name="meuradio" value="O que for" onclick="desabilitar(this.form,0)" checked> Olá pessoal! < br> < input type="radio" name="meuradio" value="outra coisa" onclick="desabilitar(this.form,1)"> Aqui estamos < br> < input type="radio" name="meuradio" value="mais coisas" onclick="desabilitar(this.form,2)"> E você aí? < /form> < /body> < /html> Nos elementos de formulário de tipo radio button temos o manejador de eventos onclick que se chama quando se clica nesse botão de radio. Tal manejador de eventos chama a uma função passando-lhe o formulário onde estamos trabalhando e o índice do botão de radio atual, que começa em zero. A função desabilitar(), definida no bloco de script do cabeçalho, contém duas sentenças. A primeira volta a colocar a seleção no botão de radio adequado, utilizando a propriedade checked do radiobutton, e a segunda retira o foco do elemento clicado, com o método blur().

Atualizar dois frames com um só link Exemplo de controle de frames mediante Javascript no qual,clicando um só link, se atualizam duas páginas distintas contidas em dois frames.






Com o que já sabemos sobre o controle de frames, podemos realizar um

exemplo para consolidar os conhecimentos. Trata-se de um exercício muito

simples para conseguir que, ao clicar um link, se atualize a página contida em

dois frames diferentes.

Como um link só serve para atualizar o conteúdo de um frame, necessitaremos

executar umas sentenças javascript que sim nos permitam atualizar dois

frames de uma vez.

Se não se entende o objetivo perseguido neste exemplo, podemos vê-lo em

funcionamento em uma página a parte.

Comecemos vendo a declaração de frames, que não tem nenhuma

complicação pois é simplesmente um código HTML que podemos aprender a

programar nos artigos dedicados a frames do manual de HTML.

<html>

< head>

<title>Exemplo de frames numero 1</title>

< /head>

< frameset rows="50%,*">

<frame name="frame1" src="pagina1.html" marginwidth="10"

marginheight="10" scrolling="auto" frameborder="0">

<frame name="frame2" src="pagina2.html" marginwidth="10"

marginheight="10" scrolling="auto" frameborder="0">

< /frameset>

< /html>

Agora vejamos o código do primeiro dos frames, que é o que tem a função

Javascript para controlar os frames.

< html>

< head>

<title>Pagina 1</title>


function atualiza_2_frames(){

window.parent.frames[1].location="http://www.google.com"

window.location="http://www.yahoo.com"

}

< /script>


http://www.criarweb.com/artigos/exemplos/javascript2/ejemploframes1

http://www.criarweb.com/artigos/exemplos/javascript2/ejemploframes1




< /head>

< body bgcolor="#ff9999">

< br>

< br>

< a href="javascript:atualiza_2_frames()">Atualiza dois frames com um so

link</a>

< /body>

< /html>

Ao clicar o link se chama a uma função, colocada no cabeçalho da página, por

comodidade e para evitar ter que escrever várias sentenças no atributo href do

link.

A função, onde verdadeiramente está o miolo do exercício, é extremamente

simples. A primeira sentença acessa ao frame colocado em segundo lugar (que

tem o índice 1) e atualiza sua propriedade location, que é a URL da página que

se está visualizando. Neste caso coloca a web de Google em tal frame, embora

seja indiferente o que desejemos colocar e poderíamos ter situado um

endereço com um caminho relativo ao documento atual.

Na segunda sentença acessamos diretamente à propriedade location do objeto

window, porque desejamos atualizar o mesmo frame onde está colocado o

script. Poderíamos ter utilizado uma sentença como a seguinte:

window.parent.frames[0].location=" http://www.yahoo.com "

Porém, neste caso não é necessário acessar à declaração de frames e logo ao

frame 0 porque, como dizia, já estamos nele.

Por último vejamos o código do segundo frame, que não tem nada de especial.

< html>

< head>

<title>Pagina 1</title>

< /head>

< body bgcolor="#9999ff">

< br>

< br>

Este é o corpo do frame 2, que tem índice 1 no vetor de frames

< /body>

< /html>

Calcular a idade em Javascript

Realizamos e explicamos uma função que recebe uma data de

nascimento e devolve o número de anos desde a data, ou seja, a idade.




Neste artigo vamos explicar uma função que calcula a idade de uma pessoa. Para isso recebe um string com a data de nascimento da pessoa e devolve o número de anos que tem. Estamos diante um exercício que ilustra muito bem o trabalho com datas em Javascript.

Referência: Para aprender algo que nos sirva de base no cálculo de

datas seria interessante ler o artigo Clase Date em Javascript.

O método de trabalho Nós estamos pensando em receber uma data em formato português: algo como "12/10/1975", de tipo string. O primeiro será separar os diferentes valores de ano, mês, dia. Para isso, utilizamos o método split(), que pertence à classe String (tipo da data que vamos receber), que devolve um array com o valor de cada uma das partes da cadeia, utilizando como separador o caractere "/". Depois da separação, no array devolvido, deveríamos ter três campos, onde o primeiro (o de índice 0) salvará o dia, o segundo o mês e o terceiro o ano.

Referência: Os métodos da classe String podem ser vistos no artigo

Classe String em Javascript.

Vamos realizar a seguir algumas comprovações para certificarmos que as datas estejam corretas, ou seja, que temos um valor numérico como dia, outro como mês e outro como ano. Se não for assim, devolveremos false, que deveria se interpretar como que a função é incapaz de calcular a idade, porque a data de nascimento passada não é correta. A seguir restaremos o número de anos da data atual, que poderiam ser 2007, com o número de ano da data de nascimento, que será algo como 1975. Neste

caso, daria 32, porém nós vamos considerar 31, pois não sabemos se a suposta pessoa já fez anos no ano curso, ou não. Ou seja, hoje que é junho, se fez anos em março, essa pessoa já teria 32 anos, porém se faz anos em agosto, teria agora 31 anos. Portanto, nosso próximo passo será saber em qual mês a pessoa fez anos e disso, poderíamos ter três casos.





1. Se o mês atual for menor que o mês de nascimento. Então, é porque ainda não cumpriu os anos ainda neste período anual. (Os anos, no exemplo anterior, seriam 31)

2. Se o mês atual for maior que o mês de nascimento, quer dizer que essa pessoa sim que já celebrou seu aniversário este ano. (Os anos, no exemplo anterior, seriam 32)

3. Se os dois meses forem iguais, temos que observar o dia de uma maneira similar a como foi realizado com os meses:

1. Se o dia atual for menor que o dia de nascimento, é porque faltam uns dias ainda para seu aniversário (Visto o exemplo anterior, os anos seriam 31).

2. Se o dia atual for maior ou igual que o dia de nascimento é porque já cumpriu anos (Visto o exemplo anterior, os anos seriam 32).

O script para calcular a idade Bom, com estas explicações esperamos que qualquer pessoa com um nível médio de Javascript, poderia realizar o código desta função, porém o objetivo é mostrar-lhes nossa proposta de código, que está comentada para que possa ser entendida facilmente. //calcular a idade de uma pessoa //recebe a data como um string em formato portugues //devolve um inteiro com a idade. Devolve false em caso de que a data seja incorreta ou maior que o dia atual function calcular_idade(data){ //calculo a data de hoje hoje=new Date() //alert(hoje) //calculo a data que recebo //descomponho a data em um array var array_data = data.split("/") //se o array nao tem tres partes, a data eh incorreta if (array_data.length!=3) return false //comprovo que o ano, mes, dia são corretos var ano

ano = parseInt(array_data[2]); if (isNaN(ano)) return false var mes mes = parseInt(array_data[1]); if (isNaN(mes)) return false


var dia dia = parseInt(array_data[0]); if (isNaN(dia)) return false //se o ano da data que recebo so tem 2 cifras temos que muda-lo a 4 if (ano<=99) ano +=1900 //subtraio os anos das duas datas edad=hoje.getYear()- ano - 1; //-1 porque ainda nao fez anos durante este ano //se subtraio os meses e for menor que 0 entao nao cumpriu anos. Se for maior sim ja cumpriu if (hoy.getMonth() + 1 - mes < 0) //+ 1 porque os meses comecam em 0 return idade if (hoje.getMonth() + 1 - mes > 0) return idade+1 //entao eh porque sao iguais. Vejo os dias //se subtraio os dias e der menor que 0 entao nao cumpriu anos. Se der maior ou igual sim que já cumpriu if (hoje.getUTCDate() - dia >= 0) return idade + 1 return idade }

Nota: Para entender esta função será necessário saber que, quando

se executa return dentro de uma função, se devolve o valor indicado e

se sai da função, sem que se possa executar outras sentenças que

existam debaixo do return.

Iluminar formulários com CSS e Javascript Como modificar propriedades de cor de fundo de objetos de um formulário ao passar o mouse por cima.

Por Fabio Núñez Iturriaga



Ler o artigo sobre iluminação de tabelas, células, filas me parece muito interessante e necessário em alguns trabalhos de programação de páginas webs. Interessado em tal artigo e com ajuda do manual de Programação em





http://www.criarweb.com/artigos/iluminar_formularios_css_javascript.html


Javascript II, que também está publicado neste site, mostra-se este pequeno trabalho.

Passo 1: As cores de fundo das caixas de texto e algumas outras propriedades se manipulam muitas vezes utilizando folhas de estilo. Neste primeiro passo, será feito de forma bastante simples. Coloque este script no head <head> xxx < /head> < script> function form_um(num_form,num_elem_form,cor_entrada) { document.forms[num_form].elements[num_elem_form].style.backgroundColor=cor_entrada; document.forms[num_form].elements[num_elem_form].focus(); } function form_dois(num_form,num_elem_form,cor_default) { document.forms[num_form].elements[num_elem_form].style.backgroundColor=cor_default; } </script> Passo 2: Agregamos o código da seguinte maneira:

<p> <input type="text" name="campo1" onMouseOver="form_um(0,0,'Lavender');" onMouseOut="form_dois(0,0,'ffffff');" class="caixa" > <br> <input type="text" name="campo2" onMouseOver="form_um(0,1,'red');" onMouseOut="form_dois(0,1,'ffffff');" class="caixa"> <br> <textarea name="campo3" onMouseOver="form_um(0,2,'blue');" onMouseOut="form_dois(0,2,'ffffff');" class="caixa"></textarea> <br> <select name="campo4" onMouseOver="form_um(0,3,'cccccc');" onMouseOut="form_dois(0,3,'ffffff');" class="caixa">

<option value="1">um</option> <option value="2">dois</option> <option value="3">tres</option> <option value="4">quatro</option> <option value="5">cinco</option> </select>

</form>


http://www.criarweb.com/artigos/iluminar_formularios_css_javascript.html

O resultado é o seguinte:

um

Até este ponto vemos que nosso formulário se vê bastante convencional, para melhorar um pouco nossa apresentação, deve-se incluir código de estilo, como o que segue:

Passo 3: Colocar este script no head <head> xxx < /head>: < style type="text/css">  </style>

Passo 4: O que falta fazer é somente o link dos objetos do formulário com o respectivo estilo que desejarmos. Então, o código ficaria assim como segue e o resultado se vê no seguinte quadro.

<form method="post" action="" name="meuformulario2"> <input type="text" name="campo12" onMouseOver="form_um(1,0,'Lavender');" onMouseOut="form_dois(1,0,'FFFFF0');" class="caixa" > <br> <input type="text" name="campo22" onMouseOver="form_um(1,1,'red');" onMouseOut="form_dois(1,1,'FFFFF0');"> <br> <textarea name="textarea" onMouseOver="form_um(1,2,'blue');"

onMouseOut="form_dois(1,2,'FFFFF0');" class="caixa"></textarea> <br> <select name="select" onMouseOver="form_um(1,3,'cccccc');" onMouseOut="form_dois(1,3,'FFFFF0');" class="caixa"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> <option value="4">quatro</option> <option value="5">cinco</option> </select> <input type="submit" name="Submit" value="Enviar" class="botao">

</form>

O resultado 2 é o seguinte:

um Enviar

As funções form_um e form2 se explicam a seguir: function form_um(num_form,num_elem_form,cor_entrada) Os 2 primeiros parâmetros correspondem a números que representam a um formulário (num_form), você pode observar que o primeiro formulário se chama meuformulario e o segundo meuformulario2, ao invés de empregar estes nomes, se empregam valores numéricos, o seguinte parâmetro representa um objeto de tal formulário (num_elem_form) e o terceiro parâmetro representa um valor de uma cor ou seu respectivo nome. O corpo de cada função corresponde à manipulação das propriedades dos objetos dos formulários.

Referência:Para entender melhor parte do código Javascript, recomenda-se ler o manual Programação em Javascript II.

Autozoom de texto com Javascript Este é um exemplo de efeito de texto que se pode fazer em DHTML utilizando Javascript. O texto aumenta e reduz seu tamanho automaticamente.

Por Juan Carlos Gámez





Este script faz com que o tamanho da letra de um banner de texto vá

crescendo até alcançar um valor máximo pré-definido.

O funcionamento é bem simples, como qualquer animação em Javascript,

necessita um timer ou temporizador que cada certo tempo se dispara

chamando a uma função responsável do efeito de animação, neste caso

modificar o tamanho de um texto. Esta função se chama cresceLetra().

Ao carregar a página chama-se a função resetear() que é a que inicia todos os

valores: objeto ao que se aplica o efeito (um elemento DIV), tamanho mínimo e

máximo do texto e velocidade com a que crescerá. Esta função ativa o timer

que chama a cresceLetra(), encarregada de aumentar em 1 px o tamanho do

texto atuando sobre a propriedade style.fontSize do objeto ao que se aplica o

efeito, e de reativar o timer.

Assim até que o texto alcance o tamanho máximo em cujo caso volta a chamar

a resetear() (esta vez sem argumentos) que repõe o tamanho inicial e se repete

o ciclo. Esta chamada se faz mediante um timer para manter em tela o texto a

tamanho grande durante um certo tempo (500 milésimos de segundos no

exemplo).

O código Javascript


var banZoom = null

function cresceLetra()

{

var obj = banZoom

var tma

tma = parseInt(obj.style.fontSize)

window.status = obj.style.fontSize

if (tma<obj.maxTam)

{

obj.style.fontSize = tma + 1

setTimeout("cresceLetra("+obj.maxTam+")",20)

}

else

setTimeout("resetear()",500)

http://www.criarweb.com/artigos/autozoom-texto-javascript.html




}

function resetear(mn, mx, rapidez, idBan)

{

if (banZoom == null)

{

banZoom = document.getElementById(idBan)

banZoom.maxTam = mx

banZoom.minTam = mn

banZoom.rapidez = rapidez

}

banZoom.style.fontSize = banZoom.minTam

setTimeout("cresceLetra()",rapidez)

}

< /script>

O código HTML

O evento onload se vincula a resetear() com os argumentos iniciais que são,

por esta ordem, tamanho mínimo das letras, tamanho máximo que devem

alcançar, rapidez com que crescerão e o identificador do elemento ao que se

aplica.

Neste caso este elemento é um bloco DIV cujo identificador ID é 'letras'. Este

bloque DIV você pode desenha-lo como quiser em quanto a cores, tipo de letra

a usar, bordas, imagem de fundo...

< body onload="resetear(10, 48, 10, 'letras')">

< DIV id="letras" style="position:absolute; font-size:10px; height:56px; width:

761px; background-color: #CCFFCC;border: 1px none #000000;">Toda a frase

vai crescendo</DIV>

< p> </p>

< p> </p>

< p>E o que acontece com o resto </p>

< /body>

Javascript para evitar que a página se mostre em um frame Um simples javascript para evitar que nossa página se mostre dentro de um frame e se mostre em todo o espaço da janela.





Existe uma utilidade muito simples sobre o controle de frames em Javascript

que também é muito útil para qualquer web site. Trata-se de evitar que nossa

página se mostre dentro de qualquer divisão de frames e pode ser muito

interessante para evitar que um link de qualquer site introduza nossa página

dentro de seu design ou estrutura de menus.

Talvez aparecer dentro de um frame em muitos casos não nos importe muito,

porém, reduzem o espaço para mostrar nossa própria página e ainda

comprimem um desenho.Portanto, não tem porque fazer nenhum bem.

O script

Com uma só linha de código é suficiente para criar este efeito. Esta linha pode

ser colocada em qualquer parte do documento HTML, embora seria

recomendável que ficasse pela parte superior ou dentro do cabeçalho, para

que tenha que carregar a página inteira para se expandir a todo o espaço da

janela.


< !--// evito que se carregue em outro frame

if (top.location != self.location)top.location = self.location;

//-->

< /script>

Neste script se comprova se as propriedades top.location, que faz referência à

URL da declaração de frames, no caso de que tenha e self.location, que faz

referência à URL do documento onde está o script.

Se as duas URLs são iguais significaria que a página não está carregada

dentro de um frame e se são diferentes querá dizer que sim esta se mostrando

no espaço de frame.

No caso de serem distintas, simplesmente se indica que na janela do

navegador ao completo (top.location) mostre-se a URL da página onde está o

script (self.location).

Não tem muitas complicações. Pode-se ver em uma página a parte.

Elementos de formulário select associados

http://www.criarweb.com/artigos/javascript-para-evitar-pagina-mostre-frame.html




http://www.criarweb.com/artigos/exemplos/javascript2/evitoframes

Como fazer com Javascript que um elemento de formulário select mude suas opções quando mude outro elemento select da página. De modo que cada opção de um select tenha um grupo de opções possíveis para o outro select.




Vamos conhecer um dos truques mais solicitados de Javascript, que tem muita relação com o tema de formulários e onde se utiliza o evento onchange de Javascript. É um exemplo sobre como realizar uma página com dois selects onde, segundo o valor escolhido em um deles, mudem as opções possíveis do outro select. O melhor para ver o que vamos fazer é ver uma página web onde se mostra em funcionamento o script. Para ver seu funcionamento, devemos mudar a seleção do primeiro select e comprovaremos como as opções do segundo select mudam automaticamente. O exemplo que ilustramos utiliza estados e países. Ao escolher no primeiro select um país, no segundo deve nos mostrar os estados desse país para que possamos escolher um estado, mas somente um que esteja no país selecionado no primeiro término. Conhecer o objeto select e os option É importante conhecer os objetos de formulário select e os option. Os select correspondem com as caixas de seleção desdobráveis e os option com cada uma das opções da caixa desdobrável. Podemos ver um artigo que fala sobre isso. Teoricamente nos interessa fazer várias coisas que têm a ver com extrair o valor de um select em qualquer momento, observar seu número de opções e, para cada opção, colocar seu valor e seu texto associado. Tudo isto aprenderemos a fazer neste exemplo.

Referência: Para conhecer o trabalho e a hierarquia de objetos

javascript (Tudo isso é a base do trabalho com os elementos das

páginas em Javascript) devemos ler o manual de Javascript II.

Modo de solucionar o problema Para começar, vamos utilizar um formulário com dois selects, um para o país e outro para o estado.









< form name="f1"> < select name=pais onchange="muda_estado()"> < option value="0" selected>Selecione... < option value="1">Espanha < option value="2">Brasil < option value="3">Portugal < option value="4">França < /select> < select name=estado> < option value="-">- < /select> < /form> Observamos no select associado ao país deste formulário que, quando se muda a opção de país, deve-se chamar a função muda_estado(). Veremos mais adiante esta função, agora é importante observar que está associada ao evento onchange que se ativa quando muda a opção no select. Todo o resto será código Javascript. Começamos definindo um montão de de arrays com os estados de cada país. Neste caso temos só 4 países, então necessitaremos 4 arrays. Em cada array tenho uma lista de estados de cada país, colocados em cada um dos elementos do array. Ademais, deixaremos o primeiro campo com um valor "-" que indica que não foi selecionado nenhum estado. var estados_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...") var estados_2=new Array("-","Rio de Janeiro","Bahia","São Paulo","Santa Catarina","Minas Gerais","...") var estados_3=new Array("-","Algarve","Alentejo","Norte","Vale do Tejo","...") var estados_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...") Observemos que os índices do array de cada país se correspondem com os do select do país. Por exemplo, a opção Espanha, tem o valor associado 1 e o array com os estados de Espanha se chama estados_1. O script se completa com uma função que realiza o carregamento dos estados no segundo select. O mecanismo realiza basicamente estas ações:

Detecto o país que foi selecionado Se o valor do país não for 0 (o valor 0 é quando não foi selecionado

nenhum país) o Tomo o array de estados adequado, utilizando o índice do país. o Marco o número de opções que deve ter o select de estados o Para cada opção do select, coloco seu valor e texto associado,

que faz corresponder com o indicado no array de estados. SE NÃO (O valor de país é 0, não foi selecionado país)


o Coloco no select de estado um único option com o valor "-", que significava que não havia estado.

Coloco a opção primeira do select de estado como o selecionado.

A função tem o seguinte código. Está comentado para que se entenda melhor.

function muda_estado(){

//tomo o valor do select do pais escolhido

var pais

pais = document.f1.pais[document.f1.pais.selectedIndex].value

/vejo se o pais está definido

if (pais != 0) {

//se estava definido, entao coloco as opcoes do estado correspondente.

//seleciono o array de estado adequado

meus_estados=eval("estados_" + pais)

//calculo o numero de estados

num_estados = meus_estados.length

//marco o número de estados no select

document.f1.estado.length = num_estados

//para cada estado do array, o introduzo no select

for(i=0;i<num_estados;i++){

document.f1.estado.options[i].value=meus_estados[i]

document.f1.provincia.options[i].text=meus_estados[i]

}

}else{

//se não havia estado selecionado, elimino os estados do select

document.f1.estado.length = 1

//coloco um traço na única opção que deixei

document.f1.estado.options[0].value = "-"

document.f1.estado.options[0].text = "-"

}

//marco como selecionada a opção primeira de estado

document.f1.estado.options[0].selected = true

}

Contar os caracteres escritos em um textarea

Script em Javascript que realiza a conta dos caracteres que foram escritos em um campo de formulário textarea, ao mesmo tempo em que se está escrevendo.





O desenho deste script foi motivado pela necessidade de fazer a típica caixa para enviar mensagens SMS pela Internet. O tamanho máximo de uma mensagem SMS de celular é de 160 caracteres, com o qual é muito útil que a própria página lhe informe sobre o número de caracteres que levam escritos na mensagem, para que o interessado não passe do máximo permitido. O funcionamento é muito simples de entender, mas de qualquer forma, podemos ver o script em funcionamento para saber exatamente o que propomos. O formulário A página apresentará um formulário com dois campos. O primeiro com o

textarea onde o usuário escreverá a mensagem e o segundo, um campo de texto onde mostraremos em todo momento os caracteres escritos. O único detalhe para ter em conta, relacionado com Javascript é o par de eventos que temos definidos dentro do campo textarea, que servem para chamar à função que realiza a conta dos caracteres no momento em que o usuário pressiona ou solta as teclas. Teoricamente, utiliza-se o evento onKeyDown para definir as ações a realizar quando se apertar a tecla e onKeyUp, para definir ações a executar quando se soltar a tecla apertada. < table> < tr> <td>Texto:</td> <td><textarea cols="40" rows="5" name="texto" onKeyDown="conta()" onKeyUp="conta()"></textarea></td> < /tr> < tr> <td>Caracteres:</td> <td><input type="text" name=caracteres size=4></td> < /tr> < /table> < /form> O script que conta caracteres Com o formulário e os dois eventos introduzidos temos tudo que é necessário para que se contem -e recontem- os caracteres cada vez que o visitante, situado sobre o textarea, clica sobre as teclas, ou seja, cada vez que se escreve texto no textarea. Agora simplesmente nos falta definir a função que se encarrega de realizar a conta propriamente dita e situa-la no outro campo de texto do formulário. < script> function conta(){ document.forms[0].caracteres.value=document.forms[0].texto.value.length

http://www.criarweb.com/artigos/conta-caracteres-escritos-textarea.html

http://www.criarweb.com/artigos/exemplos/javascript/cuentacaracteres.html


} < /script> Talvez muitos tenham se surpreendido com a simplicidade do script, mas é que realmente não faz falta mais. A propriedade value do textarea contém o texto escrito e por sua vez, a propriedade length salva o número de caracteres de tal texto. Assim, document.forms[0].texto.value.length equivale ao número de caracteres introduzidos dentro do textarea. Este valor se atribui ao conteúdo do campo de texto do formulário onde salvamos o número de caracteres, mediante a

propriedade value do campo: document.forms[0].caracteres.value.

Passo de parâmetros em HTML com client-side Javascript Trata-se de um simples script Javascript para recolher os parâmetros que chegam a uma página.

Por Bruno Suárez Laffargue



O script seguinte se colocará à prova na página que deve de receber os

parâmetros, ou poderá se copiar em um arquivo .js vinculado. Em ambos casos

o código não deve estar em nenhuma função, para que se execute sempre que

se carrega a página. Uma vez executado o script teremos os valores recebidos

nas correspondentes variáveis. Aquelas que não tivermos recebido terão o

valor padrão que tivermos fixado.

O Código:

<script language="javascript">

//Autor: Bruno Suárez Laffargue

//Versao: 1.1

//Definimos as variaveis necessarias

variable=umValorPadrao;//Havera que estabelecer

//Capturamos a URL

var callingURL = document.URL;

//Separamos os parametros

var cgiString =

callingURL.substring(callingURL.indexOf('?')+1,callingURL.length);


http://www.criarweb.com/artigos/passo-parametro-htmlclient-side-javascript.html

//Observamos o separador entre parametros

var DELIMETER = '&';

//Eliminamos a almofadinha, se existir... cortamos por prevencao!

if (cgiString.indexOf('#')!=-1){

cgiString=cgiString.slice(0,cgiString.indexOf('#'));

}

//Partimos o cgiString ja limpo, separando cada par variable=valor

//em uma das posicoes do array

var arrayParams=cgiString.split(DELIMETER);

//Percorremos o array de parametros avaliando cada um dos pares

variable=valor

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

eval(arrayParams[i].substring(0,arrayParams[i].indexOf('=')+1)+"\""+

arrayParams[i].substring(arrayParams[i].indexOf('=')+1,arrayParams

[i].length)+"\"");

}

< /script>

Uma das restrições funcionais para que isto funcione é ter tantas variáveis

javascript definidas como parâmetros forem recebidos, iniciados a um valor

padrão. Ademais, estas variáveis hão de se chamar exatamente igual que os

parâmetros, já que senão, não funcionará. Em nenhum caso.

Moldura dinâmica em Javascript com texto que muda Workshop de Javascript em que se realiza uma moldura cujo texto muda em cada impressão da página, com o qual se podem mostrar diferentes mensagens em cada visita.




Realizamos um simples script em Javascript para realizar uma moldura com

informação dinâmica, que muda com cada impressão da página. O exercício

consiste em uma tabela HTML que mostra uma informação que muda,

utilizando Javascript para que nos proporcione um texto aleatório, que logo

imprimiremos dentro da tabela HTML.


Para começar veremos como obter um texto aleatório. A idéia a desenvolver é

bem simples. Criamos um array com os diferentes textos, entre os que se

escolherá um aleatoriamente. Obtemos um valor numérico aleatório entre 0 e

máximo índice do array e se imprime o texto que há no array nessa posição

aleatória.

function texto_aleatorio(){

var textos = new Array()

textos[0] = "Temos os melhores produtos do mercado, com controles de

qualidade intensivos."

textos[1] = "Distribuímos em todo o mundo com os melhores tempos de entrega

e confiança nos envios."

textos[2] = "Não temos concorrentes que nos superem. Contrate conosco e

comprove. É muito fácil."

textos[3] = "Disponha do melhor serviço de atenção ao cliente e uma resposta

rápida aos seus problemas."

textos[4] = "Os melhores serviços, produtos e, claro, os menores preços. Tudo

são vantagens."

aleat = Math.random() * (textos.length)


document.write(textos[aleat])

}

Na primeira linha se cria o array e nas seguintes se iniciam seus diferentes

campos com textos variados. Tal como fizemos o exercício, o número de

campos que tiver o array é indiferente, portanto poderíamos aumentar seus

campos, introduzindo novas frases, e así as possibilidades de textos serão

mais variadas.

Mais adiante na função se obtém um número aleatório. Para obtê-lo utilizamos

a classe Math, mais concretamente o método random(). Random devolve um

valor decimal aleatório entre 0 e 1. Algo como 0.453. Se multiplicarmos esse

valor pelo número de campos do array obteremos um número entre 0 e o

número de campos, porém ainda têm valores decimais e nós desejamos que

seja inteiro para poder utiliza-lo como índice no array. Para converter esse

valor a inteiro, o arredondamos para baixo com floor(), que devolve o número

mais próximo, arredondamos por baixo.

Nas últimas linhas de função se imprime o valor aleatório.

O código HTML da moldura

http://www.criarweb.com/artigos/moldura-dinamica-javascript-texto-muda.html




< table width="180" border="0" cellspacing="1" cellpadding="2"

bgcolor="000000">

<tr>

<td class="barra" bgcolor="993333"><font color="#FFFFFF"><b>Nossas

vantagens</b></font></td>

</tr>

<tr>

<td class="fuente8" bgcolor="#FFFFFF"><script

language=javascript>texto_aleatorio()</script></td>

</tr>

</table>

É uma tabela HTML muito simples. Simplesmente mostra uma célula com o

cabeçalho ou titular da caixa e uma segunda célula na que simplesmente há

uma chamada à função que escreve o texto aleatório.

O resultado pode ser visto em uma página a parte. Tenha em conta que há que

atualizar a página para ver como vão se mostrando diferentes mensagens,

entre todas as que configuramos.

Podemos complicar este exemplo em tudo que desejarmos para criar páginas

dinâmicas que mudem os conteúdos entre diferentes acessos do visitante.

Poderíamos fazer que se incluam diferentes elementos aleatórios, como

imagens, animações, links, etc.

Criação de gráficos de barras com Javascript A partir da importação de uma biblioteca apropriada, podemos realizar gráficos de barras. Veremos a biblioteca importar e como manipular o código para conseguir nosso objetivo.




Vamos apresentar um sistema para realizar gráficos de barras em páginas web, com a ajuda de Javascript. Sem dúvida, qualquer pessoa poderá encontrar várias soluções para este problema, embora nós vamos recomendar uma que de verdade pode simplificar muito nossa vida e que não requer nenhum requisito especial. Simplesmente que o navegador do visitante suporte Javscript. Os gráficos de barras servem para fazer muitas coisas e é uma das tarefas típicas se que se pode necessitar em um projeto um pouco avançado.

http://www.criarweb.com/artigos/exemplos/tallerjs/recuadro_dinamico.html

http://www.criarweb.com/artigos/criacao-graficos-barras-com-javascript.html




Geralmente, se utilizam para mostrar resultados de informes, estatísticas ou temas similares de uma maneira muito visual.

Imagem de um dos gráficos que se podem gerar com este mecanismo.

Com o seguinte exemplo, vamos aprender a fazer gráficos dinamicamente, ou

seja, que se constroem com uns dados que podem ser variáveis. Se o gráfico

fosse construído sempre com os mesmo dados, poderíamos cria-lo com algum

programa como o Excel e logo converte-lo em imagem e apresenta-lo dentro

da web. Entretanto, é muito habitual que os dados sejam extraídos de uma

fonte como um banco de dados ou algo similar, onde podem variar com o

tempo. Neste caso, cada vez que se imprima a página, se deveria acessar ao

banco de dados, extrair a informação e gerar o gráfico dinamicamente.

BAR_GRAPH

O sistema que apresentamos aqui se chama BAR_GRAPH e serve para gerar

gráficos de barras de diferentes tipos com a ajuda de Javascript. Os gráficos

têm um aspecto visual muito adequado e são totalmente personalizáveis,

podendo configurar o sistema para que mostre gráficos horizontais, verticais e

de progresso. Também inclui a possibilidade de criar etiquetas, legendas,

agrupar certos valores, utilizar cores diferentes, etc.

O produto é gratuito para uso pessoal, embora se se utiliza de maneira

comercial, o autor solicita que se faça uma doação de 6 euros, através de

Paypal.

Para a criação dos gráficos não se necessita de nenhum material, exceto umas

bibliotecas Javascript que são as que oferecem todas as funcionalidades de

criação de gráficos.


Para incluir a biblioteca em nossas páginas web, basta baixa-las do web site do

autor do produto: http://www.gerd-tentler.de/tools/graphs/ e chamá-la através

de nossos scripts.

Para incluir uma biblioteca Javascript, o habitual é colocar no cabeçalho da

página uma chamada ao arquivo onde está o código. Algo como isto:

<head>

<title>Exemplo de gráficos</title>

<script src="graphs.js" type="text/javascript"></script>

< /head>

Observamos que se inclui um arquivo chamado graphs.js que se supõe que

estará no mesmo diretório que a página web. Dentro desse arquivo

encontraremos a declaração de um objeto que será o encarregado de receber

os dados de origem com os quais se deseja construir o gráfico e também de

mostrá-lo quando tiver introduzido todos os dados iniciais.

Para criar e mostrar um gráfico, o único que temos que fazer é instanciar o

objeto gráfico, inserir os valores iniciais e chamar ao método que faz com que

se mostre o gráfico.

Pode-se ver um exemplo a seguir das instruções iniciais de criações do gráfico:

//instanciamos o gráfico

graph = new BAR_GRAPH("hBar");

//inserimos valores

graph.values = "380,150,260,310,430";

//mostramos o gráfico na página

document.write(graph.create());

Pode-se complicar um pouco mais este sistema para incorporar, por exemplo,

dois turnos de valores, agrupados em dois grupos.

//instanciamos o gráfico

graph = new BAR_GRAPH("hBar");

//definimos as etiquetas que acompanharão a cada casal de valores

graph.labels = "Jan.,Feb.,Mar.,Apr.,May";

//iniciamos os dados. 1 elemento tem um grupo de dois valores.

graph.values = "380;420, 150;340, 260;120, 310;250, 430;370";

//definimos uma legenda

graph.legend = "2001,2002";

//mostramos o gráfico na página

document.write(graph.create());

Se desejarmos ver muitos mais exemplos de gráficos possíveis seria muito

interessante acessarmos à página do produto, onde veremos os tipos de

gráficos mais habituais que podem se realizar.

Jogos em Javascript Com Javascript pode-se criar jogos, e ainda que a linguagem não se presta precisamente a facilitar as coisas, com esforço se pode conseguir um jogo "curioso". Neste artigo, veremos alguns exemplos de jogos.




Javascript se encaixa dentro das linguagens para a web do lado do cliente. É

compatível com os navegadores mais habituais, embora não com todos. Outra

das características desta linguagem é que pode variar de um navegador a

outro, inclusive pode ser diferente em versões distintas do mesmo navegador.

Por tudo isso e porque Javascript é muito simples de utilizar para pequenos

programas e muito complicado para aplicações mais elaboradas, não é uma

linguagem muito apropriada para fazer jogos para a web. Pode acontecer que

um jogo não se veja corretamente em todos os navegadores ou que não

funcione em certas plataformas. Em qualquer caso, certamente é muito difícil

de manter e de melhorar uma vez realizado.

Não obstante, no mundo há pessoas para tudo e muitos loucos do Javascript

nos deixaram autênticas obras de arte e de engenho, que nos demonstram que

não é tão difícil fazer aplicações avançadas para a web com esta linguagem.

Neste artigo, vamos mostrar vários jogos de Javascript, realizados com muita

dedicação e que em quase todos os casos, podemos incluir livremente em

nossas páginas web.

JsTetris

O conhecido jogo de peças que caem e temos que colocar da maneira mais

ordenada. Funciona tanto em Internet Explorer como em Nestcape. O único

que não funciona ainda muito rápido como deveria são os eventos do teclado,

que às vezes não respondem tão rápido como se desejaria.

http://gosu.pl/dhtml/JsTetris.html

http://www.criarweb.com/artigos/jogos-javascript.html





http://gosu.pl/dhtml/JsTetris.html

Buscaminas

O típico jogo do Windows, muito útil aliás não só para exercitar a lógica, como

também para adquirir uma maior soltura com o manejo do mouse, para aqueles

que possuem dificuldade em move-lo.

http://www.ecirce.com/dhtml/minesweeper/

Memory Game

Um jogo que temos várias cartas que devem ser agrupadas por duplas. Neste

caso, proporciona-se o jogo em várias versões para Javascript, Flash, Java e

PHP...

http://mypage.bluewin.ch/katzenseite/docs/en/games/games.html

Serpente

Um clássico onde estiver. Você maneja uma serpente que come bolinhas e

cada vez se torna maior.

http://www.dynamicdrive.com/dynamicindex12/snake/index.htm

Puzzle de bolhas

Trata-se de lançar bolhas coloridas. Quando consegue-se 3 bolhas juntas da

mesma cor, se descartam da tela. Perde-se quando não cabem mais bolhas na

tela. É algo parecido ao Tetris.

http://www.javafile.com/games/bubbles/bubbles.php

Existem muito mais jogos em Javascript. Aqui só assinalamos alguns que nos

parecem divertidos ou muito avançados tecnicamente. Para encontrar outros

jogos em Javascript recomendamos acessar a algumas páginas com coleções

de scripts como Hotscripts http://www.hotscripts.com ou javafile

http://www.javafile.com.

Cross-Browser. DHTML compatível com todos os navegadores.

Apresentamos um website que oferece interessantes utilidades para o trabalho com HTML Dinâmico de uma maneira simples e compatível com os navegadores mais habituais.



http://www.ecirce.com/dhtml/minesweeper/

http://mypage.bluewin.ch/katzenseite/docs/en/games/games.html

http://www.dynamicdrive.com/dynamicindex12/snake/index.htm

http://www.javafile.com/games/bubbles/bubbles.php

http://www.hotscripts.com/

http://www.javafile.com/



É bastante conhecido, para todos os que tiveram experimentado com camadas e Javascript, o problema da compatibilidade de navegadores e a necessidade de realizar diferentes códigos DHTML dependendo do explorador que tenha o cliente. Se você ainda não tiver encontrado problemas de compatibilidade de seus scripts, possivelmente nunca deve ter enfrentado a programação do lado do cliente em Javascript, mais concretamente com o trabalho com as camadas e portanto, não lhe interessará muito este artigo. Agora também, se tiver problemas com as camadas ao programar uma web e não conseguir que se veja bem nos distintos navegadores, este artigo poderá tornar a sua vida mais simples. Isto graças a cross-browser.com, um website

que oferece uma interessante biblioteca de funções, que vamos apresentar a seguir, para o trabalho com HTML Dinâmico compatível com todos os navegadores mais habituais.

X Library VS CBE API Em cross-browser.com nos proporcionam duas bibliotecas diferentes para o trabalho com DHTML. Na verdade, trata-se de um mesmo conjunto de funções, sendo uma biblioteca a evolução de outra. CBE API é a biblioteca original e X Library é a sua evolução. CBE API é a biblioteca mais antiga e ainda tem maiores funcionalidades, porém em um espaço de tempo X Library irá dispor das mesmas funcionalidades que a outra, embora com diversas melhorias como uma considerável redução do peso dos arquivos Javascript. À princípio, se entrarmos em cross-browser.com, nos apresentam X Library, embora um pouco mais escondido encontraremos seu antecessor CBE API. O conselho é que se utilize X Library para projetos novos. De qualquer forma, CBE API continua perfeitamente vigente (por enquanto). Como utilizar X Library Temos que começar baixando a versão atual de X Library. Para isso, entramos em cross-browser.com e acessamos à sessão de Toys (para o criador deste website, seus brinquedinhos são bibliotecas DHTML). Aqui podemos fazer o download da última versão, onde encontraremos as bibliotecas e exemplos de uso. Uma vez descompactado o pacote, podemos encontrar uma pasta chamada "x", onde estão as bibliotecas. Observamos que há uma boa quantidade de arquivos .JS, cada um com diversas funções. Dependendo da ação que se deseja realizar temos que chamar a uma função ou outra, e teremos que saber em que arquivo .JS se encontra. As funções mais habituais se encontram no arquivo x_core.js. Em nossas páginas não temos porquê incluir todos os




http://www.cross-browser.com/




arquivos do diretório, só os que formos utilizar. Podemos ver em que arquivo está cada função na documentação do próprio programa, mais concretamente na referência de funções (o diretório onde se hospeda a documentação está dentro da pasta "docs" que está dentro do diretório "x"). Dentro do diretório "x" também há uma pasta de exemplos, chamada "examples", aos quais podemos dar uma olhada para começar a nos familiarizarmos com as possibilidades da biblioteca. Nós criamos dois exemplos para comprovar as bondades deste software. Para isso, seguimos o exemplo do código da própria página cross-browser.com e o dos diferentes exemplos que se oferecem. Algumas funcionalidades dos exemplos, como a função xInclude() estão ainda em fase de experimentação, portanto nós não a utilizamos e em seu lugar incluímos os arquivos que necessitamos tal como se faz habitualmente em Javascript. Exemplo mostrar e ocultar camada X Library dispõe de uma simples função para mostrar e ocultar uma camada. Simplesmente recebe o identificador da camada que se deseja mostrar ou ocultar. À princípio, podemos lhe enviar à função o próprio objeto camada ou então, um string com seu identificador (que se indica com o atributo id na etiqueta <div>).

Referência: No manual de CSS temos explicações de o que são as camadas e a forma de cria-las e definir seu posicionamento e

aparência.

< html> < head> <title>Exemplo de utilização de Cross-Browser</title> < script type='text/javascript' src='x_core.js'></script> < script type='text/javascript'> function mostra(){ xShow('c1'); } function oculta(){ xHide('c1'); } < /script> < /head>

< body> < div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:#9999aa; width:100px; height:80px;"> Hola! < /div> < form>





< input type=button onclick="muestra()" value="Mostra Capa"> < input type=button onclick="oculta()" value="Oculta Capa"> < /form> < /body> < /html> Neste exemplo, criamos uma camada (com identificador "c1") e dois botões. Quando se clica um deles se mostra a camada e quando se clica o outro se oculta. Para isso, criamos também duas funções, que se chamam quando se clica nos botões, cuja obrigação é mostrar e ocultar a camada utilizando a biblioteca X Library. Faremos o uso das fuunções xShow() e xHide(), que recebem o identificador da camada que há que mostrar ou ocultar respectivamente. Estas duas funções se encontram no arquivo "x_core.js", que incluímos na página como bloco de script externo. Pode-se visualizar este simples exemplo em uma página web a parte. Exemplo para fazer um movimento de camada O segundo exemplo que criamos é uma camada que se move pela página da esquerda para direita. Esta página tem também dois botões, para deter o movimento ou coloca-lo em funcionamento. < html> < head> <title>fazemos um scroll</title> < script type='text/javascript' src='x_core.js'></script> < script type='text/javascript'> function inicia(){ velocidade=2 } function detem(){ velocidade=0 } function move(){ posicao+=velocidade posicao %= 500 xMoveTo('c1',posicao,100)

setTimeout("move()",100) } window.onload = function() { velocidade = 0 posicao = 200 move() }

http://www.criarweb.com/artigos/exemplos/tallerjs/cross-browser/meusexemplos/mostra-oculta.html

< /script> < /head> < body> < div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:red; width:100px; height:20px;"> Hola! < /div> < form> < input type=button onclick="inicia()" value="Move a Camada"> < input type=button onclick="detem()" value="Para a Camada"> < /form> < /body> < /html> Neste caso, em relação à biblioteca, utilizamos a função xMoveTo(), que recebe o identificador da camada a mover e as novas coordenadas onde coloca-la. Esta função também se encontra dentro do arquivo "x_core.js", que incluímos com o primeiro bloco de script. Para entender o movimento da camada temos que ter visto alguma vez a função setTimeout(), que recebe uma instrução Javascript para executar e uma quantidade de milésimos de segundos que devem de passar antes da execução. No exemplo temos uma função que se chama move(), que se encarrega de variar a posição atual da camada. Esta função se chama a si mesma por meio de setTimeout(), com um atraso de 100 milésimos de segundos, portanto, a função move() nunca para de se executar, teoricamente 10 vezes por segundo.

Nota: setTimeout é um método do objeto window. Temos vários artigos que utilizam esta função, por exemplo: Relógio em Javascript ou Texto

em movimento na barra de estado.

Logo, definimos uma variável velocidade, que é o número de pixels que se

desloca de camada em cada chamada move(). A única coisa que fazem os

dois botões é modificar o valor dessa variável velocidade. O botão que para o

movimento simplesmente atribui o valor zero à velocidade.

Outra coisa que temos que ver é que foi definida uma série de instruções a

executar quando se carrega a página, no bloco window.onload = function().

Entre essas ações a executar encontra-se a configuração da posição inicial da

camada e a velocidade do movimento. Ademais, faz-se uma chamada inicial a

move(), que desencadeia o fluxo do movimento, pois a função move se

encarrega de chamar-se a si mesma até que o usuário abandona a página.





Se se deseja, pode-se ver o exemplo em funcionamento.

Conclusão

Não era nossa intenção explicar todas as funcionalidades desta ferramenta, e

sim torna-la conhecida. Tampouco é nossa intenção explicar como realizar um

movimento de uma camada ajudados por setTimeout(), mesmo assim pedimos

desculpas para aquele leitor que não pôde entender por que realizamos um

script de movimento dessa forma.

Nosso objetivo era apresentar as bibliotecas e mostrar como, com muito pouco

código e sem ter que conhecer os segredos de cada navegador, pode-se

realizar um exemplo já bastante avançado do manejo de camadas.

Recomendamos que não re-inventem a roda! Já que se dispõe de ferramentas

de trabalho com camadas tão versáteis como X Library, é muito mais

interessante basear nossos scripts nela do que quebrarmos a cabeça para

inventar mecanismos compatíveis com cada navegador.

Criamos um manual onde vamos ir comentando vários exemplos de efeitos

interessantes que se podem realizar utilizando estas bibliotecas. O manual

chama-se Workshop de Cross-Browser DHTML.

Ocultar um e-mail de um link para evitar o spam Como ocultar um endereço de correio, que é colocado no mailto de um link, para evitar que seja detectado pelos robôs que buscam endereços em webs para enviar spam.




Uno dos mecanismos que utilizam as pessoas que enviam spam (spammers) para obter endereços de correio para sua lista de distribuição é rastrear a web em busca de endereços de e-mail. Todas os endereços que aparecem nas páginas web, à vista ou escritas no código, são suscetíveis de ser capturadas e utilizadas para o envio de spam. Por isso, não é má idéia proteger nossos e-mails para tornar a tarefa difícil aos spammers, e evitar que em pouco tempo comecemos a receber mensagens não desejadas. Um link a um correio eletrônico é assim: < a href="mailto:[email protected]">[email protected]</a>

http://www.criarweb.com/artigos/exemplos/tallerjs/cross-browser/meusexemplos/scroll.html

http://www.criarweb.com/workshop_cross-browser



Tanto em href como no texto do link aparece nosso correio eletrônico. Neste artigo veremos umas idéias para evitar que apareçam nossos dados, de modo que não possam captar os endereços. Utilizar uma imagem no texto do link Uma boa solução consiste em utilizar uma simples imagem onde aparece o correio. Esta imagem terá o texto do correio eletrônico, para que o visitante possa visualizar o endereço na página, porém escrita sobre uma imagem. Isso é indetectável por um robô que escaneie a página e nossos clientes poderão ver claramente qual é o correio onde devem nos escrever. Se não colocarmos o link e colocarmos somente a imagem, acabariam nossos problemas. O visitante não poderia clicar no endereço na própria página para nos enviar um mail, mas muito provavelmente seja suficientemente esperto para copia-la no programa de correio que for utilizar. Utilizar Javascript para ocultar o endereço Podemos por mediação de Javascript fazer um pequeno programa para que nosso endereço não apareça no código, pelo menos não tão claramente. Podemos, por exemplo, parti-lo em diferentes pedaços e logo concatena-lo, de maneira que não possa se ver por completo em nenhum lugar do código da página. Vejamos este script: < script language="JavaScript"> usuario="pedro" dominio="qualquerum.com" conector="@" function dar_correio(){ return usuario + conector + dominio } function escreve_link_correio(){ document.write("<a href='mailto:" + dar_correio() + "'>" + dar_correio() + "</a>") }

< /script> Primeiro, definem-se três variáveis que formam o correio eletrônico que desejamos ocultar. Logo, temos duas funções úteis: A função dar_correio() devolve o correio eletrônico que se deseja ocultar. Simplesmente concatena as partes do correio eletrônico, que tinham sido definido nas variáveis mais acima.




Por sua parte, escreve_link_correio(), escreve na página web um link ao correio eletrônico completo. Um link a um correio eletrônico é assim: < a href="mailto:[email protected]">[email protected]</a> Esta função se apoia no dar_correio() para obter o correio que se desejava ocultar. Para que apareça na página o link ao correio eletrônico devemos fazer uma chamada à função escreve_link_correio(), no lugar do corpo que desejarmos que se mostre.

Nota: Se o computador do usuário não tiver Javascript ou tiver desabilitado, não poderá ver esses endereços de correio escritos na

página desde Javascript. Por isso, pode ser uma boa idéia mudar este truque com o de mostrar uma imagem com o correio, para que pelo

menos se veja a imagem. Embora ainda existam navegadores só em texto, com o qual nem sequer se veria a imagem. Enfim, existe um

mundo de possibilidades.

Este seria o código para mostrar em qualquer parte da página.

< body>

< !-- em qualquer parte do corpo da página -->

<script>escreve_link_correio()</script>

< /body>

Se o robô do spammer for muito esperto, provavelmente possa colocar em

execução o Javascript para interpreta-lo e saber onde está escondido o

endereço de correio. Isso parece no momento pouco provável. Existem tanto

endereços nas páginas web, que é possível que eles não se entretenham tanto

tempo para obter endereços ocultos no código da página.

Não obstante, certamente existem outras maneiras de ocultar um pouco melhor

com Javascript esse endereço. Pode ser que o das variáveis definidas acima

de tudo seja um pouco óbvio. Deixo para você investigarem esta tarefa se

desejarem. Talvez falaremos dela em um artigo posterior. Enviem seus

comentários se tiverem alguma ajuda para melhorar o script.

Função em Javascript para a inserção de datas Função para a introdução de datas com formato dd/mm/aaaa.

Por Juan Carlos Montejo



Esta é uma função que realizei para tornar mais fácil a escritura de campos

data com formatos de dd/mm/aaaa e uma pequena validação, também

apresento uma pequena função para saber se um valor é numérico:

1 devemos ter um formulário html com um campo com a seguinte forma:

< input name="data" type="text" size="10" maxlength="10" onKeyUp =

"this.value=formateadata(this.value);">

Aqui se pode observar que fazemos um chamado à função: formateadata

2- no mesmo html colocamos os javascript com as funções ou o colocamos à

parte em um arquivo.js para onde deveríamos fazer um chamado.

function IsNumeric(valor)

{

var log=valor.length; var sw="S";

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

{ v1=valor.substr(x,1);

v2 = parseInt(v1);

//Comprovo se é um valor numérico

if (isNaN(v2)) { sw= "N";}

}

if (sw=="S") {return true;} else {return false; }

}

var primeiroslap=false;

var segundoslap=false;

function formateadata(data)

{

var long = data.length;

var dia;

var mes;

var ano;

if ((long>=2) && (primeiroslap==false)) { dia=data.substr(0,2);


http://www.criarweb.com/artigos/funcao-javascript-para-insercao-datas.html

http://www.criarweb.com/artigos/funcao-javascript-para-insercao-datas.html

if ((IsNumeric(dia)==true) && (dia<=31) && (dia!="00")) {

data=data.substr(0,2)+"/"+data.substr(3,7); primeiroslap=true; }

else { data=""; primeiroslap=false;}

}

else

{ dia=data.substr(0,1);

if (IsNumeric(dia)==false)

{data="";}

if ((long<=2) && (primeiroslap=true)) {data=data.substr(0,1); primeiroslap=false;

}

}

if ((long>=5) && (segundoslap==false))

{ mes=data.substr(3,2);

if ((IsNumeric(mes)==true) &&(mes<=12) && (mes!="00")) {

data=data.substr(0,5)+"/"+data.substr(6,4); segundoslap=true; }

else { data=data.substr(0,3);; segundoslap=false;}

}

else { if ((long<=5) && (segundoslap=true)) { data=data.substr(0,4);

segundoslap=false; } }

if (long>=7)

{ ano=data.substr(6,4);

if (IsNumeric(ano)==false) { data=data.substr(0,6); }

else { if (long==10){ if ((ano==0) || (ano<1900) || (ano>2100)) {

data=data.substr(0,6); } } }

}

if (long>=10)

{

data=data.substr(0,10);

dia=data.substr(0,2);

mes=data.substr(3,2);

ano=data.substr(6,4);

// Ano nao bisexto e é fevereiro e o dia é maior a 28

if ( (ano%4 != 0) && (mes ==02) && (dia > 28) ) { data=data.substr(0,2)+"/"; }

}

return (data);

}

DHTML Calendar Um script em Javascript muito fácil de utilizar e com um aspecto formidável, que nos servirá para dispor de um calendário para selecionar

uma data.

http://www.criarweb.com/artigos/dhtml-calendar.html




Quando realizamos uma interface de usuário, é típico ter campos onde o visitante deva introduzir uma data. Estas têm formatos bastante estritos e são complicadas de escrever, sendo então muito cômodo para o usuário contar com a possibilidade de utilizar um calendário para selecionar a data. Pelo fato de nem sempre o visitante ter a capacidade de entender a programação em PHP, ou aceso a um servidor que permita a publicação de conteúdos programados com PHP, é muito interessante conhecer outras maneiras de implementar um calendário em uma página web. Neste caso vamos apresentar DHTML Calendar, um calendário realizado em Javascript, compatível para todos os navegadores. Este script é gratuito para incorporar um calendário, portanto podemos utilizá-lo sem nenhum tipo de limite. Como é DHTML Calendar É um sistema muito potente e facilmente configurável com uma interessante interface, totalmente dinâmica. Pode-se incluir de diversas maneiras dentro de uma página, como um pop-up, ou diretamente no corpo da página, o que o torna muito útil em diversas situações. O script para configurar o calendário variará de um modo de apresentação a outro. No download do calendário se oferecem alguns exemplos rápidos para mostrar o calendário. Exemplos para os impacientes, que podem ser muito bom para começar rapidamente. Uma das maneiras mais típicas de apresentar o calendário pode ser utilizando um campo de texto e um botão. Ao clicar o botão se mostra o calendário e, uma vez selecionada uma data, se escreve no campo de texto. O código do exemplo seria o seguinte, muito parecido a um dos exemplos para os impacientes proporcionados no pacote de download. < html> < head> <title>Calendário de provas</title> <-Folha de estilos do calendário --> <link rel="stylesheet" type="text/css" media="all" href="calendar-green.css" title="win2k-cold-1" />  <script type="text/javascript" src="calendar.js"></script>





 <script type="text/javascript" src="lang/calendar-es.js"></script> <!-biblioteca que declara a função Calendar.setup, que ajuda a gerar um calendário em poucas linhas de código --> <script type="text/javascript" src="calendar-setup.js"></script> < /head> < body> < !-- formulario com o campo de texto e o botão para lançar o calendário--> <form action="#" method="get"> < input type="text" name="date" id="campo_data" /> < input type="button" id="lancador" value="..." /> < /form> < !-- script que define e configura o calendario--> <script type="text/javascript"> Calendar.setup({ inputField : "campo_fecha", // id do campo de texto ifFormat : "%d/%m/%Y", // formato da data que se escreva no campo de texto button : "lancador" // o id do botão que lançará o calendário }); < /script> < /body> < /html> O código anterior está comentado para que se entenda mais facilmente. Tem várias partes.

No cabeçalho se incluem vários arquivos com as funções e estilos do calendário. Estes arquivos se encontram nos arquivos de download do calendário. Existem vários estilos que se podem utilizar para ajustar o aspecto do calendário ao desenho da página. Também se deve incluir a linguagem na qual apresentar o calendário, neste caso espanhol, que está também incluído no pacote de download.

Já no corpo da página, se mostra o formulário. É muito simples, pois só tem um campo de texto e um botão para mostrar o calendário.

No script de javascript, também dentro do corpo da página, se utiliza a

função Calendar.setup, que serve para carregar o calendário e configurá-lo com os valores que desejarmos. Todas as opções de configuração têm valores padrão, embora sempre vamos ter que definir, como mínimo, os dados que colocarmos neste exemplo. O dado "inputField" serve para indicar o identificador (atributo id) do campo input onde se tem que escrever a data. O valor "ifFormat" serve para ajustar o formato da data que se deseja escrever no campo de texto. Por último, o valor "button" deve conter o identificador do botão que lançará o calendário ao clicá-lo.

Foi um exemplo o mais simplificado possível. Podemos ver o funcionamento do

calendário que gera este código em uma página a parte.

Na documentação do produto poderemos encontrar mais exemplos do

calendário e uma explicação detalhada de sua utilização.

Para maiores informações na página do produto:

http://www.dynarch.com/projects/calendar/

DHTML Calentar é um projeto hospedado em SourceForge.net, com a seguinte

página de projeto: http://sourceforge.net/projects/jscalendar

Gerar uma cor aleatória com Javascript Exemplo de função para gerar uma cor aleatoriamente em formato hexadecimal.




Este exercício é muito simples, porém pode ser muito útil para algumas

pessoas. Trata-se de uma pequena função que serve para gerar uma cor

aleatória, em formato hexadecimal, que é o utilizado na criação de webs.

Extraímos de outro exemplo realizado em Javascript, no qual necessitávamos

gerar uma cor de maneira aleatória. Acreditamos que possa ser interessante

para comentá-lo em um artigo à parte, se por acaso alguém necessitar criar

uma cor totalmente aleatória em suas páginas.

Para criar uma cor aleatório precisamos simplesmente de 6 números em

hexadecimal (números do 0 à F). Se obtivermos aleatoriamente estes 6

números hexadecimais, teremos criado o código de uma cor aleatória.

Função para gerar aleatórios

Portanto, para gerar um número aleatório, vamos nos apoiar em uma função

relatada em outro artigo de CriarWeb.com: Geração de números aleatórios

Javascript .

A função para gerar aleatórios que vamos utilizar então é a seguinte:

http://www.criarweb.com/artigos/exemplos/tallerjs/dhtmlcalendar/micalendario.html

http://www.dynarch.com/projects/calendar/

http://sourceforge.net/projects/jscalendar

http://www.criarweb.com/artigos/gerar-cor-aleatoria-javascript.html






function aleatorio(inferior,superior){

numPossibilidades = superior - inferior

aleat = Math.random() * numPossibilidades


return parseInt(inferior) + aleat

}

Como nós necessitamos de um aleatório hexadecinal, para nos apoiarmos

nesta função, vamos gerar um número aleatório em decimal, que logo

converteremos a hexadecimal. Para fazer esta conversão utilizaremos um array

de valores hexadecimais como este:

hexadecimal = new

Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

Agora, para obter esse valor aleatório hexadecimal, o único que temos que

fazer é obter um índice entre 0 e o número de campos deste array. Então, o

valor aleatório hexadecimal será o que tiver no array no campo cujo índice se

obteve aleatoriamente. Isto se faz desta maneira:

posarray = aleatorio(0,hexadecimal.length)

valor_hexadecimal_aleatorio = hexadecimal[posarray]

Na primeira linha se obtém o índice do array aleatório, que está entre 0 e o

número de posições do array. Na segunda valor_hexadecimal_aleatorio se

obterá acessando ao array, na posição gerada aleatoriamente.

Obter a cor aleatória

Agora que já vimos uma maneira de obter um valor hexadecimal aleatório,

vamos ver como obter uma cor aleatória, que não é mais do que obter 6

valores hexadecimais aleatórios e concatená-los.

hexadecimal = new

Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

cor_aleatoria = "#";

for (i=0;i<6;i++){


cor_aleatoria += hexadecimal[posarray]

}

Depois da execução deste código, a variável cor_aleatoria conterá a cor gerada

aleatoriamente.


Colocá-la em uma função

Para acabar esta pequena prática, vamos ver como se pode por tudo isto em

uma função, que poderemos utilizar em qualquer contexto.

function dar_cor_aleatoria(){

hexadecimal = new

Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

cor_aleatoria = "#";

for (i=0;i<6;i++){


cor_aleatoria += hexadecimal[posarray]

}

return cor_aleatoria

}

Para ver este exemplo em funcionamentocriamos uma página que mostra uma

série de 50 cores gerados aleatoriamente.

A aprendizagem na Internet Exemplo de página interativa para a aprendizagem pela internet.

Por Agustin Jareño



Apesar do computador não ser o remédio do futuro ensino, ninguém põe em

dúvida que é um meio didático muito potente que pode mudar a forma de

ensinar dos professores e o modo de aprender dos alunos.

Quando o aluno se depara com o computador e com um software educativo ou

com a própria Internet, o protagonista já não é o professor, e sim o próprio

aluno, quem lê, compreende e aprende por si mesmo.

O professor Jesús A. Beltrán Lera distingue a pedagogia da reprodução

passiva e a pedagogia da imaginação ativa e inovadora.

As páginas web também podem ser divididas em duas classes: as que

apresentam textos e desenhos que se podem copiar e imprimir (porém são

passivas e estáticas) e as páginas interativas (com um diálogo entre o

computador e o aluno). No mundo do ensino é muito aconselhável que os

exercícios sejam do segundo tipo.

http://www.criarweb.com/artigos/exemplos/tallerjs/generar_color.html

http://www.criarweb.com/artigos/aprendizagem-internet.html




Um modelo interativo pode ser este: A tela lhe apresenta uma "Ajuda" com o

conteúdo que o aluno necessita para fazer bem os exercícios; depois o

computador lhe apresenta uma pergunta com várias alternativas de resposta e

o aluno responde a uma delas; se a resposta for certa o computador lhe pontua

mudando a cor da resposta de preto a vermelho e se for falsa lhe informa de

seu erro com um alerta dando a informação correta. A interatividade permite a

correção instantânea da resposta do aluno, o que supõe um fator motivador.

Ao terminar todas as perguntas, o aluno acessa a um botão de "Pontuação"

que ao clicá-lo nos dá três informações: o número de acertos, o número de

erros e uma qualificação a partir destes três comentários de avaliação: "Muito

bem. Magnífico", se não cometeu erros; "Bem, porém pode melhorar", se a

pontuação (de 0 a 10) for de 7 ou superior; e "Deve repetir o exercício", se a

pontuação for inferior a 7 pontos. Esta interatividade produz uma realimentação

positiva que incrementa a motivação do aluno e estimula a atividade escolar.

Com HTML e Javascript pode-se preparar exercícios como os comentados

anteriormente e sobre distintos temas como ortografia, leitura compreensiva,

poesias, adivinhação e cálculo.

Vejamos dois exemplos de ortografia em espanhol, um com a ajuda em "alert"

e o outro utilizando o "popup".

No primeiro exemplo, colocaremos dentro do cabeçalho da página (entre o e )

um script com as funções que controlam os acertos, erros e pontuações:


var sumafa=0

var sumaaci=0

var res=0

var nota=0

function resbien(sumafa2)

{

sumaaci=sumaaci+1;

return true

}

function resmal(sumafa2)

{

sumafa=sumafa+1;

return true

}

function averiguarNota(nota2){

res=sumaaci+sumafa

res=res/10

nota=sumaaci/res

if (res <=0)

{

alert("Puedes empezar este ejercicio. ¡Suerte!")

}

else

if (nota >=10)

{

alert("Has tenido "+sumaaci+" aciertos y "+sumafa+" errores. Muy Bien.

Magnífico")

}

else

if (nota >7)

{

alert("Has tenido "+sumaaci+" aciertos y "+sumafa+" errores. Bien, pero puedes

mejorar.")

}

else

{

alert("Has tenido "+sumaaci+" aciertos y "+sumafa+" errores. Debes repetir el

ejercicio.")

}

sumaaci=0

sumafa=0 }

< /script>

Depois colocaremos o formulário no corpo da página. Contém o exercício

propriamente dito e os botões de "Ajuda", "Pontuação" e "Apagar

contestações":

< h1 align="center"><input Type="Button" Value="Ayuda" onclick="alert('abrir,

advertir, afirmativo, amable, cueva, n nsubir, obstruir, atrever, avión,

bandido.')"></h1>

< form NAME="bv">

< div align="center"><center><table border="8" width="346" cellspacing="1"

cellpadding="1">

< tr>

< td width="182" bgcolor="#FFFFFF"><div

align="center"><center><p><small><font face="Verdana"

color="#FF0000"><b>a_rir</b></font></small></td>

< td width="152" align="center" bgcolor="#FFFFFF"><b><div

align="center"><center><p>

< input Type="Button" Value=" b " onclick="resbien(); this.style.color='red'">

< input Type="Button" Value=" v " onclick="resmal(); alert('abrir, advertir,

afirmativo, amable, cueva, n nsubir, obstruir, atrever, avión, bandido.')">

< input Type="Button" Value=" w " onclick="resmal(); alert('abrir, advertir,

afirmativo, amable, cueva, n nsubir, obstruir, atrever, avión, bandido.')">

< /b></td>

< /tr>

< tr align="center">


align="center"><center><p><small><font

face="Verdana" color="#FF0000"><b>ad_ertir</b></font></small></td>

< b><td width="152" align="center" bgcolor="#FFFFFF"><b><input

Type="Button" Value=" b "

onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, n nsubir,

obstruir, atrever, avión, bandido. ')">

< input Type="Button" Value=" v " onClick="resbien(); this.style.color='red'">

<input

Type="Button" Value=" w "

onClick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, n nsubir,

obstruir, atrever, avión, bandido.')">

< /b></b></td>

< /tr>



align="center"><center><p><small><font

face="Verdana" color="#FF0000"><b>afirmati_o</b></font></small></td>

< b><td width="152" align="center" bgcolor="#FFFFFF"><b><input

Type="Button" Value=" b "

onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, n nsubir,

obstruir, atrever, avión, bandido. ')">

< input Type="Button" Value=" v " onClick="resbien(); this.style.color='red'">

<input

Type="Button" Value=" w "

onClick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, n nsubir,

obstruir, atrever, avión, bandido.')">

< /b></b></td>

< /tr>

< /table>

< /center></div><div align="center"><center><p><strong>

< input Type="Button" value="Puntuación" onclick="averiguarNota()">

< input TYPE="SUBMIT" VALUE="Borrar contestaciones"

onblur="this.style.color='black'"> </p>

< /center></div></form></strong>

Podemos ver o exemplo primeiro em funcionamento em uma página à parte.

O segundo exemplo que se propõe tem o mesmo script de pontuações, um

script com a função do popup e o código de ortografia de G e J. O código do

script do popup é:


cnt = 0;

var wnd;

function popup(pagina)

{

cnt++;

if( wnd != null )

{

wnd.close();

wnd = null;

}

wnd = open(pagina, "gl"+cnt, "width=650, left=70, top=128, height=270");

}

< /script>

E o código do corpo da página:

< p align="center"><input TYPE="BUTTON" NAME="Ayuda" VALUE="AYUDA"

onClick="popup('frayu05.htm');" <p> </p>

< form NAME="bv" onsubmit>

< div align="center"><center>

< table border="8" width="100%" cellspacing="1" cellpadding="1">

< tr>

< td width="75%" bgcolor="#FFFFFF"><div

align="center"><center><p><small><b><font face="Verdana">Avísame cuando

<font color="#FF0000">despe_e </font>el avión</font></b></small></td>

< td width="25%" align="center" bgcolor="#FFFFFF"><input Type="Button"

Value=" g " onClick="resmal(); alert('El sonido G suave con A, O, U, se escribe

GA, GO, GU y con E, I, se escribe GUE, GUI. n nEjemplos: goma, galleta,

guapa, Miguel, guitarra, gorro, guerra.')">

http://www.criarweb.com/artigos/exemplos/tallerjs/bvalert.htm

< input Type="Button" Value=" gu " onClick="resbien(); this.style.color='red'">

</td></tr>



align="center"><center><p><small><b><font

face="Verdana">Tu mamá es muy <font

color="#FF0000">ele_ante</font></font></b></small></td>


Value=" g "

onClick="resbien(); this.style.color='red'"> <input Type="Button" Value=" gu "

onClick="resmal(); alert('El sonido G suave con A, O, U, se escribe GA, GO,

GU y con E, I, se escribe GUE, GUI. n nEjemplos: goma, galleta, guapa,

Miguel, guitarra, gorro, guerra.')">

< /td></tr>



align="center"><center><p><small><b><font

face="Verdana">Los Reyes Magos me <font color="#FF0000">tra_eron

</font>una

bicicleta</font></b></small></td>


Value=" g "

onClick="resmal(); alert('Llevan J las formas de los verbos que no tienen G ni J

en el infinitivo. n nEjemplos: de decir, dijeron; de traer, trajimos, trajeron.')">

< input Type="Button" Value=" j " onClick="resbien(); this.style.color='red'">

</td></tr>

< /table></center></div>

< div align="center"><center><p><strong>

< input Type="Button" value="Puntuación" onClick="averiguarNota()">

< input TYPE="SUBMIT" VALUE="Borrar contestaciones"

onblur="this.style.color='black'"> </p>

< /center></div></form></strong>

Menu Dinâmico com Javascript Deve-se apostar num menu bastante dinâmico e flexível, pois ele é o veículo que vai conduzir cada cibernauta pela rede do seu sítio.

Por João Coelho




O leitor já deve ter sentido necessidade de dar dinamismo e agilidade ao seu

website. Pois fique desde já a saber que se deve apostar num menu bastante

dinâmico e flexível, pois ele é o veículo que vai conduzir cada cibernauta pela

rede do seu sítio. Se colocar links atafulhados e desorganizados no seu menu,

então é provável que os visitantes desistam após consultarem somente uma

página.

Por outro lado, se apresentar um índice sóbrio e bem estruturado, terá muito

maiores probabilidades de este ser usado pelos utilizadores e,

consequentemente, aumentar os seus registos de tráfego. Agora a escolha é

sua! Continuar com um menu estático e menos apelativo? Ou trocá-lo por um

que lhe proporcione um aumento dos seus rendimentos?

Se a sua escolha for a acertada (a segunda), então este artigo interessa-lhe,

pois descreve esquematicamente, e de forma o mais sucinta e compreensível

possível, um processo de criação de menus dinâmicos para colocar no seu

Website. O código é em Javascript, pois neste caso uma linguagem de

programação do lado do cliente só traz vantagens, pois aumenta a rapidez da

aplicação.

Veja um exemplo do seguinte código em acção!

Antes de converter o seu menu, dedique algum tempo para pensar numa

possível organização dos links. Uma proposta é separá-los por temas

diferenciados, como por exemplo: ?Desporto?, ?Cinema?, ?Teatro?, etc.. De

seguida, introduza em cada grupo aqueles que achar adequados ao contexto.

Organize os grupos por ordem decrescente de interesse, estando os mais

relevantes no topo da página e os menos interessantes em último lugar. Assim,

as hiperligações de topo terão mais visibilidade e chamarão mais cibernautas.

Findo este processo, pode começar a converter o seu menu.

Antes de mais, deve copiar e colar o seguinte código em Javascript no início do

site, pois é ele que vai gerir o seu índice de hiperligações.

< script>

var arrayX = new Array ();

var flagX = new Array ();

function treeWatch(id)

{

switch (flagX[id])

{

case "0":

document.getElementById ("subfolder"+id).innerHTML = "";

http://www.criarweb.com/artigos/menu-dinamico-com-javascript.html


http://www.menudinamic.ecluso.com/



flagX[id]="1";

break;

case "1":

document.getElementById ("subfolder"+id).innerHTML = arrayX[id];

flagX[id]="0";

break;

}

}

< /script>

Este código está dividido em duas secções que são delimitadas pelo ?switch?:

ou o grupo está visível, ou não está visível. Se o valor da lista for ?0? então o

código vai ocultar a parte do menu em foco. Se o valor, por outro lado, for ?1?,

nesse caso o script irá mostrar a secção pretendida.

Agora só falta definir o que deseja tornar dinâmico no seu menu e se essa

parte deve aparecer oculta, logo de início, ou não.

Nesse sentido, deve colocar a informação da seguinte forma:

< script>arrayX[y] = ?códigoHTML?; flagX[y] = "1";</script>

Onde se lê y, deve colocar a ordem em que deseja que apareça a secção. Se

quiser introduzir um certo tema em primeiro lugar, tem de colocar no campo y o

valor 0. De forma geral, para colocar em ordem n, deve-se indicar o valor n-1.

< script>treeWatch ('visibilidade');</script>

Por outro lado, se desejar que aquele campo deve ser visível à partida, coloque

o valor de ordem relativo ao bloco desejado (por exemplo, para activar o 3º

bloco, deve introduzir ?2? onde se lê ?visibilidade?). Se desejar que o bloco

apareça omisso de início, não coloque a linha de código anterior.

Para finalizar, só falta colocar o seguinte código HTML onde desejar que a

secção apareça.

< img src=?URLimagem? onclick=?treeWatch('y')? />

< font id="subfoldery"></font>

Uma vez mais, o valor y refere-se à ordem em que a secção aparece no menu.

Os valores de y devem ser sempre iguais para o mesmo bloco. Por outro lado,

o objecto ?img?, ou seja, a imagem, tem um evento ?onclick? que vai mostrar

ou esconder (assim que seja clicado) o bloco do menu correspondente. Uma

nota breve para referir que não é estritamente necessário que o objecto seja

uma imagem. O essencial é implementar algures num objecto o evento

onclick=?treeWatch('y')?.

Só um aparte para referir que este script já está desenhado no sentido de ser

integrado com outras linguagens de programação do lado do servidor. Só para

dar uma ideia... Se desejar que certa secção fique activa após um clique

específico num certo link, então basta colocar o seguinte código (exemplo em

PHP):

< script>treeWatch ('<?=$varVisibilidade?>');</script>

Agora que já possui um menu dinâmico, regozije-se com o seu tráfego a subir!

Página que muda aleatoriamente a cor de fundo Como fazer com que uma página mude de cor cada vez que se visita, colocando uma cor aleatória e com o texto que contraste para que se possa ler bem.




Vamos criar uma página que tem uma cor de fundo aleatória, de modo que, cada vez que se visite se mostre com um fundo diferente. Entretanto, como a cor da página vai ser diferente a cada vez, para certificarmos que o texto poderá ser lido corretamente, faremos com que o texto da página seja ou branco ou negro, dependendo da gama da cor de fundo: se for escuro, o texto da página será branco e se o fundo for claro, o texto se verá em negro. Há que se dar conta que, se a cor é aleatória, às vezes sairá mais escuro e às vezes mais claro. Para que se leia bem o texto, sua cor tem que contrastar o suficiente com a cor de fundo, por isso, calcularemos a obscuridade ou a claridade do fundo para observar a cor do texto. Pode-se ver em funcionamento o exemplo que será desenvolvido nesta página. Em um artigo anterior do workshop de Javascript já explicamos uma maneira de conseguir uma cor aleatória em Javascript.

Apesar de no mencionado artigo já estar a função Javascript para obter uma cor aleatória transcreveremos novamente aqui, pois fizemos um par de mudanças minúsculas ao código: function dame_numero_aleatorio(superior, inferior){ var numPossibilidades = (superior + 1) - inferior; var aleat = Math.random() * numPossibilidades; aleat = Math.floor(aleat);

http://www.criarweb.com/artigos/pagina-que-muda-aleatoriamente-cor-fundo.html


http://www.criarweb.com/artigos/exemplos/tallerjs/color_aleatorio_texto_contraste.html


http://www.criarweb.com/artigos/%20http:/www.criarweb.com/workshop_javascript/

http://www.criarweb.com/artigos/%20http:/www.criarweb.com/artigos/gerar-cor-aleatoria-javascript.html


aleat = (inferior + aleat); return aleat } function dame_cor_aleatoria(){ color_aleat="#" hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F") var inferior = 0; var superior = hexadecimal.length-1; for (i=0;i<6;i++){ color_aleat += hexadecimal[dame_numero_aleatorio(superior, inferior)]; } return color_aleat } Agora veremos a maneira de conhecer a obscuridade ou claridade de uma cor aleatória gerada por Javascript. Para calcular a obscuridade (ou claridade) de uma cor em formato RGB hexadecimal, vamos realizar vários passos: Temos que saber que, a maiores valores de RGB, a cor resultante será mais clara. Se os valores de RGB são mais baixos, a cor será mais escura. Os valores de R, G e B, separadamente podem ir, em decimal, desde 0 a 255. Diremos que será claro quando for maior que 255 / 2 e que é escuro quando for menor de 255 / 2. Vamos supor um umbral a partir do qual consideramos a cor mais escura ou mais clara. Digamos que se somamos separadamente os valores vermelho, verde e azul e dá mais da metade de ((255 + 255 +255) / 2), é que a cor é clara. Se estiver abaixo desse umbral, a cor é escura.

1. Separaremos os valores hexadecimais dos três componentes da cor (vermelho, verde e azul)

2. Converteremos esses valores a inteiros em base 10 3. Somamos os valores de cada cor, obtendo um número inteiro, do que

vamos deduzir a claridade ou obcuridade. 4. Se o número resultado da soma for menor que ((255 + 255 + 255) / 2),

então é que a cor de fundo é escura, logo a cor do texto deve ser clara. E ao contrário, se deduzimos que a cor de fundo é clara, então a cor de texto terá que ser escura.

Isto se faz da seguinte maneira, em código Javascript, tendo uma cor em um

string com o formato #RRGGBB:

//obtenho uma aleatoria

colorin = dame_cor_aleatoria()

//vou extrair as tres partes da cor

rojo = colorin.substring(1,3)

verde = colorin.substring(3,5)

azul = colorin.substring(5,7)

//vou converter a inteiros os string, que tenho em hexadecimal

intvermelho = parseInt(vermelho,16)

intverde = parseInt(verde,16)

intazul = parseInt(azul,16)

//agora somo os valores

obscuridade = intvermelho + intverde + intazul

//se o valor obscuridade for menor que ((255 + 255 + 255) / 2) é que é uma cor

mais escura

//se for escura, a cor do texto será branca

if (obscuridade<(255+255+255)/2)

colortexto="#ffffff"

else

colortexto="#000000"

Para atualizar a cor de fundo e de texto de uma página web se poderia fazer

com estas linhas de código:

document.fgColor=colortexto

document.bgColor=colorin

Porém, isto dá um problema em alguns navegadores, ao mudar a cor do texto,

que não se pode fazer se previamente se escreveu algo na página.

Então, vamos marcar a cor do fundo e do texto utilizando os conhecidos

atributos bgcolor e text da etiqueta <body>.

Escreveremos o <body> mediante javascript, colocando os valores de cor

aleatória e cor do texto que extraímos das variáveis que os contém.

document.write('<body bgcolor="' + colorin + '" text="' + colortexto + '">')

Isso é todo. Já temos a página com a cor de fundo aleatória e a cor do texto

com suficiente contraste.

A página onde implementamos este exercício pode-se ver em funcionamento

aqui. Podemos ver seu código fonte para obter script do exemplo completo.

Script de recarregamento da página com Javascript



Realizamos um script em uma página, com Javascript, que faz com que se recarregue constantemente e assegura que não se obtém a página sempre desde o cache.




Em algumas ocasiões necessitamos que uma página recarregue seus

conteúdos a cada certo tempo, para mostrar informação atualizada às pessoas

que a visitam. Isto é Às vezes típico dos serviços que mostram informação em

tempo real, segundo se vai produzindo.

Este artigo surge como resposta à dúvida de um visitante que, ademais,

necessitava que o tempo que passasse entre cada recarregamento da página

fosse sempre diferente. Para isso, simplesmente fazemos que se recarregue a

página depois de um número de segundos aleatório.

Um tema que ademais é necessário para que tudo funcione corretamente é

que a página não se mostre desde o cachê do navegador. Sabemos que

quando uma página já foi solicitada previamente, fica muitas vezes no cache de

nossos navegadores de modo que, se se volta a solicitar, se mostra a cópia

que temos armazenado localmente, em vez de se solicitar e baixar através do

servidor de Internet. Nestes sistemas de recarregamento há que se assegurar

que os conteúdos não se obtenham desde o cache, para que as atualizações

possam ser vistas corretamente com cada recarregamento da página.

O recarregamento com Javascript

Vejamos como resolvemos todas estas necessidades, neste caso mediante

Javascript.

Para começar, temos que obter um número aleatório de segundos, para que o

recarregamento se realize a intervalos irregulares, tal como nos solicitavam.

Para isso, vamos utilizar a seguinte função de cálculo de números aleatórios,

que comentamos e provamos em outros exemplos relatados em

CriarWeb.com.

function aleatorio(inferior,superior){

numPossibilidades = superior - inferior

aleat = Math.random() * numPossibilidades



http://www.criarweb.com/artigos/script-recarregamento-pagina-com-javascript.html



return parseInt(inferior) + aleat

}

Chamaremos à função para obter um número aleatório, neste caso entre 5 e

10:

num_aleatorio = aleatorio(5, 10)

Para solucionar o tema de que a página não se mostre desde o cache do

navegador vamos enviar-lhe um parâmetro pela URL, assim a URL que

solicitemos será sempre diferentes e nosso navegador se verá obrigado a

solicitar a página ao servidor cada vez que se recarregue. Poderíamos ter

utilizado outras técnicas como colocar no cabeçalho do http a ordem para que

não se salve no cache, porém por experiência própria, esta é a única maneira

que nos assegura que todos os navegadores vão recarregar a página

solicitando sempre ao servidor.

Vou gerar um string para enviá-lo por parâmetro a esta mesma página. Como

dizíamos, o parâmetro o passaremos pela URL. Não faremos nada com este

dado, mas como cada vez será diferente, nos assegura que o navegador

sempre solicitará ao servidor a página, em vez de mostrar outra vez a que tem

em cache. Utilizaremos a data e tempo para gerar o dato que mude sempre.

minhaData = new Date()

dato_url = minhaData.getYear().toString() + minhaData.getMonth().toString() +

minhaData.getDate().toString() + minhaData.getHours().toString() +

minhaData.getMinutes().toString() + minhaData.getSeconds().toString()

Na variável dado_url salvamos o ano, seguido do mês, dia, horas, minutos e

segundos. Como todos os dados de data, se têm que extrair desde um objeto

date, que criamos com a sentença new Date(). Logo, a este objeto lhe

invocamos diversos métodos para obter os dados que necessitamos. Os dados

são devolvidos em tipo inteiro e para concatená-los como se fossem string,

necessitamos aplicar o método toString(), que têm todos os objetos de

Javascript para convertê-los em cadeias.

Já só falta realizar o recarregamento propriamente dito. Para isso, temos que

aplicar um atraso, que conseguiremos com a função setTimeout(), que recebe

como primeiro parâmetro a instrução que se quer executar e como segundo

parâmetro, o tempo em milésimos de segundos que se quer esperar.

setTimeout("window.location='pagina.html?parametro=" + dado_url + "'",

num_aleatorio * 1000)


Se observarmos, utilizamos window.location para atribuir uma nova URL ao

navegador. Logo, utilizamos a variável dado_url para passá-la como parâmetro.

Ademais, para marcar o atraso entre recarregamentos utilizamos a variável

num_aleatorio, multiplicada por 1000 para passar a milésimos de segundos.

Mudar a cor às células de uma tabela com Javascript Vemos um par de métodos para alterar a cor de uma célula de uma tabela com javascript.




Veremos neste artigo um par de soluções a uma pergunta típica de trabalho

com Javascript: mudar a cor à célula de uma tabela dinamicamente e como

resposta a ações do usuário. Este exemplo pode ser realizado muito facilmente

e ofereceremos um par de soluciones, que podemos aplicar dependendo do

caso concreto em que nos encontremos.

A primeira solução que vamos ver é como mudar a cor de uma célula ao

passar o mouse por cima. Quando entrarmos com o mouse na célula deve

mudar para uma cor e quando sairmos a mudaremos por outra.

O segundo caso que vamos realizar é mudar a cor da célula como resposta a

eventos de elementos que estão fora da própria célula. Em concreto,

mudaremos a cor de uma célula quando se acione um formulário que está fora

das células a mudar.

Mudar a cor de uma célula ao passar o mouse por cima

É um caso muito típico que se pode ver em muitas webs. Este exemplo é

bastante simples de fazer com CSS, sem necessidade de escrever nem uma

linha de código Javascript, porém, apesar disso o mostraremos aqui.

No exemplo teremos uma tabela com várias células e para cada uma teremos

definido o evento onmouseover e onmouseout, para chamar a uma função que

se encarregue de mudar a cor quando se entre na célula e quando se saia,

respectivamente.

A tabela terá esta forma:

< table width=100>

http://www.criarweb.com/artigos/mudar-cor-celulas-de-tabela-com-javascript.html





< tr>

<td bgcolor="#dddddd" id="celula1" onmouseover="mudar_cor_over(this)"

onmouseout="mudar_cor_out(this)">Campo numero 1</td>

< /tr>

< tr>



< /tr>

…

<tr>



< /tr>

< /table>

As funções que se encarregam de alterar a cor recebem por parâmetro a

palavra this, que é uma referência à célula onde está o evento. Se estamos no

evento da célula 1, this faz referência a essa mesma célula 1. As funções são

as seguintes:

function mudar_cor_over(celula){

celula.style.backgroundColor="#66ff33"

}

function mudar_cor_out(celula){

celula.style.backgroundColor="#dddddd"

}

Como se pode ver, recebem a célula cuja cor se deseja mudar (que se enviou

com a palavra this no manejador do evento). Logo, executam a sentença

necessária para mudar a cor.

Mudar a cor de uma célula sem passar a referência this

O segundo caso que havíamos adiantado que íamos fazer, era mudar a cor a

uma célula desde outra parte da página. Vimos que, se estamos na mesma

célula, podemos enviar uma referência do próprio campo com a palavra this,

porém se não estamos codificando um evento da célula, e sim estamos em

outro lugar do código da página, não teremos possibilidade de enviar essa

simples referência.

Então, nos torna necessário obter a referência da célula por outro mecanismo.

Entra em jogo a função de Javascript (que em realidade é um método do objeto

document) chamada getElementById(). Esta função recebe o nome de um

identificador e devolve uma referência ao elemento que tem esse identificador.

Atribui-se identificadores aos elementos de HTML com o atributo id. Desta

maneira:

< td id="celula1">

Podemos ver no código da tabela, escrito linhas acima, que cada célula tem um

identificador definido. Utilizaremos esse identificador para obter a referência à

célula que desejamos alterar sua cor.

Por exemplo, se quisermos obter uma referência à célula com identificador

"celula1", utilizaríamos a chamada a essa função assim:

celula = document.getElementById("celula1")

Logo, com a referência da célula, podemos mudar a cor como vimos antes:

celula.style.backgroundColor="#dddddd"

Em nosso exemplo para ilustrar este método criamos um formulário com dois

campos de texto e um botão. No primeiro campo de texto escreveremos o

número da célula cuja cor queremos mudar. No segundo, escreveremos o

nome da cor que queremos colocar ao campo, ou seu código RGB. Quando

apertarmos ao botão, chamaremos a uma função que se encarregará de mudar

a cor da célula.

O formulário terá um código como este:

< form name=fcolor>

Numero de celula: <input type=text name=celula size=3>

< br>

Cor: <input type=text name=minhacor size=8>

< br>

< input type=button value="Mudar cor" onclick="muda_cor()">

< /form>

E a função javascript que se encarregará de mudar a cor terá este código:

function muda_cor(){

celula = document.getElementById("celula" + document.fcolor.celula.value)

celula.style.backgroundColor=document.fcolor.minhacor.value

}

Como se pode ver, para obter a referência utilizamos a função

document.getElementById() e passamos o id da célula que queremos mudar

sua cor. O identificador da célula se compõe pela palavra "celula" e o número

da célula, que tiramos do formulário.

Logo, se coloca na célula a cor que se tira do outro campo do formulário.

Pop-ups DHTML – OpenPopups Sistema Javascript para criar pop-ups DHTML, por meio de camadas, que

não se podem bloquear pelos sistemas de bloqueio de pop-ups.




Todos nós já sabemos que a maioria dos navegadores dispõe de sistemas para bloquear os incômodos pop-ups, e quando estes não os bloqueiam, existem barras de navegação, como a de Google, que também bloqueia a apresentação de pop-ups. A maioria das vezes, estes pop-ups são muito incômodos e temos que comemorar porque agora a maioria se pode detectar e não permitir sua abertura, porém muitos de nossos sites utilizam este sistema

para mostrar informação legítima que nossos visitantes deveriam conhecer.

De qualquer forma, existem métodos para mostrar pop-ups que possam ser mais complicados de bloquear, como os pop-ups DHTML, que são uma emulação das janelas secundárias, porém que funciona por camadas e HTML dinâmico para mostrar ou ocultar seu conteúdo. Este tipo de pop-ups não se considera como janelas secundárias, por isso não se bloqueiam.

Somente os navegadores que tenham Javascript desabilitado deixarão de mostrar estes pop-ups. Lembremos que depende de como esteja configurado Internet Explorer, às vezes te mostra uma mensagem de alerta quando se intenta executar um script em Javascript. O usuário é o responsável de permitir, ou não, executar scripts na página. Por isso, não é tão raro que inclusive os pop-ups DHTML se possam bloquear, mas pelo menos significam um avance com respeito às janelas secundárias habituais.

OpenPopups

Todo o anterior serve para apresentar um script Javascript Open Source (gratuito e de código livre) para criar Pop-ups DHTML. Vale a pena conhecer este script, porque certamente pode ser muito interessante para nossas páginas web.

A web onde se pode baixar o sistema de pop-ups DHTML é: http://www.openwebware.com/products/openpopups/

http://www.criarweb.com/artigos/pop-ups-dhtml-openpopups.html





http://www.openwebware.com/products/openpopups/

Desde tal web se podem baixar os arquivos necessários para a instalação do sistema de pop-ups e algum código de exemplo. De qualquer forma, explicaremos aqui em português, para que todos possam entender.

Referência: Em CriarWeb.com publicamos alguns outros artigos sobre

como fazer um pop-up DHTML, porém utilizando a biblioteca Cross-

Browser. Pode ser de interessante leitura para quem quiser se

aprofundar no tema ou encontrar outras possibilidades para realizar

pop-ups DHTML. Está em nosso manual de Workshop de Cross-

Browser DHTML.

Tem-se que descompactar os arquivos que se baixam da web, mantendo a mesma estrutura de diretórios.

Uma vez estando descompactados, em um diretório dentro de nosso web site, que chamaremos, por exemplo, "d_openpopups", já podemos acessá-los através de qualquer página para mostrar pop-ups DHTML. Para isso, o primeiro é incluir o Javascript com a biblioteca.

< script language="JavaScript" type="text/javascript" src="/d_openpopups/openpopups/openpopups.js"></script>

Onde "d_openpopups" deve ser o diretório onde descompactamos os arquivos. Tal como está escrita a rota para o script, se supõe que colocamos este diretório na raiz do diretório de publicação da web.

Logo, temos que adicionar um evento onload na etiqueta <body>, para ocultar os pop-ups ao carregar a página.

< body onload="hideDiv()">

A função hideDiv() recebe o número de popups que vamos utilizar na página. Se tivermos um só pop-up DHTML chamaremos passando um 1 como parâmetro: hideDiv(1). Se tivermos 5 pop-ups DHTML, lhe passaremos um 5 como parâmetro: hideDiv(5).

A seguir, temos que criar as camadas com o código fonte dos pop-ups a mostrar. Algo como:

< div id="Div1"> Código do Popup < /div>

Há que observar que a camada tem como identificador (atributo id) "Div1". Isso é para o pop-up 1. Se tivéssemos outros pop-ups, deveríamos dar-lhes nomes com números consecutivos: Div2, Div3…

http://www.criarweb.com/workshop_cross-browser/


Para acabar, temos que fazer a chamada à função Javascript que deve mostrar o pop-up. Essa função se chama createWindow() e recebe vários parâmetros:

1. Título da janela 2. Largura da janela (a altura será a necessária para que caiba todo o

conteúdo) 3. Cor de fundo da janela 4. O identificador da camada (só o número, 1, 2, 3…) 5. Se quisermos que se mostre o ícone para minimizar (1 para mostrá-lo e

0 se não quisermos que se mostre) 6. A posição "left" da janela (o número de pixels à esquerda da janela) 7. A posição "top" da janela (o número de pixels que deve ter acima da

janela.

Por exemplo, uma chamada possível a esta função seria:

createWindow('Título', 300, '#ffff88', 1, 0, 100, 25);

Um detalhe que para nós fez falta mudar para que tudo funcionasse corretamente, embora não tenha visto explicado nada disto na documentação do produto, são os diretórios das imagens e as declarações de estilos que utilizam os pop-ups DHTML. Esses diretórios vêem especificados no arquivo de scripts javascript chamado openpopups.js.

Nas seguintes linhas do código se especificam os diretórios das imagens e os CSS:

// CSS Diretory cssDir = "/d_styles/"; // Images Directory imageDir = "images/";

À princípio, segundo entendo, não teria porquê tocar nessas linhas, porque não modifiquei a estrutura de diretórios do arquivo de download, porém se não as toca os exemplos não funcionam corretamente. Para que as rotas se encontrem, tive que colocar a estrutura de diretórios desde a raiz do domínio até as pastas onde estão os arquivos CSS e as imagens. Seria algo como isto:

// CSS Diretory cssDir = "/d_openpopups/openpopups/styles/";

// Images Directory imageDir = "/d_openpopups/openpopups/images/";

Código completo

Vamos mostrar o código de uma página que tem dois pop-ups DHTML e com um par de métodos de carregamento dos popups, um por meio do botão e outro por meio de um link.

< html> < head> <title>Exemplo OpenPopups</title> <script language="JavaScript" type="text/javascript" src="/d_openpopups/openpopups/openpopups.js"> </script> < /head> < body onLoad="hideDiv(2);"> Esta página mostra um par de pop-ups DHTML. <br> <br> Esperamos que sejam interessantes. <form> <input type="button" value="Abrir Popup DHTML 1" onClick="createWindow('Ejemplo 1', 150, '#ffff88', 1, 1, 20, 40);"> </form> <p> Agora vejamos o exemplo 2, abertura com um link: <a href="#" onClick="createWindow('Anuncio MercadoProfesional.com', 468, '#EEEEEE', 2, 0, 240, 165);">Abre o segundo popup</a> <div id="Div1"> <div style="border: 1px solid #ff8800; background-color: #FFFF88; padding: 5px;"> <b>Aqui poderíamos colocar tanto texto quanto quisermos! E todo tipo de conteúdo HTML! </div> <ul> <li>Com listas</li> <li>Links</li> <li>Tabelas</li> <li>...</li> </ul> </div> <div id="Div2"> <div align="center"><a href="http://www.mercadoprofesional.com" target="_blank"><img src="mp468.gif" width="468" height="60" border="0" alt="MercadoProfesional.com"></a></div> </div>

< /body> < /html>

Validar a extensão de um arquivo a subir com Javascript

Apresentamos um script Javascript para realizar a validação da extensão de um arquivo antes de realizar um upload.




Neste artigo vamos mostrar como validar a extensão de um arquivo mediante Javascript. Temos um formulário com um campo file e quando se envia o arquivo, se realiza uma comprovação para ver se a extensão está entre as permitidas. Se estiver, se realiza o envio do formulário para fazer o upload do arquivo.

Neste script só se realiza a comprovação da extensão, em nenhum caso a recepção do arquivo e seu armazenamento no servidor, pois com Javascript não podemos realizar essas ações, já que é uma linguagem que se executa no cliente e não tem acesso ao servidor para fazer um upload. Neste exemplo vamos definir um formulário com um campo file e um botão de enviar que chama a uma função que será encarregada de comprovar se a extensão está permitida e submeter o formulário se estiver tudo correto. O formulário seria o seguinte:

< input type=file name="arquivoupload">

< input type=button name="Submit" value="Enviar"

onclick="comprova_extensao(this.form, this.form.arquivoupload.value)">

< /form>

Agora veremos a função comprova_extensao() que recebe uma referência ao

formulário e a rota do arquivo que desejamos subir desde dentro de nosso

computador. A função realizará uma série de comprovações que veremos a

seguir. O código será o seguinte:

function comprova_extensao(formulario, arquivo) {

extensoes_permitidas = new Array(".gif", ".jpg", ".doc", ".pdf");

meuerro = "";

if (!arquivo) {

//Se não tenho arquivo, é porque não se selecionou um arquivo no formulário.

meuerro = "Não foi selecionado nenhum arquivo";

}else{

//recupero a extensão deste nome de arquivo

extensao = (arquivo.substring(arquivo.lastIndexOf("."))).toLowerCase();

//alert (extensao);

http://www.criarweb.com/artigos/validar-extensao-arquivo-a-subir-com-javascript.html




//comprovo se a extensão está entre as permitidas

permitida = false;

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

if (extensoes_permitidas[i] == extensao) {

permitida = true;

break;

}

}

if (!permitida) {

meuerro = "Comprova a extensão dos arquivos a subir. \nSó se podem subir

arquivos com extensões: " + extensoes_permitidas.join();

}else{

//submeto!

alert ("Tudo correto. Vou submeter o formulário.");

formulario.submit();

return 1;

}

}

//se estou aqui é porque não se pode submeter

alert (meuerro);

return 0;

}

O primeiro que fazemos é definir um array com as extensões permitidas para

fazer o upload. Também definimos uma variável chamada meuerro, onde

vamos salvar o texto explicativo do erro, se é que se produz.

Logo, comprovamos se recebemos uma rota do arquivo. Se não houver tal

rota, se define o erro correspondente "Não foi selecionado nenhum arquivo".

No caso contrário é que temos uma rota, com o qual vamos buscar o nome do

arquivo.

A rota que podemos receber pode ter uma forma como esta:

C:\diretorio\outro diretorio\arquivo.doc

Da rota nos interessa obter só a extensão do arquivo. Por isso vamos obter a

parte que há depois do último ponto. Isto se faz utilizando vários métodos dos

objetos string de Javascript:

extensao = (arquivo.substring(arquivo.lastIndexOf("."))).toLowerCase();

Simplesmente estamos selecionando a parte do string que há depois do último

ponto. E estamos passando a extensão a minúsculas, no caso em que esteja

escrita com maiúsculas.

A seguir, para comprovar se esta extensão está entre as permitidas fazemos

um loop for, que percorre todo o array de extensões permitidas e vai

comparando-as à extensão que recortamos do nome do arquivo. No momento

que encontra uma coincidência se sai do loop e põe a variável boleana

permitida a true. Se não encontrasse coincidências essa variável boleana

ficaria como false.

Logo, se comprova a variável boleana permitida. Se estiver em false é que não

se permite a extensão, então defino o correspondente erro. Se estiver a true é

que a extensão figurava entre as permitidas, então se envia o formulário e se

sai da função.

Ao final da função se mostra o possível erro que tiver detectado. Só se

mostrará o erro se não se chegou a mandar o formulário, porque se tivesse

sido enviado, se sairia anteriormente da função.

Esperamos que esta validação tenha sido de utilidade. Pode-se ver em

funcionamento em uma página a parte.

Detectar a resolução da tela do usuário com Javascript Fazemos um script javascript para detectar a resolução da tela do visitante e fazer coisas diferentes em função da definição que tiver.




Com Javascript se pode calcular a resolução de tela do usuário que nos visita.

Atenção, não nos referimos ao tamanho da janela do navegador, e sim ao

tamanho total em pixels que tivermos configurado em nosso sistema.

As resoluções de tela podem ser valores como 800x600, 1024x760,

1280x800… e se configuram pelo usuário no painel de controle, em

propriedades de tela.

Nós com Javascript podemos acessar a esses valores através do objeto

screen:

Com screen.width obtemos a largura em pixels da definição de tela.

Com screen.height obtemos a altura em pixels.

http://www.criarweb.com/artigos/exemplos/tallerjs/probandoupload.html

http://www.criarweb.com/artigos/exemplos/tallerjs/probandoupload.html

http://www.criarweb.com/artigos/detectar-resolucao-tela-usuario-javascript.html





Então, se quisermos escrever na página os valores de largura e altura da

resolução de tela, poderíamos utilizar um javascript como este:

A resolução atual de sua tela é:


document.writeln(screen.width + " x " + screen.height)

< /script>

Se desejarmos, podemos fazer diferentes coisas dependendo da definição de

tela do usuário, por exemplo, com uma estrutura if:

Consideramos sua tela:


if (screen.width<1024)

document.write ("Pequena")

else

if (screen.width<1280)

document.write ("Media")

else

document.write ("Grande")

< /script>

Este código mostrará o tamanho da janela como pequena (menos de 1024

pixels de largura), media (Maior ou igual a 1024 pixels de largura e menor de

1280) ou grande (1280 pixels de largura ou mais). Porém, poderíamos ter feito

outras cosas diferentes dependendo da resolução detectada.

Os exemplos deste artigo pode-se ver em uma página à parte.

Esconder a URL de um link na barra de estado Como fazer um Javascript para evitar que se mostre a URL na barra de

estado do navegador (status bar) ao passar o mouse por cima de um link.




Quando colocamos o mouse em cima de um link se mostra na barra de estado do navegador a URL a qual vai dirigido. Isto é algo que resulta muito útil quando navegamos, porque podemos ver, antes de clicar o link, o endereço ao

http://www.criarweb.com/artigos/exemplos/tallerjs/resolucion-pantalla.html

http://www.criarweb.com/artigos/esconder-url-de-link-na-barra-estado.html


que nos dirigirá o navegador se clicamos. Porém, por muito útil que resulte aos navegantes, às vezes os webmaster por umas razões ou por outras preferem que não se veja a URL que nos enviará o link ao colocar o mouse em cima. Com Javascript podemos alterar o texto que aparece na barra de estado do navegador em qualquer momento, portanto será ideal para esconder o texto que aparece na barra de estado.

Nota:A decisão de eliminar a URL que aparece na barra de estado ao

se colocar em cima de um link é uma má idéia desde o ponto de vista

da usabilidade. Todos nós utilizamos essa informação para ter uma

referência e eliminá-la pode ser incômodo para o visitante.

Temos duas maneiras de esconder o texto da barra de estado. A primeira seria modificando a etiqueta do link, porém teríamos que fazer link a link para todos os que se deseje. Também mostraremos um modo de fazer isso para todos os links da página de uma só vez. Esconder o texto da barra de estado de link a link Simplesmente vamos atribuir um comportamento quando se pose o mouse em cima de um link e outro comportamento para quando se saia do link. < a href="http://www.guiarte.com" onmouseover="window.status='Guiarte, sitio de turismo y arte';return true" onmouseout="window.status='';return true"> Guiarte.com Se vemos esta etiqueta do link se comprovará que tem dois eventos definidos:

onmouseover, para definir ações quando se pose o mouse sobre o link. Neste evento indica com window.status um novo texto para a barra de estado. Logo, fazemos o return true para que não se realize nenhuma ação adicional por este evento.

onmouseout, para definir ações quando o mouse sai do link. Neste evento apagamos o texto da barra de estado que aparecia ao posar sobre o link.

A vantagem deste modo é que podemos colocar um texto diferente na barra de

estado para cada link da página. Como dizíamos, a desvantagem é que temos que fazê-lo em cada link que quisermos evitar que se veja a URL. Pode-se ver um exemplo em uma página a parte.

Nota:Na configuração pré-determinada de Firefox não se permite

alterar o texto da barra de estado, por isso este script não mudará esse

texto. Porém, como temos o "return true" no manejador do evento, pelo



http://www.criarweb.com/artigos/exemplos/tallerjs/esconder-url-barra-estado-enlaceenlace.html

menos evitará que se veja a URL do link.

Ocultar o texto da barra de estado para todos os links Agora vejamos outro método de fazer isto, de uma só vez para todos os links que tiver na página. Simplesmente vamos fazer um código para apagar o texto da barra de estado, que vai se executar indefinidamente cada intervalo de tempo. Assim, apesar de aparecer a URL do link na barra de estado durante uns instantes, nosso código se executará a cada pouco para apagá-lo. Vejamos a seguinte instrução Javascript: setInterval ("window.status = ''",10); Isto é uma chamada ao método de window setInterval(), que serve para executar um código Javascript indefinidamente em intervalos definidos. O primeiro parâmetro é a instrução que vai executar window.status = '', que serve para apagar o texto da barra de estado. O seguinte parâmetro são os milésimos de segundos que têm que transcorrer entre execuções da instrução, neste caso 10 milésimos de segundos. Se colocamos esta instrução em um script em qualquer parte da página, preferivelmente no cabeçalho, faremos que desapareça o escrito na barra de estado em questão de instantes. < script language="JavaScript"> setInterval ("window.status = ''",10); < /script> Pode-se ver em funcionamento o script aqui.

Nota: Na configuração padrão de Firefox não se permite mudar o texto

da barra de estado, por isso este script parecerá ter nenhum efeito.

Para encontrar mais informação sobre como mudar esta configuração de

Firefox consultando a FAQ: Por que não se muda o texto da barra de estado

em Firefox com Javascript?

Conclusão

Embora o texto da barra de estado seja útil, talvez prefiramos que não apareça,

ou que se mostre uma mensagem personalizada. Espero que estas duas

soluções sejam úteis para esses casos.

http://www.criarweb.com/artigos/exemplos/tallerjs/esconder-url-barra-estado.html

http://www.criarweb.com/faq/mudar-texto-barra-estado-firefox.html

http://www.criarweb.com/faq/mudar-texto-barra-estado-firefox.html


Como integrar conteúdo RSS em minha página? Um código muito simples para poder ter conteúdo RSS em sua página web.

Por César Pietri



Um dos benefícios que o uso de RSS nos pode oferecer é o poder integrar o

conteúdo de Feeds dentro de nossas páginas o qual nos traz informação

atualizada para manter nossas páginas ao dia com o qual sempre manteremos

aos nossos visitantes com informação renovada e sem a necessidade de nos

dedicar a manter o site, pois para a elaboração deste processo há várias

opções no mercado as quais podemos desenvolver nós mesmos, comprá-las

ou inclusive conseguir código reutilizável que se consegue pela rede e

GRÁTIS. Comentarei esta oportunidade pois consegui em uma página um leitor

de RSS feeds gratuito e tão simples como copiar 2 linhas de um Javascript e

integrá-lo em seu código e logo coloca a página de onde vai tomar a

informação e pronto, já tem conteúdo atualizado em sua página, ótimo não é?

Anexo aqui as linhas que devem ser incluídas em seu site, o leitor está

desenvolvido em php.

Coloquem estas linhas de código:

< script language="JavaScript" type="text/JavaScript"

src="http://arupbhanja.com/rssfeed.php?file=http://construcanarias.bitacoras.co

m/rss1.xml&max=10"> </script>

Explicando

Indica que vem código javascript…

<script language="JavaScript" type="text/JavaScript"

É o endereço de onde tira o leitor de feeds…

src="http://arupbhanja.com/rssfeed.php?

O endereços do feeds…

file=http://construcanarias.bitacoras.com/rss1.xml

Quantidade máxima de tópicos a mostrar, neste caso são 10, mas se pode

modificar…

&max=10"></script>

http://www.criarweb.com/artigos/como-integrar-conteudo-rss-minha-pagina.html





Recomendo que também visitem Feeddigest (em inglês).

Fazer com que um iframe se ajuste à altura de uma janela com Javascript Vamos definir dinamicamente com Javascript o tamanho de um iframe para que se ajuste ao espaço disponível na janela do navegador.




Tenho uma página que tem um iframe e quero que ocupe o espaço máximo disponível, porém não disponho de toda a página, porque há outros conteúdos na página. Ademais, como às vezes a janela do navegador é maior ou menor, o espaço que posso atribuir ao iframe é diferente. Neste workshop de Javascript vamos realizar um cálculo do espaço disponível na página para que um iframe que temos dentro ocupe a maior área possível. Tudo tendo em conta que cada usuário pode entrar com uma definição de tela distinta e com um navegador distinto.

Nota: Lembramos que um iframe é um frame que se pode inserir no corpo de uma página, atribuindo uma altura e uma largura.

Primeiramente, gostaria que se entendesse bem o problema com o qual me encontro, ao não saber que área há disponível na página para cada usuário que nos visita. Vejamos esta imagem, que nos pode esclarecer rapidamente o caso no qual nos encontramos.

Imaginemos uma definição de 800 x 600. Então, o espaço para o iframe será o

tamanho útil onde se visualiza a página, menos o espaço reservado para o

cabeçalho. Agora, por exemplo, em uma definição de 1280 x 768, como o

espaço útil para a página é maior, o espaço no qual quero que se veja meu

http://www.feeddigest.com/

http://www.criarweb.com/artigos/fazer-frame-se-ajuste-altura-janela-javascript.html



iframe também será maior. Continua sendo o tamanho útil onde se visualiza a

página, menos o espaço reservado para o cabeçalho, porém como agora o

espaço útil é maior, o iframe também tem que se apresentar com maior

tamanho.

A solução passa por utilizar um Javascript para calcular o espaço útil da página

e diminuir o espaço do cabeçalho. Então, teremos a dimensão altura que tem

que ter o iframe.

Para calcular este dado temos que ter em conta que Internet Explorer e Firefox

têm modos distintos. Ou seja, a propriedade espaço útil da página é distinta

nestes dois browsers, por isso o script pode complicar um pouco.

Em Internet Explorer: o espaço útil se calcula com a propriedade

document.body.clientHeight.

Em Mozilla Firefox: o espaço útil nos devolve a propriedade

window.innerHeight

Com este script podemos calcular o tamanho que devemos reservar ao iframe:

if (window.innerHeight){

//navegadores baseados em mozilla

espaco_iframe = window.innerHeight - 110

}else{

if (document.body.clientHeight){

//Navegadores baseados em IExplorer, pois nao tenho innerheight

espaco_iframe = document.body.clientHeight - 110

}else{

//outros navegadores

espaco_iframe = 478

}

}

O primeiro if serve para os navegadores Firefox, Netscape e similares, que têm

a propriedade window.innerHeight

O segundo if é para IExplorer que conhece document.body.clientHeight.

Nos dois casos temos que diminuir 110, que é o espaço que ocupa o

cabeçalho. O último if é no caso de que o javascript não entenda nenhuma das

duas propriedades, para lhe dar um valor padrão.

Logo, escreveríamos mediante javascript a etiqueta iframe com os dados



obtidos previamente:

document.write ('<iframe frameborder="0" src="minhapagina.html" width="770"

height="' + espaco_iframe + '">')

document.write ('</iframe>')

E o que aconteceria se os navegadores não entenderem Javascript, ou

estiverem desabilitado?

Nesse caso nos convém utilizar a etiqueta noscript, para mostrar um iframe

com os valores por padrão (noscript só se tem em conte se não houver suporte

para javascript):

< noscript>

< iframe frameborder="0" src="minhapagina.html" width="770" height=478>

< /iframe>

< /noscript>

O código completo seria o seguinte:

< script>

if (window.innerHeight){

//navegadores baseados em mozilla

espaco_iframe = window.innerHeight - 110

}else{

if (document.body.clientHeight){

//Navegadores baseados em IExplorer, pois nao tenho innerheight

espaco_iframe = document.body.clientHeight - 110

}else{

//outros navegadores

espaco_iframe = 478

}

}

document.write ('<iframe frameborder="0" src="minhapagina.html" width="770"

height="' + espaco_iframe + '">')

document.write ('</iframe>')

< /script>

< noscript>

< iframe frameborder="0" src="minhapagina.html" width="770" height=478>

< /iframe>

< /noscript>

É vantajoso o uso de ParseInt para validar números?

A utilização do parseInt para validar números em muitos casos não é a solução mais efetiva, devido a que permite a presença de letras e/ou

espaços, e o resultado poderia não ser o esperado.

Por José Antonio Jiménez Garelli



A utilização do parseInt para validar números em muitos casos não costuma ser a solução mais efetiva, devido a que permite a presença de letras e/ou espaços, e o resultado poderia não ser o esperado. Por que parseInt pode causar problemas? Esta pergunta se responde a si mesma vendo vários exemplos sobre o funcionamento de parseInt:

"123456": este String retorna como resultado o número 123456 o qual é o resultado esperado.

"123456asd": este String retorna como resultado o número 123456 apesar de que o String continha letras (vantagem ou desvantagem?).

"asd": este String retorna como resultado NaN o qual é o resultado esperado.

"": este String vazio retorna como resultado NaN o qual é o resultado esperado.

" 123456asd": este String (que contém vários espaços no início do número e letras no final) retorna como resultado o número 123456 (vantagem ou desvantagem?).

" 123 123 asd" este String (que contém espaços e letras) retorna como resultado o número 123 (vantagem ou desvantagem?).

Como se pode observar, parseInt apresenta o seguinte comportamento:

1. Retornará um número válido si: O String começa por um número. 2. O String começa por espaço(s) seguido de um número.

o Exemplos de números válidos: "123456" o " 123456" o "12345asdasd" o " 12345 asdd"

3. Todo String que cumpra com as 2 regas anteriores (ser um número válido), será truncado: quando se encontre uma letra, espaço ou caracteres especiais (vírgulas, acentos,...) dentro do String. Como resultado, retornará os dígitos que estejam mais à esquerda da primeira letra (espaço ou caractere) encontrada.

o Exemplos de números válidos truncados: "123456" retorna como resultado 123456

http://www.criarweb.com/artigos/parseint-vantajoso-para-validar-numeros.html





o " 123456" retorna como resultado 123456 o "12345asdasd" retorna como resultado 12345 o " 123.. asdd" retorna como resultado 123

Uma alternativa ao parseInt, que valida que os String contenham só números está a seguir: function validarNumero(c_numero) { //checar a longitude de c_numero: // Si (c_numero.length é igual a Zero) quer dizer que c_numero é uma cadeia Vazia. // Se (c_numero.length é diferente(maior) de Zero) podemos assegurar que c_numero contém pelo menos uma letra //a qual se pode fazer a validação if (c_numero.length == 0) { return "NaN"; } else { //Percorre-se c_numero por todos seus caracteres checando que todos sejam dígitos //a condição >="0" e <="9" é baseada no valor ascii que têm os números na tabela ascii. //Se algum dos caracteres não for um número a função retornará um NaN //Senão retornará o Número for (i = 0; i < c_numero.length; i++) { if (!((c_numero.charAt(i) >= "0") && (c_numero.charAt(i) <= "9"))) return "NaN"; } return c_numero; } } Exemplos de validação de números

utilizando a função ParseInt:

Resultado de aplicar a função:

utilizando a função validarNumero (chamando à função validar):


utilizando a função validarNumero (chamando à função validarComplexo):


Efeito para desabilitar/habilitar o fundo da Página Neste artigo explico como criar um efeito para fazer com que se mostre

uma janela emergente e que o fundo da página fique desativado.

Por José Antonio Jiménez Garelli



Bom, não é uma janela emergente como tal, é mais como um simulacro, porém que faz às vezes de janela emergente e sem perigo de que o navegador bloqueie tal janela. É necessário ter conhecimentos (pelo menos básicos) de:

HTML - podem ver a sessão de HTML de CriarWeb clicando Aqui. CSS - podem ver a sessão de CSS de CriarWeb clicando Aqui. JavaScript - podem ver a sessão de JavaScript de CriarWeb clicando

Aqui. Para o exemplo deste artigo iremos utilizar imagens transparentes com

diferentes níveis de opacidade, pelo qual é necessário que saiba utilizar um editor de imagens (photoshop, firework, ...) para criar as imagens transparentes ao seu gosto. No caso de que não tenha um editor de imagens, você pode utilizar as do exemplo sem nenhum problema.

Pode-se ver o exemplo em funcionamento Aqui, assim terá uma idéia mais clara do que vamos fazer. Todo o artigo se baseia na explicação do exemplo. O exemplo foi comprovado no Internet Explorer versão 6 e 7, e no Mozilla FireFox 2, e todos com resultados positivos. Explicação do Exemplo: Finalmente a parte boa deste artigo!!


http://www.criarweb.com/artigos/efeito-para-desabilitar-habilitar-fundo-pagina.html

http://www.criarweb.com/html/

http://www.criarweb.com/css/



http://www.criarweb.com/artigos/exemplos/javascript/ejemplo/ejemplo.html


A grosso modo, o corpo principal (body) do arquivo Html do exemplo, está composto por 3 parágrafos os quais têm a finalidade de encher a página, conseguindo assim que se veja carregada de informação. Ao final de cada parágrafo há um link o qual é o encarregado de mostrar a janela emergente através de código feito em JavaScript . Esta é a única diferença significativa entre os 3 parágrafos (a chamada à função JavaScript). O código do primeiro parágrafo é o seguinte: <p> Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> <a href="javascript:abrirJanela('1');">Simulacro de janela Emergente 1</a> <p> Uma vez que tiver visto os 3 parágrafos no código do exemplo, o que verá a seguir são 4 camadas (div) chamadas camadaJanela, camadaFundo1, camadaFundo2 e camadaFundo3. Apliquei a estas camadas código CSS e à princípio todas estão ocultas. A camada camadaJanela é a mais complexa de todas e é porque nela está o código do que chamei "janela emergente". O código é mais simples do que parece: Usei uma tabela principal para projetar uma "janelinha de informação" exata às do sistema operacional Windows XP, onde atribui a cada célula uma imagem, e na célula central, fiz outra tabela onde coloquei a mensagem da janelinha e o botão de Aceitar. As outras camadas não têm absolutamente nada. Mais adiante veremos porque. Com isto finalizo o que seria a explicação do corpo do Html. Antes de explicar os códigos que fiz em JavaScript, é importante conjecer a arquitetura da página, ou seja, a forma em que diagramei a página para conseguir o efeito desejado:


Usando CSS se pode dar um nível de profundidade às camadas. Isto é o que

fiz!!! Apliquei o atributo z-index para colocar camadas em cima de outras. A

camada que tiver um maior valor numérico para o atributo z-index, é a que se

verá mais por cima de todas e as demais ficarão por baixo de acordo com o

atributo z-index. Para o exemplo deste artigo, o corpo principal da página tem

um z-index = 1, enquanto que as camadas chamadas camadaFundo1,

camadaFundo2 e camadaFundo3 lhes atribui um valor de 2. À camada

camadaJanela lhe atribui 3 porque é a que quero que fique por cima de todas

as demais. Como disse anteriormente, todas as camadas inicialmente estão

oculta (utiliza-se o atributo visibility com o valor hidden) e a idéia é aplicar

JavaScript para mostrar tais camadas.

Nas 3 camadas centrais (camadaFundo1, ...fundo3), é onde radica o truque de

que o corpo principal da janela fique desativado quando se mostre a janela

emergente. Utilizando CSS faço com que estas camadas tenham o máximo de

largura (width) que possam ter e uma altura (heigth) que coloquei a minha

conveniência, de modo que cobrem todo o corpo principal. As camadas

centrais se diferenciam pelas imagens que nelas se mostram. Todas têm

imagens transparente com opacidades de 40%, 50% e 60% e diferentes filtros

de transparência. Ao usar imagens com tendência (opacidade) ao transparente

sobre o fundo da camada, a camada permite que se veja o que há por debaixo

dela, neste caso, o corpo principal da página. É importante destacar, que se

colocam uma imagem 100% transparente será equivalente a não colocar

imagem, e o fundo se verá normal. A idéia é colocar uma imagem que não seja

totalmente transparente, de modo que se veja a cor da imagem e conseguir

assim que o fundo pareça inativo.

Há 2 funções JavaScript, as quais mostram e ocultam as camadas. O código

da função que mostra as camadas é o seguinte:

function abrirJanela(janela)

{

if (janela=="1")

{

document.getElementById("camadaFundo1").style.visibility="visible";

document.getElementById("camadaFundo2").style.visibility="hidden";


}

else if (janela=="2")

{




}

else

{




}

document.getElementById("camadaJanela").style.visibility="visible";

document.formulario.bAceitar.focus();

}

Esta é a função que se executa cada vez que se clica em qualquer dos 3 links.

Ao clicar no link localizado no primeiro parágrafo, este chama à função e lhe

passa como parâmetro o número um (1), o qual indica o número do parágrafo.

Ao clicar nos outros dois links, se passará como parâmetro 2 e 3 de acordo ao

parágrafo. Dentro da função se obtém os estilos de cada camada e se utiliza a

propriedade visibility para mostrar ou ocultar segundo seja o caso. Dentro desta

função se dá o foco ao botão Aceitar.

Uma vez que se mostre a janelinha emergente, esta se pode tirar (ocultar)

pressionando sobre o botão Aceitar ou sobre a X. Isto fará um chamado à

função JavaScript respectiva:

function fecharJanela()

{




document.getElementById("camadaJanela").style.visibility="hidden";

document.formulario.bAceitar.blur();

}

Esta função se explica por si mesma. Oculta todas as camadas e tira o foco ao

botão Aceitar da janelinha. Com isto finalizo a explicação do artigo. Espero que

lhe sirva e possa aplicá-lo em suas criações.

Pode-se ver o resultado final deste script em uma página à parte.

Validar número de checkbox marcados com Javascript Um script em Javascript para validar campos de verificação de formulários, para se assegurar que foi marcado um número máximo de checkbox.

Por Javier Bernal Lérida



Deixarei aqui umas linhas de minha própria criação de um script Javascript que tive que fazer para comprovar o estado de elementos checkbox ou campos de verificação de formulários. Trata-se de utilizar os típicos campos de verificação, porém com um limitador de grupo. Pode-se utilizar em loterias de vários resultados, nos futuros testes das auto-escolas com a possibilidade de marcar várias respostas, etc. Temos uma série de grupos de checkbox e o que queremos fazer é nos assegurar que em cada grupo, de maneira independente, não se tenha marcado mais de um número definido de campos. Por exemplo, temos x grupos de 3 campos de verificação cada um. Se o usuário marca um campo de checkbox de um dos grupos não há problema algum. Se marca 2 campos tampouco há problemas, mas se tenta marcar os três checkbox do grupo Javascript não o permite e mostra uma mensagem de erro. Podemos ver o exemplo em funcionamento para termos uma idéia mais concreta. Formulário HTML Vamos ter um formulário com, neste caso, dois grupos de campos de verificação.

< table width="76">

<td width='20' valign='top'><input type='checkbox'

onclick='validar(formulario.checkbox1,0)' name='checkbox1'

value='checkbox1'></td>



http://www.criarweb.com/artigos/exemplos/javascript/ejemplo/ejemplo.html


http://www.criarweb.com/artigos/validar-numero-de-checkbox-marcados-com-javascript.html


http://www.criarweb.com/artigos/exemplos/javascript/ejemplo-verificar-num-chekbox.html






< tr>










< /tr>

</table>

< /form>

Como podemos ver, o nome de cada campo é distinto. E ademais temos uma

função que se executa quando se clica sobre o checkbox (evento onclick), que

será a encarregada de realizar a verificação.

Função para verificar checkbox por grupos

Vejamos o código Javascript que utilizamos para realizar a comprovação de

que vários checkbox não possam estar clicados ao mesmo tempo no mesmo

grupo.

Primeiro, definimos um par de variáveis globais, que utilizaremos para definir

os campos máximos que podem estar marcados ao mesmo tempo, e outra

para levar a conta dos campos que há marcados em cada grupo.

//Número máximo de campos marcados por cada fila

var maxi=2;

//O contador é um array de forma que cada posição do array é uma linha do

formulário

var contador=new Array(0,0);

Agora a função que realizará a conta de campos e informará de uma possível

falha na comprovação, se se clicam mais que os que se deve.

function validar(check,grupo) {

//Comprovo se o campo está marcado

if (check.checked==true){

//está marcado, então aumento em um o contador do grupo

contador[grupo]++;

//comprovo se o contador chegou ao máximo permitido

if (contador[grupo]>maxi) {

//se tiver chegado ao máximo, mostro mensagem de erro

alert('Não se pode escolher mais de '+maxi+' campos ao mesmo tempo.');

//desmarco o campo, porque não se pode permitir marcar

check.checked=false;

//diminuo uma unidade ao contador de grupo, porque desmarquei um campo

contador[grupo]--;

}

}else {

//se o campo não estiver marcado, diminuo um ao contador de grupo

contador[grupo]--;

}

}

A função recebe dois parâmetros. Primeiro, o campo de formulário checkbox

que se clicou. Logo, o número de grupo ao que pertence esse checkbox.

Necessita-se o checkbox para conhecer seu estado e para mudá-lo caso seja

necessário. O grupo o utiliza para saber a que contador deve se referir, para

saber o número de campos que há clicados nesse grupo.

A função está comentada para facilitar sua leitura e compreensão.

O exemplo em funcionamento pode-se executar em uma janela à parte.

Evitar que um textarea supere um número de caracteres permitidos Fazemos um script Javascript para controlar que um textarea de um formulário tenha mais caracteres dos que os permitidos. Ou seja, que se permita escrever em um textarea até que se alcance uma longitude do

texto dada.




Este script de Javascript é bastante utilizado em muitos web sites. Trata-se de controlar o tamanho do texto que se escreve em um textarea para evitar que os caracteres escritos superem os permitidos. O controle dos caracteres escritos

http://www.criarweb.com/artigos/exemplos/javascript/ejemplo-verificar-num-chekbox.html


http://www.criarweb.com/artigos/evitar-que-textarea-supere-numeros-caracteres-permitidos.html

se faz com Javascript, dinamicamente no lado do cliente, de modo que quando o usuário chega à longitude permitida, não se permite escrever mais conteúdo no campo textarea. Vejamos o exemplo em funcionamento para termos uma idéia exata do objetivo deste artigo. O exemplo é simples. Simplesmente vamos definir um número de caracteres permitidos. Com cada letra que escreva o usuário vamos comprovar se a quantidade de caracteres que há no textarea é permitida.

Se for permitida, não fazemos nada. Se não for permitida, caso estivermos passando o número de caracteres

que pode conter o textarea, não se deixa escrever mais no campo do formulário. Isso o conseguiremos colocando o texto que havia antes que se escrevesse esse caractere não permitido.

Adicionalmente, vamos levar a conta dos caracteres escritos em um campo de texto, para que o usuário possa visualizar os caracteres que levam escritos. Ademais, quando se chegue ao limite de caracteres permitidos se colocará em vermelho o campo de texto que conta os caracteres do textarea. Este exercício está realizado a partir de outro exercício que publicamos anteriormente em CriarWeb.com, que seria bom ler: Contar caracteres escritos em um textarea O exercício tem duas partes, o script Javascript e o formulário HTML. Comecemos vendo o formulário:

< table>

< tr>

<td>Texto:</td>

<td><textarea cols="40" rows="5" name="texto"

onKeyDown="valida_longitude()"

onKeyUp="valida_longitude()"></textarea></td>

< /tr>

< tr>

<td>Caracteres:</td>

<td><input type="text" name=caracteres size=4></td>

< /tr>

< /table>

< /form>

Não tem nenhuma complicação. Porém, há que prestar atenção aos eventos

http://www.criarweb.com/artigos/exemplos/tallerjs/sobrepasar_caracteres_textarea.html





do textarea, que são onKeyDown e onKeyUp, que se desatam quando o

usuário aperta ou solta teclas do teclado. Em ambos eventos se chama à

função javascript valida_longitude(), que se encarregará de fazer todo o

trabalho.

Vejamos agora o Javascript:

< script>

conteudo_textarea = ""

num_caracteres_permitidos = 10

function valida_longitude(){

num_caracteres = document.forms[0].texto.value.length

if (num_caracteres > num_caracteres_permitidos){

document.forms[0].texto.value = conteudo_textarea

}else{

conteudo_textarea = document.forms[0].texto.value

}

if (num_caracteres >= num_caracteres_permitidos){

document.forms[0].caracteres.style.color="#ff0000";

}else{

document.forms[0].caracteres.style.color="#000000";

}

conta()

}

function conta(){

document.forms[0].caracteres.value=document.forms[0].texto.value.length

}

< /script>

Primeiro se definem duas variáveis:

conteudo_textarea = ""

num_caracteres_permitidos = 10

A variável conteúdo_textarea armazena o conteúdo do campo textarea. À

princípio está iniciada à cadeia vazia, porque o textarea supomos que está

vazio.

Temos também uma variável num_caracteres_permitidos, que armazena o

número de caracteres que se permite escrever no textarea. Neste caso o

definimos como 10.

Agora colocamos a função valida_longitud(). O primeiro que fazemos é

averiguar a quantidade de caracteres escritos, e o armazenamos na variável

num_caracteres.

num_caracteres = document.forms[0].texto.value.length

Logo fazemos a parte mais importante deste script: Vemos se os caracteres

escritos são menores ou iguais que os permitidos, para agir em conseqüência.

if (num_caracteres <= num_caracteres_permitidos){

contenido_textarea = document.forms[0].texto.value

}else{

document.forms[0].texto.value = conteudo_textarea

}

Se os caracteres escritos são menores ou iguais que os caracteres permitidos,

então está tudo bem. O que fazemos é atualizar a variável que mantém o

conteúdo do textarea, conteudo_textarea, introduzindo o que há no textarea

atualmente, que é de um tamanho permitido.

Se o escrito no textarea for maior que o permitido, trata-se de uma situação

que não se pode aprovar. Então, simplesmente escrevemos no textarea o que

há na variável conteudo_textarea, que era o que havia antes e que estava

validado em longitude corretamente.

Isso é tudo, é simples! Porém, agora vamos fazer uma pequena melhora para

que quando o textarea chegue à longitude máxima permitida o campo de texto

que leva a conta dos caracteres se coloque de cor vermelha.

if (num_caracteres >= num_caracteres_permitidos){

document.forms[0].caracteres.style.color="#ff0000";

}else{

document.forms[0].caracteres.style.color="#000000";

}

Como se pode ver, simplesmente se comprova de novo se o número de

caracteres é maior ou igual que os permitidos. Então, sendo assim, se atualiza

a propriedade style.color do campo de texto "caracteres", que mostra o número

de caracteres escritos. Com style.color se pode modificar a propriedade de

estilo CSS que define a cor do texto do campo. Se houvesse chegado aos

caracteres permitidos, se colocaria cor vermelha, caso contrário, se colocaria

cor preta.

Por último, fazemos uma chamada à função conta(), que já havíamos criado no

artigo anterior:

function conta(){

document.forms[0].caracteres.value=document.forms[0].texto.value.length

}

Esta função simplesmente atualiza o campo de texto, colocando o número de

caracteres escritos no textarea.

Podemos ver de novo o exemplo em funcionamento.

Javascript não intrusivo Behaviour, é uma imprescindível biblioteca que nos permite programar com javascript de maneira mais simples.

Por Alex Sancho



Uma das premissas mais importantes pensadas ao desenhar mediante o uso

de padrões é a separação de camadas lógicas, ou seja, por um lado temos o

projetado, que se representa mediante linguagem (x)html, por outro lado está o

desenho visual, que normalmente se anexa mediantes folhas de estilo (css) até

aqui tudo está muito claro.

Porém, o que ocorre com o comportamento que se quer atribuir a alguns

objetos do documento, aqui é onde entra em jogo a linguagem JavaScript.

Imaginemos por exemplo que temos um link ao que queremos dar uma

funcionalidade um pouco diferente ao resto, abri-lo em uma janela nova por

exemplo, na maioria das vezes o primeiro que nos vem em mente é fazer algo

mais ou menos similar ao seguinte:

< a href="popup.html" onclick="window.open('popup.html',

'width=400,height=450,resizable=yes')">Abrir popup</a>

Lamentavelmente, esta linha acaba com toda nossa teoria de separação de

camadas, mas felizmente, existem maneiras alternativas para atribuir eventos

usando JavaScript. No caso concreto deste exemplo uma maneira mais limpa

de realizar o mesmo necessitava algo mais de código para poder se realizar.

http://www.criarweb.com/artigos/exemplos/tallerjs/sobrepasar_caracteres_textarea.html


http://www.criarweb.com/artigos/javascript-nao-intrusivo.html



Primeiro, teremos que atribuir uma identidade única ao link, e logo mediante o

DOMDocument Object Model atribuiremos o evento a tal id, algo mais ou

menos assim.

< a href="popup.html" id="mypopup">Abrir popup</a>

< script type="text/javascript">

var x = getElementByID('mypopup');

x.onclick = function() {

window.open('popup.html', 'width=400,height=450,resizable=yes')

}

< /script>

Simples, não é? Bom, talvez não seja tão seja tão simples, porém graças a

mentes inquietas como a de Ben Nolan, dispomos de algumas ferramentas que

sim que fazem com que seja uma tarefa simples.

Refiro-me a behaviour, uma biblioteca JavaScript baseada na função

document.getElementsBySelector escrita por Simon Willison. Este fantástico

"pedaço de código" nos permite esquecermos de programar complexas

funções que atribuem eventos segundo classe, id ou selector.

Continuando com o exemplo anterior, se incluirmos esta biblioteca podemos

conseguir o mesmo efeito atribuindo a função diretamente ao id selecionado.

< script type="text/javascript">

var myrules = {

'#mypopup' : function(element){

element.onclick = function(){

window.open('popup.html', 'width=400,height=450,resizable=yes')

}

}

http://bennolan.com/

http://bennolan.com/behaviour/

http://simon.incutio.com/


};

Behaviour.register(myrules);

< /script>

Pessoalmente, acho que é uma biblioteca de imensa utilidade, agora só falta

ver como poder tirar proveito dela da melhor forma possível.

Controle de introdução de caracteres de um campo de texto com Javascript Podemos impedir com Javascript que os caracteres que o usuário tecle em um campo de texto de um formulário apareçam.

Por Ismael Zori



Isto pode ser útil para campos que só admite números ou letras.

Por exemplo, vamos fazer que em um campo de texto de um formulário só se

permitam colocar números decimais do tipo 9999.99:

Precisamos de uma função em JavaScript (por exemplo):

function fieldNumber (objeto)

{

var valorCampo;

var evento_key = window.event.keyCode;

var numPosPonto = 0;

var strParteInteira = "";

var strParteDecimal = "";

var NUM_DECIMAIS = 2;

switch (evento_key)

{

case 48:

case 49:

case 50:

case 51:

case 52:

http://www.criarweb.com/artigos/controle-introducao-de-caracteres-de-campo-texto-javascript.html



case 53:

case 54:

case 55:

case 56:

case 57:

case 46:

break;

default:

window.event.keyCode = 0;

return false;

}

valorCampo = objeto.value;

if (evento_key == 46)

if (valorCampo.indexOf(".") != -1)

{


return false;

}

/* Só pode teclar o número de decimais indicado em NUM_DECIMAIS */

if ((numPosPonto = valorCampo.indexOf(".")) != -1)

{

strParteInteira = valorCampo.substr(0,(numPosPonto - 1));

strParteDecimal = valorCampo.substr((numPosPonto + 1), valorCampo.length)

if (strParteDecimal.length > (NUM_DECIMAIS - 1))

{


return false;

}

}

return true;

}

Teremos uma página com o formulário e a caixa de texto. Teremos que chamar

à função "fieldNumber" no evento onkeypress:

< input type="text" name="txtImporte" onkeypress="fieldNumber(this)">

Listagem de diferentes Framework Javascript Os Framework Javascript e Ajax mais conhecidos, utilizados para webs 2.0.






Estou fazendo uma pesquisa sobre Frameworks Javascript e Ajax para escolher um deles e utilizá-lo em nossos projetos. À princípio vi que na web há uma infinidade de opções, algumas com muito boa pinta. Parece que o mundo dos framework para Javascript está se popularizando muito, a julgar pelas numerosas opções. Nós até agora para fazer Javascript Cross-browser (compatível com todos os navegadores) vimos utilizando umas bibliotecas que explicamos no manual Cross Browser Javascript DHTML. Por outro lado, para trabalhar com Ajax e PHP vimos utilizando as bibliotecas Xajax, que detalharemos em breve em outro manual. Porém claro, com um Framework de Javascript talvez "matamos dois coelhos com uma cajadada só" e nos facilita muito a criação de interfaces de usuário avançadas em Javascript, necessárias para fazer projetos da web 2.0. Para começar estou fazendo uma listagem das diferentes opções que encontrei. Logo, pesquisarei mais a fundo os framework que vi que estão tendo mais aceitação pela comunidade de desenvolvedores e os provarei. Então, escreverei artigos mais técnicos e didáticos. Então, para não demorar mais, aqui vai a listagem de Frameworks Javascript: Mootools: "O framework javascript compacto" Este produto tem boa pinta. Segundo parece é simples e bem planificado. Entre as virtudes que vi mais destacadas é que é ligeiro, podendo inclusive definir que partes do framework incluir e quais não, para que se carreguem os scripts mais rápido no cliente. Muitas pessoas me falaram muito positivamente deste framework, portanto, talvez seja pelo qual comece a pesquisa detalhada. http://mootools.net/ JQuery: "Biblioteca Javascript para escrever menos e fazer mais" Parece ser que este é um dos frameworks com mais aceitação, por estar muito bem documentado e por ser muito simples e permitir desenvolver com um código limpo e elegante. O peso das bibliotecas é razoável e alem disso tem muitos fãs incondicionais, com o qual não cabe dúvida que será um bom projeto. http://jquery.com/ Prototype: "O framework javascript cujo propósito é facilitar o desenvolvimento de aplicações dinâmicas" Este framework também é muito interessante, pois há muitos usuários que o utilizam habitualmente e com êxito. Parece uma opção altamente profissional e ademais tem a garantia que o utilizam para a criação de suas webs empresas muito conhecidas a nível mundial. Para mim oferece muitas garantias, porém há certos detratores que acusam a este framework de ser muito pesado e de tornar os web sites lentos onde se utiliza.


http://mootools.net/

http://www.criarweb.com/artigos/listagem-de-diferentes-frameworks-javascript.html

http://jquery.com/


http://www.prototypejs.org/ YUI: "The Yahoo! User Interface Library" É um framework que utilizam os desenvolvedores de Yahoo! para fazer seu portal, que há tempo se distribuiu para uso livre. Que provenha de Yahoo! para mim já é uma importante garantia e parece que tem desenvolvidos uma importante gama de controles e componentes. Teria que prová-lo pessoalmente para dar uma opinião, porém parece que há muitas pessoas que também o acusam de ser um pouco pesado. http://developer.yahoo.com/yui/ Dojo: "Experiências grandes… para todos" Parece um produto também bastante atraente e uma opção séria. Não obstante, li opiniões discordantes sobre ele. Alguns não duvidam em qualificá-lo entre os melhores frameworks Javascript e outros acusam que é pesado e pouco depurado, que produz erros facilmente. http://www.dojotoolkit.org/ Qooxdoo: "A nova era do desenvolvimento web" É um framework Javascript ajax multi-propósito, opensource com dois tipos de licença. Li poucas opiniões sobre este software, porém parece digno de considerar. http://qooxdoo.org/ GWT Google Web Toolkit: "Constrói aplicações Ajax em linguagem Java" É um conjunto framework opensource desenvolvido em Java, com o qual se criaram aplicações populares de Google, como Google Maps ou Gmail. Sem dúvida, ao se tratar de um produto de Google, não cabe dúvida que é uma opção a considerar seriamente. Tem um compilador que converte as classes Java em código Javascript e HTML compatível com todos os navegadores. http://code.google.com/webtoolkit/ Rico: "Javascript para aplicações de Internet de conteúdo enriquecido" Outra das opções mais conhecidas para desenvolver aplicações para a web 2.0. É open source e já se encontra na versão 2.0, com o qual se supõe que o tempo de vida lhe ajudou a ser mais depurado. Li por aí que está pouco documentado. http://openrico.org/rico/home.page Ext JS: "Documentação, desenho e código limpo" Este framework Javascript parece ser outra das opções sérias. Distribui-se sob

licença Open Source (grátis) e licença comercial (paga, mas com suporte e alguma funcionalidade adicional). Empresas bastante importantes o utilizam, como Adobe. Chama a atenção por ter suporte para Adobe Air. http://extjs.com/ Ainda faltam mais opções, porém vou deixá-las listadas sem muitos comentários, porque tampouco investiguei muito e não as vi em nenhum lugar comentadas como opções de primeira linha.

http://www.prototypejs.org/


http://developer.yahoo.com/yui/

http://www.dojotoolkit.org/

http://qooxdoo.org/


http://code.google.com/webtoolkit/

http://openrico.org/rico/home.page

http://extjs.com/

The Foo Framework (um framework baseado em Prototype): http://foo.riiv.net/

script.aculo.us (também baseado em Prototype): http://script.aculo.us/ AJS (Framework Javascript ultraligeiro): http://orangoo.com/labs/AJS/ ZK (Ajax web framework): http://www.zkoss.org/

Isto é tudo para o momento. Agora resta começar a trabalhar para aprender a

manejar os Frameworks e tirar conclusões mais sérias. Espero que em breve

possamos publicar mais sobre o tema.

Script para detecção de suporte a Ajax, Cookies e ActiveX Uns scripts do lado do cliente para saber se seu navegador é compatível com Ajax, Cookies e ActiveX.




O site de Xajax Project publicou uns scripts interessantes para poder detectar

se um navegador é compatível com a tecnologia Ajax, para estar seguros que a

web que estamos desenvolvendo poderá mostrar corretamente em qualquer

cliente web que tenha o usuário. Ademais, estes scripts servem para mostrar

mensagens de erro se o navegador não tem suporte a Ajax, de modo que o

usuário seja consciente que não vai poder ver essa web convenientemente.

Estes scripts detectam as capacidades do navegador e se podem executar

para mostrar mensagens de alerta se não estão disponíveis certas

funcionalidades, já seja porque o navegador do usuário não as suporte ou

porque estejam desabilitadas.

O script contém três funções:

browserSupportsCookies()

Detecta se o navegador suporta cookies e devolve true no caso de que estejam

suportadas e false se não for assim.

browserSupportsAjax()

Comprova se o navegador tem compatibilidade com a tecnologia Ajax, devolve

true se for assim e false se não suporta Ajax por qualquer questão.

ActiveXEnabledOrUnnecessary()

Esta função detecta se o navegador suporta ActiveX ou então se ActiveX é

http://foo.riiv.net/

http://script.aculo.us/

http://orangoo.com/labs/AJS/

http://www.zkoss.org/

http://www.criarweb.com/artigos/script-para-deteccao-suporte-ajax-cookies-activex.html





desnecessário para a execução de Ajax. No navegador Internet Explorer 6 Ajax

se executa através de ActiveX, por isso necessita dispor ActiveX para que tudo

funcione. Portanto, esta função devolverá false só se o navegador for Internet

Explorer 6 e tiver desabilitado ActiveX.

Não escreverei as funções no texto deste artigo, simplesmente vou colocar um

link ao lugar onde se mostram as funções na página de Xajax Project:

http://xajaxproject.org/wiki/Xajax_%28any%29:_Tips_and_Tricks:_Detecting_S

upport

Porém, também deixarei um link a uma página em CriarWeb.com onde

implementamos estes scripts, para que se possa ver em funcionamento em

seus navegadores. Ainda assim, pode-se ver o código fonte da página para ver

a implementação dos scripts que fizemos em CriarWeb.com e obter o código

das funções no caso que mudem a URL na página de Xajax.

Leitor RSS com Javascript Como ler mediante Javascript um feed RSS para publicar os títulos em seu site. Leitor RSS Javascript.




Estive pesquisando em diferentes sites a maneira de criar sistema em

Javascript que leia RSS de outras webs, para publicar os títulos em uma

página. Finalmente, encontrei um script leitor de RSS que irei comentar neste

artigo.

O sistema permite ler uma folha XML que contém um feed RSS e escreve as

entradas do RSS na página. No conteúdo da página não figura o RSS, e sim

que está em um arquivo externo e com o script se escreve o texto das distintas

entradas, com seus links e outras informações.

O script se encontra publicado na página

http://www.cstruter.com/downloads.php

Eu o baixei e coloquei no servidor de CriarWeb.com, no caso de que o tirem da

web onde obtive (como já nos passou com outros scripts que comentamos

neste site). Pode-se baixá-lo com este link. Não obstante, recomendo entrar na

página onde foi obtido, no caso de que publiquem versões novas.

http://xajaxproject.org/wiki/Xajax_%28any%29:_Tips_and_Tricks:_Detecting_Support

http://xajaxproject.org/wiki/Xajax_%28any%29:_Tips_and_Tricks:_Detecting_Support

http://www.criarweb.com/artigos/leitor-rss-com-javascript.html



http://www.cstruter.com/downloads.php

http://www.criarweb.com/descargas-lectores/jsrss.zip

Condicionantes para o uso do leitor RSS com Javascript

Antes de continuar explicando o funcionamento há que dizer que existe uma

restrição de uso deste script, que é importante porque em Firefox não

funcionará. Trata-se de que Firefox, como medida de segurança, não permite

ler o conteúdo de outras webs. Como o RSS com os títulos se pegam de

outras, pois em Firefox teremos problemas, porque não irá permitir sua leitura e

a apresentação dos títulos na página. Este problema o Internet Explorer não

tem, porém mesmo assim teremos que buscar outras soluções.

A solução mais simples seria a de publicar o RSS em nosso servidor. Ou seja,

baixá-lo da web desejada e subi-lo por FTP ao nosso site. Claro que isto nos

obrigaria a realizar uma operação manual cada vez que quiséssemos que os

títulos se atualizassem e isso pode significar perder uma das vantagens de

apresentar titulares RSS de outras webs, que é dispor sempre de conteúdo

atualizado. Ademais, seria uma pouco cansativa a tarefa de baixar o feed RSS

e subir todos os dias o arquivo XML a nossa web.

A melhor solução seria criar um script em programação do lado do servidor,

como por exemplo PHP, ASP ou .NET que realize a tarefa de baixar o RSS

com os títulos e o copie em nosso servidor. Este script poderia ser executado a

cada certo tempo ou cada vez que um usuário acessasse à página onde se lê o

RSS remoto para apresentar os títulos. A desvantagem desta opção é que

necessitamos que nosso servidor suporte programação de scripts em PHP,

ASP ou similares. À parte que se fizermos programação do lado do servidor

para extrair o feed RSS poderíamos diretamente tratá-lo para apresentar os

dados na página, sem a necessidade deste script Javascript. Não obstante,

cabe assinalar que em CriarWeb.com, nas seções monotemáticas de PHP ou

ASP temos materiais para aprender a ler um arquivo remoto, que esteja em

outro servidor.

Uso do leitor RSS Javascript

O script é extremadamente simples de utilizar, já que toda a parte complicada

se faz por si mesmo. Simplesmente temos que especificar em uma linha de

código o arquivo RSS do que tem que extrair os títulos.

Do arquivo de download, simplesmente temos que mudar a seguinte linha:

ReadRSS('cnn_tech_rss.xml','rssBodyTemplate','rssTitleTemplate');

A função ReadRSS(), que é o leitor RSS, no primeiro parâmetro tem o nome do

arquivo RSS que deve ler. Nós podemos mudá-lo pelo nome do arquivo que



pretendemos mostrar seus títulos.

Poderíamos mudar este arquivo pela URL completa do feed RSS do servidor

onde o têm publicado. Por exemplo, para ler o RSS com as novidades de FAQ

que publicamos em CriarWeb.com a função se chamaria assim:

ReadRSS('http://www.criarweb.com/rss/faq_rss.php','rssBodyTemplate','rssTitle

Template');

Em Internet Explorer não há nenhum problema com este uso da função,

simplesmente veremos que os títulos demoram um pouco mais em se gerar,

devido a que tem que conectar com a página remota para baixar o RSS.

Porém, poderemos comprovar que a função, quando se executa em Firefox,

mostra uma mensagem advertindo o problema e sugerindo que o nosso próprio

servidor copie o arquivo remoto para poder funcionar.

Funções para validação alfanumérica de strings em Javascript Uma série de funções de string para validar se um string tem ou não números e caracteres, maiúsculas e minúsculas.




Criei uma série de funções de string para realizar umas comprovações sobre

cadeias de caracteres, que vou utilizar mais adiante em um script mais

complexo. Começo explicando estas funções soltas, que talvez tenham

utilidade aos leitores. Também com a intenção de apresentar pouco a pouco a

complexidade de meu objetivo final. As funções de validação de strings servem

para saber se as cadeias têm ou não números, letras, letras maiúsculas e

minúsculas. São uma série de funções bem simples e parecidas entre si, que

fazem uso dos métodos da classe string de Javascript.

Estas funções simplesmente fazem o percorrido pelo string em busca de

caracteres de um determinado tipo. Fazem o percorrido completo por todo o

string até que encontram um caractere do tipo buscado, de modo que se possa

saber com certeza se há ou não caracteres desse tipo. Veremos a seguir as

diferentes funções:

Saber se o string contém caracteres numéricos

Esta função recebe um string e devolve 1 se se encontram caracteres

http://www.criarweb.com/artigos/funcoes-para-validacao-alfanumerica-de-strings-javascript.html




numéricos e 0 se não se encontram.

var numeros="0123456789";

function tem_numeros(texto){

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

if (numeros.indexOf(texto.charAt(i),0)!=-1){

return 1;

}

}

return 0;

}

Criamos primeiro uma variável global com os números possíveis, do 0 ao 9,

que queremos buscar. Utilizaremos essa variável dentro da função.

A função faz um percorrido a todos os caracteres do string. Para cada um se

comprova se está ou não dentro da variável números, criada anteriormente.

Se estiver, se devolve 1 (como se executa o return, se sai da função

devolvendo o valor 1).

Se não estiver, então se fará o percorrido do string, caractere a caractere, até o

final. Então, se termina o loop e se devolve 0.

Esta função pode ser provada com estas sentenças:

alert(tem_numeros("ASAS1"));

alert(tem_numeros("2asasasas"));

alert(tem_numeros("asas2sG"));

alert(tem_numeros("a...."));

alert(tem_numeros("A22323G2.12"));


Saber se um string contém letras

Vejamos uma função muito similar, para saber se um string contém um

caractere que seja letra, valendo tanto as maiúsculas como minúsculas.

var letras="abcdefghyjklmnopqrstuvwxyz";

function tem_letras(texto){

texto = texto.toLowerCase();

http://www.criarweb.com/artigos/exemplos/tallerjs/tiene_numeros.html


if (letras.indexOf(texto.charAt(i),0)!=-1){

return 1;

}

}

return 0;

}

O algoritmo é praticamente o mesmo que a função anterior. Primeiro, criamos

um string com todas as letras do alfabeto. Logo, fazemos um percorrido

buscando em cada um dos caracteres do string recebido por parâmetro uma

das letras do alfabeto.

A única particularidade é a chamada ao método toLowerCase(), para converter

o texto que se recebe por parâmetro a minúsculas e que a busca de letras não

tenha em conta se são minúsculas ou maiúsculas (já que só buscamos se o

string contém letras).

Podemos provar o string com estas linhas de código:

alert(tem_letras("1"));

alert(tem_letras("22323232s"));

alert(tem_letras("22323232sf"));

alert(tem_letras("a2232323"));

alert(tem_letras("A22323G2.12"));

Podemos ver o exemplo em funcionamento aqui.

Saber se um string tem letras minúsculas

Aqui vemos a função para comprovar se um string tem caracteres em

minúsculas. É muito parecida as que vimos anteriormente.

var letras="abcdefghyjklmnopqrstuvwxyz";

function tem_minusculas(texto){


if (letras.indexOf(texto.charAt(i),0)!=-1){

return 1;

}

}

return 0;

}


http://www.criarweb.com/artigos/exemplos/tallerjs/tiene_letras.html

Com sua bateria de provas:

alert(tem_minusculas("1"));

alert(tem_minusculas("22323232s"));

alert(tem_minusculas("22323232sf"));

alert(tem_minusculas("a2232323"));

alert(tem_minusculas("A22323G2.12"));

Pode-se executar aqui.

Comprovar se um string tem letras maiúsculas

Agora veremos a função para ver se um string tem letras maiúsculas. É igual

que a anterior, simplesmente temos uma cadeia com todas as letras em

maiúscula para buscar no texto recebido por parâmetro.

var letras_mayusculas="ABCDEFGHYJKLMNOPQRSTUVWXYZ";

function tem_maiusculas(texto){


if (letras_maiusculas.indexOf(texto.charAt(i),0)!=-1){

return 1;

}

}

return 0;

}

Estas poderiam ser as provas para comprovar o funcionamento.

alert(tem_maiusculas("1"));

alert(tem_maiusculas("22323232s"));

alert(tem_maiusculas("22323232sG"));

alert(tem_maiusculas("a2232323"));

alert(tem_maiusculas("A22323G2.12"));

Pode ver em funcionamento o script no seguinte link.

Utilizaremos estas funções no seguinte artigo, no qual vou explicar a criação de

um sistema para mostrar a segurança de uma chave, para dizer o quão segura

é em função do número de caracteres, se tem números e letras, se tem

maiúsculas e minúsculas, etc.

http://www.criarweb.com/artigos/exemplos/tallerjs/tiene_minusculas.html

http://www.criarweb.com/artigos/exemplos/tallerjs/tiene_mayusculas.html

Script para informar da segurança de uma senha, com Javascript Queremos informar ao usuário, quando escreve uma senha, sobre o grau de segurança da senha. Para fazer isso, vejamos este simples script Javascript.




Veremos um simples script em Javascript para comprovar o grau de segurança

de uma senha escrita pelo usuário. Como é um script javascript do lado do

cliente, permitirá mostrar o nível de segurança da senha ao mesmo tempo que

o usuário a escreve em um campo de formulário.

Poderemos utilizar este script livremente em nossas páginas, de modo que

ofereçamos aos visitantes uma informação sobre o segura ou insegura que é a

senha que estão escolhendo, o que lhes motivará a escrever senhas mais

seguras que as que habitualmente se escrevem.

Podemos ver um exemplo do objetivo buscado antes de continuar.

Em um artigo anterior do Workshop de Javascript estivemos mostrando a

maneira de fazer várias funções para comprovar um string e saber se tem

letras, números, maiúsculas e minúsculas. Utilizaremos estas funções agora

para este script de informação de segurança da senha.

Para valorizar o grau de segurança de uma senha vamos ter em conta estas

pontuações sobre diferentes conceitos:

Tem letras e números: +30%

Tem maiúsculas e minúsculas: +30%

Tem entre 4 e 5 caracteres: +10%

Tem entre 6 e 8 caracteres: +30%

Tem mais de 8 caracteres: +40%

Poderíamos ter escolhido qualquer outra pontuação para a segurança da

senha, porém esta valerá. Também poderíamos ter criado outros critérios para

decidir o grau de segurança. De qualquer forma para que fique claro este

cálculo, ponho um par de exemplos:

A) Uma senha com números e letras, com 7 caracteres teria: 30% por letras e

números + 30% por ter entre 6 e 8 caracteres = 60% de segurança.

B) Outra senha com letras maiúsculas e minúsculas, sem números, e com 8

http://www.criarweb.com/artigos/script-para-informar-seguranca-senha-javascript.html



http://www.criarweb.com/artigos/exemplos/tallerjs/informa-seguridad-contrasena.html




caracteres: 30% por maiúsculas e minúsculas + 40% por mais de 8 caracteres

= 70% de segurança.

Para controlar a segurança, apoiando-nos nas funções de validação

alfanumérica de strings vistas anteriormente, faremos uma função como esta:

function seguranca_senha(senha){

var seguranca = 0;

if (senha.length!=0){

if (tem_numeros(senha) && tem_letras(senha)){

seguranca += 30;

}

if (tem_minusculas(senha) && tem_maiusculas(senha)){

seguranca += 30;

}

if (senha.length >= 4 && senha.length <= 5){

seguranca += 10;

}else{

if (senha.length >= 6 && senha.length <= 8){

seguranca += 30;

}else{

if (senha.length > 8){

seguranca += 40;

}

}

}

}

return seguranca

}

Vamos comprovando se o string tem diversas coisas, como letras, números,

maiúsculas, minúsculas, assim como sua longitude, para ir atribuindo um maior

valor à segurança.

Exemplo de uso em um formulário que pede uma senha

Agora, vejamos um simples exemplo de uso da função em um formulário, que

mostra a segurança de uma senha escrita pelo usuário:

O formulário poderia ser como este:

< form>

Senha: <input type="password" size=15 name="senha"

onkeyup="mostra_seguranca_senha(this.value, this.form)">



< i>seguranca:</i> <input name="seguranca" type="text" style="border: 0px;

background-color:ffffff; text-decoration:italic;" onfocus="blur()">

< /form>

Como vemos, temos 1 campo INPUT de tipo PASSWORD onde escreveremos

a senha. A este campo se introduziu um evento ONKEYUP que se executa

quando o usuário clica uma tecla, porém no momento de soltá-la. Essa função

será a encarregada de fazer com que se visualize a segurança da senha.

Ademais, colocamos outro campo de texto, para colocar o valor de segurança

da senha. Este campo o forçamos a que não se possa escrever nele com o

evento onfocus="blur()">. Só se poderá modificar mediante Javascript.

Vejamos a função mostra_seguranca_senha(), que é a que se encarrega de

receber tanto a senha escrita como o formulário onde se encontra, para

atualizar o valor de segurança.

function mostra_seguranca_senha(senha,formulario){

seguridad=seguranca_senha(senha);

formulario.seguranca.value=seguranca + "%";

}

Como vemos, se faz uso da função que devolve a segurança de um string que

se utilizará como senha. Logo, se coloca esse valor no campo de texto

adicional que há no formulário.

Podemos ver o exemplo em uma página a parte.

Editor de texto WYSIWYG Javascript: TinyMCE Editor HTML WYSIWYG, para integrar em formulários web, baseado em

Javascript de Moxiecode Systems AB.

Por Gema Maria Molina Prados



TinyMCE é um editor HTML que é capaz de converter os textarea de um formulário em campos WYSIWYG para poder incluir etiquetas HTML dentro dos campos de texto.

Características

http://www.criarweb.com/artigos/exemplos/tallerjs/informa-seguridad-contrasena.html

http://www.criarweb.com/artigos/editor-de-texto-wysiwsg-javascript.html



É fácil de integrar nas páginas web, já que só tem duas linhas de código. Pode-se personalizar através de temas e plugins. Também se podem instalar pacotes de idiomas. É compatível com a maioria dos navegadores como Firefox, Internet

Explorer, Opera e Safari, embora este último está em fase experimental. Com o compressor GZip para PHP/.NET/JSP/Coldfusion, faz com que

TinyMCE seja um 75% menor e muito mais rápido de carregar. Pode-se utilizar AJAX para salvar e carregar o conteúdo.

Integração de TinyMCE

Para poder utilizar TinyMCE nas páginas web, o navegador tem que ser

compatível e ter Javascript habilitado.

Primeiro há que baixar TinyMCE desde a seguinte página de downloads:

http://tinymce.moxiecode.com/download.php. Depois há que descompactá-lo e

salvá-lo no servidor da página web para poder utilizá-lo nos textarea dos

formulários.

Na página que for utilizar, primeiro há que incluir a biblioteca tiny_mce.js

incluindo o arquivo externo de código Javascript.

< script language="javascript" type="text/javascript"

src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

A seguir há que iniciar TinyMCE para converter os textarea em campos de

texto WYSIWYG editáveis.

< script language="javascript" type="text/javascript">

tinyMCE.init({

mode : "textareas",

theme : "simples"

});

< /script>

Exemplo de integração de TinyMCE

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

< html>

< head>

<title>Exemplo TinyMCE</title>

<script language="javascript" type="text/javascript"

src="/tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>



http://tinymce.moxiecode.com/download.php

<script language="javascript" type="text/javascript">

tinyMCE.init({

mode : "textareas",

theme : "advanced"

});

</script>

< /head>

< body>

<form method="post" name="tinymce">

<textarea name="texto" cols="50" rows="15"></textarea>

</form>

< /body>

< /html>

Neste exemplo, primeiro incluímos a biblioteca tiny_mce.js dentro das etiquetas

< head>. Dentro destas etiquetas também iniciamos TinyMCE para que no

textarea do formulário se converta em um campo de texto WYSIWYG.

Pode-se ver o exemplo em funcionamento no seguinte link.

http://www.criarweb.com/artigos/exemplos/tinymce.php

Documents

88633748 Javascript Manual