curso de programação em javascript e dhtml.pdf

Curso de Programao em JavaScript e HTML DinmicoDesenvolvimento, aplicaes e referncias de acordo com as normas do W3C

ndicePARTE I Introduo ao JavaScript

1 Introduo........................................................................................................... 5

2 Inserir JavaScript numa pgina da Web...........................................................5O elemento ........................................................................................... 5

3 Comentrios e blocos de cdigo...................................................................... 6Comentrios....................................................................................................... 6Blocos de cdigo................................................................................................ 7

4 Variveis.............................................................................................................. 7Declarao de Variveis.....................................................................................7Os valores das Variveis.................................................................................... 8Converses de Valores...................................................................................... 8

5 Expresses Literais............................................................................................9Representao de valores..................................................................................9Nmeros inteiros................................................................................................ 10Nmeros com vrgula flutuante...........................................................................11Valores lgicos (booleanos)............................................................................... 11Expresses de texto...........................................................................................11Caracteres de escape........................................................................................ 12

6 Cadeias de variveis (Array) .............................................................................13

7 Operadores..........................................................................................................14Operadores de atribuio de valor..................................................................... 14Operadores de comparao...............................................................................14Operadores aritmticos...................................................................................... 15Operadores lgicos............................................................................................ 15

8 Objetos.................................................................................................................16Exemplos prticos com objetos..........................................................................16

9 Definir uma Funo............................................................................................ 17

10 As instrues condicionais if...else................................................................ 19

11 Executar cdigo repetidamente...................................................................... 19Ciclos for.............................................................................................................19Ciclos while........................................................................................................ 21

PARTE II Programao em JavaScript

1 Reviso de matrias importantes......................................................................23

2 Os operadores da linguagem JavaScript......................................................... 38Operadores aritmticos...................................................................................... 38Operadores de atribuio (formas abreviadas) .................................................38Operadores de comparao...............................................................................38Operadores lgicos............................................................................................ 39

2


Adio de texto...................................................................................................44

3 Instrues condicionais.................................................................................... 45As instrues if e if ... else..................................................................................45Atribuio condicional de valores.......................................................................49A instruo switch...............................................................................................50

4 Execuo repetida de cdigo............................................................................ 54Ciclos for.............................................................................................................55Ciclos while e ciclos do...while........................................................................... 57

5 Cdigo robusto: as instrues try ... catch......................................................59

6 Construir e usar uma funo.............................................................................63Funes com um nmero fixo de argumentos................................................... 64Funes com um nmero varivel de argumentos............................................ 66

7 Trabalhar com objetos....................................................................................... 71Criar um novo objeto.......................................................................................... 72Propriedades de objetos.....................................................................................72Mtodos de objetos............................................................................................ 72Objetos definidos pelo padro ECMAScript....................................................... 73As declaraes this e with..................................................................................73

8 Objeto Array........................................................................................................ 76Propriedades do objeto Array............................................................................. 76Mtodos do objeto Array.................................................................................... 76Colees.............................................................................................................77

9 - Objeto Date.............................................................................. 81Mtodos do objeto Date.............................................................................. 82Mtodos estticos do objeto Date...................................................................... 84

10 Objeto Math....................................................................................................... 89Propriedades do objeto Math............................................................................. 89Mtodos do objeto Math.....................................................................................89

11 Objeto String.................................................................................................... 94Propriedades do objeto String............................................................................94Mtodos do objeto String....................................................................................95Mtodos 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?.......................................................................... 109Os objetos do DOM............................................................................................109Objetos principais usados em DHTML...............................................................109

4 O objeto window................................................................................................. 111Propriedades...................................................................................................... 111Colees.............................................................................................................112

3


Mtodos..............................................................................................................112

5 O objeto document............................................................................................. 122Propriedades...................................................................................................... 122Colees.............................................................................................................123Mtodos..............................................................................................................123

6 O objeto event.....................................................................................................132Propriedades...................................................................................................... 132Funes de compatibilidade para o objeto event...............................................132

7 O objeto navigator.............................................................................................. 144Propriedades...................................................................................................... 144

8 O objeto screen...................................................................................................146Propriedades...................................................................................................... 146

9 O objeto location................................................................................................ 147Propriedades...................................................................................................... 148Mtodos..............................................................................................................148

10 O objeto history................................................................................................ 150Propriedades...................................................................................................... 150Mtodos..............................................................................................................150

PARTE IV Controle do Elementos HTML

11 Objetos que representam elementos do HTML............................................. 151anchor.................................................................................................................151applet..................................................................................................................153embed.................................................................................................................154frame.................................................................................................................. 154frameset..............................................................................................................155form.................................................................................................................... 155iframe..................................................................................................................158image..................................................................................................................160input....................................................................................................................163object..................................................................................................................168option..................................................................................................................169select.................................................................................................................. 172table....................................................................................................................178tablecell.............................................................................................................. 186tablerow.............................................................................................................. 189textarea...............................................................................................................193

12 Mais controle sobre os elementos do HTML..................................................196Propriedades intrnsecas dos elementos do HTML............................................197A propriedade style.............................................................................................197A propriedade innerHTML.................................................................................. 198A propriedade id e o mtodo getElementById()................................................. 199Posicionamento e medio de elementos em DHTML...................................... 201

PARTE I: Introduo ao JavaScript

1. Introduo

4


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

Os browsers capazes de executar cdigo escrito em JavaScript reconhecem o elemento . dentro desse elemento que se coloca todo o cdigo, como ilustra o exemplo seguinte:

A Minha Pgina com JavaScript

alert("Seja bem vindo(a) minha pgina!");

Aqui colocamos o contedo da pgina em 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

5


comportamento esperado. O exemplo seguinte executa uma caixa de dilogo com um agradecimento sempre que o link for clicado:

Visite o W3C

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.

6


// 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 forescrito aqui dentro ser ignorado pelo interpretadorde 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 cdigovar i = 0;var j = i * 3;

}

4. VariveisO que so as Variveis?

As variveis so objetos que servem para guardar informao. Elas permitem-nos 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.

7


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:

8


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):

9


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:

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 Significado \b backspace \f form feed \n new line \r carriage return \t 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:

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:

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 Significado x+=y x=x+y x-=y x=x-y x*=y x=x*y 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 Descrio ExemploIgualdade (==) Verifica se os dois operandos so

iguaisx==y d true se x igualar y

Desigualdade (!=)

Verifica se os operandos so desiguais

x!=y d true se x no for igual a y

Maior do que (>) Verifica se o operando da esquerda maior do que o da direita

x>y d true se x for maior do que y

Maior ou igual (>=)

Verifica se o operando da esquerda maior ou igual ao da direita

x>=y d true se x for maior ou igual a y

Menor do que Verifica se o operando da esquerda x


(


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:

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 desta pgina foi carregada a partir de: " + document.images[1].src);

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:

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:

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:

18


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:


soma = 0; for(var i = 0; i < 3; i++) { soma += i; document.write("O valor do ndice agora de " + i + ""); }-->

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.

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:

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

JavaScript no corpo do documento

Escrever texto na pgina com JavaScript

23


O mtodo document.write() permite escrever texto diretamente no corpo da pgina enquanto ela carrega.

Um arquivo externo com cdigo JavaScript

ext.js

document.write("Este script veio de um arquivo externo!!!")

O script responsvel pela escrita do texto mais abaixo est guardado em um arquivo externo chamado "ext.js".

Comentrios no cdigo JavaScript

24


Declarar uma varivel, atribuir-lhe um valor e apresent-la na pgina

Neste exemplo declara-se uma varivel, atribui-se um valor e escreve esse valor na pgina.

Uma vez atribudo um valor varivel podemos us-la vrias vezes para representar o valor que lhe foi atribudo.

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


// -->

Estude o cdigo JavaScript deste exemplo e leia os comentrios que o acompanham.

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)

Como pode ver as variveis a e A possuem valores diferentes. Nunca esquea que em JavaScript as maisculas e as minsculas no so equivalentes.

27


Diferenas entre letra maiscula e letra minscula

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().

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

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().

Variveis locais


catch(e) { s='indefinido'// a varivel z no existe }

document.write("Depois de invocarmos a funo trocarString() temos z="+s)// -->

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

Domnio de existncia de uma varivel

Como pode ver a varivel i no existia antes de ser executado o ciclo for. 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).

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"" // isto est erradovar z = 'O meu nome 'Luiso'' // 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

Caracteres especiais: newline

33


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:

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.

34


Exemplos de Aplicao

Formatar texto com etiquetas HTML

Como acabou de ver podemos usar etiquetas do HTML com o mtodo document.write para produzir contedo formatado mas preciso ter cuidado!!! Sempre que colocarmos etiquetas HTML dentro de um script conveniente colocar o contedo do script dentro de um comentrio do 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 precedido pela string javascript:, assim:

Dizer Ol

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


Clique aqui para executar trs instrues

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:

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 Exemplo Resultado+ Adio 2+2 4- Subtrao 5-2 3* Multiplicao 4*5 20/ Diviso 15/5

5/232.5

% Resto da diviso 5%210%810%2

120

++ Incrementar (aumentar uma unidade)

x=5x++ x=6

-- Decrementar (diminuir uma unidade)

x=5x-- x=4

2.2 Operadores de atribuio (formas abreviadas)

Operador Exemplo O Mesmo Que= x=y x=y+= x+=y x=x+y-= x-=y x=x-y*= x*=y x=x*y/= x/=y x=x/y%= x%=y x=x%y

2.3 Operadores de comparao

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

38


menor do que 5= maior ou igual a 5>=8 false

39


Incrementar valores (aumentar uma unidade)

Decrementar valores (diminuir uma unidade)

40


Operaes aritmticas

41


Atribuio mais elaborada de valores a variveis

Comparaes

42


Operaes lgicas


document.write("b = " + b + " (porque a operao anterior d true)")// -->

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

44


Somar texto com outros valores

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 = 10var sif (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:

46


Exemplos de Aplicao

A instruo if

Este exemplo demonstra a instruo if. Se a hora marcada pelo relgio do seu computador for inferior a 12 ser escrita uma saudao de bom dia.

Instruo if...else

47


Este exemplo demonstra as instrues if ... else. 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.

Produzir uma ligao aleatria

48


Este script produz trs ligaes de hipertexto aleatoriamente. Atualize vrias vezes a pgina para visualizar as modificaes.

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

49


Atribuio condicional de valores (verso 2)

O operador condicional de atribuio de valor tambm pode ser usado dentro de expresses normais.

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.

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:

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

Este exemplo escreve uma frase em funo do dia da semana. Repare que Domingo=0, Segunda-feira=1, Tera-feira=2, ...

A instruo switch (verso 2)


// 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)// -->

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:

Neste exemplo a inicializao var i = 1, a condio i


Exemplos de Aplicao

Ciclos (de repetio) for

Explicao 1) O ciclo for comea dando varivel i o valor 0. 2) O bloco de cdigo que est entre chaves ({ ... }) logo a seguir instruo for executado uma vez. 3) Depois de terminada a execuo do bloco de cdigo executada a terceira instruo do ciclo for, que i++. Esta terceira instruo aumenta em uma unidade o valor da varivel i. 4) A seguir executa-se a segunda instruo do ciclo, que i


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


var i = 0 while (i

Explicao 1) O ciclo while verifica a condio i

Explicao

58


1) O bloco de cdigo que est entre chaves ({ ... }) logo a seguir instruo do sempre executado sem que seja necessrio verificar qualquer condio.

2) Verifica-se a condio que est dentro da instruo while, que neste caso i


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

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.

60


As instrues try ... catch (verso 2)

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.

61


As instrues try ... catch (verso 3)

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.

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

O valor devolvido pela funo fazerNada_2() :

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


}// -->

O valor devolvido pela funo :

Uma funo que aceita dois argumentos


65


Uma funo que aceita quatro argumentos


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

Os valores devolvidos pela funo so:

Uma funo que aceita dois argumentos

67



Uma funo que aceita quatro argumentos


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)


69


Uma funo que devolve o valor mdio dos seus argumentos


Uma funo que devolve a soma dos seus argumentos (strings)

70



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 tardevar a = new Array(3)

// um Array com trs elementosvar b = new Array("Papagaio", "Ave do paraso", "Canrio")

// um Array cujas propriedades e contedo sero definidos mais tardevar 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

74


Nota: Em JavaScript tudo so objetos, funes e variveis includas Clique nos botes de baixo para executar as funes:

A declarao with

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 tardevar c = new Array()

// um Array com espao reservado para N elementos// e cujo contedo ser definido mais tardevar a = new Array(N)

// um Array com N+1 elementos definidos logo de inciovar b = new Array(elemento_0, elemento_1, ..., elemento_N)

8.1 Propriedades do objeto Array

Propriedade Descriolength 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 Descriojoin() Devolve uma String (varivel de texto) que representa o

contedo do Arrayreverse() 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)

sort() Devolve um novo Array em que os elementos esto ordenados (geralmente por ordem crescente)

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

Ordenar os elementos de um Array (strings)

77


Ordem normal Ordem alfabtica

Ordenar os elementos de um Array (nmeros)

A ordenao que o mtodo sort() faz sempre por ordem alfabtica. Para ordenarmos nmeros por ordem crescente temos de usar outras tcnicas. Ordem normal Ordem alfabtica

78


Inverter a ordem dos elementos de um Array

Ordem alfabtica Ordem inversa


document.write(fruta[i] + "") // -->

A coleo Images

Aqui temos algumas imagens: A coleo images deste documento um Array que contm um objeto Image para cada imagem. Eis algumas das propriedades destes objetos:

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

curso de programação em javascript e dhtml.pdf

Documents