javascript manual

Upload: ademir-oliveira

Post on 18-Jul-2015

1.500 views

Category:

Documents


0 download

TRANSCRIPT

INTRODUO Javascript uma linguagem de programao utilizada para criar pequenos programinhas encarregados de realizar aes dentro do mbito 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 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 , portanto no as interpretam, tal como fazem com qualquer etiqueta que desconhecem.

Exemplo: 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 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>
< a href=http://netscape.com>Netscape.
< a href=http://microsoft.com>Microsoft. < /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 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 > >>> >>>= >>= >> 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("
O tipo de boleano : " + typeof boleano) document.write("
O tipo de numerico : " + typeof numerico) document.write("
O tipo de numerico_flutuante : " + typeof numerico_flutuante) document.write("
O tipo de texto : " + typeof texto) document.write("
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;iCabealho de nvel 1 < H2>Cabealho de nvel 2 < H3> Cabealho de nvel 3 < H4> Cabealho de nvel 4 < H5> Cabealho de nvel 5 < H6> Cabealho de nvel 6 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 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 anterior ao bloco onde est a chamada.

< HEAD> MINHA PGINA < 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 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("Ola " + nome + "") } 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 . 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(") document.write("Ol " + nome + "") document.write("") } 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 < head> < title>Untitled < 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"> < form name="meuformulario" action="#"> Texto: < /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 xxx < 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"> PASSE POR CIMA < td width="95"> < td width="83"> < /tr> < tr bgcolor="#FFFFFF"> < td width="100"> < td width="95"> < td width="83"> < tr bgcolor="#FFFFFF"> < td width="100"> < td width="95"> < /tr> < /tr> 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 < td width="114" height="17"> < div align="center">PASSE POR CIMA < /td> < td width="99" height="17"> < div align="center">PASSE POR CIMA < /td> < /tr> < tr bgcolor="#FFFFFF"> < td width="108"> < td width="114"> < td width="99"> < tr bgcolor="#FFFFFF"> < td width="108"> < /tr> < /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> < 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 PASSE POR CIMA PASSE POR CIMA

< /td> < /tr> < tr> < td width="108"> < div align="center">PASSE POR CIMA < /td> < td width="114"> < div align="center">PASSE POR CIMA < td width="99"> < div align="center">PASSE POR CIMA < /td> < /tr> < tr> < div align="center">PASSE POR CIMA PASSE POR CIMA PASSE POR CIMA < /table> < /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"> < 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 < td width="114" height="17"> < div align="center">PASSE POR CIMA < td width="99" height="17"> < div align="center">PASSE POR CIMA < /td> < /tr> < tr bgcolor="#FFFFFF"> < td width="108"> < div align="center">PASSE POR CIMA < /td> < td width="114"> < div align="center">PASSE POR CIMA < /td> < td width="99"> < div align="center">PASSE POR CIMA < /td> < /tr> < tr bgcolor="#FFFFFF"> < div align="center">PASSE POR CIMA PASSE POR CIMA PASSE POR CIMA 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> Exemplo para desabilitar radio butons < 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 < 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. < head> Exemplo de frames numero 1 < /head> < frameset rows="50%,*"> < /frameset> < /html> Agora vejamos o cdigo do primeiro dos frames, que o que tem a funo Javascript para controlar os frames. < html> < head> Pagina 1 < 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 < /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> Pagina 1 < /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 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 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_defau