INTRODUO Javascript uma linguagem de programao utilizada para criar pequenos programinhas encarregados de realizar aes dentro do mbito

o de uma pgina web. Com Javascript podemos criar efeitos especiais nas pginas e definir interatividades com o usurio. O navegador do cliente o encarregado de interpretar as instrues 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 prprio navegador. Javascript o seguinte passo, depois de HTML, que pode dar um programador da web que decide melhorar suas pginas e a potncia de seus projetos. uma linguagem de programao bastante simples e pensada para fazer as coisas com rapidez, s vezes com leveza. Inclusive as pessoas que no tenham uma experincia prvia na programao podero aprender esta linguagem com facilidade e utiliz-la em toda sua potncia com somente um pouco de prtica. Entre as aes tpicas que se podem realizar em Javascript temos duas vertentes. Por um lado, os efeitos especiais sobre pginas web, para criar contedos dinmicos e elementos da pgina que tenham movimento, mudam de cor ou qualquer outro dinamismo. Por outro, javascript nos permite executar instrues como resposta s aes do usurio, com o qual podemos criar pginas interativas com programas como calculadoras, agendas, ou tabelas de clculo. Javascript uma linguagem com muitas possibilidades, permite a programao de pequenos scripts, e tambm de programas maiores, orientados a objetos, com funes, estruturas de dados complexas, etc. Toda esta potncia de Javascript se coloca disposio do programador, que se converte no verdadeiro dono e controlador de cada coisa que ocorre na pgina. Neste livro vamos tratar de aproximarmos desta linguagem mais profundidade e conhecer todos seus segredos e mtodos de trabalho. Ao final do livro seremos capazes de controlar a pgina web e discernir o melhor mtodo para atacar os problemas ou objetivos que tivermos planejado.

HISTORIA Foi criado na Internet uma infinidade de servios para realizar muitos tipos de comunicaes, como correio, chats, buscas de informao, etc. Mas nenhum desses servios se desenvolveram tanto como o Web. Se estamos lendo estas linhas no vamos precisar de nenhuma explicao 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 contm links que relacionam cada uma das unidades bsicas onde podemos encontrar informao, as pginas web. princpio, para desenhar este sistema de pginas com links se pensou em uma linguagem que permitisse apresentar cada uma dessas informaes juntos cm uns pequenos estilos, esta linguagem foi o HTML, que logo se veria que no cumpriu todos os objetivos para os que foi desenhado, mas isso outro assunto. O caso que HTML no suficiente para realizar todas as aes que se podem chegar a necessitar em uma pgina web. Isto devido a que conforme foi crescendo o web e seus distintos usos foram se complicando as pginas e as aes que queriam se realizar atravs delas. O HTLM havia se tornado curto para definir todas estas novas funcionalidades, j que somente serve para apresentar o texto em uma pgina, definir seu estilo e pouco mais. O primeiro ajudante para cobrir as necessidades que estavam surgindo foi Java, atravs da tecnologia dos Applets, que so pequenos programas que se incrustam nas pginas web e que podem realizar as aes associadas aos programas de propsito geral. A programao de Applets foi um grande avance e Netscape, at ento, o navegador mais popular, havia rompido a primeira barreira do HTML ao fazer possvel a programao dentro das pginas web. No cabe dvida que o aparecimento dos Applets sups um grande avance na histria do web, mas foi uma tecnologia definitiva e muitas outras seguiram implementando o caminho que comeou com eles. Chega Javascript: Netscape, depois de fazer seus navegadores compatveis com os applets, comeou a desenvolver uma linhguagem de programao ao que chamou LiveScript que permitisse criar pequenos programas nas pginas e que fosse muito mais simples de utilizar que Java. De modo que o primeiro Javascript se chamou LiveScript, mas no durou muito esse nome, pois antes de lanar a primeira verso do produto se forjou uma aliana com Sun Microsystems, criador de Java, para desenvolver em conjunto essa nova linguagem.

A aliana fez com que Javascript se desenhara como um irmo pequeno de Java, somente til dentro das pginas web e muito mais fcil de utilizar, de modo que qualquer pessoa, sem conhecimentos de programao pudesse aprofundar-se na linguagem e utiliz-la. Ademais, para programar Javascript no necessrio um kit de desenvolvimento, nem compilar os scripts, nem realiz-los em ficheiros externos ao cdigo 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 verso 3.0. Diferenas entre Java e Javascript Veremos a diferena entre estas duas linguagens com uma origem comum. Queremos que fique claro que Javascript no tem nada a ver com Java, salvo em suas origens. Atualmente so produtos totalmente distintos e no guardam entre si mais relao que a sintaxe idntica e pouco mais. Algumas diferenas entre estas duas linguagens so as seguintes: Compilador. Para programar em Java necessitamos um Kit de desenvolvimento e um compilador. Entretanto, Javascript no uma linguagem que necessite que seus programas se compilem, seno que estes se interpretem por parte do navegador quando este l a pgina. Orientado a objetos. Java uma linguagem de programao orientada a objetos. (Mais tarde veremos que quer dizer orientado a objetos, para quem ainda no sabe) Javascript no orientado a objetos, isto quer dizer que poderemos programar sem necessidade de criar classes, tal como se realiza nas linguagens de programao estruturada como C ou Pascal. Propsito. Java muito mais potente que Javascript, isto devido a que Java uma linguagem de propsito geral, com o que se podem fazer aplicaes do mais variado, entretanto, com Javascript somente podemos escrever programas para que se executem em pginas web. Estruturas fortes. Java uma linguagem de programao fortemente tipada, isto quer dizer que ao declarar uma varivel teremos que indicar seu tipo e no poder mudar de um tipo a outro automaticamente. Por sua parte, Javascript no tem esta caracterstica, e podemos colocar em uma varivel a informao que desejarmos, independentemente do tipo desta. Ademais, poderemos mudar o tipo de informao de uma varivel quando quisermos. Outras caractersticas. Como vemos Java muito mais complexo, mas tambm, mais potente, robusto e seguro. Tem mais funcionalidades que

Javascript e as diferenas que os separam so o suficientemente importantes como para distingu-los facilmente. Previamente para comear a utilizar Javascript podemos ter uma idia mais concreta das possveis aplicaes desta linguagem assim como as ferramentas que necessitamos para colocarmos mos a obra. Usos de Javascript Vejamos brevemente alguns usos desta linguagem que podemos encontrar na web para termos uma idia das possibilidades que tem. Para comear, podemos ver pginas cheia de efeitos super interessantes sobre Javascript, que chegam a assemelhar-se tecnologia Flash. Por outro lado, podemos encontrar dentro de Internet muitas aplicaes de Javascript muito mais srias, que fazem com que uma pgina web se converta em um verdadeiro programa interativo de gesto de qualquer recurso. Tambm podemos ver exemplos dentro de qualquer pgina 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 pginas web, ou no to simples, como podem ser rollovers (que muda uma imagem ao passar o mouse por cima), navegadores desdobrveis, abertura de janelas secundrias, etc. Podemos nos atrever a dizer que esta linguagem realmente til para estes casos, pois estes tpicos efeitos tm a complexidade justa para ser implementados em questo de minutos sem possibilidade de erros. O que necessrio Para programar em Javascript necessitamos basicamente o mesmo que para programar pginas web com HTML. Um editor de textos e um navegador compatvel com Javascript. Um usurio de Windows possui de sada todo o necessrio para poder programar em Javascript, visto que dispe dentro de sua instalao tpica de sistema operativo, de um editor de textos, o Bloco de notas, e de um navegador: Internet Explorer. Usurios de outros sistemas podem encontrar em Internet facilmente as ferramentas necessrias para comear em pginas de download de software como Tucows. Uma recomendao em relao ao editor de textos. Trata-se de que, apesar do Bloco de Notas ser suficiente para comear, talvez seja muito til

contar com outros programas que nos oferecem melhores prestaes na hora de escrever as linhas de cdigo. Estes editores avanados tm algumas vantagens como que colorem os cdigos de nossos scripts, nos permitem trabalhar com vrios documentos simultaneamente, tm ajudas, etc. Entre outros queremos destacar o Home Site ou o UltraEdit. Verses de navegadores e de Javascript Tambm apropriado introduzir as distintas verses de Javascript que existem e que evolucionaram em conjunto com as verses de navegadores. A linguagem foi avanando durante seus anos de vida e incrementando suas capacidades. princpio podia realizar muitas coisas na pgina web, mas tinha poucas instrues para criar efeitos especiais. Com o tempo tambm o HTML foi avanando e foram criadas novas caractersticas como as camadas, que permitem tratar e planificar os documentos de maneira distinta. Javascript tambm avanou e para manejar todas estas novas caractersticas foram criados novas instrues e recursos. Para resumir vamos comentar as distintas verses de Javascript: Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de instrues e funes, quase todas as que existem agora j se introduziram no primeiro padro. Javascript 1.1: a verso de Javascript que foi desenhado com a chegada dos navegadores 3.0. Implementava pouco mais que sua verso anterior, como por exemplo, o tratamento de imagens dinamicamente e a criao de arrays. Javascript 1.2: A verso 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: Verso que implementam os navegadores 5.0. Nesta verso foram limitadas algumas diferenas e asperezas entre os dois navegadores. Javascript 1.5: Verso atual, no momento de escrever estas linhas, que implementa Netscape 6. Por este lado, Microsoft tambm foi evoluindo at apresentar sua verso 5.5 de JScript (assim chamam ao javascript utilizado pelos navegadores de Microsoft).

Efeitos rpidos com Javascript Antes de aprofundarmos na matria, podemos ver uma srie de efeitos rpidos que se podem programar com Javascript. Isto pode nos dar uma ideia ms clara e exata das capacidades e da potncia da linguagem.

Abrir uma janela secundria Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante atrativas. Por exemplo podemos ver como abrir uma janela secundria sem barras de menus que mostre o buscador Google. O cdigo 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 pgina est "ao dia", ou seja, est atualizada. Exemplo < script> document.write(new Date())< /script>

Estas linhas deveriam ser introduzidas dentro do corpo da pgina no lugar onde quisermos que aparea a data da ltima atualizao. Podemos ver o exemplo em funcionamento aqui.

Boto de voltar Outro exemplo rpido pode ser visto a seguir. Trata-se de um boto para voltar para trs, como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de cdigo que mistura HTML e Javascript para criar este boto que mostra a pgina anterior no histrico, se que havia. Exemplo < input type=button value=Atrs onclick="history.go(-1)"> Parte superior do formulrio O boto ser parecido ao seguinte. Podemos clic-lo para ver seu funcionamento (deveria nos levar pgina anterior). Parte inferior do formulrio Como diferena com os exemplos anteriores, h que destacar que neste caso a instruo Javascript se encontra dentro de um atributo de HTML, onclick, que indica que essa instruo tem de ser executada como resposta ao clicar no boto. possvel comprovar a facilidade com a qual se podem realizar algumas aes interessantes, e existiriam muitas outras mostras, mas que reservamos para captulos posteriores.

A linguagem Javascript Nesta parte do livro vamos conhecer a maneira de trabalhar com Javascript, como incluir scripts e ser compatvel com todos os navegadores. Muitas idias do funcionamento de Javascript j foram descritas nos captulos anteriores, mas com o objetivo de no deixarmos nada solto no ar, vamos tratar de reforar a partir daqui todos os dados mais importantes desta linguagem. Javascript se escreve no documento HTML O mais importante e bsico que podemos destacar neste momento que a programao de Javascript se realiza dentro do prprio documento HTML. Isto quer dizer que na pgina 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 instrues Javascript. Estes delimitadores so as etiquetas . Todo o cdigo Javascript que colocarmos na pgina h de ser introduzido entre estas duas etiquetas. Em uma mesma pgina podemos introduzir vrios scripts, cada um que poderia se introduzir dentro das etiquetas <SCRIPT> distintas. A colocao destes scripts indiferente, princpio d no mesmo aonde coloca-los, mas em determinados casos esta colocao sim que ser muito importante. Em cada caso, e chegado o momento isto ser informado convenientemente. Tambm se pode escrever Javascript dentro de determinados atributos da pgina, como o atributo onclick. Estes atributos esto relacionados com as aes do usurio e so chamados de manejadores de eventos. Vamos ver no prximo captulo mais detalhadamente estas duas maneiras de escrever scripts, que tem como diferena principal o momento em que se executam as sentenas.

Maneiras de executar script Existem duas maneiras de executar scripts na pgina. A primeira destas maneiras se trata de execuo direta de scripts, a segunda uma execuo como resposta ao de um usurio. Veremos agora cada uma delas.

Execuo direta o mtodo mais bsico de executar scripts. Neste caso se incluem as instrues 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 so aes que realiza o usurio. Os programas como Javascript esto preparados para apanhar determinadas aes realizadas, neste caso sobre a pgina, e realizar aes como resposta. Deste modo se podem realizar programas interativos, j que controlamos os movimentos do usurio e respondemos a eles. Existem muitos tipos de eventos distintos, por exemplo, o click do mouse, a seleo de texto da pgina, entre outros. As aes que queremos realizar como resposta a um evento devem ser indicadas dentro do mesmo cdigo HTML, mas neste caso se indicam em atributos HTML que se colocam dentro da etiqueta que queremos que responda s aes do usurio. No captulo em que vimos algum exemplo rpido j comprovamos que se quisssemos que um boto realizasse aes quando se clicasse sobre ele, devamos indic-las dentro do atributo onclick do boto. Comprovamos ento, que se pode introduzir cdigo Javascript dentro de determinados atributos das etiquetas HTML. Veremos mais adiante este tipo de execuo 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, esto fora do seu alcance. Sendo assim, nem todos os navegadores do web compreendem Javascript. Nos casos em no se interpretam os scripts, os navegadores assumem que o cdigo destes o texto da prpria pgina web e como consequncia, apresentam os scripts na pgina web como se tratasse de um texto normal. Para evitar que o texto dos scripts se escreva na pgina quando os navegadores no os entendem, temos que ocult-los com comentrios HTML (). Vejamos com um exemplo como se deve ocultar os scripts.

Exemplo: < SCRIPT> < !-Cdigo Javascript

//--> < /SCRIPT> Vemos que o inicio do comentrio HTML idntico a como o conhecemos no HTML, porm o fechamento do comentrio apresenta uma particularidade, que comea por duas barras inclinadas. Isto devido a que o final do comentrio contm vrios caracteres que Javascript reconhece como operadores e ao tratar de analis-los lana uma mensagem de erro de sintaxe. Para que Javascript no lance uma mensagem de erro se coloca antes do comentrio HTML essa barra dupla, que no mais que um comentrio Javascript, que conheceremos mais adiante quando falarmos de sintaxe. O incio do comentrio HTML no necessrio coment-lo com a barra dupla, dado que Javascript entende bem que simplesmente se pretende ocultar o cdigo. Um esclarecimento a este ponto: se colocssemos as duas nesta linha, se veriam em navegadores antigos por estar fora dos comentrios HTML. Os navegadores antigos no entendem as etiquetas <SCRIPT> , portanto no as interpretam, tal como fazem com qualquer etiqueta que desconhecem.

Exemplo: <NOSCRIPT> Existe a possibilidade de indicar um texto alternativo para os navegadores que no entendem Javascript, para lhes informar de que nesse lugar deveria executar um script e que a pgina no est funcionando com 100% de suas capacidades. Tambm podemos sugerir aos visitantes que atualizem seu navegador a uma verso compatvel 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> cdigo javascript < /SCRIPT> < NOSCRIPT> Este navegador no compreende os scripts que se esto executando, voc deve atualizar sua verso 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 pginas web. A etiqueta

O atributo em questo language e o mais habitual indicar simplesmente a linguagem com a qual foram programados os scripts. A linguagem por padro Javascript, portanto se no 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 pginas web, implementada a partir de Javascript 1.1, incluir arquivos externos onde se podem colocar muitas funes que se utilizem na pgina. Os arquivos costumam ter extenso .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 no entendem o atributo SRC tero este texto por instrues, pelo qual aconselhvel botar um comentrio Javascript antes de cada linha com o objetivo de que no respondam com um erro. O arquivo que inclumos (neste caso arquivo_externo.js) deve conter somente sentenas Javascript. No devemos incluir cdigo 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. Tambm muito parecida a da linguagem C, de modo que se o leitor conhece alguma destas duas linguagens poder manejar com facilidade com o cdigo. De qualquer forma, nos seguintes captulos vamos descrever toda a sintaxe com detalhes, para que os novatos no tenham nenhum problema com ela.

Comentrios Um comentrio uma parte de cdigo que no 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 comentrios, 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 comentrio Javascript, mas agora vamos rev-los de novo. Existem dois tipos de comentrios na linguagem. Um deles, a barra dupla, serve para comentar uma linha de cdigo. O outro comentrio podemos utilizar para comentar vrias linhas e se indica com os signos /* para comear o comentrio e */ para termin-lo. Vejamos uns exemplos. Exemplo: < SCRIPT> //Este um comentrio de uma linha /*Este comentrio pode se expandir por vrias linhas. As que quiser*/ < /SCRIPT>

Maisculas e minsculas Em javascript se deve respeitar as maisculas e as minsculas. Se nos equivocamos ao utiliz-las o navegador responder com uma mensagem de erro de sintaxe. Por conveno os nomes das coisas se escrevem em minsculas, salvo que se utilize um nome com mais de uma palavra, pois

nesse caso se escrevero com maisculas as iniciais das palavras seguintes primeira. Tambm se pode utilizar maisculas nas iniciais das primeiras palavras em alguns casos, como os nomes das classes, apesar de que j veremos mais adiante quais so estes casos e o que so as classes.

Separao de instrues As distintas instrues que contm nossos scripts devem ser separadas convenientemente para que o navegador no indique os correspondentes erros de sintaxe. Javascript tem duas maneiras de separar instrues. A primeira atravs do caractere pontoe vrgula (;) e a segunda atravs de uma quebra de linha. Por esta razo, as sentenas Javascript no necessitam acabar em ponto e vrgula a no ser que coloquemos duas instrues na mesma linha. De qualquer forma, no uma idia ruim se acostumar a utilizar o ponto e vrgula depois de cada instruo, 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 programaes avanadas.

Variveis Javascript Uma varivel um espao em memria onde se armazena um dado, um espao onde podemos salvar qualquer tipo de informao que necessitemos para realizar as aes de nossos programas. Por exemplo, se nosso programa realiza somas, ser muito normal guardarmos em variveis as distintas parcelas que participam na operao e o resultado da soma. O efeito seria algo parecido a isto. Exemplo: parcela1 = 23 parcela2 = 33 soma = parcela1 + parcela2 Neste exemplo temos trs variveis, parcela1, parcela2 e soma, onde guardamos o resultado. Vemos que seu uso para ns como se tivssemos um apartado onde salvar um dado e que se pode acessa-los colocando somente seu nome. Os nomes das variveis devem ser construdos com caracteres alfanumricos e o caractere sublinhado (_). A parte disso, h uma srie de

regras adicionais para construir nomes para variveis. A mais importante que tem de comear por um caractere alfabtico ou sublinhado. No podemos utilizar caracteres raros como o signo +, um espao ou um $. Nomes admitidos para as variveis poderiam ser: Exemplo: Idade PasDeNascimento _nome Tambm h que evitar utilizar nomes reservados como variveis, por exemplo no poderemos chamar a nossa varivel palavras como return ou for, que j veremos que so utilizadas para estruturas da prpria linguagem. Vejamos agora alguns nomes de variveis que no est permitido utilizar Exemplo: 12meses seu nome return pe%pe

Declarao de variveis Declarar variveis consiste em definir e de passo informar ao sistema de que se vai utilizar uma varivel. um costume habitual nas linguagens de programao definir as variveis que sero utilizadas nos programas e para isso, seguem-se algumas regras restritas. Porm, 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 variveis, j que no estamos obrigados a faz-lo, ao contrrio do que acontece na maioria das linguagens de programao. De qualquer forma, aconselhvel declarar as variveis, alm de um bom costume e para isso Javascript conta com a palavra var. Como lgico, utiliza-se essa palavra para definir a varivel antes de utiliz-la. Exemplo: var operando1 var operando2

Tambm pode-se atribuir um valor varivel quando se est declarando Exemplo: var operando1 = 23 var operando2 = 33 Tambm se permite declarar vrias variveis na mesma linha, sempre que se separem por vrgulas. Exemplo: var operando1,operando2

mbito das variveis Chama-se mbito das variveis ao lugar onde estas esto disponveis. Em geral, quando declaramos uma varivel fazemos com que esteja disponvel no lugar onde se foi declarado, isto ocorre em todas as linguagens de programao e como javascript se define dentro de uma pgina web, as variveis que declaremos na pgina estaro acessveis dentro dela. Deste modo, no poderemos acessar s variveis que tenham sido definidas em outra pgina. Este o mbito mais habitual de uma varivel e chamamos a este tipo de variveis globais pgina, mesmo que no seja o nico, j que tambm poderemos declarar variveis em lugares mais dimensionados.

Variveis globais Como dissemos, as variveis globais so as que esto declaradas no mbito mais amplo possvel, que em Javascript uma pgina web. Para declarar uma varivel global pgina simplesmente faremos em um script, com a palavra var. Exemplo: < SCRIPT> var varivelGlobal < /SCRIPT> As variveis globais so acessveis desde qualquer lugar da pgina, ou seja, a partir do script onde foi declarado e todos os demais scripts da pgina, incluindo os que manejam os eventos, como o onclick, que j vimos que podia ser includo dentro de determinadas etiquetas HTML.

Variveis locais Tambm poderemos declarar variveis em lugares mais dimensionados, como por exemplo, uma funo. A estas variveis chamaremos de locais. Quando se declarem variveis locais somente poderemos acess-las dentro do lugar aonde tenha sido declaradas, ou seja, se havamos declarado em uma funo somente poderemos acess-la quando estivermos nessa funo. As variveis podem ser locais em uma funo, mas tambm podem ser locais a outros mbitos, como por exemplo, um loop. Em geral, so mbitos locais qualquer lugar dimensionado por chaves. Exemplo: < SCRIPT> function minhaFuncao) (){ var variavelLocal } < /SCRIPT> No script anterior declaramos uma varivel dentro de uma funo, pelo qual esta varivel somente ter validade dentro da funo. Pode-se ver as chaves para dimensionar o lugar onde est definida essa funo ou seu mbito. No h problema em declarar uma varivel local com o mesmo nome que uma global, neste caso a varivel ser visvel desde toda a pgina, exceto no mbito onde est declarada a varivel local j que neste lugar esse nome de varivel est ocupado pela local e ela quem tem validade. Resumindo, em qualquer lugar da pgina, a varivel que ter validade a global. Menos no mbito onde est declarada a varivel local, que ser ela que vai ter validade. Exemplo: < SCRIPT> var numero = 2 function minhaFuncao (){ var numero = 19 document.write(numero) //imprime 19 }

document.write(numero) //imprime 2 < /SCRIPT> Um conselho para os principiantes poderia ser no declarar variveis com os mesmos nomes, para que nunca tenha confuso sobre qual varivel a que tem validade em cada momento.

Diferenas entre utilizar var ou no Como dissemos, em Javascript temos liberdade para declarar ou no as variveis com a palavra var, mas os efeitos que conseguiremos em cada caso sero distintos. Na verdade, quando utilizamos var, estamos fazendo com que a varivel que estamos declarando seja local ao mbito onde se declara. Por outro lado, se no utilizamos a palavra var para declarar uma varivel esta ser global a toda a pgina, seja qual for o mbito no qual tenha sido declarada. No caso de uma varivel declarada na pgina web, fora de uma funo ou de qualquer outro mbito mais reduzido, indiferente se se declara ou no com var, desde um ponto de vista funcional. Isto devido a que qualquer varivel declarada fora do mbito global a toda a pgina. A diferena pode ser apreciada em uma funo por exemplo, j que se utilizamos var a varivel ser local funo e se no o utilizamos , a varivel ser global pgina. Esta diferena fundamental na hora de controlar corretamente o uso das variveis na pgina, j que se no o fazemos em uma funo poderamos sobrescrever o valor de uma varivel, perdendo o dado que pudesse conter previamente. Exemplo: < SCRIPT> var numero = 2 function minhaFuncao (){ numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 //chamamos a funcao minhaFuncao() document.write(numero) //imprime 19

< /SCRIPT> Neste exemplo, temos uma varivel global pgina chamada numero, que contm um 2. Tambm temos uma funo que utiliza a varivel numero sem a ter declarado com var, pelo que a varivel numero da funcao ser mesma varivel global numero declarada fora da funo. Em uma situao com esta, ao executar a funo se sobrescrever a varivel numero e o dado que havia antes de executar a funo se perder.

O que podemos salvar em variveis Em uma varivel podemos introduzir vrios tipos de informao, por exemplo, texto, nmeros inteiros ou reais, etc. A estas distintas classes de informao conhecemos como tipos de dados. Cada um tem caractersticas e usos distintos, vejamos quais so os tipos de dados de Javascript. Nmeros Para comear temos o tipo numrico, para salvar nmeros 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 Tambm contamos com o tipo boleano, que salva uma informao que pode valer como sim (true) ou no (false). Por ltimo seria relevante assinalar aqui que nossas variveis podem conter coisas mais complicadas, como poderia ser um objeto, uma funo, ou vazio (null) mas j o vermos mais adiante. Na verdade nossas variveis no esto foradas a salvar um tipo de dados em concreto e portanto, no especificamos nenhum tipo de dados para uma varivel quando a estamos declarando. Podemos introduzir qualquer informao em uma varivel de qualquer tipo, inclusive podemos ir mudando o contedo de uma varivel 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 variveis pode ser uma vantagem princpio, sobretudo para pessoas inexperientes, mas a longo prazo pode ser uma fonte de erros j que dependendo do tipo que so as variveis se comportaro de um modo ou outro e se no controlamos com exatido o tipo das variveis podemos encontrar um texto somado a um nmero. Javascript operar perfeitamente, e devolver um dado, mas em alguns casos pode que no seja o que estvamos esperando. Sendo assim, mesmo que tenhamos liberdade com os tipos, esta mesma liberdade nos faz estar mais atentos a possveis desajustes difceis de detectar ao longo dos programas. Vejamos o que ocorreria no caso de somar letras e nmeros. Exemplo: var parcela1 = 23 var parcela2 = "33" var soma = parcela1 + parcela2 document.write(soma) Este script nos mostraria na pgina o texto 2333, que no se corresponde com a soma dos dois nmeros, e sim com sua combinao, um atrs do outro.

Tipos de dados em Javascript Em nossos scripts vamos manejar variveis de diversas classes de informao, como textos ou nmeros. Cada uma destas classes de informao o tipo de dados. Javascript distingue entre trs tipos de dados e todas as informaes que se podem salvar em variveis vo estar encaixadas em algum destes tipos de dados. Vejamos detalhadamente quais so estes trs tipos de dados.

Tipo de dados numrico Nesta linguagem s existe um tipo de dados numrico, ao contrrio do que ocorre na maioria das linguagens mais conhecidas. Todos os nmeros so portanto, do tipo numrico, independentemente da preciso que tenham ou se so nmeros reais ou inteiros. Os nmeros inteiros so nmeros que no tm vrgula, como 3 ou 339. Os nmeros reais so nmeros fracionrios, como 2.69 ou 0.25, que tambm se podem escrever em nota cientfica, por exemplo, 2.482e12.

Com Javascript tambm podemos escrever nmeros em outras bases, como a hexadecimal. As bases so sistemas de numerao que utilizam mais ou menos dgitos para escrever os nmeros. Existem trs bases com as que podemos trabalhar: Base 10, o sistema que utilizamos habitualmente, o sistema decimal. Qualquer nmero, por padro, se entende que est escrito em base 10. Base 8, tambm chamado sistema octal, que utiliza dgitos do 0 ao 7. Para escrever um nmero em octal basta simplesmente escrever este nmero precedido de um 0, por exemplo 045. Base 16 ou sistema hexadecimal, o sistema de numerao que utiliza 16 dgitos, os compreendidos entre o 0 e o 9 e as letras da A F, para os dgitos que faltam. Para escrever um nmero em hexadecimal devemos escrev-lo precedido de um zero e um xis, por exemplo, 0x3EF.

Tipo boleano O tipo boleano, boolean em ingls, serve para salvar ou sim ou um no, ou com outras palavras, um verdadeiro ou falso. Utiliza-se para realizar operaes lgicas, geralmente para realizar aes se o contedo de uma varivel verdadeiro ou falso. Se uma varivel verdadeira, ento: Executo umas instrues Si no Executo outras Os dois valores que podem ter as variveis boleanas so 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 nmero de caracteres. Um texto pode estar composto de nmeros, 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 varivel de texto podemos salvar nmeros e nesse caso temos que ter em conta que as variveis de tipo texto e as numricas no so a mesma coisa e que enquanto as de numricas nos servem para fazer clculos matemticos, as de texto no servem.

Caracteres de escape em cadeias de texto. Existe uma srie 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 so os caracteres de escape e se escrevem com uma nota especial que comea por uma contra-barra (uma barra inclinada ao contrrio da normal '\') e logo se coloca o cdigo 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 ento 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 tambm h que destacar como caractere habitual o que se utiliza para escrever uma contra-barra, para no confundi-la com o incio 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 pgina: \f Retroceder espao: \b Contra-barra: \\

Operadores Javascript Ao desenvolver programas em qualquer linguagem se utilizam os operadores. Estes servem para fazer os clculos e operaes necessrias para realizar seus objetivos. Um programa que no realiza operaes somente se pode limitar a fazer sempre o mesmo. o resultado destas operaes que faz com que um programa varie seu comportamento segundo os dados que obtenha. Existem operaes mais simples ou mais complexas, que se podem realizar com operandos de distintos tipos de dados, como nmeros ou textos, veremos neste captulo de maneira detalhada todos estes operadores.

Exemplos de uso de operadores Antes de comear a numerar os distintos tipos de operadores vamos ver dois exemplos destes para ajudar a termos uma idia mais exata do que so. No primeiro exemplo, vamos realizar uma soma utilizando o operador soma.

Exemplo: 3+5

Esta uma expresso muito bsica que no tem muito sentido por si s. Faz a soma entre os dois operadores nmero 3 e 5, porm, no serve muito porque no se faz nada com o resultado. Normalmente combinam-se mais de um operador para criar expresses mais teis. A expresso seguinte uma combinao entre dois operadores, um realiza uma operao matemtica e o outro serve para salvar o resultado.

Exemplo: minhaVariavel = 23 * 5

No exemplo anterior, o operador * se utiliza para realizar uma multiplicao e o operador = se utiliza para atribuir o resultado em uma varivel, de modo que salvamos o valor para seu posterior uso. Os operadores podem ser classificados segundo o tipo de aes que realizam. A seguir veremos cada um destes grupos de operadores e descreveremos a funo de cada um.

Operadores aritmticos So os utilizados para a realizao de operaes matemticas simples como a soma, diferena ou multiplicao. Em javascript so os seguintes:

+ Soma de dois valores - Diferena de dois valores, tambm se pode utilizar para mudar o sinal de um nmero se o utilizamos com um s operando -23 * Multiplicao de dois valores / Diviso de dois valores % O resto da diviso de dois nmeros (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 preo = 128 //introduzo um 128 na varivel preo unidades = 10 //outra atribuio, logo veremos operadores de atribuio fatura = preo * unidades //multiplico preo por unidades, obtenho o valor fatura resto = fatura % 3 //obtenho o resto de dividir a varivel fatura por 3 preo++ //incrementa em uma unidade o preo (agora vale 129)

Operadores de atribuio Servem para atribuir valores s variveis, j utilizamos em exemplos anteriores o operador de atribuio =, mas existem outros operadores deste tipo, que provm da linguagem C e que muitos dos leitores j conhecero.

= Atribuio. Atribui a parte da direita do igual parte da esquerda. direita se colocam os valores finais e esquerda geralmente se coloca uma varivel onde queremos salvar o dado.

+= Atribuio com soma. Realiza a soma da parte da direita com a da esquerda e salva o resultado na parte da esquerda. -= Atribuio com diferena *= Atribuio da multiplicao /= Atribuio da diviso %= Se obtm o resto e se atribui

Exemplos poupana = 7000 //atribui um 7000 varivel poupana poupana += 3500 //incrementa em 3500 a varivel poupana, agora vale 10500 poupana /= 2 //divide entre 2 minha poupana, agora ficam 5250

Operadores de cadeias As cadeias de caracteres, ou variveis de texto, tambm tm seus prprios operadores para realizar aes tpicas sobre cadeias. Apesar do javascript ter somente um operador para cadeias se podem realizar outras aes com uma srie de funes 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 so nmeros, 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 operao realizar mediante uma comprovao dos tipos que esto implicados nela.

Um caso que seria confuso o uso do operador + quando se realiza a operao com operadores texto e numricos misturados. Neste caso javascript assume que se deseja realizar uma conciliao e trata aos dois operandos como se tratasse de cadeias de caracteres, inclusive se a cadeia de texto que temos for um nmero. 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, tambm no caso do operador +=, se estamos tratando com cadeias de texto e nmeros misturados, tratar aos dois operadores como se fossem cadeias.

Operadores lgicos

Estes operadores servem para realizar operaes lgicas, que so aquelas que do como resultado um verdadeiro ou um falso, e se utilizam para tomar decises em nossos scripts. Ao invs de trabalhar com nmeros, para realizar este tipo de operaes se utilizam operandos boleanos, que conhecemos anteriormente, que so o verdadeiro (true) e o falso (false). Os operadores lgicos relacionam os operandos boleanos para dar como resultado outro operando boleano, tal como podemos ver no seguinte exemplo.

Se tenho fome e tenho comida, ento irei comer

Nosso programa javascript utilizaria neste exemplo um operando boleano para tomar uma deciso. Primeiro ir ver se tenho fome, se certo (true) ir ver se disponho de comida. Se so os dois so certos, poder comer. No caso de que no tenha comida ou de que no tenha fome no comeria, assim como se no tenho fome nem comida. O operando em questo o operando Y, que valer verdadeiro (true) no caso de que os dois operandos sejam verdadeiros.

! Operador NO ou negao. Se true passa a false e vice-versa. && Operador Y, se so 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 expresses condicionais mais complexas que desejarmos. Estas expresses se utilizam para tomar decises em funo da comparao de vrios elementos, por exemplo, se um nmero maior que outro ou se so iguais. Os operadores condicionais se utilizam nas expresses condicionais para tomar decises. Como estas expresses condicionais sero 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 nmeros so iguais != Comprova se dois nmeros so 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 nvel de bit, e a precedncia de operadores (quais se executam antes e depois). Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 17/10/04 Valorize este artigo: Operadores a nvel de bit Estes so muito pouco correntes e possvel que voc nunca chegue a utilizlos. Seu uso se realiza para efetuar operaes com zeros e uns. Tudo o que maneja um computador so zeros e uns, a pesar de ns usarmos nmeros e letras para nossas variveis na verdade estes valores esto escritos internamente em forma de zeros e uns. Em alguns casos, poderemos necessitar realizar operaes tratando as variveis como zeros e uns, e para isso, utilizaremos estes operandos. Nesta manual se tornaria um pouco extenso demais se realizssemos uma discusso 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 << >> >>> >>>= >>= <<= Vrias classes de mudanas Precedncia dos operadores A avaliao de uma sentena das que vimos nos exemplos anteriores bastante simples e fcil de interpretar, mas quando em uma sentena entram em jogo uma infinidade de operadores diferentes pode haver uma confuso na hora de interpret-la e avaliar quais operadores so os que se executam antes que outros. Para marcar umas pautas na avaliao das sentenas e que estas se executem sempre igual e com sentido comum existe a precedncia de operadores, que no mais que a ordem pela qual se iro executando as operaes que eles representam. princpio todos os operadores se avaliam da esquerda para a direita, mas existem umas normas adicionais, pelas quais

determinados operadores se avaliam antes que outros. Muitas destas regras de precedncia foram tiradas das matemticas e so comuns a outras linguagens, podemos v-las a seguir. () [] . Parntesis, colchetes e o operador ponto que serve para os objetos ! - ++ -- negao, negativo e incrementos * / % Multiplicao, diviso e mdulo +- Soma e diferena << >> >>> Mudanas a nvel de bit < <= > >= Operadores condicionais == != Operadores condicionais de igualdade e desigualdade & ^ | Lgicos a nvel de bit && || Lgicos boleanos = += -= *= /= %= <<= >>= >>>= &= ^= != Atribuio Nos seguintes exemplos podemos ver como as expresses poderiam chegar a ser confusas, mas com a tabela de precedncia 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 operaes. Primeiro a multiplicao e logo a diviso por estar mais esquerda do mdulo. 36 + 4 - 4 % 3 Agora o mdulo. 36 + 4 - 1 Por ltimo as somas e as diferenas da esquerda para direita. 40 - 1 39 De qualquer forma, importante se dar conta que o uso dos parnteses pode nos economizar muitos quebra-cabeas e, sobretudo, a necessidade de sabermos de memria a tabela de precedncia dos operadores. Quando virmos pouco claro a ordem com a qual se executaro as sentenas podemos utiliz-las e assim, forar que se avalie antes o pedao da expresso que se encontra dentro dos parnteses.

Controle de tipos importante conhecermos o tipo das variveis para trabalhar sem erros. Veremos como obt-lo com Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/10/04 Valorize este artigo: Vimos para determinados operadores que importante o tipo de dados que esto manejando, visto que se os dados so de um tipo iro realizar operaes distintas que se so de outro. Assim, quando utilizvamos o operador +, se se tratava de nmeros, os somava, mas se se tratava de cadeias de caracteres, os conciliava. Vemos ento, que o tipo dos dados que estamos utilizando sim que importa e que teremos que estar pendentes a este detalhe se quisermos que nossas operaes se realizem tal como espervamos. Para comprovar o tipo de um dado se pode utilizar outro operador que est disponvel 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 pgina os distintos tipos das variveis. Estes podem ser os seguintes: boolean, para os dados boleanos. (True ou false) number, para os numricos. string, para as cadeias de caracteres. object, para os objetos. Queremos destacar apenas mais dois detalhes: 1) Os nmeros, j tendo ou no parte decimal, so sempre do tipo de dados numricos. 2) Uma das variveis um pouco mais complexa, a varivel 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 Introduo s estruturas de controle. Numeramos as que temos disponveis em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/10/04 Valorize este artigo: Os scripts vistos at agora foram tremendamente simples e lineares: iam-se executando as sentenas simples uma atrs da outra desde o princpio at o fim. Entretanto, isto no tem porque ser sempre assim, nos programas geralmente necessitaremos fazer coisas distintas, dependendo do estado de nossas variveis realizar um mesmo processo muitas vezes sem escrever a mesma linha de cdigo uma e outra vez. Para realizar coisas mais complexas em nossos scripts se utilizam as estruturas de controle. Utilizando-as podemos realizar tomadas de decises e loops. Nos seguintes captulos vamos conhecer as distintas estruturas de controle que existem em Javascript.

Tomada de decises Servem para realizar umas aes ou outras em funo do estado das variveis. Ou seja, tomar decises para executar umas instrues ou outras dependendo do que esteja ocorrendo neste instante em nossos programas. Por exemplo, dependendo se o usurio que entra em nossa pgina for maior de idade ou no, podemos lhe permitir ou no ver os contedos de nossa pgina. Se idade maior que 18 ento: Deixo-lhe ver o contedo para adultos Se no Mando-lhe fora da pgina Em javascript podemos tomar decises utilizando dois enunciados distintos. IF SWITCH Loops Os loops se utilizam para realizar certas aes repetidamente. So muito utilizados em todos os nveis na programao. Com um loop podemos por exemplo, imprimir em uma pgina os nmeros de 1 ao 100 sem a necessidade de escrever cem vezes a instruo a imprimir. Desde o 1 at o 100 Imprimir o nmero atual Em javascript existem vrios tipos de loops, cada um est indicado para um tipo de repetio distinto e so os seguintes: FOR WHILE DO WHILE Como j assinalamos as estruturas de controle so muito importantes em Javascript e em qualquer linguagem de programao. por isso que nos seguintes captulos 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 21/10/04 Valorize este artigo: IF uma estrutura de controle utilizada para tomar decises. uma condicional que realiza umas ou outras operaes em funo de uma expresso. Funciona da seguinte maneira, primeiro se avalia uma expresso se o resultado d positivo realizam-se as aes relacionadas com o caso positivo. A sintaxe da estrutura IF a seguinte: if (expresso) { aes a realizar em caso positivo ... } Opcionalmente se podem indicar aes a realizar no caso de que a avaliao da sentena d resultados negativos. if (expresso) { aes a realizar em caso positivo ... } else { aes a realizar em caso negativo ... } Observemos vrias coisas: Para comear vemos como com umas chaves englobam as aes que queremos realizar no caso de que se cumpram ou no as expresses. Estas chaves devem ser colocadas sempre, exceto no caso de que somente haja uma instruo como aes a realizar, que so opcionais. Outro detalhe que est descarado a margem que colocamos em cada um dos blocos de instrues 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 tambm no so necessrias e foram assim colocadas para que se veja melhor a estrutura. Poderamos perfeitamente colocar toda a instruo IF na mesma linha de cdigo, mas isso no ajudar que as coisas estejam claras. Ns, e qualquer

programador, aconselhamos que utilizem as margens e as quebras de linhas necessrias para que as instrues possam ser entendidas melhor, hoje e dentro de um ms, quando j no ser to fcil lembrar o que foi feitos em seus scripts. Vejamos um exemplo de condicionais IF. if (dia == "Segunda-feira") document.write ("Que tenha um timo comeo de semana") Se for segunda-feira nos desejar uma tima semana. No far nada em caso contrrio. Como neste exemplo somente indicamos uma instruo para o caso positivo, no ser preciso utilizar as chaves. Observe tambm no operador condicional que consta de dois signos "igual". Vamos ver agora outro exemplo, um pouco mais comprido. if (credito >= preo) { document.write("comprou o artigo " + novoArtigo) //mostro compra carrinho += novoArtigo //coloco o artigo no carrinho da compra credito -= preo //diminuo o crdito conforme o preo do artigo } else { document.write("acabou o seu crdito") //informo que lhe falta dinhero window.location = "carrinhodacompra.html" //vou pgina do carrinho } Este exemplo um pouco mais complexo, e tambm um pouco fictcio. O que fao comprovar se tenho crdito para realizar uma suposta compra. Para isso, vejo se o crdito maior ou igual que o preo do artigo, se assim, informa da compra, coloco o artigo no carrinho e subtraio o preo ao crdito acumulado. Se o preo do artigo superior ao dinheiro disponvel, informo a situao e mando ao navegador pgina onde se mostra seu carrinho da compra. Expresses condicionais A expresso a avaliar se coloca sempre entre parntesis e est composta por variveis que se combinam entre si mediante operadores condicionais. Lembramos que os operadores condicionais relacionavam duas variveis 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 pgina para adultos") Neste exemplo, utilizamos em operador condicional " maior" (>). Neste caso, devolve true se a varivel idade maior que 18, com o que se executaria a linha seguinte que nos informa de que se pode ver o contedo para adultos. As expresses condicionais podem ser combinadas com as expresses lgicas para criar expresses mais complexas. Lembramos que as expresses lgicas so as que tm como operandos aos boleanos e que devolvem outro valor boleano. So os operadores de negao lgica, E lgico e O lgico. 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 tambm comprovamos se o computador no tem rede eltrica (se est fora da tomada). Logo, o operador lgico os relaciona com um E, de modo que se est sem bateria E sem rede eltrica, informo que o ordenador vai se apagar. A lista de operadores que se podem utilizar com as estruturas IF, podem ser vistos no captulo de operadores condicionais e operadores lgicos.

Estrutura IF (parte II) Vemos mais coisas sobre a estrutura IF: a aninhamento de IFs e o operador ?, um IF simples. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 21/10/04 Valorize este artigo: Sentenas IF aninhadas Para fazer estruturas condicionais mais complexas podemos aninhar sentenas IF, ou seja, colocar estruturas IF dentro de outras estruturas IF. Com um s IF podemos avaliar e realizar uma ao ou outra segundo duas possibilidades, mas se temos mais possibilidades que avaliar devemos aninhar Ifs para criar o fluxo de cdigo necessrio para decidir corretamente.

Por exemplo, se desejo comprovar se um nmero maior ou igual ao outro, tenho que avaliar trs possibilidades distintas. Primeiro, posso comprovar se os dois nmeros so iguais, se so, j est resolvido o problema, mas se no so iguais ainda terei que ver qual dos dois o maior. Vejamos este exemplo em cdigo Javascript. var numero1=23 var numero2=63 if (numero1 == numero2){ document.write("Os dois nmeros so iguais") }else{ if (numero1 > numero2) { document.write("O primeiro nmero maior que o segundo") }else{ document.write("O primeiro nmero menor que o segundo") } } O fluxo do programa como comentvamos antes, primeiro se avalia se os dois nmeros so iguais. No caso positivo se mostra uma mensagem o informando. No caso contrrio, j sabemos que so distintos, mas ainda devemos averiguar qual dos dois maior. Para isso, faz-se outra comparao para saber se o primeiro maior que o segundo. Se esta comparao d resultados positivos mostramos uma mensagem dizendo que o primeiro maior que o segundo, em caso contrrio indicaremos que o primeiro menor que o segundo. Voltamos a ressaltar que as chaves neste caso so opcionais, pois s se executa uma sentena para cada caso. Ademais, as quebras de linhas e as margens so opcionais em todo caso e nos serve somente para ver o cdigo de uma maneira mais ordenada. Manter o cdigo bem estruturado e escrito de una maneira compreensvel muito importante, j que nos far a vida mais agradvel na hora de programar e mais adiante quando tenhamos que revisar os programas. Neste manual utilizarei uma anotao como a que pode ser vista nas linhas anteriores, e tambm ser visto adiante, ademais manterei essa anotao em todo momento. Isto sem lugar dvidas far com que os cdigos com exemplos sejam compreensveis mais rapidamente, se no fizssemos assim, seria um verdadeiro sacrifcio l-los. Esta mesma receita aplicvel aos cdigos que voc ir criar e o principal beneficiado ser voc mesmo e os companheiros que cheguem a ler seu cdigo. Operador IF Existe um operador que ainda no vimos e uma forma mais esquemtica de

realizar alguns IF simples. Provm da linguagem C, onde se escrevem muitas poucas linhas de cdigo 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 razo pela qual o incluo para que saiba que existe e se o encontra em alguma ocasio por a, voc saiba identific-lo e como funciona. Um exemplo de uso de operador IF pode ser visto a seguir: Varivel = (condio) ? valor1 : valor2 Este exemplo no s realiza uma comparao de valores, como tambm atribui um valor a uma varivel. O que faz avaliar a condio (colocada entre parnteses) e se positiva atribui o valor1 varivel e no caso contrrio 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" varivel 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" varivel momento.

Estrutura SWITCH Utilizada para tomar decises em funo de distintos estados das variveis. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 24/10/04 Valorize este artigo: a outra opo disponvel em Javascript para tomar decises em funo de distintos estados das variveis. Esta expresso se utiliza quando temos mltiplas possibilidades como resultado da avaliao de uma sentena. A estrutura SWITCH se incorporou a partir da verso 1.2 de Javascript (Netscape 4 e Internet Explorer 4). Sua sintaxe a seguinte: switch (expresso) { case valor1: Sentenas a executar se a expresso tem como valor a valor1

break case valor2: Sentenas a executar se a expresso tem como valor a valor2 break case valor3: Sentenas a executar se a expresso tem como valor a valor3 break default: Sentenas a executar se o valor no nenhum dos anteriores } A expresso se avalia, se vale valor1 se executam as sentenas relacionadas com esse caso. Se a expresso vale valor2 se executam as instrues relacionadas com esse valor e assim, sucessivamente, por tantas opes como desejarmos. Finalmente, para todos os casos no contemplados anteriormente se executa o caso por padro. A palavra break opcional, mas se no a colocamos a partir de que se encontre coincidncia com um valor se executaro todas as sentenas relacionadas com este e todas as seguintes. Ou seja, se em nosso esquema anterior no tivesse nenhuma expresso que valesse valor1, se executariam sentenas relacionadas com valor1 e tambm as relacionadas com valor2, valor3 e default. Tambm opcional a opo default ou opo por padro. 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 (tera) devemos colocar uma mensagem diferente e assim, sucessivamente para cada dia da semana, menos no 6 (sbado) e 7 (domingo) que queremos mostrar a mensagem " fim de semana". Para dias maiores que 7 indicaremos que esse dia no existe. Switch (dia_da_semana) { case 1: document.write(" segunda-feira") break case 2: document.write(" tera-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 no existe") } O exemplo relativamente simples, somente pode ter uma pequena dificuldade, consistente em interpretar o que passa no caso 6 e 7, que havamos dito que tnhamos que mostrar a mesma mensagem. No caso 6 na verdade no indicamos nenhuma instruo, mas como tampouco colocamos um break se executar a sentena ou sentenas do caso seguinte, que correspondem com a sentena 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 Descrio e exemplos de funcionamento do loop FOR. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 24/10/04 Valorize este artigo: O loop FOR se utiliza para repetir mais instrues um determinado nmero de vezes. Entre todos os loops, o FOR costuma ser utilizado quando sabemos ao certo o nmero de vezes que queremos que seja executada a sentena. A sintaxe do loop se mostra a seguir: for (iniciao;condio;atualizao) { sentenas a executar em cada repetio } O loop FOR tem trs partes includas entre os parnteses. A primeira a

iniciao, que se executa somente ao comear a primeira repetio do loop. Nesta parte costuma-se colocar a varivel que utilizaremos para levar a conta das vezes que se executa o loop. A segunda parte a condio, que se avaliar cada vez que comece a repetio do loop. Contm uma expresso para comprovar quando se deve deter o loop, ou melhor dizendo, a condio que se deve cumprir para que continue a execuo do loop. Por ltimo temos a atualizao, que serve para indicar as mudanas que quisermos executar nas variveis cada vez que termine a interao do loop, antes de comprovar se se deve seguir executando. Depois do for se colocam as sentenas que queremos que se executem em cada repetio, limitadas entre chaves. Um exemplo de utilizao deste loop pode ser visto a seguir, onde se imprimiro os nmeros do 0 ao 10. var i for (i=0;i<=10;i++) { document.write(i) } Neste caso se inicia a varivel i a 0. Como condio para realizar uma repetio, tem de se cumprir que a varivel i seja menor ou igual a 10. Como atualizao se incrementar em 1 a varivel 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 nmero 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 repetio atualizamos o valor de i incrementando-lhe em 2 unidades. Outro detalhe: no utilizamos as chaves englobando as instrues do loop FOR porque s tem uma sentena e neste caso no obrigatrio, tal como acontecia com as instrues do IF.

Se quisermos contar decrescentemente do 343 ao 10 utilizaramos este loop. for (i=343;i>=10;i--) document.write(i) } Neste caso decrementamos em uma unidade a varivel i em cada repetio. Exemplo Vamos fazer uma pausa para assimilar o loop for com um exerccio que no implica nenhuma dificuldade se entendemos o funcionamento do loop. Trata-se de fazer um loop que escreva em uma pgina web os cabealhos desde at com um texto que ponha "Cabealho de nvel x".

O que desejamos escrever em uma pgina web mediante Javascript o seguinte: < H1>Cabealho de nvel 1</H1> < H2>Cabealho de nvel 2</H2> < H3> Cabealho de nvel 3</H3> < H4> Cabealho de nvel 4</H4> < H5> Cabealho de nvel 5</H5> < H6> Cabealho de nvel 6</H6> Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em cada repetio escreveremos o respectivo cabealho. for (i=1;i<=6;i++) { document.write("<H" + i + ">Cabealho de nvel " + i + "</H" + i + ">") }

Loops WHILE e DO WHILE Descrio e diferentes usos dos dois tipos de loops WHILE com alguns exemplos.

Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 26/10/04 Valorize este artigo: 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 nmero indefinido de vezes a execuo de umas sentenas, sempre que se cumpra uma condio. Sim, que mais simples de compreender que o loop FOR, pois no incorpora na mesma linha a iniciao das variveis, sua condio para continuar executando e sua atualizao. Somente se indica, como veremos a seguir, a condio que tem que se cumprir para que se realize uma repetio. while (condio){ sentenas a executar } Um exemplo de cdigo 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 usurio introduza uma cor, mas que no seja a cor vermelha. Para executar um loop como este primeiro temos que iniciar a varivel que vamos utilizar na condio de repetio do loop. Com a varivel iniciada podemos escrever o loop, que comprovar para executar que a cor da varivel seja diferente de "vermelha". Em cada repetio do loop pede-se uma nova cor ao usurio para atualizar a varivel cor e termina-se a repetio, com o que retornamos ao princpio do loop, onde temos que voltar a avaliar se o que h na varivel cor "vermelha" e assim sucessivamente enquanto no seja introduzido como cor o texto "vermelho". Obviamente, a expresso "me d uma cor" no Javascript, mas como ainda no 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 no sabemos quantas vezes haver de se executar o loop, assim como o loop WHILE, com a diferena 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 verso 4 ou superior. Em qualquer caso, qualquer cdigo que se queira escrever com DO...WHILE pode ser escrito tambm 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 { sentenas do loop } while (condio) O loop se executa sempre uma vez e ao final se avalia a condio para dizer se se executa outra vez o loop ou se termina sua execuo. 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 no tivemos que iniciar a varivel 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 prtico sobre como trabalhar com um loop WHILE. Como muito difcil fazer exemplos prticos, com o pouco que sabemos sobre Javascript, vamos adiantar uma instruo que ainda no conhecemos. Neste exemplo vamos declarar uma varivel e inici-la a 0. Logo, iremos somando a essa varivel um nmero aleatrio do 1 ao 100 at somarmos 1.000 ou mais, imprimindo o valor da varivel soma depois de cada operao. Ser necessrio utilizar o loop WHILE porque no sabemos exatamente o nmero de repeties 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 no haver problemas, mas onde sim que pode haver na sentena utilizada para tomar um nmero aleatrio. Entretanto, no necessrio explicar aqui a sentena porque j temos planejado fazer mais adiante.

Break e Continue Duas instrues que aumentam o controle sobre os loops. Servem para parlos ou para continuar com a seguinte repetio. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 26/10/04 Valorize este artigo: De maneira adicional ao uso das distintas estruturas de loop se podem utilizar duas instrues para Deter a execuo de um loop e sair dele Deter a repetio atual e voltar ao princpio do loop. So as instrues break e continue. Break Detm-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 nmeros do 0 ao 9 e em cada repetio do loop, pergunta ao usurio se deseja continuar. Se o usurio diz qualquer coisa continua, exceto quando diz "no" que ento se sai do loop e deixa a conta por onde havia deixado. Continue Serve para voltar ao princpio 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 condies normais contaria at desde i=0 at i=7, mas cada vez que se executa o loop pergunta ao usurio se deseja incrementar a varivel ou no. Se se introduz "no" se executa a sentena continue, com o qual se volta ao princpio do loop sem chegar a incrementar em 1 a varivel i, j que se ignoram as sentenas que hajam por debaixo do continue. Exemplo Um exemplo mais prtico sobre estas instrues pode ser visto a seguir. Tratase 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 28/10/04 Valorize este artigo: Aninhar um loop consiste colocar esse loop dentro de outro. O aninhamento de loops necessrio para fazer determinados processamentos um pouco mais complexos dos que os que vimos nos exemplos anteriores e com certeza que em sua experincia como programador j deve ter utilizado ou seno, utilizar em um futuro. Um loop aninhado tem a estrutura como a que segue abaixo. Vamos explic-lo atravs destas linhas: for (i=0;i<10;i++){ for (j=0;j<10;j++) { document.write(i + "-" + j) } } A execuo funcionar da seguinte forma. Para comear inicia-se o primeiro loop, com o que a varivel i valer 0 e a seguir inicia-se o segundo loop, com o que a varivel j valer tambm 0. Em cada repetio imprime-se o valor da varivel i, um hfen ("-") e o valor da varivel j, como as duas variveis valem 0, se imprimir o texto "0-0" na pgina web. O loop que est aninhado (mais para dentro) o que mais se executa, neste exemplo, para cada repetio do loop mais externo, o loop aninhado se executar por completo uma vez, ou seja, far suas 10 repities. Na pgina web se escreveriam estes valores, na primeira repetio do loop externo e desde o princpio: 0-0 0-1 0-2 0-3 0-4 0-5 0-6 0-7 0-8 0-9 Para cada repetio do loop externo se executaro as 10 repeties do loop

interno ou aninhado. Vimos a primeira repetio, agora veremos as seguintes repeties do loop externo. Em cada uma acumula uma unidade na varivel 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 alcanasse o valor 9-9. Vejamos um exemplo muito parecido ao anterior, embora um pouco mais til. Trata-se de imprimir na pgina 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 ttulo, 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.

Funes em Javascript Definimos o conceito de funo e aprendemos a cri-las e a cham-las. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 28/10/04 Valorize este artigo: Agora veremos um assunto muito importante, sobretudo para os que nunca programaram e esto dando seus primeiros passos no mundo da programao com Javascript, j que veremos um conceito novo, o de funo, e os usos que tm. Para os que j conhecem o conceito de funo tambm ser um captulo til, pois tambm veremos a sintaxe e o funcionamento das funes em Javascript. O que uma funo Na hora de fazer um programa levemente grande existem determinados processos que se podem conceber de forma independente, e que so mais simples de resolver que o problema inteiro. Ademais, estes costumam ser realizados repetidas vezes ao longo da execuo do programa. Estes processos podem se agrupar em uma funo, definida para que no tenhamos que repetir uma vez ou outra esse cdigo em nossos scripts, e sim, simplesmente chamamos a funo, e ela se encarrega de fazer tudo o que deve. Portanto, podemos ver uma funo como uma srie de instrues 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 pgina web pode haver uma funo para mudar a cor de fundo e de qualquer ponto da pgina poderamos cham-la para que nos mude a cor quando desejarmos. As funes utilizam-se constantemente, no s as que voc escreve como tambm as que j esto definidas no sistema, pois todas as linguagens de

programao tm um monto de funes para realizar processos habituais como, por exemplo, obter a hora, imprimir uma mensagem na tela ou converter variveis de um tipo a outro. J vimos alguma funo em nossos simples exemplos anteriores quando fazamos um document.write() na verdade estvamos chamando funo write() associada ao documento da pgina que escreve um texto na pgina. Nos captulos de funes vamos ver primeiro como realizar nossas prprias funes e como cham-las logo. Ao longo do livro veremos muitas das funes definidas em Javascript que devemos utilizar para realizar distintos tipos de aes habituais. Como se escreve uma funo Uma funo deve-se definir com uma sintaxe especial que vamos conhecer a seguir: function nomefuncao (){ instrues da funo ... } Primeiro escreve-se a palavra funo, reservada para este uso. Seguidamente se escreve o nome da funo, que como os nomes de variveis podem ter nmeros, letras e algum caractere adicional como um hfen abaixo. A seguir se colocam entre chaves as diferentes instrues da funo. As chaves no caso das funes no so opcionais, ademais til coloc-las sempre como se v no exemplo, para que seja visto facilmente a estrutura de instrues que engloba a funo. Vejamos um exemplo de funo para escrever na pgina 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 pgina um texto, uma funo to simples que o exemplo no expressa suficientemente o conceito de funo, mais j veremos outras mais complexas. As etiquetas H1 no se escrevem na pgina, e sim so interpretadas como o significado da mesma, neste caso que escrevemos uma cabealho de nvel 1. Como estamos escrevendo em uma pgina web, ao colocar etiquetas HTML se interpretam como o que so. Como chamar a uma funo

Quando se chamam s funes: Para executar uma funo temos que chamla em qualquer parte da pgina, com isso conseguiremos que se executem todas as instrues que tem a funo entre as duas chaves. Para executar a funo utilizamos seu nome seguido dos parnteses. NomeDaFuncao()

Onde colocamos as funes Vemos a maneira de inserir as funes Javascript de cliente dentro das pginas web. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 31/10/04 Valorize este artigo: princpio, podemos colocar as funes em qualquer parte da pgina, claro que sempre entre etiquetas <SCRIPT>. No obstante, existe uma limitao na hora de coloc-la em relao aos lugares de onde for chamada. O mais normal colocar a funo antes de qualquer chamada mesma e assim, certamente no iremos nos enganar. Teoricamente, a funo deve-se definir no bloco <SCRIPT> onde esteja a chamada funo, embora seja indiferente se a chamada se encontrar antes ou depois da funo, dentro do mesmo bloco <SCRIPT>. < SCRIPT> minhaFuncao() function minhaFuncao(){ //fao algo... document.write("Isto est bem") } < /SCRIPT> Este exemplo funciona corretamente porque a funo est declarada no mesmo bloco que sua chamada. Tambm vlido que a funo se encontre em um bloco <SCRIPT> anterior ao bloco onde est a chamada. <HTML>

< HEAD> <TITLE>MINHA PGINA</TITLE> < SCRIPT> function minhaFuncao(){ //fao algo... document.write("Isto est bem") } < /SCRIPT> < /HEAD> < BODY> < SCRIPT> minhaFuncao() < /SCRIPT> < /BODY> < /HTML> Vemos um cdigo completo sobre como poderia ser uma pgina web onde as funes esto no cabealho. Um lugar muito bom para coloc-las, porque se supem que no cabealho ainda no vo utilizar e sempre poderemos desfrutar deles no corpo porque certamente j foram declarados. Este ltimo em compensao seria um erro: O que ser um erro uma chamada a uma funo que se encontra declarada em um bloco <SCRIPT> posterior. < SCRIPT> minhaFuncao() < /SCRIPT> < SCRIPT> function minhaFuncao(){ //fao algo... document.write("Isto est bem") } < /SCRIPT>

Parmetros das funes Vemos o que so os parmetros em chamadas funes e como utiliz-los.

Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 31/10/04 Valorize este artigo: As estruturas que vimos anteriormente sobre funes no so as nicas que devemos aprender para manej-las em toda a sua potncia. As funes tambm tm uma entrada e uma sada, que se podem utilizar para receber e devolver dados. Parmetros Os parmetros se usam para mandar valores funo, com os quais ela trabalhar para realizar as aes. So os valores de entrada que recebem uma funo. Por exemplo, uma funo que realizasse uma soma de dois nmeros teria como parmetros a esses dois nmeros. Os dois nmeros so a entrada, assim como a sada seria o resultado, mais isso ser visto mais tarde. Vejamos um exemplo anterior no qual crivamos uma funo para mostrar uma mensagem de boas vindas pgina web, mas que agora passaremos um parmetro 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 funo um parmetro temos que por o nome da varivel que vai armazenar o dado que passarmos. Essa varivel, que neste caso se chama nome, ter como valor o dado que passarmos a esta funo quando a chamarmos, al disso, a varivel ter vida durante a execuo da funo e deixar de existir quando a funo terminar sua execuo. Para chamar a uma funo que tem parmetros coloca-se entre parntesis o valor do parmetro. Para chamar funo do exemplo haveria que escrever: escreverBoasvindas("Alberto Garcia") Ao chamar funo assim, o parmetro nome toma como valor "Alberto Garcia" e ao escrever a saudao na tela escrever "Ol Alberto Garcia" entre etiquetas <H1>. Os parmetros podem escrever qualquer tipo de dados, numrico, textual,

boleano ou um objeto. Realmente no especificamos o tipo do parmetro, por isso devemos ter um cuidado especial ao definir as aes que realizamos dentro da funo e ao passar valores funo para assegurarmos que tudo conseqente com os tipos de nossas variveis ou parmetros. Mltiplos parmetros Uma funo pode receber tantos parmetros quanto quisermos e para express-lo colocam-se os parmetros separados por vrgulas dentro dos parnteses. Vejamos rapidamente a sintaxe para que a funo de antes receba dois parmetros, 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>") } Chamaramos funo com esta sintaxe. Entre parnteses colocaremos os valores dos parmetros. var meuNome = "Pedro" var minhaCor = "red" escreverBoasvindas(meuNome,minhaCor) Coloquei entre parnteses, duas variveis no lugar de dois textos entre aspas. Quando colocamos variveis entre os parmetros na verdade o que estamos passando funo so os valores que contm as variveis e no as mesmas variveis. Parmetros passam-se por valor Para seguir a linha do uso de parmetros em nossos programas Javascript, temos que indicar que os parmetros das funes se passam por valor. Isto quer dizer que mesmo que modifiquemos um parmetro em uma funo a varivel original que havamos passado no 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 funo que recebe um parmetro, e que modifica o valor do parmetro atribuindo-lhe o valor 32. Tambm temos uma varivel, que iniciamos a 5 e posteriormente chamamos funo passando esta varivel como parmetro. Como dentro da funo modificamos o valor do parmetro poderia acontecer da varivel original mudasse de valor, mas como os parmetros no modificam o valor original das variveis, esta no muda de valor. Deste modo, ao imprimir na tela o valor de minhaVariavel se imprimir o nmero 5, que o valor original da varivel, no lugar de 32 que era o valor col o que havamos atualizado o parmetro. Em javascript somente se podem passar as variveis por valor.

Valores de retorno Veremos como as funes podem devolver valores. Tambm veremos um apontamento sobre o mbito de variveis em funes em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 02/11/04 Valorize este artigo: As funes tambm podem retornar valores, de modo que ao executar a funo poder se realizar aes e dar um valor como sada. Por exemplo, uma funo que calcula o quadrado de um nmero ter como entrada -tal como vimos- a esse nmero e como sada ter o valor resultante de encontrar o quadrado desse nmero. Uma funo que devolva o dia da semana teria como sada em dia da semana. Vejamos un exemplo de funo que calcula a mdia de dois nmeros. A funo receber os dois nmeros e retornar o valor da mdia. function media(valor1,valor2){ var resultado resultado = (valor1 + valor2) / 2 return resultado } Para especificar o valor que retornar a funo se utiliza a palavra return seguida do valor que se deseja devolver. Neste caso se devolve o contedo da

varivel resultado, que contm a mdia dos dois nmeros. Para receber os valores que devolve uma funo se coloca o operador de atribuio =. Para ilustrar isto, pode-se ver este exemplo, que chamar funo mdia() e salvar o resultado da mdia em uma varivel para logo, imprimi-la na pgina. var minhaMedia minhaMedia = media(12,8) document.write (minhaMedia) Mltiplos return Em uma mesma funo podemos colocar mais de um return. Logicamente s vamos poder retornar uma coisa, mas dependendo do que tenha acontecido na funo poder ser de um tipo ou de outro, com uns dados ou outros. Nesta funo podemos ver um exemplo de utilizao de mltiplos return. Tratase de uma funo que devolve um 0 se o parmetro recebido era par e o valor do parmetro se este era mpar. function multiploReturn(numero){ var resto = numero % 2 if (resto == 0) return 0 else return numero } Para averiguar se um nmero par encontramos o resto da diviso ao dividi-lo entre 2. Se o resto zero porque era par e devolvemos um 0, em caso contrrio -o nmero mpar- devolvemos o parmetro recebido. mbito das variveis em funes Dentro das funes podemos declarar variveis, inclusive os parmetros so como variveis que se declaram no cabealho da funo e que se iniciam ao chamar a funo. Todas as variveis declaradas em uma funo so locais a essa funo, ou seja, somente tero validade durante a execuo da funo. Podemos declarar variveis em funes que tenham o mesmo nome que uma varivel global pgina. Ento, dentro da funo a varivel que ter validade a varivel local e fora da funo ter validade a varivel global pgina.

Em troca, se no declaramos as variveis nas funes se entender por javascript que estamos fazendo referncia a uma varivel global pgina, de modo que se no est criada, a varivel a cria, mas sempre global pgina no lugar de local funo.

Arrays em Javascript Vemos o que so os arrays, para que servem e como utiliz-los. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 02/11/04 Valorize este artigo: Nas linguagens de programao existem estruturas de dados especiais que nos servem para salvar informaes mais complexas do que simples variveis. Uma estrutura tpica em todas as linguagens o Array, que como uma varivel onde podemos introduzir vrios valores, ao invs de somente um como ocorre com as variveis normais. Os arrays nos permitem salvar vrias variveis e acess-las de maneira independente, como ter uma varivel com distintos compartimentos onde podemos introduzir dados distintos. Para isso utilizamos um ndice que nos permite especificar o compartimento ou posio ao qual estamos nos referindo. Os arrays foram introduzidos em verses 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 programao orientada a objetos, mas dada a complexidade desta tarefa, pelo menos no momento em que nos encontramos e as poucas ocasies que os deveremos utilizar, vamos ver como utilizar o autntico array de Javascript. Criao 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 orientao a objetos, embora no ser necessrio para poder entender o uso dos arrays. Esta a sentena para criar um objeto array: var meuArray = new Array() Isto cria um array na pgina que est se executando. O array se cria sem

nenhum contedo, ou seja, no ter nenhum campo ou compartimento criado. Tambm podemos criar o array especificando o nmero de compartimentos que vai ter. var meuArray = new Array(10) Neste caso indicamos que o array vai ter 10 posies, ou seja, 10 campos onde salvar dados. importante observarmos que a palavra Array em cdigo Javascript se escreve com a primeira letra em maiscula. Como em Javascript as maisculas e minsculas sim que importam, se escrevemos em minscula no funcionar. Podemos introduzir no array qualquer dado, tanto se indicamos ou no o nmero de campos do array. Se o campo est criado se introduz simplesmente e se o campo no estava ccriado se cria e logo, se introduz o dado, com o qual o resultado final ser o mesmo. Esta criao de campos dinmica 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 posio onde queramos salvar o dado. Neste caso introduzimos 290 na posio 0, 97 na posio 1 e 127 na 2. Os arrays comeam sempre na posio 0, portanto, um array que tenha por exemplo 10 posies, ter campos do 0 ao 9. Para recolher dados de um array fazemos da mesma forma: colocando entre colchetes o ndice da posio a qual queremos acessar. Vejamos como se imprimiria na tela o contedo de um array. var meuArray = new Array(3) meuArray[0] = 155 meuArray[1] = 4 meuArray[2] = 499 for (i=0;i<3;i++){ document.write("Posio " + i + " do array: " + meuArray[i]) document.write("<br>") } Criamos um array com trs posies, logo introduzimos um valor em cada uma

das posies do array e finalmente imprimimos. Em geral, o percurso por arrays para imprimir suas posies 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 pgina. 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 nmeros 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 17/11/04 Valorize este artigo: Todos os arrays em javascript, alm de armazenar o valor de cada uma de suas posies tambm armazenam o nmero de posies que tm. 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 varivel, adicional s posies, que armazena um nmero igual ao nmero de campos do array. Para acessar a uma propriedade de um objeto h que utilizar o operador ponto.

Escreve-se o nome do array que queremos acessar ao nmero de posies que tem, sem colchetes nem parnteses, 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 cdigo imprimiria na tela o nmero de posies do array, que neste caso 3. Recordamos que um array com 3 posies abarca desde a posio 0 a 2. muito habitual que se utilize a propriedade length para poder percorrer um array por todas suas posies. 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, extrada de sua propriedade length. O seguinte exemplo nos servir para conhecer melhor os percursos pelos arrays, o funcionamento da propriedade length e a criao dinmica de novas posies. Vamos criar um array com 2 posies e preencher seu valor. Posteriormente, introduziremos um valor na posio 5 do array. Finalmente, imprimiremos todas as posies do array para ver o que acontece. var meuArray = new Array(2) meuArray[0] = "Colmbia" meuArray[1] = "Estados Unidos" meuArray[5] = "Brasil" for (i=0;i<meuArray.length;i++){ document.write("Posio " + i + " do array: " + meuArray[i]) document.write("<br>") }

O exemplo simples. Pode-se apreciar que fazemos um percurso pelo array desde 0 at o nmero de posies do array (indicado pela propriedade length). No percurso vamos imprimindo o nmero da posio seguido do contedo do array nesta posio. Mas podemos ter uma dvida ao perguntarmos qual ser o nmero de elementos deste array, j que o havamos declarado com 2 e logo lhe introduzimos um terceiro na posio 5. Ao ver a sada do programa poderemos contestar nossas perguntas. Ser algo parecido a isto: Posio 0 do array: Colmbia Posio 1 do array: Estados Unidos Posio 2 do array: null Posio 3 do array: null Posio 4 do array: null Posio 5 do array: Brasil Pode-se ver claramente que o nmero de posies 6, da 0 a 5. O que ocorreu que ao introduzir um dado na posio 5, todas os campos que no estavam criados at o quinto se criaram tambm. As posies da 2 a 4 esto sem iniciar. Neste caso nosso navegador escreveu a palavra null para expressar isto, mas outros navegadores podero utilizar a palavra undefined. Veremos mais adiante qual este null e onde o podemos utilizar, o importante agora compreender como trabalham os arrays e utilizalos corretamente.

Arrays multidimensionais Vemos o que so os arrays multidimensionais e como utiliz-los. Ademais explicamos como iniciar arrays em sua declarao. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 17/11/04 Valorize este artigo: Os arrays multidimensionais so estruturas de dados que armazenam os valores em mais de uma dimenso. Os arrays que vimos at agora armazenam valores em uma dimenso, por isso para acessar s posies utilizamos somente um ndice. Os arrays de 2 dimenses salvam seus valores de alguma forma como em filas e colunas e por isso, necessitaremos dois ndices para acessar a cada uma de suas posies.

Com outras palavras, um array multidimensional como um continer que guardar mais valores para cada posio, ou seja, como se os elementos do array fossem por sua vez outros arrays. Em Javascript no existe um autntico objeto array-multidimensinal. Para utilizar estas estruturas poderemos definir arrays onde, em cada uma de suas posies haver outro array. Em nossos programas poderemos utilizar arrays de qualquer dimenso, veremos a seguir como trabalhar com de duas dimenses, que sero os mais comuns. Neste exemplo vamos criar um array de duas dimenses onde teremos por um lado cidades e por outro a temperatura mdia que faz em cada uma durante os meses de inverno. var temperaturas_medias_cidade0 = new Array(3) temperaturas_medias_cidade0[0] = 12 temperaturas_medias_cidade0[1] = 10 temperaturas_medias_cidade0[2] = 11 var temperaturas_medias_cidade1 = new Array (3) temperaturas_medias_cidade1[0] = 5 temperaturas_medias_cidade1[1] = 0 temperaturas_medias_cidade1[2] = 2 var temperaturas_medias_cidade2 = new Array (3) temperaturas_medias_cidade2[0] = 10 temperaturas_medias_cidade2[1] = 8 temperaturas_medias_cidade2[2] = 10 Com as anteriores linhas criamos trs arrays de 1 dimenso e trs elementos, como os que j conhecamos. Agora criaremos um novo array de trs 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 dimenses. var temperaturas_cidades = new Array (3) temperaturas_cidades[0] = temperaturas_medias_cidade0 temperaturas_cidades[1] = temperaturas_medias_cidade1 temperaturas_cidades[2] = temperaturas_medias_cidade2 Vemos que para introduzir o array inteiro fazemos referncia ao mesmo sem parnteses nem colchetes, simplesmente com seu nome. O array temperaturas_cidades nosso array bidimensinal.

Tambm interessante ver como se realiza um percurso por um array de duas dimenses. 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 mtodo 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 ns j tivemos a oportunidade de praticar em um captulo 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 ao consiste em escrever o cabealho da tabela, ou seja, a etiqueta <TABLE> junto com seus atributos. Com o primeiro loop realizamos um percorrido primeira dimenso do array e utilizamos a varivel i para levar a conta da posio atual. Por cada iterao deste loop escrevemos uma fila e para comear a fila abrimos a etiqueta <TR>. Ademais, escrevemos em um campo o nmero da cidade que estamos percorrendo nesse momento. Posteriormente, colocamos outro loop que vai percorrendo cada um dos campos do array em sua segunda dimenso 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 trs temperaturas e, portanto, a fila est terminada. O primeiro loop continua se repetindo at que todas as cidades esto impressas e uma vez terminado fechamos a tabela. Podemos ver o exemplo em funcionamento e examinar o cdigo do script inteiro. Iniciao de arrays

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 rpida o processo de introduzir valores em cada uma das posies do array. Vimos que o mtodo normal de criar um array era atravs do objeto Array, colocando entre parnteses o nmero de campos do array ou no colocando nada, de modo que o array se crie sem nenhuma posio. Para introduzir valores a um array se faz igualmente, porm colocando entre parnteses os valores com os que desejamos preencher os campos separados por vrgula. Vejamos com um exemplo que cria um array com os nomes dos dias da semana. var diasSemana = new Array("Segunda","Tera","Quarta,","Quinta","Sexta","Sbado","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 ms.

Pausa e conselhos Javascript Fazemos uma pausa no manual de Javascript para oferecer uma srie de conselhos teis. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 18/11/04 Valorize este artigo: At aqui vimos a maior parte da sintaxe e da forma de funcionar da linguagem Javascript. Agora podemos escrever scripts simples que faam uso de variveis, funes, arrays, estruturas de controle e toda classe de operadores.

Com tudo isto, conhecemos a linguagem, mas ainda temos muito cho pela frente para dominar Javascript e saber fazer todos os efeitos possveis em pginas web, que definitivamente o que nos interessa. De qualquer forma, este manual foi feito com muita calma, com a inteno de que as pessoas que no estejam familiarizadas com o mundo da programao possam tambm ter acesso linguagem e aprendam as tcnicas bsicas que permitiro afrontar futuros retos na programao. Esperamos ento que o andamento deste manual tenha sido proveitoso para os mais inexperientes e que agora possam entender com facilidade as seguintes lies ou exemplos, j que conhecem as bases sobre as que esto implementados. Antes de acabar, vamos dar uma srie de conselhos a seguir na hora de programar nossos scripts que nos possam ajudar a tornar a vida mais fcil. Alguns conselhos so novos e importantes, outros foram assinalados anteriormente, mas sem dvida no custa nada relembrar. Distintos navegadores A primeira coisa importante para assinalar que Javascript uma linguagem muito dinmica e que foi implementada pouco a pouco, medida que saiam novos navegadores. Se pensarmos no Netscape 2, o primeiro navegador que inclua 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 tm que estar a par das distintas verses e a maneira de funcionar que tm. As bases de javascript, sobre as que falamos at agora, n mudaram praticamente nada. Somente em algumas ocasies, que assinalamos segundo as conhecamos -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 pginas sejam compatveis com o maior nmero de navegadores. Para buscar este ltimo muito aconselhvel provar as pginas em vrias plataformas distintas. Tambm muito til deixar de lado os ltimos avances, ou seja, no ir ltima novidade, e sim ser um pouco conservadores, para que as pessoas que atualizaram menos o browser possam tambm visualizar os contedos. Conselhos para fazer um cdigo simples e fcil de manter Agora vamos dar uma srie de conselhos para o cdigo de nossos scripts seja mais claro e livre de erros. Muitos deles j assinalamos, e somos livres de aplic-los ou no, mas se fazemos nossa tarefa como programadores pode ser

muito mais agradvel, na s hoje, como tambm o dia em que tenhamos que revisar os scripts em suas manutenes. Utilize comentrios 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 variveis, lembre-se que existem variveis globais e locais, que inclusive podem ter os mesmos nomes e conhea em cada momento a varivel que tem validade. Escreva um cdigo suficientemente claro, que se consegue com quebras de linhas depois de cada instruo, uma margem adequada (colocar margens a cada linha para indicar em que bloco esto includas), utilizar as chaves {} sempre, embora no sejam obrigatrias e em geral, manter sempre o mesmo estilo na hora de programar. Aplique um pouco de consistncia ao manejo de varivel. Declare as variveis com var. No mude o tipo do dado que contem (se era numrico no coloque logo texto, por exemplo). D nomes compreensveis para saber em todo momento o que contm. 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 contm. Por exemplo, as variveis de texto podem comear por uma s (de String), as variveis numricas podem comear por uma n ou as booleanas por uma b. Prove seus scripts aos poucos medida que for programando. Voc pode escrever um pedao de cdigo e provar antes de continuar para ver que tudo funciona corretamente. mais fcil encontrar os erros de cdigo 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 concluso da primeira parte do manual. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 18/11/04 Valorize este artigo:

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 concluso da primeira parte do manual. Erros comuns Quando executamos os scripts podem ocorrer dois tipos de erros de sintaxe ou de execuo, os vemos a seguir. Erros de sintaxe ocorrem por escrever de maneira errnea as linhas de cdigo, equivocar-se na hora de escrever o nome de uma estrutura, utilizar incorretamente as chaves ou os parnteses ou qualquer coisa similar. Javascript indica estes erros medida que est carregando os scripts em memria, o que faz sempre antes de executa-loa, como foi indicado nos primeiros captulos. Quando o analizador sinttico de javascript detecta um erro destes se apresenta a mensagem de erro. Erros de execuo ocorrem quando esto se executando os scripts. Por exemplo, podem ocorrer quando chamamos a uma funo que no foi definida. Javascript no indica estes erros at que no se realize a chamada funo. A maneira que tm javascript de mostrar um erro pode variar de um navegador a outro. Em verses antigas mostrava-se uma janelinha com o erro e um boto de aceitar, tanto em Internet Explorer como em Netscape. Atualmente, os erros de javascript permanecem um pouco mais ocultos ao usurio. Isto bom, porque se nossas pginas tm algum erro em alguma plataforma no ser muito incmodo para o usurio que em muitas ocasies no perceber. Entretanto, para o programador pode ser um pouco mais incmodo de revisar e se necessitar conhecer a maneira que se mostram os erros para que possam ser consertados. Em verses de Internet Explorer maiores que a 4 mostra-se o erro na barra de estado do navegador e pode-se ver uma descrio maior do erro se clicamos duas vezes no cone de alerta amarelo que aparece na barra de estado. Em Netscape aparece tambm uma mensagem na barra de estado que ademais nos indica que para mostrar mais informao devemos teclar "javascript:" na barra de endereos (onde escrevemos as URL para acessar s pginas). Com isso conseguimos que aparea a Consola javascript, que nos mostra todos os erros que se encontram nas pginas. Tambm podemos cometer falhas na programao que faam com que os scripts no funcionem tal e como desejvamos e que javascript no detecta como erros e portanto, no mostra nenhuma mensagem de erro.

Para deixar claro, veremos um exemplo no qual nosso programa pode no funcionar como desejamos sem que javascript oferea nenhuma mensagem de erro. Neste exemplo, trataramos de somar duas cifras, mas se uma das variveis do tipo texto poderamos encontrar com um erro. var numero1 = 23 var numero2 = "42" var soma = numero1 + numero2 Quanto vale a varivel soma? Como muitos j sabem, a varivel soma vale "2342" porque ao tentar somar uma varivel numrica e outra textual, tratam-se as duas como se fossem do tipo texto e portanto, o operador + se aplica como uma concatenao de cadeias de caracteres. Se no estamos ao par desta questo poderamos ter um erro em nosso script j que o resultado no o esperado e ademais o tipo da varivel que se soma no numrico e sim, uma cadeia de caracteres. Evitar erros comuns Vamos ver agora uma lista dos erros tpicos cometidos por inexperientes na programao em geral e em javascript em particular, e tambm, por no to inexperientes. Utilizar = em expresses condicionais no lugar de == um erro difcil de detectar quando se comete, se utilizamos um s igual o que estamos fazendo uma atribuio e no uma comparao para ver se dois valores so iguais. No conhecer a procedncia de operadores e no utilizar parnteses para agrupar as operaes que se deseja realizar. Neste caso nossas operaes podem dar resultados no 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 vrias sentenas na mesma linha sem separ-las de ponto e vrgula. Isto costuma acontecer nos manipuladores de eventos, como onclick, que veremos mais adiante. Utilizar uma varivel antes de inici-la ou no declarar as variveis com var antes de utiliza-las tambm so erros comuns. Lembre-se que se no a declaras poder estar fazendo referncia a uma varivel global no lugar de

uma local. Contar as posies dos arrays a partir de 1. Lembre-se que os arrays comeam pela posio 0. Depurar erros javascript Qualquer programa suscetvel de conter erros. Javascript nos informar de muitos dos erros da pgina: os que tm relao com a sintaxe e os que tm lugar no momento da execuo dos scripts a causa de equivocarmos ao escrever o nome de uma funo ou de uma varivel. Entretanto, no so os nicos erros que podemos encontrar, tambm esto os erros que ocorrem sem que javascript mostre a correspondente mensagem de erro, como vimos anteriormente, mas que fazem com que os programas no funcionem como espervamos. Para todo tipo de erro, uns mais fceis de detectar que outros, devemos utilizar alguma tcnica de depurao que nos ajude a encontra-los. Linguagens de programao mais potentes que a que tratamos agora incluem importantes ferramentas de depurao, porm em javascript devemos nos contentar com uma rudimentar tcnica. Trata-se de utilizar uma funo pr-definida, a funo alert() que recebe entre parnteses um texto e o mostra em uma pequena janela que tem um boto de aceitar. Com a funo alert() podemos mostrar em qualquer momento o contedo das variveis que estamos utilizando em nossos scripts. Para isso colocamos entre parnteses a varivel que desejamos ver seu contedo. Quando se mostra o contedo da varivel o navegador espera que apertemos o boto de aceitar e quando o fazemos continua com as seguintes instrues do script. Este um simples exemplo sobre como se pode utilizar a funo alert() para mostrar o contedo das variveis. 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 funo alert() se mostra o contedo das duas variveis que utilizamos no script. Algo similar a isto o que teremos que fazer para mostrar o contedo das variveis e saber como esto funcionando nossos scripts, se vai tudo bem

ou se h algum erro. Concluso At aqui conhecemos a sintaxe javascript em profundidade. Embora ainda faltam coisas importantes de sintaxe, a viso 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 pginas web. Veremos a hierarquia de objetos do navegador, como construir nossos prprios objetos, as funes pr-definidas de javascript, caractersticas do HTML Dinmico, trabalho com formulrios e outras coisas importantes para dominar todas as possibilidades da linguagem.

Introduo ao manual II de Javascript Comeamos o segundo manual de Javascript com um repasso aos temas que vamos abordar. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 04/1/05 Valorize este artigo: 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 aplicaes. Para ler e entender bem o que vem nos seguintes captulos necessrio ter lido antes a primeira parte deste manual: Programao 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 aplicaes de Javascript, mas, sobretudo ressaltamos sua sintaxe que muito importante para entender os scripts que faremos nos seguintes captulos. Os objetivos dos seguintes captulos cobriro aspectos diversos de Javascript como: Funes incorporadas na linguagem Javascript Os objetos em Javascript Hierarquia de objetos do navegador

Trabalho com formulrios Controle de janelas secundrias e frames Eventos Como se pode ver, todos os temas tm um forte carter prtico e cobrem vrios aspectos com os quais formamos a nvel avanado em Javascript. Esperamos que sirvam para iluminar uma rea to ampla do desenvolvimento de pginas web como o scripting do lado do cliente. Vamos sem mais pausa com esta segunda parte do manual, que ser muito mais interessante e prtica que a primeira.

Biblioteca de funes Javascript Javascript, assim como qualquer outra linguagem, coloca a nossa disposio um conjunto de funes. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 04/1/05 Valorize este artigo: Em todas as linguagens de programao existem bibliotecas de funes que servem para fazer diversas coisas e muito competitiva na hora de programar. As bibliotecas das linguagens de programao economizam a tarefa de escrever as funes comuns que em geral os programadores podem necessitar. Uma linguagem de programao bem desenvolvida ter uma boa quantidade delas. Em algumas ocasies mais complicado conhecer todas as bibliotecas do que aprender a programar a linguagem. Javascript contem uma boa quantidade de funes em suas bibliotecas. Como se trata de uma linguagem que trabalha com objetos, muitas das bibliotecas se implementam atravs de objetos. Por exemplo, as funes matemticas ou as de manejo de strings se implementam mediante os objetos Math e String. Entretanto, existem algumas funes que no esto associadas a nenhum objeto e so as que veremos neste captulo, j que ainda no conhecemos os objetos e no os necessitaremos para estuda-las. Estas so as funes que Javascript coloca disposio dos programadores. eval(string) Esta funo recebe uma cadeia de caracteres e a executa como se fosse uma sentena de Javascript.

parseInt(cadeia,base) Recebe uma cadeia e uma base. Devolve um valor numrico resultante de converter a cadeia em um nmero na base indicada. parseFloat(cadeia) Converte a cadeia em um nmero e o devolve. escape(caractere) Devolve um caractere que recebe por parmetro em uma codificao ISO Latin 1. unescape(caractere) Faz exatamente o oposto da funo escape. isNaN(nmero) Devolve um booleano dependendo do que recebe por parmetro. Se no um nmero devolve um true, se um nmero devolve false. As bibliotecas que se implementam mediante objetos e as do manejo do explorador, que tambm se manejam com objetos, sero vistas mais adiante. Vamos ver algum exemplo com as funes mais importantes desta lista.

Exemplos das funes da biblioteca Javascript Vemos vrios exemplos de funes da biblioteca: eval(), parseInt(), isNaN()... Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 10/1/05 Valorize este artigo: Agora podemos ver vrios exemplos de utilizao de funes da biblioteca que proporciona Javascript. Funo eval Esta funo muito importante, tanto que existem algumas aplicaes de Javascript que no poderiam se realizar se no a utilizamos. A utilizao desta funo muito simples, mas pode ser que seja mais complexo entender em que caso utiliza-la porque s vezes um pouco sutil sua aplicao. Com os conhecimentos atuais no podemos dar um exemplo muito complicado, mas pelo menos podemos ver em funcionamento a funo. Vamos

utiliz-la em uma sentena um pouco rara e que no serve muito, mas se conseguimos entend-la, conseguiremos entender tambm a funo eval. var meuTexto = "3 + 5" eval("document.write(" + meuTexto +")") Primeiro, criamos uma varivel com um texto, na seguinte linha utilizamos a funo eval e como parmetro lhe passamos uma instruo javascript para escrever na tela. Se concatenamos os strings que existem dentro dos parnteses da funo eval ficaria asim. document.write(3 + 5) A funo eval executa a instruo que for passada por parmetro, portanto executar esta sentena, o que dar como resultado que se escreva um 8 na pgina web. Primeiro se resolve a soma que h entre parnteses, com o qual obtemos o 8 e logo se executa a instruo de escrever na tela. Funo parseInt Esta funo recebe um nmero, escrito como uma cadeia de caracteres, e um nmero que indica uma base. Na verdade pode receber outros tipos de variveis, dado que as variveis no tm tipo em Javascript, mas costuma-se utilizar passando um string para converter a varivel de texto em um nmero. As distintas bases que pode receber a funo so 2, 8, 10 e 16. Se no passamos nenhum valor como base a funo interpreta que a base decimal. O valor que devolve a funo sempre tem base 10, de modo que se a base no 10 converte o nmero a essa base antes de devolv-lo. Vejamos uma srie de chamadas funo parseInt para ver o que devolve e entender um pouco mais a funo. document.write (parseInt("34")) Devolve o nmero 34 document.write (parseInt("101011",2)) Devolve o nmero 43 document.write (parseInt("34",8)) Devolve o nmero 28 document.write (parseInt("3F",16)) Devolve o nmero 63 Esta funo se utiliza na prtica para um monte de coisas distintas no manejo com nmeros, por exemplo, obter a parte inteira de um decimal.

document.write (parseInt("3.38")) Devolve o nmero 3 Tambm muito habitual seu uso para saber se uma varivel numrica, pois se passamos um texto funo que no seja numrico nos devolver NaN (Not a Number) o que quer dizer que No um Nmero. document.write (parseInt("criarweb.com")) Devolve o nmero NaN Este mesmo exemplo interessante com uma modificao, pois se passamos uma combinao de letras e nmeros, daria o seguinte. document.write (parseInt("16XX3U")) Devolve o nmero 16 document.write (parseInt("TG45")) Devolve o nmero NaN Como se pode ver, a funo tenta converter o string em nmero e seno pode, devolve NaN. Todos estes exemplos, meio desconexos, sobre como trabalha parseInt sero revisados mais adiante em exemplos mais prticos quando tratarmos o trabalho com formulrios. Funo isNaN Esta funo devolve um booleano dependendo se o que se recebe um nmero ou no. O nico que pode receber um nmero ou a expresso NaN. Se recebe um NaN devolve true e se recebe um nmero devolve false. uma funo muito simples de entender e de utilizar. A funo costuma trabalhar em combinao com a funo parseInt ou parseFloat, para saber se o que devolvem estas duas funes um nmero ou no. meuInteger = parseInt("A3.6") isNaN(meuInteger) Na primeira linha atribumos a varivel meuInteger o resultado de tentar converter a inteiro o texto A3.6. Como este texto no se pode converter a nmero, a funo parseInt devolve NaN. A segunda linha comprova se a varivel anterior NaN e sendo assim devolve um true. meuFloat = parseFloat("4.7") isNaN(meuFloat)

Neste exemplo convertemos um texto a nmero com decimais. O texto se converte perfeitamente porque corresponde com um nmero. Ao receber um nmero a funo isNaN devolve um false.

Objetos em Javascript Vemos uma primeira introduo ao mundo dos objetos em geral e em particular na linguagem Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 10/1/05 Valorize este artigo: Vamos entrar em um tema muito importante de Javascript como so os objetos. um tema que ainda no vimos e sobre o qual adiante vamos trat-lo constantemente, pois todas as coisas em Javascript, inclusive as mais simples, vamos realizar atravs do manejo de objetos. De fato, nos exemplos realizados at agora fizemos um grande esforo para no utilizar objetos e ainda assim, o utilizamos em alguma ocasio, pois muito difcil encontrar exemplos em Javascript que, embora sendo simples, no faam uso deles. A programao orientada a objetos representa uma nova maneira de pensar na hora de fazer um programa. Javascript no uma linguagem de programao orientada a objetos, embora os utiliza em muitas ocasies: podemos criar novos objetos e utilizar muitos que esto criados desde um princpio. Entretanto, a maneira de programar no vai mudar muito e o que vimos at aqui relativo sintaxe, funes, etc., pode ser utilizado da mesma forma que foi indicado. Somente vamos aprender uma espcie de estrutura nova. Para comear a aprofundarmos na programao orientada a objetos imprescindvel 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 programao orientada a objetos continue lendo sem pausa. Como instanciar objetos Instanciar um objeto a ao 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 definio das caractersticas e funcionalidades de um objeto. Com as classes no se trabalha, estas somente so definies, 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 instruo

new, desta maneira. var meuObjeto = new minhaClasse() Em uma varivel que chamamos meuObjeto atribuo um novo (new) exemplar da classe minhaClase. Os parnteses se preenchem com os dados que a classe necessita para iniciar o objeto, se no h que colocar nenhum parmetro, coloca-se os parnteses 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 mtodos dos objetos Em Javascript podemos acessar s propriedades e aos mtodos de objetos de forma similar a como se faz em outras linguagens de programao, 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 mtodos utilizamos uma sintaxe similar, mas colocando ao final entre parnteses os parmetros que passamos aos mtodos. Do seguinte modo: meuObjeto.meuMetodo(parametro1,parametro2) Se o mtodo no recebe parmetros colocamos os parnteses tambm, mas sem nada dentro. meuObjeto.meuMetodo()

Objetos incorporados em Javascript Lista dos objetos que temos a nossa disposio na hora de trabalhar com Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 12/1/05 Valorize este artigo:

Sabendo j o que a programao orientada a objetos vamos introduzir o manejo de objetos em Javascript e para isso vamos comear com o estudo das classes pr-definidas que implementam as livrarias para o trabalho com strings, matemticas, datas etc. As classes que vamos ver a seguir so as seguintes:

String, para o trabalho com cadeias de caracteres. Date, para o trabalho com datas. Math, para realizar funes matemticas. Number, para realizar algumas coisas com nmeros Boolean, trabalho com booleanos.

Nota: As classes se escrevem com a primeira letra em maisculas. Tem que ficar claro que uma classe uma espcie de declarao de caractersticas e funcionalidades" dos objetos. Com outras palavras, as classes so descries da forma e do funcionamento dos objetos. Com as classes geralmente no se realiza nenhum trabalho, mas sim com os objetos, que criamos a partir das classes. Uma vez compreendida a diferena 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 sensvel s letras maisculas e minsculas, e neste caso, as classes, por conveno, sempre se escrevem com a primeira letra em maiscula e tambm a primeira letra das palavras seguintes, se que o nome da classe est composto por vrias palavras. Por exemplo, se tivssemos a classe de "Alunos universitarios" se escreveria com a -A- de alunos e a -U- de universitarios em maisculo. AlunosUniversitarios seria o nome de nossa suposta classe. H outros que pertencem a este mesmo conjunto, os enumeramos aqui para que fique a constncia deles, porm no os abordaremos nos captulos seguintes.

Array, j vimos em captulos correspondentes ao primeiro manual de Javascript. Tambm a classe Function, foi vista parcialmente ao estudar as funes. Existe outra classe RegExp que serve para construir padres que veremos talvez junto com Function quando tratarmos de temas ainda mais avanados. Nota: Uso de maisculas e minsculas. J que paramos anteriormente para falar sobre o uso de maisculas em certas letras dos nomes das classes, vamos terminar de explicar a conveno que se realiza em Javascript para nomear os elementos.

Para comear, qualquer varivel costuma-se escrever em minsculas, embora se este nome de varivel se compe de vrias palavras, costuma-se escrever em maiscula a primeira letra das seguintes palavras. Isto se faz em qualquer tipo de varivel ou nome nos nomes das classes, onde se escreve tambm em maiscula o primeiro caractere da primeira palavra. Exemplos: Number, que uma classe se escreve com a primeira em maiscula. RegExp, que o nome de outra classe composto por duas palavras, tem a primeira letra das duas palavras em maiscula. minhaCadeia, que suponhamos que um objeto da classe String, se escreve com a primeira letra em minscula e a primeira letra da segunda palavra em maiscula. data, que suponhamos que um objeto da classe Date, se escreve em minsculas por ser um objeto. minhaFuno(), que uma funo definida por ns, costuma-se escrever com minscula a primeira. Como dissemos, esta a norma geral para dar nomes s variveis, classes, objetos, funes,, etc. em Javascript. Se a seguimos assim, no teremos problemas na hora de saber se um nome em Javascript tem ou no alguma maiscula e ademais todo nosso trabalho ser mais claro e fcil de seguir por outros programadores ou por ns mesmos no caso de retomar um cdigo 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 mtodos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 13/1/05 Valorize este artigo: Em javascript as variveis de tipo texto so objetos da classe String. Isto quer dizer que cada uma das variveis que criamos de tipo texto tem uma srie de propriedades e mtodos. Lembramos que as propriedades so as caractersticas, como, por exemplo, longitude em caracteres do string e os mtodos so funcionalidades, como podem ser extrair um substring ou colocar o texto em maisculas.

Para criar um objeto da classe String a nica coisa que h que fazer atribuir um texto a uma varivel. O texto vai entre aspas, como j vimos nos captulos de sintaxe. Tambm se pode criar um objeto string com o operador new, que veremos mais adiante. A nica diferena que em verses de Javascript 1.0 no funcionar new para criar os Strings. Propriedades de String Length A classe String tem somente uma propriedade: length, que salva o nmero de caracteres do String. Mtodos de String Os objetos da classe String tm uma boa quantidade de mtodos para realizar muitas coisas interessantes. Primeiro, vamos ver uma lista dos mtodos mais interessantes e logo, veremos outra lista de mtodos menos teis. charAt(ndice) Devolve o caractere que h na posio indicada como ndice. As posies de um string comeam em 0. indexOf(caractere,desde) Devolve a posio da primeira vez que aparece o caractere indicado por parmetro em um string. Se no encontra o caractere no string devolve -1. O segundo parmetro opcional e serve para indicar a partir de que posio se deseja que comece a busca. lastIndexOf(caractere,desde) Busca a posio de um caractere exatamente igual a como faz a funo indexOf, mas desde o final no lugar do princpio. O segundo parmetro indica o nmero de caracteres desde onde se busca, igual que em indexOf. replace(substring_a_buscar,novoStr) Implementado em Javascript 1.2, serve para substituir pores do texto de um string por outro texto, por exemplo, poderamos utiliz-lo para substituir todas as aparies do substring "xxx" por "yyy". O mtodo no substitui no string, e sim, devolve uma resultante de fazer essa substituio. Aceita expresses regulares como substring a buscar. split(separador) Este mtodo s compatvel 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 parmetro. substring(incio,fim) Devolve o substring que comea no caractere de incio e termina no caractere de fim. Se intercambiarmos os parmetros de incio e fim tambm funciona. Simplesmente nos d o substring que h entre o caractere menor e o maior. toLowerCase() Coloca todos os caracteres de um string em minsculas. toUpperCase() Coloca todos os caracteres de um string em maisculas. toString() Este mtodo tem todos os objetos e se usa para convert-los em cadeias. At aqui vimos os mtodos que nos ajudar a respeito das cadeias. Agora vamos ver outros mtodos que so menos teis, mas que h que indic-los para que fique a constncia de todos. Todos servem para aplicar estilos a um texto e como se utilizssemos 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 parmetro. big() Aumenta o tamanho de letra do string. como se colocssemos em um string ao princpio 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 utilizssemos a etiqueta <B>. fixed() Para utilizar uma fonte com um espaamento 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 utilizssemos 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 utilizssemos a etiqueta <A> com o atributo href indicado como parmetro. small() como utilizar a etiqueta <SMALL> strike() Como utilizar a etiqueta <STRIKE>, que serve para que o texto aparea riscado. sub() Atualiza o texto como se estivesse utilizando a etiqueta <SUB>, de subndice. sup() Como se utilizssemos a etiqueta <SUP>, de superndice.

Exemplos de funcionamento da classe String Realizamos dois scripts em Javascript para ilustrar o funcionamento de alguns mtodos e propriedades da classe String. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 06/2/05 Valorize este artigo: Agora veremos uns exemplos sobre como se utilizam os mtodos e propriedades do objeto String. Exemplo de strings 1 Vamos escrever o contedo 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 variveis, 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 penltimo caractere do string -utilizamos a propriedade length para conhecer o nmero de caracteres do string- e em cada iterao 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 funo charAt para acessar as posies do string. Finalmente, imprimimos na pgina o resultado. Podemos ver o exemplo em funcionamento em uma pgina a parte. Exemplo de strings 2 Vamos fazer um script que rompa um string em duas metades e as imprima por tela. As metades sero iguais, sempre que o string tenha um nmero de caracteres par. No caso de que o nmero de caracteres seja mpar no 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 variveis que vamos utilizar e iniciar o string para partir. Na seguinte linha, encontramos a posio da metade do string. Nas seguintes linhas onde realizamos o trabalho de colocar em uma varivel a primeira metade do string e na outra a segunda. Para isso, utilizamos o mtodo substring passando como incio 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 linhas entre elas.

Classe Date em Javascript Explicamos a classe que se utiliza em Javascript para o manejo de datas e horas, comentando seus mtodos e propriedades. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 07/2/05 Valorize este artigo: 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 operaes 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 crialo com um dia e hora distintos aos atuais. Isto depende dos parmetros que passemos ao construir os objetos. Para criar um objeto fecha com o dia e hora atuais, colocamos os parnteses 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 parnteses o momento para iniciar o objeto. Existem vrias maneiras de expressar um dia e hora vlida, por isso podemos construir uma data nos guiando por vrios esquemas. Estes so dois deles, suficientes para criar todo tipo de datas e horas. minhaData = new Date(ano,ms,dia,hora,minutos,segundos) minhaData = new Date(ano,ms,dia) Os valores que deve receber o construtor so sempre numricos. Um detalhe, o ms comea por 0, ou seja, janeiro o ms 0. Se no indicamos a hora, o objeto data se cria com hora 00:00:00. Os objetos da classe Date no tm propriedades, mas existem um monto de mtodos que tm, vamos v-los agora.

getDate() Devolve o dia do ms. getDay() Devolve o dia da semana. getHours() Retorna a hora. getMinutes() Devolve os minutos. getMonth() Devolve o ms (ateno ao ms que comea 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 mtodo est obsoleto em Netscape a partir da verso 1.3 de Javascript e agora se utiliza getFullYear(). getFullYear() Retorna o ano com todos os dgitos. Usar este mtodo para estar certos de que funcionar todo bem em datas posteriores ao ano 2000. setDate() Atualiza o dia do ms. setHours() Atualiza a hora. setMinutes() Muda os minutos. setMonth() Muda o ms (ateno ao ms que comea por 0). setSeconds()

Muda os segundos. setTime() Atualiza a data completa. Recebe um nmero de segundos desde 1 de janeiro de 1970. setYear() Muda o ano recebe um nmero, ao que lhe soma 1900 antes de coloca-lo como ano da data. Por exemplo, se recebe 95 colocar o ano 1995. Este mtodo est obsoleto a partir de Javascript 1.3 em Netscape. Agora se utiliza setFullYear(), indicando o ano com todos os dgitos. setFullYear() Muda o ano da data ao nmero que recebe por parmetro. O nmero se indica completo ex: 2005 ou 1995. Utilizar este mtodo para estar certo de que tudo funciona para datas posteriores a 2000. Como foi possvel apreciar, h algum mtodo obsoleto por questes relativas ao ano 2000: setYear() e getYear(). Estes mtodos se comportam bem na Internet Explorer e no nos dar nenhum problema utiliza-los. Entretanto, no funcionaro corretamente em Netscape, portanto interessante utilizarmos em seu lugar os mtodos getFullYear() e setFullYear(), que funcionam bem em Netscape e Internet Explorer.

Exemplo de funcionamento de Date Exerccio realizado para ilustrar o funcionamento da classe Date em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 09/2/05 Valorize este artigo: 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 tambm. Logo, atualizaremos o ano de uma das datas e voltaremos a escreve-la com um formato mais legvel. //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) //extramos o ano das duas datas anoAtual = minhaDataAtual.getFullYear() anoPassado = minhaDataPassada.getFullYear() //Escrevemos em ano na pgina document.write("<br>O ano atual : " + anoAtual) document.write("<br>O ano passado : " + anoPassado) //mudamos o ano na data atual minhaDataAtual.setFullYear(2005) //extramos o dia, ms e ano dia = minhaDataAtual.getDate() mes = parseInt(minhaDataAtual.getMonth()) + 1 ano = minhaDataAtual.getFullYear() //escrevemos a data em um formato legvel document.write ("<br>") document.write (dia + "/" + mes + "/" + ano) H que destacar um detalhe antes de terminar, que o nmero do ms pode comear desde 0. Pelo menos no Netscape com o qual realizamos as provas comeava o ms em 0. Por esta razo somamos um ao ms que devolve o mtodo getMonth. Existem mais detalhes para destacar, pois que no Netscape o mtodo 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 disposio o mtodo getFullYear() que devolveria 2005 da mesma forma que em Netscape e Internet Explorer. Muita ateno no trabalho com datas em distintas plataformas, visto que poderia ser problemtico o fato de oferecerem distintas sadas aos mtodos de manejo de datas, dependendo sempre da marca e verso de nosso navegador.

Classe Math em Javascript A classe que utilizamos para realizar clculos matemticos de todo tipo. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 14/2/05 Valorize este artigo: A classe Math proporciona os mecanismos para realizar operaes matemticas em Javascript. Algumas operaes se resolvem rapidamente com os operadores aritmticos que j conhecemos, como a multiplicao ou soma, mas existe uma srie de operaes matemticas adicionais que tm que se realizar usando a classe Math como podem ser calcular um seno ou fazer uma raiz quadrada. De modo que para qualquer clculo matemtico complexo utilizaremos a classe Math, com uma particularidade. At agora, cada vez que quisssemos fazer algo com uma classe deveramos 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 mtodos da classe Math so o que se chama propriedades e mtodos de classe e para utiliza-los se opera atravs da classe no lugar dos objetos. Com outras palavras, para trabalhar com a classe Math no deveremos utilizar a instruo new e utilizaremos o nome da classe para acessar a suas propriedades e mtodos. Propriedades de Math As propriedades salvam valores que provavelmente necessitaremos em algum momento se estamos fazendo clculos matemticos. provvel que estas propriedades sejam um pouco raras para as pessoas que desconhecem as matemticas avanadas, mas os que as conhecem sabero de sua utilidade. E Nmero 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 nmero para clculo com crculos. SQRT1_2 Raiz quadrada de um meio. SQRT2 Raiz quadrada de 2. Mtodos de Math Ainda assim, temos uma srie de mtodos para realizar operaes matemticas tpicas, embora um pouco complexas. Todos os que conheam as matemticas a um bom nvel conhecero o significado destas operaes. abs() Devolve o valor absoluto de um nmero. O valor depois de tirar o signo. acos() Devolve o arco co-seno de um nmero em radianos. asin() Devolve o arco co-seno de um nmero em radianos. atan() Devolve um arco tangente de um nmero. ceil() Devolve o inteiro igual ou imediatamente seguinte de um nmero. Por exemplo, ceil(3) vale 3, ceil(3.4) 4. cos() Retorna o co-seno de um nmero. exp() Retorna o resultado de elevar o nmero E por um nmero. floor() O contrrio de ceil(), pois devolve um nmero igual ou imediatamente inferior. log() Devolve o logaritmo neperiano de um nmero. max() Retorna o maior de 2 nmeros.

min() Retorna o menor de 2 nmeros. pow() Recebe dois nmeros como parmetros e devolve o primeiro nmero elevado ao segundo nmero. random() Devolve um nmero aleatrio entre 0 e 1. Mtodo criado a partir de Javascript 1.1. round() Arredonda ao inteiro mais prximo. sin() Devolve o seno de um nmero com um ngulo em radianos. sqrt() Retorna a raiz quadrada de um nmero. tan() Calcula e devolve a tangente de um nmero em radianos. Exemplo de utilizao da classe Math Vamos ver um simples exemplo sobre como utilizar mtodos e propriedades da classe Math para calcular o seno e o co-seno de 2 PI radianos (uma volta completa). Como alguns de vocs 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 ("<br>") document.write (Math.sin(2 * Math.PI)) 2 PI radianos o resultado de multiplicar 2 pelo nmero PI. Esse resultado o que recebe o mtodo cos, e d como resultado 1. No caso do seno, o resultado no exatamente 0 mas est aproximado com uma exatido demais de um milsimo de frao. 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 numricos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 15/2/05 Valorize este artigo: A classe Number modela o tipo de dados numricos. Foi acrescentado na verso 1.1 de Javascript (com Netscape Navigator 3). Serve para criar objetos que tm dados numricos como valor. muito provvel que voc no chegue a utilizar em nenhuma ocasio. Pelo menos em todos os scripts que servem para fazer as coisas mais distintas e teis. Nota: Conhecemos o tipo de dados numricos no primeiro manual de javascript. Este nos servia para salvar valores numricos sem mais. Este objeto modela este tipo de dados e a classe em si, oferece algum mtodo que pode ser til. Para os clculos matemticos e o uso de nmeros em geral vamos utilizar sempre as variveis numricas 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 nmero, ento inicia o objeto com o nmero que recebe. Se receber um nmero entre aspas, o converte a valor numrico, devolvendo tambm tal nmero. - Devolve 0 em caso de que no receba nada. - No caso de que receba um valor no numrico devolve NaN, que significa "Not a Number" (No um nmero) - 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") document.write(n2 + "<br>") //mostra NaN

var n3 = new Number("123") document.write(n3 + "<br>") //mostra 123 var n4 = new Number("123asdfQWERTY") document.write(n4 + "<br>") //mostra NaN var n5 = new Number(123456) document.write(n5 + "<br>") //mostra 123456 var n6 = new Number(false) document.write(n6 + "<br>") //mostra 0 var n7 = new Number(true) document.write(n7 + "<br>") //mostra 1 Propriedades da classe Number Esta classe tambm nos oferece vrias propriedades que contm os seguintes valores: NaN Como vimos, significa Not a Number, ou em portugus, no um nmero. MAX_VALUE e MIN_VALUE Salvam o valor do mximo e do mnimo 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 so 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("<br>") document.write("Propriedade MAX_VALUE: " + Number.MAX_VALUE) document.write("<br>")

document.write("Propriedade MIN_VALUE: " + Number.MIN_VALUE) document.write("<br>") document.write("Propriedade NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY) document.write("<br>") 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 no booleanos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 22/2/05 Valorize este artigo: Esta classe serve para criar valores booleanos. Foi acrescentado na verso 1.1 de Javascript (com Netscape Navigator 3). Uma de suas possveis 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 no passa nenhum valor ao construtor, ou se passa uma cadeia vazia, o nmero 0 ou a palavra false sem aspas. - Inicia-se a true quando recebe qualquer valor entre aspas ou qualquer nmero 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("") document.write(b2 + "<br>")

//mostra false var b25 = new Boolean(false) document.write(b25 + "<br>") //mostra false var b3 = new Boolean(0) document.write(b3 + "<br>") //mostra false var b35 = new Boolean("0") document.write(b35 + "<br>") //mostra true var b4 = new Boolean(3) document.write(b4 + "<br>") //mostra true var b5 = new Boolean("Ol") document.write(b5 + "<br>") //mostra true

Criao de classes em Javascript Agora que j sabemos o que so os objetos, vamos ver como podemos criar nossos prprios objetos em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 27/2/05 Valorize este artigo: Agora que j conhecemos um pouco os objetos e aprendemos a manej-los podemos passar a um tema mais avanado, como o de construir nossos prprios objetos, que pode ser til em certas ocasies para temas avanados. Ento vamos a ver como podemos definir nossos prprios objetos, com suas propriedades e mtodos, de maneira que aprendamos o mecanismo, mas sem entrar muito em aspectos prticos que deixaremos para exemplos no futuro. Para criar nossos prprios objetos devemos criar uma classe, que lembramos que algo assim como a definio de um objeto com suas propriedades e mtodos. Para criar a classe em Javascript devemos escrever uma funo especial, que se encarregar de construir o objeto na memria e inicia-lo. Esta

funo chama-se construtor na terminologia da programao orientada a objetos. function MinhaClasse (valor_iniciacao){ //Inicio as propriedades e mtodos this.minhaPropriedade = valor_iniciacao this.meuMetodo = nome_de_uma_funcao_definida } Isso era um construtor. Utiliza a palavra this para declarar as propriedades e mtodos do objeto que se est construindo. This faz referncia ao objeto que se est construindo, pois lembremos que a esta funo a chamaremos para construir um objeto. A esse objeto que se est construindo lhe vamos atribuindo valores em suas propriedades e tambm lhe vamos atribuindo nomes de funes definidas para seus mtodos. Ao construir um objeto tecnicamente igual que declarar uma propriedade ou um mtodo, somente difere em que a uma propriedade lhe atribumos um valor e a um mtodo lhe atribumos uma funo. A classe AlunoUniversitrio Veremos tudo mais detalhadamente se fazemos um exemplo. Neste exemplo, vamos criar um objeto estudante universitrio. Como estudante ter umas caractersticas como o nome, a idade ou o nmero de matrcula. Ademais poder ter algum mtodo como, por exemplo, matricular ao aluno. Construtor: Colocamos propriedades Vejamos como definir o construtor da classe Alunouniversitrio, 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 iniciao como parmetros, neste caso s o nome e a idade, porque o nmero de matrcula o aluno no recebe at que esteja matriculado. por isso que atribumos a null a propriedade numMatrcula.

Criao de classes em Javascript II Aprendemos a construir mtodos e a associ-los aos nossos prprios objetos de Javascript. Tambm repassamos como instanciar nossos objetos a partir das definies da classe. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 01/3/05 Valorize este artigo: Para construir um mtodo devemos criar uma funo. Uma funo que se constri com a inteno de que seja um mtodo para uma classe pode utilizar tambm a varivel this, que faz referncia ao objeto sobre o que invocamos o mtodo. Portanto, devemos recordar que para chamar a um mtodo devemos ter um objeto e this faz referncia a esse objeto. function matriculese(num_matricula){ this.numMatricula = num_matricula } A funo matricular recebe um nmero de matrcula por parmetro e o atribui propriedade numMatricula do objeto que recebe este mtodo. Assim, preenchemos o da propriedade que nos faltava. Vamos construir outro mtodo que imprime os dados do aluno. function imprimir(){ document.write("Nome: " + this.nome) document.write("<br>Idade: " + this.idade) document.write("<br>Nmero de matrcula: " + this.numMatricula) } Esta funo vai imprimindo todas as propriedades do objeto que recebe o mtodo. Construtor: Colocamos mtodos Para colocar um mtodo em uma classe devemos atribuir a funo que queremos que seja o mtodo ao objeto que est sendo criado. Vejamos como ficaria o construtor da classe AlunoUniversitario com o mtodo matricular. function AlunoUniversitario(nome, idade){ this.nome = nome this.idade = idade

this.numMatricula = null this.matriculese = matriculese this.imprimir = imprimir } Vemos que nas ltimas linhas atribumos aos mtodos os nomes das funes que contm seu cdigo. Para instanciar um objeto Para instanciar objetos da classe AlunoUniversitario utilizamos a sentena new, que j tivemos a oportunidade de ver em outras ocasies. meuAluno = new AlunoUniversitario("Jos Dias",23)

Criao 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 01/3/05 Valorize este artigo: Para ilustrar o trabalho com objetos e terminar com o exemplo do AlunoUniversitrio, vamos ver todo este processo em um s script no qual definiremos a classe e logo a utilizaremos um pouquinho. //definimos o mtodo matriculese para a classe AlunoUniversitario function matriculese(num_matricula){ this.numMatricula = num_matricula } //definimos o mtodo imprimir para a classe AlunoUniversitario function imprimir(){ document.write("<br>Nome: " + this.nome) document.write("<br>Idade: " + this.idade) document.write("<br>Nmero de matrcula: " + this.numMatricula) } //definimos o construtor para a classe function AlunoUniversitario(nome, idade){

this.nome = nome this.idade = idade this.numMatricula = null 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 nmero de matrcula preenchido) meuAluno.imprimir() Se desejarmos, podemos ver o script em funcionamento em uma pgina a parte. No momento no vamos mais falar sobre como criar e utilizar nossos prprios objetos, mas no futuro trataremos este tema com mais profundidade e faremos algum exemplo adicional.

Hierarquia de objetos do navegador So os objetos que esto disponveis em Javascript para controlar qualquer elemento presente na pgina web. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 07/3/05 Valorize este artigo: Chegamos ao tema mais importante para aprender a manejar Javascript com toda sua potncia, o tema no qual aprenderemos a controlar ao navegador e os distintos elementos da pgina. Sem dvida, este tema dar muita vida aos nossos exemplos, j que at agora no tinham muito carter prtico porque no trabalhavam com o navegador e com as pginas, que realmente para o que est feito Javascript. De modo que esperamos a partir de agora que o manual seja mais entretido para todos,

porque cobrir os aspectos mais prticos. Quando se carrega uma pgina, o navegador cria uma hierarquia de objetos na memria que servem para controlar os distintos elementos de tal pgina. Com Javascript e com a nomenclatura de objetos que aprendemos, podemos trabalhar com essa hierarquia de objetos, acessar s suas propriedades e invocar seus mtodos. Qualquer elemento da pgina pode ser controlado de uma maneira ou de outra acessando a essa hierarquia. crucial conhec-la bem para poder controlar perfeitamente as pginas web com Javascript ou qualquer outra linguagem de programao do lado do cliente. Exemplo de acesso hierarquia Antes de comear a ver rigorosamente a hierarquia de objetos do navegador, vamos ver o exemplo tpico de acesso a uma propriedade desta hierarquia para mudar o aspecto da pgina. Trata-se de uma propriedade da pgina que armazena a cor de fundo da pgina web: a propriedade bgColor do objeto document. document.bgColor = "red" Se executarmos esta sentena em qualquer momento, mudamos a cor de fundo da pgina para vermelho. H que observar que a propriedade bgColor tem a "C" em maiscula. um erro tpico se equivocar com as maisculas e minsculas na hierarquia. Se no o escrevemos bem no funcionar e em alguns casos nem sequer dar uma mensagem de erro. Nesta pgina 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 pgina em funcionamento em uma janela a parte. Nos exemplos que vimos at agora tambm fizemos uso dos objetos da hierarquia do navegador. Teoricamente utilizamos muito o mtodo write() do objeto document para escrever um texto na pgina. 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 explicao sobre como acessa-los. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 08/3/05 Valorize este artigo: Vamos ver agora como est composta esta hierarquia. Os objetos que fazem parte dela esto representados no seguinte grfico.

Hierarquia de objetos do navegador em Javascript 1.2. Poderia faltar por percorre algum objeto, mas serve perfeitamente para ter uma idia de como se organizam os objetos na hierarquia. Como se pode observar, todos os objetos comeam em um objeto que se chama window. Este objeto oferece uma srie de mtodos e propriedades para controlar a janela do navegador. Com eles podemos controlar o aspecto da janela, a barra de estado, abrir janelas secundrias e outras coisas que veremos mais adiante quando explicarmos com detalhe o objeto. Alm de oferecer controle, o objeto window d acesso a outros objetos como o documento (a pgina web que se est visualizando), o histrico de pginas visitadas ou os distintos frames da janela. De modo que para acessar a qualquer outro objeto da hierarquia deveramos comear pelo objeto window. Tanto que javascript entende perfeitamente que a hierarquia comea em

window embora no o atribumos. Nos exemplos includos no captulo anterior podamos ter escrito tambm as sentenas de acesso hierarquia comeando pelo objeto window, desta maneira. window.document.bgColor = "red" window.document.write("O texto a escrever") No o fizemos para que o cdigo ficasse mais claro e economizar algo de texto, mas agora j sabemos que toda a hierarquia comea no objeto window. As propriedades de um objeto podem ser por sua vez outros objetos Muitas das propriedades do objeto window so por sua vez outros objetos. o caso de objetos como o histrico de pginas web ou o objeto documento, que tm por sua vez outras propriedades e mtodos. Entre eles se destaca o objeto document, que contem todas as propriedades e mtodos necessrios para controlar muitos aspectos da pgina. J vimos alguma propriedade como bgColor, mas tem muitas outras como o ttulo da pgina, as imagens que existem includas, os formulrios, etc. Muitas propriedades deste objeto so por sua vez outros objetos, como os formulrios. Veremos tudo isto quando tratarmos cada um dos objetos separadamente. Ademais, o objeto document tem mtodos para escrever na pgina web e para manejar eventos da pgina. Navegao atravs da hierarquia O objetivo deste captulo sobre a hierarquia de objetos aprender a navegar por ela para acessar a qualquer elemento da pgina. Esta no uma tarefa difcil, mas pode haver algum caso especial em que acessar aos elementos da pgina se faa de uma maneira que ainda no comentamos. Como j dissemos, toda a hierarquia comea no objeto window, embora no era necessrio fazer referncia a window para acessar a qualquer objeto da hierarquia. Logo, em importncia 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 so arrays, por exemplo, a propriedade imagens um array com todas as imagens da pgina web. Tambm encontramos arrays para salvar os links da pgina, os applets, os formulrios e as ncoras. Quando uma pgina se carrega, o navegador constri na memria a hierarquia

de objetos. De maneira adicional, constri tambm estes arrays de objetos. Por exemplo, no caso das imagens, vai criando o array colocando na posio 0 a primeira imagem, na posio 1 a segunda imagem e assim at que introduzimos todas. Vamos ver um loop que percorre todas as imagens da pgina 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) document.write("<br>") } Utilizamos a propriedade length do array imagens para limitar o nmero de interaes do loop. Logo, utilizamos o mtodo write() do objeto document passando o valor de cada uma das propriedades src de cada imagem. Podemos ver uma pgina con varias imgenes 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 formulrio, que contem cada um dos elementos que compem o formulrio. Para isso, teremos que acessar a um formulrio da pgina, ao que poderemos acessar pelo array de formulrios, e dentro dele propriedade elements, que outro array de objetos. Para cada elemento do formulrio 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) document.write("<br>") } um loop muito parecido ao que tnhamos para percorrer as imagens, com a diferena que agora percorremos o vector de elements, ao que acessamos pela hierarquia de objetos passando pelo array de formulrios em sua posio 0, que corresponde como primeiro formulrio da pgina. Para ver este exemplo em funcionamento, temos uma pgina com um formulrio 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 pgina. Mais

adiante conheceremos com detalhe cada um dos objetos da hierarquia, comeando 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 14/3/05 Valorize este artigo: o objeto principal na hierarquia e contm as propriedades e mtodos para controlar a janela do navegador. Dele dependem todos os demais objetos da hierarquia. Vamos ver a lista de suas propriedades e mtodos. 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 padro na barra de estado do navegador. document Objeto que contem na pgina web que est sendo mostrada. Frame Um objeto frame de uma pgina web. Acessa-se pelo nome dele. frames array O vetor que contem todos os frames da pgina. Acessa-se pelo ndice a partir de 0. history Objeto histrico de pginas visitadas. innerHeight Tamanho em pixels do espao onde se visualiza a pgina, na vertical.

(Javascript 1.2) innerWidth Tamanho em pixels do espao onde se visualiza a pgina, na horizontal. (Javascript 1.2) length Nmero de frames da janela. location A URL do documento que est sendo visualizando. Podemos mudar o valor desta propriedade para irmos a outra pgina. Ver tambm a propriedade location do objeto document. locationbar Objeto barra de endereos da janela. (Javascript 1.2) menubar Objeto barra de menus da janela. (Javascript 1.2) name Nome da janela. Atribumos quando abrimos uma nova janela. opener Faz referncia 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 espao de toda a janela, na vertical. Isto inclui as barras de deslocamento, botes, etc. (Javascript 1.2) outherWidth Tamanho em pixels do espao de toda a janela, na horizontal. Isto inclui as barras de deslocamento. (Javascript 1.2) parent Faz referncia 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 referncia janela onde est situado o frame que estamos trabalhando. Como a propriedade parent. window Faz referncia janela atual, assim como a propriedade self. Vamos ver um exemplo de utilizao 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 no vimos o que so. Em concreto, utilizamos o manipulador de eventos onclick, que serve para executar sentenas Javascript quando o usurio clica um elemento da pgina. Os manipuladores de eventos so colocados em etiquetas HTML, em nosso caso, colocamos em um boto de formulrio. As sentenas Javascript associadas ao evento onclick do boto sero executadas quando clicarmos o boto. Vejamos j o cdigo que faz com que mude o texto da barra de estado quando clicarmos um boto. < form> < input type="Button" value="Clique-me!" onclick="window.status='Ol a todo mundo!'"> < /form> Simplesmente atribumos 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.

Mtodos de window em Javascript O objeto window de Javascript tem a disposio dos programadores uma longa lista de mtodos. Estudaremos e veremos exemplos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 20/3/05 Valorize este artigo: Vamos ver agora os distintos mtodos que tem o objeto window. Muitos destes mtodos tero que ser vistos separadamente porque so muito teis e ainda no 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 parmetro. back() Ir uma pgina atrs no histrico de pginas visitadas. Funciona como o boto 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 parmetro (Javascript 1.2). clearInterval() Elimina a execuo de sentenas associadas a um intervalo indicadas com o mtodo setInterval().(Javascript 1.2) clearTimeout() Elimina a execuo de sentenas associadas a um tempo de espera indicadas com o mtodo setTimeout(). close() Fecha a janela. (Javascript 1.1) confirm(texto) Mostra uma janela de confirmao e permite aceitar ou rejeitar.

find() Mostra uma janelinha de busca. (Javascript 1.2 para Netscape) focus() Coloca o foco da aplicao na janela. (Javascript 1.1) forward() Ir uma pgina adiante no histrico de pginas visitadas. Como se clicssemos o boto de adiante do navegador. (Javascript 1.2) home() Ir pgina de incio o explorador que tenha configurado. (Javascript 1.2) moveBy(pixelsX, pixelsY) Move a janela do navegador os pixels que se indicam por parmetro para a direita e para baixo. (Javascript 1.2) moveTo(pixelsX, pixelsY) Move a janela do navegador posio indicada nas coordenadas que recebe por parmetro. (Javascript 1.2) open() Abre uma janela secundria do navegador. print() Como se clicssemos o boto de imprimir do navegador. (Javascript 1.2) prompt(pergunta,inicio_da_resposta) Mostra uma caixa de dilogo para pedir um dado. Devolve o dado que se escreveu. releaseEvents(eventos) Deixa de capturar eventos do tipo que se indique por parmetro. (Javascript 1.2) resizeBy(pixelslargo,pixelsAlto) Redimensiona o tamanho da janela, acrescentando ao seu tamanho atual os valores indicados nos parmetros. 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 espao em pixels que se indica por parmetro (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 parmetro. Este mtodo est desaconselhado, pois agora se debera utilizar scrollTo()(Javascript 1.1) scrollBy(pixelsX,pixelsY) Faz um scroll do contedo da janela relativo posio atual. (Javascript 1.2) scrollTo(pixelsX,pixelsY) Faz um scroll da janela posio indicada pelo parmetro. Este mtodo tem que ser utilizado ao invs do scroll. (Javascript 1.2) setInterval() Define um script para que seja executado indefinidamente em cada intervalo de tempo. (Javascript 1.2) setTimeout(sentena,segundos) Define um script para que seja executado uma vez depois de um tempo de espera determinado. stop() Como clicar o boto de stop da janela do navegador. (Javascript 1.2) Para ilustrar um pouco melhor o funcionamento de algum destes mtodos -os mais estranhos-, criamos uma pgina web que os utiliza. O cdigo da pgina mostra-se a seguir e tambm podemos ver a pgina 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>

< input type="button" value="Imprimir esta pgina" 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 so muito simples, embora pouco prticos. Unicamente tratase de uma srie de botes que, ao clica-los, chamam a outros tantos mtodos do objeto window. No atributo onclick da etiqueta do boto se indicam as sentenas Javascript que queremos que se executem quando se clica sobre tal boto. No captulo seguinte veremos outros exemplos realizados com mtodos do objeto window de Javascript, um pouco mais detalhados.

Exemplos de mtodos de Window Outros exemplos de mtodos do objeto window de Javascript, relatados com detalhe. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 30/3/05 Valorize este artigo: Agora vamos realizar algum exemplo de utilizao dos mtodos da janela. Vamos nos centrar nos exemplos que servem para por caixas de dilogo, que so muito teis. Caixa de alerta

Para por um texto em uma janelinha com um boto de aceitar. Recebe o texto por parmetro. 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 pgina. Caixa de confirmao Mostra uma janela com um texto indicado por parmetro e um boto de aceitar e outro de rejeitar. Dependendo do boto 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 dilogo confirm e logo mostra em outra caixa de dilogo alert o contedo da varivel que devolveu a caixa de dilogo. Novamente, podemos ver o funcionamento deste script se acessamos a esta pgina a parte. Caixa de introduo de um dado Mostra uma caixa de dilogo 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 parmetro do mtodo. Tambm existe um boto de aceitar e outro de cancelar. Neste caso de clicar aceitar, o mtodo 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 pgina e logo mostrar na pgina uma saudao personalizada. Utiliza um loop para repetir a tomada de dados sempre que o nome da pessoa seja null (porque clicou o boto de cancelar), ou seja, um string vazio (porque no escreveu nada). < script> nome = null while (nome == null || nome == ""){

nome = prompt("Diga-me seu nome:","") } document.write("<h1>Ol " + nome + "</h1>") < /script> Se observarmos na caixa prompt, veremos que recebe dois parmetros. O segundo era o texto por padro que sai na caixa como resposta. Deixamos como um string vazio para que no sai nada como texto por padro. Podemos ver este ltimo script em funcionamento em uma pgina a parte. At aqui os exemplos dos mtodos do objeto window. De qualquer forma, no resto do manual teremos ocasio de ver como trabalhar com muitas propriedades e mtodos deste objeto.

Objeto document em Javascript Uma descrio do objeto de Javascript que serve para controlar o documento que se visualiza no navegador. Tambm h uma lista de todas suas propriedades. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 31/3/05 Valorize este artigo: Com o objeto document controla-se a pgina web e todos os elementos que contem. O objeto document a pgina atual que est sendo visualizada nesse momento. Depende do objeto window, mas tambm pode depender do objeto frame no caso de que a pgina 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 pgina. Consegue-se com a etiqueta <A name="nome_da_ancora">. Acessa-se pelo seu nome. anchors array

Um array das ncoras do documento. Applet Um applet da pgina. Acessa-se pelo seu nome. (Javascript 1.1) applets array Um array com todos os applets da pgina. (Javascript 1.1) Area Uma etiqueta <AREA>, das que esto 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 declarao de estilos CSS. (Javascript 1.2) cookie Uma cookie domain Nome do domnio do servidor da pgina. Embed Um elemento da pgina incrustado com a etiqueta <EMBED>. Acessa-se pelo seu nome. (Javascript 1.1) embeds array Todos os elementos da pgina incrustados com <EMBED>. (Javascript 1.1) fgColor A cor do texto. Para ver as mudanas h que reescrever a pgina. Form Um formulrio da pgina. Acessa-se pelo seu nome. forms array Um array com todos os formulrios da pgina. ids Para acessar a estilos CSS. (Javascript 1.2) Image

Uma imagem da pgina web. Acessa-se pelo seu nome. (Javascript 1.1) images array Cada uma das imagens da pgina introduzidas em um array. (Javascript 1.1) lastModified A data de ltima modificao do documento. linkColor A cor dos links. Link Um link da pgina. Acessa-se pelo seu nome. links array Um array com cada um dos links da pgina. location A URL do documento que se est visualizando. somente de leitura. referrer A pgina da qual vem o usurio. tags Estilos definidos s etiquetas de HTML na pgina web. (Javascript 1.2) title O ttulo da pgina. URL O mesmo que location, mas aconselhvel utilizar location j que URL no existe em todos os navegadores. vlinkColor A cor dos links visitados.

Exemplos de propriedades de document Vemos vrios exemplos de acesso e manipulao das propriedades do objeto document de Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 04/4/05 Valorize este artigo: Depois de estudar as propriedades do objeto document, veremos algum exemplo para ilustrar o modo de acesso e utilizao das mesmas. Exemplo com a propriedade bgColor Vamos utilizar o evento onclick para colocar trs botes na pgina que ao cliclos mudar a cor de fundo da pgina. < 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 funo que ser a encarregada de mudar a cor e logo trs botes que chamaro a funo quando forem clicados passando a cor como parmetro. Podemos ver o exemplo em funcionamento. Propriedade title A propriedade title salva a cadeia que conforma o ttulo de nossa pgina web. Se acessarmos a tal propriedade obteremos o ttulo e se a mudamos, mudar o ttulo da pgina web. Nota: Lembramos que o ttulo pode ser visto na barra que est acima de tudo da janela do navegador. Vamos mostrar o ttulo da pgina em uma caixa de alerta. alert (document.title) Agora vamos fazer uma funo que modifica o ttulo da pgina, atribuindo-lhe o texto que chegue por parmetro. function mudaTitulo(texto){ document.title = texto

} Como no exemplo anterior, vamos criar vrios botes que chamem a funo passando-lhe distintos textos, que se colocaro no ttulo da pgina. < form> < input type="Button" value="Titulo = Ol a todos" onclick="mudaTitulo('Ol a todos')"> < input type="Button" value="Titulo = Bem-vindos a minha pgina web" onclick="mudaTitulo('Bem-vindos a minha pgina web')"> < input type="Button" value="Titulo = Mais dias que trabalhamos" onclick="mudaTitulo('Mais dias que trabalhamos')"> < /form>

Mtodos de document Vemos uma lista dos eventos disponveis no objeto document. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 07/4/05 Valorize este artigo: O objeto document, localizado abaixo do objeto window na hierarquia de objetos de Javascript, tambm tem uma lista de mtodos interessantes. Veremos a seguir: captureEvents() Para capturar os eventos que acontecem na pgina web. Recebe como parmetro 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 pgina. 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 atravs da hierarquia de eventos habitual. write() Escreve dentro da pgina web. Podemos escrever etiquetas HTML e texto normal. writeln() Escreve igual que o mtodo write(), embora coloque uma quebra de linha no final. Os eventos de document servem principalmente para controlar duas coisas. Um grupo nos oferece uma srie de funes para o controle dos documentos, como escrever, abrir ou fechar. Veremos no prximo captulo 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 mtodo getSelection() fica para ns um pouco solto, pois s funciona nos navegadores de Netscape e portanto, no muito til para as aplicaes que desejarmos que sejam compatveis em todos os sistemas. Mesmo assim, faremos um exemplo sobre este mtodo, j que os outros sero vistos nos prximos captulos. O exemplo consiste em uma pgina que tem um pouco de texto e um boto. Na pgina poderemos selecionar algo de texto e logo, apertar o boto que chama a uma funo que mostra em uma caixa alert o texto que foi selecionado. O cdigo 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 pgina e clique o boto. < /body> < /html> Pode-se ver em funcionamento o script em uma pgina 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 pgina. Para escrever na pgina em Javascript o fluxo do documento deve estar aberto. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 07/4/05 Valorize este artigo: Sobre o objeto document tambm interessante falar um pouco sobre o fluxo de escritura do documento ou pgina web. Quando o navegador l uma pgina web vai interpretando e escrevendo em sua janela. O processo no qual o navegador est escrevendo a pgina lhe chamamos fluxo de escritura do documento. O fluxo comea quando a pgina comea a ser escrita e dura at que esta termine de ser escrita. Uma vez terminada a escritura da pgina, o fluxo de escritura do documento se fecha automaticamente. Com isto termina a recarga da pgina. Uma vez fechado o fluxo, no se pode mais escrever na pgina web, nem texto nem imagens nem outros elementos. Em javascript, temos que respeitar o fluxo de escritura do documento forosamente. por isso que s podemos executar sentenas document.write() (mtodo write() do objeto document) quando est aberto o fluxo de escritura do documento, ou o que igual, enquanto a pgina est sendo recarregada.

Lembramos as duas formas de executar um script em Javascript:

Execuo dos scripts enquanto a pgina est sendo recarregada. Aqui poderemos executar document.write() e fizemos habitualmente nos exemplos anteriores. Execuo dos scripts quando a pgina foi recarregada, como resposta a um evento do usurio. Aqui, no podemos faz-lo porque a pgina terminou de recarregar, de fato, no o fizemos nunca at agora.

H o ponto em que no se pode escrever na pgina quando j est fechado o fluxo. Na verdade sim que pode, mas necessitamos abrir o fluxo outra vez para escrever na pgina, tanto assim que embora ns no 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 no estiver se abrir. O problema de abrir o fluxo de escritura do documento, uma vez j est escrita a pgina, que todo o contedo apagado. Para que fique claro vamos fazer um script para escrever na pgina uma vez esta tenha sido recarregada. Simplesmente necessitamos um boto e ao cliclo executar o mtodo 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 princpio, ou seja, comeando pelo objeto window. Isto porque existem alguns navegadores que no subentendem o objeto window nas mesmas sentenas sentencias escritas nos manipuladores de eventos. Podemos ver o exemplo em funcionamento. O resultado da execuo pode variar de um navegador a outro, mas de qualquer forma se apagar a pgina que se est executando. Mtodos open() e close() de document Os mtodos 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 pgina anterior deveria haver sido escrito com sua correspondente abertura e fechamento do documento e teria ficado algo parecido a isto.

< script> function escreve(){ document.open() window.document.write('Ol') document.close() } < /script> < form> < INPUT type=button value=escrever onclick="escreve()"> < /form> Vemos que agora no escrevemos as sentenas dentro do manipulador, porque, quando h mais de uma sentena, fica mais claro colocar uma chamada a uma funo e na funo colocamos as sentenas que quisermos. As sentenas do exemplo anterior, que cobrem a abertura, escritura e fechamento do documento. Podem ser vistas aqui.

Trabalho com formulrios em Javascript Para continuar vamos ver uma srie de captulos enfocados em aprender a trabalhar com os formulrios. Agora veremos como acessar aos formulrios e seus elementos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 13/4/05 Valorize este artigo: Para continuar vamos ver uma srie de captulos enfocados em aprender a trabalhar com os formulrios, 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 mtodos e propriedades, mas o mais destacado que poderemos encontrar cada uno dos elementos do formulrio. Ou seja, de um formulrio dependem todos os elementos que existem dentro, como podem ser campos de texto, caixas de seleo, reas de texto, botes de radio, etc. Para acessar a um formulrio pelo objeto document podemos faze-lo de duas formas. 1. A partir de seu nome, atribudo com o atributo NAME de HTML.

2. Mediante a matriz de formulrios do objeto document, com o ndice do formulrio ao que queremos acessar. Para este formulrio < 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 pgina. document.forms[0] De maneira similar acessamos aos elementos de um formulrio, que dependem do objeto form. 1. A partir do nome do objeto atribudo com o atributo NAME de HTML. 2. Mediante a matriz de elementos do objeto form, com o ndice do elemento ao que queremos acessar. Poderamos acessar ao campo 1 do anterior formulrio de duas maneiras. Com seu nome faramos 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 comeam por 0.) Se desejarmos acessar ao segundo campo do formulrio, escreveramos uma destas duas coisas: document.f1.campo2 document.f1.elements[1] Lembramos que tambm podemos acessar a um formulrio pelo array de forms, indicando o ndice do formulrio 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 formulrio o primeiro que est escrito no cdigo HTML, por isso lhe acessamos com o ndice 0. Esperamos que tenha ficado claro o acesso a formulrios e a seus campos. Passaremos ento, a um exemplo para praticar tudo isto.

Ex. de trabalho com formulrios. Calculadora simples Veremos um exemplo do trabalho com formulrios no qual desenvolveremos uma calculadora simples. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 13/4/05 Valorize este artigo: Para ilustrar um pouco o trabalho com formulrios, vamos realizar um exemplo prtico. Pode ser que algumas coisas das quais vamos tratar, fiquem um pouco no ar por no terem sido explicadas detalhadamente antes, mas certamente nos serve para estarmos por dentro de como se trabalha com formulrios e as possibilidades que temos. Exemplo de calculadora simples Neste exemplo vamos construir uma calculadora, embora bastante simples, que permita realizar as operaes bsicas. Para fazer a calculadora vamos realizar um formulrio no qual vamos colocar trs campos de texto, os dois primeiros para as parcelas e um terceiro para o resultado. Ademais haver uns botes para fazer as operaes bsicas. O formulrio da calculadora pode ser visto aqui. < form name="calc"> < input type="Text" name="parcela1" value="0" size="12"> < br> < input type="Text" name="parcela2" value="0" size="12"> < 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 funo vamos acessar aos campos do formulrio para buscar as parcelas em duas variveis. Os campos de texto tm uma propriedade chamada value que onde podemos obter o que tm escrito nesse momento. Mais tarde recorreremos a funo eval() para realizar a operao. Colocaremos por ltimo o resultado no campo de texto criado em terceiro lugar, utilizando tambm a propriedade value do campo de texto. Chamamos funo que realiza o clculo (que podemos ver a seguir) apertando os botes de cada uma das operaes. Tais botes podem ser vistos no formulrio e contm um atributo onclick que serve para especificar as sentenas Javascript que desejarmos que se executem quando o usurio clicar sobre ele. Neste caso, a sentena a executar uma chamada funo calcula() passando como parmetro o smbolo ou a parcela da operao que desejarmos realizar. O script com a funo calcula() < script> function calcula(operacao){ var parcela1 = document.calc.parcela1.value var parcela2 = document.calc.parcela2.value var result = eval(parcela1 + operacao + parcela2) document.calc.resultado.value = result } < /script> A funo eval(), lembramos, que recebia um string e o executava como uma sentena Javascript. Neste caso, ir receber um nmero que concatenado a uma operao e outro nmero ser sempre uma expresso aritmtica que eval() solucionar perfeitamente. Podemos ver o exemplo da calculadora em funcionamento. O acesso a outros elementos dos formulrios 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 diferiro um pouco. Isto ser visto mais adiante.

Propriedades e mtodos do objeto form

Damos uma olhada nas diferentes propriedades e mtodos do objeto form de Javascript. Mostramos algum exemplo de utilizao de propriedades e uma simples validao de formulrio e envio com o mtodo submit (). Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/4/05 Valorize este artigo: Vamos ver agora o objeto form por si s, para destacar suas propriedades e mtodos. Propriedades do objeto form Tm umas propriedades para ajustar seus atributos mediante Javascript. action a ao que queremos realizar quando se submete um formulrio. Coloca-se geralmente um endereo de correio ou a URL a qual lhe mandaremos os dados. Corresponde com o atributo ACTION do formulrio. elements array A matriz de elementos contm cada um dos campos do formulrio. encoding O tipo de codificao do formulrio length O nmero de campos do formulrio. method O mtodo pelo qual mandamos a informao. Corresponde com o atributo METHOD do formulrio. name O nome do formulrio, que corresponde com o atributo NAME do formulrio. target A janela ou frame no qual est dirigido o formulrio. Quando se submete se atualizar a janela ou frame indicado. Corresponde com o atributo target do formulrio. Exemplos de trabalho com as propriedades

Com estas propriedades podemos mudar dinamicamente com Javascript os valores dos atributos do formulrio para fazer com ele o que se deseje dependendo das exigncias do momento. Por exemplo, poderamos mudar a URL que receberia a informao do formulrio com a instruo. document.meuFormulrio.action = "minhaPgina.asp" Ou mudar o target para submeter um formulrio em uma possvel janela secundria chamada minha_janela. document.meuFormulrio.target = "minha_janela" Mtodos do objeto form Estes so os mtodos que podemos invocar com um formulrio. submit() Para fazer com que o formulrio se submeta, embora no se tenha clicado o boto de submit. reset() Para reiniciar todos os campos do formulrio, como se tivssemos clicado o boto de reset. (Javascript 1.1) Exemplo de trabalho com os mtodos Vamos ver um exemplo muito simples sobre como validar um formulrio para submete-lo no caso de que esteja preenchido. Para isso, vamos utilizar o mtodo submit() do formulrio. O mecanismo o seguinte: em vez de colocar um boto de submit colocamos um boto normal (<INPUT type="button">) e fazemos que ao clicar esse boto se chame a uma funo que a encarregada de validar o formulrio e, no caso de que esteja correto, submete-lo. O formulrio ficaria assim: < form name="meuFormulrio" 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 no h um boto de submit, e sim, um boto normal com uma chamada a uma funo que podemos ver a seguir. function validaSubmete(){ if (document.meuFormulrio.campo1.value == "") alert("Deve preencher o formulrio") else document.meuFormulrio.submit() } Na funo se comprova que se o que est escrito no formulrio um string vazio. Se for isso, mostra-se uma mensagem de alerta que informa que se deve preencher o formulrio. No caso de haver algo no campo de texto submete o formulrio utilizando o mtodo submit do objeto form.

Controle de campos de texto com Javascript Explicao e documentao dos campos de texto e seu controle com Javascript. Incluem-se os campos de tipo text, password e hidden. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 20/4/05 Valorize este artigo: 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 vrios exemplos, mas vamos parar um momento nele para descrever suas propriedades e mtodos. Propriedades do campo text Vemos a lista de propriedades destos tipos de campo. defaultValue o valor por padro que tem um campo. O que contm o atributo VALUE da etiqueta <INPUT>. form Faz referncia ao formulrio.

name Contem o nome deste campo de formulrio type Contem o tipo de campo de formulrio 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 formulrio e um boto de reset. Se clicarmos o boto de reset, o campo de texto se esvazia porque seu value de HTML era um string vazio. Mas se clicarmos o boto seguinte, chamamos a funo que muda o valor por padro desse campo de texto, de modo que ao clicar o boto de reset mostrar o novo valor por padro. Este o cdigo da pgina 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> Mtodos do objeto Text Pode-se invocar os seguintes mtodos sobre os objetos tipo Text. blur() Retira o foco da aplicao do campo de texto. focus() Coloca o foco da aplicao no campo de texto.

select() Seleciona o texto do campo. Como exemplo vamos mostrar uma funo que seleciona o texto de um campo de texto de um formulrio como o da pgina do exemplo anterior. Para faz-lo utilizamos dois mtodos, o primeiro para passar o foco da aplicao 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 pgina. Campos Password Estes funcionam como os hidden, com a peculiaridade que o contedo do campo no pode se ver escrito no campo, por isso saem asteriscos no lugar do texto. Campos Hidden Os campos hidden so como campos de texto que esto ocultos para o usurio, ou seja, que n se vem na pgina. So muito teis no desenvolvimento de webs para passar variveis nos formulrios aos quais o usurio no 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 so comuns de todos os campos de formulrio: name, from e type, que j foram descritos para os campos de texto.

Controle de checkbox em javascript

Captulo sobre o controle do elemento de formulrio tipo checkbox ou caixa de verificao. Estudamos seus mtodos e propriedades, com exemplos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 28/4/05 Valorize este artigo: Os checkbox so umas caixas que permitem marca-las ou no para verificar alguma coisa em um formulrio. 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 padro. Com Javascript, a partir da hierarquia de objetos do navegador, temos acesso ao checkbox, que depende do objeto form do formulrio onde est includo. Propriedades de um checkbox As propriedades que tm um checkbox so as seguintes: checked Informa sobre o estado do checkbox. Pode ser true ou false. defaultChecked Se est checada por padro ou no. value O valor atual do checkbox. Tambm tm as propriedades form, name, type como qualquer outro elemento de formulrio. Mtodos do checkbox Vejamos a lista dos mtodos de um checkbox. click() como se clicssemos sobre o checkbox, ou seja, muda o estado do checkbox. blur() Retira o foco da aplicao do checkbox.

focus() Coloca o foco da aplicao no checkbox. Para ilustrar o funcionamento das checkbox vamos ver uma pgina que tem um checkbox e trs botes. Os dois primeiros para mostrar as propriedades checked e value e o terceiro para invocar a seu mtodo 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 botes de radio em Javascript Explicao sobre o manejo de radio buttons em Javascript. Lista de mtodos e propriedades junto com algum exemplo de seu funcionamento. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 08/5/05 Valorize este artigo: O boto de radio (ou radio button em ingls) um elemento de formulrio que permite selecionar uma opo e somente uma, sobre um conjunto de possibilidades. Pode-se ver a seguir: Branco Vermelho Verde Nota: Na parte acima podemos ver trs radio buttons ao invs de um s. Colocam-se trs botes porque assim podemos examinar seu funcionamento ao formar parte de um grupo. Vejamos que ao selecionar uma opo se desmarca a opo 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 opo entre vrias. 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 padro. Referencia: Explicamos com detalhe a criao de botes de radio em nosso manual de HTML, no captulo Outros elementos de formulrios. Quando em uma pgina temos um conjunto de botes de radio cria-se um objeto radio por cada um dos botes. Os objetos radio dependem do formulrio e pode-se acess-los pelo array de elements, entretanto tambm cria-se um array com os botes de radio. Este array depende do formulrio e tem o mesmo nome que os botes de radio. Propriedades do objeto radio Vejamos uma lista das propriedades deste elemento. checked Indica se est checado ou no um boto de radio. defaultChecked Seu estado padro. value O valor do campo de radio, atribudo pela propriedade value do radio.

Length (como propriedade do array de radios) O nmero de botes de radio que formam parte no grupo. Acessvel no vetor de radios. Mtodos do objeto radio So os mesmos que tinha o objeto checkbox. Exemplo de utilizao Vejamos com um exemplo o mtodo de trabalho com os radio buttons no qual vamos colocar vrios deles e cada um ter associado uma cor. Tambm haver um boto e ao clic-lo mudaremos a cor de fundo da tela a cor que esteja selecionada no conjunto de botes de radio. Vamos ver a pgina 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"> Lils < 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 formulrio e na lista de botes de radio. Todos se chamam "colorin", portanto esto associados em um mesmo grupo. Alm disso, vemos que o atributo value de cada boto muda. Tambm vemos um boto abaixo de tudo. Com esta estrutura de formulrio teremos um array de elements de 9 elementos, os 8 botes de radio e o boto debaixo. Ademais, teremos um array de botes de radio que se chamar colorin e depende do formulrio, acessvel desta maneira: document.form.colorin Este array tem em cada posio um dos botes de radio. Assim, na posio 0 est o boto de cor branca, na posio 1 o de cor vermelha... Para acessar a estes botes de radio fazemos pelo seu ndice. document.fcores.colorin[0] Se quisermos acessar por exemplo propriedade value do ltimo boto de radio escrevemos o seguinte: document.fcores.colorin[7].value A propriedade length do array de radios nos indica o nmero de botes 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 funo que se encarrega de encontrar o radio button selecionado e mudar a cor de fundo da pgina.

Define-se uma varivel na qual introduziremos o ndice do radio button que temos selecionado. Para isso, vamos percorrendo o array de botes de radio at encontrarmos o que tem sua propriedade checked a true. Nesse momento, samos do loop, com o qual a varivel i armazena o ndice do boto 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 Descrio e exemplo para o controle de campos de formulrio select, tambm chamados de combo box. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/5/05 Valorize este artigo: O objeto select de um formulrio uma dessas listas dinmicas 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 formulrio a seguir.

Um destes elementos pode ser obtido utilizando a etiqueta

Propriedades do objeto select Vamos ver uma lista das propriedades deste elemento de formulrio. length Salva a quantidade de opes do campo select. Quantidade de etiquetas <OPTION> Option Faz referncia a cada uma das suas opes. So por si mesmas objetos. options Um array com cada uma das opes do select. selectedIndex o ndice da opo que se encontra selecionada. A parte das conhecidas propriedades comuns a todos os elementos de

formulrio: form e name e type. Mtodos do objeto select Os mtodos so somente 2 e j conhecemos seu significado. blur() Para retirar o foco da aplicao desse elemento de formulrio. focus() Para colocar o foco da aplicao. Objeto option Temos que pararmos para ver tambm este objeto para entender melhor o campo select. Lembramos que as option so as distintas opes que tem um select, expressadas com a etiqueta <OPTION>. Propriedades de option Estes objetos s tm propriedades, no tm mtodos. Vamos v-las. defaultSelected Indica com um true ou um false se essa opo a padro. A opo padro se consegue com HTML colocando o atributo selected a um option. index O ndice dessa opo dentro do select. selected Indica se essa opo se encontra selecionada ou no. text o texto da opo. O que o usurio pode ver no select, que se escreve depois da etiqueta . value Indica o valor da opo, 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 opo selecionada. Vamos comear vendo o formulrio 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 funo que percorre as propriedades mais significativas do campo select e as apresenta em uma caixa alert. function digamePropriedades(){ var texto texto = "O nmero de opes do select: " + document.formul.minhaSelect.length var indice = document.formul.minhaSelect.selectedIndex texto += "\nIndice da opo escolhida: " + indice var valor = document.formul.minhaSelect.options[indice].value texto += "\nValor da opo escolhida: " + valor var textoEscolhido = document.formul.minhaSelect.options[indice].text texto += "\nTexto da opo escolhida: " + textoEscolhido alert(texto) } Esta funo cria uma varivel 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 opo selecionada e as duas seguintes, contm o valor e o texto da opo selecionada. Para acessar opo selecionada utilizamos o array options com o ndice percorrido na segunda varivel. 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 formulrio seria algo parecido a isto. formul.minhaSelect.value Entretanto, esta propriedade s est presente em navegadores Internet Explorer, portanto recomendvel acessar utilizando o vetor de options com o ndice da posio selecionada se desejarmos que a pgina seja compatvel com todos os navegadores. Quisemos acrescentar este ponto para que, se

alguma vez utilizarmos ou vermos utilizar este mtodo de acesso, sabemos seu problema e porque melhor utilizar o vetor de options.

Controle de elementos Textarea em Javascript Os elementos textarea so os campos que permitem introduzir vrias linhas de texto. Aprendemos a control-los com programao Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 24/5/05 Valorize este artigo: Para acabar de descrever todos os elementos de formulrios 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 vrias linhas de uma s vez. O campo textarea pode ser visto a seguir.
Nos Textarea Podemos colocar o texto Em vrias linhas

. Com o atributo name podemos </body>

Um campo textarea se consegue com a etiqueta Propriedades de textarea Pode-se ver uma lista das propriedades disponveis em um textarea a seguir, que so os mesmo que um campo de texto. defaultValue Que contm o valor padro do textarea. value Que contm o texto que est escrito no textarea. Alm disso, tm as conhecidas propriedades de elementos de formulrio form, name e type. Mtodos de textarea

Vejamos uma lista dos mtodos, que so os mesmos que em um campo de texto. blur() Para tirar o foco da aplicao do textarea. focus() Para colocar o foco da aplicao no textarea. select() Seleciona o texto do textarea. Vamos ver um exemplo a seguir que apresenta um formulrio que tem um textarea e um boto. Ao apertar o boto conta-se o nmero de caracteres e coloca-se em um campo de texto. Para acessar ao nmero de caracteres fazemos a partir da propriedade value do objeto textarea. Como value contm um string podemos acessar propriedade length que tm todos os strings para averiguar sua longitude. O cdigo da pgina 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 padro < /textarea> < br> < br> Nmero 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 explicao sobre o que so os eventos e como definir suas aes associadas em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 05/6/05 Valorize este artigo: Os eventos so a maneira que temos em Javascript de controlar as aes dos visitantes e definir um comportamento da pgina quando se produzam. Quando um usurio visita uma pgina 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 usurio clique sobre um boto, edite um campo de texto ou abandone a pgina. O manejo de eventos o cavalo de batalha para fazer pginas interativas, porque com eles podemos responder s aes dos usurios. 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 pgina. At agora aplicamos sempre o evento a um boto, mas poderamos aplica-lo a outros elementos da pgina. Como se define um evento Para definir as aes que queremos realizar ao produzir um evento utilizamos os manipuladores de eventos. Existem muitos tipos de manipuladores de eventos, para muitos tipos de aes do usurio. O manipulador de eventos se coloca na etiqueta HTML do elemento da pgina que queremos que responda s aes do usurio. Por exemplo, temos o manipulador de eventos onclick, que serve para descrever aes que queremos que se executem quando se clique. Se quisermos que ao clicar sobre um boto acontea alguma coisa, escrevemos o manipulador onclick na etiqueta <INPUT type=button> desse boto. 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 sentenas Javascript que queremos que se executem ao se produzir o evento. Cada elemento da pgina tem sua prpria lista de eventos suportados, vamos ver outro exemplo de manejo de eventos, desta vez sobre um menu desdobrvel, no qual definimos um comportamento quando mudamos o valor selecionado. < SELECT onchange="window.alert('Mudou a seleo')"> < OPTION value="opcao1">Opcao 1 < OPTION value="opcao2">Opcao 2 < /SELECT> Nets exemplo, cada vez que se muda de opo mostra uma caixa de alerta. Podemos v-lo em uma pgina a parte. Dentro dos manipuladores de eventos podemos colocar tantas instrues quantas desejarmos, mas sempre separadas por ponto e vrgula. O habitual colocar uma s instruo, e se se deseja colocar mais de uma, costuma-se criar uma funo com todas as instrues e dentro do manipulador se coloca uma s instruo que chamada funo. Vamos ver como se colocariam em um manipulador vrias instrues. < input type=button value=Cliacame onclick="x=30; window.alert(x); window.document.bgColor = 'red'"> So instrues 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 pgina a parte. Entretanto, tantas instrues postas em um manipulador ficam um pouco confusas, seria melhor criar uma funo assim: < script> function executaEventoOnclick(){ x = 30 window.alert(x) window.document.bgColor = 'red' } < /script>

< 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 pgina em uma janela a parte Hierarquia pelo objeto window Nos manipuladores de eventos tem que se especificar a hierarquia inteira de objetos do navegador, comeando sempre pelo objeto window. Isto necessrio porque existe algum browser antigo que no subentende o objeto window quando se escrevem sentenas 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 descrio de cada um. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 12/6/05 Valorize este artigo: Agora vamos ver uma lista dos manipuladores de eventos que existem disponveis em Javascript, oferecendo uma pequena descrio de cada um. Nota: Estes manipuladores so os mais comuns, presentes em Javascript 1.2 de Netscape Navigator. Existem outros manipuladores que tambm so muito interessantes e veremos mais adiante captulos de temas avanados de eventos. A lista de manipuladores de eventos contm o nome do manipulador em negrito, sua descrio e finalmente a verso de Javascript que incorporou tal manipulador. onabort Este evento se produz quando um usurio detm a carga de uma imagem, seja porque detm a carga da pgina ou porque realiza uma ao que a detm, como por exemplo, sair da pgina. Javascript 1.1

onblur Desata-se um evento onblur quando um elemento perde o foco da aplicao. O foco da aplicao o lugar onde est situado o cursor, por exemplo, pode estar situado sobre um campo de texto, uma pgina, um boto ou qualquer outro elemento. Javascript 1.0 onchange Desata-se este evento quando muda o estado de um elemento de formulrio, s vezes no se produz at que o usurio retire o foco da aplicao do elemento. Javascript 1.0 Javascript 1.0 onclick Produz-se quando se clica o boto do mouse sobre um elemento da pgina, geralmente um boto ou um link. Javascript 1.0 ondragdrop Produz-se quando um usurio solta algo que havia arrastado sobre a pgina web. Javascript 1.2 onerror Produz-se quando no se pode carregar um documento ou uma imagem e esta fica quebrada. Javascript 1.1 onfocus O evento onfocus o contrrio de onblur. Produz-se quando um elemento da pgina ou a janela ganham o foco da aplicao. Javascript 1.0 onkeydown Este evento produzido no instante que um usurio pressiona uma tecla, independentemente que a solte ou no. produzido no momento do clique. Javascript 1.2 onkeypress Ocorre um evento onkeypress quando o usurio 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 usurio deixa de apertar uma tecla. produzido no momento que se libera a tecla. Javascript 1.2 onload Este evento se desata quando a pgina, ou em Javascript 1.1 as imagens, terminaram de se carregar. Javascript 1.0 onmousedown Produz-se o evento onmousedown quando o usurio clica sobre um elemento da pgina. onmousedown se produz no momento de clicar o boto, soltando ou no. Javascript 1.2 onmousemove Produz-se quando o mouse se move pela pgina. Javascript 1.2 onmouseout Desata-se um evento onmuoseout quando a seta do mouse sai da rea ocupada por um elemento da pgina. Javascript 1.1 onmouseover Este evento desata-se quando a seta do mouse entra na rea ocupada por um elemento da pgina. Javascript 1.0 onmouseup Este evento se produz no momento que o usurio solta o boto 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 pgina os tenha. Javascript 1.2

onreset Este evento est associado aos formulrios e se desata no momento que um usurio clica no boto de reset de um formulrio. Javascript 1.1 onselect Executa-se quando um usurio realiza uma seleo de um elemento de um formulrio. Javascript 1.0 onsubmit Ocorre quando o visitante aperta sobre o boto de enviar o formulrio. Executase antes do envio propriamente dito. Javascript 1.0 onunload Ao abandonar uma pgina, seja porque se clique em um link que nos leva a outra pgina 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/6/05 Valorize este artigo: Ao longo dos manuais I e II de Javascript, mostramos muitos exemplos de utilizao dos manipuladores de eventos. Aqui, veremos exemplos simples que nos ocorrem para utilizar outros manipuladores que ainda no vimos. Evento onabort Vejamos um primeiro exemplo, neste caso sobre o evento onabort. Este evento se ativa ao se cancelar o carregamento de uma pgina, seja porque se clica o boto de cancelar ou porque o usurio sai da pgina por outro link. Este exemplo contm uma imagem que tem o evento onabort atribudo para que se execute uma funo no caso de que a imagem no chegue a se carregar. A funo informa ao usurio de que a imagem no chegou a se carregar e lhe pergunta deseja carrega-la outra vez. Se o usurio responde que

sim, ento comea a baixar a imagem outra vez. Se responde que no, no 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 pgina foi detido e h uma imagem que voc no 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 boto de parar o carregamento da pgina e se colocar em funcionamento o evento onerror < /body> < /html> Este exemplo estaria bem se sempre se detivesse o carregamento por clicar o boto de cancelar, mas o que acontece que o usurio cancelou por ir a outra pgina atravs de um link, sair a caixa de confirmao, mas no ocorrer nada independentemente do que se responda e o navegante ir irremediavelmente nova pgina.

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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 30/6/05

Valorize este artigo: Onblur se ativa quando o usurio retira o foco da aplicao de um elemento da pgina. O foco da aplicao o lugar onde est o cursor. Se por exemplo, estamos situados em um campo de texto e samos de tal campo, Seja porque clicamos com o mouse em outro campo do formulrio ou em uma rea vazia, ou seja porque o usurio apertou o boto tabulador (Tab) que move o foco at o seguinte elemento da pgina. 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 funo que comprove se o dado correto. Se no for correto posso obrigar ao foco da aplicao a se situar novamente sobre o campo de texto e avisar ao usurio para que mude tal valor. Pode ser uma maneira interessante de assegurarmos que em um campo de texto encontra-se um valor vlido. Embora tenha algum problema, como veremos mais adiante. Vamos comear por um caso simples, no qual somente desejamos comprovar um campo de texto para assegurarmos que um nmero inteiro. <html> < head> <title>Evento onblur</title> < script> function validarInteiro(valor){ //tento converter a inteiro. //se era um inteiro no lhe afeta, se no era tenta converte-lo valor = parseInt(valor) //Comprovo se um valor numrico if (isNaN(valor)) { //ento (no nmero) devolvo o valor cadeia vazia return "" }else{ //Em caso contrrio (Se era um nmero) devolvo o valor return valor } } function comprovaValidoInteiro(){

inteioValidado = validarInteiro(document.f1.numero.value) if (inteiroValidado == ""){ //se era a cadeia vazia que no era vlido. 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 nmero 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 funo validarInteiro. Se o valor devolvido pela funo no 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 aplicao na caixa de texto, para que o usurio coloque outro valor. At que o visitante no escreva um nmero inteiro no campo de texto o foco da aplicao permanecer no campo e continuar recebendo mensagens de erro.

Continuao do exemplo de onblur Fazemos um exemplo de validao de campos de un formulrio utilizando como base o evento onblur e solucionando um problema de bucle infinito. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 06/7/05 Valorize este artigo: Vimos o exemplo no exemplo do mtodo onblur relatado anteriormente uma possvel tcnica para comprovar os dados de um campo de formulrio. Agora vamos ver como evoluir esta tcnica se tivermos mais de um campo a validar,

dado que se pode complicar bastante o problema. De fato, antes de ler nossa soluo proposta, creio que seria um bom exerccio para o leitor praticar esse mesmo exemplo para os dois campos e trabalhar um pouco com a pgina para ver se encontramos algum problema. Muito provavelmente, encontraremos com um curioso loop infinito que nos vai dar mais quebra-cabea para solucionar. Na prtica, o leitor pode tentar validar um nmero inteiro e um cdigo postal. Para validar um cdigo postal necessitamos comprovar que uma cadeia de texto composta geralmente por 5 caracteres e todos so inteiros. Se algum quiser tentar, a funo para validar um cdigo postal seria algo parecido com isto: function ValidoCP(){ CPValido=true //se no tem 5 caracteres no vlido 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 contm 5 caracteres e de fazer um percorrido por cada um dos caracteres para comprovar que todos so inteiros. A princpio se supem que o cdigo postal correto, colocando a varivel CPValido a true, e se alguma comprovao falha muda-se o estado correto a incorreto, passando tal varivel a false. Pode-se comprovar ao montar o exemplo com dois campos...ns agora vamos dar uma soluo ao problema bastante complicadinha, pois inclumos instrues para evitar o efecto do loop infinito. No 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 cdigo. < 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 numrico if (isNaN(valor)) { //entao (nao numero) devolvo o valor cadeia vazia return "" }else{ //No caso contrario (Se era um nmero) devolvo o valor return valor } } function comprovaValidoInteiro(){ inteiroValidado = validarInteiro(document.f1.numero.value) if (interoValidado == ""){ //se era a cadeia vazia que nao era vlido. 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 vlido 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 cdigo postal vlido") //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 nmero inteiro: <input type=text name=numero size=8 value="" onblur="comprovaValidoInteiro()"> < br> Escreva um cdigo postal: <input type=text name=codigo size=8 value="" onblur="comprovaValidoCP()"> *espera uma cadeia com 5 carcteres numricos < /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 vocs poderam investigar por vocs mesmos e no qual se mostrava uma caixa de alerta atrs da outra indefinidamente, utilizamos uma varivel chamada avisado que contem um true se j foi avisado de que o campo estava mal e um false se ainda no foi avisado. Quando se mostra a caixa de alerta, se comprova se foi avisado ou no ao usurio. Se j foi avisado no se faz nada, evitando que se mostrem mais caixas de alerta. Se ainda no foi avisado mostra-se a caixa de alerta e colocase o foco no campo que era incorreto. Para restituir a varivel avisado a false, de modo que a prxima vez que se escreva mal o valor se mostre a mensagem correspondente, se utiliza o mtodo setTimeout, que executa a instruo com um atraso, neste caso de 50 milsimos de segundos. O suficiente para que no se meta em um loop infinito. Nota: Depois de todos os apetrechos que tivemos que colocar para que este

evento se comporte corretamente para cumprir com o objetivo desejado, possvel pensar que no vale a pena utiliza-lo neste objetivo. Podemos fazer uso do evento onchange, ou comprovar todos os campos de uma vez s quando o usurio decidiu envia-lo.

Elementos de formulrio select associados Como fazer com Javascript que um elemento de formulrio select mude suas opes quando mude outro elemento select da pgina. De modo que cada opo de um select tenha um grupo de opes possveis para o outro select. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 21/8/05 Valorize este artigo: Vamos conhecer um dos truques mais solicitados de Javascript, que tem muita relao com o tema de formulrios e onde se utiliza o evento onchange de Javascript. um exemplo sobre como realizar uma pgina com dois selects onde, segundo o valor escolhido em um deles, mudem as opes possveis do outro select. O melhor para ver o que vamos fazer ver uma pgina web onde se mostra em funcionamento o script. Para ver seu funcionamento, devemos mudar a seleo do primeiro select e comprovaremos como as opes do segundo select mudam automaticamente. O exemplo que ilustramos utiliza estados e pases. Ao escolher no primeiro select um pas, no segundo deve nos mostrar os estados desse pas para que possamos escolher um estado, mas somente um que esteja no pas selecionado no primeiro trmino. Conhecer o objeto select e os option importante conhecer os objetos de formulrio select e os option. Os select correspondem com as caixas de seleo desdobrveis e os option com cada uma das opes da caixa desdobrvel. Podemos ver um artigo que fala sobre isso. Teoricamente nos interessa fazer vrias coisas que tm a ver com extrair o valor de um select em qualquer momento, observar seu nmero de opes e, para cada opo, colocar seu valor e seu texto associado. Tudo isto aprenderemos a fazer neste exemplo. Referncia: Para conhecer o trabalho e a hierarquia de objetos

javascript (Tudo isso a base do trabalho com os elementos das pginas em Javascript) devemos ler o manual de Javascript II.

Modo de solucionar o problema Para comear, vamos utilizar um formulrio com dois selects, um para o pas 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">Frana < /select> < select name=estado> < option value="-">< /select> < /form> Observamos no select associado ao pas deste formulrio que, quando se muda a opo de pas, deve-se chamar a funo muda_estado(). Veremos mais adiante esta funo, agora importante observar que est associada ao evento onchange que se ativa quando muda a opo no select. Todo o resto ser cdigo Javascript. Comeamos definindo um monto de de arrays com os estados de cada pas. Neste caso temos s 4 pases, ento necessitaremos 4 arrays. Em cada array tenho uma lista de estados de cada pas, colocados em cada um dos elementos do array. Ademais, deixaremos o primeiro campo com um valor "-" que indica que no foi selecionado nenhum estado. var estados_1=new Array("","Andaluca","Asturias","Baleares","Canarias","Castilla y Len","Castilla-La Mancha","...") var estados_2=new Array("-","Rio de Janeiro","Bahia","So 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 pas se correspondem com os do select do pas. Por exemplo, a opo Espanha, tem o valor associado 1 e o array com os estados de Espanha se chama estados_1.

O script se completa com uma funo que realiza o carregamento dos estados no segundo select. O mecanismo realiza basicamente estas aes:

Detecto o pas que foi selecionado Se o valor do pas no for 0 (o valor 0 quando no foi selecionado nenhum pas) o Tomo o array de estados adequado, utilizando o ndice do pas. o Marco o nmero de opes que deve ter o select de estados o Para cada opo do select, coloco seu valor e texto associado, que faz corresponder com o indicado no array de estados. SE NO (O valor de pas 0, no foi selecionado pas) o Coloco no select de estado um nico option com o valor "-", que significava que no havia estado. Coloco a opo primeira do select de estado como o selecionado.

A funo tem o seguinte cdigo. 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 nmero 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 no havia estado selecionado, elimino os estados do select document.f1.estado.length = 1 //coloco um trao na nica opo que deixei document.f1.estado.options[0].value = "-" document.f1.estado.options[0].text = "-" } //marco como selecionada a opo 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 secundria quando o usurio abandona a pgina. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 06/10/05 Valorize este artigo: Vejamos um exemplo do evento onunload, que, lembramos, ativa-se quando o usurio abandona a pgina web. Portanto, onunload serve para executar uma ao quando o usurio sai da pgina, seja porque clica um link que leva fora da pgina ou porque fecha a janela do navegador. O exemplo que desejamos mostrar serve para abrir uma pgina web em outra janela quando o usurio abandona a pgina. Deste modo, atuam muitos dos incmodos popups das pginas web, abrindo-se justo quando abandonamos o site que estvamos 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 to simples que quase sobram as explicaes. Simplesmente criamos uma funo que abre uma janela secundria e a associamos com o evento onunload, que se coloca na etiqueta <body>.

Evento onload de Javascript

Com o evento onload podemos executar aes justo quando terminem de se carregar todos os elementos da pgina. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 07/10/05 Valorize este artigo: O evento onload de Javascript se ativa quando termina de se carregar a pgina. Deve ser colocado na etiqueta , embora em verses modernas de Javascript, tambm o aceitam outros elementos como as imagens. Com o evento onload podemos executar aes justo quando terminem de se carregar todos os elementos da pgina. um evento bastante utilizado, pois muito habitual que seja desejado realizar aes nesse preciso instante. Em nosso exemplo, vamos ver como poderamos fazer um script para motivar aos nossos visitantes que nos votem em um ranking qualquer de pginas web. A idia que a pgina se carregue inteira e, uma vez estando carregada, aparea uma janela de Javascript onde se proponha ao visitante votar a pgina. interessante esperar que termine de carregar a pgina inteira para que o visitante possa ver a web que se prope votar, antes de realmente pedirmos seu voto. O cdigo seria o seguinte: < html> < head> <title>Vote-me!!</title> < script language="JavaScript"> function pedirVoto(){ if (confirm("Esta pgina 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>Pgina SuperLegal</h1> < br> Esta pgina est muito bonita. Sou o autor e posso garantir que no h muitas pginas 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 pgina se chamar a uma funo chamada pedirVoto(), que definimos no bloco de script que temos no cabealho. A funo pedirVoto() utiliza uma caixa confirm para saber se realmente o usurio deseja nos votar. A funo confirm() mostra uma caixa com um texto e dois botes, para aceitar ou cancelar. O texto o que recebe por parmetro. Dependendo do que se clique nos botes, a funo confirm() devolver um true, se se clicou o boto aceitar, ou um false, no caso de que se clicasse sobre cancelar. A funo 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 aes se se clicou sobre aceitar. Para acessar pgina onde se contabiliza nosso voto temos o mtodo window.open(), que serve para abrir janelas secundarias ou popups. Mostramos a pgina onde se vota em uma janela secundria para que o visitante no saia de nosso web, j que acaba de entrar e no 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 criaes.

Manipuladores de eventos em Javascript 1.3 Lista de todos os manipuladores de eventos na linguagem Javascript 1.3. Por Miguel Angel Alvarez - Traduo de Celeste Veiga

Publicado em: 26/8/11 Valorize este artigo:

Nos artigos anteriores de CriarWeb.com vimos diversas informaes relativas aos eventos em Javascript. Agora, vamos dar uma lista que sirva como referncia para os programadores com Javascript 1.3. Especificamente, vimos antes os seguintes artigos que convm repassar:

Os eventos em Javascript Manipuladores de eventos de Javascript

No artigo de manipuladores de eventos de Javascript vimos os eventos das verses 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 so usados para invocar uma srie de comandos quando se produz um evento, tm 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 pgina, por exemplo uma imagem. Blur (onblur): este evento processado quando um elemento da pgina, geralmente um elemento de formulrio, perde o foco da aplicao. Change (onchange): Este evento se produz quando o usurio muda o contedo de um elemento de formulrio, tipo select, input ou textarea. Click (onclick): Se produz quando o usurio clica sobre um elemento da pgina, que pode ser um boto, um link, etc. DblClick (ondblclick): Este evento produzido quando o usurio clica duas vezes em um elemento de formulrio ou em um link. DragDrop (ondragdrop): Este evento se produz quando o usurio arrasta e solta um objeto na janela do navegador. Error (onerror): produzido quando houve um erro no carregamento de um elemento da pgina ou de um documento. Focus (onfocus): Este evento se produz quando um elemento da pgina, geralmente um elemento de formulrio, ganha o foco da aplicao. KeyDown (onkeydown): Este evento se dispara quando o usurio pressiona uma tecla. KeyPress (onkeypress): O evento onkeypress disparado quando o usurio pressiona ou mantm pressionada uma tecla.

KeyUp (onkeyup): Se produz quando o usurio solta uma tecla que tinha pressionada. Load (onload): Se executa quando a pgina termina de ser carregada, ou ento todos os frames do conjunto de FRAMESET. MouseDown (onmousedown): Este evento se produz quando o usurio aperta o boto do mouse. MouseMove (onmousemove): Se executa quando o usurio move o mouse. MouseOut (onmouseout): disparado quando o usurio retira o ponteiro do mouse. Por exemplo, se colocamos onmouseout sobre uma imagem, o evento disparado no momento em que o usurio sai com o ponteiro do mouse dessa imagem. MouseOver (onmouseover): Este evento se desata quando o usurio move o ponteiro do mouse sobre um elemento. Imaginemos que colocamos este evento em uma imagem, ento 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 usurio solta ou deixa de pressionar o boto do mouse. Move (onmove): Se produz quando o usurio ou um script movem a janela do navegador. Reset (onreset): O evento se executa quando se reseta o contedo de um formulrio, clicando em um boto de reset do formulrio, se tiver. Resize (onresize): disparado quando o usurio, ou um script, alteram o tamanho de uma janela do navegador ou de um frame. Select (onselect): O evento se produz quando o usurio seleciona um texto de um textarea ou de um campo de texto normal. Submit (onsubmit): Se lana quando se aperta o boto de submeter de um formulrio, assim que permite executar cdigo quando o usurio envia o formulrio. UnLoad (onunload): Evento produzido quando o usurio sai de um documento, ou seja, ao sair da pgina web, seja por pressionar um link que leva a outra pgina ou por fechar a janela do navegador.

Efeitos rpidos com Javascript Antes de aprofundarmos na matria, veremos alguns exemplos de cdigos simples de grande utilidade.

Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 16/9/04 Valorize este artigo: Antes de aprofundarmos na matria, podemos ver uma srie de efeitos rpidos que se podem programar com Javascript. Isto, pode nos dar uma idia ms clara e exata das capacidades e da potncia da linguagem na hora de percorrer os prximos captulos. Abrir uma janela secundria Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante atrativas. Por exemplo podemos ver como abrir uma janela secundria sem barras de menus que mostre o buscador Google. O cdigo 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 pgina 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 pgina est "ao dia", ou seja, est atualizada. < script> document.write(new Date())< /script> Estas linhas deveriam ser introduzidas dentro do corpo da pgina no lugar onde quisermos que aparea a data da ltima atualizao. Podemos ver o exemplo em funcionamento aqui. Nota: Um detalhe a destacar que a data aparece em um formato um pouco raro, indicando tambm a hora e outros atributos da mesma,

mas j aprenderemos a obter exatamente o que desejarmos no formato correto.

Boto de voltar Outro exemplo rpido pode ser visto a seguir. Trata-se de um boto para voltar para trs, como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de cdigo que mistura HTML e Javascript para criar este boto que mostra a pgina anterior no histrico, se que havia. < input type=button value=Atrs onclick="history.go(-1)"> O boto ser parecido ao seguinte. Podemos clic-lo para ver seu funcionamento (deveria nos levar pgina anterior). Como diferena com os exemplos anteriores, h que destacar que neste caso a instruo Javascript se encontra dentro de um atributo de HTML, onclick, que indica que essa instruo tem de ser executada como resposta ao clicar no boto. possvel comprovar a facilidade com a qual se podem realizar algumas aes interessantes, e existiriam muitas outras mostras, mas que reservamos para captulos posteriores.

Abertura e configurao de popups com Javascript Este artigo lhe mostrar com detalhes como abrir janelas e configurar sua forma. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 18/7/05 Valorize este artigo: Em determinadas ocasies muito til abrir um link em uma janela secundria, ou seja, uma janela a parte que se abre para mostrar uma informao especfica. Algumas vantagens de abrir um link em uma janela secundria seriam:

Clique aqui para ver o que uma janela secundria

O usurio no sai da pgina onde estava o link. A janela secundria 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 secundria utilizando Javascript aumenta.

Para abrir uma janela secundria 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 secundria muito facilmente simplesmente com HTML. Para isso podemos utilizar o atributo TARGET das etiquetas HREF. Se colocamos target="_blank" no link, a pgina se abrir numa janela secundria. Tambm 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 pgina secundria com HTML consiste em que no podemos definir a forma desta e nem poderemos exercer maior controle sobre ela tal como comentvamos entre as vantagens de abrir uma janela secundria com Javascript. A janela que se abre sempre ser como o usurio tenha definido por padro em seu navegador. Abrir uma janela com Javascript

Para abrir uma janela com Javascript podemos utilizar a sentena window.open(). No tem problema se voc no conhece Javascript, visto que muito simples utiliza-lo para este caso. Veremos passo a passo como abrir uma janela secundria utilizando Javascript. 1. Sentena Javascript para abrir uma janela A sentena simplesmente a funo window.open(), o mais complicado saber como utilizar esta funo, mas agora veremos que no requer nenhuma complicao. A funo window.open() recebe trs parmetros, que se colocam dentro dos parnteses, deste modo: window.open(URL,nome_da_janela,forma_da_janela) Vejamos rapidamente cada um destes parmetros separadamente. URL: representa o URL que desejamos abrir na janela secundria, 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 secundaria. Por

exemplo, pode-se definir sua altura, largura, se tm barras de deslocamento, etc Vejamos um exemplo de sentena Javascript completa para abrir uma janela secundria: window.open("http://www.criarweb.com" , "janela1" , "width=120,height=300,scrollbars=NO") Isto quer dizer que abra a pgina inicial de criarweb.com em uma janela secundria a qual vamos chamar janela1. Ademais, a janela ser de 120 pixels de largura, 300 de altura e no ter barras de deslocamento. Um esclarecimento adicional, se depois de abrir essa janela colocarmos outro link na pgina que abria a janela cujo atributo target est dirigido para o nome_da_janela (neste caso janela1), este link ser mostrado na janela secundria. 2. Funo que abre uma janela Os mais cmodo para abrir uma janela colocar uma funo Javascript que se encarregue das tarefas de abri-la e que receba por parmetro 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 no deve estar dirigido diretamente pgina que quisermos abrir, e sim, sentena Javascript necessria para abrir a janela secundria. Para executar uma sentena Javascript com o clique de um link, fazemos assim: <a href="javascript:sentenca_javascript_para_abrir_a_janela"> 4. O link chama funo que abre a janela Agora Vejamos como ficaria todo esse link na pgina. <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 secundria (Na pgina que formos colocar este link deveramos ter o script que fizemos anteriormente que continha a funo para abrir a janela.) H que observar que as aspas simples so as que so colocadas para definir o URL que se passa como parmetro da funo janelaSecundaria(). So aspas simples porque o href do link j tem umas aspas duplas, e dentro das aspas duplas sempre se deve utilizar aspas simples a no ser que desejemos fechar as aspas duplas. Parmetros para dar forma a uma janela Estes atributos podem ser utilizados na funo window.open() para definir a forma que desejar que tenha sua janela secundria. Width Height Top Ajusta a largura da janela. Em pixels Ajusta a altura da janela Indica a posio da janela. Na verdade a distancia em pixels que existe entre a borda superior da tela e a borda superior da janela. Indica a posio da janela. Em concreto a distancia em pixels que existe entre a borda esquerda da tela e a borda da janela. Para definir de forma exata se saem ou no 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 necessrias em NTS). Establece se se pode ou no modificar o tamanho da janela. Com resizable=YES pode-se modificar o tamanho e com resizable=NO consegue-se um tamanho fixo. A partir de aqui se enumeram outra srie de propriedades que serven para mostrar ou no um elemento da barra de navegao que tem os navegadores mais populares, como poderia ser a barra de menus ou a barra de estado.

Left

Scrollbars

Resizable

Directories (barra diretorios) Location (barra endereos) Menubar

(barra de menus) Status (barra de estado) Titlebar (a barra do ttulo) Toolbar (barra de ferramentas)

Quando colocamos o atributo=YES estamos forando que esse elemento seja visto. Quando colocamos atributo=NO o que fazemos evitar que esse elemento seja visto.

Abrir uma janela sem um link

Em outras ocasies desejaremos abrir uma janela secundria automaticamente, ou seja, sem a necessidade de que o usurio clique sobre nenhum link. Neste caso, o cdigo da funo janelaSecundaria nos serve tambm e teremos que acrescentar uma linha de cdigo Javascript em seguida da funo janelaSecundaria. Esta linha a acrescentar simplesmente ser uma chamada funo que se executar Segundo esteja carregando a pgina. Vejamos como ficaria este cdigo: < 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 funo que abre a janela secundria, como est fora de uma funo se executa segundo estiver carregando a pgina.

Acessso por senha Javascript Este artigo explica passo a passo como criar um sistema para proteger por senha umas pginas em sua web. Utilizamos Javascript, uma linguagem acessvel a todo mundo. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 28/7/05

Valorize este artigo: Lamentavelmente, javascript no uma linguagem com a qual se possa realizar um mtodo interessante para fazer com que algumas pginas de nosso site somente seja acessveis se se introduz uma senha correta. Mesmo assim, existe um mecanismo para poder realizar isto, que no muito avanado nem muito seguro, mas pode dar um efeito em nossas pginas que estamos desejando. Trata-se de colocar pginas web em nosso espao de links, para que ningum possa acessa-las. Esta toda a segurana que podemos dar a nossas pginas: como no existem links dirigidos para elas, ningum poder acessalas. A nica maneira de acessar as pginas seria conhecendo o nome de arquivo e escrever a URL do mesmo, mas como tambm no vamos publicar o nome do arquivo, poderemos estar quase certos de que ningum acertar construir o endereo da pgina que queremos ocultar. Logo, criaremos um formulrio muito simples, que incluir um campo de texto e um boto. No campo de texto teremos que escrever o nome do arquivo que se deseja ver e ao clicar o boto javascript seremos conduzidos para a pgina 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 no acertamos com o nome da pgina escondida. Neste caso, se mostraria uma pgina de erro tpica, dessas que o servidor mostra quando tentamos acessar a uma pgina que no existe. 2. Segundo, que o nome da pgina 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 pgina oculta. Vejamos passo a passo como construir este sistema de acesso por senha: 1.- As pginas para desenvolver Temos que trabalhar com 2 pginas web pelo menos, uma para colocar o formulrio e outra que seria a pgina oculta. Teremos estas pginas colocadas no mesmo diretrio, com o qual simplificaremos um pouco o problema. 2.- Formulrio para a senha Na pgina que quisermos colocar o acesso por senha, devemos colocar o seguinte formulrio: < FORM name=formsenha> < INPUT type=password name=senha> < INPUT type=button value=Acessar> < /FORM>

3.- Funo que nos envia pgina oculta Como a pgina 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 funo 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 pgina cujo nome acaba de ser construido. Como concatenamos com ".html" o nome do arquivo escrito no formulrio, o nome que escrevermos dever ir sem ".html". 4.- Incluir no boto a chamada funo Com o objetivo de que ao clicar o boto o navegador nos leve pgina oculta, temos que fazer com que ao clica-lo, seja chamada a funo acesso definida no ponto anterior. Isto se consegue mediante o atributo onclick, que devemos inserir na etiqueta do boto. < INPUT type=button value=Acessar onclick="acesso()"> 5.- Cdigo inteiro da pgina Podemos ver a seguir o cdigo da pgina inteira. Somente mostramos o cdigo da pgina que tem o formulrio, porque a pgina 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 anotaes

Uma coisa importante na hora de conseguir que o script seja mais confivel consiste em criar pginas com um nome de arquivo dificil de se inventar. Como o nome da pgina a senha com a qual vai ser acessada a pgina necessitaremos que tal nome seja um pouco complexo, como por exemplo, fks12dmxc53.html. Se a pgina senha se chamasse por exemplo, index.html qualquer um com um pouco de imaginao poderia inventa-la. Antes de terminar, cabe repetir que este no o mtodo mais seguro que existe para criar scripts para realizar acessos restringidos, somente uma pequena astcia que "funciona". Para realizar este objetivo com melhores resultados temos linguagens como ASP, PHP ou CGI. Tambm podemos restringir o acesso s pginas utilizando o prpio sistema operativo e a autentificao que este implementa, tal vez seja a opo mais cmoda, embora no seja cem porcento provvel que o nosso provedor de hospedagem nos permita.

Rollover com Javascript Aprenda a fazer um efeito de iluminao sobre uma imagem ao passar o mouse por cima. Pelo ponto de vista prtico, voc mesmo ser capaz de fazer em alguns minutos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 14/8/05 Valorize este artigo: 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 pgina web con poucas linhas de Javascript, e sem necessidade de saber programar. Vamos ver a tcnica pela prtica e com uma elemental receita: 1. Nomeamos a imagem

Exemplo de rollover

Colocamos na pgina a imagem que tem o desenho apagado. Alm disso, lhe atribumos 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 usurio clique nele. <a href="ir_a.html"> 3. Comeamos 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 ao 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="-Cdigo JavaScript-" onmouseout="Cdigo JavaScript-"> 4. Pegamos as imagens com JavaScript Vamos declarar duas variveis 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 nmeros que vocs vero correspondem com a largura e com a altura da imagem que esto 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 cdigo 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 ficaro assim: onmouseover="window.document['imagem1'].src= iluminada.src onmouseout="window.document['imagem1'].src = apagada.src 5. Este o cdigo completo < script language=javascript> 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 vocs deve ser feito para iluminar uma imagem, um primeiro passo, agora vocs podem provar com um grupo de imagens para criar uma barra de navegao dinmica com Javascript!

Navegador dinmico Javascript Mostramos com um exemplo prtico como criar uma barra de navegao dinmica com algumas imagens e Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 10/10/05 Valorize este artigo:

Vamos ver como fazer, com Javascript e umas imagens, uma barra de navegao para uma pgina web, que mude quando o mouse passe por cima. Esta ajuda tcnica est pensada para ser lida em seguida do informe Rollover com Javascript, publicado em CriarWeb, pois contm as bases sobre o que vamos trabalhar agora. 1. Construimos as imagens Temos que construir duas verses de barra de navegao, umas que esteja iluminada, por assim dizer, e outra que esteja um pouco apagada. Ao passar o mouse mudaremos de uma a outra. Aqui esto as imagens que propomos para este exerccio: APAGADAS ILUMINADAS

2. Criamos a barra com HTML Com uma tabela de HTML vamos fazer a barra de navegao para a pgina, ainda sem movimento. Cm estes detalhes:

princpio colocamos as imagens apagadas Cada imagem tem um link pgina 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 no fique separao entre as imagens. Por esta ltima razo, tambm no devemos deixar espao em branco no cdigo 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 rpido, e mudem as imagens velozmente segundo se passe o mouse. Utilizaremos este cdigo, que se coloca no cabealho 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 = new Image(110,16) 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 mudana da imagem iluminada e apagada respectivamente. onmouseover="window.document['imagem1'].src =iluminada1.src" onmouseout="window.document['imagem1'].src = apagada1.src" onmouseover="window.document['imagem2'].src =iluminada2.src" onmouseout="window.document['imagem2'].src = apagada2.src" onmouseover="window.document['imagem3'].src =iluminada3.src" onmouseout="window.document['imagem3'].src = apagada3.src" onmouseover="window.document['imagem4'].src =iluminada4.src" onmouseout="window.document['imagem4'].src = apagada4.src" onmouseover="window.document['imagem5'].src =iluminada5.src" onmouseout="window.document['imagem5'].src = apagada5.src" onmouseover="window.document['imagem6'].src =iluminada6.src" onmouseout="window.document['imagem6'].src = apagada6.src"

5. Cdigo inteiro Isso tudo que se necessita. A seguir podemos ver o cdigo 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 = 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 = new Image(110,16) 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" name="imagen2"></a></td> </tr> <tr> < 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" name="imagen3"></a></td> </tr> <tr> < 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" name="imagen4"></a></td> </tr> <tr> < 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" name="imagen5"></a></td> </tr> <tr> < 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 navegao, mas esta uma boa forma. Com um pouco de criatividade voc pode criar umas imagens bonitas que faam uns efeitos legais ao passar o mouse por cima.

Navegador desdobrvel Para aprender em poucos passos a criar um navegador formado por um menu desdobrvel. Ao selecionar uma opo do menu iremos a uma pgina distinta. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 17/10/05 Valorize este artigo: Est na moda incluir um navegador de website consistente em um campo desdobrvel de formulrio ou de caixa de seleo que, ao selecionar um de seus elementos, que se correspondem com sees do site, nos leve seo que pretendemos visitar de maneira automtica. Pode ser visto a seguir um exemplo.

Este tipo de controle possui vrias vantagens, entre as quais podemos destacar:

Ocupa pouco espao na pgina Pode-se colocar quantas opes se desejar uma ferramenta muito visual e prtica muito fcil de implementar Passos a realizar:

Para conseguir um navegador assim em nossa pgina web devemos enfrentar uma tarefa que poderia ser dividida em duas partes. Por um lado, devemos

criar um formulrio que contenha a caixa de seleo desdobrvel e por outro, um simples script que d vida caixa, ou seja, que prepare a caixa para que o navegador se dirija pgina selecionada. Vamos ver separadamente cada um destes elementos. Formulrio Custar da etiqueta <form> para abrir e fechar o formulrio. Daremos um nome ("navegador") ao formulrio para poder acessa-lo mais tarde usando Javascript. Dentro do formulrio colocaremos um nico elemento: o campo de seleo mltipla desdobrvel. Daremos um nome tambm ao campo ("secoes") para poder acess-lo usando Javascript. Este campo conter as diferentes opes que queremos que sejam apresentadas no menu desdobrvel. Estas podero ser sees de sua web ou tambm, pginas que estejam fora do site. Vamos ver o cdigo do formulrio antes de continuar com a explicao: <form name=navegador> < select name="secoes"> < option value="no">Sees e servios 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">Divulgao de p&aacute;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 opo corresponde a uma das sees ou servios de criarweb e est composta por duas partes importantes, a primeira corresponde com o atributo value da etiqueta <option>, que igual URL absoluta da pgina ao qual queremos nos dirigir. A segunda parte destacvel corresponde com o nome que desejarmos que seja visto na caixa de seleo. tambm importante destacar que inclumos alguma opo que no quisemos que nos direcione a nenhum lugar. So opes para separar as sees dos servios ou a primeira opo, para indicar que este menu desdobrvel contm as sees e servios de criarweb. As opes que no quisermos que nos levem a outra pgina so marcadas com um "no" em seu atributo value. O script

Agora vamos ver qual o script que utilizamos para animar este menu desdobrvel. muito simples, podemos v-lo a seguir: <script language=javascript> function destino(){ url = document.navegador.secoes.options[document.navegador.secoes.selectedInde x].value if (url != " no") window.location = url; } </script> Basicamente uma funo que recupera o value da opo selecionada na caixa de seleo desdobrvel e o armazena em uma varivel chamada url. Posteriormente, se a varivel url no contm a palavra "no", leva ao navegador posio selecionada, ou seja, ao url que havamos buscado. Lembrem que se marcvamos o value de uma opo a "no" que no desejvamos que o navegador viajasse a outro endereo. O evento OnChange

Isto no funcionaria se no vinculssemos o evento onchange da caixa de seleo funo destino que vimos agora pouco. O evento onchange se dispara quando se muda o valor selecionado dentro do menu desdobrvel e devemos fazer com que chame a funo 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 desdobrvel e, esperamos, a capacidade para personaliz-lo a seu gosto. Mais uma coisa: se o seu site tem frames dever ser feito algumas mudanas no script para que tudo funcione corretamente.

Navegador desdobrvel com frames

 a continuao da ajuda tcnica para criar um menu desdobrvel. Neste caso se realiza uma adaptao do script para que possa ser utilizado em um site desenhado com frames. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 31/10/05 Valorize este artigo: Este um artigo que debe ser lido como continuao do artigo Como fazer um navegador desdobrvel, publicado em criarweb.com. Nesse artigo mostrvamos como criar um navegador desdobrvel com um elemento SELECT de um formulrio. Muitos visitantes j utilizaram o script com sucesso, mas alguns escreveram com dvidas de sua utilizao em uma pgina realizada com frames. A dvida 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 lgico visto que muitas vezes o navegador se coloca de modo que esteja sempre visvel, em um frame onde temos os controles de navegao e a rea que desejarmos que se atualize a correspondente ao frame principal. Mudanas no script O nico lugar onde vamos ter que fazer mudanas no script que contem a funo a qual chamamos destino(). H que adaptar essa funo para que possamos mudar a pgina de um frame distinto ao que estamos. Em nosso exemplo anterior fazamos window.location = url para mudar o contedo 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 atravs desta inter-ligaes 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 no 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 pgina que contem menu desdobrvel. Como o segundo frame acessaramos a sua location desta maneira: window.parent.frames[1].window.location = url O script inteiro ficaria assim: < script language=javascript> 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 no 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 13/12/05 Valorize este artigo: 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 dvida, pode ser fcil pegar o script, copiar em nossa pgina e faz-lo funcionar, mas ns vamos procurar uma explicao 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 pgina de exemplo. Agora vejamos os distintos passos. 1. Defino umas variveis iniciais O script pode mover o texto que ns desejarmos e para configur-lo h que criar uma varivel que chamamos texto_estado onde introduziremos nosso

texto. var texto_estado = " Bem-vindo a minha pgina web" Podemos notar que foram introduzidos uns espaos antes que o texto. So para que se crie um espao na barra de estado entre a sada do texto e a entrada deste pelo outro lado. O nmero de espaos em branco pode ser modificado livremente, assim como o texto que se mostra. Tambm ser necessrio criar uma varivel chamada posio onde vamos salvar a posi/ao do texto na barra de estado. var posicao = 0 2. Funo para mover o texto Agora vamos ver a funo, a qual chamaremos move_texto(), que se encarrega de mover o texto pela barra de estado. Entender esta funo pode ser um pouco complexo se no se conhece um pouco a linguagem Javascript. De qualquer forma, podemos tambm copia-la e cola-la em nossas pginas embora no consigamos entender. Realiza quatro aes bsicas:

Move a posio atual, atualizando a varivel posio. Se chegarmos ao final da cadeia, volta-se ao princpio if (posicao < texto_estado.length) posicao ++; else posicao = 1; Cria uma cadeia a partir do texto original. A cadeia criada contm o texto que existe desde a posio atual at o final concatenado com o que h desde o princpio at a posio atual. Este o passo que realmente gera o movimento, porque vai mudando a cadeia que logo escreveremos medida que a posio tambm muda. string_atual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao) Escreve a cadeia resultante da operao anterior na barra de estado. window.status = string_atual A funo chama-se a si mesma para continuar o movimento. Para isso, utiliza-se uma funo muito socorrida, setTimeout(), que serve para executar uma sentena com atraso de tempo. A funo recebe a sentena para executar (que neste caso, uma chamada a mesma funo) e o nmero de milsimos de segundos que tem que esperar para executa-la, neste caso 50. setTimeout("move_texto()",50)

A funo inteira tem este cdigo: 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 funo Para comear a mover o texto pela pgina temos que realizar uma chamada funo que se encarrega disso. Ser mais claro o cdigo da pgina se colocarmos a chamada funo depois que tiver sido definida, embora no seja obrigatrio. move_texto() 4. Tudo junto Para acabar, podemos observar a seguir o cdigo inteiro de uma pgina web que move texto pela sua barra de estado. um pgina 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 pgina 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. No vamos comentar este segundo exemplo porque j se encontra comentado no prprio cdigo 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"> //varivel com o texto a mostrar var texto = "Bem-vindos a minha pgina 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) } }

//chamo funo para colocar o texto em movimento textoEstado() </script>

</body> </html>

Marcar ou desmarcar todos os checkboxes de um formulrio com Javascript Realizamos uma funo de Javascript para que se possa selecionar todos os checkboxes ou caixas de seleo de um formulrio de uma s vez, clicando somente um link. Fazemos tambm a funo para desmarcar todos os elementos de uma s vez. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 04/1/06 Valorize este artigo: O exerccio que vamos relatar neste artigo bastante tpico de trabalho com formulrios em Javascript. Trata-se de fazer um link para que se possa marcar todos os campos checkbox que houver em um formulrio de uma s vez, ou seja, sem ter que clica-los um por um para marcar todos. Tambm faremos a funo que permite desmarcar todos os campos checkbox do formulrio de uma s vez. O exerccio simples de entender, mas podemos v-lo em uma pgina a parte para termos uma idia exata de nossas intenes. O formulrio HTML Temos um formulrio criado com HTML que onde estaro os checkboxes que sero marcados e desmarcados automaticamente. O formulrio muito simples. Vemos a seguir: < form name="f1"> Nome: <input type="text" name="nome"> < br> < input type="checkbox" name="ch1"> Opcao 1 < br> < input type="checkbox" name="ch2"> Opcao 2 < br> < input type="checkbox" name="ch3"> Opcao 3

< br> < input type="checkbox" name="ch4"> Opcao 4 < 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 formulrio. Na verdade s vamos trabalhar com o estado dos checkbox, mas no inclumos outros elementos porque o habitual em um formulrio que tenham elementos de vrios tipos. No final do formulrio temos dois links para marcar ou desmarcar todos os checkboxes de uma s vez. Estes links chamam a duas funes Javascript que veremos agora. Funes 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 funo selecionar_tudo() realiza um percorrido por todos os elementos do formulrio. Para fazer um percorrido por todos os campos utiliza-se o array "elements", que salva uma referncia com cada elemento que houver dentro do formulrio. 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 funo 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 seleo 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 boto direito do mouse sobre a pgina. De modo que no possam ver o cdigo fonte nem acessar a outras opes parecidas. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 23/1/06 Valorize este artigo: Neste artigo vamos mostrar um mtodo para desabilitar o menu contextual do navegador, que aparece clicando com o boto direito em qualquer rea da pgina. Assim, podemos evitar que o usurio tenha acesso a algumas das opes do navegador, como ver o cdigo fonte. A primeira coisa que queremos destacar que este exemplo no protege o cdigo das pginas web que estamos publicando. Simplesmente coloca algumas travas para ver como fizemos a pgina, mas qualquer usurio espertinho poder acessar ao cdigo da pgina se realmente quiser. Para comear, na barra de menus do navegador, em "exibir - cdigo fonte", pode-se acessar tambm ao cdigo fonte das pginas. Portanto, se desejarmos que no seja visto nosso cdigo, teremos que mostrar a pgina em uma nova janela do navegador, que devemos abrir mediante Javascript para que no inclua as barras de menus. Mesmo se consegussemos evitar mostrar a barra de menus e o menu contextual, um usurio ainda poderia desabilitar Javascript para tentar ver o menu contextual sem que a pgina o empea. Porm, devemos saber que quando se envia uma pgina a um visitante, o arquivo HTML salvo no disco rgido local desse usurio, ento em ltimo caso, a pessoa interessada simplesmente tem que acessar seus arquivos temporrios da Internet para localizar a pgina que tem o cdigo 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 cdigos nunca estaro totalmente seguros. Nota: A melhor soluo para proteger um cdigo escrev-lo no lado do servidor, com linguagens como ASP ou PHP. Ao estar no lado do servidor, os scripts se executaro no servidor e o visitante s receber o cdigo gerado dessa execuo, no prprio cdigo ASP ou PHP. Portanto, no pode ser feito nada definitivo para ocultar um cdigo que se executa no cliente, portanto esta soluo proposta s um detalhe que pode entorpecer a captura de um cdigo, mas no serve para protege-lo definitivamente. Sendo assim, o cdigo 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 funo a este evento, que se executar no momento em que o usurio clique o boto direito para visualizar o menu contextual. A funo que vamos atribuir a este evento a seguinte: function desabilitar(){ alert ("Esta funo est desabilitada.\n\nDesculpem as molstias.") return false } A funo mostra uma mensagem de advertncia, mas observemos o return false: necessrio para que no chegue a mostrar o menu contextual, porque se no colocarmos, se mostraria a mensagem de alerta mas em seguida se mostraria tambm o menu contextual, com o qual no serviria para nada o script. Para atribuir esta funo ao evento oncontextmenu, realizamos este cdigo: document.oncontextmenu=desabilitar To simples como isso. O script completo, que colocaramos entre <head> e </head> ficaria assim: < script language=JavaScript> < !-function desabilitar(){ alert ("Esta funo est desabilitada.\n\nDesculpem as molstias.") return false } document.oncontextmenu=desabilitar

// --> < /script>

Relgio em Javascript Aprendemos a criar um relgio simples mediante Javascript e lhe aplicamos algumas melhoras. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 06/2/06 Valorize este artigo: Vamos ver um workshop prtico sobre Javascript com o qual poderemos incluir um relgio em nossa pgina web. um simples script, que poderemos colocar simplesmente copiando e colando, embora procuraremos explica-lo um pouco para os que estejam em condies de entender Javascript. Para comear, vamos ver o reloginho que pretendemos criar:

um relgio muito simples de maneira intencionada, para que possamos entender bem o exerccio. Logo, o complicamos um pouco mais para lhe dar algo mais de atrao. Construir o formulrio Comeamos colocando o campo de texto onde ser mostrado o relgio. Devemos colocar um pequeno formulrio onde somente teremos um campo de texto. < form name="form_relogio"> < input type="text" name="relogio" size="10"> < /form> No deveria haver nenhum problema nessas linhas de HTML. S colocamos as etiquetas de incio e final do formulrio e dentro um campo de texto. Atribumos um nome tanto ao formulrio como ao campo de texto para logo acessarmos por esse nome mediante Javascript. Funo para atualizar o valor do relgio Temos que construir uma funo 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 instncia do objeto Date sem lhe passar parmetros, inicia-se data e hora atuais. Logo temos que obter dessa instncia de Date o que nos interessa, que a hora, os minutos e segundos. Fazemos isto utilizando os correspondentes mtodos 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 formulrio o valor atual da hora. document.form_reloj.reloj.value = horaImprimible Por agora a funo 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 funo deve charmar a si mesma Com estas linhas de cdigo obtemos a hora e a atualizamos em seu campo de texto, mas ainda no terminou, necessitamos que essa funo se chame constantemente e cada segundo para que atualize o valor de nosso campo de texto constantemente tambm. Para isso, o melhor que a funo se encarregue tambm de chamar a si mesma a cada segundo, assim voltar a fazer todo o processo de obteno e atualizao da hora e por ltimo chamar a si mesma ao final de um segundo. Este processo se repetir sempre at sairmos da pgina. A linha de cdigo para chamar a si mesma, que colocaremos na ltima linha da funo a seguinte:

setTimeout("moveRelogio()",1000) A funo setTimeout serve para fazer o adiantamento antes de executar a sentena. A sentena uma simples chamada funo e o adiantamento de 1000 milsimos de segundos (um segundo). Colocar o relgio em funcionamento Finalmente necessitamos colocar o relgio em funcionamento. Isto pode ser feito uma vez terminado o carregamento da pgina com o administrador de eventos onload, que coloca-se no <body>. < body onload="moveRelogio()"> Isto quer dizer que quando termine de carregar a pgina se chamar funo moveRelogio(), que se encarregar de mover o relgio e chamar a si mesmo para fazer o processo de maneira contnua. Cdigo inteiro O cdigo da pgina 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 relgio funcionando... < form name="form_relogio"> < input type="text" name="relogio" size="10"> < /form>

< /body> < /html>

Acrscimos para o relgio Podemos fazer muitas coisas para melhorar os aspectos deste relgio. Por exemplo, dar um pouco de estilo ao campo de texto ou fazer co que ningum possa pousar em cima do campo de texto para atualizar manualmente o valor da hora. Vamos ver alguma coisinha: Estilo ao relgio Com folhas de estilo podemos mudar a aparncia do relgio para torn-lo um pouco mais especial. Este um exemplo o qual poderamos 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 ningum poder modificar o texto do relgio manualmente. Conseguimos isso com Javascript. O administrador de eventos onfocus se ativa quando o campo de texto adquire o foco da aplicao. Nesse momento nos tiraremos o foco da aplicao com o mtodo blur(). O boto ficaria assim: < input type="text" name="relogio" size="10" onfocus="window.document.form_relogio.relogio.blur()"> Fazer com que sempre tenhamos dois dgitos 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 dgito ao valor. Vejamos como obtemos o string a partir do nmero de segundos obtido. Faremos para os segundos, logo, a hora e os minutos sero 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 princpio. if (str_segundo.length == 1) segundo = "0" + segundo

Tudo junto Vejamos outra vez nosso exemplo em uma s pea 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 relgio 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 relgio pode ser visto a seguir:

Se desejarmos podemos abrir uma pgina 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 Daz

Publicado em: 22/2/06 Valorize este artigo: Um dos maiores problemas que um programador encontra na hora de criar pginas com DHTML lidar com os diferentes modelos de objetos que tm cada um dos navegadores, e cujas diferenas no s se do com os navegadores das distintas companhias, como tambm entre a mesma companhia h diferenas na modalidade dos objetos dependendo das verses. 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 cdigo de cada uma das nossas funes dependendo do navegador que se utiliza. Devido grande variedade de navegadores e verses disponveis, isto faz com que nossas funes acabem sendo muito maiores e mais ilegveis do que o esperado. Uma soluo para este problema a criao de diferentes arquivos que contenham os scripts para cada um dos navegadores que existem, ligando no momento do carregamento da pgina com o arquivo de scripts do navegador e a verso que estamos utilizando. Desta forma, os scripts so muito mais simples j que um script se criar enfocado a uma s verso, e ademais, no caso de que saia no mercado um novo navegador com um modelo de objetos diferente, no 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 cdigo 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 boto, aparea uma mensagem de alerta diferente dependendo do navegador que utilizarmos.

O primeiro passo a criao dos diferentes arquivos que vo conter os scripts especficos para cada um dos navegadores. Em nosso caso sero 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 contedo de Internet.js ser o seguinte: function mostraAlerta(){ alert("Estou utilizando IE") } O contedo de Nescape.js ser o seguinte: function mostraAlerta(){ alert("Estou utilizando NS") } Por outro lado, no cabealho de cada uma das pginas, deveremos incluir um script que ligue a cada um dos navegadores, dependendo do que utiliza o usurio. < 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 inclumos no corpo da pgina um boto que chama funo que est definida dentro dos arquivos de scripts: < input type="button" value="Clicar" onclick="mostraAlerta()"> De forma que a pgina 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 tm tamanhos diferentes. Com javascript evitamos isso. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 23/3/06 Valorize este artigo: Se criarmos um formulrio com uns campos de texto em uma pgina web poderemos observar que Internet Explorer no coloca o mesmo tamanho aos campos de texto que Netscape. Na verdade, os campos que coloca Netscape so 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 ocasies queremos que os campos sejam do tamanho justo e que no Internet Explorer no sejam to

pequenos e no Netscape to 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 poderamos fazer de uma maneira parecida a esta: if (document.layers) //faco coisas para Netscape 4 else // faco coisas para outros navegadores Com este cdigo discrimino somente entre a verso 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 expresso a avaliar do if, obteremos casos positivos se o objeto existe (Netscape4) e negativos se no existirem (os demais). Escrever coisas distintas em cada caso Agora vamos colocar o cdigo Javascript que escreveria um campo de texto com um valor de size distinto para cada navegador. if (document.layers) document.write("<INPUT type=text size=12>") else document.write("<INPUT type=text size=16>") Colocamos o script em um formulrio bem simples, s nos resta colocar esse cdigo dentro de um formulrio e teremos um campo de texto com sizes distintos, mas com o mesmo tamanho na tela.

< FORM> < script language="JavaScript"> if (document.layers) document.write("<INPUT type=text size=12>") else document.write("<INPUT type=text size=16>") < /script> < /FORM>

Estilos diferentes para cada navegador Scripts que nos permitem aplicar estilos diferentes aos elementos da pgina, em um dos casos nos apoiamos na tecnologia CSS para aumentar a potncia. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 25/4/06 Valorize este artigo: Graas a um e-mail de um usurio 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 pgina web dependendo do navegador com o qual se acessa pgina, de modo que se um usurio entra com IExplorer veria um fundo, tipografias e outros elementos com formas ou estilos diferentes dos que veria outro usurio que tenha acessado com Netscape. Comeamos pelo exemplo exato que nos pedia o usurio do e-mail, para colocar somente fundos diferentes. um script bastante especfico que para muitos de vocs parecer "intil", mas pelo menos servir para aprender alguma coisinha. Com a etiqueta <BODY> A primeira idia 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 cdigo ficaria algo assim: < html>

< head> < /head> < script language="JavaScript"> if (document.layers) 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 avaliao ser verdadeira. Isto um truque rpido, embora deveria ser estudado parte porque no 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 disponvel 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 no s os fundos como tambm 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 definio de estilos para todo um site includo 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 funo do navegador <LINK> que serve para incluir uma declarao de estilos externa. Seria algo assim:

< 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 pgina</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 podese utilizar para evitar um efeito que existe no uso de diferentes navegadores, que consiste em que na mesma definio 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 dem idias para resolver outros problemas.

Tabela de cores com Javascript Uma tabela que mostra as cores puras em todas as definies. Est construda com Javascript adicionando trs loops. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/5/06

Valorize este artigo: Em HTML construmos qualquer cor misturando o vermelho, verde e azul (RGB) nas propores que desejarmos. Isto um fato que deveria saber antes de ler este artigo. Explicamos com detalhes a construo de cores no artigo As cores e HTML. Ser necessrio que, aquele que no estiver familiarizado com este assunto, leia o artigo. Alm de como construir cores, o artigo As cores e HTML mostra tambm quais so as cores puras, que se vem sem problemas em todas as profundidades de cor que possa ter a configurao dos computadores dos visitantes. Para a construo de cores puras misturamos as cores RGB sempre nestas quantidades 00, 33, 66, 99, CC, FF. Novamente, para quem no conhece isto deve ler a reportagem assinalada anteriormente. O exemplo que pretendemos construir tem a ver com as cores puras em tyodas as definies. Trata-se de construir uma tabela em uma pgina web que contenha todos as cores puras, alm do cdigo RGB de cada cor. Esta tabela pode servir para selecionar uma cor que pretendemos utilizar em uma pgina web. Se nos limitarmos somente a utilizar as cores da tabela teremos a segurana que nossa paleta ser respeitada em todos os casos. Para gerar todos as cores puras vamos utilizar trs arrays Javascript com os possveis valores para cada uma das cores RGB. Portanto, teremos trs 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 pgina web, faremos um percorrido a estes trs arrays. Para isso, vamos utilizar loops aninhados, que so 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. Ento, vemos que no incio os trs valores de RGB valem 00 e como em sucessivas repeties se vai aumentando o valor de B (o valor atribudo ao azul) at chegarmos a FF. Para continuar, aumenta-se o valor de G e voltamos a realizar a conta com B. como se contssemos e as unidades fossem os valores de RBG. O caso que realizamos a conta com o valor B, quando chegamos a FF

aumentamos o valor de G e quando chegarmos a FF em G aumentaremos em um valor R. Assim, pode-se ver a estrutura em pseudocdigo 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 prxima a nossa soluo, embora ainda no esteja escrita em Javascript e falte colocar todas as etiquetas HTML que necessitamos para mostrar uma tabela em uma pgina web. Como no 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 posio atual do array. Os ndices em arrays comeam em 0, por isso que nossos loops for contm uma iniciao a 0 da varivel que vai servir de ndice. Ademais o ndice deve crescer de um em um at chegar ltima posio do array, que se obtm acessando a sua propriedade length (que salva a longitude ou o nmero 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 cdigo que incluem os textos HTML necessrios para que a tabela saia convenientemente formatada e com as cores de fundo em cada uma das clulas iguais cor atual. Para isso, o primeiro que faremos escrever o cabealho da tabela e a finalizao da mesma, que ficam fora da estrutura de loops. Dentro dos loops realizaremos as sentenas para imprimir cada uma das filas e clulas da tabela. Nossa tabela vai ter em cada fila um conjunto de cores, onde os valores RG no mudam e o valor B varia entre todos os possveis. Na seguinte fila se incrementaria em um o valor G e faramos outra vez a conta de valores B... assim at terminarmos com todos os valores R, G e B possveis. O cdigo 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 comear o loop mais interno, cria-se uma nova clula com <TR> e que quando se acaba, termina tambm a clula com </TR>. Ademais, dentro do loop mais interno se compe primeiro a cor atual e logo se escreve uma clula com o atributo bgcolor atribudo a essa cor atual e dentro dela o texto da cor atual.

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 #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #9933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Sub-menu em outra janela Faremos um sub-menu de opes que se mostra em uma janela secundria e uma vez selecionada a opo do sub-menu se transfere para a janela pai. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 09/6/06 Valorize este artigo: Vamos realizar um pequeno exemplo sobre como trabalhar com janelas secundrias ou popups. As janelas secundrias so essas janelinhas que se abrem alm 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 mtodo open() do objeto window. No vamos explic-lo aqui, porque j temos um artigo inteiro que explica detalhadamente a abertura de janelas secundrias e as caractersticas com as quais podemos abrir: Abrir janelas secundrias Neste exemplo, iremos um pouco mais alm, vamos criar uma janela secundria e a partir dela, vamos acessar s propriedades da janela pai, ou seja, a janela que a abriu. O exerccio ser o seguinte: Teremos uma pgina com fundo branco, um campo de texto vazio e um boto. Quando se clique o boto, abriremos um popup que conter uma tabela com as cores puras de HTML. O visitante poder selecionar uma dessas cores e ento, o fundo da pgina pai mudar para esta cor e a cor ser escrita no campo de texto. muito mais fcil ver o exemplo em funcionamento para compreender a explicao. Pgina pai A pgina original conter um simples formulrio com um boto e um campo de texto. Ademais, conter o script Javascript necessrio para abrir a janela secundria. < html> < head> <title>Sub-menu em janela a parte</title> < script language="JavaScript"> function lancarSubmenu(){ window.open("submenu_janela2.html","janela1","width=400,height=400,scrollba rs=YES")

} </script> < /head> < body bgcolor="#ffffff"> < form> < input type="text" name="colorin" size="12" maxlength="12"> < br> < br> < input type="button" value="Lanar sub-menu" onclick="lancarSubmenu()"> < /form> < /body> < /html> A funo lancarSubmenu() a que contm o script para abrir o popup. Para isso utiliza o mtodo open() do objeto window, cujo uso foi descrito no artigo de Abrir janelas secundrias. O formulrio dos mais normais. O nico destacvel o atributo onclick do boto, que serve para definir as aes para serem executadas ao clicarmos o boto, neste caso uma chamada funo que abre a janela secundria. Pgina secundria A pgina secundria um pouco mais complexa, mas a parte que nos interessa neste exerccio bastante simples. O importante da pgina que tem que acessar janela pai para modificar seu estado e para isso utiliza um objeto Javascript: opener. O objeto opener est disponvel nas pginas que so janelas secundrias e faz referncia janela que a abriu, ou seja, a janela pai. Em outras palavras, o objeto opener na janela popup um sinnimo do objeto window na janela pai. O script que acessa janela pai o seguinte: < script language="JavaScript"> function atualizaPai(minhaCor){ window.opener.document.bgColor = minhaCor window.opener.document.forms[0].colorin.value = minhaCor } < /script> A funo atualizaPai() a encarregada de realizar o trabalho. Recebe o cdigo da cor sobre a qual foi clicada. Na primeira linha mudamos a cor da pgina web pai e na segunda linha colocamos o cdigo RGB da cor recebida por parmetro

no campo de texto. Como vemos, o objeto opener tambm depende do objeto window da pgina, como todos os demais objetos da hierarquia Javascript. O resto da pgina parecido a um artigo anterior de Javascript no qual escrevamos com Javascript uma tabela de cores puras, com umas pequenas modificaes 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 complicao deste script e dado que no vamos explic-lo tudo outra vez, pode ser altamente recomendvel a leitura do artigo anterior chamado Tabela de cores com Javascript. O mais importante para ns agora entender que este script cria uma tabela com todos as cores puras, colocadas cada uma em uma clula. Dentro de cada clula se escreve um link que chama funo atualizaPai() passando-lhe o cdigo da cor que h que ser utilizada.

Degrad de cor Javascript Script para conseguir um degrade da cor de fundo da pgina web. Um exemplo simples e o outro, mais complexo, se adapta a muitos degrades diferentes.

Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 03/7/06 Valorize este artigo: Vamos ver um exemplo tpico de efeito especial em uma pgina web: um degrade de cores para o fundo da pgina. O degrade consiste em mudar a cor de fundo da pgina aos poucos para ir se aproximando outra cor. Podemos fazer muitos degrades diferentes para pginas web com pouco esforo, poucos conhecimentos tcnicos e bastante imaginao. Pode-se ver um exemplo de degrade em uma pgina a parte, para ter uma idia 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. Complicao do degrade A maior complicao que encontramos na hora de criar um script para fazer um degrade que as cores se expressam em hexadecimal e em Javascript trabalhamos com nmeros decimais. De modo que, para converter nossos nmeros decimais em hexadecimais e poder assim utiliza-los para indicar cores criamos uma funo especial: function converteHexadecimal(num){ var hexaDec = Math.floor(num/16) var hexaUni = num - (hexaDec * 16) return hexadecimal[hexaDec] + hexadecimal[hexaUni] } A funo devolve o nmero passado por parmetro 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 converso de nmeros decimais a hexadecimais das unidades bsicas, 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 funo primeiro calcula os grupos de 16 que podem ser feitos a partir do nmero que recebemos. Os nmeros destes grupos seriam as "hexa-dezenas". Logo, calculamos o resto da diviso anterior, ou dito de outra forma, quantas unidades nos restam depois de tomar estas "hexa-dezenas". Este segundo nmero, sero as unidades. Ao juntar as unidades com os grupos de 16 que

obtivemos, convertendo ambos valores por meio do array de converso decimal a hexadecimal, conseguimos a converso buscada. Criando a seqncia de cores para o degrade Uma vez que pudermos converter do valor decimal (necessrio para levar a conta em Javascript) ao hexadecimal (necessrio 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 pgina. 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 comea em preto e termina em branco. cor_decimal = 0 Primeiro, iniciamos a varivel 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 so o mesmo. Teremos uma funo 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 funo 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 pgina. Finalmente, e nisso se baseiam muitos efeitos especiais de Javascript, se chama a funo a si mesma com um atraso. No exemplo podemos ver que se a cor_decimal for menor de 255 (que o mximo que se pode alcanar em cores) se chama funo com setTimeout, que a que nos cria o atraso. O cdigo 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 pgina 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, tambm podemos ver o exemplo em funcionamento em uma pgina a parte. Mais degrades Provavelmente este no seja o exemplo mais til para o leitor que deseja implementar um degrade em sua pgina, pois um pouco simples e especfico. Para solucionar este assunto, criamos um sistema onde ode se configurar o tipo de degrade da pgina com uma srie de variveis. um exemplo que se baseia no que acabamos de ver, embora tenha muitas variveis para parametrizar o comportamento do degrade e que se adapte s necessidades do desenvolvedor.

Por falta de tempo no vamos a explicar todo o script, iremos observar somente as variveis que permitem configura-lo. cor_inicio = new Array(150,150,255) Com cor_incio configuramos a cor que se mostra ao princpio na pgina. Indicamos com um array, onde em cada campo, colocamos o valor decimal de cada um das trs cores RGB. cor_fim = new Array(255,99,0) Com cor_fim configuramos a cor a qual vai tender nossa degrade, de maneira idntica a como fizemos em cor_inicio passos = 100 o nmero de passos que vamos utilizar para alcanar o valor da cor final, desde a cor de incio. comportamento = 1 Esta varivel serve para definir o comportamento do script em quatro possveis valores: 1. Realiza um loop infinito desde a cor de incio cor fim e da cor fim cor de incio, para voltar a comear. E ir repetindo sempre. 2. Realiza uma passada desde a cor de incio cor fim. Termina quando acaba a passada. 3. Realiza uma passada da cor de incio ao fim e uma volta desde o fim ao incio. 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 comear outra ida e volta.

Validar inteiro no campo de formulrio Script para validar um campo de formulrio de maneira que saibamos com certeza que dentro do campo existe sempre um nmero inteiro. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 31/7/06 Valorize este artigo: Suponhamos que temos um campo de um formulrio onde queremos que figure sempre um valor numrico inteiro. Um exemplo poderia ser um campo onde queremos salvar o nmero de um ano, onde, logicamente, no cabem decimais e nem letras.

Neste exerccio vamos realizar um script que procure obter um nmero inteiro do valor que tiver escrito o usurio em um campo de texto. Se for um nmero inteiro ou puder converte-lo a um inteiro, coloque tal valor inteiro no campo. Se no puder obter um valor numrico inteiro apague o contedo 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 exerccio podemos ver o exemplo completo em uma pgina a parte. Este exerccio serve tambm para aprender a manejar as funes incorporadas de Javascript parseInt() e isNaN(). A primeira serve para converter um valor a nmero inteiro e a segunda para ver se um dado um valor numrico. As duas podem conhecidas com mais profundidade nos primeiros captulos do manual de Javascript II. Outro tema importante que h que conhecer a hierarquia de objetos do navegador, porm neste caso, faremos um esforo em explica-la para aquelas pessoas que no a conheam. Funo validarInteiro() Primeiro, vamos realizar uma funo que far a maior parte do trabalho, visto que a encarregada de validar se um dado um nmero inteiro. Esta funo recebe um valor, que o dado que desejamos validar e se for um inteiro devolver tal qual. Se no for, tentar convert-lo a inteiro e se conseguir devolver esse valor. Finalmente, se a tentativa de converte-lo no der resultado, devolver uma cadeia vazia. function validarInteiro(valor){ //tento converter a inteiro. //se for um inteiro nao lhe afeta, se no for tenta convertelo valor = parseInt(valor) //Comprovo se um valor numrico if (isNaN(valor)) { //entao (nao e numero) devuelvo el valor cadena vacia return "" }else{ //No caso contrario (Se for um nmero) devolvo o valor return valor } } Formulrio Vemos o formulrio que necessitaremos para colocar o campo de texto. um formulrio como outro qualquer, o nico detalhe que nos preocupamos por lhe dar nome tanto ao formulrio em si como ao campo de texto.

Posteriormente, utilizaremos esses nomes para referirmos aos elementos mediante Javascript. Tambm temos um campo de formulrio do tipo boto, que serve neste caso para indicar que quando se clique, chamar funo validarFormulario(). Para indicar isto se utiliza o atributo onclick do campo boto e entre aspas podemos ver o que queremos que se execute, neste caso a funo indicada. < form name=formul> < input type=text name=texto> < input type=button value=validar onclick="validarFormulario()"> < /form> Funo validarFormulario() Esta funo extrai o dado do campo de texto e o passa funo validarInteiro(), que nos devolver um valor que teremos que colocar de novo no campo de texto. Para acessar ao formulrio utilizamos a hierarquia de objetos do navegador, que para quem no sabe, um conjunto de objetos que fazem referncia a todos os elementos da pgina. O acesso aos elementos da pgina se realiza comeando no objeto window, que o primeiro da hierarquia. Logo, continua pelo objeto document -que salva todo o documento- e em nosso exemplo, baixaremos ao formulrio para poder acessar definitivamente ao campo de texto, que era onde queramos chegar. Com este esquema: window.document.formul.texto Observamos que se utilizam os nomes do formulrio e o campo que colocamos no atributo name das etiquetas HTML destes elementos. Todos os campos de texto tm 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 deveramos entender perfeitamente o cdigo da funo. 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 }

Concluso Com tudo isto completamos o exerccio. Podemos ver como funcionaria a pgina inteira para observar os resultados finais. Por si s pode ser que no tenha um resultado muito produtivo este exemplo, porm pode ser um incio para comear a validar formulrios mais complexos. Com um pouco de imaginao e esforo podemos fazer funes que validem outros campos do formulrio para ver se o que contm so textos, se so suficientemente longos ou curtos, validar nmeros com decimais, etc. Tudo isso se faria de forma parecida como vimos antes, acrescentando o cdigo funo validarFormulario() e talvez construindo algumas funes acessrias 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 mtodos e propriedades da classe String. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 18/8/06 Valorize este artigo: Agora vamos ver uns exemplos sobre como se utilizam os mtodos e propriedades do objeto String. Exemplo de strings 1 Vamos escrever o contedo 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 variveis, 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 penltimo caractere do string -utilizamos a propriedade length para conhecer o nmero de caracteres do string- e em cada iterao 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 funo charAt para acessar s posies do string. Finalmente imprimimos na pgina o resultado. Podemos ver o exemplo em funcionamento em uma pgina a parte. Exemplo de strings 2 Vamos fazer um script que rompa um string em duas metades e as imprima por tela. As metades sero iguais, sempre que o string tiver um nmero de caracteres par. No caso de que o nmero de caracteres seja mpar no se poder fazer a metade exata, porm 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 variveis que vamos utilizar e iniciar o string a partir. Na seguinte linha encontramos a posio da metade do string. Nas duas seguintes linhas onde realizamos o trabalho de colocar em uma varivel a primeira metade do string e na outra a segunda. Para isso, utilizamos o mtodo substring passando-lhe como incio 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 Exerccio realizado para ilustrar o funcionamento da classe Date em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 09/2/05 Valorize este artigo: 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 tambm. Logo, atualizaremos o ano de uma das datas e voltaremos a escreve-la com um formato mais legvel. //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) //extramos o ano das duas datas anoAtual = minhaDataAtual.getFullYear() anoPassado = minhaDataPassada.getFullYear() //Escrevemos em ano na pgina document.write("<br>O ano atual : " + anoAtual) document.write("<br>O ano passado : " + anoPassado) //mudamos o ano na data atual minhaDataAtual.setFullYear(2005) //extramos o dia, ms e ano dia = minhaDataAtual.getDate() mes = parseInt(minhaDataAtual.getMonth()) + 1 ano = minhaDataAtual.getFullYear() //escrevemos a data em um formato legvel document.write ("<br>") document.write (dia + "/" + mes + "/" + ano) H que destacar um detalhe antes de terminar, que o nmero do ms pode comear desde 0. Pelo menos no Netscape com o qual realizamos as provas comeava o ms em 0. Por esta razo somamos um ao ms que devolve o mtodo getMonth. Existem mais detalhes para destacar, pois que no Netscape o mtodo

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 disposio o mtodo getFullYear() que devolveria 2005 da mesma forma que em Netscape e Internet Explorer. Muita ateno no trabalho com datas em distintas plataformas, visto que poderia ser problemtico o fato de oferecerem distintas sadas aos mtodos de manejo de datas, dependendo sempre da marca e verso de nosso navegador. Link aleatrio Javascript Criamos um link que nos leva a qualquer URL aleatoriamente, entre vrias possibilidades. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 13/9/06 Valorize este artigo: Vamos criar um efeito tpico em pginas web que consiste em um link que nos levar a um site escolhido de forma aleatria. Para termos um idia exata podemos ver o exemplo em funcionamento. Para isso vamos utilizar Javascript. Embora por algumas razes no seja a melhor linguagem para fazer este exerccio, sim que vai ser extremamente simples e acreditamos que tambm ser instrutivo para os leitores. Para comear, 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 declarao 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 mtodo rpido de declarao e de preenchimento de arrays em Javascript. Quanto mais valores escrevermos, mais aleatrio ser o exerccio, podendo colocar mais links sem ter que editar o resto do cdigo do programa. Em nosso exemplo completo temos uma lista muito maior de links. Continuamos colocando o link que se apresentar como "Link Aleatrio", que nos levar a um site aleatrio, dentro das possibilidades.

< a href="javascript:linkAleatorio()">Link Aleatorio</a> Como vemos, o link se encarrega de chamar a uma funo que ser a que vai extrair uma URL do array anterior e nos transferir a este lugar. A funo 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 funo obter um valor aleatrio entre 0 e "enderecos.length", que o nmero de URLs de nosso array. Se mudarmos o nmero de URLs do array este script continuar funcionando perfeitamente, porque os limites se extraem diretamente da propriedade length do array que contm os endereos. Para obter esse nmero aleatrio se utiliza o mtodo random da classe Math, que devolve um nmero entre 0 e 1. Ao multiplica-lo pelo nmero de posies do array obtemos um nmero entre 0 e o nmero de posies do array. Porm este nmero est em um nmero flutuante, ou seja, um nmero decimal, que no nos serve como ndice de um array. Por isso lhe aplicamos o mtodo floor, tambm do objeto Math, para obter a parte inteira deste nmero. Por ltimo se atualiza a propriedade location do objeto window com o valor do array na posio aleatria, o que faz com que o navegador se dirija pgina aleatria, dentro das distintas possibilidades. Exemplo completo Para ver de maneira global este exerccio, transcrevemos aqui todo o cdigo 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 aleat = Math.floor(aleat) window.location=enderecos[aleat] } </script> < /head> < body> < a href="javascript:linkAleatorio()">LinkAleatorio</a> < /body> < /html>

Gerao de nmeros aleatrios Javascript Artigo no qual se cria uma funo para gerar nmeros aleatrios na linguagem Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 02/10/06 Valorize este artigo: Em Javascript dispomos da classe Math, muito til quando queremos fazer clculos matemticos de certa complexidade. Tal classe est explicada e documentada em um captulo do manual de Javascript II. Para os que necessitarem, tambm temos explicaes do que so as classes e os objetos. Neste workshop de Javascript vamos construir uma simples funo para criar um nmero aleatrio, entre um mnimo e um mximo, que poderemos utilizar logo em outros scripts mais complexos. Aqui temos o cdigo que usa o mtodo random da classe Math para obter um nmero aleatrio com Javascript. var aleatorio = Math.random() Assim criamos uma varivel aleatria que atribumos o resultado de executar o mtodo random da classe Math. O nmero aleatrio que obtemos sempre estar compreendido entre 0 e 1. Se desejarmos obter um nmero aleatrio em outra categoria, poderemos consegui-lo com um pouco de matemtica e com a classe Math. Para ilustrar

isso vamos fazer uma funo que devolve um nmero aleatrio compreendido em um intervalo. O intervalo o recebe como parmetro com duas variveis, 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 funo que fizemos muito simples, porm funciona perfeitamente para todos os tipos de intervalos que possamos passar, tanto com nmeros positivos como negativos. O primeiro que fazemos obter o nmero de possibilidades diminuindo ao limite superior o inferior. Logo, multiplicamos tal numero de possibilidades pelo nmero aleatrio obtido (que est entre 0 e 1), com o qual obtemos um nmero aleatrio entre 0 e o nmero de possibilidades. O nmero tem um monte de decimais, e neste exemplo desejamos obter um nmero inteiro, sem decimais. Por isso, logo utilizamos o mtodo round() da clase Math, que nos d o inteiro mais prximo. Como o nmero ainda est entre 0 e o nmero 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 funo. Esta funo pode-se ver em funcionamento em uma pgina a parte. No exemplo, construmos um pequeno formulrio que podemos preencher com o mnimo e o mximo e quando apertamos sobre o boto se mostrar o valor aleatrio no campo abaixo de tudo. Um exemplo do que podemos fazer com um nmero aleatrio pode ser criar um link aleatrio em uma pgina web. Podemos v-lo no exemplo Link aleatrio em Javascript. Ademais, neste exemplo cria-se o nmero aleatrio de maneira ligeiramente distinta a como vimos agora, o que pode ser interessante para aprender melhor a usar os mtodos da classe Math.

Comprovar se as senhas so iguais Em um formulrio onde foram escritas duas senhas, explicamos como comprovar, utilizando Javascript, que so iguais antes de manda-las ao servidor. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 18/10/06 Valorize este artigo:

Em um formulrio de registro de usurios muito habitual que desejemos incluir um campo chave, que o usurio poderia utilizar para acessar aos servios da web onde est se registrando ou para atualizar mais adiante a informao introduzida. Para realizar um formulrio onde se escreva a senha, o normal apaream dois campos para introduzir a mesma senha e que o usurio que a introduza esteja forado a escrever a senha duas vezes, sendo as duas senhas iguais. Isto nos ajuda a que o usurio no 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 comprovao -no cliente- para ver se foi introduzida a mesma senha nos dois campos e se for assim, mandar o formulrio ao servidor ou fazer aquelas aes necessrias para continuar com o registro desse visitante. No caso de que as duas senhas sejam diferentes, o usurio deve ser informado da situao para que volte a introduzir a senha desejada corretamente. Comprovar se dois campos de formulrio so iguais uma ao bastante simples. Simplesmente devemos extrair os dois valores salvos nos campos do formulrio onde foi escrita a senha e a repetio da senha. Logo, com um enunciado if, podemos comprovar se estes dois dados so o mesmo ou no e fazer as sentenas necessrias em cada caso. A funo 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 so iguais...\nRealizaramos as aes do caso positivo") else alert("As duas senhas so diferentes...\nRealizaramos as aes do caso negativo") } Nota: Se desejarmos mandar o formulrio ao servidor depois de ter visto que as duas senhas so iguais, ou seja, se depois da comprovao queremos submeter o formulrio, poderamos executar o mtodo submit() do objeto form. document.f1.submit() Observe que o formulrio onde estamos acessando pela hierarquia de objetos

do navegador chama-se "f1". Isso quer dizer que a etiqueta <FORM> do formulrio onde esto os dois campos tem o atributo name="f1". Se nosso formulrio se chama de outra maneira teramos que mudar as linhas onde se acessa aos dois campos da senha, substituindo "f1" pelo nome do nosso formulrio. Da mesma forma, os dois campos onde se escrevem as senhas em nosso exemplo se supem que se chamam "senha1" e "senha2", se no for assim, tambm teramos que mudar esse nome para o que foi colocado. Para ver mais claramente, temos aqui o cdigo do formulrio 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 so iguais" onClick="comprovarSenha()"> < /form> Concluso Dada sua simplicidade, este exemplo no deveria supor muito problema. Resta-nos ver o cdigo do exemplo completo e, se desejarmos, acessar a uma pgina onde se mostra o exerccio em funcionamento. < html> < head> <title>Validar se a senha e a repetio da senha so iguais</title> < script> function comprovarSenha(){ senha1 = document.f1.senha1.value senha2 = document.f1.senha2.value if (senha1 == senha2) alert("As duas senhas so iguais...\nRealizaramos as aes do caso positivo") else alert("As duas senhas so diferentes...\nRealizaramos as aes do caso negativo") } < /script> < /head> < body>

< h1>Validar se a senha e a repetio da senha so iguais</h1> < br> Escreva uma senha duas vezes, uma em cada campo, e clique o boto. Javascript lhe dir se as duas so 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 so iguais" onClick="comprovarSenha()"> < /form> < /body> < /html>

Ex. de trabalho com formulrios. Calculadora simples Veremos um exemplo do trabalho com formulrios no qual desenvolveremos uma calculadora simples. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 13/4/05 Valorize este artigo: Para ilustrar um pouco o trabalho com formulrios, vamos realizar um exemplo prtico. Pode ser que algumas coisas das quais vamos tratar, fiquem um pouco no ar por no terem sido explicadas detalhadamente antes, mas certamente nos serve para estarmos por dentro de como se trabalha com formulrios e as possibilidades que temos. Exemplo de calculadora simples Neste exemplo vamos construir uma calculadora, embora bastante simples, que permita realizar as operaes bsicas. Para fazer a calculadora vamos realizar um formulrio no qual vamos colocar trs campos de texto, os dois primeiros para as parcelas e um terceiro para o resultado. Ademais haver uns botes para fazer as operaes bsicas.

O formulrio da calculadora pode ser visto aqui. < form name="calc"> < input type="Text" name="parcela1" value="0" size="12"> < br> < input type="Text" name="parcela2" value="0" size="12"> < 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 funo vamos acessar aos campos do formulrio para buscar as parcelas em duas variveis. Os campos de texto tm uma propriedade chamada value que onde podemos obter o que tm escrito nesse momento. Mais tarde recorreremos a funo eval() para realizar a operao. Colocaremos por ltimo o resultado no campo de texto criado em terceiro lugar, utilizando tambm a propriedade value do campo de texto. Chamamos funo que realiza o clculo (que podemos ver a seguir) apertando os botes de cada uma das operaes. Tais botes podem ser vistos no formulrio e contm um atributo onclick que serve para especificar as sentenas Javascript que desejarmos que se executem quando o usurio clicar sobre ele. Neste caso, a sentena a executar uma chamada funo calcula() passando como parmetro o smbolo ou a parcela da operao que desejarmos realizar. O script com a funo calcula() < script> function calcula(operacao){ var parcela1 = document.calc.parcela1.value var parcela2 = document.calc.parcela2.value var result = eval(parcela1 + operacao + parcela2) document.calc.resultado.value = result } < /script> A funo eval(), lembramos, que recebia um string e o executava como uma sentena Javascript. Neste caso, ir receber um nmero que concatenado a uma operao e outro nmero ser sempre uma expresso aritmtica que

eval() solucionar perfeitamente. Podemos ver o exemplo da calculadora em funcionamento. O acesso a outros elementos dos formulrios 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 diferiro um pouco. Isto ser visto mais adiante.

Enviar ao navegador a outra pgina se no tiver Javascript Uma tcnica pela qual podemos dirigir ao navegador a outra pgina no caso de que no suporte scripts em Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 26/10/06 Valorize este artigo: Imaginemos uma pgina que, para se ver bem, necessite ter habilitada a possibilidade de executar scripts em Javascript e que, se no tiver habilitado Javascript, no funcionasse bem e no pudesse mostrar todos os contedos. Em um caso como este seria muito til dispor de uma funo que detecte se est habilitado ou no Javascript para, no caso de que no seja assim, se envie ao navegador o outro endereo. Pois esta funo que detecta se est ou no habilitado Javascript no se pode fazer to ricamente, pelo menos utilizando Javascript. Imagine que voc no dispe de Javascript, o navegador no poderia ento executar essa funo e nunca detectaria que no h Javascript. Por sorte temos um enunciado <NOSCRIPT></NOSCRIPT> que nos serve para indicar aes a tomar no caso de que no esteja habilitado Javascript. Utilizando essa etiqueta podemos colocar um link para que se veja s nos navegadores que no tm Javascript: < NOSCRIPT> Seu navegador no suporta Javascript. <a href="no_javas.html">Entre em uma pgina que no o utiliza</a> < /NOSCRIPT> Podemos ainda ir um passo mais longe e utilizar a etiqueta META tipo

"Refresh" para que o navegador se refresque automaticamente e se dirija a outra pgina que no inclua programao em Javascript. uma opo muito mais interessante, porque no temos que esperar que o visitante clique no link e assim nos certificamos que, apesar de algum no 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 automtico, embora os navegadores mais habituais sim que as aceitam. Alis, a etiqueta de refresh deve ser colocada no cabealho (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 endereo ao qual queremos enviar o navegador, neste caso no_javascript.html.

Confirmao de envio de formulrio Script em Javascript para que o usurio aceite ou cancele o envio de um formulrio quando apertar o boto de enviar. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 05/12/06 Valorize este artigo: Este artigo amplia uma dvida de um usurio de CriarWeb.com. A pergunta em concreto que nos realizou o usurio era como fazer um formulrio que, ao envia-lo, nos pergunte se realmente se deseja enviar. A pergunta em concreto era a seguinte: Estou fazendo um formulrio e desejo que, ao envia-lo, me mostre uma janela de confirmao de envio do formulrio, dessas que tm um boto de aceitar e outro de cancelar. Ento, se se aceita o envio, se enviaria o formulrio.... se no se aceita, o formulrio no seja enviado. Resposta

Isto tem muito a ver com o tema de tratamento de formulrios. A resposta baseia sua maior tcnica no fato de substituir o boto de submit por um boto normal. Com o boto normal no se envia o formulrio diretamente e sim, chama a uma funo que realiza a confirmao e, no caso positivo, envia o formulrio. O boto que colocaramos no formulrio em substituio do boto de submit seria o seguinte: < input type=button onclick="pergunta()" value="Enviar"> Observemos que o boto tem definida uma ao no momento em que se clica. A ao em concreto faz com que se execute a funo pergunta(), que ser a que realize a confirmao e envie o formulrio no caso positivo. Seu cdigo pode ser visto a seguir. < script language="JavaScript"> function pergunta(){ if (confirm('Tem certeza que quer enviar este formulrio?')){ document.seuformulario.submit() } } < /script> A caixa confirm devolve true ou false dependendo de se se clica o boto de aceitar ou cancelar. Esse valor se utiliza em um enunciado if para decidir se se envia o formulrio, com seu mtodo submit(), ou no se faz nada. O cdigo completo de uma pgina que realiza esta tarefa em um formulrio o seguinte: < html> < head> <title>Confirmao de envio de formulrio</title> < script language="JavaScript"> function pergunta(){ if (confirm('Tem certeza que quer enviar este formulrio?')){ 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 formulrio. Por Ignacio Rodriguez

Publicado em: 28/12/06 Valorize este artigo: 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 descrio um pouco longa, mas na verdade o efeito simples. Nos select das pginas 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 usurio 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 comeam por essa letra at encontrar o que busca. O presente exemplo melhora essa funo de busca nos select, j que permite realizar o clique de vrias teclas seguidas e vai mostrando aquele elemento que comea por todas as letras que vo sendo clicadas (uma atrs da outra) at que se aperta a tecla Enter, momento no qual se supe que encontramos o elemento adequado e queremos continuar com o preenchimento de outros campos do formulrio. Neste exemplo foi criado um select com os nomes de diferentes pases. Se, por exemplo, queremos buscar o pas Estados Unidos, nos selects normais podemos clicar a E (inicial de Estados Unidos) e buscar entre todos os pases at que aparece o que queremos. Porm, com a implementao deste script poderemos clicar a E, com o que se posicionar no primeiro pas que comece por E (que no tem porque ser o que buscamos, na prtica ser Equador). Logo, podemos clicar a letra S, com o qual se mostrar Espanha, que no o que buscamos. Mais tarde clicaria-se a T, aparecendo Estnia e, por ltimo, ao clicar a tecla A, j apareceria o elemento que buscvamos, ESTAdos Unidos. O script O script encontra-se comentado dentro do prprio cdigo, para que possa ser

compreendido facilmente, ou pelo menos suas bases. Basicamente, utiliza-se o evento de teclado onKeyPress no elemento select dos pases, de modo que, quando se clique uma tecla, se tivermos o foco no select, se chamar a uma funo 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 prximo 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 formulrio para que o usurio continua preenchendo-o. < script language="JavaScript1.2"> var digitos=10 //quantidade de digitos buscados var ponteiro=0 var buffer=new Array(digitos) //declarao 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> <td width="26"></td> <td width="315"></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 height="18"></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="28"></td> <td colspan="2" valign="top"> <input type="text" name="text2"> </td> <td></td> </tr> <tr> <td height="58"></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html> Esperamos que vocs possam entender o script e utiliza-lo em suas pginas web.

Inibir um campo texto de formulrio com Javascript Fazer com que um campo de formulrio fique desabilitado, ou seja, que no possa clicar encima e mudar seu valor. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 17/1/07 Valorize este artigo:

Desta vez faremos um workshop muito rpido e simples com Javascript para fazer com que um campo de formulrio de tipo texto encontre-se inibido, ou seja, que no possamos clicar encima dele para editar seu contedo. Focus e Blur A maneira de faz-lo requer o conhecimento de dois conceitos habituais de Javascript relacionados com o foco da aplicao. O conceito focus, est relacionado com ganhar foco da aplicao. O mtodo focus(), que tm os campos de texto e outros elementos de formulrio, serve para outorgar o foco da aplicao a esse elemento. O administrador de evento onfocus aparece quando um elemento ganha o foco da aplicao. O conceito blur, est associado a perder o foco da aplicao. O mtodo blur() serve para que os elementos de formulrio percam o foco e o administrador de eventos onblur se ativa quando o elemento a que o apliquemos perda o foco da aplicao. O exerccio Para inibir um campo de formulrio podemos fazer com que o usurio nunca possa clicar nesse elemento ou ento, 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. Ns utilizaremos o evento onfocus para detectar o instante no qual o elemento ganha o foco e nesse momento faremos uso do mtodo blur() para retirar o foco. O cdigo extremamente simples para tanta explicao: < 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 referncia ao elemento onde se est utilizando, nesse caso o campo de texto. this.blur() seria uma simples chamada ao mtodo blur() no elemento de formulrio onde est colocada. Pode ser visto em funcionamento aqui:
122

Mostrar e ocultar camadas com IE 5,6 NS 6,7 Explicao e exemplos sobre a maneira de mostrar e ocultar camadas com o mtodo getElementById() de Javascript.

Por Carlos Cuenca Daz

Publicado em: 16/2/07 Valorize este artigo: O primeiro a fazer definir as funes de mostrar e ocultar. Estas duas funes, recebero por parmetro, o nome da camada que queremos mostrar ou ocultar, a seguir, mediante a funo getElementById, acessaremos s propriedades da camada, e atravs de style aos estilos que nos definem se a camada est visvel ou no (propriedade visibility), ativando-a ou desativando-a segundo a funo. Referncia: Falamos sobre a funo 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 necessrio definir as camadas, e chamar em algum momento s funes 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;backgroundcolor:blue" onmouseout="ocultar('camada2')" onmouseover="mostrar('camada2')">Camada 1</div> < div id="camada2" style="position:absolute;width:100;height:100;top:100;left:200;backgroundcolor: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> < script language="Javascript"> function mostrar(nomeCamada){ document.getElementById(nomeCamada).style.visibility="visible"; } function ocultar(nomeCamada){ document.getElementById(nomeCamada).style.visibility="hidden"; } < /script> < /head> < body> < div id="camada1" style="position:absolute;width:100;height:100;top:100;left:100;backgroundcolor:blue" onmouseout="ocultar('camada2')" onmouseover="mostrar('camada2')">Camada 1</div> < div id="camada2" style="position:absolute;width:100;height:100;top:100;left:200;backgroundcolor: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. Por Carlos Cuenca Daz

Publicado em: 07/3/07 Valorize este artigo: Para deslocar uma camada pela tela, necessrio modificar os atributos Top e Left. Referncia: Falamos sobre a funo getElementById(), necessria para entender a maneira de trabalhar neste artigo, no documento Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera Top define a posio vertical da camada desde a parte superior da tela Left define a posicin 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 necessrio 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 necessrio utilizar a funo parseInt para poder converter os valores a nmeros. A seguir mostra-se um exemplo, que desloca uma camada 5 pixels cada vez que se clica o boto: A funo recebe por parmetro o nome da camada que se deseja mover, acessa mediante a funo 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.

< script language="Javascript"> 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> < script language="Javascript"> 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" style="position:absolute;width:100;height:100;top:100;left:100;background-

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 funes simples para escrever dinamicamente texto em uma camada. Por Carlos Cuenca Daz

Publicado em: 27/3/07 Valorize este artigo: 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 verso 4, e Netscape o incorporou nas verses 6 e 7 apesar de que no se encontra definido no padro do W3C. Referncia: Este artigo oferece ajudas para a qual necessrio conhecer um pouco Javascript e o mtodo getElementById(). Recomendamos consultar estes links: Programao em JavaScript Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera A propriedade armazena o cdigo HTML que se corresponde com o que se visualiza dentro da camada, ou seja, se a camada contm " ola " a propriedade conter " ola " entretanto, se a propriedade contm um link http://www.criarweb.com ento a cadeia de texto conter "http://www.criarweb.com, por isso poder ser escrito qualquer tipo de contedo dentro da camada. O seguinte exemplo, contm um formulrio com uma caixa de texto, o usurio pode escrever qualquer texto ou cdigo HTML, e ao clicar o boto, este se mostrar dentro da camada. A funo recebe por parmetro o nome de uma camada e o formulrio que contm a caixa de texto, salva o valor do quadro de texto dentro de uma varivel e a seguir atribui propriedade innerHTML da camada: function escreveCamada(camada,formulario){

texto=formulario.caixa.value; document.getElementById(camada).innerHTML=texto; } Exemplo completo: < html> < head> < title>Untitled</title> < script language="JavaScript"> function escreveCamada(camada,formulario){ texto=formulario.caixa.value; document.getElementById(camada).innerHTML=texto; } < /script> < /head> < body> < div id="minhacamada" style="position:absolute;width:100;height:100;top:100;left:100;backgroundcolor: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, clulas ou filas Curioso efeito conseguido com Javascript, que nos permite jogar com a transparncia de qualquer imagem. Por Fabio Nez Iturriaga

Publicado em: 17/4/07 Valorize este artigo: 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 clula observe o seguinte cdigo: < 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, sansserif" 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 cdigo: < 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 PASSE POR CIMA CIMA

Passo 3: Se o que voc quer que se ilumine uma tabela completa observe o seguinte cdigo: < 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 PASSE POR CIMA CIMA PASSE POR PASSE POR CIMA CIMA PASSE POR PASSE POR CIMA CIMA

Paso 4: Se o que voc quer que se iluminem as bordas de uma tabela observe o seguinte cdigo: < 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 PASSE POR CIMA PASSE POR CIMA

CIMA CIMA PASSE POR PASSE POR CIMA CIMA PASSE POR PASSE POR CIMA CIMA

Inibir radio button com Javascript Workshop de Javascript para desabilitar botes de radio para que, ao clica-los, fique sempre marcada a opo por padro. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 03/5/07 Valorize este artigo: Veremos neste workshop como se pode desabilitar um elemento de formulrio de tipo radio button. Com outras palavras, vamos ver a maneira de fazer com que, ao clicar um campo tipo radio de um formulrio, no mude a opo escolhida por padro no cdigo HTML da pgina. Pode-se ver o exemplo em funcionamento sob estas linhas. Observem que, ao clicar os radio button, no muda a opo escolhida inicialmente, que a primeira. Ol pessoal! Aqui estamos E voc a? Detalhes prvios Os campos de formulrio 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 atribudo ao grupo de botes. Pode-se ver esta formao no artigo Controle de botes de radio em Javascript. Soluo A maneira que ns implementamos de solucionar este assunto definindo uma varivel com o ndice do array do boto de radio que tem que estar selecionado. Ademais, teremos uma funo que se chamar ao clicar em qualquer boto de radio que se encarregar de selecionar o boto de radio por padro, deste modo, embora selecionemos outro elemento do conjunto, se selecionar automaticamente o elemento marcado por padro. Ademais, a funo receber o ndice do boto de radio clicado e retirar o foco da aplicao de tal elemento.

Podemos ver o cdigo 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 formulrio de tipo radio button temos o manejador de eventos onclick que se chama quando se clica nesse boto de radio. Tal manejador de eventos chama a uma funo passando-lhe o formulrio onde estamos trabalhando e o ndice do boto de radio atual, que comea em zero. A funo desabilitar(), definida no bloco de script do cabealho, contm duas sentenas. A primeira volta a colocar a seleo no boto de radio adequado, utilizando a propriedade checked do radiobutton, e a segunda retira o foco do elemento clicado, com o mtodo blur().

Atualizar dois frames com um s link Exemplo de controle de frames mediante Javascript no qual,clicando um s link, se atualizam duas pginas distintas contidas em dois frames. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 21/5/07 Valorize este artigo: Com o que j sabemos sobre o controle de frames, podemos realizar um exemplo para consolidar os conhecimentos. Trata-se de um exerccio muito simples para conseguir que, ao clicar um link, se atualize a pgina contida em dois frames diferentes. Como um link s serve para atualizar o contedo de um frame, necessitaremos executar umas sentenas javascript que sim nos permitam atualizar dois frames de uma vez. Se no se entende o objetivo perseguido neste exemplo, podemos v-lo em funcionamento em uma pgina a parte. Comecemos vendo a declarao de frames, que no tem nenhuma complicao pois simplesmente um cdigo 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 cdigo do primeiro dos frames, que o que tem a funo Javascript para controlar os frames. < html> < head> <title>Pagina 1</title> < script language="JavaScript"> function atualiza_2_frames(){ window.parent.frames[1].location="http://www.google.com" window.location="http://www.yahoo.com" } < /script>

< /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 funo, colocada no cabealho da pgina, por comodidade e para evitar ter que escrever vrias sentenas no atributo href do link. A funo, onde verdadeiramente est o miolo do exerccio, extremamente simples. A primeira sentena acessa ao frame colocado em segundo lugar (que tem o ndice 1) e atualiza sua propriedade location, que a URL da pgina que se est visualizando. Neste caso coloca a web de Google em tal frame, embora seja indiferente o que desejemos colocar e poderamos ter situado um endereo com um caminho relativo ao documento atual. Na segunda sentena acessamos diretamente propriedade location do objeto window, porque desejamos atualizar o mesmo frame onde est colocado o script. Poderamos ter utilizado uma sentena como a seguinte: window.parent.frames[0].location=" http://www.yahoo.com " Porm, neste caso no necessrio acessar declarao de frames e logo ao frame 0 porque, como dizia, j estamos nele. Por ltimo vejamos o cdigo do segundo frame, que no 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 funo que recebe uma data de nascimento e devolve o nmero de anos desde a data, ou seja, a idade. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 28/6/07 Valorize este artigo: Neste artigo vamos explicar uma funo que calcula a idade de uma pessoa. Para isso recebe um string com a data de nascimento da pessoa e devolve o nmero de anos que tem. Estamos diante um exerccio que ilustra muito bem o trabalho com datas em Javascript. Referncia: Para aprender algo que nos sirva de base no clculo de datas seria interessante ler o artigo Clase Date em Javascript.

O mtodo de trabalho Ns estamos pensando em receber uma data em formato portugus: algo como "12/10/1975", de tipo string. O primeiro ser separar os diferentes valores de ano, ms, dia. Para isso, utilizamos o mtodo 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 separao, no array devolvido, deveramos ter trs campos, onde o primeiro (o de ndice 0) salvar o dia, o segundo o ms e o terceiro o ano. Referncia: Os mtodos da classe String podem ser vistos no artigo Classe String em Javascript.

Vamos realizar a seguir algumas comprovaes para certificarmos que as datas estejam corretas, ou seja, que temos um valor numrico como dia, outro como ms e outro como ano. Se no for assim, devolveremos false, que deveria se interpretar como que a funo incapaz de calcular a idade, porque a data de nascimento passada no correta. A seguir restaremos o nmero de anos da data atual, que poderiam ser 2007, com o nmero de ano da data de nascimento, que ser algo como 1975. Neste caso, daria 32, porm ns vamos considerar 31, pois no sabemos se a suposta pessoa j fez anos no ano curso, ou no. Ou seja, hoje que junho, se fez anos em maro, essa pessoa j teria 32 anos, porm se faz anos em agosto, teria agora 31 anos. Portanto, nosso prximo passo ser saber em qual ms a pessoa fez anos e disso, poderamos ter trs casos.

1. Se o ms atual for menor que o ms de nascimento. Ento, porque ainda no cumpriu os anos ainda neste perodo anual. (Os anos, no exemplo anterior, seriam 31) 2. Se o ms atual for maior que o ms de nascimento, quer dizer que essa pessoa sim que j celebrou seu aniversrio 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 aniversrio (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 explicaes esperamos que qualquer pessoa com um nvel mdio de Javascript, poderia realizar o cdigo desta funo, porm o objetivo mostrar-lhes nossa proposta de cdigo, 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 so 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 funo ser necessrio saber que, quando se executa return dentro de uma funo, se devolve o valor indicado e se sai da funo, sem que se possa executar outras sentenas que existam debaixo do return.

Iluminar formulrios com CSS e Javascript Como modificar propriedades de cor de fundo de objetos de um formulrio ao passar o mouse por cima. Por Fabio Nez Iturriaga

Publicado em: 17/7/07 Valorize este artigo: Ler o artigo sobre iluminao de tabelas, clulas, filas me parece muito interessante e necessrio em alguns trabalhos de programao de pginas webs. Interessado em tal artigo e com ajuda do manual de Programao em

Javascript II, que tambm 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 cdigo 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>

O resultado o seguinte:
um

At este ponto vemos que nosso formulrio se v bastante convencional, para melhorar um pouco nossa apresentao, deve-se incluir cdigo de estilo, como o que segue: Passo 3: Colocar este script no head <head> xxx < /head>: < style type="text/css"> <!-.caixa { PADDING-RIGHT: 0.1em; PADDING-LEFT: 0.1em; PADDING-BOTTOM: 0.1em; FONT: 9pt "Verdana, Tahoma, Arial"; MARGIN-LEFT: 0.1em; PADDING-TOP: 0.1em; BACKGROUND-COLOR: #FFFFF0; TEXT-ALIGN: left } .boton { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 11px; BACKGROUND: #FFFFF0; BORDER-LEFT: #000000 1px solid; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; FONTSTYLE: normal; FONT-FAMILY: verdana, arial, "trebuchet MS", helvetica, sansserif } --> </style> Passo 4: O que falta fazer somente o link dos objetos do formulrio com o respectivo estilo que desejarmos. Ento, o cdigo 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">trs</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 funes form_um e form2 se explicam a seguir: function form_um(num_form,num_elem_form,cor_entrada) Os 2 primeiros parmetros correspondem a nmeros que representam a um formulrio (num_form), voc pode observar que o primeiro formulrio se chama meuformulario e o segundo meuformulario2, ao invs de empregar estes nomes, se empregam valores numricos, o seguinte parmetro representa um objeto de tal formulrio (num_elem_form) e o terceiro parmetro representa um valor de uma cor ou seu respectivo nome. O corpo de cada funo corresponde manipulao das propriedades dos objetos dos formulrios. Referncia:Para entender melhor parte do cdigo Javascript, recomenda-se ler o manual Programao 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 Gmez

Publicado em: 01/8/07 Valorize este artigo: Este script faz com que o tamanho da letra de um banner de texto v crescendo at alcanar um valor mximo pr-definido. O funcionamento bem simples, como qualquer animao em Javascript, necessita um timer ou temporizador que cada certo tempo se dispara chamando a uma funo responsvel do efeito de animao, neste caso modificar o tamanho de um texto. Esta funo se chama cresceLetra(). Ao carregar a pgina chama-se a funo resetear() que a que inicia todos os valores: objeto ao que se aplica o efeito (um elemento DIV), tamanho mnimo e mximo do texto e velocidade com a que crescer. Esta funo 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 mximo em cujo caso volta a chamar a resetear() (esta vez sem argumentos) que repe 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 milsimos de segundos no exemplo). O cdigo Javascript < script language="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)

} 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 cdigo HTML O evento onload se vincula a resetear() com os argumentos iniciais que so, por esta ordem, tamanho mnimo das letras, tamanho mximo que devem alcanar, rapidez com que crescero 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 pgina se mostre em um frame Um simples javascript para evitar que nossa pgina se mostre dentro de um frame e se mostre em todo o espao da janela. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 10/8/07 Valorize este artigo: Existe uma utilidade muito simples sobre o controle de frames em Javascript que tambm muito til para qualquer web site. Trata-se de evitar que nossa pgina se mostre dentro de qualquer diviso de frames e pode ser muito interessante para evitar que um link de qualquer site introduza nossa pgina dentro de seu design ou estrutura de menus. Talvez aparecer dentro de um frame em muitos casos no nos importe muito, porm, reduzem o espao para mostrar nossa prpria pgina e ainda comprimem um desenho.Portanto, no tem porque fazer nenhum bem. O script Com uma s linha de cdigo suficiente para criar este efeito. Esta linha pode ser colocada em qualquer parte do documento HTML, embora seria recomendvel que ficasse pela parte superior ou dentro do cabealho, para que tenha que carregar a pgina inteira para se expandir a todo o espao da janela. < script language="JavaScript"> < !--// 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 referncia URL da declarao de frames, no caso de que tenha e self.location, que faz referncia URL do documento onde est o script. Se as duas URLs so iguais significaria que a pgina no est carregada dentro de um frame e se so diferentes quer dizer que sim esta se mostrando no espao de frame. No caso de serem distintas, simplesmente se indica que na janela do navegador ao completo (top.location) mostre-se a URL da pgina onde est o script (self.location). No tem muitas complicaes. Pode-se ver em uma pgina a parte.

Elementos de formulrio select associados

Como fazer com Javascript que um elemento de formulrio select mude suas opes quando mude outro elemento select da pgina. De modo que cada opo de um select tenha um grupo de opes possveis para o outro select. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 21/8/05 Valorize este artigo: Vamos conhecer um dos truques mais solicitados de Javascript, que tem muita relao com o tema de formulrios e onde se utiliza o evento onchange de Javascript. um exemplo sobre como realizar uma pgina com dois selects onde, segundo o valor escolhido em um deles, mudem as opes possveis do outro select. O melhor para ver o que vamos fazer ver uma pgina web onde se mostra em funcionamento o script. Para ver seu funcionamento, devemos mudar a seleo do primeiro select e comprovaremos como as opes do segundo select mudam automaticamente. O exemplo que ilustramos utiliza estados e pases. Ao escolher no primeiro select um pas, no segundo deve nos mostrar os estados desse pas para que possamos escolher um estado, mas somente um que esteja no pas selecionado no primeiro trmino. Conhecer o objeto select e os option importante conhecer os objetos de formulrio select e os option. Os select correspondem com as caixas de seleo desdobrveis e os option com cada uma das opes da caixa desdobrvel. Podemos ver um artigo que fala sobre isso. Teoricamente nos interessa fazer vrias coisas que tm a ver com extrair o valor de um select em qualquer momento, observar seu nmero de opes e, para cada opo, colocar seu valor e seu texto associado. Tudo isto aprenderemos a fazer neste exemplo. Referncia: Para conhecer o trabalho e a hierarquia de objetos javascript (Tudo isso a base do trabalho com os elementos das pginas em Javascript) devemos ler o manual de Javascript II.

Modo de solucionar o problema Para comear, vamos utilizar um formulrio com dois selects, um para o pas 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">Frana < /select> < select name=estado> < option value="-">< /select> < /form> Observamos no select associado ao pas deste formulrio que, quando se muda a opo de pas, deve-se chamar a funo muda_estado(). Veremos mais adiante esta funo, agora importante observar que est associada ao evento onchange que se ativa quando muda a opo no select. Todo o resto ser cdigo Javascript. Comeamos definindo um monto de de arrays com os estados de cada pas. Neste caso temos s 4 pases, ento necessitaremos 4 arrays. Em cada array tenho uma lista de estados de cada pas, colocados em cada um dos elementos do array. Ademais, deixaremos o primeiro campo com um valor "-" que indica que no foi selecionado nenhum estado. var estados_1=new Array("","Andaluca","Asturias","Baleares","Canarias","Castilla y Len","Castilla-La Mancha","...") var estados_2=new Array("-","Rio de Janeiro","Bahia","So 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 pas se correspondem com os do select do pas. Por exemplo, a opo Espanha, tem o valor associado 1 e o array com os estados de Espanha se chama estados_1. O script se completa com uma funo que realiza o carregamento dos estados no segundo select. O mecanismo realiza basicamente estas aes:

Detecto o pas que foi selecionado Se o valor do pas no for 0 (o valor 0 quando no foi selecionado nenhum pas) o Tomo o array de estados adequado, utilizando o ndice do pas. o Marco o nmero de opes que deve ter o select de estados o Para cada opo do select, coloco seu valor e texto associado, que faz corresponder com o indicado no array de estados. SE NO (O valor de pas 0, no foi selecionado pas)

Coloco no select de estado um nico option com o valor "-", que significava que no havia estado. Coloco a opo primeira do select de estado como o selecionado.
o

A funo tem o seguinte cdigo. 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 nmero 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 no havia estado selecionado, elimino os estados do select document.f1.estado.length = 1 //coloco um trao na nica opo que deixei document.f1.estado.options[0].value = "-" document.f1.estado.options[0].text = "-" } //marco como selecionada a opo 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 formulrio textarea, ao mesmo tempo em que se est escrevendo. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 22/8/07

Valorize este artigo: O desenho deste script foi motivado pela necessidade de fazer a tpica caixa para enviar mensagens SMS pela Internet. O tamanho mximo de uma mensagem SMS de celular de 160 caracteres, com o qual muito til que a prpria pgina lhe informe sobre o nmero de caracteres que levam escritos na mensagem, para que o interessado no passe do mximo permitido. O funcionamento muito simples de entender, mas de qualquer forma, podemos ver o script em funcionamento para saber exatamente o que propomos. O formulrio A pgina apresentar um formulrio com dois campos. O primeiro com o textarea onde o usurio 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 funo que realiza a conta dos caracteres no momento em que o usurio pressiona ou solta as teclas. Teoricamente, utiliza-se o evento onKeyDown para definir as aes a realizar quando se apertar a tecla e onKeyUp, para definir aes 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 formulrio e os dois eventos introduzidos temos tudo que necessrio 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 funo que se encarrega de realizar a conta propriamente dita e situa-la no outro campo de texto do formulrio. < script> function conta(){ document.forms[0].caracteres.value=document.forms[0].texto.value.length

} < /script> Talvez muitos tenham se surpreendido com a simplicidade do script, mas que realmente no faz falta mais. A propriedade value do textarea contm o texto escrito e por sua vez, a propriedade length salva o nmero de caracteres de tal texto. Assim, document.forms[0].texto.value.length equivale ao nmero de caracteres introduzidos dentro do textarea. Este valor se atribui ao contedo do campo de texto do formulrio onde salvamos o nmero de caracteres, mediante a propriedade value do campo: document.forms[0].caracteres.value.

Passo de parmetros em HTML com client-side Javascript Trata-se de um simples script Javascript para recolher os parmetros que chegam a uma pgina. Por Bruno Surez Laffargue

Publicado em: 31/8/07 Valorize este artigo: O script seguinte se colocar prova na pgina que deve de receber os parmetros, ou poder se copiar em um arquivo .js vinculado. Em ambos casos o cdigo no deve estar em nenhuma funo, para que se execute sempre que se carrega a pgina. Uma vez executado o script teremos os valores recebidos nas correspondentes variveis. Aquelas que no tivermos recebido tero o valor padro que tivermos fixado. O Cdigo: <script language="javascript"> //Autor: Bruno Surez 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);

//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 restries funcionais para que isto funcione ter tantas variveis javascript definidas como parmetros forem recebidos, iniciados a um valor padro. Ademais, estas variveis ho de se chamar exatamente igual que os parmetros, j que seno, no funcionar. Em nenhum caso.

Moldura dinmica em Javascript com texto que muda Workshop de Javascript em que se realiza uma moldura cujo texto muda em cada impresso da pgina, com o qual se podem mostrar diferentes mensagens em cada visita. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 20/9/07 Valorize este artigo: Realizamos um simples script em Javascript para realizar uma moldura com informao dinmica, que muda com cada impresso da pgina. O exerccio consiste em uma tabela HTML que mostra uma informao que muda, utilizando Javascript para que nos proporcione um texto aleatrio, que logo imprimiremos dentro da tabela HTML.

Para comear veremos como obter um texto aleatrio. A idia a desenvolver bem simples. Criamos um array com os diferentes textos, entre os que se escolher um aleatoriamente. Obtemos um valor numrico aleatrio entre 0 e mximo ndice do array e se imprime o texto que h no array nessa posio aleatria. function texto_aleatorio(){ var textos = new Array() textos[0] = "Temos os melhores produtos do mercado, com controles de qualidade intensivos." textos[1] = "Distribumos em todo o mundo com os melhores tempos de entrega e confiana nos envios." textos[2] = "No temos concorrentes que nos superem. Contrate conosco e comprove. muito fcil." textos[3] = "Disponha do melhor servio de ateno ao cliente e uma resposta rpida aos seus problemas." textos[4] = "Os melhores servios, produtos e, claro, os menores preos. Tudo so vantagens." aleat = Math.random() * (textos.length) aleat = Math.floor(aleat) 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 exerccio, o nmero de campos que tiver o array indiferente, portanto poderamos aumentar seus campos, introduzindo novas frases, e as as possibilidades de textos sero mais variadas. Mais adiante na funo se obtm um nmero aleatrio. Para obt-lo utilizamos a classe Math, mais concretamente o mtodo random(). Random devolve um valor decimal aleatrio entre 0 e 1. Algo como 0.453. Se multiplicarmos esse valor pelo nmero de campos do array obteremos um nmero entre 0 e o nmero de campos, porm ainda tm valores decimais e ns 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 nmero mais prximo, arredondamos por baixo. Nas ltimas linhas de funo se imprime o valor aleatrio. O cdigo HTML da moldura

< 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 clula com o cabealho ou titular da caixa e uma segunda clula na que simplesmente h uma chamada funo que escreve o texto aleatrio. O resultado pode ser visto em uma pgina a parte. Tenha em conta que h que atualizar a pgina para ver como vo se mostrando diferentes mensagens, entre todas as que configuramos. Podemos complicar este exemplo em tudo que desejarmos para criar pginas dinmicas que mudem os contedos entre diferentes acessos do visitante. Poderamos fazer que se incluam diferentes elementos aleatrios, como imagens, animaes, links, etc.

Criao de grficos de barras com Javascript A partir da importao de uma biblioteca apropriada, podemos realizar grficos de barras. Veremos a biblioteca importar e como manipular o cdigo para conseguir nosso objetivo. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 01/10/07 Valorize este artigo: Vamos apresentar um sistema para realizar grficos de barras em pginas web, com a ajuda de Javascript. Sem dvida, qualquer pessoa poder encontrar vrias solues para este problema, embora ns vamos recomendar uma que de verdade pode simplificar muito nossa vida e que no requer nenhum requisito especial. Simplesmente que o navegador do visitante suporte Javscript. Os grficos de barras servem para fazer muitas coisas e uma das tarefas tpicas se que se pode necessitar em um projeto um pouco avanado.

Geralmente, se utilizam para mostrar resultados de informes, estatsticas ou temas similares de uma maneira muito visual.

Imagem de um dos grficos que se podem gerar com este mecanismo. Com o seguinte exemplo, vamos aprender a fazer grficos dinamicamente, ou seja, que se constroem com uns dados que podem ser variveis. Se o grfico fosse construdo sempre com os mesmo dados, poderamos 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 extrados 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 pgina, se deveria acessar ao banco de dados, extrair a informao e gerar o grfico dinamicamente. BAR_GRAPH O sistema que apresentamos aqui se chama BAR_GRAPH e serve para gerar grficos de barras de diferentes tipos com a ajuda de Javascript. Os grficos tm um aspecto visual muito adequado e so totalmente personalizveis, podendo configurar o sistema para que mostre grficos horizontais, verticais e de progresso. Tambm 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 faa uma doao de 6 euros, atravs de Paypal. Para a criao dos grficos no se necessita de nenhum material, exceto umas bibliotecas Javascript que so as que oferecem todas as funcionalidades de criao de grficos.

Para incluir a biblioteca em nossas pginas web, basta baixa-las do web site do autor do produto: http://www.gerd-tentler.de/tools/graphs/ e cham-la atravs de nossos scripts. Para incluir uma biblioteca Javascript, o habitual colocar no cabealho da pgina uma chamada ao arquivo onde est o cdigo. Algo como isto: <head> <title>Exemplo de grficos</title> <script src="graphs.js" type="text/javascript"></script> < /head> Observamos que se inclui um arquivo chamado graphs.js que se supe que estar no mesmo diretrio que a pgina web. Dentro desse arquivo encontraremos a declarao de um objeto que ser o encarregado de receber os dados de origem com os quais se deseja construir o grfico e tambm de mostr-lo quando tiver introduzido todos os dados iniciais. Para criar e mostrar um grfico, o nico que temos que fazer instanciar o objeto grfico, inserir os valores iniciais e chamar ao mtodo que faz com que se mostre o grfico. Pode-se ver um exemplo a seguir das instrues iniciais de criaes do grfico:

//instanciamos o grfico graph = new BAR_GRAPH("hBar"); //inserimos valores graph.values = "380,150,260,310,430"; //mostramos o grfico na pgina 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 grfico graph = new BAR_GRAPH("hBar"); //definimos as etiquetas que acompanharo 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 grfico na pgina document.write(graph.create()); Se desejarmos ver muitos mais exemplos de grficos possveis seria muito interessante acessarmos pgina do produto, onde veremos os tipos de grficos mais habituais que podem se realizar.

Jogos em Javascript Com Javascript pode-se criar jogos, e ainda que a linguagem no se presta precisamente a facilitar as coisas, com esforo se pode conseguir um jogo "curioso". Neste artigo, veremos alguns exemplos de jogos. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 11/10/07 Valorize este artigo: Javascript se encaixa dentro das linguagens para a web do lado do cliente. compatvel com os navegadores mais habituais, embora no com todos. Outra das caractersticas desta linguagem que pode variar de um navegador a outro, inclusive pode ser diferente em verses distintas do mesmo navegador. Por tudo isso e porque Javascript muito simples de utilizar para pequenos programas e muito complicado para aplicaes mais elaboradas, no uma linguagem muito apropriada para fazer jogos para a web. Pode acontecer que um jogo no se veja corretamente em todos os navegadores ou que no funcione em certas plataformas. Em qualquer caso, certamente muito difcil de manter e de melhorar uma vez realizado. No obstante, no mundo h pessoas para tudo e muitos loucos do Javascript nos deixaram autnticas obras de arte e de engenho, que nos demonstram que no to difcil fazer aplicaes avanadas para a web com esta linguagem. Neste artigo, vamos mostrar vrios jogos de Javascript, realizados com muita dedicao e que em quase todos os casos, podemos incluir livremente em nossas pginas web. JsTetris O conhecido jogo de peas que caem e temos que colocar da maneira mais ordenada. Funciona tanto em Internet Explorer como em Nestcape. O nico que no funciona ainda muito rpido como deveria so os eventos do teclado, que s vezes no respondem to rpido como se desejaria. http://gosu.pl/dhtml/JsTetris.html

Buscaminas O tpico jogo do Windows, muito til alis no s para exercitar a lgica, como tambm 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 vrias cartas que devem ser agrupadas por duplas. Neste caso, proporciona-se o jogo em vrias verses para Javascript, Flash, Java e PHP... http://mypage.bluewin.ch/katzenseite/docs/en/games/games.html Serpente Um clssico 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 lanar bolhas coloridas. Quando consegue-se 3 bolhas juntas da mesma cor, se descartam da tela. Perde-se quando no 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 avanados tecnicamente. Para encontrar outros jogos em Javascript recomendamos acessar a algumas pginas com colees de scripts como Hotscripts http://www.hotscripts.com ou javafile http://www.javafile.com.

Cross-Browser. DHTML compatvel com todos os navegadores. Apresentamos um website que oferece interessantes utilidades para o trabalho com HTML Dinmico de uma maneira simples e compatvel com os navegadores mais habituais. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 26/4/07

Valorize este artigo: bastante conhecido, para todos os que tiveram experimentado com camadas e Javascript, o problema da compatibilidade de navegadores e a necessidade de realizar diferentes cdigos DHTML dependendo do explorador que tenha o cliente. Se voc ainda no tiver encontrado problemas de compatibilidade de seus scripts, possivelmente nunca deve ter enfrentado a programao do lado do cliente em Javascript, mais concretamente com o trabalho com as camadas e portanto, no lhe interessar muito este artigo. Agora tambm, se tiver problemas com as camadas ao programar uma web e no conseguir que se veja bem nos distintos navegadores, este artigo poder tornar a sua vida mais simples. Isto graas a cross-browser.com, um website que oferece uma interessante biblioteca de funes, que vamos apresentar a seguir, para o trabalho com HTML Dinmico compatvel 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 funes, sendo uma biblioteca a evoluo de outra. CBE API a biblioteca original e X Library a sua evoluo. CBE API a biblioteca mais antiga e ainda tem maiores funcionalidades, porm em um espao de tempo X Library ir dispor das mesmas funcionalidades que a outra, embora com diversas melhorias como uma considervel reduo do peso dos arquivos Javascript. princpio, 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 comear baixando a verso atual de X Library. Para isso, entramos em cross-browser.com e acessamos sesso de Toys (para o criador deste website, seus brinquedinhos so bibliotecas DHTML). Aqui podemos fazer o download da ltima verso, onde encontraremos as bibliotecas e exemplos de uso. Uma vez descompactado o pacote, podemos encontrar uma pasta chamada "x", onde esto as bibliotecas. Observamos que h uma boa quantidade de arquivos .JS, cada um com diversas funes. Dependendo da ao que se deseja realizar temos que chamar a uma funo ou outra, e teremos que saber em que arquivo .JS se encontra. As funes mais habituais se encontram no arquivo x_core.js. Em nossas pginas no temos porqu incluir todos os

arquivos do diretrio, s os que formos utilizar. Podemos ver em que arquivo est cada funo na documentao do prprio programa, mais concretamente na referncia de funes (o diretrio onde se hospeda a documentao est dentro da pasta "docs" que est dentro do diretrio "x"). Dentro do diretrio "x" tambm h uma pasta de exemplos, chamada "examples", aos quais podemos dar uma olhada para comear a nos familiarizarmos com as possibilidades da biblioteca. Ns criamos dois exemplos para comprovar as bondades deste software. Para isso, seguimos o exemplo do cdigo da prpria pgina cross-browser.com e o dos diferentes exemplos que se oferecem. Algumas funcionalidades dos exemplos, como a funo xInclude() esto ainda em fase de experimentao, portanto ns no a utilizamos e em seu lugar inclumos os arquivos que necessitamos tal como se faz habitualmente em Javascript. Exemplo mostrar e ocultar camada X Library dispe de uma simples funo para mostrar e ocultar uma camada. Simplesmente recebe o identificador da camada que se deseja mostrar ou ocultar. princpio, podemos lhe enviar funo o prprio objeto camada ou ento, um string com seu identificador (que se indica com o atributo id na etiqueta <div>). Referncia: No manual de CSS temos explicaes de o que so as camadas e a forma de cria-las e definir seu posicionamento e aparncia.

< html> < head> <title>Exemplo de utilizao 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; backgroundcolor:#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 botes. Quando se clica um deles se mostra a camada e quando se clica o outro se oculta. Para isso, criamos tambm duas funes, que se chamam quando se clica nos botes, cuja obrigao mostrar e ocultar a camada utilizando a biblioteca X Library. Faremos o uso das fuunes xShow() e xHide(), que recebem o identificador da camada que h que mostrar ou ocultar respectivamente. Estas duas funes se encontram no arquivo "x_core.js", que inclumos na pgina como bloco de script externo. Pode-se visualizar este simples exemplo em uma pgina web a parte. Exemplo para fazer um movimento de camada O segundo exemplo que criamos uma camada que se move pela pgina da esquerda para direita. Esta pgina tem tambm dois botes, 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() }

< /script> < /head> < body> < div id="c1" style="position:absolute; left: 200px; top: 100px; backgroundcolor: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 relao biblioteca, utilizamos a funo xMoveTo(), que recebe o identificador da camada a mover e as novas coordenadas onde coloca-la. Esta funo tambm se encontra dentro do arquivo "x_core.js", que inclumos com o primeiro bloco de script. Para entender o movimento da camada temos que ter visto alguma vez a funo setTimeout(), que recebe uma instruo Javascript para executar e uma quantidade de milsimos de segundos que devem de passar antes da execuo. No exemplo temos uma funo que se chama move(), que se encarrega de variar a posio atual da camada. Esta funo se chama a si mesma por meio de setTimeout(), com um atraso de 100 milsimos de segundos, portanto, a funo move() nunca para de se executar, teoricamente 10 vezes por segundo. Nota: setTimeout um mtodo do objeto window. Temos vrios artigos que utilizam esta funo, por exemplo: Relgio em Javascript ou Texto em movimento na barra de estado. Logo, definimos uma varivel velocidade, que o nmero de pixels que se desloca de camada em cada chamada move(). A nica coisa que fazem os dois botes modificar o valor dessa varivel velocidade. O boto que para o movimento simplesmente atribui o valor zero velocidade. Outra coisa que temos que ver que foi definida uma srie de instrues a executar quando se carrega a pgina, no bloco window.onload = function(). Entre essas aes a executar encontra-se a configurao da posio inicial da camada e a velocidade do movimento. Ademais, faz-se uma chamada inicial a move(), que desencadeia o fluxo do movimento, pois a funo move se encarrega de chamar-se a si mesma at que o usurio abandona a pgina.

Se se deseja, pode-se ver o exemplo em funcionamento. Concluso No era nossa inteno explicar todas as funcionalidades desta ferramenta, e sim torna-la conhecida. Tampouco nossa inteno explicar como realizar um movimento de uma camada ajudados por setTimeout(), mesmo assim pedimos desculpas para aquele leitor que no pde entender por que realizamos um script de movimento dessa forma. Nosso objetivo era apresentar as bibliotecas e mostrar como, com muito pouco cdigo e sem ter que conhecer os segredos de cada navegador, pode-se realizar um exemplo j bastante avanado do manejo de camadas. Recomendamos que no re-inventem a roda! J que se dispe de ferramentas de trabalho com camadas to versteis como X Library, muito mais interessante basear nossos scripts nela do que quebrarmos a cabea para inventar mecanismos compatveis com cada navegador. Criamos um manual onde vamos ir comentando vrios 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 endereo de correio, que colocado no mailto de um link, para evitar que seja detectado pelos robs que buscam endereos em webs para enviar spam. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 30/1/07 Valorize este artigo: Uno dos mecanismos que utilizam as pessoas que enviam spam (spammers) para obter endereos de correio para sua lista de distribuio rastrear a web em busca de endereos de e-mail. Todas os endereos que aparecem nas pginas web, vista ou escritas no cdigo, so suscetveis de ser capturadas e utilizadas para o envio de spam. Por isso, no m idia proteger nossos emails para tornar a tarefa difcil aos spammers, e evitar que em pouco tempo comecemos a receber mensagens no desejadas. Um link a um correio eletrnico assim: < a href="mailto:[email protected]">[email protected]</a>

Tanto em href como no texto do link aparece nosso correio eletrnico. Neste artigo veremos umas idias para evitar que apaream nossos dados, de modo que no possam captar os endereos. Utilizar uma imagem no texto do link Uma boa soluo consiste em utilizar uma simples imagem onde aparece o correio. Esta imagem ter o texto do correio eletrnico, para que o visitante possa visualizar o endereo na pgina, porm escrita sobre uma imagem. Isso indetectvel por um rob que escaneie a pgina e nossos clientes podero ver claramente qual o correio onde devem nos escrever. Se no colocarmos o link e colocarmos somente a imagem, acabariam nossos problemas. O visitante no poderia clicar no endereo na prpria pgina 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 endereo Podemos por mediao de Javascript fazer um pequeno programa para que nosso endereo no aparea no cdigo, pelo menos no to claramente. Podemos, por exemplo, parti-lo em diferentes pedaos e logo concatena-lo, de maneira que no possa se ver por completo em nenhum lugar do cdigo da pgina. 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 trs variveis que formam o correio eletrnico que desejamos ocultar. Logo, temos duas funes teis: A funo dar_correio() devolve o correio eletrnico que se deseja ocultar. Simplesmente concatena as partes do correio eletrnico, que tinham sido definido nas variveis mais acima.

Por sua parte, escreve_link_correio(), escreve na pgina web um link ao correio eletrnico completo. Um link a um correio eletrnico assim: < a href="mailto:[email protected]">[email protected]</a> Esta funo se apoia no dar_correio() para obter o correio que se desejava ocultar. Para que aparea na pgina o link ao correio eletrnico devemos fazer uma chamada funo escreve_link_correio(), no lugar do corpo que desejarmos que se mostre. Nota: Se o computador do usurio no tiver Javascript ou tiver desabilitado, no poder ver esses endereos de correio escritos na pgina desde Javascript. Por isso, pode ser uma boa idia 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 cdigo para mostrar em qualquer parte da pgina. < body> < !-- em qualquer parte do corpo da pgina --> <script>escreve_link_correio()</script> < /body> Se o rob do spammer for muito esperto, provavelmente possa colocar em execuo o Javascript para interpreta-lo e saber onde est escondido o endereo de correio. Isso parece no momento pouco provvel. Existem tanto endereos nas pginas web, que possvel que eles no se entretenham tanto tempo para obter endereos ocultos no cdigo da pgina. No obstante, certamente existem outras maneiras de ocultar um pouco melhor com Javascript esse endereo. Pode ser que o das variveis 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 comentrios se tiverem alguma ajuda para melhorar o script.

Funo em Javascript para a insero de datas Funo para a introduo de datas com formato dd/mm/aaaa. Por Juan Carlos Montejo

Publicado em: 31/10/07 Valorize este artigo: Esta uma funo que realizei para tornar mais fcil a escritura de campos data com formatos de dd/mm/aaaa e uma pequena validao, tambm apresento uma pequena funo para saber se um valor numrico: 1 devemos ter um formulrio 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 funo: formateadata 2- no mesmo html colocamos os javascript com as funes ou o colocamos parte em um arquivo.js para onde deveramos 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 numrico 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);

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 fcil de utilizar e com um aspecto formidvel, que nos servir para dispor de um calendrio para selecionar uma data.

Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 08/11/07 Valorize este artigo: Quando realizamos uma interface de usurio, tpico ter campos onde o visitante deva introduzir uma data. Estas tm formatos bastante estritos e so complicadas de escrever, sendo ento muito cmodo para o usurio contar com a possibilidade de utilizar um calendrio para selecionar a data. Pelo fato de nem sempre o visitante ter a capacidade de entender a programao em PHP, ou aceso a um servidor que permita a publicao de contedos programados com PHP, muito interessante conhecer outras maneiras de implementar um calendrio em uma pgina web. Neste caso vamos apresentar DHTML Calendar, um calendrio realizado em Javascript, compatvel para todos os navegadores. Este script gratuito para incorporar um calendrio, portanto podemos utiliz-lo sem nenhum tipo de limite. Como DHTML Calendar um sistema muito potente e facilmente configurvel com uma interessante interface, totalmente dinmica. Pode-se incluir de diversas maneiras dentro de uma pgina, como um pop-up, ou diretamente no corpo da pgina, o que o torna muito til em diversas situaes. O script para configurar o calendrio variar de um modo de apresentao a outro. No download do calendrio se oferecem alguns exemplos rpidos para mostrar o calendrio. Exemplos para os impacientes, que podem ser muito bom para comear rapidamente. Uma das maneiras mais tpicas de apresentar o calendrio pode ser utilizando um campo de texto e um boto. Ao clicar o boto se mostra o calendrio e, uma vez selecionada uma data, se escreve no campo de texto. O cdigo do exemplo seria o seguinte, muito parecido a um dos exemplos para os impacientes proporcionados no pacote de download. < html> < head> <title>Calendrio de provas</title> <-Folha de estilos do calendrio --> <link rel="stylesheet" type="text/css" media="all" href="calendar-green.css" title="win2k-cold-1" /> <!-- biblioteca principal do calendario --> <script type="text/javascript" src="calendar.js"></script>

<!-- biblioteca para carregar a linguagem desejada --> <script type="text/javascript" src="lang/calendar-es.js"></script> <!-biblioteca que declara a funo Calendar.setup, que ajuda a gerar um calendrio em poucas linhas de cdigo --> <script type="text/javascript" src="calendar-setup.js"></script> < /head> < body> < !-- formulario com o campo de texto e o boto para lanar o calendrio--> <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 boto que lanar o calendrio }); < /script> < /body> < /html> O cdigo anterior est comentado para que se entenda mais facilmente. Tem vrias partes.

No cabealho se incluem vrios arquivos com as funes e estilos do calendrio. Estes arquivos se encontram nos arquivos de download do calendrio. Existem vrios estilos que se podem utilizar para ajustar o aspecto do calendrio ao desenho da pgina. Tambm se deve incluir a linguagem na qual apresentar o calendrio, neste caso espanhol, que est tambm includo no pacote de download. J no corpo da pgina, se mostra o formulrio. muito simples, pois s tem um campo de texto e um boto para mostrar o calendrio. No script de javascript, tambm dentro do corpo da pgina, se utiliza a funo Calendar.setup, que serve para carregar o calendrio e configur-lo com os valores que desejarmos. Todas as opes de configurao tm valores padro, embora sempre vamos ter que definir, como mnimo, 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 boto que lanar o calendrio ao clic-lo.

Foi um exemplo o mais simplificado possvel. Podemos ver o funcionamento do calendrio que gera este cdigo em uma pgina a parte. Na documentao do produto poderemos encontrar mais exemplos do calendrio e uma explicao detalhada de sua utilizao. Para maiores informaes na pgina do produto: http://www.dynarch.com/projects/calendar/ DHTML Calentar um projeto hospedado em SourceForge.net, com a seguinte pgina de projeto: http://sourceforge.net/projects/jscalendar

Gerar uma cor aleatria com Javascript Exemplo de funo para gerar uma cor aleatoriamente em formato hexadecimal. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 14/11/07 Valorize este artigo: Este exerccio muito simples, porm pode ser muito til para algumas pessoas. Trata-se de uma pequena funo que serve para gerar uma cor aleatria, em formato hexadecimal, que o utilizado na criao de webs. Extramos de outro exemplo realizado em Javascript, no qual necessitvamos gerar uma cor de maneira aleatria. Acreditamos que possa ser interessante para coment-lo em um artigo parte, se por acaso algum necessitar criar uma cor totalmente aleatria em suas pginas. Para criar uma cor aleatrio precisamos simplesmente de 6 nmeros em hexadecimal (nmeros do 0 F). Se obtivermos aleatoriamente estes 6 nmeros hexadecimais, teremos criado o cdigo de uma cor aleatria. Funo para gerar aleatrios Portanto, para gerar um nmero aleatrio, vamos nos apoiar em uma funo relatada em outro artigo de CriarWeb.com: Gerao de nmeros aleatrios Javascript . A funo para gerar aleatrios que vamos utilizar ento a seguinte:

function aleatorio(inferior,superior){ numPossibilidades = superior - inferior aleat = Math.random() * numPossibilidades aleat = Math.floor(aleat) return parseInt(inferior) + aleat } Como ns necessitamos de um aleatrio hexadecinal, para nos apoiarmos nesta funo, vamos gerar um nmero aleatrio em decimal, que logo converteremos a hexadecimal. Para fazer esta converso 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 aleatrio hexadecimal, o nico que temos que fazer obter um ndice entre 0 e o nmero de campos deste array. Ento, o valor aleatrio 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 obtm o ndice do array aleatrio, que est entre 0 e o nmero de posies do array. Na segunda valor_hexadecimal_aleatorio se obter acessando ao array, na posio gerada aleatoriamente. Obter a cor aleatria Agora que j vimos uma maneira de obter um valor hexadecimal aleatrio, vamos ver como obter uma cor aleatria, que no mais do que obter 6 valores hexadecimais aleatrios 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++){ posarray = aleatorio(0,hexadecimal.length) cor_aleatoria += hexadecimal[posarray] } Depois da execuo deste cdigo, a varivel cor_aleatoria conter a cor gerada aleatoriamente.

Coloc-la em uma funo Para acabar esta pequena prtica, vamos ver como se pode por tudo isto em uma funo, 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++){ posarray = aleatorio(0,hexadecimal.length) cor_aleatoria += hexadecimal[posarray] } return cor_aleatoria } Para ver este exemplo em funcionamentocriamos uma pgina que mostra uma srie de 50 cores gerados aleatoriamente.

A aprendizagem na Internet Exemplo de pgina interativa para a aprendizagem pela internet. Por Agustin Jareo

Publicado em: 10/12/07 Valorize este artigo: Apesar do computador no ser o remdio do futuro ensino, ningum pe em dvida que um meio didtico 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 prpria Internet, o protagonista j no o professor, e sim o prprio aluno, quem l, compreende e aprende por si mesmo. O professor Jess A. Beltrn Lera distingue a pedagogia da reproduo passiva e a pedagogia da imaginao ativa e inovadora. As pginas web tambm podem ser divididas em duas classes: as que apresentam textos e desenhos que se podem copiar e imprimir (porm so passivas e estticas) e as pginas interativas (com um dilogo entre o computador e o aluno). No mundo do ensino muito aconselhvel que os exerccios sejam do segundo tipo.

Um modelo interativo pode ser este: A tela lhe apresenta uma "Ajuda" com o contedo que o aluno necessita para fazer bem os exerccios; depois o computador lhe apresenta uma pergunta com vrias 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 informao correta. A interatividade permite a correo instantnea da resposta do aluno, o que supe um fator motivador. Ao terminar todas as perguntas, o aluno acessa a um boto de "Pontuao" que ao clic-lo nos d trs informaes: o nmero de acertos, o nmero de erros e uma qualificao a partir destes trs comentrios de avaliao: "Muito bem. Magnfico", se no cometeu erros; "Bem, porm pode melhorar", se a pontuao (de 0 a 10) for de 7 ou superior; e "Deve repetir o exerccio", se a pontuao for inferior a 7 pontos. Esta interatividade produz uma realimentao positiva que incrementa a motivao do aluno e estimula a atividade escolar. Com HTML e Javascript pode-se preparar exerccios como os comentados anteriormente e sobre distintos temas como ortografia, leitura compreensiva, poesias, adivinhao e clculo. 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 cabealho da pgina (entre o e ) um script com as funes que controlam os acertos, erros e pontuaes: < script LANGUAGE="JavaScript"> 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. Magnfico") } 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 formulrio no corpo da pgina. Contm o exerccio propriamente dito e os botes de "Ajuda", "Pontuao" e "Apagar contestaes": < h1 align="center"><input Type="Button" Value="Ayuda" onclick="alert('abrir, advertir, afirmativo, amable, cueva, n nsubir, obstruir, atrever, avin, 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, avin, bandido.')"> < input Type="Button" Value=" w " onclick="resmal(); alert('abrir, advertir, afirmativo, amable, cueva, n nsubir, obstruir, atrever, avin, bandido.')"> < /b></td> < /tr> < tr align="center"> < td width="182" bgcolor="#FFFFFF"><div 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, avin, 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, avin, bandido.')"> < /b></b></td> < /tr> < tr align="center"> < td width="182" bgcolor="#FFFFFF"><div 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, avin, 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, avin, bandido.')"> < /b></b></td> < /tr>

< /table> < /center></div><div align="center"><center><p><strong> < input Type="Button" value="Puntuacin" 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 pgina parte. O segundo exemplo que se prope tem o mesmo script de pontuaes, um script com a funo do popup e o cdigo de ortografia de G e J. O cdigo do script do popup : < script LANGUAGE="JavaScript"> 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 cdigo do corpo da pgina: < 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">Avsame cuando <font color="#FF0000">despe_e </font>el avin</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.')">

< input Type="Button" Value=" gu " onClick="resbien(); this.style.color='red'"> </td></tr> < tr align="center"> < td width="75%" bgcolor="#FFFFFF"><div align="center"><center><p><small><b><font face="Verdana">Tu mam es muy <font color="#FF0000">ele_ante</font></font></b></small></td> < td width="25%" align="center" bgcolor="#FFFFFF"><input Type="Button" 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> < tr align="center"> < td width="75%" bgcolor="#FFFFFF"><div 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> < td width="25%" align="center" bgcolor="#FFFFFF"><input Type="Button" 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="Puntuacin" onClick="averiguarNota()"> < input TYPE="SUBMIT" VALUE="Borrar contestaciones" onblur="this.style.color='black'"> </p> < /center></div></form></strong>

Menu Dinmico com Javascript Deve-se apostar num menu bastante dinmico e flexvel, pois ele o veculo que vai conduzir cada cibernauta pela rede do seu stio. Por Joo Coelho

Publicado em: 19/12/07 Valorize este artigo:

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 dinmico e flexvel, pois ele o veculo que vai conduzir cada cibernauta pela rede do seu stio. Se colocar links atafulhados e desorganizados no seu menu, ento provvel que os visitantes desistam aps consultarem somente uma pgina. Por outro lado, se apresentar um ndice sbrio e bem estruturado, ter muito maiores probabilidades de este ser usado pelos utilizadores e, consequentemente, aumentar os seus registos de trfego. Agora a escolha sua! Continuar com um menu esttico 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), ento este artigo interessa-lhe, pois descreve esquematicamente, e de forma o mais sucinta e compreensvel possvel, um processo de criao de menus dinmicos para colocar no seu Website. O cdigo em Javascript, pois neste caso uma linguagem de programao do lado do cliente s traz vantagens, pois aumenta a rapidez da aplicao. Veja um exemplo do seguinte cdigo em aco! Antes de converter o seu menu, dedique algum tempo para pensar numa possvel organizao 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 pgina e os menos interessantes em ltimo lugar. Assim, as hiperligaes de topo tero mais visibilidade e chamaro mais cibernautas. Findo este processo, pode comear a converter o seu menu. Antes de mais, deve copiar e colar o seguinte cdigo em Javascript no incio do site, pois ele que vai gerir o seu ndice de hiperligaes. < script> var arrayX = new Array (); var flagX = new Array (); function treeWatch(id) { switch (flagX[id]) { case "0": document.getElementById ("subfolder"+id).innerHTML = "";

flagX[id]="1"; break; case "1": document.getElementById ("subfolder"+id).innerHTML = arrayX[id]; flagX[id]="0"; break; } } < /script> Este cdigo est dividido em duas seces que so delimitadas pelo ?switch?: ou o grupo est visvel, ou no est visvel. Se o valor da lista for ?0? ento o cdigo vai ocultar a parte do menu em foco. Se o valor, por outro lado, for ?1?, nesse caso o script ir mostrar a seco pretendida. Agora s falta definir o que deseja tornar dinmico no seu menu e se essa parte deve aparecer oculta, logo de incio, ou no. Nesse sentido, deve colocar a informao da seguinte forma: < script>arrayX[y] = ?cdigoHTML?; flagX[y] = "1";</script> Onde se l y, deve colocar a ordem em que deseja que aparea a seco. 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 visvel 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 aparea omisso de incio, no coloque a linha de cdigo anterior. Para finalizar, s falta colocar o seguinte cdigo HTML onde desejar que a seco aparea. < img src=?URLimagem? onclick=?treeWatch('y')? /> < font id="subfoldery"></font> Uma vez mais, o valor y refere-se ordem em que a seco 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 no estritamente necessrio 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 programao do lado do servidor. S para dar uma ideia... Se desejar que certa seco fique activa aps um clique especfico num certo link, ento basta colocar o seguinte cdigo (exemplo em PHP): < script>treeWatch ('<?=$varVisibilidade?>');</script> Agora que j possui um menu dinmico, regozije-se com o seu trfego a subir!

Pgina que muda aleatoriamente a cor de fundo Como fazer com que uma pgina mude de cor cada vez que se visita, colocando uma cor aleatria e com o texto que contraste para que se possa ler bem. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 02/1/08 Valorize este artigo: Vamos criar uma pgina que tem uma cor de fundo aleatria, de modo que, cada vez que se visite se mostre com um fundo diferente. Entretanto, como a cor da pgina vai ser diferente a cada vez, para certificarmos que o texto poder ser lido corretamente, faremos com que o texto da pgina seja ou branco ou negro, dependendo da gama da cor de fundo: se for escuro, o texto da pgina ser branco e se o fundo for claro, o texto se ver em negro. H que se dar conta que, se a cor aleatria, 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 pgina. Em um artigo anterior do workshop de Javascript j explicamos uma maneira de conseguir uma cor aleatria em Javascript. Apesar de no mencionado artigo j estar a funo Javascript para obter uma cor aleatria transcreveremos novamente aqui, pois fizemos um par de mudanas minsculas ao cdigo: function dame_numero_aleatorio(superior, inferior){ var numPossibilidades = (superior + 1) - inferior; var aleat = Math.random() * numPossibilidades; aleat = Math.floor(aleat);

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 aleatria gerada por Javascript. Para calcular a obscuridade (ou claridade) de uma cor em formato RGB hexadecimal, vamos realizar vrios passos: Temos que saber que, a maiores valores de RGB, a cor resultante ser mais clara. Se os valores de RGB so 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 trs 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 nmero inteiro, do que vamos deduzir a claridade ou obcuridade. 4. Se o nmero resultado da soma for menor que ((255 + 255 + 255) / 2), ento que a cor de fundo escura, logo a cor do texto deve ser clara. E ao contrrio, se deduzimos que a cor de fundo clara, ento a cor de texto ter que ser escura. Isto se faz da seguinte maneira, em cdigo 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 pgina web se poderia fazer com estas linhas de cdigo: document.fgColor=colortexto document.bgColor=colorin Porm, isto d um problema em alguns navegadores, ao mudar a cor do texto, que no se pode fazer se previamente se escreveu algo na pgina. Ento, 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 aleatria e cor do texto que extramos das variveis que os contm. document.write('<body bgcolor="' + colorin + '" text="' + colortexto + '">') Isso todo. J temos a pgina com a cor de fundo aleatria e a cor do texto com suficiente contraste. A pgina onde implementamos este exerccio pode-se ver em funcionamento aqui. Podemos ver seu cdigo fonte para obter script do exemplo completo.

Script de recarregamento da pgina com Javascript

Realizamos um script em uma pgina, com Javascript, que faz com que se recarregue constantemente e assegura que no se obtm a pgina sempre desde o cache. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 10/1/08 Valorize este artigo: Em algumas ocasies necessitamos que uma pgina recarregue seus contedos a cada certo tempo, para mostrar informao atualizada s pessoas que a visitam. Isto s vezes tpico dos servios que mostram informao em tempo real, segundo se vai produzindo. Este artigo surge como resposta dvida de um visitante que, ademais, necessitava que o tempo que passasse entre cada recarregamento da pgina fosse sempre diferente. Para isso, simplesmente fazemos que se recarregue a pgina depois de um nmero de segundos aleatrio. Um tema que ademais necessrio para que tudo funcione corretamente que a pgina no se mostre desde o cach do navegador. Sabemos que quando uma pgina j foi solicitada previamente, fica muitas vezes no cache de nossos navegadores de modo que, se se volta a solicitar, se mostra a cpia que temos armazenado localmente, em vez de se solicitar e baixar atravs do servidor de Internet. Nestes sistemas de recarregamento h que se assegurar que os contedos no se obtenham desde o cache, para que as atualizaes possam ser vistas corretamente com cada recarregamento da pgina. O recarregamento com Javascript Vejamos como resolvemos todas estas necessidades, neste caso mediante Javascript. Para comear, temos que obter um nmero aleatrio de segundos, para que o recarregamento se realize a intervalos irregulares, tal como nos solicitavam. Para isso, vamos utilizar a seguinte funo de clculo de nmeros aleatrios, que comentamos e provamos em outros exemplos relatados em CriarWeb.com. function aleatorio(inferior,superior){ numPossibilidades = superior - inferior aleat = Math.random() * numPossibilidades aleat = Math.floor(aleat)

return parseInt(inferior) + aleat } Chamaremos funo para obter um nmero aleatrio, neste caso entre 5 e 10: num_aleatorio = aleatorio(5, 10) Para solucionar o tema de que a pgina no se mostre desde o cache do navegador vamos enviar-lhe um parmetro pela URL, assim a URL que solicitemos ser sempre diferentes e nosso navegador se ver obrigado a solicitar a pgina ao servidor cada vez que se recarregue. Poderamos ter utilizado outras tcnicas como colocar no cabealho do http a ordem para que no se salve no cache, porm por experincia prpria, esta a nica maneira que nos assegura que todos os navegadores vo recarregar a pgina solicitando sempre ao servidor. Vou gerar um string para envi-lo por parmetro a esta mesma pgina. Como dizamos, o parmetro o passaremos pela URL. No faremos nada com este dado, mas como cada vez ser diferente, nos assegura que o navegador sempre solicitar ao servidor a pgina, 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 varivel dado_url salvamos o ano, seguido do ms, dia, horas, minutos e segundos. Como todos os dados de data, se tm que extrair desde um objeto date, que criamos com a sentena new Date(). Logo, a este objeto lhe invocamos diversos mtodos para obter os dados que necessitamos. Os dados so devolvidos em tipo inteiro e para concaten-los como se fossem string, necessitamos aplicar o mtodo toString(), que tm 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 funo setTimeout(), que recebe como primeiro parmetro a instruo que se quer executar e como segundo parmetro, o tempo em milsimos 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 varivel dado_url para pass-la como parmetro. Ademais, para marcar o atraso entre recarregamentos utilizamos a varivel num_aleatorio, multiplicada por 1000 para passar a milsimos de segundos.

Mudar a cor s clulas de uma tabela com Javascript Vemos um par de mtodos para alterar a cor de uma clula de uma tabela com javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 23/1/08 Valorize este artigo: Veremos neste artigo um par de solues a uma pergunta tpica de trabalho com Javascript: mudar a cor clula de uma tabela dinamicamente e como resposta a aes do usurio. 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 soluo que vamos ver como mudar a cor de uma clula ao passar o mouse por cima. Quando entrarmos com o mouse na clula deve mudar para uma cor e quando sairmos a mudaremos por outra. O segundo caso que vamos realizar mudar a cor da clula como resposta a eventos de elementos que esto fora da prpria clula. Em concreto, mudaremos a cor de uma clula quando se acione um formulrio que est fora das clulas a mudar. Mudar a cor de uma clula ao passar o mouse por cima um caso muito tpico que se pode ver em muitas webs. Este exemplo bastante simples de fazer com CSS, sem necessidade de escrever nem uma linha de cdigo Javascript, porm, apesar disso o mostraremos aqui. No exemplo teremos uma tabela com vrias clulas e para cada uma teremos definido o evento onmouseover e onmouseout, para chamar a uma funo que se encarregue de mudar a cor quando se entre na clula e quando se saia, respectivamente. A tabela ter esta forma: < table width=100>

< tr> <td bgcolor="#dddddd" id="celula1" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">Campo numero 1</td> < /tr> < tr> <td bgcolor="#dddddd" id="celula2" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">Campo numero 2</td> < /tr> <tr> <td bgcolor="#dddddd" id="celula10" onmouseover="mudar_cor_over(this)" onmouseout="mudar_cor_out(this)">Campo numero 10</td> < /tr> < /table> As funes que se encarregam de alterar a cor recebem por parmetro a palavra this, que uma referncia clula onde est o evento. Se estamos no evento da clula 1, this faz referncia a essa mesma clula 1. As funes so 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 clula cuja cor se deseja mudar (que se enviou com a palavra this no manejador do evento). Logo, executam a sentena necessria para mudar a cor. Mudar a cor de uma clula sem passar a referncia this O segundo caso que havamos adiantado que amos fazer, era mudar a cor a uma clula desde outra parte da pgina. Vimos que, se estamos na mesma clula, podemos enviar uma referncia do prprio campo com a palavra this, porm se no estamos codificando um evento da clula, e sim estamos em outro lugar do cdigo da pgina, no teremos possibilidade de enviar essa simples referncia. Ento, nos torna necessrio obter a referncia da clula por outro mecanismo. Entra em jogo a funo de Javascript (que em realidade um mtodo do objeto document) chamada getElementById(). Esta funo recebe o nome de um identificador e devolve uma referncia 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 cdigo da tabela, escrito linhas acima, que cada clula tem um identificador definido. Utilizaremos esse identificador para obter a referncia clula que desejamos alterar sua cor. Por exemplo, se quisermos obter uma referncia clula com identificador "celula1", utilizaramos a chamada a essa funo assim: celula = document.getElementById("celula1") Logo, com a referncia da clula, podemos mudar a cor como vimos antes: celula.style.backgroundColor="#dddddd" Em nosso exemplo para ilustrar este mtodo criamos um formulrio com dois campos de texto e um boto. No primeiro campo de texto escreveremos o nmero da clula cuja cor queremos mudar. No segundo, escreveremos o nome da cor que queremos colocar ao campo, ou seu cdigo RGB. Quando apertarmos ao boto, chamaremos a uma funo que se encarregar de mudar a cor da clula. O formulrio ter um cdigo 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 funo javascript que se encarregar de mudar a cor ter este cdigo: 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 referncia utilizamos a funo

document.getElementById() e passamos o id da clula que queremos mudar sua cor. O identificador da clula se compe pela palavra "celula" e o nmero da clula, que tiramos do formulrio. Logo, se coloca na clula a cor que se tira do outro campo do formulrio.

Pop-ups DHTML OpenPopups Sistema Javascript para criar pop-ups DHTML, por meio de camadas, que no se podem bloquear pelos sistemas de bloqueio de pop-ups. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 30/1/08 Valorize este artigo: Todos ns j sabemos que a maioria dos navegadores dispe de sistemas para bloquear os incmodos pop-ups, e quando estes no os bloqueiam, existem barras de navegao, como a de Google, que tambm bloqueia a apresentao de pop-ups. A maioria das vezes, estes pop-ups so muito incmodos e temos que comemorar porque agora a maioria se pode detectar e no permitir sua abertura, porm muitos de nossos sites utilizam este sistema para mostrar informao legtima que nossos visitantes deveriam conhecer. De qualquer forma, existem mtodos para mostrar pop-ups que possam ser mais complicados de bloquear, como os pop-ups DHTML, que so uma emulao das janelas secundrias, porm que funciona por camadas e HTML dinmico para mostrar ou ocultar seu contedo. Este tipo de pop-ups no se considera como janelas secundrias, por isso no se bloqueiam. Somente os navegadores que tenham Javascript desabilitado deixaro 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 usurio o responsvel de permitir, ou no, executar scripts na pgina. Por isso, no to raro que inclusive os pop-ups DHTML se possam bloquear, mas pelo menos significam um avance com respeito s janelas secundrias habituais. OpenPopups Todo o anterior serve para apresentar um script Javascript Open Source (gratuito e de cdigo livre) para criar Pop-ups DHTML. Vale a pena conhecer este script, porque certamente pode ser muito interessante para nossas pginas web. A web onde se pode baixar o sistema de pop-ups DHTML : http://www.openwebware.com/products/openpopups/

Desde tal web se podem baixar os arquivos necessrios para a instalao do sistema de pop-ups e algum cdigo de exemplo. De qualquer forma, explicaremos aqui em portugus, para que todos possam entender. Referncia: Em CriarWeb.com publicamos alguns outros artigos sobre como fazer um pop-up DHTML, porm utilizando a biblioteca CrossBrowser. 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 CrossBrowser DHTML.

Tem-se que descompactar os arquivos que se baixam da web, mantendo a mesma estrutura de diretrios. Uma vez estando descompactados, em um diretrio dentro de nosso web site, que chamaremos, por exemplo, "d_openpopups", j podemos acess-los atravs de qualquer pgina 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 diretrio onde descompactamos os arquivos. Tal como est escrita a rota para o script, se supe que colocamos este diretrio na raiz do diretrio de publicao da web. Logo, temos que adicionar um evento onload na etiqueta <body>, para ocultar os pop-ups ao carregar a pgina. < body onload="hideDiv()"> A funo hideDiv() recebe o nmero de popups que vamos utilizar na pgina. Se tivermos um s pop-up DHTML chamaremos passando um 1 como parmetro: hideDiv(1). Se tivermos 5 pop-ups DHTML, lhe passaremos um 5 como parmetro: hideDiv(5). A seguir, temos que criar as camadas com o cdigo fonte dos pop-ups a mostrar. Algo como: < div id="Div1"> Cdigo do Popup < /div> H que observar que a camada tem como identificador (atributo id) "Div1". Isso para o pop-up 1. Se tivssemos outros pop-ups, deveramos dar-lhes nomes com nmeros consecutivos: Div2, Div3

Para acabar, temos que fazer a chamada funo Javascript que deve mostrar o pop-up. Essa funo se chama createWindow() e recebe vrios parmetros: 1. Ttulo da janela 2. Largura da janela (a altura ser a necessria para que caiba todo o contedo) 3. Cor de fundo da janela 4. O identificador da camada (s o nmero, 1, 2, 3) 5. Se quisermos que se mostre o cone para minimizar (1 para mostr-lo e 0 se no quisermos que se mostre) 6. A posio "left" da janela (o nmero de pixels esquerda da janela) 7. A posio "top" da janela (o nmero de pixels que deve ter acima da janela. Por exemplo, uma chamada possvel a esta funo seria: createWindow('Ttulo', 300, '#ffff88', 1, 0, 100, 25); Um detalhe que para ns fez falta mudar para que tudo funcionasse corretamente, embora no tenha visto explicado nada disto na documentao do produto, so os diretrios das imagens e as declaraes de estilos que utilizam os pop-ups DHTML. Esses diretrios vem especificados no arquivo de scripts javascript chamado openpopups.js. Nas seguintes linhas do cdigo se especificam os diretrios das imagens e os CSS: // CSS Diretory cssDir = "/d_styles/"; // Images Directory imageDir = "images/"; princpio, segundo entendo, no teria porqu tocar nessas linhas, porque no modifiquei a estrutura de diretrios do arquivo de download, porm se no as toca os exemplos no funcionam corretamente. Para que as rotas se encontrem, tive que colocar a estrutura de diretrios desde a raiz do domnio at as pastas onde esto os arquivos CSS e as imagens. Seria algo como isto: // CSS Diretory cssDir = "/d_openpopups/openpopups/styles/"; // Images Directory imageDir = "/d_openpopups/openpopups/images/"; Cdigo completo Vamos mostrar o cdigo de uma pgina que tem dois pop-ups DHTML e com um par de mtodos de carregamento dos popups, um por meio do boto 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 pgina 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 poderamos colocar tanto texto quanto quisermos! E todo tipo de contedo 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 extenso de um arquivo a subir com Javascript

Apresentamos um script Javascript para realizar a validao da extenso de um arquivo antes de realizar um upload. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 11/2/08 Valorize este artigo: Neste artigo vamos mostrar como validar a extenso de um arquivo mediante Javascript. Temos um formulrio com um campo file e quando se envia o arquivo, se realiza uma comprovao para ver se a extenso est entre as permitidas. Se estiver, se realiza o envio do formulrio para fazer o upload do arquivo. Neste script s se realiza a comprovao da extenso, em nenhum caso a recepo do arquivo e seu armazenamento no servidor, pois com Javascript no podemos realizar essas aes, j que uma linguagem que se executa no cliente e no tem acesso ao servidor para fazer um upload. Neste exemplo vamos definir um formulrio com um campo file e um boto de enviar que chama a uma funo que ser encarregada de comprovar se a extenso est permitida e submeter o formulrio se estiver tudo correto. O formulrio 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 funo comprova_extensao() que recebe uma referncia ao formulrio e a rota do arquivo que desejamos subir desde dentro de nosso computador. A funo realizar uma srie de comprovaes que veremos a seguir. O cdigo ser o seguinte: function comprova_extensao(formulario, arquivo) { extensoes_permitidas = new Array(".gif", ".jpg", ".doc", ".pdf"); meuerro = ""; if (!arquivo) { //Se no tenho arquivo, porque no se selecionou um arquivo no formulrio. meuerro = "No foi selecionado nenhum arquivo"; }else{ //recupero a extenso deste nome de arquivo extensao = (arquivo.substring(arquivo.lastIndexOf("."))).toLowerCase(); //alert (extensao);

//comprovo se a extenso 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 extenso dos arquivos a subir. \nS se podem subir arquivos com extenses: " + extensoes_permitidas.join(); }else{ //submeto! alert ("Tudo correto. Vou submeter o formulrio."); formulario.submit(); return 1; } } //se estou aqui porque no se pode submeter alert (meuerro); return 0; } O primeiro que fazemos definir um array com as extenses permitidas para fazer o upload. Tambm definimos uma varivel chamada meuerro, onde vamos salvar o texto explicativo do erro, se que se produz. Logo, comprovamos se recebemos uma rota do arquivo. Se no houver tal rota, se define o erro correspondente "No foi selecionado nenhum arquivo". No caso contrrio 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 extenso do arquivo. Por isso vamos obter a parte que h depois do ltimo ponto. Isto se faz utilizando vrios mtodos 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 extenso a minsculas, no caso em que esteja escrita com maisculas.

A seguir, para comprovar se esta extenso est entre as permitidas fazemos um loop for, que percorre todo o array de extenses permitidas e vai comparando-as extenso que recortamos do nome do arquivo. No momento que encontra uma coincidncia se sai do loop e pe a varivel boleana permitida a true. Se no encontrasse coincidncias essa varivel boleana ficaria como false. Logo, se comprova a varivel boleana permitida. Se estiver em false que no se permite a extenso, ento defino o correspondente erro. Se estiver a true que a extenso figurava entre as permitidas, ento se envia o formulrio e se sai da funo. Ao final da funo se mostra o possvel erro que tiver detectado. S se mostrar o erro se no se chegou a mandar o formulrio, porque se tivesse sido enviado, se sairia anteriormente da funo. Esperamos que esta validao tenha sido de utilidade. Pode-se ver em funcionamento em uma pgina a parte.

Detectar a resoluo da tela do usurio com Javascript Fazemos um script javascript para detectar a resoluo da tela do visitante e fazer coisas diferentes em funo da definio que tiver. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 19/2/08 Valorize este artigo: Com Javascript se pode calcular a resoluo de tela do usurio que nos visita. Ateno, no nos referimos ao tamanho da janela do navegador, e sim ao tamanho total em pixels que tivermos configurado em nosso sistema. As resolues de tela podem ser valores como 800x600, 1024x760, 1280x800 e se configuram pelo usurio no painel de controle, em propriedades de tela. Ns com Javascript podemos acessar a esses valores atravs do objeto screen: Com screen.width obtemos a largura em pixels da definio de tela. Com screen.height obtemos a altura em pixels.

Ento, se quisermos escrever na pgina os valores de largura e altura da resoluo de tela, poderamos utilizar um javascript como este: A resoluo atual de sua tela : < script language="JavaScript"> document.writeln(screen.width + " x " + screen.height) < /script> Se desejarmos, podemos fazer diferentes coisas dependendo da definio de tela do usurio, por exemplo, com uma estrutura if: Consideramos sua tela: < script language="JavaScript"> if (screen.width<1024) document.write ("Pequena") else if (screen.width<1280) document.write ("Media") else document.write ("Grande") < /script> Este cdigo 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). Porm, poderamos ter feito outras cosas diferentes dependendo da resoluo detectada. Os exemplos deste artigo pode-se ver em uma pgina 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 27/2/08 Valorize este artigo: 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 endereo ao

que nos dirigir o navegador se clicamos. Porm, por muito til que resulte aos navegantes, s vezes os webmaster por umas razes ou por outras preferem que no 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 deciso de eliminar a URL que aparece na barra de estado ao se colocar em cima de um link uma m idia desde o ponto de vista da usabilidade. Todos ns utilizamos essa informao para ter uma referncia e elimin-la pode ser incmodo para o visitante.

Temos duas maneiras de esconder o texto da barra de estado. A primeira seria modificando a etiqueta do link, porm teramos que fazer link a link para todos os que se deseje. Tambm mostraremos um modo de fazer isso para todos os links da pgina 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 aes 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 no se realize nenhuma ao adicional por este evento. onmouseout, para definir aes 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 pgina. Como dizamos, 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 pgina a parte. Nota:Na configurao pr-determinada de Firefox no se permite alterar o texto da barra de estado, por isso este script no mudar esse texto. Porm, como temos o "return true" no manejador do evento, pelo

menos evitar que se veja a URL do link.

Ocultar o texto da barra de estado para todos os links Agora vejamos outro mtodo de fazer isto, de uma s vez para todos os links que tiver na pgina. Simplesmente vamos fazer um cdigo 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 cdigo se executar a cada pouco para apag-lo. Vejamos a seguinte instruo Javascript: setInterval ("window.status = ''",10); Isto uma chamada ao mtodo de window setInterval(), que serve para executar um cdigo Javascript indefinidamente em intervalos definidos. O primeiro parmetro a instruo que vai executar window.status = '', que serve para apagar o texto da barra de estado. O seguinte parmetro so os milsimos de segundos que tm que transcorrer entre execues da instruo, neste caso 10 milsimos de segundos. Se colocamos esta instruo em um script em qualquer parte da pgina, preferivelmente no cabealho, faremos que desaparea o escrito na barra de estado em questo de instantes. < script language="JavaScript"> setInterval ("window.status = ''",10); < /script> Pode-se ver em funcionamento o script aqui. Nota: Na configurao padro de Firefox no se permite mudar o texto da barra de estado, por isso este script parecer ter nenhum efeito.

Para encontrar mais informao sobre como mudar esta configurao de Firefox consultando a FAQ: Por que no se muda o texto da barra de estado em Firefox com Javascript? Concluso Embora o texto da barra de estado seja til, talvez prefiramos que no aparea, ou que se mostre uma mensagem personalizada. Espero que estas duas solues sejam teis para esses casos.

Como integrar contedo RSS em minha pgina? Um cdigo muito simples para poder ter contedo RSS em sua pgina web. Por Csar Pietri

Publicado em: 05/3/08 Valorize este artigo: Um dos benefcios que o uso de RSS nos pode oferecer o poder integrar o contedo de Feeds dentro de nossas pginas o qual nos traz informao atualizada para manter nossas pginas ao dia com o qual sempre manteremos aos nossos visitantes com informao renovada e sem a necessidade de nos dedicar a manter o site, pois para a elaborao deste processo h vrias opes no mercado as quais podemos desenvolver ns mesmos, compr-las ou inclusive conseguir cdigo reutilizvel que se consegue pela rede e GRTIS. Comentarei esta oportunidade pois consegui em uma pgina um leitor de RSS feeds gratuito e to simples como copiar 2 linhas de um Javascript e integr-lo em seu cdigo e logo coloca a pgina de onde vai tomar a informao e pronto, j tem contedo atualizado em sua pgina, timo no ? Anexo aqui as linhas que devem ser includas em seu site, o leitor est desenvolvido em php. Coloquem estas linhas de cdigo: < 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 cdigo javascript <script language="JavaScript" type="text/JavaScript" o endereo de onde tira o leitor de feeds src="http://arupbhanja.com/rssfeed.php? O endereos do feeds file=http://construcanarias.bitacoras.com/rss1.xml Quantidade mxima de tpicos a mostrar, neste caso so 10, mas se pode modificar &max=10"></script>

Recomendo que tambm visitem Feeddigest (em ingls).

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 espao disponvel na janela do navegador. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 15/3/08 Valorize este artigo: Tenho uma pgina que tem um iframe e quero que ocupe o espao mximo disponvel, porm no disponho de toda a pgina, porque h outros contedos na pgina. Ademais, como s vezes a janela do navegador maior ou menor, o espao que posso atribuir ao iframe diferente. Neste workshop de Javascript vamos realizar um clculo do espao disponvel na pgina para que um iframe que temos dentro ocupe a maior rea possvel. Tudo tendo em conta que cada usurio pode entrar com uma definio de tela distinta e com um navegador distinto. Nota: Lembramos que um iframe um frame que se pode inserir no corpo de uma pgina, atribuindo uma altura e uma largura. Primeiramente, gostaria que se entendesse bem o problema com o qual me encontro, ao no saber que rea h disponvel na pgina para cada usurio que nos visita. Vejamos esta imagem, que nos pode esclarecer rapidamente o caso no qual nos encontramos.

Imaginemos uma definio de 800 x 600. Ento, o espao para o iframe ser o tamanho til onde se visualiza a pgina, menos o espao reservado para o cabealho. Agora, por exemplo, em uma definio de 1280 x 768, como o espao til para a pgina maior, o espao no qual quero que se veja meu

iframe tambm ser maior. Continua sendo o tamanho til onde se visualiza a pgina, menos o espao reservado para o cabealho, porm como agora o espao til maior, o iframe tambm tem que se apresentar com maior tamanho. A soluo passa por utilizar um Javascript para calcular o espao til da pgina e diminuir o espao do cabealho. Ento, teremos a dimenso altura que tem que ter o iframe. Para calcular este dado temos que ter em conta que Internet Explorer e Firefox tm modos distintos. Ou seja, a propriedade espao til da pgina distinta nestes dois browsers, por isso o script pode complicar um pouco. Em Internet Explorer: o espao til se calcula com a propriedade document.body.clientHeight. Em Mozilla Firefox: o espao 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 tm a propriedade window.innerHeight O segundo if para IExplorer que conhece document.body.clientHeight. Nos dois casos temos que diminuir 110, que o espao que ocupa o cabealho. O ltimo if no caso de que o javascript no entenda nenhuma das duas propriedades, para lhe dar um valor padro. Logo, escreveramos 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 no entenderem Javascript, ou estiverem desabilitado? Nesse caso nos convm utilizar a etiqueta noscript, para mostrar um iframe com os valores por padro (noscript s se tem em conte se no houver suporte para javascript): < noscript> < iframe frameborder="0" src="minhapagina.html" width="770" height=478> < /iframe> < /noscript> O cdigo 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 nmeros?

A utilizao do parseInt para validar nmeros em muitos casos no a soluo mais efetiva, devido a que permite a presena de letras e/ou espaos, e o resultado poderia no ser o esperado. Por Jos Antonio Jimnez Garelli

Publicado em: 31/3/08 Valorize este artigo: A utilizao do parseInt para validar nmeros em muitos casos no costuma ser a soluo mais efetiva, devido a que permite a presena de letras e/ou espaos, e o resultado poderia no ser o esperado. Por que parseInt pode causar problemas? Esta pergunta se responde a si mesma vendo vrios exemplos sobre o funcionamento de parseInt:

"123456": este String retorna como resultado o nmero 123456 o qual o resultado esperado. "123456asd": este String retorna como resultado o nmero 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 contm vrios espaos no incio do nmero e letras no final) retorna como resultado o nmero 123456 (vantagem ou desvantagem?). " 123 123 asd" este String (que contm espaos e letras) retorna como resultado o nmero 123 (vantagem ou desvantagem?).

Como se pode observar, parseInt apresenta o seguinte comportamento: 1. Retornar um nmero vlido si: O String comea por um nmero. 2. O String comea por espao(s) seguido de um nmero. o Exemplos de nmeros vlidos: "123456" o " 123456" o "12345asdasd" o " 12345 asdd" 3. Todo String que cumpra com as 2 regas anteriores (ser um nmero vlido), ser truncado: quando se encontre uma letra, espao ou caracteres especiais (vrgulas, acentos,...) dentro do String. Como resultado, retornar os dgitos que estejam mais esquerda da primeira letra (espao ou caractere) encontrada. o Exemplos de nmeros vlidos truncados: "123456" retorna como resultado 123456

o o o

" 123456" retorna como resultado 123456 "12345asdasd" retorna como resultado 12345 " 123.. asdd" retorna como resultado 123

Uma alternativa ao parseInt, que valida que os String contenham s nmeros 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 contm pelo menos uma letra //a qual se pode fazer a validao if (c_numero.length == 0) { return "NaN"; } else { //Percorre-se c_numero por todos seus caracteres checando que todos sejam dgitos //a condio >="0" e <="9" baseada no valor ascii que tm os nmeros na tabela ascii. //Se algum dos caracteres no for um nmero a funo retornar um NaN //Seno retornar o Nmero 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 validao de nmeros utilizando a funo ParseInt: Resultado de aplicar a funo:

utilizando a funo validarNumero (chamando funo validar): Resultado de aplicar a funo:

utilizando a funo validarNumero (chamando funo validarComplexo): Resultado de aplicar a funo:

Efeito para desabilitar/habilitar o fundo da Pgina Neste artigo explico como criar um efeito para fazer com que se mostre uma janela emergente e que o fundo da pgina fique desativado. Por Jos Antonio Jimnez Garelli

Publicado em: 16/4/08 Valorize este artigo: Bom, no uma janela emergente como tal, mais como um simulacro, porm que faz s vezes de janela emergente e sem perigo de que o navegador bloqueie tal janela. necessrio ter conhecimentos (pelo menos bsicos) de:

HTML - podem ver a sesso de HTML de CriarWeb clicando Aqui. CSS - podem ver a sesso de CSS de CriarWeb clicando Aqui. JavaScript - podem ver a sesso de JavaScript de CriarWeb clicando Aqui. Para o exemplo deste artigo iremos utilizar imagens transparentes com diferentes nveis de opacidade, pelo qual necessrio que saiba utilizar um editor de imagens (photoshop, firework, ...) para criar as imagens transparentes ao seu gosto. No caso de que no 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 idia mais clara do que vamos fazer. Todo o artigo se baseia na explicao do exemplo. O exemplo foi comprovado no Internet Explorer verso 6 e 7, e no Mozilla FireFox 2, e todos com resultados positivos. Explicao do Exemplo: Finalmente a parte boa deste artigo!!

A grosso modo, o corpo principal (body) do arquivo Html do exemplo, est composto por 3 pargrafos os quais tm a finalidade de encher a pgina, conseguindo assim que se veja carregada de informao. Ao final de cada pargrafo h um link o qual o encarregado de mostrar a janela emergente atravs de cdigo feito em JavaScript . Esta a nica diferena significativa entre os 3 pargrafos (a chamada funo JavaScript). O cdigo do primeiro pargrafo o seguinte: <p> Este o contedo do primeiro pargrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este o contedo do primeiro pargrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este o contedo do primeiro pargrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br> Este o contedo do primeiro pargrafo, 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 pargrafos no cdigo do exemplo, o que ver a seguir so 4 camadas (div) chamadas camadaJanela, camadaFundo1, camadaFundo2 e camadaFundo3. Apliquei a estas camadas cdigo CSS e princpio todas esto ocultas. A camada camadaJanela a mais complexa de todas e porque nela est o cdigo do que chamei "janela emergente". O cdigo mais simples do que parece: Usei uma tabela principal para projetar uma "janelinha de informao" exata s do sistema operacional Windows XP, onde atribui a cada clula uma imagem, e na clula central, fiz outra tabela onde coloquei a mensagem da janelinha e o boto de Aceitar. As outras camadas no tm absolutamente nada. Mais adiante veremos porque. Com isto finalizo o que seria a explicao do corpo do Html. Antes de explicar os cdigos que fiz em JavaScript, importante conjecer a arquitetura da pgina, ou seja, a forma em que diagramei a pgina para conseguir o efeito desejado:

Usando CSS se pode dar um nvel 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 numrico para o atributo z-index, a que se ver mais por cima de todas e as demais ficaro por baixo de acordo com o atributo z-index. Para o exemplo deste artigo, o corpo principal da pgina 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 esto oculta (utiliza-se o atributo visibility com o valor hidden) e a idia 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 fao com que estas camadas tenham o mximo de largura (width) que possam ter e uma altura (heigth) que coloquei a minha convenincia, de modo que cobrem todo o corpo principal. As camadas centrais se diferenciam pelas imagens que nelas se mostram. Todas tm imagens transparente com opacidades de 40%, 50% e 60% e diferentes filtros de transparncia. Ao usar imagens com tendncia (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 pgina. importante destacar, que se colocam uma imagem 100% transparente ser equivalente a no colocar imagem, e o fundo se ver normal. A idia colocar uma imagem que no seja totalmente transparente, de modo que se veja a cor da imagem e conseguir assim que o fundo parea inativo. H 2 funes JavaScript, as quais mostram e ocultam as camadas. O cdigo da funo que mostra as camadas o seguinte: function abrirJanela(janela) { if (janela=="1")

{ document.getElementById("camadaFundo1").style.visibility="visible"; document.getElementById("camadaFundo2").style.visibility="hidden"; document.getElementById("camadaFundo3").style.visibility="hidden"; } else if (janela=="2") { document.getElementById("camadaFundo1").style.visibility="hidden"; document.getElementById("camadaFundo2").style.visibility="visible"; document.getElementById("camadaFundo3").style.visibility="hidden"; } else { document.getElementById("camadaFundo1").style.visibility="hidden"; document.getElementById("camadaFundo2").style.visibility="hidden"; document.getElementById("camadaFundo3").style.visibility="visible"; } document.getElementById("camadaJanela").style.visibility="visible"; document.formulario.bAceitar.focus(); } Esta a funo que se executa cada vez que se clica em qualquer dos 3 links. Ao clicar no link localizado no primeiro pargrafo, este chama funo e lhe passa como parmetro o nmero um (1), o qual indica o nmero do pargrafo. Ao clicar nos outros dois links, se passar como parmetro 2 e 3 de acordo ao pargrafo. Dentro da funo se obtm os estilos de cada camada e se utiliza a propriedade visibility para mostrar ou ocultar segundo seja o caso. Dentro desta funo se d o foco ao boto Aceitar. Uma vez que se mostre a janelinha emergente, esta se pode tirar (ocultar) pressionando sobre o boto Aceitar ou sobre a X. Isto far um chamado funo JavaScript respectiva: function fecharJanela() { document.getElementById("camadaFundo1").style.visibility="hidden"; document.getElementById("camadaFundo2").style.visibility="hidden"; document.getElementById("camadaFundo3").style.visibility="hidden"; document.getElementById("camadaJanela").style.visibility="hidden"; document.formulario.bAceitar.blur(); } Esta funo se explica por si mesma. Oculta todas as camadas e tira o foco ao boto Aceitar da janelinha. Com isto finalizo a explicao do artigo. Espero que

lhe sirva e possa aplic-lo em suas criaes. Pode-se ver o resultado final deste script em uma pgina parte.

Validar nmero de checkbox marcados com Javascript Um script em Javascript para validar campos de verificao de formulrios, para se assegurar que foi marcado um nmero mximo de checkbox. Por Javier Bernal Lrida

Publicado em: 24/4/08 Valorize este artigo: Deixarei aqui umas linhas de minha prpria criao de um script Javascript que tive que fazer para comprovar o estado de elementos checkbox ou campos de verificao de formulrios. Trata-se de utilizar os tpicos campos de verificao, porm com um limitador de grupo. Pode-se utilizar em loterias de vrios resultados, nos futuros testes das auto-escolas com a possibilidade de marcar vrias respostas, etc. Temos uma srie de grupos de checkbox e o que queremos fazer nos assegurar que em cada grupo, de maneira independente, no se tenha marcado mais de um nmero definido de campos. Por exemplo, temos x grupos de 3 campos de verificao cada um. Se o usurio marca um campo de checkbox de um dos grupos no h problema algum. Se marca 2 campos tampouco h problemas, mas se tenta marcar os trs checkbox do grupo Javascript no o permite e mostra uma mensagem de erro. Podemos ver o exemplo em funcionamento para termos uma idia mais concreta. Formulrio HTML Vamos ter um formulrio com, neste caso, dois grupos de campos de verificao.

< table width="76"> <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox1,0)' name='checkbox1' value='checkbox1'></td> <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox2,0)' name='checkbox2'

value='checkbox2'></td> <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox3,0)' name='checkbox3' value='checkbox3'></td> < tr> <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox4,1)' name='checkbox4' value='checkbox4'></td> <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox5,1)' name='checkbox5' value='checkbox5'></td> <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox6,1)' name='checkbox6' value='checkbox6'></td> < /tr> </table> < /form> Como podemos ver, o nome de cada campo distinto. E ademais temos uma funo que se executa quando se clica sobre o checkbox (evento onclick), que ser a encarregada de realizar a verificao. Funo para verificar checkbox por grupos Vejamos o cdigo Javascript que utilizamos para realizar a comprovao de que vrios checkbox no possam estar clicados ao mesmo tempo no mesmo grupo. Primeiro, definimos um par de variveis globais, que utilizaremos para definir os campos mximos que podem estar marcados ao mesmo tempo, e outra para levar a conta dos campos que h marcados em cada grupo. //Nmero mximo de campos marcados por cada fila var maxi=2; //O contador um array de forma que cada posio do array uma linha do formulrio var contador=new Array(0,0); Agora a funo que realizar a conta de campos e informar de uma possvel falha na comprovao, 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, ento aumento em um o contador do grupo contador[grupo]++; //comprovo se o contador chegou ao mximo permitido if (contador[grupo]>maxi) { //se tiver chegado ao mximo, mostro mensagem de erro alert('No se pode escolher mais de '+maxi+' campos ao mesmo tempo.'); //desmarco o campo, porque no se pode permitir marcar check.checked=false; //diminuo uma unidade ao contador de grupo, porque desmarquei um campo contador[grupo]--; } }else { //se o campo no estiver marcado, diminuo um ao contador de grupo contador[grupo]--; } } A funo recebe dois parmetros. Primeiro, o campo de formulrio checkbox que se clicou. Logo, o nmero de grupo ao que pertence esse checkbox. Necessita-se o checkbox para conhecer seu estado e para mud-lo caso seja necessrio. O grupo o utiliza para saber a que contador deve se referir, para saber o nmero de campos que h clicados nesse grupo. A funo est comentada para facilitar sua leitura e compreenso. O exemplo em funcionamento pode-se executar em uma janela parte.

Evitar que um textarea supere um nmero de caracteres permitidos Fazemos um script Javascript para controlar que um textarea de um formulrio 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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 04/5/08 Valorize este artigo: 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

se faz com Javascript, dinamicamente no lado do cliente, de modo que quando o usurio chega longitude permitida, no se permite escrever mais contedo no campo textarea. Vejamos o exemplo em funcionamento para termos uma idia exata do objetivo deste artigo. O exemplo simples. Simplesmente vamos definir um nmero de caracteres permitidos. Com cada letra que escreva o usurio vamos comprovar se a quantidade de caracteres que h no textarea permitida.

Se for permitida, no fazemos nada. Se no for permitida, caso estivermos passando o nmero de caracteres que pode conter o textarea, no se deixa escrever mais no campo do formulrio. Isso o conseguiremos colocando o texto que havia antes que se escrevesse esse caractere no permitido.

Adicionalmente, vamos levar a conta dos caracteres escritos em um campo de texto, para que o usurio 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 exerccio est realizado a partir de outro exerccio que publicamos anteriormente em CriarWeb.com, que seria bom ler: Contar caracteres escritos em um textarea O exerccio tem duas partes, o script Javascript e o formulrio HTML. Comecemos vendo o formulrio:

< 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> No tem nenhuma complicao. Porm, h que prestar ateno aos eventos

do textarea, que so onKeyDown e onKeyUp, que se desatam quando o usurio aperta ou solta teclas do teclado. Em ambos eventos se chama funo 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 variveis: conteudo_textarea = "" num_caracteres_permitidos = 10 A varivel contedo_textarea armazena o contedo do campo textarea. princpio est iniciada cadeia vazia, porque o textarea supomos que est vazio. Temos tambm uma varivel num_caracteres_permitidos, que armazena o nmero de caracteres que se permite escrever no textarea. Neste caso o

definimos como 10. Agora colocamos a funo valida_longitud(). O primeiro que fazemos averiguar a quantidade de caracteres escritos, e o armazenamos na varivel num_caracteres. num_caracteres = document.forms[0].texto.value.length Logo fazemos a parte mais importante deste script: Vemos se os caracteres escritos so menores ou iguais que os permitidos, para agir em conseqncia. 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 so menores ou iguais que os caracteres permitidos, ento est tudo bem. O que fazemos atualizar a varivel que mantm o contedo 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 situao que no se pode aprovar. Ento, simplesmente escrevemos no textarea o que h na varivel conteudo_textarea, que era o que havia antes e que estava validado em longitude corretamente. Isso tudo, simples! Porm, agora vamos fazer uma pequena melhora para que quando o textarea chegue longitude mxima 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 nmero de caracteres maior ou igual que os permitidos. Ento, sendo assim, se atualiza a propriedade style.color do campo de texto "caracteres", que mostra o nmero 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 contrrio, se colocaria cor preta.

Por ltimo, fazemos uma chamada funo conta(), que j havamos criado no artigo anterior: function conta(){ document.forms[0].caracteres.value=document.forms[0].texto.value.length } Esta funo simplesmente atualiza o campo de texto, colocando o nmero de caracteres escritos no textarea. Podemos ver de novo o exemplo em funcionamento.

Javascript no intrusivo Behaviour, uma imprescindvel biblioteca que nos permite programar com javascript de maneira mais simples. Por Alex Sancho

Publicado em: 14/5/08 Valorize este artigo: Uma das premissas mais importantes pensadas ao desenhar mediante o uso de padres a separao de camadas lgicas, 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. Porm, 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 separao 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 cdigo para poder se realizar.

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, no ? Bom, talvez no seja to seja to simples, porm graas 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 funo document.getElementsBySelector escrita por Simon Willison. Este fantstico "pedao de cdigo" nos permite esquecermos de programar complexas funes que atribuem eventos segundo classe, id ou selector. Continuando com o exemplo anterior, se incluirmos esta biblioteca podemos conseguir o mesmo efeito atribuindo a funo 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') } }

}; Behaviour.register(myrules); < /script> Pessoalmente, acho que uma biblioteca de imensa utilidade, agora s falta ver como poder tirar proveito dela da melhor forma possvel.

Controle de introduo de caracteres de um campo de texto com Javascript Podemos impedir com Javascript que os caracteres que o usurio tecle em um campo de texto de um formulrio apaream. Por Ismael Zori

Publicado em: 26/5/08 Valorize este artigo: Isto pode ser til para campos que s admite nmeros ou letras. Por exemplo, vamos fazer que em um campo de texto de um formulrio s se permitam colocar nmeros decimais do tipo 9999.99: Precisamos de uma funo 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:

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) { window.event.keyCode = 0; return false; } /* S pode teclar o nmero 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)) { window.event.keyCode = 0; return false; } } return true; } Teremos uma pgina com o formulrio e a caixa de texto. Teremos que chamar funo "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. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 05/6/08 Valorize este artigo: Estou fazendo uma pesquisa sobre Frameworks Javascript e Ajax para escolher um deles e utiliz-lo em nossos projetos. princpio vi que na web h uma infinidade de opes, algumas com muito boa pinta. Parece que o mundo dos framework para Javascript est se popularizando muito, a julgar pelas numerosas opes. Ns at agora para fazer Javascript Cross-browser (compatvel 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. Porm claro, com um Framework de Javascript talvez "matamos dois coelhos com uma cajadada s" e nos facilita muito a criao de interfaces de usurio avanadas em Javascript, necessrias para fazer projetos da web 2.0. Para comear estou fazendo uma listagem das diferentes opes que encontrei. Logo, pesquisarei mais a fundo os framework que vi que esto tendo mais aceitao pela comunidade de desenvolvedores e os provarei. Ento, escreverei artigos mais tcnicos e didticos. Ento, para no 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 no, para que se carreguem os scripts mais rpido 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 aceitao, por estar muito bem documentado e por ser muito simples e permitir desenvolver com um cdigo limpo e elegante. O peso das bibliotecas razovel e alem disso tem muitos fs incondicionais, com o qual no cabe dvida que ser um bom projeto. http://jquery.com/ Prototype: "O framework javascript cujo propsito facilitar o desenvolvimento de aplicaes dinmicas" Este framework tambm muito interessante, pois h muitos usurios que o utilizam habitualmente e com xito. Parece uma opo altamente profissional e ademais tem a garantia que o utilizam para a criao de suas webs empresas muito conhecidas a nvel mundial. Para mim oferece muitas garantias, porm h certos detratores que acusam a este framework de ser muito pesado e de tornar os web sites lentos onde se utiliza.

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 opinio, porm parece que h muitas pessoas que tambm o acusam de ser um pouco pesado. http://developer.yahoo.com/yui/ Dojo: "Experincias grandes para todos" Parece um produto tambm bastante atraente e uma opo sria. No obstante, li opinies discordantes sobre ele. Alguns no duvidam em qualificlo 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-propsito, opensource com dois tipos de licena. Li poucas opinies sobre este software, porm parece digno de considerar. http://qooxdoo.org/ GWT Google Web Toolkit: "Constri aplicaes Ajax em linguagem Java" um conjunto framework opensource desenvolvido em Java, com o qual se criaram aplicaes populares de Google, como Google Maps ou Gmail. Sem dvida, ao se tratar de um produto de Google, no cabe dvida que uma opo a considerar seriamente. Tem um compilador que converte as classes Java em cdigo Javascript e HTML compatvel com todos os navegadores. http://code.google.com/webtoolkit/ Rico: "Javascript para aplicaes de Internet de contedo enriquecido" Outra das opes mais conhecidas para desenvolver aplicaes para a web 2.0. open source e j se encontra na verso 2.0, com o qual se supe 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: "Documentao, desenho e cdigo limpo" Este framework Javascript parece ser outra das opes srias. Distribui-se sob licena Open Source (grtis) e licena comercial (paga, mas com suporte e alguma funcionalidade adicional). Empresas bastante importantes o utilizam, como Adobe. Chama a ateno por ter suporte para Adobe Air. http://extjs.com/ Ainda faltam mais opes, porm vou deix-las listadas sem muitos comentrios, porque tampouco investiguei muito e no as vi em nenhum lugar comentadas como opes de primeira linha.

The Foo Framework (um framework baseado em Prototype): http://foo.riiv.net/ script.aculo.us (tambm 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 comear a trabalhar para aprender a manejar os Frameworks e tirar concluses mais srias. Espero que em breve possamos publicar mais sobre o tema.

Script para deteco de suporte a Ajax, Cookies e ActiveX Uns scripts do lado do cliente para saber se seu navegador compatvel com Ajax, Cookies e ActiveX. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 16/6/08 Valorize este artigo: O site de Xajax Project publicou uns scripts interessantes para poder detectar se um navegador compatvel com a tecnologia Ajax, para estar seguros que a web que estamos desenvolvendo poder mostrar corretamente em qualquer cliente web que tenha o usurio. Ademais, estes scripts servem para mostrar mensagens de erro se o navegador no tem suporte a Ajax, de modo que o usurio seja consciente que no vai poder ver essa web convenientemente. Estes scripts detectam as capacidades do navegador e se podem executar para mostrar mensagens de alerta se no esto disponveis certas funcionalidades, j seja porque o navegador do usurio no as suporte ou porque estejam desabilitadas. O script contm trs funes: browserSupportsCookies() Detecta se o navegador suporta cookies e devolve true no caso de que estejam suportadas e false se no for assim. browserSupportsAjax() Comprova se o navegador tem compatibilidade com a tecnologia Ajax, devolve true se for assim e false se no suporta Ajax por qualquer questo. ActiveXEnabledOrUnnecessary() Esta funo detecta se o navegador suporta ActiveX ou ento se ActiveX

desnecessrio para a execuo de Ajax. No navegador Internet Explorer 6 Ajax se executa atravs de ActiveX, por isso necessita dispor ActiveX para que tudo funcione. Portanto, esta funo devolver false s se o navegador for Internet Explorer 6 e tiver desabilitado ActiveX. No escreverei as funes no texto deste artigo, simplesmente vou colocar um link ao lugar onde se mostram as funes na pgina de Xajax Project: http://xajaxproject.org/wiki/Xajax_%28any%29:_Tips_and_Tricks:_Detecting_S upport Porm, tambm deixarei um link a uma pgina em CriarWeb.com onde implementamos estes scripts, para que se possa ver em funcionamento em seus navegadores. Ainda assim, pode-se ver o cdigo fonte da pgina para ver a implementao dos scripts que fizemos em CriarWeb.com e obter o cdigo das funes no caso que mudem a URL na pgina de Xajax.

Leitor RSS com Javascript Como ler mediante Javascript um feed RSS para publicar os ttulos em seu site. Leitor RSS Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 27/6/08 Valorize este artigo: Estive pesquisando em diferentes sites a maneira de criar sistema em Javascript que leia RSS de outras webs, para publicar os ttulos em uma pgina. Finalmente, encontrei um script leitor de RSS que irei comentar neste artigo. O sistema permite ler uma folha XML que contm um feed RSS e escreve as entradas do RSS na pgina. No contedo da pgina no 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 informaes. O script se encontra publicado na pgina 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. No obstante, recomendo entrar na pgina onde foi obtido, no caso de que publiquem verses novas.

Condicionantes para o uso do leitor RSS com Javascript Antes de continuar explicando o funcionamento h que dizer que existe uma restrio de uso deste script, que importante porque em Firefox no funcionar. Trata-se de que Firefox, como medida de segurana, no permite ler o contedo de outras webs. Como o RSS com os ttulos se pegam de outras, pois em Firefox teremos problemas, porque no ir permitir sua leitura e a apresentao dos ttulos na pgina. Este problema o Internet Explorer no tem, porm mesmo assim teremos que buscar outras solues. A soluo 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 operao manual cada vez que quisssemos que os ttulos se atualizassem e isso pode significar perder uma das vantagens de apresentar titulares RSS de outras webs, que dispor sempre de contedo 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 soluo seria criar um script em programao do lado do servidor, como por exemplo PHP, ASP ou .NET que realize a tarefa de baixar o RSS com os ttulos e o copie em nosso servidor. Este script poderia ser executado a cada certo tempo ou cada vez que um usurio acessasse pgina onde se l o RSS remoto para apresentar os ttulos. A desvantagem desta opo que necessitamos que nosso servidor suporte programao de scripts em PHP, ASP ou similares. parte que se fizermos programao do lado do servidor para extrair o feed RSS poderamos diretamente trat-lo para apresentar os dados na pgina, sem a necessidade deste script Javascript. No obstante, cabe assinalar que em CriarWeb.com, nas sees monotemticas 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 cdigo o arquivo RSS do que tem que extrair os ttulos. Do arquivo de download, simplesmente temos que mudar a seguinte linha: ReadRSS('cnn_tech_rss.xml','rssBodyTemplate','rssTitleTemplate'); A funo ReadRSS(), que o leitor RSS, no primeiro parmetro tem o nome do arquivo RSS que deve ler. Ns podemos mud-lo pelo nome do arquivo que

pretendemos mostrar seus ttulos. Poderamos mudar este arquivo pela URL completa do feed RSS do servidor onde o tm publicado. Por exemplo, para ler o RSS com as novidades de FAQ que publicamos em CriarWeb.com a funo se chamaria assim: ReadRSS('http://www.criarweb.com/rss/faq_rss.php','rssBodyTemplate','rssTitle Template'); Em Internet Explorer no h nenhum problema com este uso da funo, simplesmente veremos que os ttulos demoram um pouco mais em se gerar, devido a que tem que conectar com a pgina remota para baixar o RSS. Porm, poderemos comprovar que a funo, quando se executa em Firefox, mostra uma mensagem advertindo o problema e sugerindo que o nosso prprio servidor copie o arquivo remoto para poder funcionar.

Funes para validao alfanumrica de strings em Javascript Uma srie de funes de string para validar se um string tem ou no nmeros e caracteres, maisculas e minsculas. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 14/7/08 Valorize este artigo: Criei uma srie de funes de string para realizar umas comprovaes sobre cadeias de caracteres, que vou utilizar mais adiante em um script mais complexo. Comeo explicando estas funes soltas, que talvez tenham utilidade aos leitores. Tambm com a inteno de apresentar pouco a pouco a complexidade de meu objetivo final. As funes de validao de strings servem para saber se as cadeias tm ou no nmeros, letras, letras maisculas e minsculas. So uma srie de funes bem simples e parecidas entre si, que fazem uso dos mtodos da classe string de Javascript. Estas funes 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 no caracteres desse tipo. Veremos a seguir as diferentes funes: Saber se o string contm caracteres numricos Esta funo recebe um string e devolve 1 se se encontram caracteres

numricos e 0 se no 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 varivel global com os nmeros possveis, do 0 ao 9, que queremos buscar. Utilizaremos essa varivel dentro da funo. A funo faz um percorrido a todos os caracteres do string. Para cada um se comprova se est ou no dentro da varivel nmeros, criada anteriormente. Se estiver, se devolve 1 (como se executa o return, se sai da funo devolvendo o valor 1). Se no estiver, ento se far o percorrido do string, caractere a caractere, at o final. Ento, se termina o loop e se devolve 0. Esta funo pode ser provada com estas sentenas: alert(tem_numeros("ASAS1")); alert(tem_numeros("2asasasas")); alert(tem_numeros("asas2sG")); alert(tem_numeros("a....")); alert(tem_numeros("A22323G2.12")); Podemos ver o exemplo em funcionamento em uma pgina a parte. Saber se um string contm letras Vejamos uma funo muito similar, para saber se um string contm um caractere que seja letra, valendo tanto as maisculas como minsculas. var letras="abcdefghyjklmnopqrstuvwxyz"; function tem_letras(texto){ texto = texto.toLowerCase();

for(i=0; i<texto.length; i++){ if (letras.indexOf(texto.charAt(i),0)!=-1){ return 1; } } return 0; } O algoritmo praticamente o mesmo que a funo 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 parmetro uma das letras do alfabeto. A nica particularidade a chamada ao mtodo toLowerCase(), para converter o texto que se recebe por parmetro a minsculas e que a busca de letras no tenha em conta se so minsculas ou maisculas (j que s buscamos se o string contm letras). Podemos provar o string com estas linhas de cdigo: 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 minsculas Aqui vemos a funo para comprovar se um string tem caracteres em minsculas. muito parecida as que vimos anteriormente. var letras="abcdefghyjklmnopqrstuvwxyz"; function tem_minusculas(texto){ for(i=0; i<texto.length; i++){ if (letras.indexOf(texto.charAt(i),0)!=-1){ return 1; } } return 0; }

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 maisculas Agora veremos a funo para ver se um string tem letras maisculas. igual que a anterior, simplesmente temos uma cadeia com todas as letras em maiscula para buscar no texto recebido por parmetro. var letras_mayusculas="ABCDEFGHYJKLMNOPQRSTUVWXYZ"; function tem_maiusculas(texto){ for(i=0; i<texto.length; i++){ 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 funes no seguinte artigo, no qual vou explicar a criao de um sistema para mostrar a segurana de uma chave, para dizer o quo segura em funo do nmero de caracteres, se tem nmeros e letras, se tem maisculas e minsculas, etc.

Script para informar da segurana de uma senha, com Javascript Queremos informar ao usurio, quando escreve uma senha, sobre o grau de segurana da senha. Para fazer isso, vejamos este simples script Javascript. Por Miguel Angel Alvarez - Traduo de JML

Publicado em: 22/7/08 Valorize este artigo: Veremos um simples script em Javascript para comprovar o grau de segurana de uma senha escrita pelo usurio. Como um script javascript do lado do cliente, permitir mostrar o nvel de segurana da senha ao mesmo tempo que o usurio a escreve em um campo de formulrio. Poderemos utilizar este script livremente em nossas pginas, de modo que ofereamos aos visitantes uma informao sobre o segura ou insegura que a senha que esto 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 vrias funes para comprovar um string e saber se tem letras, nmeros, maisculas e minsculas. Utilizaremos estas funes agora para este script de informao de segurana da senha. Para valorizar o grau de segurana de uma senha vamos ter em conta estas pontuaes sobre diferentes conceitos: Tem letras e nmeros: +30% Tem maisculas e minsculas: +30% Tem entre 4 e 5 caracteres: +10% Tem entre 6 e 8 caracteres: +30% Tem mais de 8 caracteres: +40% Poderamos ter escolhido qualquer outra pontuao para a segurana da senha, porm esta valer. Tambm poderamos ter criado outros critrios para decidir o grau de segurana. De qualquer forma para que fique claro este clculo, ponho um par de exemplos: A) Uma senha com nmeros e letras, com 7 caracteres teria: 30% por letras e nmeros + 30% por ter entre 6 e 8 caracteres = 60% de segurana. B) Outra senha com letras maisculas e minsculas, sem nmeros, e com 8

caracteres: 30% por maisculas e minsculas + 40% por mais de 8 caracteres = 70% de segurana. Para controlar a segurana, apoiando-nos nas funes de validao alfanumrica de strings vistas anteriormente, faremos uma funo 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, nmeros, maisculas, minsculas, assim como sua longitude, para ir atribuindo um maior valor segurana. Exemplo de uso em um formulrio que pede uma senha Agora, vejamos um simples exemplo de uso da funo em um formulrio, que mostra a segurana de uma senha escrita pelo usurio: O formulrio 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 usurio clica uma tecla, porm no momento de solt-la. Essa funo ser a encarregada de fazer com que se visualize a segurana da senha. Ademais, colocamos outro campo de texto, para colocar o valor de segurana da senha. Este campo o foramos a que no se possa escrever nele com o evento onfocus="blur()">. S se poder modificar mediante Javascript. Vejamos a funo mostra_seguranca_senha(), que a que se encarrega de receber tanto a senha escrita como o formulrio onde se encontra, para atualizar o valor de segurana. function mostra_seguranca_senha(senha,formulario){ seguridad=seguranca_senha(senha); formulario.seguranca.value=seguranca + "%"; } Como vemos, se faz uso da funo que devolve a segurana de um string que se utilizar como senha. Logo, se coloca esse valor no campo de texto adicional que h no formulrio. Podemos ver o exemplo em uma pgina a parte.

Editor de texto WYSIWYG Javascript: TinyMCE Editor HTML WYSIWYG, para integrar em formulrios web, baseado em Javascript de Moxiecode Systems AB. Por Gema Maria Molina Prados

Publicado em: 21/5/09 Valorize este artigo: TinyMCE um editor HTML que capaz de converter os textarea de um formulrio em campos WYSIWYG para poder incluir etiquetas HTML dentro dos campos de texto. Caractersticas

fcil de integrar nas pginas web, j que s tem duas linhas de cdigo. Pode-se personalizar atravs de temas e plugins. Tambm se podem instalar pacotes de idiomas. compatvel 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 rpido de carregar. Pode-se utilizar AJAX para salvar e carregar o contedo.

Integrao de TinyMCE Para poder utilizar TinyMCE nas pginas web, o navegador tem que ser compatvel e ter Javascript habilitado. Primeiro h que baixar TinyMCE desde a seguinte pgina de downloads: http://tinymce.moxiecode.com/download.php. Depois h que descompact-lo e salv-lo no servidor da pgina web para poder utiliz-lo nos textarea dos formulrios. Na pgina que for utilizar, primeiro h que incluir a biblioteca tiny_mce.js incluindo o arquivo externo de cdigo 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 editveis. < script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simples" }); < /script> Exemplo de integrao 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>

<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 inclumos a biblioteca tiny_mce.js dentro das etiquetas < head>. Dentro destas etiquetas tambm iniciamos TinyMCE para que no textarea do formulrio se converta em um campo de texto WYSIWYG. Pode-se ver o exemplo em funcionamento no seguinte link.