Curso de Programação em Javascript e DHTML PDF

Curso de Programao em JavaScript e HTML Dinmico
Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C
ndice
PARTE I Introduo ao JavaScript
1 Introduo........................................................................................................... 5 2 Inserir JavaScript numa pgina da Web........................................................... 5 O elemento <script>........................................................................................... 5 3 Comentrios e blocos de cdigo...................................................................... 6 Comentrios....................................................................................................... 6 Blocos de cdigo................................................................................................ 7 4 Variveis.............................................................................................................. 7 Declarao de Variveis..................................................................................... 7 Os valores das Variveis.................................................................................... 8 Converses de Valores...................................................................................... 8 5 Expresses Literais............................................................................................ 9 Representao de valores..................................................................................9 Nmeros inteiros................................................................................................ 10 Nmeros com vrgula flutuante...........................................................................11 Valores lgicos (booleanos)............................................................................... 11 Expresses de texto........................................................................................... 11 Caracteres de escape........................................................................................ 12 6 Cadeias de variveis (Array) ............................................................................. 13 7 Operadores.......................................................................................................... 14 Operadores de atribuio de valor..................................................................... 14 Operadores de comparao............................................................................... 14 Operadores aritmticos...................................................................................... 15 Operadores lgicos............................................................................................ 15 8 Objetos.................................................................................................................16 Exemplos prticos com objetos.......................................................................... 16 9 Definir uma Funo............................................................................................ 17 10 As instrues condicionais if...else................................................................ 19 11 Executar cdigo repetidamente...................................................................... 19 Ciclos for............................................................................................................. 19 Ciclos while........................................................................................................ 21
PARTE II Programao em JavaScript

1 Reviso de matrias importantes......................................................................23 2 Os operadores da linguagem JavaScript......................................................... 38 Operadores aritmticos...................................................................................... 38 Operadores de atribuio (formas abreviadas) ................................................. 38 Operadores de comparao............................................................................... 38 Operadores lgicos............................................................................................ 39
<meta name="autor" content="Rafael Feitosa">

Adio de texto................................................................................................... 44 3 Instrues condicionais.................................................................................... 45 As instrues if e if ... else.................................................................................. 45 Atribuio condicional de valores....................................................................... 49 A instruo switch............................................................................................... 50 4 Execuo repetida de cdigo............................................................................ 54 Ciclos for............................................................................................................. 55 Ciclos while e ciclos do...while........................................................................... 57 5 Cdigo robusto: as instrues try ... catch...................................................... 59 6 Construir e usar uma funo............................................................................. 63 Funes com um nmero fixo de argumentos................................................... 64 Funes com um nmero varivel de argumentos............................................ 66 7 Trabalhar com objetos....................................................................................... 71 Criar um novo objeto.......................................................................................... 72 Propriedades de objetos.....................................................................................72 Mtodos de objetos............................................................................................ 72 Objetos definidos pelo padro ECMAScript....................................................... 73 As declaraes this e with.................................................................................. 73 8 Objeto Array........................................................................................................ 76 Propriedades do objeto Array............................................................................. 76 Mtodos do objeto Array.................................................................................... 76 Colees.............................................................................................................77 9 - Objeto Date.............................................................................. 81 Mtodos do objeto Date.............................................................................. 82 Mtodos estticos do objeto Date...................................................................... 84 10 Objeto Math....................................................................................................... 89 Propriedades do objeto Math............................................................................. 89 Mtodos do objeto Math..................................................................................... 89 11 Objeto String.................................................................................................... 94 Propriedades do objeto String............................................................................ 94 Mtodos do objeto String....................................................................................95 Mtodos estticos do objeto String.................................................................... 95
PARTE III HTML Dinmico

1 Para que serve o HTML Dinmico?................................................................... 100 2 O DHTML ainda pouco aproveitado. Porqu?.............................................. 108 3 Que ferramentas vamos usar?.......................................................................... 109 Os objetos do DOM............................................................................................ 109 Objetos principais usados em DHTML............................................................... 109 4 O objeto window................................................................................................. 111 Propriedades...................................................................................................... 111 Colees.............................................................................................................112

Mtodos.............................................................................................................. 112 5 O objeto document............................................................................................. 122 Propriedades...................................................................................................... 122 Colees.............................................................................................................123 Mtodos.............................................................................................................. 123 6 O objeto event..................................................................................................... 132 Propriedades...................................................................................................... 132 Funes de compatibilidade para o objeto event............................................... 132 7 O objeto navigator.............................................................................................. 144 Propriedades...................................................................................................... 144 8 O objeto screen................................................................................................... 146 Propriedades...................................................................................................... 146 9 O objeto location................................................................................................ 147 Propriedades...................................................................................................... 148 Mtodos.............................................................................................................. 148 10 O objeto history................................................................................................ 150 Propriedades...................................................................................................... 150 Mtodos.............................................................................................................. 150
PARTE IV Controle do Elementos HTML

11 Objetos que representam elementos do HTML............................................. 151 anchor................................................................................................................. 151 applet.................................................................................................................. 153 embed.................................................................................................................154 frame.................................................................................................................. 154 frameset..............................................................................................................155 form.................................................................................................................... 155 iframe..................................................................................................................158 image.................................................................................................................. 160 input.................................................................................................................... 163 object.................................................................................................................. 168 option.................................................................................................................. 169 select.................................................................................................................. 172 table.................................................................................................................... 178 tablecell.............................................................................................................. 186 tablerow.............................................................................................................. 189 textarea...............................................................................................................193 12 Mais controle sobre os elementos do HTML..................................................196 Propriedades intrnsecas dos elementos do HTML............................................197 A propriedade style............................................................................................. 197 A propriedade innerHTML.................................................................................. 198 A propriedade id e o mtodo getElementById()................................................. 199 Posicionamento e medio de elementos em DHTML...................................... 201
PARTE I: Introduo ao JavaScript

1. Introduo

O JavaScript uma linguagem de programao simples criada para dar mais interatividade e maior funcionalidade s pginas da Web. Tendo sido inicialmente desenvolvida pela Netscape, a linguagem JavaScript acabou por dar origem especificao tcnica ECMAScript, que um padro oficial reconhecido pela indstria. Apesar desta linguagem ser mais conhecida pelo nome de JavaScript, e de a verso produzida pela Microsoft ter recebido o nome de JScript, a verdade que se tratam de implementaes que sendo fiis norma ECMAScript lhe acrescentaram novas funcionalidades teis, mas respeitando sempre as especificaes oficiais. O cdigo escrito em JavaScript destina-se a ser executado pelo web browser quando a pgina HTML que o contm visualizada. Ele uma parte integrante da pgina e permite que o browser seja capaz de tomar decises quanto ao modo com que o contedo apresentado ao usurio e como pode ser manipulado.
2. Inserir JavaScript numa pgina da Web

2.1 O elemento <script>
Os browsers capazes de executar cdigo escrito em JavaScript reconhecem o elemento <script>. dentro desse elemento que se coloca todo o cdigo, como ilustra o exemplo seguinte:
<html> <head> <title>A Minha Pgina com JavaScript</title> <script type="text/javascript"> alert("Seja bem vindo(a) minha pgina!"); </script> </head> <body> Aqui colocamos o contedo da pgina em HTML </body> </html>
Repare que no final da linha de cdigo colocamos o caractere ; o qual d ao interpretador de JavaScript a indicao de que a instruo termina nesse local. O JavaScript no nos obriga a terminar as instrues deste modo, bastando que mudemos de linha para que ele perceba que a instruo chegou ao fim. No entanto isso torna mais difcil a localizao dos erros e pode tambm contribuir para gerar mais erros. conveniente que os principiantes terminem todas as instrues com o caractere ; e, se preferirem, s deixem de o fazer quando se sentirem completamente vontade com a linguagem. Graas ao JavaScript podemos fazer com que os objetos grficos apresentados na pgina (como por exemplo uma imagem, um boto ou uma ligao de hipertexto) respondam dinamicamente s aes do usurio. Para que isso acontea basta adicionar um novo atributo ao elemento responsvel pela apresentao desse objeto e escrever o cdigo que ao ser executado dar origem ao

comportamento esperado. O exemplo seguinte executa uma caixa de dilogo com um agradecimento sempre que o link for clicado:
<html> <body> <a href="http://www.w3c.org/" target="_blank" onclick="alert('Obrigado por visitar o W3C!')">Visite o W3C</a> </body> </html>
Certamente j conhece bem o atributo href="...", que serve para especificar o URL da pgina a que a ligao de hipertexto conduz, mas note que o atributo onclick="..." bem diferente porque o seu contedo constitudo por cdigo JavaScript, que neste caso faz aparecer a caixa de dilogo com a mensagem de agradecimento. (Se no conseguir compreender o modo como o texto contido no atributo onclick consegue fazer isto no se preocupe, esta tcnica, entre outras, sero explicadas durante este curso).
3. Comentrios e blocos de cdigo

3.1 Comentrios
Os comentrios permitem-nos descrever o cdigo JavaScript que produzimos tornando-o mais legvel e mais fcil de manter. Se comentar adequadamente o cdigo que produz, quando mais tarde precisar de o melhorar ou fazer alteraes ser mais fcil e rpido perceber o que fez antes. Se voc desenvolver um cdigo para partilhar com outras pessoas ento os comentrios so ainda mais importantes para que os outros percebam aquilo que voc escreveu. Em JavaScript podemos usar comentrios com uma nica linha e comentrios com vrias linhas. Os comentrios com uma nica linha comeam com os caracteres //. Isto d ao interpretador de JavaScript a indicao de que o resto da linha um comentrio, deste modo este ignora o resto da linha, continuando a interpretar o cdigo na linha seguinte. Um comentrio que se estende por vrias linhas comea com a seqncia de caracteres /* e continua at ser encontrada a seqncia de caracteres */, que marcam o fim do comentrio. Ao encontrar a seqncia /* o interpretador de JavaScript procura imediatamente a seqncia de finalizao */, continuando a a interpretao do cdigo e ignorando o que est no meio. Abaixo esto alguns exemplos de comentrios em JavaScript.

// Este um comentrio com uma nica linha /* Este comentrio ocupa uma s linha mas podia ocupar mais */ /* Este comentrio ocupa vrias linhas. Tudo o que for escrito aqui dentro ser ignorado pelo interpretador de JavaScript */
3.2 Blocos de cdigo

Quando temos que executar funcionalidades no triviais quase sempre necessrio executar seqncias de instrues compostas por vrias linhas. Se essas seqncias tiverem de ser executadas condicionalmente (veja por exemplo a descrio da instruo if mais frente), ou se formarem uma funo, ento elas constituem um bloco e tm de ser agrupadas. Isso se consegue colocando-as entre chaves ({ }.)
{ } // isto um bloco de cdigo var i = 0; var j = i * 3;
4. Variveis
O que so as Variveis? As variveis so objetos que servem para guardar informao. Elas permitemnos dar nomes a cada um dos fragmentos de informao com que temos que lidar. Se esses nomes forem bem escolhidos fica fcil saber onde que se deve guardar um determinado pedao de informao e onde que se pode ir buscar a informao que se guardou antes. Para evitar erros e aumentar a produtividade importante escolher nomes que descrevam aquilo que cada varivel guarda. Assim, se escrevermos um programa que divide dois nmeros recomendado chamar dividendo, divisor e quociente os nmeros envolvidos na operao. Escolhas como por exemplo n1, n2 e n3, apesar de funcionarem, provocam confuso e do origem a erros difceis de detectar porque tornam o cdigo mais difcil de ler. importante que saibamos quais as regras que temos de respeitar quando escolhemos um nome para uma varivel:
Todos os nomes tm que comear com uma letra ou com o caractere _. Os restantes caracteres que compem o nome podem igualmente conter nmeros. Nunca se esquea que para o JavaScript letra maiscula e letra minscula so coisas diferentes e que, por exemplo, as variveis variavel1, Variavel1 e vaRiavel1 so trs objetos distintos.
4.1 Declarao de Variveis

Ao ato de criar uma varivel se d o nome de declarao. As variveis que so declaradas fora de qualquer funo (mais frente iremos ver exemplos de declaraes de variveis e o que so funes) so designadas por variveis globais. Aqui o termo global significa que a varivel em causa pode ser utilizada em qualquer parte do script; ela est permanentemente acessvel. Quando uma varivel declarada dentro de uma funo ela ser uma varivel local porque s pode ser utilizada dentro dessa funo.

Se tentarmos acessar uma varivel local fora da funo em que ela foi declarada ser gerado um erro porque a varivel s existe no universo da funo em que foi declarada; ela no faz parte do mundo exterior a essa funo e como tal no pode ser utilizada. A seguir temos alguns exemplos de declarao de variveis:
dividendo = 12; divisor = 3; sabor = "Doce"; pi = 3.14159;
Nestes exemplos todas as variveis declaradas sero variveis globais. Se quisermos declarar variveis cuja existncia se limite a uma pequena seo do cdigo teremos de usar a declarao var, assim: var dividendo = 12; Se usarmos esta declarao fora de qualquer funo ento, porque a varivel declarada na base da estrutura de cdigo, ela ser global. Temos assim que a declarao var serve para limitar o contexto em que a varivel existe e que: As variveis declaradas sem a declarao var so variveis globais; As variveis declaradas usando a declarao var existem apenas no contexto em que foram definidas.
Antes de comear a escrever cdigo em JavaScript importante planejar o modo como este ser organizado. Deve-se comear a identificar os dados que vo ser utilizados. A seguir escolhem-se os nomes das variveis que vo guardar esses dados e s depois que se comea a escrever o cdigo propriamente dito.
4.2 Os valores das Variveis

A linguagem JavaScript capaz de reconhecer trs tipos de dados: Nmeros, como por exemplo 12 ou 3.14159 Texto (variveis de tipo String), como por exemplo: "Seja Bem Vindo(a)!" Valores lgicos (true ou false) null, que uma palavra especial que significa que a varivel em causa no guarda qualquer valor, est vazia.
Como iremos ter oportunidade de aprender neste e nos cursos seguintes, usando apenas estes tipos de dados podemos executar muitas aes teis nas nossas pginas da Web.
4.3 Converses de Valores

A linguagem JavaScript exige pouco trabalho ao programador para definir o tipo de dados que uma varivel deve guardar. o prprio interpretador de JavaScript que em funo dos dados que recebe decide se estes representam um nmero, texto (string), um valor lgico, ou nada (null). Assim, se escrever:
var resposta = 42;
o interpretador decidir guardar internamente a varivel resposta como um nmero inteiro, mas se escrevermos:

var resposta = 42; resposta = "JavaScript muito fcil de aprender.";
ao chegar segunda linha de cdigo o interpretador mudar de idia e a varivel resposta deixar de ser guardada internamente como um nmero inteiro para passar a ser guardada como uma String (texto). Esta converso no tipo da varivel acontece de forma automtica e o programador no precisa fazer nada para que ela acontea. Esta liberdade que nos dada pelo JavaScript destina-se apenas a simplificar a escrita do cdigo. Quando mal utilizada ela pode dar origem a cdigo difcil de ler e a erros. As regras de boa programao dizem que ao definir uma varivel o programador deve decidir qual o tipo de dados (nmero, texto ou valor lgico) que esta ir conter e no dever escrever cdigo que provoque uma converso no tipo de dados que a varivel guarda. Sempre que uma tal converso for necessria dever ser definida uma nova varivel para guardar o resultado da converso, mantendo inalterados os tipos das variveis antigas. Na prtica esta recomendao raramente seguida.
5. Expresses Literais
5.1 Representao de valores
As expresses literais representam valores fixos. Elas so escritas diretamente pelo programador ao produzir o script. Exemplos de expresses literais podem ser: 123 ou "Isto uma expresso literal". As expresses literais podem ser usadas de diversas maneiras, como ilustra o exemplo de cdigo apresentado a seguir (o exemplo seguinte usa as instrues if/else que s so estudadas mais frente):
<html> <body> <script type="text/javascript"> <!-var nome = "visitante"; var hora = 11; if(hora < 12) document.write("Bom dia. Seja bem vindo senhor(a) " + nome); else { if(hora >= 13) document.write("Boa tarde. Seja bem vindo senhor(a) " + nome); else document.write("Seja bem vindo! Almoa conosco?"); } --> </script> </body> </html>

Na primeira linha usamos a expresso literal "visitante" para dar um valor inicial varivel nome. Na segunda linha usamos uma expresso literal numrica para dar um valor varivel hora. O resto do cdigo usa as expresses literais 12 e 13 para determinar a parte do dia (manh, tarde ou hora de almoo) e cumprimentar usando o texto (expresso literal) mais adequado.
5.2 Nmeros inteiros

Os nmeros inteiros podem ser expressos na forma decimal (base 10), hexadecimal (base 16) ou octadecimal (base 8). Um nmero decimal consiste numa seqncia de dgitos que nunca deve comear por 0 (zero). Se escrevermos um nmero com um zero no incio isso significa que se trata de um nmero escrito na forma octadecimal. Por outro lado, se no incio escrevermos os caracteres 0x (ou 0X) isso significa que o nmero est escrito na forma hexadecimal. Os nmeros escritos na forma decimal podem conter os dgitos (0-9), a forma octadecimal aceita apenas dgitos de (0-7) e a forma hexadecimal aceita os dgitos (0-9) mais as letras a-f e A-F. Exemplos de nmeros inteiros so: 42, 052, 0X2A, que representam todos o valor decimal 42. No exemplo seguinte as variveis i, j, k possuem todas o mesmo valor, apesar de serem usadas bases diferentes para as inicializar:
<html> <body> <script type="text/javascript"> <!-var i = 42; // decimal var j = 052; // octal var k = 0X2A; // hexadecimal // quando executar este cdigo repare que as variveis // tm todas o mesmo valor document.write("i = " + i); document.write("<br>"); document.write("j = " + j); document.write("<br>"); document.write("k = " + k); --> </script> </body> </html>
10

5.3 Nmeros com vrgula flutuante

Uma expresso literal com vrgula flutuante representa um nmero que no inteiro mas que contm uma parte inteira e uma parte fracionria. Os nmeros 21.37 e -0.0764 so exemplos disto. A representao que a mquina constri para estes nmeros baseia-se na notao cientfica. Por exemplo, o nmero -7645.4532 igual a -7.64532 multiplicado por 10 elevado a 3, e escreve-se como -7.6454532E3, em que E3 representa 10 elevado a 3. Um outro exemplo o nmero 0.00045431, que representado na forma 4.5431E-4, ou seja 4.5431 multiplicado por 10 elevado a -4. Esta representao construda automaticamente pela mquina, o programador pode escrever o nmero na forma que mais lhe agradar.
5.4 Valores lgicos (booleanos)

Estas expresses podem assumir apenas dois valores: true (verdadeiro) e false (falso).
5.5 Expresses de texto

Uma expresso de texto composta zero ou mais caracteres colocados entre aspas ("), como por exemplo "esta uma expresso de texto", ou entre apstrofos ('), como por exemplo 'esta outra expresso de texto'. Se comearmos a expresso com aspas temos a obrigao de usar aspas para a terminar, e se a iniciarmos com um apstrofo temos de usar outro apstrofo para a terminar. Alm dos caracteres normais, as expresses de texto podem conter os caracteres especiais apresentados na lista seguinte: Caractere \b \f \n \r \t \\ Significado backspace form feed new line carriage return tab backslash
Cada um destes caracteres produz o mesmo resultado que se obtm acionando a tecla indicada na segunda coluna. Assim o caractere \b equivale a acionar a tecla backspace (apagar o caractere esquerda). O caractere \n provoca uma mudana de linha tal como a tecla "enter". O caractere \ usado como prefixo dos outros caracteres especiais, o que faz tambm dele um caractere especial. Por isso, para obtermos este caractere temos de temos escrev-lo duas vezes (\\). Se o escrevermos uma nica vez ao invs de o obtermos estaremos tentando introduzir um outro caractere especial e o resultado ser diferente do que pretendemos. 11

5.6 Caracteres de escape

Se o caractere que vem a seguir a \ no pertencer lista anterior o seu efeito ser nulo, mas h duas excees: as aspas (") e o apstrofo ('). Se pretendemos escrever aspas dentro de uma expresso de texto temos de colocar o caractere \ antes delas, como mostra o exemplo seguinte:
<html> <body> <script type="text/javascript"> <!-var texto = "Ele leu o \"Auto da Barca do Inferno\" de Gil Vicente."; document.write(texto); --> </script> </body> </html>
Se ao invs de usar aspas usarmos apenas apstrofos teremos:
Porm, a melhor soluo para este problema no nenhuma das anteriores. Se usarmos apstrofos como caracteres delimitadores de uma string ento passamos a poder usar as aspas como parte do contedo sem qualquer problema, como se mostra a seguir:
var texto = 'Ele leu o "Auto da Barca do Inferno" de Gil Vicente.'; document.write(texto);
Mas se quisermos colocar apstrofos no contedo a melhor forma de evitarmos os problemas consiste em usar aspas como caracteres delimitadores da string, como se mostra a seguir:
var texto = "Ele leu o 'Auto da Barca do Inferno' de Gil Vicente."; document.write(texto);
12

6. Cadeias de variveis (Array)

Uma cadeia de variveis (objeto Array) um objeto capaz de guardar muitos valores, tantos quanto a memria disponvel na mquina permitir. Cada uma das variveis que compem o array possui um ndice. Ilustremos isto com um exemplo:
var frutas_tropicais = new Array("Goiaba", "Manga", "Maracuj"); var frutas_nacionais = new Array(3); frutas_nacionais[0] = "Ma"; frutas_nacionais[1] = "Cereja"; frutas_nacionais[2] = "Laranja";
Ao declararmos a varivel frutas_tropicais ns declaramos o Array e atribumos-lhe os valores numa nica operao. J no segundo caso primeiro declaramos o Array e s depois definimos os valores que ele deve conter. Neste caso temos que a varivel frutas_tropicais[2] possui o valor "Maracuj" e a varivel frutas_nacionais[0] possui o valor "Ma". Em JavaScript as variveis no tm um tipo definido, por isso um array pode conter valores de tipos diferentes que podemos alterar sempre que necessrio, como se mostra a seguir:
<html> <body> <script type="text/javascript"> <!-var sortido = new Array(8975, "Livro", false, -27.765, "Bolachas"); document.write("Sortido = " + sortido); sortido[0] = 0.0004763; sortido[2] = true; sortido[6] = "Caderno"; document.write("<br>"); document.write("Sortido = " + sortido); --> </script> </body> </html>
Se atribuirmos um valor a um elemento do array com um ndice mais alto do que o seu comprimento, o sistema JavaScript resolve o problema aumentando o tamanho do array at chegar ao ndice pretendido. isso que acontece no exemplo anterior quando se chega linha que tem sortido[6] = "Caderno"; Os arrays so objetos, e entre as suas propriedades conta-se a propriedade length, que nos d o nmero de elementos (variveis) que ele contm num determinado momento. Assim, se ao exemplo anterior juntarmos uma linha com o seguinte cdigo:
13

var numeroDeElementos = sortido.length;
a varivel numeroDeElementos ficar com o valor 7 (repare que inserimos um elemento adicional com o ndice 6, o que fez crescer o array). De forma anloga se usarmos frutas_nacionais.length iremos obter 3.
7. Operadores
A linguagem JavaScript possui muitos operadores de diversos tipos. Aqui iremos abordar apenas os aspectos mais bsicos dos operadores disponveis.
7.1 Operadores de atribuio de valor

Uma das coisas que os operadores podem fazer fornecer um valor quilo que estiver sua esquerda. Se o que est esquerda for uma varivel ento o valor dela passar a ser aquilo que o operador forneceu, se for outro operador o valor fornecido ser usado como operando. Os operadores mais conhecidos so as quatro operaes aritmticas bsicas (adio, subtrao, multiplicao e diviso.) Para estes a linguagem JavaScript define as seguintes verses curtas: Verso curta x+=y x-=y x*=y x/=y Significado x=x+y x=x-y x=x*y x=x/y
Repare que aqui o sinal = no representa a igualdade matemtica. Ele serve apenas para indicar que a varivel que est sua esquerda deve passar a ter um valor igual ao valor da expresso que est sua direita. Se tivermos x=5 e y=7 a expresso x=x+y no representa uma igualdade matemtica mas sim a indicao que o valor de x deve passar a ser igual soma do valor que tem atualmente com o valor de y. Neste caso x passaria a valer 12.
7.2 Operadores de comparao

Um operador de comparao compara os valores que lhe so fornecidos (que designamos por operandos) e retorna um valor lgico que indica se o resultado da comparao verdadeiro ou falso. Os valores que recebe para analisar podem ser nmeros ou variveis de texto (string). Quando atuam sobre variveis de texto, as comparaes baseiam-se na forma como os caracteres esto ordenados seqencialmente. Esta ordenao baseia-se na ordem alfabtica. A lista seguinte apresenta estes operadores. Operador Igualdade (==) Desigualdade (!=) Maior do que (>) Maior ou igual (>=) Menor do que Descrio Verifica se os dois operandos so iguais Verifica se os operandos so desiguais Verifica se o operando da esquerda maior do que o da direita Verifica se o operando da esquerda maior ou igual ao da direita Verifica se o operando da esquerda Exemplo x==y d true se x igualar y x!=y d true se x no for igual a y x>y d true se x for maior do que y x>=y d true se x for maior ou igual a y x<y d true se x for menor
14

(<) Menor ou igual (<=)
menor do que o da direita verifica se o operando da esquerda menor ou igual ao da direita
do que y x<=y d true se x for menor ou igual a y
7.3 Operadores aritmticos

Um operador aritmtico recebe valores numricos (tanto variveis como expresses literais) e produz um valor numrico como resultado. Os operadores numricos mais importantes so a adio (+), a subtrao (-), a multiplicao (*), a diviso (/) e o resto da diviso (%). O funcionamento destes operadores em JavaScript respeita todas as regras da lgebra. Devido a muitas vezes ser necessrio adicionar ou subtrair uma unidade a uma varivel, a linguagem JavaScript define dois operadores especiais com esta finalidade. Assim, para adicionarmos uma unidade varivel variavel1 podemos escrever variavel1++, e para subtrairmos uma unidade variavel2 escrevemos variavel2--. Por ao destes operadores no final do exemplo seguinte a varivel variavel1 ter o valor 4 e a varivel variavel2 ter o valor 6.
var variavel1 = 3; variavel1++; var variavel2 = 7; variavel2--;
7.4 Operadores lgicos

Os operadores lgicos aceitam os valores lgicos true e false (verdadeiro e falso) como operandos e retornam valores lgicos como resultado. Os operadores lgicos base encontram-se listados a seguir (os restantes definem-se com base nestes trs). Operador e (&&) ou (||) negao (!) Utilizao b && c b || c !b Descrio D true se b for true e c for true. D false se b for false e c for false. D true nos casos restantes. D true se b for false e d false se b for true.
Os casos mais teis e interessantes de uso destes operadores utilizam dois ou os trs operadores ao mesmo tempo, como mostra a seguir: Se tivermos x = 4 e y = 7 a operao seguinte d false:
((x + y + 2) == 13) && (((x + y) / 2) == 2)
Se tivermos x = 4 e y = 7 a operao seguinte d true:

((y - x + 9) == 12) || ((x * y) == 2)
Se tivermos x = 4 e y = 7 a operao seguinte d false:

!((x/2 + y) == 9) || ((x * (y/2)) == 2)
8. Objetos
O objetivo da coleo de documentos de estudo de que este curso faz parte ensinar as tecnologias padro definidas para criar pginas e aplicaes para a Web. A
15

utilizao dos objetos da linguagem JavaScript aqui tratada de forma rpida. O estudo aprofundado deste tpico ser feito no Curso de Programao em JavaScript. Objetos definidos no padro ECMAScript A linguagem JavaScript uma implementao do padro ECMAScript. Esse padro define as regras de sintaxe que estamos estudando e um conjunto mnimo de objetos que fazem do ECMAScript uma verdadeira linguagem de programao, mas no define os objetos que permitem manipular e interagir tanto com o browser como com as pginas da Web. Para ser verdadeiramente til o JavaScrit tem de complementar o ECMAScript com objetos adicionais: Document Object Model (DOM) O W3C (World Wide Web Consortium) definiu o padro DOM para padronizar a forma como os browsers e as aplicaes da Web manipulam e interagem com as pginas da Web. Todos os browsers modernos implementam estes padres. Apesar de essas implementaes serem geralmente incompletas, elas so suficientes para que possamos programar quase tudo numa forma que funciona em todos os browsers dominantes (MSIE 6 e superior, Mozilla/Netscape e Opera.) Outros objetos teis Quando a linguagem JavaScript surgiu, os seus criadores definiram aqueles objetos que lhe pareceram importantes. Dentre eles alguns foram incorporados pelo padro ECMAScript, outros foram de alguma forma incorporados pelo DOM (geralmente com modificaes), e outros no esto presentes em qualquer padro oficial mas so suportados universalmente, o que faz deles padres de fato.
8.1 Exemplos prticos com objetos

Dois dos objetos que ficam imediatamente disponveis quando carrega um documento no browser so: o objeto document, que nos permite manipular e interagir com a pgina da Web, e o objeto window, que nos permite controlar a janela do browser que contm a pgina. O objeto window possui vrios mtodos. Entre eles temos os mtodos close(), alert(), confirm() e prompt(), com os quais podemos fechar a janela do browser, apresentar avisos ao usurio e pedir-lhe para nos dar uma resposta ou escrever alguma coisa. O cdigo:
<html> <body> <script type="text/javascript"> <!-window.alert("Esta é uma janela com um aviso"); --> </script> </body> </html>
16

faz aparecer uma janela com um aviso para o usurio. A notao por pontos significa que estamos chamando o mtodo alert() pertencente ao objeto window. Neste caso podamos ter escrito apenas alert(mensagem) e omitido a parte window (o browser j sabe que o mtodo alert pertence ao objeto window). O objeto document contm uma representao da pgina HTML. Cada um dos elementos que compem a pgina (formulrios, pargrafos, imagens, links, etc) podem ser lidos e manipulados utilizando este objeto. Depois de uma pgina estar carregada, o cdigo seguinte:
alert("A segunda imagem document.images[1].src); desta pgina foi carregada a partir de: " +
mostra a origem (src) de uma imagem. Repare que com o objeto document temos de usar sempre a notao por pontos, no sendo aceitas abreviaes.
9. Definir uma Funo

As funes permitem-nos agrupar vrias linhas de cdigo que realizam um determinado trabalho, dar-lhe um nome e execut-las chamando-as por esse nome. O exemplo seguinte define uma funo:
<html> <body> <script type="text/javascript"> <!-function dataAtual() { /* Cria um objeto com a data e hora atuais e mostra o seu valor na janela recorrendo ao mtodo toLocaleString() do objeto Date */ var d = new Date(); document.write("A data e hora são: " + d.toLocaleString()); } dataAtual(); // esta linha faz executar a funo --> </script> </body> </html>
17

Nunca esquea que em JavaScript as letras maisculas no so equivalentes s letras minsculas, por isso tenha sempre muita ateno ao fato de que o nome que se usa para chamar uma funo tem de ser rigorosamente igual ao nome dando durante sua definio. No exemplo anterior usamos os caracteres { e } para delimitar um bloco de cdigo. Tudo o que est dentro destes delimitadores faz parte da funo e ser executado sempre que esta for invocada escrevendo dataAtual() no seu cdigo. Como resultado ser escrita na pgina a data e hora do momento em que a funo foi chamada. Tambm podemos passar argumentos para a funo, como mostra a seguir:
<html> <body> <script type="text/javascript"> <!-function cumprimentar(nome) { var d = new Date(); document.write("Oi " + nome + "<br>A data e hora atuais são: " + d.toLocaleString()); } cumprimentar('Zezinho'); // esta linha faz executar a funo --> </script> </body> </html>
como teremos oportunidade de ver quando aprofundarmos o nosso estudo, as funes tm uma importncia fundamental na programao de scripts complexos.
10. As instrues condicionais if...else

Uma instruo if permite-nos executar uma poro de cdigo apenas se for verdadeira uma determinada condio. Se essa condio no for verdadeira essa poro de cdigo no ser executada, podendo ser ou no executado outro cdigo alternativo, que ser especificado atravs da palavra else. A idia principal que est na base das instrues if/else pode ser resumida numa frase: "Se chegarmos antes da hora de almoo vamos dar um passeio, caso contrrio vamos para a mesa". O exemplo seguinte ilustra esta idia:
<html> <body>
18

<script type="text/javascript"> <!-var hora = 10; if(hora < 12) document.write("Vamos passear"); else document.write("Vamos para a mesa"); --> </script> </body> </html>
Neste exemplo a hora de antes do almoo e ser apresentada uma janela que tem escrito Vamos passear. Se a hora fosse 12 ou mais seria mostrado o texto Vamos para a mesa. Uma instruo if no precisa de ter associada a si uma instruo else. Quando isso acontece se a condio no se verificar no ser executado qualquer cdigo alternativo.
11. Executar cdigo repetidamente

Um dos recursos mais poderosos no arsenal de qualquer linguagem de programao a capacidade para repetir a realizao de tarefas de uma forma simples. Para isso definem-se ciclos de repetio dentro dos quais se coloca o cdigo que se pretende executar repetidamente.
11.1 Ciclos for

Um ciclo for consiste num conjunto de trs expresses contidas entre parntesis, separadas pelo caractere ; (ponto e vrgula) e pelo cdigo a executar em cada um dos ciclos. Normalmente esse cdigo estar contido entre chaves para formar um bloco, mas se consistir numa nica linha no preciso usar as chaves. A primeira das expresses do ciclo for declara a varivel a usar como ndice (funciona apenas como contador) e a inicia. A segunda expresso declara uma condio que deve ser testada sempre que se inicia um novo ciclo. Se essa condio der false como resultado o ciclo pra e o cdigo definido abaixo no voltar a ser executado. A terceira expresso serve para atualizar o valor do ndice no final de cada ciclo. Ilustremos isto com um exemplo simples:
<html> <body> <script type="text/javascript">  </script> </body> </html>
Este pedao de cdigo comea por definir uma varivel (global) chamada soma atribuindo-lhe o valor zero. O ciclo for define uma varivel de ndice (var i = 0) e verifica se a condio i < 3 cumprida. Se o resultado da verificao for true ser executado o cdigo que se encontra entre as chaves mais abaixo, o qual adiciona i varivel soma e apresenta uma mensagem informando sobre o valor atual da varivel i. Depois executada a terceira instruo do ciclo (i++), a qual soma uma unidade ao valor do ndice i e d-se incio a um novo ciclo. Este comea testando de novo o respeito pela condio i < 3. Se o resultado for true volta a executar o cdigo que est entre as chaves com o valor atualizado de i. Isto se repete at que i < 3 d false, o que termina a execuo do ciclo for. O exemplo seguinte mais elaborado e executa um ciclo que percorre todos os elementos de um array de nomes e destaca aqueles que comeam com a letra H.
<html> <body> <script type="text/javascript"> <!-var nomes = new Array("Manuel", "Rita", "Joana", "Francisco", "Lus", "Bernardo", "Helder", "Patrcia", "Hugo", "Antnio", "Fabrcio"); for(var i=0; i < nomes.length;i++) { var nome = nomes[i] if(nome.charAt(0) == "H") alert("O nome " + nome + " comeca com a letra H"); } --> </script> </body> </html>
20

Neste exemplo usamos o mtodo charAt() do objeto String para verificar se o caractere inicial do nome (aquele est na posio zero) igual letra H.
11.2 Ciclos while

O ciclo while muito parecido com o ciclo for. De fato tudo o que um faz pode ser feito com o outro, embora por questes de legibilidade (e de elegncia do cdigo) cada um deles possa ter reas de aplicao que para as quais mais indicado do que o outro. O ciclo while avalia uma condio e se ela der true executa o bloco de cdigo que vem imediatamente a seguir. Se der false salta para frente do bloco de cdigo que vem a seguir sem o executar. Este exemplo usa um ciclo while para produzir o mesmo efeito que o exemplo anterior feito com o ciclo for:
<html> <body> <script type="text/javascript"> <!-soma = 0; i = 0; while(i < 3) { soma += i; document.write("O valor da variável i é agora de " + i + "<br>"); i++; } --> </script> </body> </html>
21

PARTE II: Programao em JavaScript

1. Reviso de matrias importantes
Na 1 Parte deste curso em "Introduo ao JavaScript" ns abordamos os aspectos bsicos desta linguagem de programao. Apesar disso, voltamos a chamar a ateno do leitor para algumas coisas que sendo simples podem causar problemas a quem est dando os primeiros passos. Questes bsicas Para comear certifique-se de que ir compreender bem os exerccios prticos que sero apresentados a seguir. Eles ilustram alguns aspectos importantes para o estudo que se segue. Os exerccios apresentados neste tutorial contm explicaes e devem ser estudados para compreender as matrias.
22

Exemplos de Aplicao
JavaScript na seo head
<html> <head> <script type="text/javascript"> <!-alert("Isto e uma caixa de alerta executada pelo JavaScript") // --> </script> <title></title> </head> <body> </body> </html>
JavaScript no corpo do documento

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-document.write("Esta mensagem foi escrita enquanto a página estava sendo carregada") // --> </script> </body> </html>
Escrever texto na pgina com JavaScript

<html> <head> <title></title> </head> <body>
23

<p> O mtodo document.write() permite escrever texto diretamente no corpo da pgina enquanto ela carrega. </p> <script type="text/javascript"> <!-document.write("Est vendo?") // --> </script> </body> </html>
Um arquivo externo com cdigo JavaScript

ext.js document.write("Este script veio de um arquivo externo!!!") <html> <head> <title></title> </head> <body> <p> O script responsvel pela escrita do texto mais abaixo est guardado em um arquivo externo chamado "ext.js". </p> <p> <script type="text/javascript" src="ext.js"></script> </p> </body> </html>
Comentrios no cdigo JavaScript

<html> <head> <title></title>
24

</head> <body> <script type="text/javascript"> <!-// Aqui temos um comentrio com uma nica linha document.write("Ao encontrar os caracteres \/\/ o interpretador de JavaScript ignora o resto da linha") document.write("<br><br>") /* Aqui temos um comentrio com vrias linhas. O interpretador de JavaScript ignora tudo o que estiver dentro do comentrio. */ document.write("Ao encontrar os caracteres /* o interpretador de ") document.write("JavaScript procura os caracteres */ e continua a interpretar o cdigo depois deles. ") document.write("Tudo o que estiver entre /* e */ ignorado pelo interpretador de JavaScript.") // --> </script> </body> </html>
Declarar uma varivel, atribuir-lhe um valor e apresent-la na pgina

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var linguagem = "JavaScript" document.write(linguagem) document.write("<h1>"+linguagem+"<\/h1>") // --> </script> <p> Neste exemplo declara-se uma varivel, atribui-se um valor e escreve esse valor na pgina. </p> <script type="text/javascript"> <!-var linguagem = "JavaScript" document.write("<p>O "+linguagem+" muito fcil de aprender<\/p>") // --> </script> <p> Uma vez atribudo um valor varivel podemos us-la vrias vezes para representar o valor que lhe foi atribudo. </p> </body> </html>
25

Terminar ou no as linhas com ponto e vrgula Na 1 Parte deste curso em "Introduo ao JavaScript", em todos os exemplos apresentados, terminamos cada uma das linhas de cdigo com o caractere ; (ponto e vrgula.) Essa prtica visa evitar alguns erros e facilita a sua deteco, por isso ela recomendada a todos aqueles so iniciantes no estudo do JavaScript. Porm, ao contrrio do que acontece nas linguagens Java e C++, em que o uso do ponto e vrgula obrigatrio, em JavaScript ele facultativo. A maioria dos programadores de JavaScript no gosta de ver as linhas terminadas com ponto e vrgula e por isso no o usam. Por isso, os exemplos e exerccios de aplicao que voc encontrar daqui pra frente no iro seguir a recomendao do uso do ; (ponto e vrgula), porm sempre que puder use tal recomendao. Lembre-se que voc ainda um iniciante em JavaScript.
Exemplos de Aplicao
Usar ou no usar ponto e vrgula
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-/* As linhas seguintes terminam com ponto e vrgula, que indica o fim da instruo. */ var s = "Kbong"; var z = "El "; var ss = z+s; var u="Babalou"; // Repare que na linha anterior colocamos duas instrues numa s linha. /* Isto foi possvel porque as instrues esto separadas por ponto e vrgula */ /* Nas linhas seguintes no se usa ponto e vrgula. O fim da instruo indicado pelo fim da linha. */ var s1 = "Pibe" var z1 = "El " var ss1 = z1+s1 var u1="Ganda nia" /* Quando no usamos ponto e vrgula s podemos escrever uma nica instruo em cada linha */
26

// --> </script> <p> Estude o cdigo JavaScript deste exemplo e leia os comentrios que o acompanham. </p> </body> </html>
Letra maiscula no equivalente letra minscula Uma outra coisa que devemos levar em conta que em JavaScript no podemos trocar letras maisculas por minsculas nem minsculas por maisculas. Esta regra aplica-se a nomes de instrues, nomes de variveis, nomes de funes, nomes de objetos e a tudo o que possa existir num script.
Exemplos de Aplicao
Diferenas entre letra maiscula e letra minscula (nomes de variveis)
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var a, A a=2 A=31 document.write("a = " + a) document.write("<br>") document.write("A = " + A) // --> </script> <p> Como pode ver as variveis a e A possuem valores diferentes. Nunca esquea que <b>em JavaScript as maisculas e as minsculas no so equivalentes</b>. </p> </body> </html>
27

Diferenas entre letra maiscula e letra minscula

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-// Estude as instrues try ... catch no captulo 5 try { /* Colocamos o cdigo dentro de um bloco try ... catch porque quando tentarmos invocar o mtodo Write (inexistente) do objeto document ser gerado um erro de script*/ document.write("Este texto foi escrito pelo mtodo write() do objeto document.") document.write("<br>") /* Agora no nome do mtodo write() trocamos o w minsculo por um W maisculo */ document.Write("Este texto foi escrito pelo mtodo Write() do objeto document.") } catch(e) { document.write(e) } // --> </script> <p> Como pode ver a linha que usa o mtodo Write do objeto document no foi executada. Isto aconteceu porque esse mtodo no existe. Em JavaScript Write() no equivalente a write(). </p> </body> </html>
28

Cuidados para se ter com as variveis Quando os scripts que escrevemos so curtos, fcil desenvolver de modo a que cada parte do cdigo no perturbe o funcionamento das outras restantes. No entanto, medida que os conhecimentos avanam, o nmero de funes que criamos ir aumentar. Quando isso acontece precisamos ter algum cuidado ao declararmos as variveis porque podemos fazer com que uma funo acabe alterando dados globais, o que pode provocar erros. O primeiro exemplo da lista seguinte ilustra uma situao destas: Exemplos de Aplicao Variveis globais
<html> <head> <title></title> <script type="text/javascript"> <!-var s="Canrio" var z=s.substring(4,7) // z contm a string "rio" /* As duas funes seguintes fazem a mesma coisa, mas a primeira altera a varivel global z enquanto que a segunda declara uma varivel local com o mesmo nome deixando o valor da global inalterado */ function trocarString(c) { var l=c.length // repare que no se usa a palavra var no incio da prxima linha z=c.substring(l/2,l)+c.substring(0,l/2) return z } function trocarStringLocal(c) { var l=c.length // repare que se usa a palavra var no incio da prxima linha var z=c.substring(l/2,l)+c.substring(0,l/2) return z } // --> </script> </head> <body> <script type="text/javascript"> <!-document.write("Antes de invocarmos a funo trocarStringLocal() temos z="+z) trocarStringLocal("Cereja") document.write("<br>") document.write("Depois de invocarmos a funo trocarStringLocal() temos z="+z) document.write("<br><br>") document.write("Antes de invocarmos a funo trocarString() temos z="+z) trocarString("Banana") document.write("<br>") document.write("Depois de invocarmos a funo trocarString() temos z="+z) // --> </script> <p> Se o valor que guardamos na varivel z no incio do script for necessrio mais tarde, estaremos perante um erro porque a funo trocarString() alterou o seu valor indevidamente. Se dentro de uma
29

funo usarmos a palavra var ao declaramos variveis temos a certeza de que no alteramos os valores das variveis globais. isso que se faz na funo trocarStringLocal(). </p> </body> </html>
Variveis locais
<html> <head> <title></title> <script type="text/javascript"> <!-function trocarString(c) { var l=c.length // repare que se usa a palavra var no incio da prxima linha var z=c.substring(l/2,l)+c.substring(0,l/2) return z } // --> </script> </head> <body> <script type="text/javascript"> <!-// As 7 linhas seguintes so necessrias para evitarmos um erro de script // Estude o captulo 5 para saber mais sobre as instrues try ... catch var s try { s=z //a varivel z existe } catch(e) { s='indefinido' //a varivel z no existe } document.write("Antes de invocarmos a funo trocarString temos z="+s) trocarString("Cereja") document.write("<br>") // As 6 linhas seguintes so necessrias para evitarmos um erro de script try { s=z //a varivel z existe }
30

catch(e) { s='indefinido'// }
a varivel z no existe
document.write("Depois de invocarmos a funo trocarString() temos z="+s) // --> </script> <p> Como pode ver a varivel z s existe dentro da funo em que foi declarada. Fora dessa funo ela nunca chega a existir. Isto acontece porque ela uma varivel local </p> </body> </html>
Domnio de existncia de uma varivel

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-// As 7 linhas seguintes so necessrias para evitarmos um erro de script // Estude o captulo 5 para saber mais sobre as instrues try ... catch var s try { s=i // a varivel i existe } catch(e) { s='indefinido' //a varivel i no existe } document.write("Antes de executarmos o ciclo for temos i="+s) document.write("<br><br>") for(var i=0;i<5;++i) document.write("i="+i+", ") document.write("<br>terminou o ciclo for<br>") s=i document.write("Depois de executarmos o ciclo for temos i="+s) // --> </script> <p> Como pode ver a varivel i no existia antes de ser executado o ciclo <code>for</code>. Ela s passou a existir depois de ser declarada. O domnio de existncia de uma varivel comea no meio em que declarada e termina quando terminar o script (variveis globais) ou quando terminar a funo (variveis locais). </p> </body> </html>
31

Caracteres especiais Em JavaScript, as strings (variveis que contm texto) definem-se colocando texto entre aspas ou entre apstrofos (caractere '). Por isso dizemos que as aspas e os apstrofos so caracteres delimitadores de uma string: a string comea na primeira ocorrncia de um caractere delimitador e termina na segunda ocorrncia mas sempre na mesma linha. O exemplo seguinte ilustra este ponto:
var s = "Isto uma string" var z = 'Isto outra string'
Imaginemos agora que queremos colocar os prprios caracteres delimitadores como parte do contedo da string. No podemos escrever o que se mostra a seguir porque est errado:
var s = "O meu nome "Zezinho"" var z = 'O meu nome 'Luiso'' // isto est errado // isto est errado
Mas podemos escrever

var s = "O meu nome \"Zezinho\"" var z = 'O meu nome \'Luiso\''
Ao colocarmos o caractere \ (barra para trs) antes das aspas ou dos apstrofos estamos dizendo ao interpretador de JavaScript que aquela aspa ou apstrofo no um delimitador mas sim um caractere normal que deve fazer parte do contedo da string. Podemos obter o mesmo resultado do exemplo anterior escrevendo na forma seguinte (que bem mais legvel e deve ser preferida):
var s = 'O meu nome "Zezinho"' var z = "O meu nome 'Luiso'"
H caracteres que s podem ser obtidos usando a barra para trs. O mais importante deles o caractere newline (nova linha), que provoca uma mudana de linha e no pode ser obtido de nenhuma outra forma. Sempre que quisermos forar uma mudana de linha numa string temos de escrever \n (caractere newline), assim:
var s = 'O meu nome "Zezinho".\nTodos tm respeitinho por mim!'
32

Tambm conveniente (mas no absolutamente necessrio) que ao escrevermos o caractere / num script o faamos na forma \/ (colocando uma barra para trs antes da barra para frente). Isto recomendvel porque os comentrios com uma s linha comeam com os caracteres //. Se usarmos a barra para trs temos a certeza de que o interpretador no ir confundir o caractere / com o incio de um comentrio.
Exemplos de Aplicao
Caracteres especiais: delimitadores de strings
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var s = "Isto uma string" var z = 'Isto outra string' var s1 = "O meu nome \"Zezinho\"" var z1 = 'O meu nome \'Luiso\'' var s2 = 'O meu nome "Zezinho"' var z2 = "O meu nome 'Luiso'" document.write('s = '+s) document.write('<br>') document.write('z = '+z) document.write('<br>') document.write('s1 = '+s1) document.write('<br>') document.write('z1 = '+z1) document.write('<br>') document.write('s2 = '+s2) document.write('<br>') document.write('z2 = '+z2) // --> </script> </body> </html>
Caracteres especiais: newline

<html> <head> <title></title> <script type="text/javascript">
33

<!-// Cada ocorrncia dos caracteres \n provoca uma mudana de linha var s = "Linha 1: Esta uma string com vrias linhas.\n Linha 2\n Linha 3\n\nLinha 5" alert(s) // --> </script> </head> <body> </body> </html>
Utilizar caracteres especiais do HTML em um script A linguagem HTML e XHTML trata alguns caracteres de forma especial. Entre eles temos: &, < e >. Estes caracteres so utilizados na linguagem JavaScript para formar operadores lgicos. Se os usarmos num script (o que inevitvel, porque eles so indispensveis) as nossas pginas j no sero capazes de passar num teste de validao de HTML ou de XHTML e at podem ser interpretadas incorretamente por alguns browsers. Colocar os scripts dentro de comentrios do HTML Para evitarmos que isso acontea devemos fazer o seguinte: sempre que dentro de um script colocarmos um dos caracteres &, < ou > devemos colocar todo o cdigo do script dentro de um comentrio do HTML. Isto serve para evitar que o browser tente interpretar o contedo do script como se fosse HTML, o que seria errado. Por outro lado, um validador de HTML ou de XHTML que v analisar a pgina fica sabendo que o script no deve ser validado porque est escrito numa linguagem diferente. O exemplo seguinte ilustra este ponto:
<html> <head><title></title></head> <body> <script type="text/javascript"> <!-document.write("<h1>Ol Mundo!</h1>") --> </script> <p> Sempre que usarmos caracteres especiais do HTML dentro do cdigo JavaScript conveniente que coloquemos todo o contedo do script dentro de um comentrio do HTML. Deste modo evitamos possveis erros de interpretao por parte do browser e erros de validao inevitveis. </p> <script type="text/javascript"> <!-var s='<p style="color: blue">Aqui temos um pargrafo azul.</p>' document.write(s) --> </script>
34

</body> </html>
Exemplos de Aplicao
Formatar texto com etiquetas HTML
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-document.write("<h1>Ol Mundo!<\/h1>") // --> </script> <p> Como acabou de ver podemos usar etiquetas do HTML com o mtodo document.write para produzir contedo formatado mas <b> preciso ter cuidado!!!</p> </p> <p> <b>Sempre que colocarmos etiquetas HTML dentro de um script conveniente colocar o contedo do script dentro de um comentrio do HTML.</b> </p> <script type="text/javascript"> <!-for(var i=1;i<=6;++i) document.write('<h'+i+'>Aqui temos um cabealho de nvel '+i+'</h'+i+'>') // --> </script> </body> </html>
35

Chamar uma funo a partir de uma ligao de hipertexto Por diversas vezes, em um desenvolvimento, ser til ter ligaes de hipertexto que ao invs de transportarem imediatamente o usurio para outra pgina executem uma instruo ou uma funo escritas em JavaScript. A forma mais simples de conseguirmos isso consiste em escrever o nome da funo no atributo href do elemento <a> precedido pela string javascript:, assim:
<html> <body> <a href="javascript:alert('Ol')">Dizer Ol</a> </body> </html>
Quando encontra uma ligao cujo atributo href comea por javascript: o browser passa a interpretar o resto do valor do atributo href como um conjunto de instrues escritas em JavaScript e no carrega uma nova pgina. Este mtodo permite executar uma ou mais instrues que devem obrigatoriamente ser separadas por ponto e vrgula, como se mostra a seguir:
36

<html> <body> <a href="javascript:var s='Eu sou'; s+=' o mximo'; alert(s)"> Clique aqui para executar trs instrues</a> </body> </html>
Esta forma de executar JavaScript a partir de uma ligao tem algumas aplicaes teis, mas existe uma outra forma mais poderosa que se baseia no evento onclick. Essa forma permite continuar a usar o atributo href da maneira habitual e executar JavaScript. Continuar na linha seguinte uma linha extensa O JavaScript no impe limites ao comprimento das linhas de cdigo. Elas podem se entender pelo comprimento que for necessrio. No entanto, quando escrevemos strings (variveis de texto) extensas, a utilizao de linhas muito longas dificulta muito a escrita e a legibilidade do cdigo. Nestes casos preciso limitar o comprimento das linhas de cdigo. Por isso o JavaScript permite-nos interromper a escrita de strings e continuar a escrever na linha seguinte, assim:
<html> <body> <script type="text/javascript"> <!-var s = 'O meu nome "Zzinho". Na minha escola todos tm muito \ respeitinho por mim porque eu sou o mais forte. \ Tenho 15 anos vou j para o terceiro ano da escola primria.' document.write(s) --> </script> </body> </html>
37

Ao terminarmos uma linha com o caractere \ (barra para trs) estamos dizendo ao interpretador de JavaScript que a string continua na linha seguinte. Isto se aplica apenas a strings e no ao cdigo normal.
2. Os operadores da linguagem JavaScript

Os operadores servem para realizar operaes com valores, dando como resultado novos valores.
2.1 Operadores aritmticos

Operador + * / % ++ -Descrio Adio Subtrao Multiplicao Diviso Resto da diviso Incrementar (aumentar uma unidade) Decrementar (diminuir uma unidade) Exemplo 2+2 5-2 4*5 15/5 5/2 5%2 10%8 10%2 x=5 x++ x=5 x-Resultado 4 3 20 3 2.5 1 2 0 x=6 x=4
2.2 Operadores de atribuio (formas abreviadas)

Operador = += -= *= /= %= Exemplo x=y x+=y x-=y x*=y x/=y x%=y O Mesmo Que x=y x=x+y x=x-y x=x*y x=x/y x=x%y
2.3 Operadores de comparao

Operador == != > Descrio igual a no igual a maior do que Exemplo 5==8 5!=8 5>8 Resultado false true false
38

>= <=
menor do que maior ou igual a menor ou igual a
5<8 5>=8 5<=8
true false true
2.4 Operadores lgicos

Operador && || ! Descrio e (and) ou (or) negao (not) Exemplo x=6 y=3 (x < 10 && y > 1) d true x=6 y=3 (x==4 || y==4) d false x=6 y=3 !(x==y) d true
Neste estudo no abordamos os operadores que operam bit a bit porque eles no so fceis de compreender e no so importantes para os objetivos que temos em vista. O seu estudo poder ser feito em um curso de JavaScript avanado.
Exemplos de Aplicao
Atribuio simples de valores a variveis
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-//Exemplos de atribuio simples de valores a variveis var s = "Isto vai ser bonito... " // uma string var z = s + "Ah mas vai!" var n = 1 // um nmero inteiro var p = q = 2 // dois nmeros inteiros document.write("s = \""+s+"\"") document.write("<br>") document.write("z = \""+z+"\"") document.write("<br>") document.write("n = "+n) document.write("<br>") document.write("p = "+p) document.write("<br>") document.write("q = "+q) // --> </script> </body> </html>
39

Incrementar valores (aumentar uma unidade)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var p,n = 0 p = ++n document.write("n = " + n) document.write("<br>") document.write("p = " + p) document.write("<br>Neste primeiro caso incrementou-se o valor de n ") document.write(" e depois deu a p o valor j incrementado.<br><br>") n=0 p = n++ document.write("n = " + n) document.write("<br>") document.write("p = " + p) document.write("<br>Neste caso deu a p o valor de n ") document.write(" e s depois se incrementou o valor de n") // --> </script> </body> </html>
Decrementar valores (diminuir uma unidade)

40

<script type="text/javascript"> <!-var p,n = 0 p = --n document.write("n = " + n) document.write("<br>") document.write("p = " + p) document.write("<br>Neste caso primeiro diminuiu o valor de n ") document.write(" e depois deu a p o valor j diminudo.<br><br>") n=0 p = n++ document.write("n = " + n) document.write("<br>") document.write("p = " + p) document.write("<br>Neste caso deu a p o valor de n ") document.write(" e s depois se diminuiu o valor de n") // --> </script> </body> </html>
Operaes aritmticas
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var p = 5, n = 2 var r = p % n document.write("O resto da diviso de 5 por 2 " + r) document.write("<br>") document.write("p = " + p) p *= 3 // equivale a p = p*3 document.write("<br>Mas agora: p = " + p + ", porque o seu valor foi multiplicado por 3<br>") p /= 5 // equivale a p = p/5 document.write("e agora: p = " + p + ", porque o seu valor foi dividido por 5<br>") p += 4 // equivale a p = p+4 document.write("e agora: p = " + p + ", porque ao seu valor somamos 4 unidades<br>") p -= 3 // equivale a p = p-3 document.write("e agora: p = " + p + ", porque do seu valor subtramos 3 unidades") // --> </script> </body>
41

</html>
Atribuio mais elaborada de valores a variveis

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-// Exemplos mais elaborados de atribuio de valores a variveis var p=2,q=3,n=1 // trs nmeros inteiros declarados de uma s vez var m = ++n // nmero inteiro com incremento antes da atribuio var r = (q * p) + m // valor obtido aps a realizao de vrias operaes document.write("n = "+n) document.write("<br>") document.write("p = "+p) document.write("<br>") document.write("m = "+m) document.write("<br>") document.writeln("q = "+q) document.write("<br>") document.write("r = "+r) // --> </script> </body> </html>
Comparaes
<html> <head> <title></title>
42

</head> <body> <script type="text/javascript"> <!-var b = (5 > 2) document.write("b = " + b + " document.write("<br>") b = (5 != 2) document.write("b = " + b + " document.write("<br>") b = (5 == 2) document.write("b = " + b + " document.write("<br>") b = (5 >= 2) document.write("b = " + b + " document.write("<br>") b = (5 >= 5) document.write("b = " + b + " document.write("<br>") b = (5 >= 5.1) document.write("b = " + b + " // --> </script> </body> </html>
(porque 5 > 2 uma afirmao verdadeira)") (porque 5 != 2 uma afirmao verdadeira)") (porque 5 == 2 uma afirmao falsa)") (porque 5 >= 2 uma afirmao verdadeira)") (porque 5 >= 5 uma afirmao verdadeira)") (porque 5 >= 5.1 uma afirmao falsa)")
Operaes lgicas
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var b = (5 > 2) var v = (2 > 5) document.write("b = " + b + " document.write("<br>") document.write("v = " + v + " document.write("<br>") document.write("!b = " + !b + document.write("<br>") document.write("!v = " + !v + document.write("<br>") var c = b && v document.write("c = " + c + " document.write("<br>") c = b || v document.write("c = " + c + " document.write("<br>") b = (3 < 10 && 2 > 1) || !c
(porque 5 > 2 uma afirmao verdadeira)") (porque 2 > 5 uma afirmao falsa)") " (porque a negao de true false)") " (porque a negao de false true)")
(porque a operao: true && false d false)") (porque a operao: true || false d true)")
43

document.write("b = " + b + " (porque a operao anterior d true)") // --> </script> </body> </html>
2.5 Adio de texto

O JavaScript permite produzir facilmente uma nova varivel de texto (String) cujo valor igual justaposio dos valores de outras variveis. Isso se consegue usando o operador + (adio), assim:
txt1="Ai minha mezinha... " txt2="Isto vai ser um massacre!" txt3=" Estamos fritos!" txt4=txt1+txt2+txt3
O resultado igual a:
txt4="Ai minha mezinha... Isto vai ser um massacre! Estamos fritos!"
Se adicionar uma varivel de texto a um valor que no seja texto, o sistema JavaScript faz a adio na mesma. Para isso ele converte para forma textual o valor que no texto e faz a adio. O resultado uma string (texto.) Nos exerccios listados mais abaixo pode ver melhor a forma como isso feito.
Exemplos de Aplicao
Somar texto com texto
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var txt1="Ai minha mezinha... " var txt2="Isto vai ser um massacre!" var txt4=txt1+txt2 document.write('txt4 = "' + txt4 +'"') document.write('<br>') txt4 += " Socoooorrro..." document.write('txt4 = "' + txt4 +'"') // --> </script> </body>
44

</html>
Somar texto com outros valores

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var txt="Ai minha mezinha... " var n= 20 txt += "Eles so mais de " + n /* quando somamos um nmero a uma string o sistema javascript constri automaticamente uma verso de texto do nmero e soma esse texto string */ document.write('txt = "' + txt +'"') // --> </script> </body> </html>
3. Instrues condicionais
As instrues condicionais testam uma condio e com base no resultado do teste decidem se uma parte do cdigo deve ou no ser executada. Elas nos permitem executar cdigo diferente em situaes diferentes.
3.1 As instrues if e if ... else

A instruo if 45

A instruo if se usa para testar uma condio e executar um bloco de cdigo apenas quando ela satisfeita. A sua sintaxe a seguinte:
if (condio) { cdigo a executar se a condio for verdadeira }
A seguir temos exemplos com esta instruo:

var i = 10 var s if (i < 10) s = "O nmero i menor do que 10" // o cdigo a ser executado s ocupa uma linha no sendo // preciso coloc-lo entre chaves if (i >= 10) { s = "O nmero i maior ou igual a 10" i = 0 } // o cdigo a ser executado s ocupa uma linha no sendo // preciso coloc-lo entre chaves
A instruo if ... else A instruo if ... else usa-se para testar uma condio. Se a condio for satisfeita ser executado um bloco de cdigo e se no for satisfeita ser executado um outro bloco alternativo. A sua sintaxe a seguinte:
if (condio) { cdigo a executar se a condio for verdadeira } else { cdigo a executar se a condio for falsa }
A seguir temos um exemplo com esta instruo:

<html> <body> <script type="text/javascript"> <!-var i = 10 var s if (i < 10) s = "O nmero i menor do que 10" else { s = "O nmero i maior ou igual a 10" i = 0 } document.write(s) --> </script> </body> </html>
46

Exemplos de Aplicao
A instruo if
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var d = new Date() var time = d.getHours() if (time < 12) document.write("<h1>Bom dia</h1>") // --> </script> <p> Este exemplo demonstra a instruo if. </p> <p> Se a hora marcada pelo relgio do seu computador for inferior a 12 ser escrita uma saudao de bom dia. </p> </body> </html>
Instruo if...else
47

<script type="text/javascript"> <!-var d = new Date() var hora = d.getHours() if (hora < 12) document.write("<h1>Bom dia</h1>") else { if(hora > 18) document.write("<h1>Boa noite</h1>") else document.write("<h1>Boa tarde</h1>") } // --> </script> <p> Este exemplo demonstra as instrues if ... else. </p> <p> Se a hora marcada pelo relgio do seu computador for inferior a 12 ser escrita uma saudao de bom dia, se for superior a 18 a saudao ser de boa noite e nos restantes casos ser de boa tarde. </p> </body> </html>
Produzir uma ligao aleatria

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var r=Math.random() if (r>0.666) document.write('<a href="http://www.w3.org" target="_blank">W3C</a>') else { if(r<0.333) document.write('<a href=http://www.google.com.br target="_blank"> Google</a>') else document.write('<a href=http://www.registro.br target="_blank">Registro</a>') } // --> </script>
48

<p> Este script produz trs ligaes de hipertexto aleatoriamente. Atualize vrias vezes a pgina para visualizar as modificaes. </p> </body> </html>
3.2 Atribuio condicional de valores

A linguagem JavaScript possui um operador que nos permite escolher o valor a atribuir a uma varivel consoante o resultado do teste que feito a uma condio. Esse operador um operador condicional de atribuio de valor e composto por diversas partes: uma condio, um ponto de interrogao e dois valores que podem ser atribudos varivel separados pelo caractere : (dois pontos). Ele tem a vantagem de permitir escrever cdigo compacto que mais fcil de ler pelos programadores experientes. A sua sintaxe a seguinte:
varivel = (condio) ? valor1 : valor2
Este operador atua do seguinte modo: se a condio for verdadeira a varivel passar a ter o valor1; se a condio no for satisfeita ser atribudo o valor2 varivel.
Exemplos de Aplicao
Atribuio condicional de valores
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var sexo = "masculino" var tipo = (sexo=="masculino") ? "Coca" : "Fanta" document.write("Esse cara " + tipo) document.write("<br>") var sexo = "feminino" var tipo = (sexo=="masculino") ? "Coca" : "Fanta" document.write("Esse cara " + tipo) // --> </script> </body>
49

</html>
Atribuio condicional de valores (verso 2)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var velocidade = 100 var s = (velocidade > 100) ? "excessiva" : "legal" document.write("A sua velocidade na rodovia " + s) // --> </script> <p> O operador condicional de atribuio de valor tambm pode ser usado dentro de expresses normais. </p> </body> </html>
3.3 A instruo switch

Nota: Apesar de esta instruo no fazer parte do padro ECMAScript, ela suportada por todos os browsers importantes. A instruo switch usa-se para comparar o valor do seu argumento (uma varivel ou uma expresso) com vrios valores. Para cada caso em que houver uma igualdade ser executada uma determinada poro de cdigo. A sintaxe desta instruo a seguinte:
switch (expresso)
50

{ case label1: cdigo a executar se expresso = label1 break case label2: cdigo a executar se expresso = label2 break default: cdigo a executar se a expresso no for igual a nenhuma das alternativas apresentadas antes }
Esta instruo funciona do seguinte modo: Primeiro calcula-se o valor da expresso que argumento da instruo switch. A seguir compara-se o resultado da expresso com um conjunto de alternativas que so fornecidas a seguir palavra "case" e terminadas pelo smbolo : (dois pontos). Sempre que a comparao detectar uma igualdade ser executada a poro de cdigo que est associada a esse caso. A execuo do cdigo prossegue pelas linhas seguintes at ser encontrada a instruo break ou at que termine o bloco switch. O exemplo seguinte mostra como se usa esta instruo.
<html> <body> <script type="text/javascript"> <!-// este exemplo usa a instruo switch para dizer se um nmero i // pertence ou no ao conjunto {6, 12, 32, 66} var i = 12 var s = "O nmero " + i switch(i) { case 6: s += " break case 12: s += " break case 32: s += " break case 66: s += " break default: s += " }
pertence " pertence " pertence " pertence " no pertence "
s += "ao conjunto {6, 12, 32, 66}" document.write(s) --> </script> </body> </html>
51

Uma vez detectado um acerto, inicia-se a execuo da poro de cdigo que lhe corresponde. Se no fim dessa poro no colocarmos uma instruo break, todas as instrues do bloco switch que esto mais abaixo sero executadas at que o bloco switch termine ou at que seja encontrada uma instruo break. Este comportamento pode ser explorado para escrever cdigo mais compacto. O exemplo seguinte mostra como isso se faz:
<html> <body> <script type="text/javascript"> <!-// este exemplo usa a instruo switch para dizer se um nome // pertence ou no ao conjunto {"Heitor", "Henrique", "Helder"} var nome = "Roberto" var s = 'O nome "' + nome switch(nome) { case "Heitor": case "Henrique": case "Helder": s += '" pertence ' break default: s += '" no pertence ' } s += 'ao conjunto {"Heitor", "Henrique", "Helder"}' document.write(s) --> </script> </body> </html>
52

Como pode ver, para acrescentarmos um elemento ao conjunto de nomes basta acrescentar uma linha com a palavra "case".
Exemplos de Aplicao
A instruo switch
<html> <head> <title></title> </head> <body> <b><script type="text/javascript"> <!-var d = new Date() var dia = d.getDay() switch (dia) { case 5: document.write("Finalmente Sexta-feira!") break case 6: document.write("Hoje Sbado. Ihuuuu!") break case 0: document.write("Hoje domingo. J falta pouco para Segunda-feira :-(") break default: document.write("Que aflio, ainda falta tanto para o fim de semana.") } // --> </script></b> <p> Este exemplo escreve uma frase em funo do dia da semana. </p> <p> Repare que Domingo=0, Segunda-feira=1, Tera-feira=2, ... </p> </body> </html>
A instruo switch (verso 2)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-// este exemplo usa a instruo switch para dizer se um nmero i
53

// pertence ao conjunto {6, 12, 66}, ao conjunto {16, 22, 76}, se // igual a 37, ou se no verifica nenhuma destas condies var i = 37 var s = "O nmero " + i switch(i) { case 6: case 12: case 66: s += " pertence ao conjunto {6, 12, 66}" break case 16: case 22: case 76: s += " pertence ao conjunto {16, 22, 76}" break case 37: s +=" igual a 37" break default: s += " no verifica nenhuma das condies" } document.write(s) // --> </script> </body> </html>
4. Execuo repetida de cdigo

Muitas vezes ao escrevermos cdigo em JavaScript precisamos que um bloco de cdigo ou uma instruo sejam executados repetidamente. Os ciclos de repetio nos fornecem meios para conseguirmos isso. Em JavaScript temos ao nosso dispor as seguintes instrues para produzir ciclos de repetio: for - executam um bloco de cdigo enquanto uma condio for satisfeita. while - repetem a execuo de um bloco de cdigo enquanto uma condio for satisfeita. do...while - repetem a execuo de um bloco de cdigo enquanto uma condio for satisfeita mas executam-no pelo menos uma vez, mesmo que a condio nunca seja satisfeita.
4.1 Ciclos for
54

Os ciclos for so implementados atravs da instruo for. Esta uma instruo complexa que aceita vrios argumentos separados pelo caractere ; (ponto e vrgula). A sua sintaxe a seguinte:
for (inicializao; condio; atualizao) { bloco de cdigo a executar }
O primeiro argumento (inicializao) composto por uma ou mais instrues (separadas por vrgulas). Essas instrues so executadas antes de se iniciar o ciclo. O segundo argumento (condio) composto por uma ou mais condies (separadas por vrgulas) que so testadas antes de se executar o bloco de cdigo associado ao ciclo. Se uma dessas condies no for verdadeira o ciclo termina. O terceiro argumento (atualizao) composto por uma ou mais instrues (separadas por vrgulas) que so executadas sempre que se completa uma execuo do bloco de cdigo associado ao ciclo. Normalmente essas instrues usam-se para incrementar uma varivel que funciona como contador, mas podem ser usadas para outros fins. O uso mais comum que dado aos ciclos for a execuo de um bloco de cdigo um nmero determinado de vezes. precisamente isso que se ilustra a seguir:
<html> <body> <script type="text/javascript"> <!-for (var i = 1; i <= 3; ++i) alert(i) --> </script> </body> </html>
Neste exemplo a inicializao var i = 1, a condio i <= 3 e a atualizao ++i. O ciclo funciona do seguinte modo:
1. Declara-se uma varivel i e atribui o valor 1 (um).

2. Verifica-se a condio i <= 3. Se for verdadeira salta-se para o passo seguinte, mas se for falsa pra-se a execuo do ciclo. 3. Executa-se o bloco de cdigo associado ao ciclo for (mostrar uma caixa de alerta). 4. Executa a parte ++i, que aumenta em uma unidade o valor da varivel i. 5. Salta para o passo 2 (teste da condio).
55

Exemplos de Aplicao
Ciclos (de repetio) for
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-for (var i = 0; i <= 5; i++) { document.write("o nmero " + i) document.write("<br>") } document.write("O ciclo terminou<br>") // --> </script> <h3>Explicao</h3> <p> 1) O ciclo <code>for</code> comea dando varivel <code>i</code> o valor 0. </p> <p> 2) O bloco de cdigo que est entre chaves ({ ... }) logo a seguir instruo <code>for</code> executado uma vez. </p> <p> 3) Depois de terminada a execuo do bloco de cdigo executada a terceira instruo do ciclo <code>for</code>, que <code>i++</code>. Esta terceira instruo aumenta em uma unidade o valor da varivel <code>i</code>. </p> <p> 4) A seguir executa-se a segunda instruo do ciclo, que <code>i <= 5</code>. Se o resultado for verdadeiro (true) salta-se para o passo 2 (ou seja, executa mais uma vez o bloco de cdigo e repetem-se as instrues que se seguem). Se o resultado for falso abandona-se o ciclo for e passa-se para a Instruo que vem imediatamente a seguir ao bloco de cdigo. </p> </body> </html>
Gerar todos os cabealhos no corpo de um documento

<html> <head>
56

<title></title> </head> <body> <script type="text/javascript"> <!-for (var i = 1; i <= 6; i++) { document.write("<h" + i + ">Este um cabealho de nvel " + i) document.write("</h" + i + ">") } // --> </script> </body> </html>
4.2 Ciclos while e ciclos do...while

A instruo while repete a execuo de um bloco de cdigo enquanto uma condio for satisfeita. A sua sintaxe a seguinte:
while (condio) { cdigo a executar }
A instruo do...while repete a execuo de um bloco de cdigo enquanto uma condio for satisfeita mas executa-o pelo menos uma vez, mesmo que a condio nunca seja satisfeita. A sua sintaxe a seguinte:
do { cdigo a executar } while (condio)
Exemplos de Aplicao
Ciclos (de repetio) while
<html> <head> <title></title> </head> <body> <script type="text/javascript">  </script> <h3>Explicao</h3> <p> 1) O ciclo <code>while</code> verifica a condio <code>i <= 5</code>. Se o resultado for verdadeiro (true) executa o bloco de cdigo que est entre chaves ({ ... }) logo a seguir instruo <code>while</code>. Se o resultado for falso abandona-se o ciclo for e passa para a instruo que vem imediatamente a seguir ao bloco de cdigo. </p> <p> 2) Repete-se o passo 1. Repare que o ciclo acaba parando porque cada vez que o bloco de cdigo executado o valor da varivel <code>i</code> aumentado em uma unidade. Se no fosse assim o ciclo nunca terminaria. </p> </body> </html>
Ciclos (de repetio) do ... while

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-i = 0 do { document.write("O nmero " + i) document.write("<br>") i++ } while (i <= 5) document.write("O ciclo terminou<br>") // --> </script> <h3>Explicao</h3> <p>
58

1) O bloco de cdigo que est entre chaves ({ ... }) logo a seguir instruo <code>do</code> sempre executado sem que seja necessrio verificar qualquer condio. </p> <p> 2) Verifica-se a condio que est dentro da instruo <code>while</code>, que neste caso <code>i <= 5</code>. Se o resultado for verdadeiro (true) executa-se mais uma vez o bloco de cdigo que est entre chaves ({ ... }). Se o resultado for falso abandona-se o ciclo e passa-se para a instruo vem imediatamente a seguir ao bloco de cdigo. </p> <p> Repare que o ciclo sempre executado pelo menos uma vez. Ele acaba parando porque a cada execuo o bloco de cdigo aumenta o valor da varivel <code>i</code> em uma unidade. Se no fosse assim o ciclo nunca terminaria. </p> </body> </html>
5. Construir cdigo robusto: as instrues try ... catch

Nota: Apesar destas instrues no fazerem parte do padro ECMAScript, elas so suportadas por todos os browsers importantes e so de grande utilidade para a construo de um cdigo robusto. Diversas vezes surgem situaes em que uma parte de um script executada em condies desfavorveis. Isso acontece sempre que um script tenta usar um objeto que no est definido ou tenta realizar uma operao que no pode ser realizada. Sempre que aparece uma situao deste tipo surge uma exceo na execuo do cdigo. O comportamento normal do interpretador de JavaScript parar a execuo do script porque no sabe o que deve fazer a seguir. Porm, h situaes adversas das quais o script pode recuperar em boas condies desde que o programador lhe d instrues para tal. Isso se consegue fazendo a captura da exceo gerada pelo erro e executando cdigo capaz de fazer a recuperao. Para conseguirmos isso devemos usar as instrues try...catch, que tm a sintaxe seguinte:
try { bloco com cdigo normal mas que pode gerar erros } catch(exceo) {
59

bloco com cdigo capaz de fazer a recuperao dos erros }
A seo try contm o cdigo normal logo a seguir instruo try. Ao chegar a esta instruo o interpretador de JavaScript tenta executar esse bloco da forma habitual. Se no ocorrer nenhum erro o interpretador ignora o cdigo que est na seo catch e continua a executar o resto do script. Se ocorrer um erro no bloco try esse erro capturado pelo bloco catch. a que o interpretador de JavaScript continua a executar o cdigo imediatamente aps o erro. No bloco catch devemos colocar o cdigo de recuperao. Os exemplos apresentados na lista seguinte mostram como isto funciona:
Exemplos de Aplicao
As instrues try ... catch
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var s var a = new Array("Balinhas", "Pirulitos") try { s = a[3].substring(0,4) } catch(e) { s = "Ocorreu um erro no script: "+e.description } document.write(s) document.write('<br>') try { s = a[1].substring(0,4) } catch(e) { s = "Ocorreu um erro no script: "+e } document.write(s) // --> </script> <p> Repare que no primeiro bloco try...catch surgiu um erro porque a[3] no est definido. Por isso o interpretador de JavaScript executou o cdigo de recuperao do bloco catch. J no segundo bloco try...catch a parte try no produz nenhum erro, deste modo, a parte catch no chega a ser executada. </p> </body> </html>
60

As instrues try ... catch (verso 2)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var s1 = "A tentativa 1 foi executada com sucesso!<br><br>" // TENTATIVA 1 try { // Vamos tentar executar cdigo que no tem erros document.write(s1) } catch(e) { document.write("A tentativa 1 no foi executada com sucesso!<br><br>") } // TENTATIVA 2 try { // Vamos tentar executar cdigo que TEM ERROS (s2 no existe) document.write(s2) } catch(e) { document.write("A tentativa 2 no foi executada com sucesso!<br><br>") } document.write("A execuo do script continua apesar de termos encontrado um erro.") // --> </script> <p> Repare que a segunda tentativa gerou um erro porque a varivel s2 no existe. As instrues try...catch permitiram remediar o problema e continuar a executar o script. Dentro do bloco associado instruo catch devemos colocar o cdigo para ultrapassar o erro, se isso for possvel. </p> </body> </html>
61

As instrues try ... catch (verso 3)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var a = new Array("Balinhas", "Pirulitos") try { document.write(a[3].substring(0,4)) document.write('<br>') } catch(e){} try { document.write(a[1].substring(0,4)) document.write('<br>') } catch(e){} // --> </script> <p> Algumas vezes no preciso fornecer cdigo de recuperao, basta ignorar os erros e no executar as tarefas que geraram esses erros. Para conseguirmos isso basta deixar os blocos catch vazios. </p> </body> </html>
62

6. Construir e usar uma funo

Designamos por funo um bloco de cdigo a que damos um nome para que possa ser chamado vrias vezes em locais diferentes. Para fazermos com que esse cdigo seja executado ns invocamos chamando-o pelo seu nome (nome da funo). Vejamos um exemplo de uma funo simples que no faz nada:
function fazerNada() { }
No exemplo seguinte a funo no executa qualquer operao, mas devolve um valor de texto constante:
function fazerNada_2() { return "Eu no fao nada!" }
Sempre que uma funo precisa devolver o resultado do seu trabalho deve usar a instruo "return". Esta instruo especifica o valor que devolvido, o qual ser inserido no local em que a funo foi chamada.
function fazerNada_2() { return "Eu no fao nada!" }
Para usarmos esta funo basta escrevermos:

var s = fazerNada_2()
e a varivel s passar a guardar o valor "Eu no fao nada!"
Exemplos de Aplicao
Uma funo que no recebe argumentos
<html> <head> <title></title> <script type="text/javascript"> <!-function fazerNada_2() { return "Eu no fao nada!" } // --> </script> </head> <body> <p> O valor devolvido pela funo <code>fazerNada_2()</code> : <script type="text/javascript"> <!-document.write('"'+fazerNada_2()+'"') // --> </script> </body> </html>
63

6.1 Funes com um nmero fixo de argumentos

A seguir temos uma funo que recebe um nmero como argumento, soma duas unidades a esse nmero e devolve o valor da soma:
function somar(n) { var soma = n + 2 return soma }
Para usarmos esta funo basta que escrevamos:

var r = somar(5)
e a varivel r passar a ter o valor 7. Se precisarmos usar mais argumentos basta especific-los ao declarar a funo:
function multiplicar(p, q) { var m = p*q return m }
Para usarmos esta funo basta que escrevamos:

var produto = multiplicar(5, 4)
e a varivel produto passar a ter o valor 20, que igual a 5 vezes 4. A linguagem JavaScript nos permite utilizar tantos argumentos quanto precisarmos.
Exemplos de Aplicao
Uma funo que aceita um argumento
<html> <head> <title></title> <script type="text/javascript"> <!-function somar(n) { var soma = n + 2 return soma
64

} // --> </script> </head> <body> <p> O valor devolvido pela funo : <script type="text/javascript"> <!-document.write('somar(5) = '+somar(5)) // --> </script> </p> </body> </html>
Uma funo que aceita dois argumentos

<html> <head> <title></title> <script type="text/javascript"> <!-function multiplicar(p, q) { var m = p*q return m } // --> </script> </head> <body> <p> O valor devolvido pela funo : <script type="text/javascript"> <!-document.write('multiplicar(5, 6) = '+multiplicar(5, 6)) // --> </script> </p> </body> </html>
65

Uma funo que aceita quatro argumentos

<html> <head> <title></title> <script type="text/javascript"> <!-function multiplicar(m1, m2, m3, m4) { var m = m1*m2*m3*m4 return m } // --> </script> </head> <body> <p> O valor devolvido pela funo : <script type="text/javascript"> <!-document.write('multiplicar(1, 2, 3, 4) = '+multiplicar(1, 2, 3, 4)) // --> </script> </p> </body> </html>
6.2 Funes que aceitam um nmero varivel de argumentos

H casos em que o nmero de argumentos que so passados a uma funo pode variar. Numa situao dessas pode ser preciso atribuir valores por omisso aos argumentos que possam estar em falta. Para fazermos isso precisamos fazer uma distino entre duas situaes diferentes: 1) Todos os argumentos so declarados ao definir a funo; 2) Nenhum argumento declarado ao definir a funo. Todos os argumentos so declarados ao definir a funo
66

Esta situao ocorre quando os argumentos tm naturezas diferentes. Alguns argumentos so obrigatrios mas outros so opcionais. Quando um argumento opcional no fornecido a funo deve dar-lhe um valor por omisso.
Exemplos de Aplicao
Uma funo em que o segundo argumento opcional
<html> <head> <title></title> <script type="text/javascript"> <!-function colorir(txt, sublinhar) { /*Se o argumento sublinhar no tiver sido fornecido o seu valor ser undefined. Nesse caso damos um valor por omisso, que ser false.*/ if((''+sublinhar)=='undefined') var sublinhar = false var s='<span style="color: red;' if(sublinhar) s+='text-decoration: underline;' s+='">'+txt+'</span>' return s } // --> </script> </head> <body> <p> Os valores devolvidos pela funo so:<br><br> <script type="text/javascript"> <!-var s=colorir("Este texto tem cor vermelha e no est sublinhado", false) document.write(s) document.write('<br>') s=colorir("Este texto tem cor vermelha e est sublinhado", true) document.write(s+'<br>') // agora omitimos o segundo argumento s=colorir("Este texto tem cor vermelha e no est sublinhado") document.write(s) // --> </script> </p> </body> </html>
Uma funo que aceita dois argumentos
67

<html> <head> <title></title> <script type="text/javascript"> <!-function multiplicar(p, q) { var m = p*q return m } // --> </script> </head> <body> <p> O valor devolvido pela funo : <script type="text/javascript"> <!-document.write('multiplicar(5, 6) = '+multiplicar(5, 6)) // --> </script> </p> </body> </html>
Uma funo que aceita quatro argumentos

<html> <head> <title></title> <script type="text/javascript"> <!-function multiplicar(m1, m2, m3, m4) { var m = m1*m2*m3*m4 return m } // --> </script> </head> <body> <p> O valor devolvido pela funo : <script type="text/javascript"> <!-document.write('multiplicar(1, 2, 3, 4) = '+multiplicar(1, 2, 3, 4)) // --> </script> </body> </html>
68

No so declarados argumentos ao definir a funo Esta situao ocorre normalmente quando os argumentos so todos do mesmo tipo (so todos nmeros ou so todos strings).
Exemplos de Aplicao
Uma funo que devolve a soma dos seus argumentos (nmeros)
<html> <head> <title></title> <script type="text/javascript"> <!-function somar() { var soma=0 for(var i=0;i<somar.arguments.length;++i) soma += somar.arguments[i] return soma } // --> </script> </head> <body> <p> Os valores devolvidos pela funo so:<br><br> <script type="text/javascript"> <!-document.write('somar(1, 2) = ' + somar(1, 2)) document.write('<br>') document.write('somar(1, 2, 3, 4) = ' + somar(1, 2, 3, 4)) document.write('<br>') document.write('somar(1,2,3,4,5,6,7,8) = ' + somar(1,2,3,4,5,6,7,8)) // --> </script> </p> </body> </html>
69

Uma funo que devolve o valor mdio dos seus argumentos

<html> <head> <title></title> <script type="text/javascript"> <!-function valorMedio() { var soma=0 for(var i=0;i<valorMedio.arguments.length;++i) soma += valorMedio.arguments[i] return soma/valorMedio.arguments.length } // --> </script> </head> <body> <p> Os valores devolvidos pela funo so:<br><br> <script type="text/javascript"> <!-document.write('valorMedio(1, 2) = ' + valorMedio(1, 2)) document.write('<br>') document.write('valorMedio(1, 2, 3, 4) = ' + valorMedio(1, 2, 3, 4)) document.write('<br>') document.write('valorMedio(1,2,3,4,5,6,7,8) = ' + valorMedio(1,2,3,4, 5,6,7,8)) // --> </script> </p> </body> </html>
Uma funo que devolve a soma dos seus argumentos (strings)

<html> <head>
70

<title></title> <script type="text/javascript"> <!-function somar() { var soma='' for(var i=0;i<somar.arguments.length;++i) soma += somar.arguments[i] return soma } // --> </script> </head> <body> <p> Os valores devolvidos pela funo so:<br><br> <script type="text/javascript"> <!-document.write('somar("El ", "Kbong") = ' + somar("El ", "Kbong")) document.write('<br>') document.write('somar("O", " ", "rato") = ' + somar("O", " ", "rato")) document.write('<br>') document.write('somar("O", " ", "rato", " ", "roeu ","a rolha") = ' + somar("O", " ", "rato", " ", "roeu ","a rolha")) // --> </script> </body> </html>
7. Trabalhar com objetos

A linguagem JavaScript uma linguagem orientada a objetos. Isto significa que em JavaScript tudo so objetos. No entanto, o estilo de programao adaptado em JavaScript torna esse fato menos evidente do que em outras linguagens, particularmente as linguagens compiladas como o Java, o C++ ou o C#. Para programar corretamente em JavaScript o programador no precisa dominar o modelo de programao orientada para objetos, bastando saber usar os objetos que so oferecidos pela linguagem e pelo web browser que corre o programa. Na prtica, o programador de JavaScript segue quase sempre o modelo de programao orientada para procedimentos (programao estruturada), que menos exigente, e recorre sempre que necessrio aos objetos pr-definidos que o browser coloca ao seu dispor. Esta estratgia funciona bem desde que as aplicaes que se escreve se limitem ao controle e manipulao de pginas da Web. O JavaScript no serve para criar aplicaes de classe empresarial como aquelas que se escrevem em Java, C++ ou C#.
71

Esta forma de programar, aliada no necessidade de declarar os tipos das variveis e ao fato de no ser preciso compilar os programas, faz com que seja possvel produzir e testar cdigo JavaScript com grande rapidez e com muito menos esforo do que aquele que exigido por outras linguagens. A natureza das tarefas que so executadas em JavaScript faz com que s em situaes excepcionais surja a necessidade de definir novos objetos.
7.1 Criar um novo objeto

O web browser cria automaticamente muitos dos objetos que coloca a dispor do programador de JavaScript. Esses objetos esto prontos para ser usados sem que o programador tenha de cri-los. Para poder trabalhar com os objetos que no so criados pelo browser o programador obrigado a cri-los antes de os usar. Um bom exemplo o objeto Array, que pode ser criado de diversas formas:
// um Array com espao reservado para 3 elementos // e cujo contedo ser definido mais tarde var a = new Array(3) // um Array com trs elementos var b = new Array("Papagaio", "Ave do paraso", "Canrio") // um Array cujas propriedades e contedo sero definidos mais tarde var c = new Array()
Depois de criarmos um objeto podemos utilizar as propriedades e os mtodos que ele coloca nossa disposio.
7.2 Propriedades dos objetos

As propriedades de um objeto so variveis que pertencem a esse objeto. Ns podemos ler os valores dessas variveis (propriedades) e alterar os valores daquelas que aceitem ser escritas (algumas s podem ser lidas.) O objeto Array, que j vimos antes, oferece uma nica propriedade, que a propriedade length. O valor dessa propriedade igual ao nmero de elementos que esto guardados no Array. Para acessarmos uma propriedade de um objeto escrevemos o nome da varivel que representa o objeto, um ponto e o nome da propriedade. O exemplo seguinte mostra como se acessa a propriedade length do objeto Array:
var a = new Array("Papagaio", "Ave do paraso", "Canrio") // Para acessarmos a propriedade escrevemos o nome da varivel que // representa o objeto (que a), um ponto e o nome da propriedade. var l = a.length // l passou a valer 3 (nmero de elementos do Array)
7.3 Mtodos de objetos

Os mtodos de um objeto so funes que pertencem a esse objeto. Repare que enquanto que as propriedades correspondem a variveis, os mtodos correspondem a funes. Os mtodos realizam transformaes no objeto a que pertencem e devolvem o resultado da sua atuao. O mtodo reverse() devolve um novo Array com os mesmos elemento dos Array a que pertence mas com a ordem invertida:
72

var a = new Array("Papagaio", "Ave do paraso", "Canrio") // Para acessarmos o mtodo escrevemos o nome da varivel que // representa o objeto (o seu nome a), um ponto e o nome do mtodo. // b ser igual a ("Canrio", "Ave do paraso", "Papagaio") var b = a.reverse()
Mtodos estticos Alguns objetos oferecem mtodos estticos. Esses mtodos diferem dos mtodos normais pelo fato de no pertencerem a um objeto criado com a instruo new. Os mtodos estticos esto sempre disponveis para serem usados, no preciso criar um objeto para us-los. Um exemplo de um mtodo esttico o mtodo String.fromCharCode(). Por ser um mtodo esttico do objeto String ele deve ser sempre invocado na forma String.fromCharCode () e antes de .fromCharCode () nunca se deve colocar o nome de uma varivel. Quando utilizado deve comear sempre por String.
7.4 Objetos definidos pelo padro ECMAScript

O padro ECMAScript define as regras da linguagem, as instrues que a compem e um conjunto reduzido de objetos. Este padro serve de base a diversas linguagens de script. Entre elas temos: o JavaScript criado pela Netscape, o JScript da Microsoft e a verso 2 da linguagem ActionScript da Macromedia (implementada nas verses do Flash Player). Apesar de todas estas linguagens se basearem no padro ECMAScript, elas no so iguais porque ao padro acrescentaram os seus prprios objetos. Isto necessrio porque o padro ECMAScript constitui apenas o ncleo dessas linguagens. Ele no define objetos que so especficos de cada uma das reas em que vai ser aplicado. Essa uma tarefa que fica ao cuidado dos criadores das implementaes de ECMAScript. Podemos dizer que o padro ECMAScript oferece uma infra-estrutura slida sobre a qual se constroem linguagens de script destinadas a diversos fins: JavaScript para o HTML dinmico, ActionScript para controlar aplicaes baseadas no Flash Player da Macromedia, ou outras que podem servir para outros fins. Os objetos definidos pelo padro ECMAScript so apenas aqueles que so necessrios para criar uma linguagem robusta e funcional. Nos captulos seguintes deste curso vamos estudar esses objetos, que so: Array, Date, Math e String. Estes objetos oferecem funcionalidades de importncia fundamental e por isso esto presentes em todas as linguagens compatveis com o padro ECMAScript.
7.5 As declaraes this e with

A declarao this A declarao this representa o prprio objeto em que usada. Esse objeto pode ser uma funo, uma ligao de hipertexto, uma imagem, etc. Esta declarao bastante til em HTML Dinmico porque nos ajuda muito a construir funes que respondem a eventos sabendo sempre qual foi o objeto que originou o evento e funcionam corretamente em todos os browsers. A declarao with
73

Esta declarao estabelece o objeto ao qual se aplica uma srie de instrues. Os dois exemplos seguintes usam o objeto Math para ilustrar o uso desta declarao e so totalmente equivalentes (se ainda no conhece o objeto Math estude-o mais frente). Verso 1:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E)
Verso 2, equivalente anterior. Repare que no foi preciso colocar a parte Math antes dos nomes dos mtodos cos(), sin() ou tan().
with (Math) { x = cos(3 * PI) + sin (LN10) y = tan(14 * E) }
Quando o nmero de instrues pequeno no vale a pena usar a declarao with, mas se esse nmero crescer muito o cdigo ser mais compacto e fcil de ler se usarmos esta declarao.
Exemplos de Aplicao
As funes como objetos: como se usa a declarao this
<html> <head> <title></title> <script type="text/javascript"> <!-function mostrarStringS(o) { // O argumento o representa um objeto (que neste caso uma funo) var z="O valor da string s pertencente ao objeto \ que nos foi passado como argumento :\n\n" alert(z+o.s) } function funcao1() { // Declaramos uma varivel s que pertence a este (this) objeto this.s="Eu sou a varivel s da funcao1() e sou uma string." // A seguir invocamos a funo mostrarStringS() dando como // argumento este (this) objeto mostrarStringS(this) } function FUNCAO2() { // Declaramos uma varivel s que pertence a este (this) objeto this.s="Eu perteno FUNCAO2() e sou uma string. O meu nome s" // A seguir invocamos a funo mostrarStringS() dando como // argumento este (this) objeto mostrarStringS(this) } // --> </script> </head>
74

<body> <p> <b>Nota:</b> Em JavaScript tudo so objetos, funes e variveis includas </p> <form action="javascript:;"> Clique nos botes de baixo para executar as funes:<br> <input type="button" onclick="funcao1()" value="Executar funcao1()"> <input type="button" onclick="FUNCAO2()" value="Executar FUNCAO2()"> </form> </body> </html>
A declarao with
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var x, y, x1, y1 x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E) document.write("Sem with:<br>") document.write("x = " + x) document.write("<br>") document.write("y = " + y) document.write("<br><br>") with (Math) { x1 = cos(3 * PI) + sin (LN10) y1 = tan(14 * E) } document.write("Com with:<br>") document.write("x1 = " + x1) document.write("<br>") document.write("y1 = " + y1) // --> </script> </body> </html>
75

8. Objeto Array
O objeto Array serve para definir um tipo de varivel que capaz de guardar sob o mesmo nome uma quantidade de valores numricos, de texto ou de objetos. Este objeto pode ser considerado como uma lista, ou cadeia de itens, em que cada item uma varivel ou um objeto. O acesso a cada um dos itens da lista faz-se recorrendo ao seu ndice, que o nmero de ordem do item na lista. Criao de um novo Array
// um Array cujo tamanho e contedo sero definidos mais tarde var c = new Array() // um Array com espao reservado para N elementos // e cujo contedo ser definido mais tarde var a = new Array(N) // um Array com N+1 elementos definidos logo de incio var b = new Array(elemento_0, elemento_1, ..., elemento_N)
8.1 Propriedades do objeto Array Propriedade length Descrio Fornece o nmero de elementos que esto no Array. O valor desta propriedade estabelecido quando o Array criado, mas pode crescer se formos juntando mais elementos ao Array.
8.2 Mtodos do objeto Array

Mtodo join() reverse() Descrio Devolve uma String (varivel de texto) que representa o contedo do Array Devolve um novo Array em que a ordem dos elementos est invertida (em particular temos que o elemento que tinha o ndice zero passa a ter o ndice mais alto e vice versa) Devolve um novo Array em que os elementos esto ordenados (geralmente por ordem crescente)
sort()
8.3 Colees
76

O termo coleo usa-se normalmente para designar um Array cujos itens so objetos todos do mesmo tipo. O conceito de coleo muito usado em HTML Dinmico para designar grupos de objetos do mesmo tipo. Um exemplo disto a coleo images, que um Array cujos itens so os objetos que representam as imagens que esto no documento (cada imagem corresponde um objeto Image.)
Exemplos de Aplicao
Construir um Array para guardar nomes
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var fruta = new Array(6) fruta[0] = "Laranja" fruta[1] = "Banana" fruta[2] = "Morango" fruta[3] = "Abacaxi" fruta[4] = "Ma" fruta[5] = "Kiwi" document.write("Este Array tem "+fruta.length+" elementos<br><br>") for (var i=0; i<fruta.length; i++) { document.write(fruta[i] + "<br>") } // --> </script> </body> </html>
Ordenar os elementos de um Array (strings)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var fruta = new Array("Laranja","Banana","Morango","Abacaxi","Ma","Kiwi") // --> </script> <table>
77

<tr> <td width="140"><b>Ordem normal</b></td> <td><b>Ordem alfabtica</b></td> </tr> <td> <script type="text/javascript"> <!-for (var i=0; i<6; i++) document.write(fruta[i] + "<br>") // --> </script> </td> <td> <script type="text/javascript"> <!-// Agora ordenamos o Array por ordem alfabtica invocando o // mtodo sort() fruta.sort() for (var i=0; i<6; i++) document.write(fruta[i] + "<br>") // --> </script> </td> </tr> </table> </body> </html>
Ordenar os elementos de um Array (nmeros)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var numeros = new Array(27, 12, 15, 6, 2, 6) // --> </script> <p> A ordenao que o mtodo sort() faz sempre por ordem alfabtica. Para ordenarmos nmeros por ordem crescente temos de usar outras tcnicas. </p> <table> <tr> <td width="140"><b>Ordem normal</b></td> <td><b>Ordem alfabtica</b></td> </tr>
78

<td> <script type="text/javascript"> <!-for (var i=0; i<6; i++) document.write(numeros[i] + "<br>") // --> </script> </td> <td> <script type="text/javascript"> <!-// Agora ordenamos o Array por ordem alfabtica invocando o //mtodo sort() numeros.sort() for (var i=0; i<6; i++) document.write(numeros[i] + "<br>") // --> </script> </td> </tr> </table> </body> </html>
Inverter a ordem dos elementos de um Array

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var fruta = new Array("Laranja","Banana","Morango","Abacaxi","Ma","Kiwi") // Agora ordenamos o Array por ordem alfabtica invocando o mtodo sort() fruta.sort() // --> </script> <table> <tr> <td width="140"><b>Ordem alfabtica</b></td> <td><b>Ordem inversa</b></td> </tr> <td> <script type="text/javascript"> <!-for (var i=0; i<6; i++)
79

document.write(fruta[i] + "<br>") // --> </script> </td> <td> <script type="text/javascript"> <!-// Agora invertemos a ordem do Array invocando o mtodo //reverse() fruta.reverse() for (var i=0; i<6; i++) document.write(fruta[i] + "<br>") // --> </script> </td> </tr> </table> </body> </html>
A coleo Images
<html> <head> <title></title> </head> <body> <p> Aqui temos algumas imagens: <img src="book.gif" alt="Um livro"> <img src="2569.gif" alt="Direes"> <img src="5103.gif" alt="Curvas"> </p> <p> A coleo images deste documento um Array que contm um objeto Image para cada imagem. Eis algumas das propriedades destes objetos:<br><br> <script type="text/javascript"> <!-var imgs=document.images for(var i=0;i<imgs.length;++i) document.write("src="+imgs[i].src+" largura="+imgs[i].width+" altura="+imgs[i].height+"<br>") // --> </script> </p> </body> </html>
80

9. Objeto Date
O objeto Date permite-nos ler, construir e realizar operaes com datas e horas. Datas numricas e datas de texto Em JavaScript ns podemos definir um conjunto data/hora por extenso ou atravs de um valor numrico. A definio por extenso pode ser feita de vrias formas, como ilustra a seguir:
Fri, 21 Tue Nov Tue, 25 Tue Nov Nov 2003 10:43:34 UTC 25 14:45:42 UTC 2003 Nov 2003 14:48:21 GMT 25 2003 14:46:37 GMT+0000
A outra forma que podemos usar para definir um conjunto data/hora usa como ponto de referncia as zero horas do dia 1 de Janeiro de 1970. Para definirmos uma data e uma hora usando esta forma ns indicamos o nmero de milisegundos que decorreram entre as zero horas de 1 de Janeiro de 1970 e a data que queremos definir. Se usarmos um valor negativo estaremos indicando uma data anterior ao ponto de referncia. A seguir temos exemplos desta forma de definir datas:
// 1069772056710 // 2237468559000 equivale a equivale a Tue, 25 Nov 2003 14:54:16 UTC Sun Nov 25 2040 15:02:39 GMT+0000
<html> <body> <script type="text/javascript"> <!-// 1069772056710 equivale a // 2237468559000 equivale a
Tue, 25 Nov 2003 14:54:16 UTC Sun Nov 25 2040 15:02:39 GMT+0000
var data1=new Date(1069772056710) var data2=new Date("Tue, 25 Nov 2003 14:54:16 UTC") document.write("data1 = "+data1.toLocaleString()) document.write("<br>") document.write("data2 = "+data2.toLocaleString()) document.write("<br><br>") var DATA1=new Date(2237468559000)
81

var DATA2=new Date("Sun Nov 25 2040 15:02:39 GMT+0000") document.write("DATA1 = "+DATA1.toLocaleString()) document.write("<br>") document.write("DATA2 = "+DATA2.toLocaleString()) --> </script> </body> </html>
Criao de um novo objeto Date

// Cria um objeto com a data e a hora atuais oData1 = new Date() // Cria objeto com a data e hora indicadas por valorData (texto ou numrica) oData2 = new Date(valorData) // Cria um objeto com a data indicada. obrigatrio indicar o ano, o ms e o // dia. As horas, os minutos, os segundos e os milisegundos so facultativos. oData3 = new Date(ano, ms, dia[, horas[, minutos[,segundos[,milisegundos]]]])
9.1 Mtodos do objeto Date

Mtodo getDate() getDay() getMonth() getFullYear() getYear() getHours() getMinutes() getSeconds() getMilliseconds() getTime() Descrio Devolve o dia do ms (de 1 a 31) que est guardado no objeto Date Devolve o dia da semana (de 0=Domingo at 6=Sbado) guardado no objeto Date Devolve o ms (de 0=Janeiro at 11=Dezembro) guardado no objeto Date Devolve o valor completo do ano (quatro dgitos) guardado no objeto Date Devolve o valor incompleto do ano (apenas dois dgitos) guardado no objeto Date. No use este mtodo, use getFullYear em seu lugar. Devolve o valor da hora (de 0 a 23) guardada no objeto Date Devolve o valor dos minutos (de 0 a 59) guardados no objeto Date Devolve o valor dos segundos (de 0 a 59) guardados no objeto Date Devolve o valor dos milisegundos (de 0 a 999) guardados no objeto Date Devolve a quantidade de milisegundos decorridos desde as zero horas do dia 1 de Janeiro de 1970
82

getTimezoneOffset()
getUTCDate() getUTCDay() getUTCMonth() getUTCFullYear() getUTCHours() getUTCMinutes() getUTCSeconds() getUTCMilliseconds() setDate(dia_ms) setFullYear(ano) setHours(horas) setMilliseconds(milisegundos) setMinutes(minutos) setMonth(ms) setSeconds(segundos) setTime(data_numrica)
setYear(ano) setUTCDate(dia_ms) setUTCDay(dia_semana)
at data que est guardada no objeto Date Devolve a diferena de tempo entre o fuso horrio do computador que est a ser usado e o Tempo Mdio de Greenwich ("Greenwich Mean Time", ou GMT) Devolve o dia do ms (de 1 a 31) guardado no objeto Date medido no padro de tempo universal (UTC) Devolve o dia da semana (de 0 a 6) guardado no objeto Date medido no padro de tempo universal (UTC) Devolve o valor do ms (de 0 a 11) guardado no objeto Date medido no padro de tempo universal (UTC) Devolve o valor completo do ano (com quatro dgitos) guardado no objeto Date medido no padro de tempo universal (UTC) Devolve a hora (de 0 a 23) guardada no objeto Date medida no padro de tempo universal (UTC) Devolve o valor dos minutos (de 0 a 59) guardados no objeto Date medidos no padro de tempo universal (UTC) Devolve o valor dos segundos (de 0 a 59) guardados no objeto Date medidos no padro de tempo universal (UTC) Devolve o valor dos milisegundos (de 0 a 999) guardados no objeto Date medidos no padro de tempo universal (UTC) Acerta o valor do dia (de 1 a 31) do ms guardado no objeto Date Acerta o valor do ano (com quatro dgitos) guardado no objeto Date Acerta o valor da hora (de 0 a 23) guardada no objeto Date Acerta o valor dos milisegundos (de 0 a 999) guardados no objeto Date Acerta o valor dos minutos (de 0 a 59) guardados no objeto Date Acerta o valor do ms (de 0=Janeiro a 11=Dezembro) guardado no objeto Date Acerta o valor dos segundos (de 0 a 59) guardados no objeto Date Acerta a data e a hora guardadas no objeto Date para o valor correspondente s zero horas do dia 1 de Janeiro de 1970 mais o nmero de milisegundos que fornecido como argumento do mtodo Acerta o valor do ano guardado no objeto Date. No use este mtodo, use antes o mtodo setFullYear. Acerta o valor do dia (de 1 a 31) do ms guardado no objeto Date usando o padro de tempo universal (UTC) Acerta o valor do dia da semana (de 0=Domingo a 6=Sbado) guardado no objeto Date usando o 83

padro de tempo universal (UTC) Acerta o valor do ms (de 0=Janeiro a 11=Dezembro) guardado no objeto Date usando o padro de tempo universal (UTC) setUTCFullYear(ano) Acerta o valor do ano (com quatro dgitos) guardado no objeto Date setUTCHour(horas) Acerta o valor da hora (de 0 a 23) guardada no objeto Date usando o padro de tempo universal (UTC) setUTCMinutes(minutos) Acerta o valor dos minutos (de 0 a 59) guardados no objeto Date usando o padro de tempo universal (UTC) setUTCSeconds(segundos) Acerta o valor dos segundos (de 0 a 59) guardados no objeto Date usando o padro de tempo universal (UTC) setUTCMilliseconds(milisegundos) Acerta o valor dos milisegundos (de 0 a 999) guardados no objeto Date usando o padro de tempo universal (UTC) toGMTString() Devolve uma representao textual (a data e a hora escritas por extenso) usando como referncia o fuso horrio do Tempo Mdio de Greenwich (GMT) toLocaleString() Devolve uma representao textual (a data e a hora escritas por extenso) no fuso horrio do computador local. toUTCString() Fornece uma representao textual (a data e a hora escritas por extenso) da data contida no objeto Date medida no padro UTC. setUTCMonth(ms)
9.2 Mtodos estticos do objeto Date

Mtodo Date.parse(data_texto) Date.UTC(ano, ms, dia, horas, minutos, segundos, milisegundos) Descrio Devolve o nmero de milisegundos decorridos entre as zero horas do dia 1 de Janeiro de 1970 e a data indicada por data_texto (formato de texto) Devolve o nmero de milisegundos que separam a data fornecida como argumento das 0 horas do dia 1 de Janeiro de 1970. obrigatrio indicar o ano, o ms e o dia. As horas, os minutos, os segundos e os milisegundos so facultativos.
Nota: quando usar os mtodos estticos lembre-se que por serem estticos eles se escrevem sempre na forma Date.parse() e Date.UTC(). No tente colocar nomes de variveis antes deles.
Exemplos de Aplicao
Mostrar o dia da semana
84

<script type="text/javascript"> <!-var d = new Date() var dia = d.getDay() document.write("O nmero do dia da semana de hoje "+dia) // Para obtermos o nome do dia criamos um Array em que Domingo ocupa a // posio 0, segunda ocupa a posio 1, ... var nomesDias=new Array("Domingo","Segunda-feira","Tera-feira","Quartafeira","Quinta-feira","Sexta-feira","Sbado") document.write("<br><br>O nome do dia de hoje "+nomesDias[dia]) // --> </script> </body> </html>
Obter a hora marcada pelo relgio do seu computador

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var d = new Date() document.write(d.getHours()+" horas ") document.write(d.getMinutes()+" minutos ") document.write(d.getSeconds()+" segundos") // --> </script> </body> </html>
85

Obter o dia e o ms em que estamos

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var d = new Date() document.write(d.getDate()) document.write(".") document.write(d.getMonth() + 1) document.write(".") document.write(d.getFullYear()) // --> </script> </body> </html>
Criar uma data com um valor pr-definido

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var data1 = new Date("Fri, 21 Nov 2003 10:43:34 UTC") document.write("A data1 : "+data1.toLocaleString()) document.write("<br><br>") var data2 = new Date(1069411529550) document.write("A data2 : "+data2.toLocaleString()) // --> </script> </body> </html>
86

Estabelecer o ano para uma data

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var d = new Date() d.setFullYear("1998") document.write(d.toLocaleString()) // --> </script> </body> </html>
O padro de tempo universal (UTC)

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var d = new Date() document.write(d.getUTCHours()+" horas ") document.write(d.getUTCMinutes()+" minutos ") document.write(d.getUTCSeconds()+" segundos") // --> </script> </body> </html>
87

Escrever a data completa com os nomes do dia e do ms

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var d = new Date() var dia = d.getDay() var mes = d.getMonth() var ano = d.getFullYear() // Para obtermos o nome do dia criamos um Array em que Domingo ocupa a // posio 0, segunda ocupa a posio 1, ... var nomesDias=new Array("Domingo","Segunda-feira","Tera-feira","Quartafeira","Quinta-feira","Sexta-feira","Sbado") var nomesMeses=new Array("Janeiro","Fevereiro","Maro","Abril","Maio", "Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro") var s="Hoje "+nomesDias[dia]+", "+d.getDate() s+=" de "+nomesMeses[mes]+" de "+ano document.write(s) // --> </script> </body> </html>
Os mtodos estticos
<html> <head> <title></title> </head> <body> <script type="text/javascript">
88

<!-var s = "25 de Novembro de 2003: " + Date.UTC(2003,11,25) document.write(s+"<br><br>") var s = " 10 horas do dia 25 de Novembro de 2003: " + Date.UTC(2003,11, 25,10) document.write(s+"<br><br>") var s = "Sun Nov 25 2040 15:02:39 GMT+0000: " s += Date.parse("Sun Nov 25 2040 15:02:39 GMT+0000") document.write(s+"<br><br>") // --> </script> </body> </html>
10. Objeto Math

O objeto Math um objeto intrnseco do sistema JavaScript. Ele no deve ser criado explicitamente pelo programador porque o prprio sistema que o cria automaticamente ao arrancar.
10.1 Propriedades do objeto Math

Propriedade E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 Descrio Contm a base dos logaritmos naturais (nmero de Euler) Contm o logaritmo natural de 2 (base E) Contm o logaritmo natural de 10 (base E) Contm o logaritmo de E na base 2 Contm o logaritmo de E na base 10 Contm o nmero PI (3.1415927...) Contm 1 a dividir pela raiz quadrada de 2 Contm a raiz quadrada de 2
10.2 Mtodos do objeto Math

Todos os mtodos do objeto Math aceitam um, dois ou nenhum nmeros como argumentos e devolvem um nmero como resultado. Mtodo abs(x) acos(x) asin(x) atan(x) atan2(x, y) Descrio Devolve o valor absoluto de x Devolve o valor do arco (radianos) cujo cosseno x Devolve o valor do arco (radianos) cujo seno x Devolve o valor do arco (radianos) cuja tangente x Devolve o valor do ngulo formado pelo eixo dos xx com a linha 89

ceil(x) cos(x) exp(x) floor(x) log(x) max(x,y) min(x,y) pow(x,y) random() round(x) sin(x) sqrt(x) tan(x)
que une a origem dos eixos ao ponto de coordenadas (x, y) Devolve o nmero inteiro mais prximo de x e no inferior a x Devolve o cosseno de x Devolve o valor da exponencial de x (E elevado potncia x) Devolve o nmero inteiro mais prximo de x e no superior a x Devolve o logaritmo natural de x Devolve o maior dos nmeros (x, y) Devolve o menor dos nmeros (x, y) Devolve o valor x elevado potncia y Devolve um nmero aleatrio situado entre 0 e 1 (no aceita argumentos) Devolve o nmero inteiro mais prximo de x Devolve o seno de x Devolve a raiz quadrada de x Devolve a tangente de x
Exemplos de Aplicao
Ler os valores das constantes pr-definidas (propriedades)
<html> <head> <title></title> </head> <body style="font-family:verdana"> <p> Estas so as constantes que podemos obter como propriedades do objeto Math: </p> <script type="text/javascript"> <!-document.write("Math.E = "+Math.E+"<br>") document.write("Math.LN2 = "+Math.LN2+"<br>") document.write("Math.LN10 = "+Math.LN10+"<br>") document.write("Math.LOG2E = "+Math.LOG2E+"<br>") document.write("Math.LOG10E = "+Math.LOG10E+"<br>") document.write("Math.PI = "+Math.PI+"<br>") document.write("Math.SQRT1_2 = "+Math.SQRT1_2+"<br>") document.write("Math.SQRT2 = "+Math.SQRT2+"<br>") // --> </script> </body> </html>
90

Arredondar um nmero para o valor inteiro mais prximo (mtodo round() )

<html> <head> <title></title> </head> <body> O valor de 69.25 arredondado para as unidades <script type="text/javascript"> <!-document.write(Math.round(69.25)) // --> </script> </body> </html>
Nmeros aleatrios distribudos entre 0 e 1(mtodo random() )

<html> <head> <title></title> </head> <body> <p> A cada atualizao da pgina obtm-se um nmero diferente </p> <script type="text/javascript"> <!-document.write(Math.random()) // --> </script> </body> </html>
91

Gerar nmeros aleatrios inteiros distribudos entre 0 e 10

<html> <head> <title></title> </head> <body> <p> A cada atualizao da pgina obtm-se um nmero diferente </p> <script type="text/javascript"> <!-no=Math.random()*10 document.write(Math.floor(no)) // --> </script> </body> </html>
Escolher o maior de dois nmeros (mtodo max() )

<html> <head> <title></title> </head> <body> O maior dos nmeros (12, 7) <script type="text/javascript"> <!-document.write(Math.max(12,7)) // --> </script> </body> </html>
92

Escolher o menor de dois nmeros (mtodo min() )

<html> <head> <title></title> </head> <body> O menor dos nmeros (12, 7) <script type="text/javascript"> <!-document.write(Math.min(12,7)) // --> </script> </body> </html>
Converter temperaturas de graus Celsius para Fahrenheit e vice versa

<html> <head> <script type="text/javascript"> <!-function celsius_para_Fahrenheit() { var F=parseInt(document.getElementById("celsius").value)*9/5+32 document.getElementById("fahrenheit").value=Math.round(F) } function fahrenheit_para_Celsius() { var C=(parseInt(document.getElementById("fahrenheit").value) - 32)*5/9 document.getElementById("celsius").value=Math.round(C) } // --> </script> <title></title> </head> <body>
93

<p> Escreva em qualquer um dos campos de insero de texto. Depois de fazer entrar com um valor numrico num dos campos pressione a tecla "Enter" para que ele seja convertido para as unidades do outro campo. </p> <table> <tr> <td> <form action="javascript:celsius_para_Fahrenheit()"> <input id="celsius" size="3"> graus Celsius equivalem a </form> </td> <td width="20"> </td> <td> <form action="javascript:fahrenheit_para_Celsius()"> <input id="fahrenheit" size="3"> graus Fahrenheit </form> </td> </tr> </table> <p> A utilizao do mtodo Math.round() necessria porque queremos valores inteiros para as temperaturas. </p> </body> </html>
11. Objeto String

Criao de um objeto String
// Uma string cujo contedo ser definido mais tarde var s = new String() // Uma string cujo contedo definido logo partida var s = new String("contedo da string")
O interpretador de JavaScript transforma automaticamente em objetos String todas as variveis que tenham texto como contedo. Se uma varivel contm texto ela automaticamente um objeto String, mesmo que no tenha sido criada como tal.
11.1 Propriedades do objeto String

Propriedade length Descrio Contm o nmero de caracteres que compem a string
94

11.2 Mtodos do objeto String

Descrio Devolve o caractere que ocupa a posio ndice na string charCodeAt(ndice) Devolve o cdigo (conjunto Unicode) do caractere que ocupa a posio ndice na string indexOf(string_busca, ndice_opcional) Devolve a posio em que se encontra a primeira ocorrncia de string_busca ou -1 se essa ocorrncia no existir. Se no fornecermos um ndice_opcional a busca inicia-se na posio zero, mas se o fornecermos nesse ponto que se inicia a busca. lastIndexOf(string_busca, ndice_opcional) Devolve a posio em que se encontra a ltima ocorrncia de string_busca ou -1 se essa ocorrncia no existir. A busca faz-se a partir do fim e caminha progressivamente para o incio. Se no fornecermos um ndice_opcional a busca inicia-se no fim, mas se o fornecermos nesse ponto que se inicia a busca. split(string_separador, limite_opcional) Divide uma string em partes usando as ocorrncias de string_separador como pontos de diviso. Devolve um array com todas as divises (substrings) encontradas. Cada elemento do array uma substring da string original. O limite_opcional indica o nmero mximo de partes a incluir no array que devolvido. A string_separador excluda das divises e o objeto String sobre o qual foi invocado este mtodo no sofre alteraes. substring(incio, fim) Devolve uma seo da string composta pelos caracteres que ocupam as posies com ndices entre incio (includa) e fim (excluda). toLowerCase() Devolve uma verso da string com todos os caracteres convertidos para letra pequena toUpperCase() Devolve uma verso da string com todos os caracteres convertidos para letra grande charAt(ndice) Mtodo
11.3 Mtodos estticos do objeto String

Mtodo String.fromCharCode() Descrio Devolve o caractere correspondente ao cdigo Unicode fornecido
Este objeto muito importante em diversas tarefas que podemos realizar em JavaScript: validar formulrios, trabalhar com cookies, etc.
95

Exemplos de Aplicao
Contar o nmero de caracteres de uma String (propriedade length)
<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var str="No h nada melhor que uma cervejinha gelada na sexta noite." document.write('A String <p> "'+ str + '"</p> tem ') document.write(str.length+" caracteres") // --> </script> </body> </html>
Localizar a ocorrncia de uma seqncia de caracteres

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var str="No h nada melhor que uma cervejinha gelada na sexta noite." var pos=str.indexOf("cervejinha ") if (pos>=0) { document.write('a palavra "cervejinha" foi encontrada na posio: ') document.write(pos + "<br>") } else { document.write('a palavra "cervejinha" no foi encontrada!') } // --> </script> <p>Este exemplo verifica se uma string (varivel de texto) contm uma determinada palavra. Se a palavra for encontrada ser indicada a posio em que foi localizado o seu primeiro caractere.<br><br> <b>Nota:</b> A posio do primeiro caractere da string 0, no 1. </p> </body> </html>
96

Verificar se uma string contm um determinado caractere (mtodo match() )

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var str="No h nada melhor que uma cervejinha gelada na sexta noite." document.write(str.match("gelada")) // --> </script> <p>Este exemplo verifica se uma palavra (que neste caso "gelada") est contida na string. Se estiver ela ser devolvida.</p> </body> </html>
Devolver uma seo de uma string (mtodo substring() )

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var str="No h nada melhor que uma cervejinha gelada na sexta noite." document.write("str.substring(27,31) = "+str.substring(27,31)) document.write("<br><br>") document.write("str.substring(27,36)="+str.substring(27,36)) // --> </script> <p>O mtodo substring() do objeto String devolve uma seo de uma string. Assim, str.substring(27,31) devolve
97

os caracteres que na string str se encontram entre as posies 27 e 31. Neste exemplo eles formam a palavra "cerv".</p> </body> </html>
Converter em maisculas ou em minsculas (mtodos toLowerCase() e toUpperCase() )

<html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-var str="Ol Pessoal do JavaScript!" document.write(str.toLowerCase()) document.write("<br>") document.write(str.toUpperCase()) // --> </script> </body> </html>
Obter o cdigo unicode de um caractere

<html> <head> <script type="text/javascript"> <!-function toUnicode() { var str=document.getElementById("myInput").value if (str!="") { var unicode=str.charCodeAt(0)
98

document.getElementById("unicode").value=unicode } } // --> </script> <title></title> </head> <body> <form action="javascript:;"> Escreva um caractere no campo seguinte:<br> <input maxlength="1" onkeyup='toUnicode()' type="text" size="2" id="myInput"> <hr> O cdigo Unicode do caractere : <input size="3" type="text" id="unicode"> </form> </body> </html>
PARTE III: HTML Dinmico

99

Se j domina bem o HTML 4.01 (ou o XHTML 1), o JavaScript e os estilos CSS, ento chegou o momento juntar o DOM ("Document Object Model") a estes ingredientes para enriquecer as suas pginas da Web. Esta combinao de tecnologias costuma ser designada por HTML Dinmico, ou DHTML, e vai ajud-lo a proporcionar experincias mais ricas aos usurios do seu website, tornando a sua tarefa de webmaster muito mais emocionante.
1. Para que serve o HTML Dinmico?

O DHTML pode ser usado para criar menus avanados, painis de texto dinmicos, movimentar os elementos sobre a pgina, etc. As aplicaes mais teis so aquelas que contribuem para dar mais eficincia forma como um website transmite a informao que contm. Muitas delas so bastante elaboradas e no podem ser ilustradas de forma simples. A lista seguinte apresenta alguns exemplos muito simples. Se dominarmos bem as tcnicas bsicas usadas nestes exemplos e se soubermos combin-las umas com as outras seremos capazes de produzir efeitos bastante sofisticados e de melhorar a forma com os usurios interagem com os nossos websites.
Exemplos simples que pode modificar

Modificar o contedo de um elemento
<html> <head> <script type="text/javascript"> function nameon() { document.getElementById("textoh2").innerHTML="Seja Bem Vindo!" } function nameout() { document.getElementById("textoh2").innerHTML="Como voc est?" } </script> <title></title> </head> <body> <h2 id="textoh2" onmouseover="nameon()" onmouseout="nameout()">Passe o mouse sobre este texto!</h2> </body> </html>
100

Apresentar uma dica

<html> <head> <script type="text/javascript"> function gettip(txt) { document.getElementById("tip").innerHTML=txt } function reset() { document.getElementById("tip").innerHTML="" } </script> <title></title> </head> <body> <p>Passe o mouse sobre estes nomes de bebidas:</p> <span onmouseover="gettip('Bebida super potente e com extraordinrias propriedades medicinais')" onmouseout="reset()">Bagaceira</span><br> <span onmouseover="gettip('Bebida excelente quando muito diluda em Vodka')" onmouseout="reset()">Suco de Laranja</span><br><br> <div id="tip"> </body> </html>
Alterar a posio de um elemento

<html> <head> <script type="text/javascript"> function moveleft() { document.getElementById("header").style.position="absolute"
101

document.getElementById("header").style.left="0" } function moveback() { document.getElementById("header").style.position="relative" } </script> <title></title> </head> <body> <h1 id="header" onmouseover="moveleft()" onmouseout="moveback()">Passe com o mouse sobre este texto</h1> </body> </html>
Texto crescendo
<html> <head> <script type="text/javascript"> msgfield=null txtsize=0 maxsize=60 function writemsg() { if(msgfield==null) msgfield=document.getElementById("msg") if (txtsize<maxsize) { msgfield.style.fontSize=txtsize txtsize++ timer=setTimeout("writemsg()",10) } } function stoptimer() { clearTimeout(timer) } </script> <title></title> </head> <body onload="writemsg()" onunload="stoptimer()"> <p id="msg" style="FONT-SIZE: 2px">Estou crescendo</p> </body> </html>
102

Um efeito dinmico
<html> <head> <script type="text/javascript"> <!-move=150 var i=0 var j=0 var timer var header=null function moveheader() { if(header==null) header=document.getElementById("h1") header.style.position="relative" if (i<=move) { header.style.left=i i++ } else { if (j<=move) { header.style.top=j j++ } else { if (move>=0) { header.style.left=move header.style.top=move move-=1 } } } timer=setTimeout("moveheader()",20) } function stoptimer() { clearTimeout(timer) } --> </script> <title></title> </head> <body onload="moveheader()" onunload="stoptimer()"> <h1 id="h1" style="LEFT:5px; POSITION:relative">Cabealho em movimento</h1> </body>
103

</html>
Quadro com texto em deslocamento

<html> <head> <style type="text/css"> span { font: 12px arial; position: absolute; width: 100px; height: 500px; top: 100px; clip:rect(0 100 100 0); } </style> <script type="text/javascript"> var display=null var interval startPosition=0 topPosition=17 endPosition=100 speed=60 function scrollit() { if(display==null) display=document.getElementById("quadro") if (startPosition!=200) { startPosition=startPosition+1 topPosition=topPosition-1 display.style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)" display.style.top=topPosition interval=setTimeout("scrollit()",speed) } else { startPosition=0 topPosition=100 endPosition=100 interval=setTimeout("scrollit()",speed) } } function stopinterval() { clearTimeout(interval) } </script>
104

<title></title> </head> <body onload="scrollit()" onunload="stopinterval()"> <span id="quadro" style="CLIP: rect(4px 100px 103px 0px); TOP: 17px"> <br><br> <b>Este script permite apresentar texto em deslocamento. Ele muito simples e funciona em todos os browsers relevantes.</b> </span> </body> </html>
Trocar uma imagem por outra

<html> <head> <script type="text/javascript"> var myImage function moveover() { foto=document.getElementById("imagem") foto.src="aberta.jpg" } function moveback() { foto.src="fechada.jpg" } </script> <title></title> </head> <body> <b>Passe o mouse sobre a imagem</b><br> <img id="imagem" onmouseover="moveover()" onmouseout="moveback()" height="115" src="fechada.jpg" width="86"> </body> </html>
105

Dar movimento a uma imagem

<html> <head> <script type="text/javascript"> var i=1 var myImage function starttimer() { myImage=document.getElementById("bola") nextMove() } function nextMove() { myImage.style.position="relative" myImage.style.left=+i+"px" i++ timer=setTimeout("nextMove()",100) } function stoptimer() { clearTimeout(timer) } </script> <title></title> </head> <body onload="starttimer()" onunload="stoptimer()"> <img id="bola" style="LEFT: 4px; POSITION: relative" height="32" src="bola.gif" width="32"> </body> </html>
Um cursor que deixa rasto

<html> <head> <script type="text/javascript"> var i=0 var txt=new Array("rastoA","rastoB","rastoC") function cursor(intervalo, event) { pos=i*8+5 if (intervalo=='primeiro') i=0 if(i==0) { xpos=event.clientX ypos=event.clientY
106

document.getElementById(txt[i]).style.visibility="visible" document.getElementById(txt[i]).style.position="absolute" document.getElementById(txt[i]).style.left=xpos+5 document.getElementById(txt[i]).style.top=ypos+5 } else { document.getElementById(txt[i]).style.visibility="visible" document.getElementById(txt[i]).style.position="absolute" document.getElementById(txt[i]).style.left=xpos+pos document.getElementById(txt[i]).style.top=ypos+pos } i++ if (i==txt.length) i-=1 setTimeout("cursor('seguinte')",10) } </script> <title></title> </head> <body onmousemove="cursor('primeiro', event)"> <h1>Mova o cursor sobre este exemplo</h1> <span id="rastoA" style="VISIBILITY: hidden">W</span> <span id="rastoB" style="VISIBILITY: hidden">3</span> <span id="rastoC" style="VISIBILITY: hidden">C</span> <br><br><br><br> </body> </html>
Apresentar mensagem tipo mquina de escrever

<html> <head> <script type="text/javascript"> message="A melhor forma de aprender com exemplos" pos=0 maxlength=message.length+1 function writemsg() { if (pos<maxlength) { txt=message.substring(pos,0) document.forms[0].msgfield.value=txt pos++ timer=setTimeout("writemsg()", 100) } } function stoptimer() { clearTimeout(timer)
107

} </script> <title></title> </head> <body onload="writemsg()" onunload="stoptimer()"> <form> <input id="msgfield" size="50" value="T"> </form> </body> </html>
O presente curso vai prepar-lo para aprender muito bem todos esses scripts que vamos construir brevemente. Esses novos exemplos vo aplicar estes conhecimentos para realizar tarefas muito especficas. Uma das primeiras ser a criao fcil de menus de abrir eficazes e muito fceis de preparar. Outro exemplo daquilo que o DHTML lhe pode oferecer so as funcionalidades disponveis neste curso. graas ao DHTML que possvel incluir um nmero to elevado de exemplos interativos e produzir as funcionalidades avanadas que os fazem funcionar da forma como se v.
2. O DHTML ainda pouco aproveitado. Porqu?

O DOM permite manipular todo o contedo de uma pgina recorrendo a scripts: alterar o contedo de um elemento, inserir novos elementos, remover elementos, alterar estilos CSS, etc. Os manipuladores de eventos do HTML permitem-nos escrever scripts que reagem s aes do usurio e respondem fazendo alteraes ao contedo da pgina. Se soubermos usar bem estes recursos seremos capazes de criar pginas verdadeiramente dinmicas que rapidamente estabelecem uma comunicao muito mais rica com os usurios. Mas apesar deste grande potencial, a verdade que at hoje a utilizao do DHTML ainda est a um nvel muito inferior ao que seria de esperar. A capacidade para facilitar e enriquecer a interao dos usurios com um website no foi suficiente para convencer os criadores de pginas a adotar o DHTML com entusiasmo. As razes principais para isto so trs: Muitos criadores de pginas ainda no abandonaram completamente as prticas desaconselhadas a que foram obrigados a aderir no passado. Essas prticas eram usadas para compensar as fortes imperfeies dos web browsers. Apesar da qualidade dos web browsers atuais ser muito aceitvel, ainda existem incompatibilidades entre eles, que apesar de serem fceis de superar ainda assustam muita gente.
108

Alguns usurios (muito poucos) ainda insistem na utilizao de web browsers antigos que desrespeitam os padres tcnicos (HTML 4.01, CSS, DOM) e as prticas recomendadas.
3. Que ferramentas vamos usar?

Um bom web browser tudo o que precisamos para fazer este curso. Pode ser usado o MSIE 6.0 ou superior, o Opera 7.2+, ou o Mozilla e seus derivados. Estes web browsers j contm todos os objetos de que precisamos.
3.1 Os objetos do DOM

Os browsers modernos colocam ao dispor dos criadores de pginas um conjunto muito rico de objetos que permitem ler e manipular todo o contedo de uma pgina da Web. As especificaes tcnicas recomendadas pelo W3C para este conjunto de objetos (designadas por DOM) definem formas para manipular documentos HTML atravs de scripts e especificam padres adequados para escrever programas de software sofisticados capazes de manipular documentos XML com eficincia. Porm, estas especificaes so extremamente extensas e difceis de implementar, deste modo, os criadores de web browsers decidiram implementar apenas aquelas que so mais relevantes para a interao dos scripts com as pginas da web. Se juntarmos a isto o fato de os browsers oferecerm outros objetos teis que no pertencem s especificaes do DOM notamos que, no momento atual, no podemos trabalhar com todos os objetos definidos no DOM e devemos usar outros que no pertencem ao DOM. Temos assim que para o criador de pginas da Web a situao a seguinte: nem todos os objetos definidos no DOM do W3C so relevantes para o DHTML, e h objetos que so teis e esto disponveis mas no pertencem ao DOM do W3C. Por isso, as ferramentas que vamos usar no DHTML so compostas por objetos definidos no DOM do W3C e por objetos adicionais que so oferecidos pelos browsers. Esses objetos adicionais, que so poucos, apesar de no estarem definidos em padres oficiais so suportados pelos browsers dominantes, o que faz deles padres de fato. Recorde que aqui consideramos como dominantes os seguintes browsers: MSIE 6.0 e superior, Opera 7.2+, Mozilla e seus derivados. Para que tudo fique muito claro aqui fica uma reafirmao do critrio usado neste curso: Vamos usar todos os recursos disponveis que nos ofeream garantias de bom funcionamento em todos os browsers importantes. Se existir uma recomendao do W3C aplicvel ao caso que estamos tratando e suportada pelos browsers ento essa ser a nossa escolha. Se no existir recomendao mas houver uma alternativa segura ento optaremos por essa alternativa.
3.2 Objetos principais usados em DHTML

Objeto window Contm mtodos propriedades Descrio O objeto window ocupa a posio de topo no DHTML. Ele contm outros objetos e informao acerca da janela do browser e do seu contedo.
109

document
mtodos propriedades colees propriedades propriedades mtodos propriedades mtodos propriedades propriedades
event history location navigator screen
O objeto document pertence ao objeto window e representa o contedo da pgina HTML. Ele nos d acesso aos elementos que definem a pgina e permitenos controlar tudo o que est na pgina. O objeto event contm informao acerca dos acontecimentos que ocorrem numa pgina HTML, os quais resultam de aes do usurio. O objeto history contm a histria da navegao de uma janela do browser e permite regressar a pginas que j foram visitadas antes O objeto location contm informao acerca da procedncia de uma pgina O objeto navigator contm informao acerca do browser que est apresentando a pgina. O objeto screen guarda informao acerca da tela em que a pgina est sendo visualizada
Os captulos seguintes descrevem estes e outros objetos importantes para o HTML Dinmico e apresentam muitos exemplos de aplicao. Notas importantes sobre os objetos Alguns dos mtodos destes objetos aceitam argumentos que no podem ser descritos de forma simples, deste modo, se optou por no incluir os argumentos nestas descries. A melhor forma de compreender a forma como se usam os argumentos dos mtodos mais complexos consiste em estudar e executar os numerosos exerccios de aplicao que so oferecidos. A maioria das propriedades aqui descritas podem ser lidas e modificadas para alterar a forma como uma pgina apresentada. Quando uma propriedade pode ser lida mas no pode ser modificada, ou pode ser modificada mas no pode ser lida, essa situao ser indicada de forma explcita. Sempre que no for dada qualquer indicao assume-se que a propriedade pode ser lida e pode ser modificada. Muitos elementos da linguagem HTML possuem atributos de apresentao (como por exemplo vspace e hspace nos elementos <img> e <applet>) que foram rejeitados nas verses modernas do HTML. Apesar do DOM continuar a suportar esses atributos fornecendo as propriedades correspondentes, o seu uso deve ser desencorajado, usando-se estilos CSS em seu lugar. Por esse motivo algumas dessas propriedades no so aqui mencionadas. Resoluo de incompatibilidades Alguns mtodos e propriedades dos objetos que estudaremos neste curso, apesar de no serem comuns a todos os browsers, oferecem-nos funcionalidades e informao teis que no podemos obter com segurana de nenhum outro modo. A sua utilizao deve-se ao fato de sermos capazes de resolver facilmente as incompatibilidades recorrendo a funes de compatibilidade muito simples. Nos casos em que o mtodo/propriedade de pouca utilidade, ou em que no possvel escrever uma funo de compatibilidade simples que tire partido da sua funcionalidade, optamos por ignorar esse mtodo ou propriedade. Num caso destes a
110

sua utilizao faria com que o nosso cdigo no funcionasse do mesmo modo em todos os browsers. As funes de compatibilidade permitem-nos escrever scripts que funcionam corretamente em todos os browsers importantes. Com elas tudo acontece como se as diferenas no existissem. Neste tutorial usaremos duas bibliotecas com funes de compatibilidade:
compat_window.js function documentScrollTop(obj) { var o=obj.document.body.scrollTop if((''+o)=='undefined') return o return obj.window.pageYOffset } compat_event.js function evento_FromTo(event) { /* Esta funo devolve uma lista com dois itens em que o primeiro item o elemento que acabou de ser abandonado pelo mouse e o segundo item o elemento para o qual o mouse se dirigiu. Esta funo pode ser usada com os eventos onmouseover e onmouseout */ if((''+event.fromElement)=='undefined') { if((''+event.type)=='mouseover') return new Array(event.relatedTarget,event.target) return new Array(event.target,event.relatedTarget) } return new Array(event.fromElement,event.toElement) }
4. O objeto window
O objeto window o objeto de topo no DOM do DHTML. Ele contm informao acerca da janela do browser e do seu contedo: tamanho, posio, documento, molduras (frames). As tabelas seguintes mostram listas com as propriedades e os mtodos mais importantes deste objeto. Mais abaixo voc encontrar diversos exemplos que ilustram a forma como alguns destes mtodos e propriedades so usados na prtica. Propriedade closed defaultStatus document event history Descrio Indica (true ou false) se a janela est fechada ou no L ou define a mensagem que por omisso aparece escrita na barra de status do browser Devolve o objeto document, que representa o documento que est sendo apresentado na janela. Devolve o objeto event, que descreve o ltimo acontecimento que ocorreu na janela. Objeto que contm uma lista com os endereos (URLs) das pginas j visitadas na presente sesso e permite regressar
111

length location name navigator opener outerHeight outerWidth pageXOffset pageYOffset parent returnValue screen screenLeft screenTop self status top
a elas L a quantidade de molduras (frames) que esto na janela Contm informao acerca do endereo (URL) da pgina que est sendo apresentada e permite alter-lo L ou define o nome da janela Devolve o objeto navigator Devolve (se existir) o objeto que abriu a janela (s em janelas popup) (S Mozilla/Netscape e Opera) Contm a altura exterior da janela do browser (S Mozilla/Netscape e Opera) Contm a largura exterior da janela do browser (S Mozilla/Netscape e Opera) Contm a coordenada x do canto superior esquerdo da janela (S Mozilla/Netscape e Opera) Contm a coordenada y do canto superior esquerdo da janela Caso a pgina esteja numa moldura (frame ou iframe) devolve o objeto window que a contm L o valor devolvido por uma caixa de dilogo Devolve um objeto que contm informao acerca da tela utilizada para ver a pgina (S MSIE) Contm a coordenada x do canto superior esquerdo da rea da janela que contm a pgina (difere de pageXOffset) (S MSIE) Contm a coordenada y do canto superior esquerdo da rea da janela que contm a pgina (difere de pageYOffset) Devolve o objeto window em que a pgina se encontra L ou define a mensagem que aparece escrita na barra de estado Devolve o objeto window que ocupa a posio mais elevada na hierarquia de molduras
Nota: Algumas das propriedades do objeto window so prprios objetos. Colees do objeto window Coleo frames Descrio Contm uma lista com todos os objetos que representam molduras que foram criadas usando os elementos <frame> ou <iframe>. Os objetos desta lista so prprios objetos window (a cada moldura corresponde uma janela.)
Mtodos do objeto window Mtodo alert() blur() clearInterval() clearTimeout() close() confirm() Descrio Mostra uma caixa com uma mensagem de texto e um boto OK. A janela perde o foco. Anula uma ao do mtodo setInterval(). Anula uma ao do mtodo setTimeout(). Fecha a janela. Mostra uma caixa com uma mensagem de texto, um boto para Cancelar e um boto para aceitar (OK).
112

escape() focus() moveBy() moveTo() open() print() prompt() resizeBy() resizeTo() scrollBy() scrollTo() setInterval() setTimeout() unescape()
Codifica uma string (texto) para que ela possa ser enviada como parte do URL ou guardada num cookie D o foco a uma janela Desloca a janela relativamente sua posio atual. Move a janela para a posio especificada. Abre uma nova janela (popup). Imprime o documento que se encontra na janela. Mostra uma caixa com uma pergunta e um campo para inserir uma resposta. Altera o tamanho da janela somando aos valores atuais os valores x e y especificados. Altera o tamanho da janela para os valores x e y especificados. Desloca o incio da parte visvel da janela somando os valores x, y s coordenadas da parte que est atualmente no incio da parte visvel. Faz com que a parte visvel do contedo da janela se inicie na parte da pgina que tem as coordenadas (x, y) especificadas. Executa a funo indicada a intervalos regulares (medidos em milisegundos) Executa a funo indicada uma s vez depois de passado algum tempo (medido em milisegundos) Descodifica uma string (texto) que estava preparada para ser enviada como parte do URL colocando-a na forma normal. Efetua a operao inversa do mtodo escape().
Exemplos de Aplicao
Apresentar uma caixa de alerta
<html> <head> <script type="text/javascript"> function salert() { alert("Isto uma caixa de alerta!!") } </script> <title></title> </head> <body> <form> <input onclick="salert()" type="button" value="Alertar"> </form> </body> </html>
113

Imprimir uma pgina

<html> <head> <script type="text/javascript"> function printPage() { window.print() } </script> <title></title> </head> <body> <p>Clique no boto para imprimir esta belssima pgina.</p> <form action="javascript:;"> <input onclick="printPage()" type="button" value="Imprimir esta pgina"> </form> </body> </html>
Deslocar (scroll) o documento dentro da janela relativamente posio atual

<html> <head> <script type="text/javascript"> function scrollWindow(x,y) { window.scrollBy(x,y)
114

} </script> <title></title> </head> <body> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br> <form style="text-align:center" action="javascript:;"> Clique para deslocar o documento 110 pixels para a direita e 70 pixels para baixo<br> <input onclick="scrollWindow(110,70)" type="button" value="Fazer Scroll"> </form><br> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br><br> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br><br> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br><br> </body> </html>
Deslocar (scroll) o documento dentro da janela para uma posio absoluta

<html> <head> <script type="text/javascript"> function scrollWindow(x,y) { window.scrollTo(x,y) } </script> title></title> </head> <body> <div style="width: 2200px">
115

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br> <form style="text-align:center" action="javascript:;"> Clique para deslocar o documento para a posio (110, 70)<br> <input onclick="scrollWindow(110,70)" type="button" value="Fazer Scroll"> </form><br> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br><br> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br><br> <div style="width: 2200px"> SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL </div><br><br> </body> </html>
Pedir uma confirmao

<html> <head> <title></title> </head> <body> <script type="text/javascript"> resposta=confirm("Tem a certeza que deseja continuar?") if(resposta==true) document.write("Voc respondeu OK (quer continuar.)") else document.write("Voc cancelou (no quer continuar.)") </script> </body> </html>
116

Pedir informao ao usurio

<html> <head> <title></title> </head> <body> <script type="text/javascript"> var nome = prompt("Por favor escreva o seu nome","desconhecido") if(nome == null || nome == "") nome="sem nome" document.write("Ol " + nome) </script> </body> </html>
Abrir uma janela

<html> <head> <script type="text/javascript"> function openWindow() { window.open("pagina.html") } </script> <title></title> </head> <body> <a href="javascript:openWindow()">Abrir janela</a> </body> </html>
117

Aumentar ou reduzir as dimenses de uma janela

<html> <head> <script type="text/javascript"> function resizeWindow(x,y) { window.resizeBy(x,y) } </script> <title></title> </head> <body> <a href="javascript: resizeWindow(40,20)"> Aumentar o tamanho da janela</a><br> <a href="javascript: resizeWindow(-40,-20)"> Reduzir o tamanho da janela</a><br> O opera no consegue executar este exemplo. </body> </html>
Dar um determinado tamanho a uma janela

<html> <head> <script type="text/javascript"> function resizeWindow(x,y) { window.resizeTo(x,y) } </script> <title></title> </head> <body> <a href="javascript: resizeWindow(640,440)">
118

Dar janela o tamanho 640 x 440</a><br> <a href="javascript: resizeWindow(780,580)"> Dar janela o tamanho 780 x 580</a><br> O opera no consegue executar este exemplo. </body> </html>
Agendar a execuo de uma funo

<html> <head> <script type="text/javascript"> function avisar() { alert('AVISO MUITO IMPORTANTE!!!\n\nJ passou 3 segundo desde que voc clicou.') } function agendar() { setTimeout("avisar()", 3000) } </script> <title></title> </head> <body> <br><a href="javascript:agendar()">Agendar a apresentao de um aviso</a> </body> </html>
119

Agendar a execuo repetida de uma funo

<html> <head> <script type="text/javascript"> var interval function avisar() { var resposta=confirm("Tem a certeza que quer continuar recebendo estes avisos?") if(resposta==false) clearInterval(interval) } function agendar() { interval=setInterval("avisar()",2000) } </script> <title></title> </head> <body> <br>Clique aqui para <a href="javascript:agendar()"> agendar uma apresentao repetida de um aviso</a> </body> </html>
Deslocar uma janela relativamente posio que ocupa

<html> <head> <script type="text/javascript"> function moveWindow(x,y) { top.window.moveBy(x,y) }
120

</script> <title></title> </head> <body> <a href="javascript: Deslocar a janela 20 <a href="javascript: Deslocar a janela 20 O opera no consegue </body> </html>
moveWindow(20,10)"> pixels para a direita e 10 pixels para baixo</a><br> moveWindow(-20,-10)"> pixels para a esquerda e 10 pixels para cima</a><br> executar este exemplo.
Mover uma janela para uma posio absoluta

<html> <head> <script type="text/javascript"> function moveWindow(x,y) { top.window.moveTo(x,y) } </script> <title></title> </head> <body> <a href="javascript: moveWindow(0,0)"> Mover a janela para o canto superior esquerdo da tela</a><br> <a href="javascript: moveWindow(100,80)"> Mover a janela para a posio 100 x 80</a><br> O opera no consegue executar este exemplo. </body> </html>
Faa um tremor de terra no o seu browser

<html> <head> <script type="text/javascript"> var xa=ya=0,x,y function tremer(i) { x=Math.floor((Math.random()<0.5) ? -i:i) y=Math.floor((Math.random()<0.5) ? -i:i) top.window.moveBy(x-xa,y-ya) i*=0.95 if(x!=0||y!=0||xa!=0||ya!=0) setTimeout('tremer('+i+')',20) else top.window.moveBy(-10,-10) xa=x ya=y
121

} function sismo(event) { top.window.moveBy(10,10) setTimeout('tremer(6)',20) return false } </script> <title></title> </head> <body> <br><a href="#" onclick="return sismo(event)"> Clique para iniciar um tremor de terra no seu browser.</a><br> <p>Segure-se bem!</p> <p>O browser opera no consegue executar este exemplo.</p> </body> </html>
5. O objeto document
O objeto document faz parte do objeto window, sendo obtido como uma propriedade deste, na forma window.document. Este objeto contm uma representao de um documento escrito em HTML. Se escrevermos apenas document, omitindo o objeto window, obteremos o objeto que representa o documento da pgina que estamos usando. Se especificarmos um objeto window correspondente a outra janela ou a outra moldura ento iremos obter o objeto document correspondente pgina que est nessa janela ou moldura. Propriedades do objeto document Propriedade body Descrio Devolve o elemento <body> (se o documento estiver escrito em HTML sem molduras) ou o elemento <frameset> (se o documento estiver escrito em HTML Frameset.) Devolve os cookies associados ao documento L o nome de domnio do servidor que enviou o documento L o endereo (URL) da pgina em que est a ligao que conduziu at ao documento atual L ou define o ttulo do documento L o endereo (URL) do documento
cookie domain referrer title URL
122

Nota: Algumas das propriedades do objeto document so prprios objetos. Colees do objeto document Coleo anchors applets embeds forms images links plugins Descrio Contm uma lista com todos os elementos <a> (ncoras) existentes no documento Contm uma lista com todos os elementos <applet> (miniaplicaes escritas em Java) Contm uma lista com todos os objetos que foram embutidos na pgina usando os elementos <embed> ou <object> Contm uma lista com todos os elementos <form> existentes no documento Contm uma lista com todas as imagens existentes no documento Contm uma lista com todos os elementos <a> existentes no documento que especifiquem um valor para o atributo href ( uma subcoleo de anchors.) Contm a mesma lista que a coleo embeds
As colees pertencentes ao objeto document contm objetos. Mtodos do objeto document Mtodo close() Descrio Fecha um documento que tenha sido aberto com o mtodo document.open() e escrito com document.write(). No confundir com o mtodo open() do objeto window, que serve para abrir uma nova janela. Devolve o elemento que possui o valor especificado no atributo id Contm uma lista com todos os elementos que tm um determinado nome (dado por uma etiqueta do HTML) Abre um documento para nele escrever contedo novo Escreve texto num documento Escreve uma linha de texto num documento
getElementById() getElementsByTagName() open() write() writeln() Exemplos de Aplicao
Ler o nome do domnio do servidor que enviou o documento

<html> <head> <title></title> </head> <body> <p> O nome do servidor que enviou esta pgina : <script type="text/javascript"> document.write(top.document.domain) </script> </p> <p> <b>Nota:</b> Este exemplo s funciona online. </p> </body>
123

</html>
Ler o URL da pgina em que estava a ligao que conduziu at esta pgina
<html> <head> <title></title> </head> <body> <p> A pgina que o conduziu a esta pgina : <script type="text/javascript"> document.write(top.document.referrer) </script> </p> <p> <b>Nota:</b> Este exemplo s funciona corretamente online. </p> </body> </html>
Ler o ttulo do documento

<html> <head> <title>Exemplo de DHTML</title> </head> <body> <p> O ttulo desta pgina : <script type="text/javascript"> document.write(document.title) </script> </p> </body>
124

</html>
Ler o URL do documento principal

<html> <head> <title></title> </head> <body> <p> O URL da pgina principal : <script type="text/javascript"> document.write(top.document.URL) </script> </p> </body> </html>
Trabalhar com o objeto que guarda todo o contedo da pgina

<html> <head> <title></title> <script type="text/javascript"> function mudarConteudo() { document.body.innerHTML='<p>Viu? Agora o contedo outro.</p>' } </script> </head> <body> <p> <a href="javascript:mudarConteudo()"> Clique aqui</a> para alterar o contedo desta pgina. </p> </body> </html>
125

Selecionar um elemento especfico e manipul-lo

<html> <head> <title></title> <script type="text/javascript"> function mudarConteudo() { var o=document.getElementById("caixa") o.innerHTML='Viu? Agora estou diferente.' } function mudarConteudo2() { var o=document.getElementById("caixa2") o.style.backgroundColor="red" o.style.color="white" o.innerHTML='E agora sou uma caixa vermelha com letras brancas.' } </script> </head> <body> <p> <a href="javascript:mudarConteudo()">Clique aqui</a> para alterar o contedo da caixa seguinte.<br> <a href="javascript:mudarConteudo2()">Clique aqui</a> para alterar o contedo da caixa amarela. </p> <div id="caixa" style="border: solid 1px #999999"> Eu sou uma caixa muito simples. </div><br> <div id="caixa2" style="border: solid 1px #999999; background-color: yellow"> E eu sou uma caixa amarela. </div> </body> </html>
126

Listar todos os elementos de um determinado tipo

<html> <head> <title></title> <script type="text/javascript"> function verElementos() { var o=document.getElementsByTagName("div") var s='Existem '+o.length+' elementos <div> na pgina.\n\n' s+='Os seus contedos so:\n\n' for(var i=0;i<o.length;++i) s+=o[i].innerHTML+'\n\n' alert(s) } </script> </head> <body> <p> <a href="javascript:verElementos()">Clique aqui</a> para listar os elementos <div> desta pgina. </p> <div style="border: solid 1px #999999"> Eu sou um elemento div. </div><br> <div style="border: solid 1px #999999"> Eu sou outro elemento div. </div><br> <div style="border: solid 1px #999999"> Eu sou mais um elemento div. </div> </body> </html>
127

Escrever um documento de novo

<html> <head> <title></title> <script type="text/javascript"> function escreverNovoConteudo() { var s='<html>' s+='<head><title>Este o novo contedo</title></head>' s+='<body>' s+='<p>Agora temos contedo novo.</p>' s+='</body></html>' document.open() document.write(s) document.close() /* Repare que devemos utilizar os mtodos document.open() e document.close() porque o documento j estava completamente carregado. Como ele j estava fechado necessrio abri-lo, escrever nele e fech-lo de novo. */ } </script> </head> <body> <p> <a href="javascript:escreverNovoConteudo()">Clique aqui</a> para substituir o contudo desta pgina por novo contedo. </p> </body> </html>
Acrescentar contedo a um documento

<html> <head> <title></title> </head> <body> <p>Este um pargrafo normal.</p> <script type="text/javascript"> <!-var s='<p>Este pargrafo foi criado em JavaScript.</p>' var d=new Date() s+='<p>A data e a hora atuais so: '+d.toLocaleString()+'</p>' document.write(s) --> </script> <p> Repare que se utilizarmos o mtodo document.write() enquanto o documento est sendo carregado no devemos usar o mtodo document.open() nem o
128

mtodo document.close(), porque o documento ainda est aberto e disponvel para ser escrito. </p> </body> </html>
Listar todas as ligaes de hipertexto existentes no documento

<html> <head> <title></title> <script type="text/javascript"> function verLinks() { var s='' var o=document.links for(var i=0;i<o.length;++i) s+=o[i].href+'\n' alert(s) } </script> </head> <body> <p> Aqui temos vrias ligaes de hipertexto para o website do W3C: <a href="http://www.w3.org/Graphics/SVG/" target="_blank">SVG</a>, <a href="http://www.w3.org/TR/REC-CSS2" target="_blank">CSS2</a>, <a href="http://www.w3.org/TR/REC-DOM-Level-1" target="_blank">DOM</a> <a href="http://www.w3.org/TR/xhtml1" target="_blank">XHTML 1</a>. <p> <a href="javascript:verLinks()" style="background-color:#666666;color:white">Clique aqui</a> para ver uma lista com os valores dos atributos href de todas as ligaes que esto presentes neste exemplo. </p> </body> </html>
129

Listar todos os formulrios que esto no documento

<html> <head> <title></title> <script type="text/javascript"> function verForms() { var s='' var o=document.forms for(var i=0;i<o.length;++i) s+=o[i].name+' action="'+o[i].action+'" ('+o[i].length+' elementos)\n' alert(s) } </script> </head> <body style="font-size: 12px"> <p> <a href="javascript:verForms()">Clique aqui</a> para ver uma lista com todos os formulrios deste exemplo com indicao do nmero dos seus elementos. </p> <fieldset><legend>Formulrio 1</legend> <form action="javascript:action1()" name="checkup"> Nome: <input type="text"> Peso: <input type="text" size="4"> Altura: <input type="text" size="4"> </form> </fieldset><br> <fieldset><legend>Formulrio 2</legend> <form action="javascript:action2()" name="comprarSapatos"> Tamanho: <input type="text" size="2"> </form> </fieldset> </body> </html>
130

Listar todas as imagens que esto no documento

<html> <head> <title></title> <script type="text/javascript"> function verImagens() { var s='' var o=document.images for(var i=0;i<o.length;++i) s+=o[i].src+' ('+o[i].width+'x'+o[i].height+')\n' alert(s) } </script> </head> <body> <p> Aqui temos algumas imagens: <img src="book.gif" alt="Um livro"> <img src="2569.gif" alt="Direes"> <img src="magoo.gif" alt="O Senhor Magoo"> </p> <p> <a href="javascript:verImagens()">Clique aqui</a> para ver uma lista com todas as imagens que esto presentes neste exemplo com indicao dos seus tamanhos. </p> </body> </html>
131

6. O objeto event
O objeto event tem propriedades que descrevem os acontecimentos que ocorrem numa pgina HTML. Propriedades do objeto event Propriedade altKey button cancelBubble clientX clientY ctrlKey dataFld fromElement keyCode offsetX offsetY propertyName repeat returnValue screenX screenY shiftKey srcElement toElement type x y Descrio Indica (true ou false) se a tecla Alt est pressionada ou no Diz qual dos botes do mouse est pressionado Permite controlar e saber se o evento atual se propaga (bubble up) ou no aos objetos que esto cima na hierarquia do DOM L a coordenada x do cursor do mouse no momento em que ocorreu o evento L a coordenada y do cursor do mouse no momento em que ocorreu o evento Indica (true ou false) se a tecla Ctrl est pressionada ou no Devolve a coluna de dados afetada pelo evento oncellchange Devolve o elemento que o cursor do mouse acaba de abandonar L o valor do cdigo Unicode correspondente tecla que est sendo pressionada L a coordenada horizontal do cursor L a coordenada vertical do cursor L o nome da propriedade qua acabou de mudar de valor Indica se o evento se repete ou no L ou define o valor que ser devolvido pelo evento L a coordenada x do cursor do mouse relativamente origem da tela L a coordenada y do cursor do mouse relativamente origem da tela Indica (true ou false) se a tecla Shift est pressionada ou no Devolve o elemento no qual o evento teve origem (MSIE) Devolve o objeto para o qual o cursor acabou de entrar (MSIE) L o tipo do evento L a coordenada x do cursor L a coordenada y do cursor
6.1 Funes de compatibilidade para o objeto event

Os eventos so objetos em que ainda existem algumas incompatibilidades entre os browsers dominantes. Para conseguirmos que as nossas pginas que usam eventos funcionem sem modificaes em todos os browsers ns somos obrigados a usar cdigo de compatibilidade. Neste curso compatibilidade: usamos duas pequenas bibliotecas com funes de
compat_window.js compat_event.js
132

Alguns dos exemplos que se encontram mais abaixo mostram como se usam na prtica estas funes de compatibilidade.
Exemplos de Aplicao
Executar uma ao logo que o documento esteja carregado
<html> <head> <title></title> <script type="text/javascript"> function avisar() { alert("O carregamento da pgina terminou!") } </script> </head> <body onload="avisar()"> <p> Quando o documento estiver completamente carregado ser apresentada uma caixa de aviso. </p> </body> </html>
Executar uma ao quando o documento for abandonado

<html> <head> <title></title> <script type="text/javascript"> function tchau() { alert("At a prxima!") } </script> </head> <body onunload="tchau()"> <p> Quando fechar este exemplo ou carregar outro ser apresentada uma caixa de despedida. </p> <p>O opera no consegue executar este exemplo corretamente.</p> </body> </html>
133

Reagir quando o mouse passar sobre um elemento

<html> <head> <title></title> <script type="text/javascript"> function over() { alert("Importa-se de sair de cima de mim?") } </script> </head> <body> <p onmouseover="over()" style="background-color: #ffffcc"> Veja o que acontece se passar com o mouse sobre este pargrafo com fundo amarelo. </p> </body> </html>
Reagir quando o mouse deixar de estar sobre um elemento

<html> <head> <title></title> <script type="text/javascript"> function out() { alert("Ufa... que alvio!") } </script> </head> <body> <p onmouseout="out()" style="background-color: #ffffcc"> Veja o que acontece quando o mouse deixa de estar sobre este pargrafo com fundo amarelo. </p> </body> </html>
134

Detectar o elemento para o qual se deslocou o mouse

<html> <head> <title>Exemplo</title> </head> <script type="text/javascript" src="compat_event.js"></script> <!-A linha anterior faz o carregamento da biblioteca de compatibilidade para o objeto event. --> <script type="text/javascript"> function saiu(event) { var a=evento_FromTo(event) var objDestino=a[1] var objPartida=a[0] var s="O mouse abandonou o elemento cujo id "+objPartida.id s+="\ne dirigiu-se para o elemento cujo id "+objDestino.id alert(s) /* As funes eventFromElement() e eventToElement() so definidas na biblioteca de compatibilidade */ } </script> <body> Detectar o elemento para o qual se deslocou o mouse <div id="caixa1" style="background-color: red"> Esta a caixa 1. <div id="caixa2" onmouseout="saiu(event)" style="border: solid 1px #cccccc; background-color:white; margin:20px"> Esta a caixa 2. Passe com o mouse sobre ela e depois faa-o sair para ver o que acontece. </div> Estamos de novo na caixa 1. </div> Passe com o mouse sobre a caixa 2 e depois faa-o sair para ver o que acontece. </body> </html>
135

Detectar o elemento de onde vem o mouse

<html> <head> <title>Exemplo</title> </head> <script type="text/javascript" src="compat_event.js"></script> <!-A linha anterior faz o carregamento da biblioteca de compatibilidade para o objeto event. --> <script type="text/javascript"> function entrou(event) { var a=evento_FromTo(event) var objDestino=a[1] var objPartida=a[0] var s="O mouse entrou no elemento cujo id "+objDestino.id s+="\nvindo do elemento cujo id "+objPartida.id alert(s) /* As funes eventFromElement() e eventToElement() so definidas na biblioteca de compatibilidade */ } </script> <body> Detectar o elemento de onde partiu o mouse ao deslocar-se para a caixa 2 <div id="caixa1" style="background-color: red"> Esta a caixa 1. <div id="caixa2" onmouseover="entrou(event)" style="border: solid 1px #cccccc; background-color:white; margin:20px"> Esta a caixa 2. Passe com o mouse sobre ela para descobrir de onde ele vem. </div> Estamos de novo na caixa 1. </div> Passe com o mouse sobre a caixa 2 e depois faa-o sair para ver o que acontece. </body> </html>
136

Reagir a um clique do mouse

<html> <head> <title></title> <script type="text/javascript"> function clicou() { alert("Ai... No faa isso!") } </script> </head> <body> <p onclick="clicou()" style="background-color: #ffffcc"> Veja o que acontece se clicar neste pargrafo com fundo amarelo. </p> </body> </html>
Reagir quando o boto do mouse pressionado

<html> <head> <title></title> <script type="text/javascript"> function mousedown() { alert("Isto demais... J no tenho sossego nenhum!") } </script> </head> <body> <p onmousedown="mousedown()" style="background-color: #ffffcc"> Veja o que acontece se pressionar o boto esquerdo do mouse enquanto ele est sobre este pargrafo com fundo amarelo.
137

</p> </body> </html>
Reagir quando o boto do mouse libertado

<html> <head> <title></title> <script type="text/javascript"> function mouseup() { alert("Muito obrigado!") } </script> </head> <body> <p onmouseup="mouseup()" style="background-color: #ffffcc"> Veja o que acontece ao libertar o boto esquerdo do mouse enquanto ele est sobre este pargrafo com fundo amarelo. </p> </body> </html>
Onde estava o mouse quando aconteceu o evento?

<html> <head> <title></title> <script type="text/javascript"> function pressionou(event) { var s="clientX="+event.clientX+"\nclientY="+event.clientY s+="\n\nscreenX="+event.screenX+"\nscreenY="+event.screenY s+="\n\noffsetX="+event.offsetX+"\noffsetY="+event.offsetY s+="\n\nx="+event.x+"\ny="+event.y
138

alert(s) } </script> </head> <body> <p onmousedown="pressionou(event)" style="background-color: #ffffcc"> Clique sobre este pargrafo com fundo amarelo e fique sabendo as coordenadas do ponto em que ele se encontra. </p> </body> </html>
Detectar qual dos botes do mouse foi pressionado

<html> <head> <title></title> <script type="text/javascript"> function pressionou(event) { alert(event.button) } </script> </head> <body> <p onmousedown="pressionou(event)" style="background-color: #ffffcc"> Pressione algumas vezes o boto esquerdo do mouse e outras o boto direito sobre este pargrafo com fundo amarelo. </p> </body> </html>
Reagir quando uma tecla pressionada

<html> <head>
139

<title></title> <script type="text/javascript"> function pressionou(event) { var codigo=event.keyCode var tecla=String.fromCharCode(codigo) alert('Voc pressionou a tecla "'+tecla+'" (cdigo '+codigo+')') return false } </script> </head> <body onkeydown="pressionou(event)"> <p> Clique sobre o exemplo e depois pressione algumas teclas. </p> </body> </html>
Reagir quando uma tecla libertada

<html> <head> <title></title> <script type="text/javascript"> function libertou(event) { var codigo=event.keyCode var tecla=String.fromCharCode(codigo) alert('Libertou a tecla "'+tecla+'" (cdigo '+codigo+')') return false } </script> </head> <body onkeyup="libertou(event)"> <p>Clique sobre o exemplo e depois pressione algumas teclas.</p> </body> </html>
140

Usar evento onmousedown para trocar imagens

<html> <head> <script type="text/javascript"> function abreBoca() { document.getElementById("imagem").src="aberta.jpg" } function fechaBoca() { document.getElementById("imagem").src="fechada.jpg" } </script> <title></title> </head> <body> <img onmouseup="fechaBoca()" onmousedown="abreBoca()" id="imagem" height="115" src="fechada.jpg" width="86"> <p>Clique sobre a fotografia para ele abrir a boca</p> </body> </html>
Onchange
<html> <head> <script type="text/javascript"> function browserPreferido() { prefere=document.forms[0].browsers.value alert("Eu prefiro o " + prefere) } </script> <title></title> </head> <body> <form> <select id="browsers" onchange="browserPreferido()"> <option selected="selected">Escolha um Browser</option> <option value="Mozilla/Netscape">Mozilla</option> <option value="Microsoft Internet Explorer">Internet Explorer</option> <option value="Opera">Opera</option> </select> </form> </body> </html>
141

Onsubmit
<html> <head> <script type="text/javascript"> function validar() { alert("Esta funo devia validar os dados do formulrio") return false } </script> <title></title> </head> <body> <form onsubmit="validar()"> Escreva o seu email:<br> <input type="text" name="mail"> <input type="submit" value="Enviar dados"> </form> </body> </html>
Onreset
<html> <head> <script type="text/javascript"> function mensagem() { alert("Agora vamos retornar aos valores iniciais do formulrio") } </script> <title></title>
142

</head> <body> <form onreset="mensagem()"> Escreva o seu nome: <input value="desconhecido"><br> <input type="reset" value="Repor os valores iniciais"> </form> </body> </html>
Onblur
<html> <head> <script type="text/javascript"> function mensagem() { alert("Esta caixa de alerta foi acionada pelo manipulador do evento onblur") } </script> <title></title> </head> <body> <p> O manipulador dos eventos onblur chamado quando um elemento perde o foco. Clique sobre o campo de insero de texto para lhe dar o foco. A seguir clique em outra parte do documento. Ao perder o foco ocorre um evento onblur no campo de insero de dados e o manipulador de eventos invocado. </p> <form> Escreva o seu nome: <input onblur="mensagem()"> </form> </body> </html>
143

Onfocus
<html> <head> <script type="text/javascript"> function mensagem() { alert("Depois de fechar esta caixa voc pode comear a escrever") } </script> <title></title> </head> <body> <p> O manipulador do evento onfocus chamado quando um elemento ganha o foco. Clique sobre o campo de insero de texto pare lhe dar o foco. </p> <form> Escreva o seu nome: <input onfocus="mensagem()"> </form> </body> </html>
7. O objeto navigator
O objeto navigator contm propriedades que guardam informao acerca do browser que est apresentando a pgina. Propriedades do objeto navigator Propriedade appCodeName appMinorVersion appName appVersion browserLanguage language cookieEnabled cpuClass Descrio L o nome de cdigo do browser (S MSIE) L a parte baixa do nmero de verso do browser L o nome do browser L o nmero de verso do browser e a plataforma em que est sendo executado (S MSIE) Indica a lngua principal usada pelo usurio do browser (S Mozilla/Netscape e Opera) Indica a lngua desta verso do browser Indica (true ou false) se o browser aceita cookies (S MSIE) Indica a classe do CPU usado no sistema em que o browser est sendo executado
144

oscpu onLine platform systemLanguage userAgent userLanguage
(S Mozilla/Netscape e Opera) Indica o sistema operacional em que o browser est sendo executado (S MSIE) Indica (true ou false) se o sistema est online ou no L o nome da plataforma em que o browser est sendo executado (S MSIE) Indica a lngua principal do sistema em que o browser est sendo executado L o texto com que o browser se identifica perante os servidores da Web Indica a lngua principal usada pelo usurio do browser
Exemplos de Aplicao
Ler o nome completo do browser
<html> <head> <title>Exemplo</title> </head> <script type="text/javascript"> alert(navigator.userAgent) </script> <body> </body> </html>
Ler o nome da plataforma que est a ser usada

<html> <head> <title>Exemplo</title> </head> <script type="text/javascript"> alert(navigator.platform) </script> <body> </body> </html>
Saber se este browser suporta Java
145

<html> <head> <title>Exemplo</title> </head> <body> <script type="text/javascript"> if(navigator.javaEnabled()==true) document.write("O seu browser suporta java") else document.write("O seu browser no suporta java") </script> </body> </html>
8. O objeto screen
Alguns browsers definem propriedades para este objeto que no so suportadas pelos outros. No entanto isso no coloca qualquer problema porque as propriedades que so comuns a todos os browsers so suficientes para satisfazer as necessidades. Propriedades do objeto screen Propriedade width height availWidth Descrio L o valor da largura total da tela (em pixels) L o valor da altura total da tela (em pixels) Valor da largura mxima de tela disponvel para apresentar a pgina. Este valor igual largura total menos a largura ocupada pelos elementos permanentes ou semipermanentes que o sistema operacional coloca na tela (como o caso da barra de tarefas do Windows). Valor da altura mxima de tela disponvel para apresentar a pgina. Este valor igual altura total menos a altura ocupada pelos elementos permanentes ou semipermanentes que o sistema operacional coloca na tela (como o caso da barra de tarefas do Windows). L o nmero de bits correspondente paleta de cores que est sendo usada para ver a pgina
availHeight
colorDepth
Exemplos de Aplicao
Ler o tamanho da tela em que est sendo mostrada a pgina
<html> <head>
146

<title></title> </head> <body> <script type="text/javascript"> s="Largura da tela: "+screen.width+" pixels<br>" s+="Altura da tela: "+screen.height+" pixels" document.write(s) </script> </body> </html>
Ler as propriedades da janela e da tela usada para ver a pgina

<html> <head> <title></title> </head> <body> <script type="text/javascript"> s="rea total da tela: "+screen.width+" x "+screen.height s+="<br>" s+="rea disponvel para as janelas: "+screen.availWidth+" x "+screen.availHeight s+="<br>" s+="Resoluo de cor: "+screen.colorDepth + " bits" document.write(s) </script> </body> </html>
9. O objeto location
O objeto location faz parte do objeto window, sendo obtido como uma propriedade deste, na forma window.location. Este objeto contm o URL completo da pgina que est carregada numa determinada janela. Se escrevermos apenas location, omitindo o objeto window, obteremos o objeto correspondente pgina que estamos usando. Se especificarmos um objeto window ento iremos obter o objeto location correspondente pgina que est na janela que indicamos.
147

Todas as propriedades deste objeto possuem valores formados por texto. Propriedades do objeto location Propriedade hash host Descrio A propriedade hash composta pela parte do endereo da pgina (URL) que comea pelo smbolo #. Esta propriedade contm apenas a parte inicial do endereo. composta pelo protocolo, pelo nome do servidor e eventualmente pelo nmero da porta usada para comunicar com o servidor. Esta propriedade contm apenas o nome do servidor Contm o endereo completo da pgina. Podemos dar como valor o endereo de uma nova pgina para que ela seja carregada em substituio da atual. As restantes propriedades so extradas do valor desta propriedade. A poro do URL que vem a seguir ao valor da propriedade host. Esta propriedade contm o local em que a pgina se encontra dentro do servidor a que pertence. Nmero da porta usada para comunicar com o servidor Parte inicial do URL (normalmente http://) Parte do URL que comea com o smbolo ? (ponto de interrogao) e termina no fim do URL ou logo que seja encontrado o smbolo # (se ele estiver presente)
hostname href
pathname
port protocol search
Mtodos do objeto location Mtodo reload() replace() Descrio Refresca a pgina fazendo um novo pedido de envio ao servidor Substitui a pgina atual por uma outra sem adicionar o endereo da pgina atual histria da navegao
Exemplos de Aplicao
Propriedades do objeto location para a pgina que executa o exerccio
<html> <head> <title>Exemplo</title> </head> <body> <script type="text/javascript"> var s="<b>host</b> "+location.host+"<br>" s+="<b>hostname</b> "+location.hostname+"<br>" s+="<b>href</b> "+location.href+"<br>" s+="<b>hash</b> "+location.hash+"<br>" s+="<b>pathname</b> "+location.pathname+"<br>" s+="<b>protocol</b> "+location.protocol+"<br>" s+="<b>search</b> "+location.search+"<br>" s+="<b>port</b> "+location.port document.write(s) </script> </body> </html>
148

Navegar para outra pgina

<html> <head> <title>Exemplo</title> <script type="text/javascript"> function novaPagina() { location.href="pagina.html" return false } </script> </head> <body> <form action="javascript:;" style="text-align:center"> <script type="text/javascript"> document.write("<p>Nesta sesso j visitou <b>"+history.length+" pginas.</b></p>") </script> Clique no boto para trocar esta pgina por outra:<br><br> <input type="button" onclick="novaPagina()" value="Trocar pgina"><br><br> A nova pgina dever indicar que j visitou <script type="text/javascript"> document.write(history.length+1) </script> pginas. </form> </script> </body> </html>
149

10. O objeto history

Este objeto contm uma lista com os endereos de todas as pginas visitadas numa determinada janela do browser e mtodos que nos permitem avanar e recuar para as pginas que se encontram nessa lista. Este objeto um subobjeto de window. Propriedades do objeto history Propriedade length Mtodos do objeto history Mtodo back() forward() go() Descrio Carregar a pgina que est na lista antes da atual Carregar a pgina que sucede a atual na lista Saltar para qualquer pgina da lista. Por exemplo: history.go(-1) volta para a pgina anterior, history.go(-3) salta trs pginas para trs, history.go(1) salta para a pgina seguinte e history.go(2) salta duas pginas para a frente. Descrio Nmero de pginas visitadas por uma janela do browser
150

PARTE IV: Controle dos Elementos HTML

11. Objetos que representam elementos do HTML
O objeto document sem dvida o objeto mais rico e mais importante para o HTML Dinmico. A forma mais comum para manipular os seus elementos baseia-se nos estilos CSS e nos mtodos genricos do DOM. Alm destas formas genricas de manipulao do documento, foram acrescentadas ao DOM algumas extenses HTML que nos oferecem funcionalidades acrescidas para controlar objetos que so especiais. Destes objetos h 16 que so mais importantes para o DHTML. Para estes objetos foram criadas propriedades e mtodos especficos que so muito teis para manipular o contedo de uma pgina da Web.
11.1 Objeto anchor

Este objeto representa de forma completa os elementos criados com a etiqueta <a> do HTML. A coleo anchors, pertencente ao objeto document, contm uma lista com todos os objetos deste tipo que esto na pgina. Propriedades do objeto anchor Propriedade accessKey charset coords href hreflang name rel rev shape tabIndex target type Descrio Define uma tecla para acessar rapidamente um elemento <a> L ou define o conjunto de caracteres usado na pgina a que a ligao conduz L ou define as coordenadas de um elemento <a> L ou define o endereo (URL) da pgina a que a ligao conduz L ou define o cdigo de lngua usado na pgina a que a ligao conduz L ou define o nome da ncora L ou define a relao existente entre o documento atual e a pgina para a qual aponta a ligao L ou define a relao existente entre a pgina para a qual aponta a ligao e o documento atual L ou define a forma geomtrica da rea afetada pela ncora L ou define o ndice (nmero de ordem) do elemento que corresponde a este objeto no acesso atravs da tecla tab L ou define o nome da janela na qual se deve abrir a ligao L ou define os tipos de contedos existentes na pgina (ou outro recurso da Web) a que a ligao conduz
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <a> em acordo com a linguagem HTML. Mtodos do objeto anchor Mtodo Descrio 151

blur() focus()
Faz o elemento perder o foco Faz o elemento ganhar o foco
Exemplos de Aplicao
Modificar o valor do atributo href de uma ligao de hipertexto
<html> <head> <script type="text/javascript"> function myHref() { document.getElementById("myAnchor").href="http://www.google.com.br" } </script> <title></title> </head> <body> <p> Passe com o mouse sobre a ligao e veja qual o endereo para onde ela aponta. A seguir clique no boto "Alterar URL" e veja que a ligao passou a apontar para outro endereo. </p> <a id="myAnchor" href="http://www.w3.org" target="_blank">Uma Ligao</a> <form> <input onclick="myHref()" type="button" value="Alterar URL"> </form> </body> </html>
Dar e retirar o foco

<html> <head> <script type="text/javascript"> function makeFocus() { document.getElementById("myAnchor").focus() } function makeBlur() { document.getElementById("myAnchor").blur() } </script> <title></title> </head> <body> <a id="myAnchor" href="http://www.w3.org" target="_blank">Uma Ligao</a> <form> <input onclick="makeFocus()" type="button" value="Dar o Foco">
152

<input onclick="makeBlur()" type="button" value="Retirar o Foco"> </form> </body> </html>
11.2 Objeto applet

Este objeto representa de forma completa os elementos criados com a etiqueta <applet> do HTML. A coleo applets, pertencente ao objeto document, contm uma lista com todos os objetos deste tipo que esto na pgina. Propriedades Propriedade align Descrio Esta propriedade corresponde ao atributo align do elemento <applet> do HTML e funciona do mesmo modo que o atributo align do elemento <img>. Ela alinha o objeto (tanto na vertical como na horizontal) relativamente ao texto que o rodeia. L ou fornece o texto alternativo a apresentar pelo browser em vez do elemento caso no consiga apresentar o seu contedo. Nome do arquivo que contm o cdigo que o applet (miniaplicao) deve executar. Podemos fornecer os nomes de vrios arquivos separando-os com vrgulas. Nome da classe Java na qual o applet deve iniciar a execuo do cdigo. Corresponde ao atributo codebase do elemento <applet> do HTML. L ou redefine a altura do elemento Nome da miniaplicao (applet). Corresponde ao atributo name. Nome do arquivo que contm uma verso serializada da miniaplicao (applet) Largura ocupada pelo applet
alt archive code codeBase height name object width
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <applet> em acordo com a linguagem HTML.
11.3 Objeto embed

Este objeto representa de forma completa os elementos criados com a etiqueta <embed> do HTML. A coleo embeds, pertencente ao objeto document, contm uma lista com todos os objetos deste tipo que esto na pgina.
153

Propriedades importantes Propriedade accessKey align Descrio Tecla que permite acessar rapidamente o elemento representado por este objeto Esta propriedade corresponde ao atributo align do elemento <embed> do HTML e funciona do mesmo modo que o atributo align do elemento <img>. Ela alinha o objeto (tanto na vertical como na horizontal) relativamente ao texto que o rodeia. L ou define o nome da classe do objeto que embutido na pgina atravs do elemento <embed> Altura do objeto L ou define o endereo (URL) de onde provm o objeto Largura do objeto
className height src width
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <embed> em acordo com a linguagem HTML. Mtodos importantes Mtodo blur() click() focus() scrollIntoView() Descrio Retira o foco ao objeto Desencadeia o mesmo comportamento que seria iniciado se fosse feito um clique sobre o objeto D o foco ao objeto, e caso ele seja sensvel ao evento onfocus inicia a reao correspondente Faz deslocar a pgina dentro da janela do browser (scroll) para um ponto em que o objeto fique visvel na tela
11.4 Objeto frame

Num documento HTML com molduras este objeto representa de forma completa os elementos criados com a etiqueta <frame> do HTML Frameset. A coleo frames, pertencente ao objeto window contm uma lista com todos os objetos deste tipo que esto na pgina. Propriedades Propriedade frameBorder longDesc marginHeight marginWidth name noResize scrolling src Descrio Corresponde ao atributo frameborder do elemento <frame> Corresponde ao atributo longdesc Corresponde ao atributo marginheight Corresponde ao atributo marginwidth Corresponde ao atributo name Corresponde ao atributo noresize. Pode ter os valores true (a moldura no pode ser redimensionada) ou false (a moldura pode ser redimensionada.) Indica se a pgina que est na moldura deve ou no apresentar barras de deslocamento (scroll) Corresponde ao atributo src
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <frame> em acordo com a linguagem HTML.
154

11.5 Objeto frameset

Este objeto representa de forma completa os elementos criados com a etiqueta <frameset> de um documento escrito em HTML Frameset. Propriedades Propriedade cols rows Descrio Corresponde ao atributo cols (colunas) do elemento <frameset> Corresponde ao atributo rows (linhas) do elemento <frameset>
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <frameset> em acordo com a linguagem HTML.
11.6 Objeto form

Este objeto representa de forma completa os elementos criados com a etiqueta <form> do HTML. A coleo forms, pertencente ao objeto document, contm uma lista com todos os objetos deste tipo que esto na pgina. Propriedades Propriedade acceptCharset action elements enctype length method name target Descrio Contm uma lista com os conjuntos de caracteres que o servidor pode aceitar L ou define o valor do atributo action do formulrio Contm uma lista com todos os campos (elementos) existentes no formulrio L o tipo de codificao usada para enviar os dados do formulrio Fornece a quantidade de elementos (campos) que compem o formulrio L ou define o mtodo HTTP usado para submeter os dados do formulrio L ou define o nome do formulrio Indica o nome da moldura ("frame") onde deve ser apresentada a resposta do servidor
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <form> em acordo com a linguagem HTML. Mtodos Mtodo reset() submit() Descrio Repe os valores de todos os campos do formulrio nos seus valores iniciais Submete os dados do formulrio para processamento
Exemplos de Aplicao
Alterar o valor do atributo action (URL do recurso que processar o formulrio)
155

<html> <head> <script type="text/javascript"> function formAction() { var f=document.getElementById("myForm") alert(f.action) } function novaAction() { var f=document.getElementById("myForm") f.action=document.getElementById("newAction").value } </script> <title></title> </head> <body> <form id="myForm" method="post" action="processar.html"> Escreva o novo valor para o atributo action:<br> <input type="text" id="newAction" value="action" size="28"><br> <input onclick="novaAction()" type="button" value="Dar um novo valor ao atributo action"> <input onclick="formAction()" type="button" value="Mostrar valor do atributo action"><br> </form> </body> </html>
Mostrar o nome do mtodo que ser usado para enviar os dados do formulrio
<html> <head> <script type="text/javascript"> function formMethod() { var f=document.getElementById("myForm") alert("O mtodo : "+f.method) } </script> <title></title> </head> <body> <form id="myForm" method="post"> Nome: <input type="text"><br><br> <input onclick="formMethod()" type="button" value="Mostrar o Mtodo de Envio"> </form> </body> </html>
156

Enviar os dados do formulrio para serem processados

<html> <head> <script type="text/javascript"> function submeter() { document.getElementById("myForm").submit() } </script> <title></title> </head> <body> <form id="myForm" action="processar.html" method="get"> Altura:<input name="altura"><br> Peso:<input name="peso"><br><br> <input onclick="submeter()" type="button" value="Submeter Formulrio"> </form> </body> </html>
11.7 Objeto iframe

Este objeto representa de forma completa os elementos criados com a etiqueta <iframe> do HTML. A coleo frames, pertencente ao objeto window, contm uma lista com todos os objetos deste tipo que esto na pgina. Propriedades Propriedade align Descrio Esta propriedade corresponde ao atributo align do elemento <iframe> do HTML e funciona do mesmo modo que o atributo 157

frameBorder height longDesc marginHeight marginWidth name scrolling src width
align do elemento <img>. Ela alinha o objeto (tanto na vertical como na horizontal) relativamente ao texto que o rodeia. Devolve o valor do contorno (border) do objeto iframe L ou define o valor da altura do iframe L ou define o endereo da pgina que contm uma descrio extensa do contedo do iframe L ou define a altura das margens do iframe L ou define a largura das margens do iframe L o valor do atributo name do iframe L ou define o valor do atributo scrolling, o qual controla o aparecimento ou a ocultao das barras de deslocamento do documento (scrollbars) L ou define o endereo do documento que mostrado dentro do iframe L ou define o valor da largura do iframe
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <iframe> em acordo com a linguagem HTML.
Exemplos de Aplicao
Alterar a altura do iframe
<html> <head> <script type="text/javascript"> function changeHeight() { var frame=document.getElementById("myIframe") if(frame.height==70) frame.height=140 else frame.height=70 } </script> <title></title> </head> <body> <iframe id="myIframe" height="100" width="400" src="pagina.htm"></iframe> <form> <input onclick="changeHeight()" type="button" value="Alterar a altura da moldura"> </form> </body> </html>
Scrollbars 158

<html> <head> <title></title> <script type="text/javascript"> function retirarScrollbars() { // Agora eliminamos as scrollbars da primeira moldura. document.getElementById("myIframe1").scrolling="no" } </script> </head> <body onload="retirarScrollbars()"> <table width="620"> <tr> <td> Uma moldura que vai ficar sem scrollbars <iframe id="myIframe1" height="100" width="310" scrolling="yes" src="pagina.html"></iframe> </td> <td> Uma moldura com scrollbars <iframe id="myIframe2" height="100" width="310" scrolling="yes" src="pagina2.html"></iframe> </td> </tr> </table> Tente ler a parte final do texto em cada uma das molduras.<br><br> <b>Nota:</b> Algumas verses antigas do Mozilla no executam este exerccio corretamente. </body> </html>
Escolher outro documento para ser mostrado

<html> <head> <script type="text/javascript"> function load() { var frame=document.getElementById("myIframe") frame.src="pagina2.html" } </script> <title></title> </head> <body> <iframe id="myIframe" height="100" width="400" src="pagina.html"></iframe> <form>
159

<input onclick="load()" type="button" value="Carregar outro documento na moldura"> </form> </body> </html>
11.8 Objeto Image

Este objeto representa de forma completa os elementos criados com a etiqueta <img> do HTML. A coleo images, pertencente ao objeto document, contm uma lista com todos os objetos deste tipo que esto na pgina. Propriedades Propriedade align alt border height longDesc lowSrc name src useMap Descrio Esta propriedade corresponde ao atributo align do elemento <img> do HTML. Ela alinha o objeto (tanto na vertical como na horizontal) relativamente ao texto que o rodeia. L ou define o valor do texto alternativo que ser mostrado quando a imagem no puder ser carregada. Atributo border. Espessura da linha de contorno que desenhada ao redor da imagem. L ou define a altura da imagem. L ou define o endereo de uma pgina que contm uma descrio extensa do contedo da imagem L ou define o endereo de uma verso da imagem em baixa resoluo L ou define o o valor do atributo name. L ou define o endereo (URL) de onde provm a imagem. Se o elemento que corresponde a este objeto tiver sido dividido em partes usando o elemento <map>, ento esta propriedade contm o valor true, no caso contrrio contm false. Veja o atributo usemap do elemento que no HTML corresponde a este objeto. L ou define a largura da imagem.
width
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <img> em acordo com a linguagem HTML.
Exemplos de Aplicao
Alterar as dimenses de uma imagem
160

<html> <head> <script type="text/javascript"> function setHeight() { var x=document.images x[0].height=64 x[0].width=64 } </script> <title></title> </head> <body> <img height="32" src="5103.gif" width="32"> <form> <input onclick="setHeight()" type="button" value="Ampliar a imagem"> </form> </body> </html>
Trocar uma imagem por outra

<html> <head> <script type="text/javascript"> function setSrc() { var x=document.images x[0].src="fechada.jpg" } </script> <title></title> </head> <body> <img src="aberta.jpg"> <form> <input onclick="setSrc()" type="button" value="Fechar a boca"> </form> </body> </html>
161

Pr-carregamento de imagens em JavaScript Uma das aplicaes mais antigas e mais populares do objeto Image consiste em us-lo para carregar na memria do computador uma imagem que s mais tarde ser visualizada. Isto til em efeitos de roll-over, em que uma imagem trocada por outra instantneamente quando o ponteiro do mouse passa por cima de um elemento. Para produzirmos esse efeito criamos um novo objeto Image e nele carregamos a imagem que queremos fazer aparecer instantneamente, assim:
var img = new Image() img.src="fechada.jpg"
Quando executar este cdigo o browser carrega a imagem "fechada.jpg" em memria, que passa a estar pronta para ser mostrada rapidamente quando for necessrio. O exemplo seguinte mostra como isto funciona:
<html> <body> <script type="text/javascript"> var img = new Image() img.src="fechada.jpg" function fechar(o) { o.src=img.src } </script> <img src="aberta.jpg" onmouseover="fechar(this)"> Passe com o ponteiro do mouse sobre esta imagem </body> </html>
162

11.9 Objeto input

Este objeto representa de forma completa os elementos criados com a etiqueta <input> do HTML e pode assumir os seguintes tipos: button, checkbox, file, hidden, image, password, radio, reset, submit, ou text. Propriedades Propriedade accessKey accept align alt checked defaultValue defaultChecked disabled form name maxLength readOnly size src tabIndex type value Descrio Define uma tecla para acessar rapidamente um elemento input Fornece uma lista com os tipos de contedo que o servidor encarregado de tratar o formulrio consegue processar corretamente Define o alinhamento do elemento. L ou define o valor do texto alternativo que ser mostrado no caso de o browser no conseguir mostrar o elemento. L ou define um valor lgico (true ou false) que indica se a checkbox ou o radiobutton devem ficar no estado checked (validado) ou unchecked (no validado) L ou define os dados iniciais (valor por omisso) contidos no elemento input D o valor true propriedade checked (funciona com radiobuttons e checkboxes) L ou define um valor lgico (true ou false) que indica se o elemento deve ser desativado ou se deve permanecer ativo Devolve o objeto form em que este est contido L ou define o nome do elemento L ou define o nmero mximo de caracteres que podem ser escritos no elemento L ou define um valor lgico (true ou false) que indica se o elemento pode ser apenas lido ou se tambm pode escrever-se o seu valor (funciona com type="text" e type="password") L ou define o nmero de caracteres que podem ser vistos ao mesmo tempo Quando se tem type="image" l ou define o endereo (URL) da imagem L ou define o ndice (nmero de ordem) do elemento que corresponde a este objeto no acesso atravs da tecla tab L o tipo (valor do atributo type) do elemento L ou define o valor de um checkbox ou de um radiobutton
163

Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <input> em acordo com a linguagem HTML.
Exemplos de Aplicao
Controlar o estado de um checkbox (caixa de validao)
<html> <head> <script type="text/javascript"> function check() { var x=document.getElementById("myInput") x.checked=true } function uncheck() { var x=document.getElementById("myInput") x.checked=false } </script> <title></title> </head> <body> <form> <input type="checkbox" value="on" id="myInput"> <input onclick="check()" type="button" value="Marcar Checkbox"> <input onclick="uncheck()" type="button" value="Desmarcar Checkbox"> </form> </body> </html>
Desativar ou ativar um campo do formulrio

<html> <head> <script type="text/javascript"> function makeDisable() { var x=document.getElementById("myInput") x.disabled=true } function makeEnable() { var x=document.getElementById("myInput") x.disabled=false } </script> <title></title> </head>
164

<body> <form> <input value="Ol Pessoal!" id="myInput"><br> <input onclick="makeDisable()" type="button" value="Desativar Caixa de Texto"> <input onclick="makeEnable()" type="button" value="Ativar Caixa de Texto"> </form> </body> </html>
Definir o nmero mximo de caracteres que podem ser escritos num campo de texto
<html> <head> <script type="text/javascript"> function maximum() { var x=document.getElementById("myInput") x.maxLength="5" } </script> <title></title> </head> <body> <p> Antes de clicar no boto "Definir Tamanho Mximo" conseguimos escrever na caixa de texto tantos caracteres quantos quisermos (experimente!) </p> <p> Depois de clicar no boto "Definir Tamanho Mximo" no lhe ser permitido escrever mais de 5 caracteres na caixa de texto. </p> <form> Escreva algum texto: <input id="myInput"> <input onclick="maximum()" type="button" value="Definir Tamanho Mximo"> </form> </body> </html>
165

Fazer com que um campo possa apenas ser lido

<html> <head> <script type="text/javascript"> function makeReadOnly() { var x=document.getElementById("myInput") x.readOnly=true } function delReadOnly() { var x=document.getElementById("myInput") x.readOnly=false } </script> <title></title> </head> <body> <form> <p> Tente escrever na caixa depois de clicar no boto "Permitir apenas a leitura" </p> <input value="Ol Pessoal!" id="myInput"> <input onclick="makeReadOnly()" type="button" value="Permitir apenas a leitura"> <input onclick="delReadOnly()" type="button" value="Permitir a escrita"> </form> </body> </html>
166

Alterar o tamanho de um campo

<html> <head> <script type="text/javascript"> function sizeCinco() { var x=document.getElementById("myInput") x.size=5 } function sizeVinte() { var x=document.getElementById("myInput") x.size=20 } </script> <title></title> </head> <body> <p> Clique em cada um dos botes para alterar o tamanho da caixa de texto. </p> <form> <input id="myInput" type="text"><br><br> <input onclick="sizeCinco()" type="button" value="size=5"> <input onclick="sizeVinte()" type="button" value="size=20"> </form> </body> </html>
Ler e manipular o estado de um radiobutton

<html> <head> <script type="text/javascript"> function fruit(index) { var x=document.getElementById("myForm") alert(x[index].value) } </script> <title></title> </head> <body> <form id="myForm"> Banana: <input onclick="fruit(0)" type="radio" value="Banana" name="fruta"><br> Mamo: <input onclick="fruit(1)" type="radio" value="Mamo" name="fruta"><br> Laranja:
167

<input onclick="fruit(2)" type="radio" value="Laranja" name="fruta"> </form> </body> </html>
Selecionar o texto de um campo do formulrio

<html> <head> <script type="text/javascript"> function makeSelect() { var x=document.getElementById("myInput") x.select() x.focus() } </script> <title></title> </head> <body> <form> <input value="Ol Pessoal!" id="myInput"> <input onclick="makeSelect()" type="button" value="Selecionar o Texto da Caixa"> </form> </body> </html>
11.10 Objeto object

Este objeto representa de forma completa os elementos criados com a etiqueta <object> do HTML. Propriedades Propriedade form Descrio Se o objeto estiver contido num elemento <form> devolve o
168

code
align archive border codeBase codeType data declare height name standby tabIndex type useMap
width
objeto que corresponde a esse elemento <form>, caso contrrio devolve null Se o elemento <object> estiver sendo usado para inserir uma miniaplicao Java (em vez do elemento <applet>, que foi rejeitado nas verses modernas do HTML) este atributo contm o nome da classe Java na qual se deve iniciar a execuo do cdigo. Nos outros casos contm null. Corresponde ao atributo align Corresponde ao atributo archive. Contm os nomes de um ou mais arquivos (separados por vrgulas) que guardam cdigo a executar pelo objeto. Corresponde ao atributo border Corresponde ao atributo codebase Corresponde ao atributo codetype Corresponde ao atributo data, que fornece o endereo de um recurso contendo dados que o objeto consome Propriedade ainda no utilizada mas que est reservada para uso no futuro Corresponde ao atributo height Corresponde ao atributo name Corresponde ao atributo standby L ou define o ndice (nmero de ordem) do elemento que corresponde a este objeto no acesso atravs da tecla tab Corresponde ao atributo type Se o elemento que corresponde a este objeto tiver sido dividido em partes usando o elemento <map> ento esta propriedade contm o valor true, no caso contrrio contm false. Veja o atributo usemap do elemento que no HTML corresponde a este objeto. Corresponde ao atributo width
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <object> em acordo com a linguagem HTML.
11.11 Objeto option

Este objeto representa de forma completa os elementos criados com a etiqueta <option> do HTML. Propriedades Propriedade defaultSelected disabled form index label selected text value Descrio Indica que esta a opo selecionada na partida L ou define um valor lgico (true ou false) que indica se a opo deve ser desativada ou se deve permanecer ativa Devolve o objeto form em que este est contido Devolve o ndice da opo relativamente ao elemento que a contm L ou define o nome dado opo Faz com que a opo passe ou no (valores true ou false) a ser a que est selecionada L o texto correspondente opo L ou define o valor da opo (atributo value)
169

Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <option> em acordo com a linguagem HTML.
Exemplos de Aplicao
Mostrar o texto correspondente opo selecionada
<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect alert(x.options[x.selectedIndex].text) } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Papagaio</option> <option>Arara</option> <option>Ave do Paraso</option> </select> <input onclick="formAction()" type="button" value="Mostrar o Texto da Opo Escolhida"> </form> </body> </html>
Modificar o texto da opo

<html> <head> <script type="text/javascript"> function optionText() { var x=document.forms.myForm.mySelect x.options[x.selectedIndex].text="Vodka" } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">gua</option> <option>Refrigerante</option> <option>Leite</option> </select> <input onclick="optionText()"
170

type="button" value="Alterar o Texto Selecionado"> </form> </body> </html>
Mostrar o nmero correspondente opo selecionada

<html> <head> <script type="text/javascript"> function optionIndex() { var x=document.forms.myForm.mySelect alert(x.options[x.selectedIndex].index) } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Canrio</option> <option>Periquito</option> <option>Araro</option> </select> <input onclick="optionIndex()" type="button" value="Mostrar o ndice"> </form> </body> </html>
11.12 Objeto select

Este objeto representa de forma completa os elementos criados com a etiqueta <select> do HTML. Propriedades Propriedade Descrio
171

disabled form length multiple name selectedIndex size tabIndex type
L ou define o valor da propriedade disabled, que determina se a opo deve ser desativada ou se deve permanecer ativa Devolve o elemento form que contm o elemento Devolve o nmero de opes contidas dentro do elemento Define e permite saber se possvel selecionar vrias opes em simultneo L ou define o nome do elemento L o nmero correspondente opo selecionada L ou define o nmero de opes que podem ser vistas ao mesmo tempo L ou define o ndice (nmero de ordem) do elemento que corresponde a este objeto no acesso atravs da tecla tab L o tipo (valor do atributo type) do elemento
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <select> em acordo com a linguagem HTML. Colees Coleo options Mtodos Mtodo add() remove() blur() focus() Descrio Acrescenta uma nova opo coleo de opes Remove uma opo da coleo de opes O elemento perde o foco O elemento ganha o foco Descrio Contm uma lista com todas as opes contidas dentro do elemento (elementos <option>)
Exemplos de Aplicao
Desativar e ativar um elemento select
<html> <head> <script type="text/javascript"> function makeDisable() { var x=document.forms.myForm.mySelect x.disabled=true } function makeEnable() { var x=document.forms.myForm.mySelect x.disabled=false } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Canrio</option> <option>Periquito</option> <option>Arara</option> </select>
172

<input onclick="makeDisable()" type="button" value="Desativar a Lista"> <input onclick="makeEnable()" type="button" value="Ativar a Lista"> </form> </body> </html>
Ler o nome do formulrio que contm o elemento select

<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect alert(x.form.name) } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Papagaio</option> <option>Arara</option> <option>Ave do Paraso</option> </select> <input onclick="formAction()" type="button" value="Mostrar o Nome do Formulrio"> </form> </body> </html>
Mostrar o nmero de opes que esto no elemento select

<html> <head> <script type="text/javascript"> function formAction()
173

{ var x=document.forms.myForm.mySelect alert(x.length) } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Batata</option> <option>Feijo</option> <option>Mandioca</option> </select> <input onclick="formAction()" type="button" value="Qual o Nmero de Opes?"> </form> </body> </html>
Especificar o nmero de opes que podem ser vistas ao mesmo tempo

<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect x.size="2" } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Cavalo</option> <option>Vaca</option> <option>Galo</option> </select> <input onclick="formAction()" type="button" value="Alterar Tamanho"> (Pode no funcionar no Opera) </form> </body> </html>
174

Selecionar vrias opes ao mesmo tempo

<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect x.multiple=true } </script> <title></title> </head> <body> <p> Antes de clicar no boto que tem escrito "Permitir Escolhas Mltiplas" tente selecionar mais do que uma opo (para isso mantenha a tecla Ctrl ou Shift pressionada enquanto seleciona uma opo com o mouse.) </p> <p> Depois clique no boto "Permitir Escolhas Mltiplas" e tente novamente. </p> <form name="myForm"> <select size="3" name="mySelect"> <option>Canrio</option> <option>Periquito</option> <option>Arara</option> </select> <input onclick="formAction()" type="button" value="Permitir Escolhas Mltiplas"> (Pode no funcionar no Opera) </form> </body> </html>
175

Mostrar o nmero correspondente opo selecionada

<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect alert(x.selectedIndex) } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Arara</option> <option>Papagaio</option> <option>Canrio</option> </select> <input onclick="formAction()" type="button" value="Mostrar o ndice"> </form> </body> </html>
Mostrar o texto correspondente opo selecionada

<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect alert(x.options[x.selectedIndex].text) }
176

</script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Papagaio</option> <option>Arara</option> <option>Ave do Paraso</option> </select> <input onclick="formAction()" type="button" value="Mostrar o Texto da Opo Escolhida"> </form> </body> </html>
Remover uma opo

<html> <head> <script type="text/javascript"> function formAction() { var x=document.forms.myForm.mySelect x.remove(x.selectedIndex) } </script> <title></title> </head> <body> <form name="myForm"> <select name="mySelect"> <option selected="selected">Dvidas</option> <option>Despesas</option> <option>Impostos</option> </select> <input onclick="formAction()" type="button" value="Remover opo"> </form> </body> </html>
177

11.13 Objeto table

Este objeto representa de forma completa os elementos criados com a etiqueta <table> do HTML. Propriedades Propriedade border caption cellPadding cellSpacing frame rules summary tFoot tHead width Descrio L ou define a espessura da linha de contorno da tabela L a legenda de uma tabela L ou define a quantidade de espao em branco que separa a fronteira da clula do seu contedo L ou define a quantidade de espao em branco que separa as clulas umas das outras Indica quais as linhas de contorno que devem ser desenhadas (por cima, por baixo, ...) Especifica quais as linhas de contorno que devem ser desenhadas (nas linhas, nas colunas, ...) L ou define uma descrio sumria da tabela Devolve o elemento tfoot (rodap) da tabela Devolve o elemento thead (cabealho) da tabela L ou define a largura da tabela
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <table> ou est intimamente relacionada com elementos que s podem existir como parte de uma tabela. Colees Coleo rows tBodies Mtodos Mtodo createCaption() createTFoot() createTHead() deleteCaption() deleteTFoot() deleteTHead() deleteRow() insertRow() Descrio Cria uma legenda para a tabela ou l a legenda que est definida Cria um rodap para a tabela ou l o rodap que est definido Cria um cabealho para a tabela ou l o cabealho que est definido Apaga a legenda da tabela Apaga o rodap da tabela Apaga o cabealho da tabela Apaga a linha especificada da tabela Insere uma nova linha na tabela na posio especificada Descrio Contm uma lista com todas as linhas de uma tabela Contm uma lista com todos os elementos tbody da tabela
Exemplos de Aplicao
Alterar o contorno da tabela
<html> <head> <script type="text/javascript"> function setBorder() { document.getElementById("myTable").border="10" }
178

</script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> </tbody> </table> <form> <input onclick="setBorder()" type="button" value="Alterar a Linha de Fronteira"> </form> </body> </html>
Alterar os valores de cellPadding e cellSpacing

<html> <head> <script type="text/javascript"> function padding() { document.getElementById("myTable").cellPadding="15" } function spacing() { document.getElementById("myTable").cellSpacing="15" } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> </tbody>
179

</table> <form> <input onclick="padding()" type="button" value="Alterar o atributo cellpadding"> <input onclick="spacing()" type="button" value="Alterar o atributo cellspacing"> </form> </body> </html>
Especificar o contorno a aplicar

<html> <head> <script type="text/javascript"> function setFrame() { document.getElementById("myTable").frame="above" } </script> <title></title> </head> <body> <table id="myTable"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> </tbody> </table> <form> <input onclick="setFrame()" type="button" value="Colocar Linha Sobre a Tabela"> </form> </body> </html>
180

Alterar a altura da linha

<html> <head> <script type="text/javascript"> function specifyRow() { var linhas=document.getElementById("myTable").rows linhas[1].style.height="100px" } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr> <td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> </tbody> </table> <form> <input onclick="specifyRow()" type="button" value="Modificar a altura da segunda linha"> </form> </body> </html>
181

Especificar as linhas de contorno a desenhar

<html> <head> <script type="text/javascript"> function setRules() { document.getElementById("myTable").rules="rows" } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr> <td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> <tr> <td>Linha4 clula1</td> <td>Linha4 clula</td> </tr> </tbody> </table> <form> <input onclick="setRules()" type="button" value="Mostrar Contornos de Fronteira s nas Linhas"> </form> </body> </html>
182

Criar uma legenda para a tabela

<html> <head> <script type="text/javascript"> function caption() { var o=document.getElementById("myTable") var x=o.createCaption() x.innerText="A Minha Belssima Tabela" } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr> <td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> </tbody> </table> <form> <input onclick="caption()" type="button" value="Criar uma Legenda para a Tabela"> </form> <p>O Mozilla no consegue realizar este exerccio corretamente.</p> </body> </html>
183

Apagar (remover) uma linha

<html> <head> <script type="text/javascript"> function deleteMe(rowIndex) { document.getElementById("myTable").deleteRow(rowIndex) } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha 1</td> <td> <input onclick="deleteMe(this.parentNode.parentNode.rowIndex)" type="button" value="Apague-me"> </td> </tr> <tr> <td>Linha 2</td> <td> <input onclick="deleteMe(this.parentNode.parentNode.rowIndex)" type="button" value="Apague-me"> </td> </tr> <tr> <td>Linha 3</td> <td> <input onclick="deleteMe(this.parentNode.parentNode.rowIndex)" type="button" value="Apague-me"> </td> </tr> <tr> <td>Linha 4</td> <td> <input onclick="deleteMe(this.parentNode.parentNode.rowIndex)" type="button" value="Apague-me"> </td> </tr> <tr> <td>Linha 5</td> <td> <input onclick="deleteMe(this.parentNode.parentNode.rowIndex)" type="button" value="Apague-me">
184

</td> </tr> </tbody> </table> </body> </html>
Inserir uma linha

<html> <head> <script type="text/javascript"> function insRow() { var o=document.getElementById("myTable") var x=o.insertRow(2) var y=x.insertCell(0) var z=x.insertCell(1) y.innerHTML="Nova Clula1" z.innerHTML="Nova Clula2" } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> </tbody> </table> <form> <input onclick="insRow()" type="button" value="Inserir Linha"> </form> </body> </html>
185

11.14 Objeto tablecell

Este objeto representa elementos criados com as etiqueta <td> ou <th> do HTML. A coleo cells, pertencente ao objeto tablerow, contm uma lista com todos os objetos deste tipo existentes na linha de tabela que representada pelo objeto tablerow. Propriedades Propriedade abbr align axis cellIndex colSpan rowSpan vAlign Descrio L ou define uma abreviao para os cabealhos das clulas Define o alinhamento horizontal dos contedos das clulas L ou define o nome de um grupo de cabealhos L o nmero de ordem (ndice) de uma clula na linha a que pertence L ou define o valor do colspan aplicado a uma clula L ou define o valor do rowspan aplicado a uma clula Define o alinhamento vertical dos contedos das clulas
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <td> em acordo com a linguagem HTML. Colees Coleo headers Descrio Contm uma lista com os atributos id das clulas que tm cabealhos
Exemplos de Aplicao
Alterar o valor do atributo colspan
<html> <head> <script type="text/javascript"> function setColSpan() { var x=document.getElementById("myTable").rows[0].cells x[0].colSpan="2" x[1].colSpan="6" } </script> <title></title> </head>
186

<body> <table id="myTable" border="1"> <tbody> <tr> <td colspan="4">A cell</td> <td colspan="4">A cell</td> </tr> <tr> <td>clula</td> <td>clula</td> <td>clula</td> <td>clula</td> <td>clula</td> <td>clula</td> <td>clula</td> <td>clula</td> </tr> </tbody> </table> <form> <input onclick="setColSpan()" type="button" value="Alterar o valor de Colspan"> </form> </body> </html>
Alinhar o contedo da clula

<html> <head> <script type="text/javascript"> function alignCell() { var x=document.getElementById("myTable").rows[0].cells x[0].align="center" } </script> <title></title> </head> <body> <table id="myTable" width="100%" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> </tbody> </table>
187

<form> <input onclick="alignCell()" type="button" value="Realinhar o contedo da primeira clula"> </form> </body> </html>
Alinhar verticalmente o contedo da clula

<html> <head> <script type="text/javascript"> function alignCell() { var x=document.getElementById("myTable").rows[0].cells x[0].vAlign="bottom" } </script> <title></title> </head> <body> <table id="myTable" width="100%" border="1"> <tbody> <tr height="50" valign="top"> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr height="50" valign="top"> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> </tbody> </table> <form> <input onclick="alignCell()" type="button" value="Realinhar o contedo da primeira clula"> </form> </body> </html>
188

11.15 Objeto tablerow

Este objeto representa de forma completa os elementos criados com a etiqueta <tr> do HTML. A coleo rows, pertencente ao objeto table, contm uma lista com todos os objetos deste tipo existentes na tabela que representada por um objeto table. Propriedades Propriedade align rowIndex sectionRowIndex vAlign Descrio Define o alinhamento horizontal do contedo da clula L o ndice de uma linha medido relativamente ao incio da tabela L o ndice de uma linha medido relativamente ao incio da seo atual ou dos elemento thead, tfoot ou tbody Define o alinhamento vertical dos contedos das clulas
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <tr> em acordo com a linguagem HTML. Colees Coleo cells Mtodos Mtodo deleteCell() insertCell() Descrio Apaga (remove) a clula da tabela com o ndice especificado Insere uma clula na tabela com o ndice especificado Descrio Devolve todas as clulas de uma linha
Exemplos de Aplicao
Alinhar o contedo das clulas de uma linha
<html> <head> <script type="text/javascript"> function alignRow() { var x=document.getElementById("myTable").rows x[0].align="right" }
189

</script> <title></title> </head> <body> <table id="myTable" width="50%" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr> <td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> </tbody> </table> <form> <input onclick="alignRow()" type="button" value="Alinhar direita"> </form> </body> </html>
Alinhar verticalmente os contedos das clulas de uma linha

<html> <head> <script type="text/javascript"> function alignRow() { var x=document.getElementById("myTable").rows x[0].vAlign="top" } </script> <title></title> </head> <body> <table id="myTable" width="50%" border="1"> <tbody> <tr height="50" valign="bottom"> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr>
190

<td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> </tbody> </table> <form> <input onclick="alignRow()" type="button" value="Realinhar a primeira linha"> </form> </body> </html>
Apagar (remover) clulas

<html> <head> <script type="text/javascript"> function delCell() { var x=document.getElementById("myTable").rows[0] var y=x.deleteCell(1) var z=x.deleteCell(0) } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr> <td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> </tbody> </table> <form> <input onclick="delCell()" type="button" value="Apagar clulas"> </form> </body> </html>
191

Inserir clulas
<html> <head> <script type="text/javascript"> function insCell() { var x=document.getElementById("myTable").rows[0] var y=x.insertCell(2) y.innerHTML="NOVA CLULA" } </script> <title></title> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>Linha1 clula1</td> <td>Linha1 clula2</td> </tr> <tr> <td>Linha2 clula1</td> <td>Linha2 clula2</td> </tr> <tr> <td>Linha3 clula1</td> <td>Linha3 clula2</td> </tr> </tbody> </table> <form> <input onclick="insCell()" type="button" value="Inserir clula"> </form> </body> </html>
192

11.16 Objeto textarea

Este objeto representa de forma completa os elementos criados com a etiqueta <textarea> do HTML. Propriedades Propriedade accessKey cols defaultValue disabled form name readOnly rows tabIndex type value Propriedades Propriedade blur() focus() select() Descrio A rea de texto perde o foco A rea de texto ganha o foco Seleciona o contedo da rea de texto Descrio Define uma tecla para acessar rapidamente a rea de texto L ou define a largura da rea de texto (medida em nmero de caracteres) L ou define o texto inicial (valor por omisso) contido na rea de texto L ou define o valor da propriedade disabled Devolve o elemento form que contm a rea de texto L ou define o nome da rea de texto L e controla o valor do atributo que estabelece se a rea de texto pode ser apenas lida ou se tambm se pode escrever nela L ou define o nmero de linhas da rea de texto L ou define o ndice (nmero de ordem) do elemento que corresponde a este objeto no acesso atravs da tecla tab L o tipo da rea de texto L ou define o texto contido na rea de texto
Cada uma das propriedades descritas mais acima corresponde a um atributo do elemento <textarea> em acordo com a linguagem HTML.
Exemplos de Aplicao
Alterar o nmero de colunas (atributo cols)
<html> <head> <script type="text/javascript"> function changeCols() { document.getElementById("myTxtArea").cols=50 } </script> <title></title> </head> <body> <form> <textarea id="myTxtArea" rows="3" cols="20">rea de texto</textarea><br> <input onclick="changeCols()" type="button" value="Passar para 50 Colunas"> </form> </body> </html>
193

Desativar e ativar a rea de texto

<html> <head> <script type="text/javascript"> function makeDisable() { document.getElementById("myTxtArea").disabled=true } function makeEnable() { document.getElementById("myTxtArea").disabled=false } </script> <title></title> </head> <body> <form> <textarea id="myTxtArea" rows="3" cols="20">rea de texto</textarea><br> <input onclick="makeDisable()" type="button" value="Desativar"> <input onclick="makeEnable()" type="button" value="Ativar"> </form> </body> </html>
Alterar o nmero de linhas (atributo rows)

<html> <head> <script type="text/javascript"> function changeRows() { document.getElementById("myTxtArea").rows=6
194

} </script> <title></title> </head> <body> <form> <textarea id="myTxtArea" rows="3" cols="20"> rea de texto rea de texto rea de texto rea de texto rea de texto </textarea><br> <input onclick="changeRows()" type="button" value="Passar para 6 Linhas"> </form> </body> </html>
Modificar o contedo (texto)

<html> <head> <script type="text/javascript"> function changeText() { document.getElementById("myTxtArea").value="Este texto foi escrito por uma funo JavaScript" } </script> <title></title> </head> <body> <form> <textarea id="myTxtArea">rea de texto</textarea><br> <input onclick="changeText()" type="button" value="Modificar o Texto"> </form> </body> </html>
195

Selecionar o contedo de uma rea de texto

<html> <head> <script type="text/javascript"> function makeSelect() { var x=document.getElementById("myTxtArea") x.select() x.focus() } </script> <title></title> </head> <body> <form> <textarea id="myTxtArea">rea de texto</textarea><br> <input onclick="makeSelect()" type="button" value="Selecionar o Texto"> </form> </body> </html>
12. Mais controle sobre os elementos do HTML

No captulo anterior estudmos objetos que nos permitem ler e manipular diversos elementos que encontramos como parte do contedo de uma pgina HTML. Cada um desses objetos possui mtodos e propriedades talhados especificamente para um determinado elemento. Agora vamos aprender a usar tcnicas que nos permitem ler e manipular quase todos os elementos que podemos encontrar numa pgina escrita em HTML, qualquer que seja o seu tipo.
12.1 Propriedades intrnsecas dos elementos do HTML e do XHTML

196

Com o DOM todos os elementos do HTML passam a pertencer categoria de objetos. Como os diversos elementos podem ter caractersticas muito diferentes uns dos outros, os objetos que os representam iro ter propriedades e mtodos que podem diferir bastante uns dos outros. Como tivemos oportunidade de ver, o objeto table tem um mtodo chamado deleteRow(), que serve para apagar uma linha de clulas, e o objeto form no tem. Por outro lado o objeto form possui mtodos que no fazem qualquer sentido numa tabela e por isso no esto presentes em um objeto table. Com as propriedades acontece o mesmo: o objeto table possui uma propriedade chamada cellPadding, que no existe em nenhum outro objeto. Mas apesar de todas as diferenas existem propriedades intrnsecas que esto presentes em quase todos os objetos que representam elementos do HTML e outras que esto presentes em todos os objetos que representam elementos de uma determinada classe. Essas propriedades esto relacionadas com os atributos intrnsecos (ou nucleares) do HTML 4, que tivemos oportunidade de estudar no "Curso de HTML 4.01". Como tivemos oportunidade de ver no curso e na referncia de HTML, os atributos a que chamamos intrnsecos (ou nucleares) esto presentes em quase todos os elementos. Os mais importantes so os atributos id e style. Para cada um desses atributos o DOM reserva uma propriedade no objeto que representa o elemento. A propriedade style A propriedade style de um objeto corresponde ao atributo style do elemento por ele representado. Esta propriedade contm as definies de estilos CSS aplicadas ao elemento atravs do seu atributo style e pode ser modificada para alterar o aspecto visual do elemento. Para lermos ou modificarmos as propriedades CSS precisamos saber que algumas tm nomes em CSS que no so iguais aos nomes que tm num script. Em CSS h propriedades que tm dois nomes separados pelo caractere "-" (sinal menos, ou hfen.) Um exemplo disto a propriedade background-color, que define a cor de fundo de um elemento. O nome que essa propriedade tem em um script obtm-se a partir do nome CSS do seguinte modo: 1) passamos todas as letras do nome para minsculas; 2) transformamos em maiscula a primeira letra que vem a seguir ao caractere "-"; 3) eliminamos o caractere "-". A lista seguinte contm alguns exemplos desta transformao: Propridade CSS background-color padding-top border-bottom word-spacing text-decoration Nome da propriedade em um script backgroundColor paddingTop borderBottom wordSpacing textDecoration
Voc j sabe que se precisar acessar por script uma propriedade CSS que tem mais do que um nome s precisa aplicar estas as regras que acabamos de aprender.
Exemplos de Aplicao
Ler os valores das propriedades CSS 197

<html> <head> <script type="text/javascript"> function lerPropriedades() { var obj=document.getElementById("caixa1") var s="Propriedades CSS da caixa1\n\n" s+="color: "+obj.style.color s+="\nbackground-color: "+obj.style.backgroundColor s+="\npadding: "+obj.style.padding alert(s) } </script> <title></title> </head> <body> Passe com o mouse sobre a imagem <div id="caixa1" style="color:red; background-color:yellow; padding:20px"> Esta a caixa 1 </div> <a href="javascript:lerPropriedades()"> Clique aqui para ler os valores das propriedades CSS</a><br><br> <b>Nota:</b> S podemos ler propriedades atribudas atravs do atributo style. As propriedades definidas em folhas de estilos no podem ser lidas deste modo. </body> </html>
A propriedade innerHTML Outra propriedade muito til para o DHTML o innerHTML. Esta propriedade s existe em elementos que tm contedo (<div>, <span>, <td>, <p> so exemplos disto). Elementos como <img> ou <br> no tm contedo, deste modo, os objetos que os representam no possuem propriedade innerHTML. O valor desta propriedade o cdigo HTML que est dentro do elemento representado pelo objeto. Se lermos o seu valor ficamos sabendo o contedo HTML do elemento, e se o modificarmos estaremos alterando o contedo do elemento.
Exemplos de Aplicao
Ler o cdigo HTML que est dentro de um elemento
198

<html> <head> <script type="text/javascript"> function lerHTML() { alert(document.getElementById("caixa1").innerHTML) } </script> <title></title> </head> <body> <div id="caixa1" style="border: solid 1px red"> <p>Esta caixa tem um <b>pargrafo</b>.</p> <p>E <span style="color:red">mais outro</span>.</p> </div><br> <a href="javascript:lerHTML()">Clique aqui para ver o cdigo HTML que est dentro da caixa de cima</a> </body> </html>
Para comear vamos aprender mais sobre o mtodo getElementById() do objeto document. Este mtodo serve para selecionar o elemento com o qual queremos trabalhar, independentemente do seu tipo (pode ser uma tabela, uma ligao, um pargrafo, etc.) Depois vamos usar as propriedades style e innerHTML para ler e manipular o objeto (elemento do HTML) que escolhemos. A propriedade id e o mtodo getElementById() Ns j usamos o mtdodo getElementById() (pertencente ao objeto document) por diversas vezes nos exerccios que efetuamos. Como voc reparou, o modo como este mtodo opera fcil de perceber, deste modo, no vale a pena dar explicaes muito detalhadas. Tudo o que precisamos saber a seu respeito que se lhe dermos como argumento o valor do atributo id de um elemento da pgina ele nos fornece o objeto que representa esse elemento. Se dermos como argumento um valor de id que no existe na pgina ento ele nos devolve o valor especial null, significando que o objeto que pedimos no existe na pgina em que o procuramos. Todos os objetos devolvidos pelo mtodo getElementById() que no sejam null possuem propriedades teis que podemos ler ou at manipular. Todos os objetos que podem ser obtidos usando o mtodo getElementById() possuem um valor no atributo id. Esse atributo est presente no objeto que representa o elemento sob a forma de uma propriedade que tem por nome id. Do mesmo modo que podemos usar o mtodo getElementById() para obter o objeto que representa um elemento, tambm podemos usar outras formas alternativas para obter esse mesmo objeto. Os dois exemplos seguintes so totalmente
199

equivalentes. No primeiro ns usamos o mtodo getElementById() para obter o objeto que representa um elemento <img> que queremos controlar, e no segundo fornecemos o mesmo objeto como argumento da funo.
Exemplos de Aplicao
Efeito de mouseover simples com CSS
<html> <head> <script type="text/javascript"> function mostrarContorno() { var obj=document.getElementById("sexy") obj.style.border="solid 2px blue" } function retirarContorno() { var obj=document.getElementById("sexy") obj.style.border="solid 2px white" } </script> <title></title> </head> <body> Passe com o mouse sobre a imagem<br> <img src="sexy.png" style="border:solid 2px white" id="sexy" onmouseover="mostrarContorno()" onmouseout="retirarContorno()"> </body> </html>
Efeito de mouseover simples com CSS (verso 2)

<html> <head> <script type="text/javascript"> function mostrarContorno(obj) { obj.style.border="solid 2px blue" } function retirarContorno(obj) { obj.style.border="solid 2px white" }
200

</script> <title></title> </head> <body> Passe com o mouse sobre a imagem<br> <img src="sexy.png" style="border:solid 2px white" id="sexy" onmouseover="mostrarContorno(this)" onmouseout="retirarContorno(this)"> </body> </html>
12.2 Posicionamento e medio de elementos em DHTML

O HTML Dinmico oferece propriedades que nos permitem medir e posicionar os elementos nas pginas com todo o rigor. Como j sabemos, os estilos CSS so a melhor forma que temos para posicionar um elemento, mas quando precisamos saber o local exato em que ele se encontra ou o seu tamanho exato, ento precisamos de algo mais. Para esclarecermos bem este ponto comecemos por apresentar quatro novas propriedades que o DOM nos oferece: Propriedade offsetHeight offsetLeft offsetTop offsetWidth Descrio Largura do elemento medida em pixels. Esta propriedade s pode ser lida. Nmero de pixels que separam o incio do elemento da extremidade esquerda da rea onde desenhada a pgina. Esta propriedade s pode ser lida. Nmero de pixels que separam o incio do elemento do topo da rea onde desenhada a pgina. Esta propriedade s pode ser lida. Altura do elemento medida em pixels. Esta propriedade s pode ser lida.
Nota: Estas propriedades esto presentes em objetos que representam elementos de bloco. O fato de podermos manipular e ler os valores guardados pela propriedade style pode levar-nos a pensar que estas quatro propriedades adicionais no so necessrias, mas isso no verdade. Os estilos CSS podem ser usados de muitas maneiras: eles permitem designar tamanhos em pixels, em polegadas, em pontos ou como percentagens. Do posicionamento por CSS podem resultar valores que variam de browser para browser, de mquina para mquina e de usurio para usurio. a
201

prpria filosofia dos estilos CSS que nos impede de saber quais as dimenses exatas de um elemento. aqui que entram estas quatro propriedades. Aquilo que elas guardam so os tamanhos e as posies de cada elemento em cada instante. Quando redimensionamos a janela do browser os elementos podem mudar de posio na pgina mas os seus estilos CSS no sofrem alteraes. J as quatro propriedades que acabamos de ver so atualizadas sempre que ocorre uma alterao na pgina ou na janela do browser.
Exemplos de Aplicao
Ler as dimenses e a posio de um elemento
<html> <head> <script type="text/javascript"> function lerProps() { var o=document.getElementById("caixa1") var s="style.width = "+o.style.width s+="\nstyle.height = "+o.style.height s+="\n\noffsetWidth = "+o.offsetWidth s+="\noffsetHeight = "+o.offsetHeight s+="\noffsetTop = "+o.offsetTop s+="\noffsetLeft = "+o.offsetLeft alert(s) } </script> <title></title> </head> <body> <div id="caixa1" style="border: solid 1px red; width: 80%"> <p> A largura desta caixa foi dada em CSS de forma relativa. Por isso a nica forma de sabermos quantos pixels ela tem de largura lendo o valor da propriedade offsetHeight. </p> </div><br> <a href="javascript:lerProps()">Clique aqui para ler as dimenses da caixa de cima</a> e compare com os valores obtidos atravs das propriedades CSS. </body> </html>
202

Redimensionar um elemento
<html> <head> <script type="text/javascript"> function reduzir() { var o=document.getElementById("caixa1") o.style.width=(o.offsetWidth-50)+"px" } </script> <title></title> </head> <body> <div id="caixa1" style="border: solid 1px red; width: 80%"> <p> A propriedade offsetWidth nos permite saber sempre o valor correto da largura de um elemento. </p> </div><br> <a href="javascript:reduzir()">Clique aqui para retirar 50 pixels da largura da caixa de cima</a> </body> </html>
Reposicionar um elemento
<html> <head> <script type="text/javascript"> function reposicionar() { var o=document.getElementById("caixa1") o.style.width=(o.offsetWidth-50)+"px" o.style.left=(o.offsetLeft+25)+"px" } </script> <title></title> </head> <body> <a href="javascript:reposicionar()">Clique aqui para retirar 50 pixels da largura da caixa de baixo e desloc-la 25 pixels para a direita</a><br> <div id="caixa1" style="border: solid 1px red; position: absolute"> <p> As propriedades offsetLeft e offsetWidth permitem-nos saber sempre os valores corretos da coordenada horizontal e da largura de um elemento. </p> </div> </body>
203

</html>
204

Curso de Programação em Javascript e DHTML PDF

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso de Programação em Javascript e DHTML PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Curso de Programao em JavaScript e HTML Dinmico

Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C

PARTE II Programao em JavaScript

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

PARTE III HTML Dinmico

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

PARTE IV Controle do Elementos HTML

PARTE I: Introduo ao JavaScript

Curso de Programao em JavaScript e HTML Dinmico

2. Inserir JavaScript numa pgina da Web

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

3. Comentrios e blocos de cdigo

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

3.2 Blocos de cdigo

4.1 Declarao de Variveis

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

4.2 Os valores das Variveis

4.3 Converses de Valores

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

5.2 Nmeros inteiros

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

5.3 Nmeros com vrgula flutuante

5.4 Valores lgicos (booleanos)

5.5 Expresses de texto

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

5.6 Caracteres de escape

Se ao invs de usar aspas usarmos apenas apstrofos teremos:

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

6. Cadeias de variveis (Array)

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

7.1 Operadores de atribuio de valor

7.2 Operadores de comparao

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

(<) Menor ou igual (<=)

menor do que o da direita verifica se o operando da esquerda menor ou igual ao da direita

do que y x<=y d true se x for menor ou igual a y

7.3 Operadores aritmticos

7.4 Operadores lgicos

Se tivermos x = 4 e y = 7 a operao seguinte d true:

Se tivermos x = 4 e y = 7 a operao seguinte d false:

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

8.1 Exemplos prticos com objetos

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

9. Definir uma Funo

<meta name="autor" content="Rafael Feitosa">

Curso de Programao em JavaScript e HTML Dinmico

10. As instrues condicionais if...else