Javascript

_____________________________________________________________________ ___
1 INTRODUO.........................................................................................................................3

2 JAVASCRIPT............................................................................................................................3 2.1 O QUE JAVASCRIPT...........................................................................................................................3 2.1.1 CARACTERSTICAS BSICAS.................................................................................................................3 2.1.2 O QUE JAVASCRIPT NO ...................................................................................................................4 2.1.3 PARTICULARIDADES E LIMITAES......................................................................................................5 2.2 ELEMENTO SCRIPT........................................................................................................................5 2.3 EVENTOS EM JAVASCRIPT.....................................................................................................................8 2.4 MANIPULADORES DE EVENTOS..............................................................................................................8 2.4.1 ONLOAD..........................................................................................................................................9 2.4.2 ONUNLOAD......................................................................................................................................9 2.4.3 ONCLICK.......................................................................................................................................10 2.4.4 ONFOCUS.......................................................................................................................................10 2.4.5 ONBLUR........................................................................................................................................11 2.4.6 ONCHANGE....................................................................................................................................11 2.4.7 ONSELECT......................................................................................................................................12 2.4.8 ONSUBMIT.....................................................................................................................................13 2.4.9 ONMOUSEOVER.............................................................................................................................15 3 CONSTRUES DE JAVASCRIPT....................................................................................16 3.1 CONCEITOS BSICOS DE PROGRAMAO..............................................................................................16 3.1.1 CONSTRUO DE NOMES...................................................................................................................16 3.1.2 DECLARAO DE VARIVEIS.............................................................................................................16 3.1.3 TIPOS DE VALORES...........................................................................................................................17 3.1.4 CARACTERES ESPECIAIS....................................................................................................................18 3.1.5 EXPRESSES....................................................................................................................................18 3.1.6 OPERADORES..................................................................................................................................18 3.1.7 DECLARAES................................................................................................................................23 3.1.8 FUNES........................................................................................................................................28 3.2 OBJETOS...........................................................................................................................................29 3.2.1 HIERARQUIA...................................................................................................................................29 3.2.2 A NATUREZA ORIENTADA A OBJETOS DE HTML...............................................................................30 3.2.3 OBJETO NAVIGATOR ........................................................................................................................31 3.2.4 OBJETO LOCATION...........................................................................................................................31 3.2.5 OBJETO CHECKBOX..........................................................................................................................32 3.2.6 OBJETO RADIO................................................................................................................................32 3.2.7 OBJETO HIDDEN..............................................................................................................................33 3.2.8 OBJETO TEXT..................................................................................................................................33 3.2.9 OBJETO RESET.................................................................................................................................33 3.2.10 OBJETO SUBMIT.............................................................................................................................34 3.2.11 OBJETO BUTTON............................................................................................................................34 3.2.12 OBJETO TEXTAREA.........................................................................................................................34 3.2.13 OBJETO SELECT.............................................................................................................................34 3.3 OBJETOS DO CORE JAVASCRIPT......................................................................................................35 3.3.1 OBJETO ARRAY...............................................................................................................................35 3.3.2 OBJETO DATE.................................................................................................................................35

Javascript

_____________________________________________________________________ ___
3.3.3 OBJETO STRING..............................................................................................................................36 3.3.4 OBJETO WINDOW............................................................................................................................37

Javascript

_____________________________________________________________________ ___

1 Introduo
O objetivo deste material apresentar a linguagem Javascript, muito utilizada atualmente, em conjunto com HTML, para construir pginas dinmicas e interfaces de aplicaes no ambiente Web. A partir deste estudo, espera-se posicionar a tecnologia Javascript no contexto do desenvolvimento Web, a fim de que desenvolvedores conheam o potencial das linguagens interpretadas pelos navegadores.

2 Javascript
2.1 O que Javascript

Javascript uma linguagem de script orientada a objetos, utilizada para desenvolver aplicaes cliente para Internet/Intranet. Ela foi criada pela Netscape a fim de expandir a funcionalidade de seu popular browser: o Navigator. 2.1.1 CARACTERSTICAS
BSICAS

Javascript uma linguagem de script (scripts so miniprogramas interpretados e voltados para execuo de tarefas especficas) com uma sintaxe bastante similar a C, C++, Pascal e Delphi. Os comandos e funes de Javascript so inseridos dentro de um documento da Web, junto com tags HTML e texto. Quando o navegador de um usurio acessa este documento, ele formata a pgina, executando o programa nela inserido. Para acessar uma pgina que possui scripts, o navegador deve ser capaz de interpretar a linguagem. Javascript uma linguagem baseada em objetos. Uma linguagem baseada em objetos uma linguagem orientada a objetos com um conjunto de objetos j embutidos. Sempre que algo acontece em uma pgina Web, ocorre um evento. Eventos podem ser qualquer coisa um boto recebe um clique, o mouse arrastado, uma pgina carregada, um formulrio enviado, e assim por diante. Javascript uma linguagem dirigida por eventos, no sentido de que projetada para reagir quando um evento ocorre. A linguagem Javascript foi projetada para manipular e apresentar informao atravs de um navegador. Ela no capaz de recuperar informaes de outro arquivo ou salvar dados em um servidor da 3

Javascript

_____________________________________________________________________ ___ Web, ou no computador do usurio. Isto significa que no possvel escrever um programa Javascript que, por exemplo, varra os diretrios de um computador, lendo ou apagando arquivos do usurio. Javascript uma linguagem independente de plataforma, ou seja, o cdigo escrito nesta linguagem no depende de uma plataforma especfica (Windows, Macintosh, UNIX, etc), depende apenas do navegador que a interpreta. Dessa forma, quer o usurio tenha um navegador para Windows, Macintosh ou UNIX, o cdigo Javascript ser executado sem que nenhuma adaptao seja necessria.

2.1.2 O

QUE

JAVASCRIPT

NO

Ainda muito comum algum confundir a linguagem Javascript com a linguagem Java, mas, ateno, Javascript no Java. Java (desenvolvida pela Sun Microsystems) uma linguagem de programao orientada a objetos completa, que pode ser usada para projetar aplicaes isoladas (que no exigem um browser para rodar) ou mini-aplicaes (applets). Principais diferenas entre Javascript e Java: Javascript baseada em objetos - tem seus prprios objetos embutidos. Java orientada a objetos os objetos so construdos a partir de classes; cdigo Javascript embutido dentro de um documento HTML como texto simples. Applets Java so referenciados a partir de um documento, mas o cdigo mantido em um arquivo separado (em um formato binrio); Javascript identificada em um documento HTML atravs da tag <SCRIPT>. Applets Java, atravs da tag <APPLET>; Javascript passada ao cliente (browser) como texto e interpretada. Java compilada em um tipo especial de cdigo (bytecodes), que so passados ao cliente para serem executados; Javascript usa tipagem fraca - as variveis no precisam ser declaradas, e uma varivel ora pode guardar strings, ora nmeros. Java usa tipagem forte as variveis precisam ser declaradas e usadas para um tipo de dados especfico; Javascript usa ligao dinmica referncias a objetos so verificadas e resolvidas em tempo de execuo. Java usa ligao esttica referncias a objetos devem ser resolvidas quando o programa compilado. 4

Javascript

_____________________________________________________________________ ___ 2.1.3 PARTICULARIDADES E LIMITAES Javascript importante para desenvolvedores de pginas Web que desejam estender a capacidade de seus documentos HTML, tornando-os dinmicos. No entanto, esta linguagem apresenta algumas limitaes, que se encaixam em trs categorias: Limitaes de Browsers

Como o cdigo Javascript executado no cliente (browser), seu interpretador deve ser implementado dentro do browser. A maioria dos browsers disponveis no mercado atualmente (verses recentes do Internet Explorer e do Netscape) do suporte Javascript. Limitaes de Plataformas

Embora Javascript rode em todas as plataformas para as quais browsers compatveis existem, nem todas as funes de Javascript rodaro do mesmo modo em plataformas distintas. Limitaes de Segurana

A linguagem Javascript foi projetada para ser segura com respeito Web. Para isso, ela foi concebida com algumas restries: Ela no pode abrir, ler, gravar ou salvar arquivos no computador do usurio. A nica informao que ela pode acessar a que est na pgina Web onde reside (ou em outras pginas carregadas ao mesmo tempo, como ocorre quando se usam frames); Ela no pode abrir, ler, gravar ou salvar arquivos no servidor Web; Ela no pode ser usada para criar vrus que danifique o computador do usurio. Resumindo, Javascript uma linguagem segura e no consegue interagir diretamente com nada no computador do usurio fora da pgina Web que est sendo exibida no navegador. 2.2 Elemento SCRIPT

container tag: <SCRIPT>...</SCRIPT> atributos: LANGUAGE, SRC

Javascript

_____________________________________________________________________ ___ Dentro de um documento HTML, a linguagem Javascript delimitada pelo par de tags <SCRIPT> e </SCRIPT>. Voc pode posicionar a tag <SCRIPT> dentro dos elementos <HEAD> e </HEAD>, <BODY> e </BODY>, ou ambos possvel incorporar mltiplos elementos <SCRIPT> dentro de um documento. Scripts dentro da tag <HEAD> so carregados antes que o resto da pgina seja carregado, tornando-se um excelente lugar para colocar suas funes Javascript (para garantir que elas estejam disponveis para outras partes do documento). Colocar scripts dentro da tag <BODY> faz com que seja possvel criar, dinamicamente, partes de seu documento (exibindo, por exemplo, a hora). A sintaxe do elemento <SCRIPT> : <SCRIPT LANGUAGE=javascript> cdigo-fonte javascript </SCRIPT> A tag <SCRIPT> informa o interpretador Javascript do navegador que um script encontra-se embutido. O atributo LANGUAGE identifica a linguagem que deve ser utilizada para interpretar o cdigo do script. Isto necessrio porque existem outras linguagens para construo de scripts, como, por exemplo, VBScript (Microsoft). O atributo SRC permite chamar um arquivo de scripts externo (arquivos com extenso .js ). A fim de facilitar a manuteno, recomenda-se armazenar ar funes Javascript de uma pgina em um arquivo separado, que pode ser includo no documento HTML com a construo abaixo. <SCRIPT LANGUAGE=javascript SRC=funcoes.js></SCRIPT> Criando o primeiro script

O exemplo abaixo imprime a frase Bom dia! na pgina. Observe que, apesar de no existirem elementos entre as marcaes <BODY> e </BODY>, esta frase exibida. Isto ocorre porque a funo document.write() instrui o navegador a colocar o que estiver entre apstrofos na pgina. <html> <head> <script language="javascript"> document.write("Bom dia!<BR>"); </script> </head> <body> </body> 6

Javascript

_____________________________________________________________________ ___ </html> Criando o segundo script

Uma das razes de utilizar Javascript a possibilidade de montar um texto para ser exibido, incluindo valores de variveis que podem ser inseridos pelo usurio. <html> <head> <script language="javascript"> var nome nome = window.prompt("Digite o seu nome:"); document.write("Bom dia, " + nome + "!<BR>"); </script> </head> <body> </body> </html> Neste ponto, importante lembrar que nem todos os navegadores interpretam Javascript. Para evitar resultados indesejados (por exemplo, listagem do cdigo da funo Javascript que deveria ser interpretada), usam-se as marcaes de comentrios <! e -->, conforme exemplo a seguir. <html> <head> <script language="javascript"> <!-var nome nome = window.prompt("Digite o seu nome:"); document.write("Bom dia, " + nome + "!<BR>"); //--> </script> </head> <body> </body> </html>

Javascript

_____________________________________________________________________ ___ 2.3 Eventos em Javascript

Javascript uma linguagem dirigida por eventos. Eventos (tais como, clicar no mouse, ou pressionar um boto) so utilizados para controlar a interao do usurio com o aplicativo. Programas convencionais funcionam de maneira diferente. Um programa convencional executa seu cdigo sequencialmente. function exibe() { if ( !(confirm(Quer encerrar?) ) { documento.write (Oi, pessoal da Internet!); } } Um programa que queira que o usurio confirme a exibio de uma frase poderia usar a funo acima para obter a entrada do usurio. Entretanto, este programa ficaria preso na funo exibe(), esperando por uma resposta. Enquanto isso, no possvel ter outra operao sendo executada. Quaisquer outras entradas e operaes so suspensas at que o usurio responda pergunta. Uma abordagem melhor seria usar um dos manipuladores de eventos de Javascript para ativar a funo abaixo. function exibe() { documento.write (Oi, pessoal da Internet!); } Manipuladores Javascript so representados como atributos especiais que modificam o comportamento de uma tag HTML qual so anexados. Atributos de manipulao de eventos comeam todos com On e identificam os diversos eventos que podem ocorrer. O valor associado ao manipulador pode ser uma sequncia de declaraes Javascript, ou uma chamada de funo Javascript. 2.4 Manipuladores de eventos

Manipuladores de eventos Javascript servem para interfacear um script com atividades do sistema ou aes do usurio. Eles so divididos em 2 categorias: eventos de sistema e eventos de mouse. Os eventos de sistema disponveis so: OnLoad e OnUnload. Eles no exigem a interao do usurio para serem ativados.

Javascript

_____________________________________________________________________ ___ Os eventos de mouse disponveis so: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver. Eles exigem a interao do usurio (atravs do mouse ou no) para serem ativados. 2.4.1 ONLOAD Este evento ativado aps a pgina HTML ser completamente carregada. Ele pode ser associado s tags <BODY> ou <FRAMESET>. Exemplo: <html> <head> <script language=Javascript> function chegada() { window.alert(Seja bem-vindo ao nosso site!); } </script> </head> <body OnLoad=chegada()> Veja que interessante utilizao do evento <I>OnLoad</I>. </body> </html> 2.4.2 ONUNLOAD Este evento ativado aps a pgina HTML ser abandonada (seja atravs do clique sobre algum link, ou sobre os botes de avano/retrocesso do browser). Ele pode ser associado s tags <BODY> ou <FRAMESET>. Exemplo: <html> <head> <script language=Javascript> function saida() { window.alert(Volte sempre!); } </script> </head> <body OnUnload=saida()> Veja que interessante utilizao do evento <I>OnUnLoad</I>. </body> </html>

Javascript

_____________________________________________________________________ ___ 2.4.3 ONCLICK O evento mais bsico de mouse tratado pelo manipulador OnClick. Este evento ativado sempre que se d um clique sobre um objeto que aceita evento de clique de mouse. Objetos que aceitam um evento OnClick so links, caixas de verificao e botes. Exemplo: <html> <head> <script language=Javascript> function mensagem() { window.alert(Voc clicou neste campo); } </script> </head> <body> <a href=exemplo3.html OnClick=mensagem()> <i>Link</i> comum</a><br> <form> <input type=radio OnClick=mensagem()><i>Radio</i> <br> <input type=checkbox OnClick=mensagem()><i>Checkbox</i> <br> <input type=reset OnClick=mensagem()> <br> <input type=submit OnClick=mensagem()> <br> </form> </body> </html> 2.4.4 ONFOCUS O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usurio clicar ou alternar para um objeto especfico na pgina. Este evento pode ser associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). Exemplo: <html> <head> <script language=Javascript> function foco() { 10

Javascript

_____________________________________________________________________ ___ window.alert(O campo EMAIL est em foco); } </script> </head> <body><form> Nome: <input name=nome type=text><br> Email: <input name=email type=text OnFocus=foco()><br> Telefone: <input name=telefone type=text> </form></body> </html> 2.4.5 ONBLUR Este evento ativado quando um objeto torna-se fora de foco quando se muda para outra janela, ou aplicativo, ou quando se passa para outro objeto utilizando cliques do mouse, ou a tecla TAB. Ele associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). Exemplo: <html><head><script language=Javascript> function semfoco() { window.alert(O campo EMAIL perdeu o foco); } </script></head> <body><form> Nome: <input name=nome type=text> <br> Email:<input name=email type=text OnBlur=semfoco()> <br> Telefone: <input name=telefone type=text> </form></body></html> 2.4.6 ONCHANGE Este evento ativado sempre que um objeto perde o foco e o seu valor alterado. Ele associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). Exemplo: <html> <head> 11

Javascript

_____________________________________________________________________ ___ <script language="Javascript"> function mudou1() { document.form1.completo.value=document.form1.nome.value; } function mudou2() { document.form1.completo.value=document.form1.completo.value + " + document.form1.sobrenome.value; } </script> </head> <body bgcolor=white link=blue vlink=blue alink=blue> <form name=form1> <pre> Nome: <input name="nome" type="text" OnChange="mudou1()"> Sobrenome: <input name="sobrenome" type="text" OnChange="mudou2()"> Nome completo: <input name="completo" type="text"> </pre> </form> </body> </html>

2.4.7 ONSELECT Este evento ativado quando o usurio seleciona (deixa em destaque) parte do texto em um dos objetos aos quais est associado. So eles: text, password e textarea (definidos pelas tags <INPUT> e <TEXTAREA>).

12

Javascript

_____________________________________________________________________ ___ Exemplo: <html> <head> <script language="Javascript"> function selecao() { window.alert("Campo selecionado"); } </script> </head> <body bgcolor=white link=blue vlink=blue alink=blue> <form> <pre> Campo input texto: <input type="text" OnSelect="selecao()"> Campo input senha: <input type="password" OnSelect="selecao()"> Campo textarea: <textarea OnSelect="selecao()"></textarea> </pre> </form> </body> </html> 2.4.8 ONSUBMIT Este evento ativado no momento de enviar os dados do formulrio. Ele associado ao objeto form (definido pela tag <FORM>). Exemplo: <html> <head> <script language="Javascript"> function submete() { window.alert("Evento OnSubmit ativado!"); } </script> </head> <body bgcolor=white link=blue vlink=blue alink=blue> <form name=form1 OnSubmit="submete()"> Campo 1: <input type="text" size=10 name=campo1><br> Campo 2: <input type="text" size=10 name=campo2><p> <input type=submit> </form> </body> 13

Javascript

_____________________________________________________________________ ___ </html> Muitas vezes, os dados que so inseridos em um formulrio precisam ser separados, analisados, manipulados ou verificados quanto a erros antes de serem transmitidos para o servidor. O evento OnSubmit permite a captura e, se necessrio, a interrupo do envio dos dados de um formulrio. Isto realizado chamando-se a funo a partir do manipulador OnSubmit, fazendo com que ela retorne verdadeiro ou falso. Se a funo associada ao manipulador retornar falso, os dados do formulrio no sero enviados. Esta funcionalidade pode ser verificada a partir do cdigo a seguir. Exemplo: <html> <head> <script language="Javascript"> function submete() { if (document.form1.campo1.value == "" || document.form1.campo2.value == "") { return false; } else { return true; } } </script> </head> <body bgcolor=white link=blue vlink=blue alink=blue> <form name=form1 action="exemplo8b.html" OnSubmit="return submete()"> Campo 1: <input type="text" size=10 name=campo1> <br> Campo 2: <input type="text" size=10 name=campo2> <p> <input type=submit> </form> </body> </html>

14

Javascript

_____________________________________________________________________ ___ 2.4.9 ONM OUSEOVER Este evento ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou botes. Exemplo: <html> <head> <script language="Javascript"> function ativa() { window.alert("Evento OnMouseOver ativado!"); } </script> </head> <body bgcolor=white link=blue vlink=blue alink=blue> <a href="exemplo9.html" OnMouseOver="ativa()"> Passe o <i>mouse</i> sobre este <i>link</i></a> <form> <input type="reset" value="Boto Reset" OnMouseOver="ativa()"><P> <input type="submit" value="Boto Submit" OnMouseOver="ativa()"> </form> </body> </html>

15

Javascript

_____________________________________________________________________ ___

3 Construes de Javascript
3.1 Conceitos bsicos de programao

3.1.1 CONSTRUO

DE NOMES

Javascript apresenta algumas restries quanto ao nome de variveis/funes: no permitido colocar espao em branco em um nome; no permitido incluir um hfen (-) em um nome; no permitido colocar os seguintes caracteres em um nome: . , ; ? embora seja possvel usar dgitos em um nome, ele precisa comear com uma letra; no permitido utilizar, como nome de uma nova varivel/funo, alguma das palavras reservadas de Javascript.

Segue a relao de palavras que no podem ser usadas como nomes de variveis ou funes em Javascript: abstract, boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, nt, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, var, void, while, with.

3.1.2 DECLARAO

DE VARIVEIS

Cada varivel tem que ser declarada como global ou local. A nica diferena entre estes dois tipos em Javascript onde elas esto localizadas dentro do cdigo. possvel definir variveis antes de atribuir um valor a elas, ou no momento em que fizer a atribuio. Variveis Locais

So definidas dentro do corpo de uma funo. Elas so vlidas apenas dentro do corpo da funo onde foram definidas (escopo limitado). 16

Javascript

_____________________________________________________________________ ___ Exemplo: function adiciona(valor){ var a a = valor + 10; ... } function subtrai(valor){ var b b = valor - 10; ... } Neste exemplo, a varivel a vista apenas pela funo adiciona(), enquanto que a varivel b vista apenas por subtrai(). Variveis Globais

So definidas fora de todos os corpos de funes de um arquivo Javascript. Elas so vlidas dentro de qualquer funo do arquivo. Exemplo: var total = 0; function adiciona(valor){ var a = valor + 10; total = total + a; } function subtrai(valor){ var b = valor - 10; total = total - b; } Neste exemplo, a varivel total definida tanto fora da funo adiciona(), quanto fora da funo subtrai(), de forma que est acessvel a ambas. 3.1.3 TIPOS
DE VALORES

Existem 4 (quatro) tipos de variveis reconhecidos por Javascript: nmeros, valores lgicos (booleanos), strings e nulos. O tipo especfico de uma varivel depende dos dados atribudos a ela. 17

Javascript

_____________________________________________________________________ ___ Nmero : qualquer nmero positivo ou negativo. Este nmero pode ser inteiro no formato decimal, hexadecimal ou octal. Pode tambm ser nmero de ponto flutuante com/sem exponencial; Booleano : true ou false (sem aspas); String : conjunto de caracteres limitados por aspas/apstrofos. Um string exige um par de aspas (ou apstrofos) para identific-lo como string; Nulo: null (palavra chave que denota o valor nulo). 3.1.4 CARACTERES
ESPECIAIS

Alguns caracteres especiais que so permitidos em valores do tipo string: \b: retrocesso (backspace); \f: nova pgina (form feed); \n: nova linha (line feed); \r: retorno de carro (carriage return); \t: caracter de tabulao (tab).

3.1.5 EXPRESSES Expresso um conjunto de literais (constantes), variveis e operadores que, avaliados, resultam em um nico valor (nmero, string ou booleano). Existem 3 (trs) tipos de expresses em Javascript: expresses aritmticas : resultam em um nmero; expresses de string : resultam em uma sequncia de caracteres (string); expresses lgicas : resultam em verdadeiro ou falso, representados, respectivamente, pelas palavras reservadas true e false.

3.1.6 OPERADORES Operadores so smbolos especiais que controlam como uma expresso deve ser avaliada. Um operador pode ser binrio - exige dois operandos; ou unrio - exige apenas um operando (antes ou depois do operador). Os operadores podem, ainda, ser classificados de acordo com o tipo dos operandos que manipulam: operadores aritmticos, 18

Javascript

_____________________________________________________________________ ___ operadores de comparao, operadores de string , operadores lgicos, operadores bit a bit e operadores de atribuio. OPERADORES ARITMTICOS

Operadores aritmticos constrem expresses aritmticas. Eles recebem e retornam nmeros. A tabela 1 mostra os operadores aritmticos bsicos de Javascript. Operador + * / Funo Soma Subtrao Multiplicao Diviso

Tabela 1 Operadores aritmticos bsicos

Existem outros operadores aritmticos em Javascript. So eles: Mdulo (%) Retorna o resto da operao de diviso inteira entre os operandos. Exemplo: 22 % 5 => 2 Incremento (++) uma forma abreviada de adicionar 1 a um operando (o operando deve ser uma varivel). Exemplo: operando++ => operando = operando + 1 O operador de incremento pode ser escrito como operando++ ou ++operando. O lado em que o operador est controla quando 1 adicionado ao operando (com respeito ao resto da expresso). Se ele usado depois do operando, retorna o valor do operando antes de increment-lo. Por exemplo, se x=3, a declarao y=x++ coloca primeiro o valor 3 em y e, depois, incrementa x para 4. Se, por outro lado, o operador de incremento for colocado antes do operando, ele retorna o valor do operando depois de o operando ser incrementado. O cdigo y=++x primeiro incrementa o x para 4 e, ento, coloca o valor 4 em y. Decremento (--) uma forma abreviada de subtrair 1 de um operando (o operando deve ser uma varivel). Exemplo: operando-- => operando = operando 1 19

Javascript

_____________________________________________________________________ ___ De forma semelhante ao operador de incremento, o operador de decremento pode ser escrito como operando-- ou --operando. Negao Unria (-) Este operador nega o seu operando. Exemplo: x = 4; y = -x => y = -4 OPERADORES DE COMPARAO

Um operador de comparao compara seus operandos e retorna um valor booleano. Estes operandos podem ser nmeros ou strings. A tabela 2 mostra os operadores de comparao de Javascript. Operador == != > >= < <= Funo Igual a Diferente de Maior que Maior ou igual a Menor que Menor ou igual a

Tabela 2 Operadores de comparao

OPERADORES DE STRING

O operador de string, +, serve para concatenar strings. Ele recebe e retorna strings. Exemplo: string1 + string2 => string1string2

OPERADORES LGICOS Os operadores lgicos retornam valores booleanos. A tabela 3 mostra os operadores lgicos de Javascript. Operador && || ! Funo E, AND OU, OR NO, NOT 20

Javascript

_____________________________________________________________________ ___
Tabela 3 Operadores lgicos

OPERADORES BIT A BIT

Os operadores bit a bit servem para manipular um nmero a nvel de bit. A tabela 4 mostra os operadores lgicos de Javascript. Operador & | ^ ~ << >> >>> Funo E, AND OU, OR OU Exclusivo, XOR NO, NOT Deslocamento esquerda Deslocamento direita Deslocamento direita com preenchimento de zeros

Tabela 4 Operadores bit a bit

OPERADORES DE ATRIBUIO

Javascript d suporte a um mtodo abreviado de escrever operaes aritmticas padro e bit a bit. So os operadores de atribuio, apresentados na tabela 5.

21

Javascript

_____________________________________________________________________ ___ Operador x += y x-=y x *= y x /= y x %= y x <<= y x >>= y x >>>= y x &= y x ^= y x |= y x x x x x x x x x x x = = = = = = = = = = = x x x x x x x x x x x Funo +y y *y /y %y << y >> y >>> y &y ^y |y

Tabela 5 Operadores de atribuio

22

Javascript

_____________________________________________________________________ ___ Precedncia de Operadores Em Javascript, os operadores tm certa ordem de precedncia, ou que operadores so avaliados em primeiro lugar e em que ordem. A ordem de precedncia, da mais alta (primeira) mais baixa (ltima), a seguinte: Chamadas e membros ( ( ) e [ ] ); Negao, incremento e decremento (!, ~, -, ++ e --); Multiplicao e diviso (*, / e %); Adio e subtrao (+ e -); Deslocamentos (<<, >> e >>>); Relacionais (<, <=, > e >=); Igualdade (== e !=); E bit a bit (&); OU Exclusivo bit e bit (^); OU bit a bit ( | ); E Lgico (&&); OU Lgico ( || ); Atribuio.

3.1.7 DECLARAES Declarao uma sequncia de palavras-chave, operadores, operandos e/ou expresses terminados por um ponto-e-vrgula. Todas as declaraes em Javascript podem ser agrupadas em uma das seguintes categorias: Comandos; Declaraes Condicionais; Declaraes de Lao; Declaraes de Manipulao de Objetos.

COMANDOS

Declarao de variveis A declarao var indica que a palavra imediatamente subsequente uma varivel, qual possvel atribuir qualquer valor. Exemplo: var i; var i=10; var x, y, z=1; Comentrio em uma nica linha 23

Javascript

_____________________________________________________________________ ___ Para acrescentar comentrios que ocupam apenas uma linha, deve-se colocar a sequncia // antes do texto de comentrio. Exemplo: total = total + 1; //acumula total Comentrio em mais de uma linha Para acrescentar comentrios que ocupam mais de uma linha, deve-se colocar a sequncia /* na primeira linha e */ na ltima linha. Exemplo: /*aqui comea o comentrio aqui termina o comentrio */ DECLARAES CONDICIONAIS

Permitem controlar o conjunto de declaraes que sero executadas, com base em uma condio (uma expresso ser verdadeira ou falsa). A declarao condicional de Javascript usa as palavras-chave if e else, e switch. Sintaxe: declarao if e else if (condio) { // faz algo se a condio for verdadeira } else { // faz algo se a condio for falsa } Sintaxe: declarao switch switch (fruta) { case Laranja: XYZ = 1 break case Banana: XYZ = 2 break default: XYZ = 3 }

As chaves ( { } ) definem um bloco de declaraes que so tratadas e executadas como uma unidade. 24

Javascript

_____________________________________________________________________ ___ DECLARAES DE LAO

Possibilitam repetir a execuo de um conjunto de declaraes mais de uma vez. As declaraes de lao de Javascript usam as palavras-chave for e while. Sintaxe: declarao for for (inicializao; condio; incremento) { declarao 1; ... declarao n; } De acordo com a sintaxe exposta anteriormente: inicializao uma expresso usada para inicializar uma varivel contador (a varivel utilizada para controlar o nmero de vezes que o lao executado); condio uma expresso booleana avaliada a cada repetio do lao, antes do corpo do lao ser executado. Enquanto a expresso for verdadeira, o contedo do lao executado; incremento uma expresso usada para atualizar (atravs de incremento ou decremento) o contador. Exemplo: for (i=1; i <=5; i++) { total = total + 1; } Na declarao for, pode-se omitir as partes de inicializao, condio e incremento, contanto que as vrgulas permaneam. Sintaxe: declarao while while (condio) { declarao 1; ... declarao n; } 25

Javascript

_____________________________________________________________________ ___ Dentro do corpo de um lao for e while, possvel controlar at quando o lao deve ser executado. Isto obtido atravs das declaraes break e continue: break : cancela a execuo dos laos for e while, passando o controle para a prxima instruo fora do lao; continue : em um lao for, ela cancela a execuo, passando o controle para a prxima iterao; em um lao while, ela cancela a execuo, voltando condio.

DECLARAES DE MANIPULAO DE OBJETOS

Javascript uma linguagem baseada em objetos. Um objeto uma entidade que contm componentes associados que podem armazenar diversos valores. Algumas vezes pode ser preciso efetuar operaes em todas as propriedades de um objeto, ou, at mesmo, listar as propriedades de um objeto. Estas tarefas so facilmente executadas atravs das declaraes for...in e with. Existe tambm o operador especial para objetos new e uma palavra-chave especial this. Operador new Cria uma nova instncia de um objeto. Sintaxe: novaVar = new tipoObjeto (parmetros); onde, novaVar a varivel de objeto criada, tipoObjeto o tipo do objeto que est sendo criado (um dos tipos embutidos de Javascript), e parmetros so quaisquer parmetros de que o objeto precisa para ser criado corretamente. Palavra-chave this Objetos so constitudos de propriedades e mtodos . Muitos dos objetos embutidos de Javascript contm, por sua vez, outros objetos, que podem conter outros objetos, e assim por diante. s vezes, torna-se difcil saber em que ponto se est na rvore de objetos. Javascript oferece um atalho para referenciar o objeto corrente a palavra-chave this. Sintaxe: this.propriedade 26

Javascript

_____________________________________________________________________ ___ Declarao for... in Repete uma varivel sobre todas as propriedades de um objeto. Este um tipo especial de declarao de lao que varre todas as propriedades de um objeto. Sintaxe: for (propriedade in objeto) { declaraes } onde, objeto o objeto em que se est trabalhando, e propriedade o nome da propriedade do objeto. A cada iterao do lao, propriedade recebe uma propriedade diferente do objeto. O lao se encerra quando todas as propriedades de um objeto j foram visitadas. Exemplo: <html> <head><title>Javascript</title></head> <body> <h3>Propriedades do Documento</h3> <hr> <script language="javascript"> for (propriedade in document) document.write(propriedade + "<br>"); </script> </body> </html> Declarao with Indica que, no corpo da declarao, todas as referncias a variveis so propriedades do objeto em questo. Sintaxe: with (objeto) { declaraes } Exemplo: with (document){ fgColor = #000000; bgColor = #FFFFFF; } 27

Javascript

_____________________________________________________________________ ___ O cdigo acima pode ser usado no lugar de: document.fgColor = #000000; document.bgColor = #FFFFFF;

3.1.8 FUNES Uma funo um conjunto de declaraes que executam uma tarefa especfica. Existem dois tipos de funes: funes desenvolvidas pelo usurio e funes pr-definidas da linguagem. Em Javascript, uma funo identificada pela palavra-chave function, uma palavra chamada nomeFuno, e um par de parnteses ( ( ) ), que delimitam zero ou mais parmetros. Todas as declaraes dentro de uma funo esto dentro de um par de chaves ( { } ). Sintaxe: function nomeFuno ( ) { declarao 1; ... declarao n; } A declarao return utilizada, dentro do corpo de uma funo, para retornar um valor, ou para cancelar imediatamente a execuo da funo. Exemplo: function aoCubo(valor) { return valor * valor * valor; } Algumas funes pr-definidas de Javascript so: eval (string), onde string representa uma expresso a ser resolvida, retornando um valor numrico. Exemplo: x = 4; eval (3 + x + 8); Resultado = 15 28

Javascript

_____________________________________________________________________ ___ parseInt(string, base), onde o primeiro parmetro representa uma string a ser convertida para a base especificada no segundo parmetro. Exemplo: ParseInt(45, 10); Resultado = nmero 45 na base decimal isNaN recebe um argumento e determina se ele ou no um nmero. Caso ele seja um nmero, retorna o valor false. Se no for, retorna true.

3.2

Objetos

3.2.1 HIERARQUIA O nvel mais alto de objetos em Javascript consiste naqueles objetos que pertencem a navigator (navegador). Diretamente abaixo deste nvel, esto os objetos window (janela). Cada janela tem uma rvore de nveis que se ramifica a partir dela. Estas rvores consistem em location (localizao), history (histrico) e document (documento). A cada nvel h outros objetos e abaixo da rvore de documentos h outra ramificao. Neste nvel, h trs objetos array forms (formulrios), anchor (ncoras) e links. A figura 1 mostra a hierarquia de objetos de Javascript. No browser, os objetos seguem a mesma estrutura hierrquica da pgina HTML: de acordo com essa hierarquia, os descendentes dos objetos so propriedades desses objetos. Quando uma pgina carregada no browser, ele cria um Navegador nmero de objetos de acordo com o contedo da pgina. Os seguintes objetos so sempre criados, independentemente do contedo da pgina: window, location, history e document.

Janela

Localizao

Documento

Histrico

Link

ncora

Formulrio
29

(text, textarea, passwd, checkbox, radio, select, button, reset, submit)

Javascript

_____________________________________________________________________ ___

Figura 1 Hierarquia de objetos

3.2.2 A

NATUREZA

ORIENTADA

OBJETOS

DE

HTML

Javascript considera HTML uma linguagem orientada a objetos, na qual os diversos tags HTML correspondem a diferentes tipos de objetos Javascript. Exemplo: <html> <head><title>Minha pagina</title></head> <body> <form name=formulario1> <input type=button name=botao1> </form> </body> </html> A partir do cdigo acima, obtem-se os seguintes objetos Javascript: document.title : ttulo da pgina document.formulario1 : formulrio da pgina document.formulario1.botao1 : boto do formulrio

Este apenas um exemplo dos objetos que Javascript cria automaticamente de HTML. Observe que quase todo elemento HTML pode ser usado como um objeto. Alm disso, possvel ler e atribuir valores a estes objetos dinamicamente. Tenha em mente que medida em que se estrutura uma pgina, tambm est se definindo objetos e seus valores para Javascript. As prximas sees apresentam detalhadamente o conjunto de objetos da linguagem Javascript.

30

Javascript

_____________________________________________________________________ ___ 3.2.3 OBJETO NAVIGATOR Este objeto d informaes sobre o navegador. Ele apresenta as seguintes propriedades: appName, appVersion, appCodeName, userAgent. Propriedade appName : retorna o nome do browser do usurio. Exemplo: navigator.appName = Netscape Propriedade appVersion : retorna a verso do browser e a verso do sistema operacional em que ele est rodando. [ formato: nmero da verso (plataforma; pas) ] Exemplo: navigator.appVersion = 2.0 (Win95; I) Propriedade appCodeName : retorna o nome do cdigo de desenvolvimento interno do desenvolvedor de um browser especfico. Exemplo: navigator.appCodeName = Mozilla Propriedade userAgent : usada em cabealhos HTTP para fins de identificao, a combinao das propriedades appCodeName e appVersion. Servidores Web usam esta informao para identificar os recursos que o navegador dispe. Exemplo: navigator.userAgent=Mozilla/2.0 (Win95; I) 3.2.4 OBJETO
LOCATION

Este objeto utilizado para identificar o documento corrente. Ele consiste em uma URL completa no formato protocolo//servidor:porta/caminho seguidos de ?search ou #hash. Suas propriedades so: protocol, hostname, port, pathname, search, hash. Cada uma de suas propriedades representa uma parte da URL total. Propriedade documento. protocol : retorna o protocolo de transporte do

Exemplo: location.protocol = http: Propriedade hospedeiro. hostname : identifica o nome do computador

31

Javascript

_____________________________________________________________________ ___ Propriedade port : especifica a porta para o endereo. Esta informao utilizada apenas se uma porta no-padro estiver sendo usada. Propriedade pathname : define o caminho e o nome do arquivo. Propriedade search: retorna quaisquer comandos de consulta que possam estar embutidos na URL corrente. Valores de search so separados do resto da URL por um sinal de interrogao (?). Exemplo: location.search = nome=Joao Propriedade hash : retorna quaisquer ncoras que possam ter sido passadas na URL. Valores de hash so separados do resto da URL por um sinal de cerquilha (#). Exemplo: location.hash = capitulo1 3.2.5 OBJETO
CHECKBOX

Utilizado na construo de caixas de verificao. propriedades so: name, value, checked, defaultChecked. Propriedade name: especifica o nome da caixa. Propriedade value: especifica o valor da caixa. Exemplo: nomeForm.nomeCheckbox.value = 1

Suas

Propriedade checked: valor booleano que especifica o estado de seleo da caixa (selecionada ou no-selecionada). Exemplo: if ( nomeForm.nomeCheckbox.checked == true ) { funcao(); }

Propriedade defaultChecked: valor booleano que especifica o estado default de seleo da caixa.
RADIO

3.2.6 OBJETO

32

Javascript

_____________________________________________________________________ ___ Corresponde a um array de botes, onde todos os botes compartilham a mesma propriedade name. Suas propriedades so: name, checked, defaultChecked, length. Propriedade name: especifica o nome do objeto. Propriedade checked e defaultChecked: funcionamento idntico ao definido em checkbox. Propriedade length: especifica o comprimento do array.
HIDDEN

3.2.7 OBJETO

Utilizado para enviar informaes quando o formulrio submetido (este objeto no aparece no formulrio). Suas propriedades so: name, value. Propriedade name: especifica o nome do objeto. Propriedade passada.
TEXT

value: especifica

a informao

que

est sendo

3.2.8 OBJETO

Utilizado para entrada/sada de dados. Suas propriedades so: name, value, defaultValue. Propriedade name: especifica o nome do objeto. Propriedade value: especifica o valor do objeto. Propriedade defaultValue: especifica o valor default do objeto.
RESET

3.2.9 OBJETO

Utilizado para limpar dados de um formulrio. Suas propriedades so: name, value. Propriedade name: especifica o nome do boto. Propriedade value: especifica o ttulo colocado na face do boto. Exemplo: document.form.botao.value=novo titulo 33

Javascript

_____________________________________________________________________ ___ 3.2.10 OBJETO SUBMIT Utilizado para interfacear Javascript e outros scripts/programas. Suas propriedades so: name, value. Propriedade name: especifica o nome do boto. Propriedade value: especifica o ttulo colocado na face do boto. OBJETO
BUTTON

3.2.11

Utilizado na construo de interfaces. Suas propriedades so: name, value. Propriedade name: especifica o nome do boto. Propriedade value: especifica o ttulo colocado na face do boto. OBJETO
TEXTAREA

3.2.12

Utilizado para entrada/sada de dados. Suas propriedades so: name, value, defaultValue. Propriedade name: especifica o nome do objeto. Propriedade value: especifica o valor do objeto. Propriedade defaultValue: especifica o valor default do objeto. OBJETO
SELECT

3.2.13

Utilizado para construir caixas de seleo. Suas propriedades so: name, options, length. Propriedade name: especifica o nome do objeto. Propriedade options: array que contm uma entrada para cada opo de uma caixa de seleo. Propriedade length: especifica o comprimento do array de opes. O exemplo a seguir identifica que opes foram selecionadas na caixa de seleo. 34

Javascript

_____________________________________________________________________ ___ Exemplo: function listSelected(obj) { for (i=0; i < obj.length; i++) { document.write( + obj.options[i].name + ); if (!obj.options[i].selected) { document.write(no est selecionada<BR>); } else { document.write(est selecionada<BR>); }

3.3

Objetos do CORE Javascript

Os objetos do CORE Javascript so os objetos instrnsecos da linguagem, isto existem tanto no cliente (navegador), quanto no servidor Web. Os objetos do Client-Side Javascript e do Server-Side Javascript somente funcionam, respectivamente, em programas escritos para o navegador e para o servidor Web. 3.3.1 OBJETO ARRAY possvel criar um vetor atravs do objeto Array, pr-definido no Javascript. nome_do_array = new Array(10) Para inserir e consultar elementos de um array, deve-se utilizar a seguinte sintaxe: nome_do_array[x] A varivel x representa o ndice de um elemento. O primeiro elemento o de nmero 0. 3.3.2 OBJETO DATE O objeto Date lhe ajuda a manipular datas. Para criar um objeto do tipo Date, deve-se utilizar a seguinte sintaxe: nome_do_objeto = new Date(parmetros) Se no for indicado nenhum parmetro, ser criado um objeto com a data e a hora atual do sistema. possvel passar uma string representando uma data e hora como parmetro: 35

Javascript

_____________________________________________________________________ ___ x = new Date(October 01, 2001 08:00:00) Caso sejam omitidos hora, minuto e segundo, o valor padro ser 0. Outra forma de indicar data e hora atravs de uma srie de parmetros numricos, representando o ano, ms, dia, hora, minutos e segundos. A funo Date( ) retorna a data atual. 3.3.3 OBJETO STRING Em Javascript, toda string um objeto, e, portanto, tem mtodos e propriedades associadas. length (propriedade): retorna o comprimento de um string. Sintaxe: string.length indexOf( ) (mtodo): retorna a posio da primeira ocorrncia do caracter procurado dentro de um string especfico. As posies dos caracteres que compem um string variam entre "0" e "comprimento do string - 1" (length - 1). Se o caracter procurado no for encontrado em nenhuma posio, o mtodo retorna "-1". Sintaxe: string.indexOf(caracter_procurado, posio_inicial_de_busca) charAt( ) (mtodo): retorna o caracter encontrado na posio indicada. Sintaxe: string.charAt(posio) toUpperCase( ) (mtodo): traduz todo caracter dentro de uma string para letra maiscula. Sintaxe: string.toUpperCase() toLowerCase( ) (mtodo): traduz todo caracter dentro de uma string para letra minscula. Sintaxe: string.toLowerCase() substring( ) (mtodo): retorna uma sequncia de caracteres de uma string maior. Sintaxe: string.substring(ndiceA, ndiceB) onde ndiceA e ndiceB so ambos valores numricos entre 0 e a propriedade de string length. 36

Javascript

_____________________________________________________________________ ___

3.3.4 OBJETO WINDOW O objeto window representa a janela do navegador ou um frame. criado um objeto window sempre que o navegador encontra uma tag <BODY> ou <FRAMESET>. Tambm so criados objetos para cada frame definido. Propriedades mais utilizadas: defaultStatus: a mensagem que ser exibida quando no tiver nenhuma outra na status bar do navegador. Cuidado para no confundir com a propriedade status, que reflete umas mensagens transitrias, adequadas para um certo momento ou ao do usurio; Height: esta propriedade contm a altura, em pixels, da janela do navegador; Width: semelhante propriedade anterior, porm trabalha com a largura; name: representa o nome da janela; status: especifica a mensagem a ser exibida na status bar do navegador. muito til para comunicar ao usurio pequenas mensagens.

37

Javascript

_____________________________________________________________________ ___ Mtodos mais utilizados: alert( ): exibe uma mensagem para o usurio. A string com a mensagem deve ser passada para o mtodo como parmetro; back( ): equivalente a apertar o boto back do navegador. Ou seja, volta atrs na ltima navegao feita pelo usurio; forward( ): tem o mesmo efeito do boto forward do navegador. Ou seja, se o usurio tiver apertado o boto back para voltar ltima pgina visitada, o forward avana novamente para a pgina mais recente; open( ): abre uma nova janela. O mtodo recebe como parmetros uma URL (o endereo da pgina que vai ficar na nova janela), o nome da janela e uma string com suas carctersticas; close( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por ele. Caso contrrio, aparece uma caixa de confirmao para o usurio; confirm( ): exibe uma caixa de mensagem para o usurio com duas opes: OK e Cancel. Caso o usurio pressione OK, o mtodo retorna true. Caso contrrio, false. Ele recebe como parmetro uma string com a mensagem a ser exibida para o usurio; prompt( ): exibe uma caixa de mensagem e campo para o usurio entrar com uma string. O mtodo retorna a string digitada pelo usurio. So aceitos dois parmetros. O primeiro uma string com a mensagem a ser exibida e o segundo o valor padro da string a ser digitada pelo usurio.

Exemplo: <HTML> <HEAD> <TITLE>Exemplo</TITLE> </HEAD> <BODY> <SCRIPT> x = prompt("Qual a sua idade?", "25"); janela = window.open('','', 'innerHeight=100,innerWidth=150,resizable=yes'); janela.document.write("<BR> <B> <CENTER>"); janela.document.write("Voc tem " + x + " anos!"); janela.document.write("</CENTER> </B>");</SCRIPT> </BODY> </HTML>

38