Programao II

1 HTML Formulrios
A linguagem HTML tambm permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botes e passando informaes. Estas famosas caixas de texto e botes que podemos encontrar em muitas pginas web so chamadas de formulrios. So muito utilizados para realizar buscas ou tambm para introduzir dados pessoais, por exemplo, em sites de comrcio eletrnico. Os dados que o usurio introduz nestes campos so enviados ao correio eletrnico do administrador do formulrio ou tambm, em um programa que se encarrega de process-lo automaticamente. Usando HTML podemos unicamente enviar o formulrio a um correio eletrnico. Se quisermos processar o formulrio mediante um programa, a coisa pode ser um pouco mais complexa, j que teremos que empregar outras linguagens mais sofisticadas.

1.1 Construindo formulrios com o FORM

Os formulrios so definidos por meio das tags <form> e </form>. Entre estas duas tags colocaremos todos os campos e botes que compem o formulrio. Dentro desta tag <form> devemos especificar alguns atributos: Action: Define o tipo de ao a realizar com o formulrio. Como j dissemos, existem duas possibilidades: o O formulrio enviado a um endereo de correio eletrnico. Neste caso, o contedo do formulrio enviado ao endereo de correio eletrnico especificado por meio de uma sintaxe deste tipo: <form action=mailto:endereo@correio.com> o O formulrio enviado a um programa ou script que processa seu contedo. Aqui, temos de especificar o endereo do arquivo que contem o tal script. A tag ficaria neste caso da seguinte forma:

<form action=endereo do arquivo/script>

A forma na qual se expressa a localizao do arquivo que contm o scripts a mesma que a vista para os links.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

Method: Este atributo se encarrega de especificar a forma na qual o formulrio enviado. Os dois valores possveis que este atributo pode tomar so post e get. No mtodo get os dados entrados fazem parte do URL associado consulta enviado para o servidor e suporta at 128 caracteres. J no mtodo post, os dados so enviados de forma separada da URL, ou seja, os dados fazem parte do corpo da mensagem enviada para o servidor e transfere grande quantidade de dados. Desta forma, na prtica o mtodo post mais utilizado. Enctype: Utiliza-se para indicar a forma na qual viajar a informao que for mandada pelo formulrio. No caso mais corrente, enviar o formulrio por correio eletrnico, o valor deste atributo deve ser "text/plain". Assim, conseguimos que o contedo do formulrio seja enviado como texto plano dentro do e-mail. Se quisermos que o formulrio se processe automaticamente por um script, geralmente no utilizaremos este atributo, de forma que tome seu valor padro, ou seja, no incluiremos enctype dentro da tag <form>. Exemplo de tag <form> completa: Assim, para o caso mais habitual - o envio do formulrio por correio - a tag de criao do formulrio ter o seguinte aspecto:

<form action=mailto:endereo@correio.com (ou o script do servidor) method=post enctype=text/plain> Entre esta tag e seu fechamento, colocaremos o resto de tags que daro forma ao nosso formulrio, as quais sero vistas nos prximos captulos.

1.2 Componentes do Formulrio

A TAG <INPUT> especifica uma variedade de campos editveis dentro de um formulrio. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botes, janelas de texto, etc.), o nome da varivel associada com o dado da entrada, o alinhamento e o campo do valor mostrado. O atributo mais importante do INPUT o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando voc for receber os dados, j, processados, ir vir o name = resposta dada pelo visitante. O HTML prope uma grande diversidade de alternativas na hora de criar nossos formulrios. Estas vo desde a clssica caixa de texto at a lista de opes passando pelas caixas de validao. Veremos em que consiste cada una destas modalidades e como podemos implement-las em nosso formulrio.

1.2.1 Caixa de Texto

As caixas de texto so colocadas por meio da tag <input>. Dentro desta tag temos de especificar o valor de dois atributos: type e name.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

A tag da seguinte forma: <input type=text name=cpf> Deste modo expressamos nosso desejo de criar uma caixa de texto cujo contedo ser chamado cpf (por exemplo). Ele associa o valor digitado na caixa de entrada com um nome de varivel cpf. Por exemplo, quando voc for receber os dados no servidor, j, processados, ir vir o cpf = valor digitado pelo usurio. O aspecto deste tipo de caixas conhecido, como pode ser visto aqui:

O nome do elemento do formulrio de grande importncia para poder identific-lo em nosso script de processamento ou no e-mail recebido. Da mesma forma, importante indicar o atributo type, j que, como veremos, existem outras modalidades de formulrio que usam esta mesma tag. O emprego destas caixas est fundamentalmente destinado tomada de dados breves: palavras ou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que existe outra forma de tomar textos mais longos a partir de outra tag. Alm destes dois atributos, essenciais para o correto funcionamento de nossa tag, existem outra srie de atributos que podem ser de utilidade, mas que no so imprescindveis: size: Define o tamanho da caixa em nmero de caracteres. Se ao escrever o usurio chega ao final da caixa, o texto ir desfilando medida que se escreve fazendo desaparecer a parte de texto que fica esquerda. maxlength: Indica o tamanho mximo do texto que pode ser tomado pelo formulrio. importante no confund-lo com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de texto, maxlength indica o tamanho mximo real do texto que pode ser escrito. Podemos ter uma caixa de texto com um tamanho aparente (size) que menor do que o tamanho mximo (maxlength). O que ocorrer neste caso que, ao escrever, o texto ir desfilando dentro da caixa at que cheguemos ao seu tamanho mximo definido por maxlength, momento no qual ser impossvel continuar escrevendo. value: Em alguns casos pode ser interessante atribuir um valor definido ao campo em questo. Isto pode ajudar ao usurio a preencher mais rapidamente o formulrio ou a dar alguma idia sobre a natureza de dados que se requerem. Este valor inicial do campo pode ser expresso mediante o atributo value.

Vejamos seu efeito com um exemplo simples:

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

<input type=text name=cpf value=Preencha> Gera um campo deste tipo:

Observao: estamos obrigados a utilizar a tag <form>. Para que fique mais claro este contedo, ressaltamos: Quando queremos utilizar em qualquer situao elementos de formulrio devemos escrev-los sempre entre as tags <form> e </form>. Caso contrrio, os elementos sero vistos perfeitamente no Internet Explorer, mas no nos demais navegadores.

1.2.2 Caixas de Texto Oculto

Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer certa confidencialidade. Este tipo de campo anlogo ao de texto com somente uma diferena: alterando o atributo type="text" por type="password". <input type=password name=senha> Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto sero vistos asteriscos. Estes campos so ideais para a introduo de dados confidenciais, principalmente cdigos de acesso.

1.2.3 Caixa de Texto Longo

Se desejarmos colocar disposio do usurio um campo de texto onde possa escrever comodamente sobre um espao composto de vrias linhas, temos de convocar uma nova tag: <textarea> e seu fechamento correspondente. Estes tipos de campos so prticos quando o contedo a enviar no um nome, telefone ou qualquer outro dado breve, e sim, um comentrio, opinio, etc. Dentro da tag <textarea> deveremos indicar, como para o caso visto anteriormente, o atributo name para associar o contedo a um nome que ser semelhante a uma varivel nos scripts do servidor. Alm disso, podemos definir as dimenses do campo a partir dos seguintes atributos: rows: Define o nmero de linhas do campo de texto. cols: Define o nmero de colunas do campo de texto.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

A tag fica portanto, desta forma: <textarea name=comentario rows=10 cols=40> </textarea>

O resultado o seguinte:

Mesmo assim, possvel definir o contedo do campo. Para isso, no usaremos o atributo value e sim, que escreveremos dentro da etiqueta o contedo que lhe desejamos atribuir. Vejamos: <textarea name=comentario rows=10 cols=40> Escreva seu comentrio </textarea> Ter como resultado:

Efetivamente, os textos so uma maneira muito prtica de solicitar informaes aos usurios. Porm, em muitos casos, os textos so dificilmente manipulados em scripts ou tambm pode ser que seu contedo no se ajuste ao tipo de informao que requeremos. por isso que, em determinados casos, pode ser mais efetivo propor uma escolha ao usurio a partir da exposio de uma srie de opes. Este o caso de, por exemplo, oferecer uma lista de pases, o tipo de carto de crdito para um pagamento, etc. Estes tipos de opes podem ser expressadas de diferentes formas.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

1.2.4 Listas de Opes

As listas de opes so esse tipo de menus desdobrveis que nos permite escolher uma (ou vrias) das mltiplas opes que nos propem. Para constru-las utilizaremos a tag <select> com seu respectivo fechamento. Como para os casos j vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada opo ser includa em uma linha precedida da tag <option>. Podemos ver, a partir destas diretrizes, a forma mais tpica e simples desta etiqueta: <select name=estacao> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </select>

O resultado o seguinte:

Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos: size: Indica o nmero de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de deslocamento. multiple: Permite a seleo de mais vrios elementos da lista. A escolha de mais de um elemento se faz como com o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressa sem valor algum, ou seja, no se utiliza com o igual: simplesmente se coloca para conseguir o efeito, ou no se coloca se quisermos uma lista desdobrvel comum.

Vejamos qual o efeito produzido por estes dois atributos mudando a linha: <select name=estacao> Por: <select name=estacao size=3 multiple>

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

A lista ficar desta forma:

A tag <option> ainda pode ser precisada por meio de outros atributos: selected: Da mesma forma que multiple, este atributo no toma nenhum valor seno que simplesmente indica que a opo que apresenta est escolhida por padro. Assim, se mudamos a linha do cdigo anterior: <option>Outono</option>. Por: <option selected>Outono</option>. O resultado ser:

value: Define o valor da opo que ser enviada ao script ou ao correio eletrnico se o usurio escolhe essa opo. Este atributo pode ser muito til se o formulrio for enviado a um script visto que a cada opo se pode associar um nmero ou letra, o qual torna-se mais facilmente manipulvel que uma palavra ou texto. Poderamos assim escrever linhas do tipo: <option value="1">Primavera</option>. Deste modo, se o usurio escolhe primavera, o que chegar ao script (ou ao correio) uma varivel chamada estacao que ter com valor 1. No correio eletrnico receberamos: estacao=1.

1.2.5 Botes de radio

Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a escolher unicamente uma das opes que lhe propem. A tag empregada neste caso <input> na qual teremos a atributo type que temos de tomar o valor radio. Vejamos um exemplo: <input <br> <input <input <br> <input type="radio" name="estacao" value="1">Primavera type="radio" name="estacao" value="2">Vero <br> type="radio" name="estacao" value="3">Outono type="radio" name="estacao" value="4">Inverno

Observaes: Temos de observar que a tag <input type="radio"> somente coloca o campo para clicar na pgina. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos com o correspondente texto no cdigo da pgina e com as tags HTML que necessitarmos. O resultado o seguinte:

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

Como podemos ver, cada uma das opes se atribui uma tag <input> dentro da qual atribumos o mesmo nome (name) para todas as opes e um valor (value) distinto. Se o usurio escolhe supostamente Outono, receberemos em nosso correio uma linha tal como esta: estao=3. Cabe assinalar que possvel pr-selecionar por padro uma das opes. Isto se pode conseguir por meio do atributo checked: <input type="radio" name="estacao" value="2" checked> Vero. Vejamos o efeito:

1.2.6 Caixas de validao

Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples clique sobre a caixa em questo. A sintaxe utilizada muita parecida com as vistas anteriormente: <input type="checkbox" name="comidas" value="1">Feijoada <br> <input type="checkbox" name="comidas" value="2">Churrasco <br> <input type="checkbox" name="comidas" value="3">Massas O efeito:

A nica diferena fundamental o valor adotado pelo atributo type. Da mesma forma que para os botes de radio, podemos ativar a caixa por meio do atributo checked.

1.2.7 Boto Submit (ou de envio de dados)

Para finalizar o processo de preenchimento do formulrio e faz-lo chegar a seu gestor, o usurio tem de valid-lo por meio de um boto previsto para tal efeito. A construo de tal boto feita com a tag <input> j vista anteriormente:
Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

<input type="submit" name="env" value="Enviar"> Com este cdigo geramos um boto como este:

Como pode ser visto, somente temos de especificar que se trata de um boto de envio (type=submit) e temos de definir a mensagem do boto por meio do atributo value.

1.2.8 Boto Limpar Campos

Este boto nos permitir limpar o formulrio por completo, caso do usurio deseje refaz-lo desde o princpio. Sua estrutura sinttica igual a anterior: <input type="reset" value="Limpar os Campos"> A diferena do boto de envio, indispensvel em qualquer formulrio, o boto de Limpar Campos optativo e no utilizado freqentemente. H de ter cuidado de no coloc-lo muito perto do boto de envio e de distinguir claramente um do outro.

1.2.9 Dados ocultos

Em alguns casos, aparte dos prprios dados enviados pelo usurio, pode ser prtico enviar dados definidos por ns mesmos que ajudem ao script em seu processamento do formulrio. Estes tipos de dados, que no se mostram na pgina, mas que podem ser detectados solicitando o cdigo fonte, no so freqentemente utilizados por pginas construdas em HTML, so mais usados por pginas que empregam scripts de servidor. No se assustem, pois veremos mais adiante o que isto quer dizer. Queremos apenas dar constncia de sua existncia e de seu modo de criao. Como por exemplo: <input type="hidden" name="site" value="www.ifrs.edu.br"> Esta tag, includa dentro de nosso formulrio, enviar um dado adicional ao script encarregado pelo processamento do formulrio. Poderamos a partir deste dado, tornar conhecido ao script a origem do formulrio ou algum tipo de ao a realizar (um re-endereamento, por exemplo).

1.2.10 Botes normais

Dentro dos formulrios tambm podemos colocar botes normais, clicveis como qualquer outro boto. Da mesma forma que ocorre com os campos hidden, estes botes por si s no tm muita utilidade, mas poderemos necessit-los para executar scripts no lado do cliente. Sua sintaxe a seguinte:
Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

<input type="button" value="Validar Dados"> Ficaria desta maneira:

O uso mais frequente de um boto na programao no cliente. Utilizando linguagens como Javascript podemos definir aes a tomar quando um visitante clicar o boto de uma pgina web.

1.3 Exemplo de formulrio

Agora vamos exemplificar a criao de um formulrio que consulta o grau de satisfao dos usurios de uma linha de nibus fictcia. O formulrio est construdo para que envie os dados para um script em um servidor determinado. Abaixo segue o layout final do formulrio:

A seguir segue o cdigo HTML que gera o formulrio:

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

<form action="grava.php" method="post"> Nome <input type="text" name="nome" size="30" maxlength="100"><br> E-mail <input type="text" name="email" size="25" maxlength="100" value="@"><br> Cidade <input type="text" name="cidade" size="20" maxlength="60"><br> Sexo <br> <input type="radio" name="sexo" value="Masculino" checked> Homem <br> <input type="radio" name="sexo" value="Feminino"> Mulher <br> <br> Frequncia das viagens <br> <select name="utilizao"> <option value="1">Vrias vezes por dia <option value="2">Uma vez por dia <option value="3">Vrias vezes por semana <option value="4">vrias vezes por ms </select> <br><br> Comentrios sobre sua satisfao pessoal <br> <textarea cols="30" rows="7" name="comentrios"></textarea> <br><br> <input type="checkbox" name="receber_info" checked> Desejo receber notificao das novidades nas linhas de nibus. <br><br> <input type="submit" value="Enviar formulrio"> <br><br> <input type="Reset" value="Apagar tudo"> </form>

2 Linguagens Scripts
A programao de sites normalmente realizada atravs de linguagens scripts. Estas linguagens so embutidas dentro do HTML. So linguagens que permitem criar sites dinmicos, possibilitando uma interao com o usurio atravs de formulrios, parmetros da URL e links. O que diferencia uma linguagem script de um CGI escrito em C ou Perl que seu cdigo embutido no prprio HTML, enquanto no outro caso necessrio que o script CGI gere todo o cdigo HTML, ou leia de outro arquivo.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

Uma linguagem script pode ser usada no lado do cliente (navegado/browser) ou do servidor, como apresentado a seguir.

2.1 Client Side scripts

So cdigos de programa que so processados pela estao cliente, ou seja, o browser de navegao. Geralmente em aplicaes voltadas Internet, o cdigo que executado no cliente cuida apenas de pequenas consistncias de telas e validaes de entrada de dados. Em se tratando de pginas web, os client-side scripts tero de ser processados por um browser. O maior problema de se utilizar este tipo de artifcio em uma aplicao a incompatibilidade de interpretao da linguagem entre os browsers. O Microsoft Internet Explorer, por exemplo, capaz de interpretar o Visual Basic Script, porm o Firefox no o faz sem o auxlio de um plug-in (que foi desenvolvido por terceiros). H ainda o problema de verses muito antigas de navegadores, que no conseguem interpretar nenhum script. Em grande parte das situaes, no possvel exigir que o usurio final disponha de determinado produto para acessar a aplicao. Portanto importante pesar todos estes fatores ao planejar alguma aplicao com client-side scripts. A linguagem script mais indicada para se construir client-side scripts a JavaScript, devido a sua compatibilidade com todos os browsers.

2.2 Server Side scripts

So cdigos de programa que so processados no servidor. Devido a este fato, no necessrio preocupar-se com a linguagem que o cdigo foi criado: o servidor quem se encarrega de interpret-lo e de devolver uma resposta para o cliente. As principais linguagens usadas aqui so JSP, PHP e ASP. Nestas pginas desenvolvidas atravs destas linguagens, so esses cdigos os maiores responsveis pelos resultados apresentados.

3 Javascript
Javascript uma linguagem de programao utilizada para criar pequenos programinhas encarregados de realizar aes dentro 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 executlas 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 uma linguagem de programao bastante simples para fazer as coisas com rapidez. 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.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

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, tabelas de clculo e cadastros dinmicos. importante deixar claro que Javascript no tem nada a ver com Java, salvo em suas origens. Atualmente, so produtos totalmente distintos e guardam entre si somente uma pequena relao sinttica. 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, pois so interpretados por parte do navegador quando este l a pgina. Orientado a objetos: Java uma linguagem de programao orientada a objetos. Javascript no orientado a objetos, isto quer dizer que poderemos programar sem necessidade de criar classes. Propsito: Java muito mais potente que Javascript, pois Java uma linguagem de propsito geral, que se pode fazer aplicaes dos mais variados tipos. 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 vez, Javascript no tem esta caracterstica, e podemos colocar em uma varivel a informao que desejarmos, independentemente do tipo desta. 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 distingui-los facilmente.

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.

3.1 Comeando a Programar com Javascript

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, temos que incluir alguns delimitadores que separam as tags HTML das instrues Javascript. Estes delimitadores so as tags <SCRIPT> e </SCRIPT>. Todo o cdigo Javascript deve ser introduzido entre estas duas tags. Alm disso, na tag <SCRIPT> deve ser informado o atributo language, que define a linguagem na qual foi escrito o algoritmo. Neste caso a tag fica: <script language=javascript>.
Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

Em uma mesma pgina podemos introduzir vrios scripts. Cada um dos scripts deve ficar dentro de tags <SCRIPT> distintas. A colocao destes scripts indiferente, mas para melhor organizao do cdigo devemos coloc-los dentro das tags <head> e </head>. Tambm se pode escrever Javascript dentro de determinados atributos das tags HTML, como o atributo onclick. Estes atributos esto relacionados com as aes do usurio e so chamados de manipuladores de eventos. 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.

3.1.1 Execuo direta

o mtodo mais bsico de executar scripts. Neste caso se incluem as instrues dentro da tag <SCRIPT>. Abaixo segue exemplo de um script em uma pgina HTML. <html> <head> <title>Exemplo</title> <script language=Javascript> <!-- Escrever o algoritmo Javascript aqui. // --> </script> </head> <body> <h1>Exemplo de Javascript</h1> </body> </html>

3.1.2 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 tag que queremos que responda s aes do usurio. Por exemplo, se quisssemos que um boto realizasse alguma ao ao ser clicado, devamos indic-la dentro do atributo onclick da tag <input>, como mostra o exemplo abaixo.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

<input type="button" value="Validar Dados" onclick="Escrever o algoritmo javascript aqui.">

3.2 Sintaxe Javascript

A linguagem Javascript tem uma sintaxe muito parecida com a linguagem Java, como veremos a seguir.

3.2.1 Comentrios
Um comentrio uma parte de cdigo que no interpretada pelo navegador e tem como utilidade facilitar a leitura do 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. Existem dois tipos de comentrios na linguagem. Um deles, a barra dupla, serve para comentar uma nica linha de cdigo. O outro comentrio usado para comentar vrias linhas e se indica com os caracteres /* para comear o comentrio e */ para termin-lo. Vejamos uns exemplos. <script language=javascript> // Este um comentrio de uma linha. /* Este comentrio pode se expandir por vrias linhas. Quantas o programador quiser. */ </script>

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

3.2.3 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 ponto e 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

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

utiliz-las e estaremos nos acostumando a realizar uma sintaxe mais parecida habitual em torno de programaes avanadas.

3.2.4 Declarao de variveis

Declarar variveis consiste em 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. Assim, Javascript no obriga a declarao de variveis, ao contrrio do que acontece na maioria das linguagens de programao. De qualquer forma, aconselhvel declarar as variveis. Para isso Javascript conta com a palavra var. Usa-se essa palavra para definir a varivel antes de utiliz-la. var operando1; var operando2; Tambm pode-se atribuir um valor varivel quando se est declarando. var operando1 = 23; var operando2 = 33; Tambm se permite declarar vrias variveis na mesma linha, sempre que se separem por vrgulas. var operando1, operando2; 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 ("), para iniciar e terminar a cadeia de caracteres. Boleanos: Tambm contamos com o tipo booleano, que salva uma informao que pode valer como sim (true) ou no (false). Objetos: Por ltimo nossas variveis podem conter coisas mais complexas, como um objeto, uma funo, ou vazio (null), mas j o vermos mais adiante.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

Na linguagem Javascript no precisamos especificar nenhum tipo de dados para uma varivel. Podemos introduzir qualquer informao em uma varivel de qualquer tipo, inclusive podemos ir mudando o contedo de uma varivel de um tipo para outro. Vamos ver isto com um exemplo. var cidade = Salvador; var revisado = true; 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.

3.2.5 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 fatura = preo * unidades; // multiplicao resto = fatura % 3; //obtenho o resto da diviso por 3 preo++; //incrementa em uma unidade o preo (agora vale 129)

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

3.2.6 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. = 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: poupanca = 7000; // atribui 7000 a varivel poupanca. poupanca += 3500; // soma 3500 a varivel poupanca, que passa para 10500. Poupana /= 2; // divide por dois o valor de poupana, agora ficam 5250.

3.2.7 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 prdefinidas na linguagem. + Concatena duas cadeias de caracteres. Exemplo: cadeia1 = cadeia2 = cadeia3 = vale ola ola; mundo; cadeia1 + cadeia2; // cadeia concatenada mundo.

Um detalhe importante que pode ser visto neste caso, que o operador + serve para dois usos distintos: se seus operandos so nmeros, os soma; se os operandos so cadeias de caracteres, as concatena. Isto ocorre em geral com todos os operadores que se repetem na linguagem.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

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 concatenao 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 + minhaCadeia1; // 23pedro resultado2 = meuNumero + minhaCadeia2; // 23456 minhaCadeia2 += meuNumero; // 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.

3.2.8 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 booleanos, que conhecemos anteriormente, que so o verdadeiro (true) e o falso (false). Os operadores lgicos relacionam os operandos booleanos para dar como resultado outro operando booleano, tal como podemos ver no seguinte exemplo. Se tenho fome e tenho comida, ento irei comer. Nosso programa Javascript utilizaria neste exemplo um operando booleano 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 E, se so os dois verdadeiros vale verdadeiro. || Operador OU, vale verdadeiro se pelo menos um deles for verdadeiro.

Exemplo : meuBooleano = true; meuBooelano = !meuBooelano; // false tenhoFome = true; tenhoComida = true; comoComida = tenhoFome && tenhoComida; // true

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br

3.2.9 Operadores condicionais

Servem para calcular expresses condicionais mais complexas. Estas expresses so usadas para tomar decises em funo da comparao de vrios elementos, por exemplo, se um nmero maior que outro ou se so iguais. 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 operando for maior que o segundo. < Menor que, true quando o primeiro operando for menor que o segund. >= Maior igual. <= Menor igual.

Av. Joo Antnio da Silveira, 351 Restinga Porto Alegre RS Autoria Web Professor: Gleison S. do Nascimento Email: gleison.nascimento@restinga.ifrs.edu.br