Apostila Javascript

14/8/2014 Apostila Javascript

http://www.webteste123.com/curso_web/informatica/web/apostilas/programacao/javascript/javascript.html 1/154

Javascript

Caso sensitivo

Ateno

Na linguagem Javascript voc deve prestar muita ateno na hora de digitar seu cdigo fonte, pois, oJavascript caso sensitivo, ou seja, ele diferencia letras maisculas de minsculas. Por exemplo, as palavras

histria, Histria e HISTRIA so palavras diferentes.

Por exemplo, veja este cdigo abaixo:

Texto="A raiz quadrada de 9 3"

document.write(Texto)

As palavras Texto edocument.writeesto corretos, porm, se voc alterar o cdigo fonte com letrasmaisculas e minsculas,causar erros no cdigo fonte. Observe:

Texto="A raiz quadrada de 9 3"

Document.Write(TEXTO)

As palavras TEXTO eDocument.Writeestoerrados,causando erros. O computadornoreconhece estas

palavras. Na hora em que digitar o cdigo fonte preste bastante ateno nas letras maisculas e minsculas,

por causa de uma letra pode causar erros.

Ponto-e-vrgula (;) no final das declaraes

Uma boa prtica ao programar utilizando Javascript sempre usar o; (ponto-e-vrgula) no final das suas

declaraes, mas seu uso no obrigatrio.

Voc precisa utilizaer o ponto-e-vrgula se utilizar algum compressor de Javascript para reduzir o tamanho do

arquivo. como os comperssores distribuem os cdigos em uma nica linha, sem eles ser impossvel

determinar onde comea e termina uma istrua, ocasionando erro.

Editor de texto

Editor de texto apenas um processador de texto que usado para digitar o programa. O texto resultante

conhecido como cdigo fonte.

O editor de texto um software que permite ao usurio selecionar trechos de um arquivo, alterar, apagar ou

adicionar testo ao cdigo-fonte.

Cdigo-Fonte



Cdigo-fonte uma seqncia de instrues numa linguagem de programao. O cdigo-fonte escrito por

um programador.

Este mesmo cdigo traduzido por um outro programador que pode ser pelo navegador no caso doJavascript, pelo servidor no caso do PHP, ou pelo compilador no caso Java.

O cdigo-fonte o cdigo bsico de um programa.

Criando um novo documento - O PRIMEIROPROGRAMA

Para comear vamos analisar um exemplo bem simples - abra um editor de texto comum e digite o cdigoque est escrito abaixo:

Meu primeiro programa

docoment.write("Esta minha primeira pgina")

Salve este documento com o nome pgina01.html

Assim que o exemplo for salvo no editor de texto (bloco de notas, por exemplo) com a extenso .htm ou.html, ao ser executado, o programa enviar a seqncia de caracteres "Esta minha primeira pgina" para a

sada padro que a tela do monitor.

Para criar um arquivo Javascript, basta definir os elementos e suas formataes ou um editor de texto, esalv-lo com a extenso .html ou .htm, exemplo:

programa.html

texto.html

arquivo01.html



Corpo do programa

Basicamente, a sintaxe do corpo do programa consiste em:

// Contedo

OU:

// Contedo

Carregando um arquivo externo

No Javascript, h a possibilidade de colocar mais de 1 arquivo externo ao documento. Ao invs detrabalharmos com o Javascript internamente, podemos trabalh-lo externamente. Em vez de trabalharmos

com um arquivo, podemos trabalhar com mais de um arquivo.

Isto pode facilitar e muito a vida do programador.

Abra um editor de texto e copie o arquivo abaixo:

Arquivo externo

Salve este arquivo com arquivoesterno.html.



Para incluir um arquivo externo ao documento use o comando src, no exemplo acima o arquivo externo

"teste.js". Devemos sempre salvar este arquivo externo com a extenso js.

Abra o editor de texto de novo e copie este arquivo abaixo:

document.write("Testando um arquivo externo. ")

document.write("Bom dia ")

document.write("Boa tarde e ")

document.write("Boa noite. ")

document.write("Fim do arquivo externo.")

Salve este arquivo como teste.js.

Assim que o documento arquivoexterno.html seja executado ao ser executado o programa enviar para a

tela do monitor: "Testando um arquivo externo. Bom dia, Boa tarde e Boa noite. Fim do arquivo externo."

Observao: Se voc est trabalhando com o arquivo externo do Javascript. No use as tags e

dentro do cdigo, o que causaria erros de programao. O arquivo teste.js s aceita comandos

Javascript se colocarmos tags html geraria erros, s use tags html dentro de aspas "duplas" ou 'simples'.

Comentrios

Comentrio uma breve nota de explicao inseridas em um programa para descrever o que ele far.

Os programadores usam comentrios em seus programas para que outros programadores (e ele prprio)

entendam o que o programa faz e como funciona.

Os comentrios geralmente descrevem o que o programa faz, quem o seu autor, por que ele foi alterado, e

assim por diante. A maioria das linguagens de programao usa uma sintaxe prpria para a especificao de

comentrios, de modo que os comentrios sejam ignorados pelo compilador.

Os comentrios no so analisados pelo programa.

Os comentrios podem ocupar uma ou vrias linhas. Veja o exemplo abaixo:

Comentrios de uma linha

Para inserir um comentrio de uma linha basta colocar o smbolo // antes de qualquer comentrio.



Exemplo:

//Comentrio de uma linha

//Exemplo 1

//Exemplo 2

//Exemplo 3

Comentrio com mais de uma linha

Para inserir comentrios com mais de uma linha basta colocar os smbolos / * para abrir um comentrio e * /

para fechar o comentrio.

Exemplo:

/ *

Comentrio

com mais de

uma linha

* /

/ *

Exemplo 1

Exemplo 2

Exemplo 3

* /

Usando aspas dentro de aspas



s vezes necessitamos informar algo entre aspas dentro de uma string. Isto pode ser resolvido alterando-se

aspas duplas e simples. Isto usado em Javascript e PHP, veja o exemplo em Javascript.

document.write("")

Outro exemplo:

Inserindo um texto

Para inserir um texto no programa use o comando document.write, veja o exemplo abaixo:

document.write("A raiz quadrada de 9 3")

document.write("A soma de 5 + 4 igual a 9 ")

document.write("6 dividido por 3 igual a 2 ")

Editando um texto

Para editar um texto externamente basta usar o comando leia:

Idade

Digite seu nome:

Digite sua idade:

function idadex() {

var nome = document.frm_teste.nome.value

var idade = document.frm_teste.idade.value

alert("meu nome " + nome + " e tenho " + idade + " anos.")

}



Caracteres especiais

Dentro de uma string de texto, podem ser especificado caracteres especiais mostrados a seguir:

Hfen \'

Aspas \"

Barra invertida \\

Nova linha \n

Marca de tabulao \t

Retorno de carro \r

Backspace \b

Exemplo:

document.write("")

document.write("\tO livro: \"Manual Prtico do ")

document.write("Programador\". \nEst nas livrarias ")

document.write("e \\ ou jornaleiros. ")

document.write("")

Resultado:

O livro: "Manual Prtico do Programador".Est nas livrarias e \ ou jornaleiros.

Tipos de variveis

Variveis so smbolos que representa um valor numrico ou string usada no programa. O uso de variveis

d ao programador flexibilidade para mudar o valor a qualquer momento no programa, mesmo que a

princpio parea no ser necessrio este tipo de flexibilidade.

O contedo de uma varivel pode mudar a qualquer momento.

Por exemplo, uma varivel chamado cheque poderia conter o nmero 12, mas o programa teria condiesde modificar esse valor a qualquer momento.

O nome de uma varivel pode comear com uma letra ou sublinhado "_" seguido de nmeros ou letras sem

espao. Veja alguns exemplos de nomes vlidos:

nome

Conta_pag



z01

_cod

Varivel String

Varivel String um conjunto contnuo de caracteres alfanumricos que no contm nmeros usados para

clculos. Nomes, endereos, palavras e frases so strings. Esses caracteres podem ser as letras maisculas,

as letras minsculas, os nmeros e os caracteres especiais (&, #, @, ?, + ). Exemplos:

"aluno"

"1234"

"@ internet"

"0.34"

"1 + 2"

Observao: os dados do tipo literal na linguagem de programao so sempre representados entre aspas

duplas(") ou aspas simples (').

Variveis Numricas

Os dados numricos dividem-se em dois grupos: inteiros e reais.

Os nmeros inteiros podem ser positivos ou negativos e NO possuem parte decimal. Este tipo de dado

armazenado na memria do computador, exemplos:

-23

98

0

1350

-257

237

-2

Os nmeros reais podem ser positivos ou negativos e possuem parte decimal. Este tipo de dado

armazenado na memria do computador, exemplo:

23.45

346.98



-34.88

0.0

-247.0

Observao: na linguagem de programao, a separao entre a parte inteira e a parte decimal de um

nmero feita pelo ponto (.), e a simples presena do ponto j significa que um nmero real.

Variveis Booleanas

Varivel Booleana uma expresso cujo resultado s pode ser verdadeiro (true) ou falso (false).

As variveis booleanas so mais usadas em:

Estrutura de deciso: If, Case e Ternrio;

Operadores relacionais: >, = , 2)&&(54)||(5



Regras bsicas

Para criar uma varivel, a varivel deve obedecer as seguintes regras:

1. O primeiro caractere deve ser sempre uma letra ou um caractere sublinhado (_).

2. Os caracteres que voc pode utilizar na formao das variveis so: os nmeros, as letras maisculas,

as letras minsculas e o caractere sublinhado (_).

3. No permitido acentuao (acento grave, acento agudo, acento circunflexo, trema e til), por

exemplo: Antnio, mamo, difcil, cinqenta, etc.

Dependendo da linguagem de programao usado pelo programador (ASP, Java, PHP, Javascript, Delphi,

Visual Basic e outros) cada linguagem recebe regras de programao diferente, por exemplo:

1. As variveis podem ter qualquer tamanho. Entretanto, apenas os 63 primeiros caracteres so

utilizados pelo compilador.

2. Dependendo da linguagem de programao, a varivel pode ser sensvel, ou no, a letras maisculas

ou minsculas, isto se chama "caso sensitivo".

O Javascript, por exemplo,faz diferenciao entre letras maisculas e minsculas; portanto a varivel NUM

exatamente diferente a varivel num;

Observao: algumas linguagens de programao so sensveis caixa alta e caixa baixa, um exemplo disso

o Java, "Ol" e "OL" so duas palavras totalmente diferentes. O Delphi por exemplo no sensvel a

caixa, "abc" exatamente igual a "ABC".

3. No podemos usar palavras reservadas em variveis.

Palavras reservadas so nomes utilizados pelo compilador para representar comandos de controle do

programa, operadores e nomes de sees de programas. As palavras reservadas da linguagem Pascal so:

(veja a tabela abaixo)

Exemplos de variveis vlidos:

A

a

nota

NOTA

x5

A32

Nota_1

MATRICULA

nota_1



dia

IDADE

Exemplos de variveis invlidos

5b

e 12

x-y

prova 2n

nota(2)

case

Set

matrcula

Obs: matrcula com acento no .

Resolva os exerccios abaixo:

Exerccio 1: Identifique o tipo dos dados:

(a) numrico inteiro;

(b) numrico real;

(c) lgico;

(d) string.

(c) true (b) 45.0 (a) 1234 (b) 0.0

(d) "aula" (d) "c * d" (a) -234 (d) "1 2 3 4"

(b) -0.342 (b) 35.23 (d) "34" (b) -18.589

(d) " " (b) -354.0 (b) -15.2 (c) false

(a) 0 (a) 897 (d) "false" (a) -23

Concatenao

Concatenar: Reunir duas strings de caracteres em um s por exemplo, combinar as duas strings "bom" e "dia"

formando uma nica string "bom dia".



// Exemplo 1:

Variavel="Texto1 " + "Texto2" + ""document.write(Variavel)

// Exemplo 2:String1="Isto "

String2="um texto"String3=""

String4=String1 + String2 + String3document.write(String4)

// Exemplo 3Nome="Jos "

Sobrenome="Antnio"document.write("Meu nome : " + Nome + Sobrenome)

Convertendo valores string para numrica

Quando usamos formulrios para efetuar clculos matemticos precisamos converter os valores strings dos

formulrios em valores numricos, para logo em seguida calcular usando operadores aritmticos e funesmatemticas.

Se no convertermos os valores strings para numricas impossibilita de efetuarmos clculos matemticos, por

exemplo:

A="7"

B="9"C=5document.write(A + B + C)

Esta operao geraria erros de programao o correto usarmos conversores, veja o exemplo abaixo:

A="7"

B="9"C=5

document.write(parseFloat(A) + parseFloat(B) + C)

Observando que C j um valor numrico, enquanto A e B so strings.

Veja outro exemplo:

Altura: Largura:

function Areax() {



Altura=document.frm_teste.Altura.value

Largura=document.frm_teste.Largura.valueArea= parseFloat(Altura) + parseFloat(Largura)/2alert(Area)

}

Os valores Largura e Altura so valores strings e Area um valor numrico. No exemplo acima usamos os

formulrios Altura e Largura, os valores Largura e Altura so valores strings enquanto Area um valornumrico.

Se efetuarmos os clculos Area = Altura * Largura/2 sem converter string em numrica geraramos erros de

programao.

O correto Area=parseFloat(Altura) * parseFloat(Largura)/2.

Exerccio 1: Use a calculadora abaixo:

Calculadora

function calcula(form,op) {

var op1 = eval(form.campo1.value);var op2 = eval(form.campo2.value);

if (op==0){res=op1+op2;

}else if (op==1){res=op1-op2;

}else if (op==2){res=op1*op2;}else if (op==3){

res=op1/op2;}

form.resultado.value=res;}



Resultado:

Exerccio 2: Use esta outra calculadora

Calculadora

function processa1() {d = eval(document.calculo.campo1.value)+

eval(document.calculo.campo2.value)+eval(document.calculo.campo3.value)document.calculo.campo4.value=d

}function processa2() {

d = eval(document.calculo.campo1.value)*eval(document.calculo.campo2.value)*

eval(document.calculo.campo3.value)document.calculo.campo4.value=d}

Campo1: Campo2: Campo3:

Resultado:

Operadores

Operadores so smbolos que representa uma operao matemtica; so trs tipos de operadores:



Operadores Aritmticos ( + , -, * , /)Operadores Relacionais (, =, = )

Operadores Booleanos (And, Or, Not)

O operador mais usado o operador de atribuio "=". Ele atribui o contedo da expresso sua direita

para a varivel do seu lado esquerdo.

X=40

X=20/10 + 5

X=Y

Operadores Aritmticos

Operadores aritmticos so smbolos usados pelo computador + , -, * , /, para efetuar clculos matemticos.

Os operadores aritmticos so os seguintes:

Operadores Nome Utilizao

+ Adio Soma valores

- Subtrao Subtrai valores

* Multiplicao Multiplica valores

/ Diviso Divide valores

% Mdulo Determina o resto da diviso

Veja os exemplos abaixo:

Exemplo 1: Efetue clculos usando operadores aritmticos

Operao Resultado

5 + 8 13

12-7 5

3 * 6 18

10/3 3.333333

10 % 3 1

Exemplo 2: Efetue clculos aritmticos usando parnteses

Operao Resultado

4 * 2 + 1 9

4 * (2 + 1) 12

3 + 5 * 4-2 21

(3 + 5) * (4-2) 16



Usando Operadores Aritmticos

+ Adio

- Subtrao

* Multiplicao

/ Diviso

( ) Parnteses

Lista de Exerccios:

Exerccio 1. Faa um programa que receba quatro nmeros inteiros, calcula e mostre a soma desses nmeros

// Nome do arquivo: soma.txt

+

+ +

function Somax() {

n1=document.frm_teste.n1.valuen2=document.frm_teste.n2.value

n3=document.frm_teste.n3.valuen4=document.frm_teste.n4.value

soma=parseFloat(n1) + parseFloat(n2) + parseFloat(n3) + parseFloat(n4)alert(soma)}

Exerccio 2. Faa um programa que receba trs notas, calcule e mostre a mdia aritmtica entre elas.

// Nome do arquivo: triangulo.txt

Base:

Altura:

function Areax() {



base= parseFloat(document.frm_teste.base.value)

altura=parseFloat(document.frm_teste.altura.value)area=(base * altura)/2

alert(area)}

Exerccio 4. Faa um programa que receba o salrio de um funcionrio, calcule e mostre o novo salrio,

sabendo-se que este sofreu um aumento de 25%.

// Nome do arquivo: salario.txt

Salrio:

function Salariox() {sal=parseFloat(document.frm_teste.sal.value)

aumento=sal * 25/100novosal=sal + aumento

alert(novosal)}

Exerccio 5. Crie um programa que d o resultado da soma, do produto e da diferena.

// Nome do arquivo: resultado.txtEntre com dois nmeros:

A:

B:

function resultadox() {

A=parseFloat(document.frm_teste.A.value)B=parseFloat(document.frm_teste.B.value)

alert("Operaes com nmeros " + A + " e " + B + ":")alert("Soma = " + (A + B))

alert("Produto = " + (A * B))alert("Diferena = " + (A-B))}



Exerccio 6. Crie um programa que d o quadrado de um nmero

Digite um numero:

function Quadradox() {n=parseFloat(document.frm_teste.n.value)

Quadrado=n*nalert("O quadrado de "+ n+ " e "+ Quadrado)

}

Operadores Relacionais

Operadores relacionais so operadores que permitem ao programador comparar dois (ou mais) valores ouexpresses.

Os operadores relacionais tpicos so: (veja a tabela abaixo:)

Operador Significado Exemplo

== Igual 3==(4-1) ou "VILMA"=="VILMA"

!= Diferente 5 != (3 + 3) ou "VILMA"!= "BETH"

< Menor que 3 Maior que 41>39

= 10

Veja os exemplos abaixo:

Exemplo 1. Veja o seguinte resultado

Operao Resultado

2339 true (verdadeiro)

6 = 10 true (verdadeiro)



7==8 false (falso)

48 != 22 true (verdadeiro)

Exemplo 2. Se a=100 e b=200, calcule:

Operao Resultado

a>b false (falso)

b>a true (verdadeiro)

a != b true (verdadeiro)

Exemplo 3. Resolva a seguinte operao:

Operao Resultado

23==(4 * 2 + 3 * 5) true (verdadeiro)

17==(12/2 + 8-5) false (falso

23==(4 * 2 + 3 * 5)

23==(8 + 15)

23==23

true

17==(12/2 + 8-5)

17==6 + 8-5

17==9

false

Exemplo 4. Dadas as strings abaixo resolva:

Operao Resultado

"FRED"=="FRED" true (verdadeiro)

"FRED"!="SAM" true (verdadeiro)

"ONE"=="TWO" false (falso)

"THREE"!= "THREE" false (falso)

Operadores Booleanos

AND, OR, XOR e NOT so as operaes fundamentais a lgica booleana.

Estes operadores s aceitam como operandos valores lgicos: TRUE ou FALSE.

Veja a tabela abaixo

Operador Significado



And ( && ) Verdadeiro se ambos os lados da expresso forem verdadeiros.

Or ( || ) Verdadeiro se um ou ambos os lados da expresso forem verdadeiros

Xor ( ^ ) Verdadeiro se apenas um lado for verdadeiro

Not ( ! ) Reverte verdadeiro para falso e vice-versa

Se voc est acostumado com o C, C + + , Java e Javascript j deve ter notado que seus operadoresbooleanos usam smbolos diferentes.

And substitudo por &&

Or substitudo por ||

e Not substitudo por !

Se o leitor no teve nenhum contato com essas linguagens, poder ter algumas dificuldades iniciais deescrever este tipo de cdigo. Por exemplo:

(x>2)&&(y==9)

Leia-se: x maior que 2 E y igual a 9

(x8)

Leia-se: x menor que 3 OU x maior que 8

if((altura>170)||(idade>18)) {

// Ao...

}

Leia-se: se altura maior que 170 centmetros OU idade maior que 18 anos...

Veja a tabela abaixo:

Smbolo Operao

&& And (E)

|| Or (Ou)

! Not (No)

Existem os operadores binrios (semelhantes aos operadores acima), veja a tabela abaixo:

Smbolo Operao

& And lgico

| Or lgico

^ Xor lgico

Iremos estudar cada um:



AND (&&) verdadeiro se ambas as entradas forem verdadeiras, veja o quadro abaixo:

(a==true)&&(b==true) o resultado true (verdadeiro)

(a==false)&&(b==true) o resultado false (falso)

(a==true)&&(b==false) o resultado false (falso)

(a==false)&&(b==false) o resultado false (falso)

Por exemplo a expresso:

(3 + 2==5)&&(6 + 2==8)

verdadeira porque as expresses em ambos os lados de And so verdadeiras. no entanto, a expresso:

(4 + 3==9)&&(3 + 3==6)

falsa, porque a expresso esquerda de And falsa. Lembre-se disto quando combinar expresses com

And: se qualquer expresso for falsa, toda a expresso ser falsa.

OR (||) verdadeiro se qualquer uma das entradas for verdadeira, veja o quadro abaixo:

(a==true)||(b==true) o resultado true (verdadeiro)

(a==false)||(b==true) o resultado true (verdadeiro)

(a==true)||(b==false) o resultado true (verdadeiro)

(a==false)||(b==false) o resultado false (falso)

Por exemplo, as expresses:

(3 + 6==2)||(4 + 4==8)

e

(4 + 1==5)||(7 + 2==9)

So ambas verdadeiras porque pelo menos uma das expresses comparada verdadeira. Observe que no

segundo caso, ambas as expresses comparadas so verdadeiras, o que tambm torna verdadeira umaexpresso Or.

Um XOR (OU exclusivo) verdadeiro se somente uma das entradas for verdadeira e no ambas, veja oquadro abaixo:

(a==true)^(b==true) o resultado false (falso)



(a==false)^(b==true) o resultado true (verdadeiro)

(a==true)^(b==false) o resultado true (verdadeiro)

(a==false)^(b==false) o resultado false (falso)

Por exemplo, a expresso:

(3 + 6==2)^(4 + 4==8)

verdadeira porque apenas a expresso (4 + 4=8) verdadeira. No entanto a expresso:

(4 + 1==5)^(7 + 2==9)

falsa, porque ambas as expresses so verdadeiras.

NOT (!) Uma operao lgica booleana que inverte a entrada. Se a entrada for true, a sada false, e vice-versa, veja o quadro abaixo:

!(true) o resultado false

!(false) o resultado true

Por exemplo, a expresso:

(4 + 3==5)

No verdadeira; no entanto a expresso

!(4 + 3==5)

verdadeira porque o operador Not reverte para verdadeiro o resultado falso da expresso (4 + 3=5).

Observe esta expresso:

(4 + 5==9) && !(3 + 1==3)

Esta expresso verdadeira ou falsa? Se voc disse verdadeira, compreende a forma como funcionam osoperadores lgicos. As expresses em ambos os lados de And so verdadeiras, ento toda a expresso verdadeira.

Veja exemplos abaixo:

Exemplo 1. Resulta as seguintes operaes booleanas

Expresso Resultado

(3>2)&&(5>4) true (verdadeiro)

(2>1)&&(7>8) false (falso)

(3>4)||(9>2) true (verdadeiro)

(7>7)||(4>4) false (falso)



(2==2)^(5==5) false (falso)

(4>5)^(4a && b==c falso (falso)

b>a || b==c true (verdadeiro)

b>a ^ c>b false (falso)

! a b false (falso)

Exemplo 3. Resolva a seguinte operao:

(4 * (3 + 5))/2>100 || (5 * (3 + 4)/2100 || (5 * (3 + 4)/2100 || (5 * 7/2100 || (35/2100 || 17.5 c=a + b

Em 2 lugar esto as propriedades do objeto. Exemplo: Nota1.value=7 e Nota2.value=5 => media=(Nota1.value + Nota2.value)/2Em 3 lugar esto os parnteses. Exemplo: 3 * (4 + 1) * 2Em 4 lugar esto as funes. Exemplo: raiz quadrada, seno, cosseno, tangente, logaritmos e outros.

Em 5 lugar est a potenciao. Exemplo: 3^4 + 2Em 6 lugar esto multiplicao ( * ), diviso (/), e mdulo (%), na ordem em que aparecerem daesquerda para direita. Exemplo: 7 + 4/2 * 6/3-8Em 7 lugar esto adio ( + ) e subtrao (-), na ordem em que aparecerem da esquerda paradireita. Exemplo: 5 + 4-7-8 + 3-2 + 9

Em 8 lugar esto os operadores relacionais, maior que (>), menor que (= ),



menor ou igual ( 5) Or Not(3>6)

Em 10 lugar esto os operadores booleanos AND, OR e XOR. Exemplo: (37)

Resumindo

Nvel de prioridade Operadores Ordem

Mais alta: 1 Variveis da esquerda para a direita

2 Propriedades do Objeto da esquerda para a direita

3 Parnteses da esquerda para a direita

4 Funes da esquerda para a direita

5 Potenciao da esquerda para a direita

6 * , /, % da esquerda para a direita

7 + , - da esquerda para a direita

8 >, = ,



teste=trueif (teste) {document.write("Esta linha ser impressa")

} else {document.write("Esta linha no ser impressa")}

Usando a clusula If

Vamos ver um exemplo:

Descontos=315

if(Descontos!=0){document.write("Descontos deste ms: " + Descontos)

}

O sistema s executar o comando document.write quando o valor da varivel desconto for maior que 0.

Agora, ficou claro que este comando muito til para dar ao sistema uma espcie de "poder de deciso". naverdade, estamos programando o sistema para cada tipo de situao e ento o software agir conforme anecessidade de cada problema, situao ou estado do sistema naquele momento.

Usando a clusula Else

Podemos dar ao fluxo mais uma opo utilizando a clusula else. Nesse caso, o fluxo executar o blocoantes ou depois desta clusula. No exemplo anterior, podemos incrementar o cdigo com mais uma situao.

Descontos=315if(Descontos != 0){document.write("Descontos deste ms: " + Descontos)} else {

document.write("No h descontos este ms.")}

Para entender melhor o exemplo troque o valor da varivel Descontos para zero e teste novamente.



Usando a clusula else if

A clusulaelse ifnos permite ter vrias expresses dentro do mesmo comando If. Isso permite escolher entrevrias situaes e, caso nenhuma retorne verdadeiro, o fluxo ir para a clusula else, se esta for utilizada.Veja

Salario=1550

if (Salario= 1250 && Salario= 1800 && Salario



num=parseFloat(document.frm_teste.num.value)if(num % 2 == 0){alert("Par")} else {

alert("mpar")}}

Exerccio 2. Receber a temperatura - em graus Celsius - de uma pessoa e emitir uma mensagem se elaestiver com febre.

Nome do arquivo: temperatura.txt

Temperatura:

function Temperaturax(){

temperatura=parseFloat(document.frm_teste.temperatura.value)febre=37if(temperatura >= febre){alert("Paciente com febre")

}else {alert("Paciente sem febre")}}

Exerccio 3. Crie um algoritmo que informa se voc do sexo masculino ou feminino

Nome do arquivo: sexo.txtVoc do sexo masculino? s/n??

function Sexox(){

s_n=document.frm_teste.s_n.valueif(s_n=="s") {alert("Voc do sexo masculino")}else {

alert("Voc do sexo feminino")}}



Exerccio 4. Faa um programa que indique se o ano bissexto ou no.

Nome do arquivo: bissexto.txt

Digite o ano:

function Bissexto() {

Ano=parseFloat(document.frm_teste.Ano.value)if (Ano % 4 == 0){alert(Ano + " bissexto")} else {alert(Ano + "no bissexto")

}}

Usando Operadores relacionais

< Menor que

> Maior que

== Igual a

= Maior ou igual a

!= Diferente

Lista de exerccios

Exerccio 1. Faa um programa que indique se ele maior, menor ou igual a 100.

// Nome do arquivo: maiorque100.txt

Numero:

function maiorque() {

numero=parseFloat(document.frm_teste.numero.value)if(numero



}}

Exerccio 2. Faa um programa que indique se ele positivo, negativo ou igual a 0.

// Nome do arquivo: positivo.txt

Nmero:

function positivo() {n=parseFloat(document.frm_teste.n.value)if (n>0) {alert("O nmero positivo")}else {

alert("O nmero ou igual a 0 ou negativo")}}

Exerccio 3. Faa um programa que receba dois nmeros e mostre o maior.

// Nome do arquivo: maior.txt

Digite o primeiro nmero:

digite o segundo nmero:

function maior() {num1=parseFloat(document.frm_teste.num1.value)num2=parseFloat(document.frm_teste.num2.value)if(num1>num2){

alert("O maior nmero : "+ num1)} else if(num1



Exerccio 4. Criar um algoritmo que receba a idade e informe se criana, adolescente, adulto ou idoso:

//Nome do arquivo: idade.txt

Qual a sua idade?

function Idadex() {idade=parseFloat(document.frm_teste.idade.value)if (idade



nota1=parseFloat(document.frm_teste.nota1.value)

nota2=parseFloat(document.frm_teste.nota2.value)nota3=parseFloat(document.frm_teste.nota3.value)media=(nota1 + nota2 + nota3)/3alert("Mdia aritmtica: " + media)

if(media >= 0 && media= 5 && media= 7 && media = 8 && media = 6 && media= 4 && media= 2 && media= 0 && media



}

Exerccio 3. Dados trs valores A, B, C, verificar se eles formam um tringulo eqiltero, issceles ou

escaleno.

// nome do arquivo: triangulo.txtTringulo

Lado A:

Lado B: Lado C:

function Triangulo() {A=parseFloat(document.frm_teste.A.value)B=parseFloat(document.frm_teste.B.value)C=parseFloat(document.frm_teste.C.value)

if(A



Comando Case

Repare nesta outra construo para comando if aninhado:

if (mes==1) {document.write("Jan")}else if (mes==2) {document.write("Fev")}

else if (mes==3) {document.write("Mar")}else if (mes==4) {document.write("Abr")}else if (mes==5) {document.write("Mai")}else if (mes==6) {document.write("Jun")}

else if (mes==7) {document.write("Jul")}else if (mes==8) {document.write("Ago")}else if (mes==9) {document.write("Set")}else if (mes==10) {document.write("Out")}else if (mes==11) {document.write("Nov")}

else if (mes==12) {document.write("Dez")}else {document.write("Ms invlido")}

Embora essa construo seja perfeitamente vlida, h uma forma mais eficiente de se obter os mesmos

resultados. o comando case cujo funcionamento muito parecido com os if's aninhados:

switch (mes){case 1: document.write("Jan"); break;

case 2: document.write("Fev"); break;case 3: document.write("Mar"); break;case 4: document.write("Abr"); break;case 5: document.write("Mai"); break;

case 6: document.write("Jun"); break;case 7: document.write("Jul"); break;case 8: document.write("Ago"); break;case 9: document.write("Set"); break;case 10: document.write("Out"); break;

case 11: document.write("Nov"); break;case 12: document.write("Dez"); break;default: document.write("Ms invlido!") }

Este comando permite que vrias comparaes sejam feitas e, no final, apenas uma seja escolhida paraexecutar um cdigo especfico da condio selecionada. Ele funciona igualmente a vrios ifs, mas agora eletesta os valores de uma mesma varivel.



Vejamos um exemplo:

valor=2

switch (valor){case 0: document.write("O valor da varivel 0"); break;case 1: document.write("O valor da varivel 1 "); break;case 2: document.write("O valor da varivel 2 "); break;case 3: document.write("O valor da varivel 3 "); break;

case 4: document.write("O valor da varivel 4 ") ; break;}

No exemplo anterior, o comando Case testar linha a linha, em busca de um case que corresponda ao valor

da varivel.

Quando encontrar o valor correspondente, executar os comandos que viro logo aps este case.

Em linguagens de programao tais como o C, Java, Javascript PHP, esses comandos estaro entre { }, sefor mais que um. Teste o cdigo e veja como fica.

Usando o comando break

Quando precisamos executar apenas o case que corresponda ao valor da varivel, utilizaremos um comando

que tem a caracterstica de para fluxos de execuo, o comando break. Caso esse no seja utilizado, todosos cases aps o case que corresponda ao valor da varivel de referncia sero executados.

Utilizando o exemplo anterior, veremos como ficaria o cdigo com o uso do comando break:

valor=2;

switch(valor){case 0: document.write("O valor da varivel 0");break;case 1: document.write("O valor da varivel 1");break;

case 2: document.write("O valor da varivel 2");break; case 3: document.write("O valor da varivel 3");break; case 4: document.write("O valor da varivel 4");

break; }

No exemplo anterior, apenas os comandos que correspondam ao case que tem o mesmo valor da varivel



sero executados.

Teste os exemplos anteriores, veja a diferena entre eles e descobrir que o exemplo que possui o break ,nesse caso, o correto.

Exemplo 1. Determine o nmero de dias durante um ms

// Nome do arquivo: dias.txt

Digite o ms: Digite o ano:

function DiasX() {Mes=parseFloat(document.frm_teste.Mes.value)Ano=parseFloat(document.frm_teste.Ano.value)NumDias=0

switch(Mes) {case 4:case 6:case 9:case 11:

NumDias=30break;case 2:if (Ano % 4 == 0) {

NumDias=29} else {NumDias=28}break;

default:NumDias=31break;}

alert("O mes "+ Mes + " tem " + NumDias + " dias.")}

Exemplo 2. Crie um algoritmo que informe o dia da semana

// Nome do arquivo: semana.txtDataToda=new Date()DiaDaSemana=DataToda.getDay()

switch(DiaDaSemana) {

case 0: document.write("Domingo"); break;



case 1: document.write("Segunda"); break; case 2: document.write("Tera"); break;case 3: document.write("Quarta"); break;

case 4: document.write("Quinta"); break; case 5: document.write("Sexta"); break;case 6: document.write("Sbado"); break;}

Exemplo 3: Crie um algoritmo que d um aviso de bom dia, boa tarde e boa noite:

// Nome do arquivo: bomdia.txtDataToda=new Date()

HoraAtual=DataToda.getHours()switch(HoraAtual){case 6:case 7:case 8:

case 9:case 10:case 11:document.write("Bom dia!");

break;case 12:case 13:case 14:case 15:

case 16:case 17:document.write("Boa tarde!");break;default:

document.write("Boa noite!")break;}

Exemplo 4. Crie um programa que gerencie um caixa eletrnico

// Nome do arquivo: caixa.txt

Menu Principal---------------

1 - Incluso2- Alterao3 - Excluso4 - Relatrio5 - Fim



--------------

Escolha sua opo

function Menux() {

menu=document.frm_teste.menu.valueswitch(menu) {case "1": alert("Incluir"); break;case "2": alert("Alterar"); break;case "3": alert("Excluir"); break;

case "4": alert("Relatrio"); break;case "5": alert("Sair"); break;default: alert("Opo invlida "); break;}}

Exerccio 5. Crie uma calculadora com as 4 operaes da matemtica: adio, subtrao, diviso emultiplicao.

// Nome do arquivo: operacao.txt

Digite o primeiro nmero: Escolha um operador + , -, * , / Digite o segundo nmero:

function calculadora() {A=parseFloat(document.frm_teste.A.value)B=parseFloat(document.frm_teste.B.value)

operador=document.frm_teste.operador.valueswitch(operador) {case "+": alert("Resultado soma da igual a "+ (A + B)); break;case "-": alert("Resultado da subtrao igual a "+ (A - B)); break;

case "*": alert("Resultado da multiplicao igual a "+ (A * B)); break;case "/": alert("Resultado da diviso igual a "+ (A / B)); break;default: alert("Caractere diferente de + , -, * , /"); break;}}

Exerccio 6. Crie um programa que digite um caractere e diga se ele vogal maiscula, valor numrico,operador aritmtico ou outro caractere.



// Nome do programa: caracteres.txt

Escolha um caractere:

function Caracterex() {

caractere=document.frm_teste.caractere.valueswitch(caractere){case "A":case "E":

case "I":case "O":case "U": alert("Vogal maiscula"); break;

case "0":case "1":case "2":case "3":

case "4":case "5":case "6":case "7":case "8":

case "9":alert("Valor numrico");break;case "+":case "-":

case "*":case "/":alert("Operador Aritmtico");break;

default:alert("Voc digitou outro caractere")break;}}

Operador Ternrio

Diferente da instruo IF, o operador ternrio tem este nome porque necessita de trs operandos para seavaliado. Ooperador ternrio tem a seguinte forma:



condio1 ? expresso_verdadeira : espresso_falsa

Para avaliar o resultado da expresso primeiro a condio1 avaliada. Caso este resultado seja verdadeiroento resultado da expresso ser igual ao valor da expresso_verdadeira, no caso contrrioexpresso_falsa avaliada e se torna o resultado.

Exemplo 1:

variavel=50resultado=(variavel >= 0)&&(variavel = 0)&&(horas = 0)&&(minutos = 0)&&(segundos = 6)&&(media



de vezes. Digamos que deseje imprimir seu nome na tela dez vezes, por exemplo:

nome=prompt("Digite um nome:","")

document.write(nome+"")document.write(nome+"")document.write(nome+"")

document.write(nome+"")document.write(nome+"")document.write(nome+"")document.write(nome+"")document.write(nome+"")

document.write(nome+"")document.write(nome+"")

Quando voc rodar o programa, digite um nome na caixa de texto e clique no boto Ok ou d Enter.Quando o fizer, o programa imprimir o nome dez vezes na janela do formulrio, como mostrado a seguir:

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Bart Simpson

Ter muitas linhas em seu programa contendo instrues idnticas alonga-o alm do necessrio e desperdiamemria. Tambm mostra um estilo de programao ruim. Ao menos que voc deseje que seus amigosprogramadores riam de voc pelas costas, aprenda a substituir cdigos de programa redundante por loopsde programa.

A rotina do programa anterior pode ser extremamente fcil usando-se um loop For, e aqui est como:

nome=prompt("Digite um nome:","")

for(var i=1; i



}

Substitua a rotina do programa anterior por esta. Quando voc roda o programa, a sada ser idntica quela

do primeiro programa, mas agora o programa menor e sem cdigo redundante.

Exerccio 1. Crie uma estrutura de repetio que conte de 1 at 10.

// Nome do arquivo: de1a10.txtfor(var x=1; x



Resultado: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50,

Exerccio 5. Crie uma estrutura de repetio que conte de 110 at 120.

// Nome do arquivo: de110a120.txt

for(var x=110; x



document.write(x+", ")}

Resultado: -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,

Exerccio 9. Crie uma estrutura de repetio que conte de -25 at -15.

// Nome do arquivo: de25a15.txtfor(var x=-25; x



}

Comando while

O comando while utilizado quando se deseja repetir um comando, ou um grupo de comandos, enquanto

uma dada condio for verdadeira. Um exemplo muito simples o de escrever os nmeros inteiros entre 1 e10 na tela. Para isto podemos construir um programa muito simples para esta tarefa

i=1while(i



Resultado: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20,

Exerccio 3. Crie uma estrutura de repetio que imprima os nmeros mpares.

x=1

while(x < 21) {document.write(x+", ")

x=x + 2}

Resultado: 1, 3, 5, 7, 9, 11, 13, 15, 17, 19,

Exerccio 4. Crie uma estrutura de repetio que imprima os nmeros mltiplos de 5.

x=0

while(x



document.write(x+", ")

x=x + 8}

Resultado: 40, 48, 56, 64, 72, 80,

Exerccio 7. Crie uma estrutura de repetio que conte de 20 at 1 invertidamente.

x=20while(x >= 1) {

document.write(x+", ")

x=x - 1}

Resultado: 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1,

Exerccio 8. Crie uma estrutura de repetio que conte de -10 at + 10 (nmeros negativos e nmeros

positivos)

x=-10

while(x



Exerccio 10. Crie um conjunto dos nmeros mltiplos de 3 usando a estrutura de repetio while.

x=0

while(x = 4) {

document.write("vou assumir como um no")}

Loops invertidos

Assim como a instruo For e a instruo while, vistos anteriormente, o loop invertido, ao contrrio do

comando while, um bloco de comando que ser executado pelo menos uma vez e ser repetido at que acondio associada seja verdadeira.

H situaes em que importante se garantir a execuo de uma seqncia de comandos pelo menos uma

vez. Veja um exemplo simples:



mes=prompt("Digite o ms:")

mes=parseFloat(mes)while(mes12) {

document.write("Digitao errada! Digite de novo.")

mes=prompt("Digite o ms:")mes=parseFloat(mes)

}

Observe que, repetimos duas vezes o mesmo comando: "Digite o ms".

Podemos simplificar este comando somente uma vez, usando a estrutura de repetio do while .

do while o loop invertido de while.

Usando o exemplo anterior iremos substituir o comando while pelo comando do , observe:

do {

mes=prompt("Digite o ms:")

mes=parseFloat(mes)if(mes12){

document.write("Digitao errada! Digite de novo")}

} while (mes12)

Pode-se tambm utilizar este comando para execues sucessivas de um programa. Neste caso, comum sefazer uma pergunta do tipo "Deseja continuar (s/n)?" aps cada execuo.

Naturalmente, necessrio uma varivel do tipo caractere que receba a resposta do usurio e que ser

utilizada para controlar a estrutura de repetio. Teramos algo como:

// ...do {

/ * Seqncia de comandos do programa propriamente dito * /

Resp=prompt("Deseja continuar (s/n)?","")

} while(Resp.toUpperCase()!="N")

Vale lembrar que a funo toUpperCase() retorna o argumento no formato maisculo.

Observe mais um exemplo:

do {

num=prompt("Digite um nmero:","")num=parseFloat(num)



if (num



Escapando de um loop infinito utilizando ainstruobreak

H uma maneira de escapar de um loop infinito. Voc pode utilizar a instruobreak(que significa parar)

durante um loop para sair dele imediatamente e continuar a primeira instruo depois do loop. O exemploabaixo mostra o uso dessa instruo.

n=0total=0

while(true){

n=n + 1total=total + n

document.write(total+", ")

if(total >= 100){break

}}

Embora a instruo while esteja configurada como um loop infinito, a instruo if verifica o valor

correspondente. Se total maior que 100, sai do loop.

Quando este tipo de cdigo encontra uma instruobreak, ele pula o resto do loop e continua o script com aprimeira instruo depois da chave de fechamento no final do loop. Voc pode utiliza a instruobreakem

qualquer tipo de loop, seja infinita ou no.

Comando de controle do Loop

Break

O comandoBreakinterrompe o comando while ou For que est sendo executado e transfere o controle doprograma para o comando seguinte aquele que encerra o loop.

var i=0;

while (i



Continue

A declarao continue usada quando no se quer executar nenhum dos comandos daquele ponto at o fimdo bloco, mas queremos que o lao prossiga com a prxima interao. No caso do exemplo anterior, se i for

10, o lao se interrompe e o restante da matriz no ser preenchido. Em lugar disto, podemos

usarcontinueque no s salta o processo de atualizao, mas salta alm do calcula que iria provocar um erro.O seguinte cdigo permite que o lao continue, mas salta todos os nmeros mpares.

var k=0;

while(k



a=2document.write("Se a=2")

a++ document.write("O resultado de a++ "+ a)

a=2

document.write("Se a=2")++a

document.write("O resultado de ++a "+ a)

O resultado da execuo deste pequeno script o seguinte:

Se a=2

O resultado de a++ 3

Se a=2

O resultado de ++a 3

Da mesma forma so os operadores decrementais a-- e --a, s substituir + + por --; porm o resultado

1.

Os operadores incrementais so muito usados em estruturas de repeties, tais como o For e o while.Exemplo:

Exemplo 1:

x=1

while(x= 1){document.write(x+", ")

--x

}

Resultado: 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1,



Ateno programadores!!!

Em linguagens de programao tais como Java e o Javascript devemos ter cuidado na hora de usaroperadores incrementais.

Quando colocamos uma varivel e um outro operador de atribuio "=" na frente dos operadores

incrementais + + e -- h uma sutil diferena:

A=x++

diferente de

A= ++x

Imagine que varivel x seja igual a 5. Nos dois casos o resultado de A deveria ser 6 nas duas operaes.

Se:

Se:

A=5

e:

A=x++

O resultado :

A=5

e:

x=6

Se

A=5

e:

A=++x

O resultado :

A=6

e:

x=6

Esta sutileza sinttica pode gerar pequenos erros de programao.

Da mesma forma o operador decremental "--".

Se:

A=5

e:

A=x--

Se

A=5

e:

A=--x



O resultado :

A=5

e:

x=4

O resultado :

A=4

e:

x=4

Veja o exemplo na prtica:

var a=2;

document.write("Incrementos ")document.write("a=2 ")

document.write("a++="+ a++ + "");a=2

document.write("++a="+ ++a);

O resultado da execuo deste pequeno script o seguinte:

a=2

a++=2

++a=3

Operadores de atribuio

Operadores de atribuio (semelhante aos operadores aritmticos) so smbolos usados pelo computador +

, -, * , /, para efetuar clculos matemticos.

Veja tabela abaixo:

Nome Operador Utilizao Equivalente a

Adio += a+=b a=a + b

Subtrao -= a-=b a=a-b

Multiplicao * = a * =b a=a * b

Diviso /= a/=b a=a/b

Mdulo %= a%=b a=a%b

Concatenao += a+=b a=a+b

Veja os exemplos:

// Exemplo 1: a=2



b=3

a+=b // Resultado a=5, idntico a a=a + bdocument.write(a+"")

// Exemplo 2:

x=7

y=4x-=y // Resultado x=3, idntico a x=x-y

document.write(x+"")

// Exemplo 3:V1=8

V1*=2 // Resultado V1=16, idntico a V1=V1 * 2

document.write(V1+"")

// Exemplo 4:z=12

z/=3 // Resultado z=4, idntico a z=z/3

document.write(z+"")

// Exemplo 5:h=9

i=2h%=i // Resultado h=1, idntico a h=h%i

// Observao: O operador Mdulo retorna o resto da diviso

document.write(h+"")

// Exemplo 6:Variavel="texto 1 "

Variavel+="texto 2" // Resultado variavel="texto 1 texto 2" idntico a variavel=variavel."texto 2"

document.write(Variavel+"")

Array

Array um conjunto de dados semelhantes (Como nmeros, letras ou strings) armazenados com o mesmo

nome. Aos dados atribudo um nmero diferente no array.

Quando o array tem somente uma dimenso, chamado de vetor.

A maioria das linguagens de programao pode armazenar e manipular matrizes de uma ou mais dimenses.

As matrizes multidimensionais so muito usados em simulao cientfica e no processamento matemtico;entretanto uma matriz pode ser apenas uma tabela de preos mantidas na memria para acesso instantneo

por um programa de entrada de pedido.

Tipos de Arrays

Os arrays se dividem em dois grupos: vetores e matrizes.



Vetores so arrays com uma dimenso.

Matrizes so arrays com mais de uma dimenso.

Exemplos de vetores

1 - Na horizontal

sexo= Array("masculino", "feminino")

numero=Array(1, 2, 3, 4, 5, 6, 7, 8, 9)

vogais=Array("A", "E", "I", "O", "U")

Frutas=Array("Banana", "Laranja", "Ma", "Mamo")

Cursos=Array("Portugus", "Matemtica", "Fsica", "Qumica", "Biologia", "Ingls", "Geografia", "Histria")

estadocivil=Array("solteiro", "casado", "divorciado", "vivo")

2 - Na vertical

sexo=Array()

sexo[0]="masculino"

sexo[1]="feminino"

numero=Array()numero[0]=0

numero[1]=1

numero[2]=2numero[3]=3


numero[6]=6


numero[9]=9

vogais=Array()vogais[0]="A"

vogais[1]="E"

vogais[2]="I"



vogais[3]="O"vogais[4]="U"

Fruta=Array()

Fruta[0]="Banana"Fruta[1]="Laranja"

Fruta[2]="Ma"

Fruta[3]="Mamo"

Cursos=Array()Cursos[0]="Portugus"

Cursos[1]="Matemtica"

Cursos[2]="Fsica"Cursos[3]="Qumica"

Cursos[4]="Biologia"Cursos[5]="Ingls"

Cursos[6]="Geografia"

Cursos[7]="Histria"

estadocivil=Array()estadocivil[0]="solteiro"

estadocivil[1]="casado"

estadocivil[2]="divorciado"estadocivil[3]="vivo"

Usando vetores

Exerccio 1. Elabore um vetor vertical que contenha os dias da semana.

var lista= new Array();lista[0]="Segunda";

lista[1]="Tera";lista[2]="Quarta";

lista[3]="Quinta";

lista[4]="Sexta";lista[5]="Sbado";

lista[6]="Domingo";

document.write("Dias da semana: ");

for (var x=0; x



Exerccio 2. Elabore um vetor horizontal que contenha os meses do ano.

var mes=Array("Janeiro", "Fevereiro", "Maro", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro",

"Outubro", "Novembro", "Dezembro")

document.write("Mes do ano: ");

for(var x=0; x



Nome[2]="Cludio"

idade[2]=23Nome[3]="Susana"

idade[3]=27

Nome[4]="Marcos"idade[4]=16

Nome[5]="Celina"idade[5]=35

for(var i=0; i



if(bairros[i]=="Botafogo"){

document.write("Nome da rua: " + ruas[i])document.write(" Nome do bairro: " + bairros[i]+"")

}

}

Exerccio 5. Faa um programa para imprimir o signo do zodaco correspondente a uma data qualquer (dia /ms).

A tabela a seguir mostra o ltimo dia de cada ms e o signo correspondente:

Mes ltimo dia Signo

01 20 Capricrnio

02 19 Aqurio

03 20 Peixes

04 20 ries

05 20 Touro

06 20 Gmeos

07 21 Cncer

08 22 Leo

09 22 Virgem

10 22 Libra

11 21 Escorpio

12 21 Sagitrio

Importante: Armazene o horscopo em uma array.

mes=Array()

dia=Array()signo=Array()

mes[0]=1dia[0]=20

signo[0]="Capricrnio"

mes[1]=2dia[1]=19

signo[1]="Aqurio"mes[2]=3

dia[2]=20

signo[2]="Peixes"mes[3]=4

dia[3]=20signo[3]="ries"

mes[4]=5



dia[4]=20signo[4]="Touro"

mes[5]=6

dia[5]=20signo[5]="Gmeos"

mes[6]=7dia[6]=21

signo[6]="Cncer"

mes[7]=8dia[7]=22

signo[7]="Leo"mes[8]=9

dia[8]=22

signo[8]="Virgem"mes[9]=10

dia[9]=22signo[9]="Libra"

mes[10]=11

dia[10]=21signo[10]="Escorpio"

mes[11]=12dia[11]=21

signo[11]="Sagitrio"

document.write("Tabela de signos:")

for(x=1; x



planeta=Array()

luas=Array()

anos=Array()distancia=Array()

planeta[0]="Mercrio"

luas[0]=0

anos[0]=0.24distancia[0]=58

planeta[1]="Vnus"luas[1]=0

anos[1]=0.625

distancia[1]=108 planeta[2]="Terra"

luas[2]=1anos[2]=1

distancia[2]=150

planeta[3]="Marte"luas[3]=2

anos[3]=1.91

distancia[3]=228

document.write("Planeta luas anos distncia")

for(indice=0; indice



A array multidimensional mostrado acima pode ser alocado de forma dinmica. Veja a tabela abaixo:

Coluna 1 Coluna 2 Coluna 3

Linha 1 a[0][0] a[0][1] a[0][2]

Linha 2 a[1][0] a[1][1] a[1][2]

Linha 3 a[2][0] a[2][1] a[2][2]

Linha 4 a[3][0] a[3][1] a[3][2]

Existem 4 formas de transformar uma tabela em matriz, veja o exemplo:

Cada aluno tem a sua nota, veja a tabela abaixo:

Notas Nota 1 Nota 2

Aluno01 7 7.5

Aluno02 6 5.5

Aluno03 7 8

Aluno04 3 7.5

Aluno05 4 4.5

Existem vrias formas de transformar tabelas em matrizes. Vejamos o exemplo 01:

No 1 exemplo vamos transformar uma matriz de duas colunas em 2 vetores, veja:

Nota1=Array()

Nota2=Array()Nota1[0]=7

Nota2[0]=7.5

Nota1[1]=6Nota2[1]=5.5

Nota1[2]=7

Nota2[2]=8Nota1[3]=3

Nota2[3]=7.5Nota1[4]=4

Nota2[4]=4.5

/* O exemplo acima no uma matriz, mas sim, dois vetores vistos na lio anterior. Podemos substituir

matrizes por vetores. Do exemplo 2 em diante, os vetores so substitudos por matrizes. */

// Para saber quanto o aluno 04 tirou na 2 nota fcil:

document.write(Nota2[4-1])// Observe que o aluno 04 3 (4-1) porque as notas iniciam com 0 e no com 1



Exemplo 02:

Do exemplo 2 em diante transformamos a tabela em matriz.

Aluno01=0Aluno02=1

Aluno03=2

Aluno04=3Aluno05=4

Nota1=0

Nota2=1

// Para no dar erros eu criei 2 Arrays e no 4 Arrays diferentesClasse=Array(Array(),Array())

Classe[Nota1][Aluno01]=7Classe[Nota2][Aluno01]=7.5

Classe[Nota1][Aluno02]=6Classe[Nota2][Aluno02]=5.5

Classe[Nota1][Aluno03]=7

Classe[Nota2][Aluno03]=8Classe[Nota1][Aluno04]=3

Classe[Nota2][Aluno04]=7.5Classe[Nota1][Aluno05]=4

Classe[Nota2][Aluno05]=4.5

// Para saber quanto o aluno 05 tirou na 1 nota fcil:

for(var y=0; y



Classe[0][3]=3Classe[1][3]=7.5

Classe[0][4]=4

Classe[1][4]=4.5

// Para saber quanto o aluno 02 tirou na 2 nota fcil:for(var y=0; y



6 Celina 35

Com base nesta informao, diga o que ser impresso pelas instrues abaixo:

for(var i=0; i



Matriz[idade][0]=19

Matriz[nome][1]="Pedro"

Matriz[idade][1]=32Matriz[nome][2]="Cludio"

Matriz[idade][2]=23Matriz[nome][3]="Susana"

Matriz[idade][3]=27

Matriz[nome][4]="Marcos"Matriz[idade][4]=16

Matriz[nome][5]="Celina"

Matriz[idade][5]=35

for(var i=0; i



Array("Pedro", 32),

Array("Cludio", 23),Array("Susana", 16),

Array("Marcos", 16),

Array("Celina", 35))

for(var i=0;i



}

document.write("Ruas do bairro de Botafogo")

for(var i=0; i



Array(9, 22, "Virgem"),Array(10, 22, "Libra"),

Array(11, 21, "Escorpio"),

Array(12, 21, "Sagitrio"))

mes=0dia=1

signos=2

document.write("Tabela de signos")

for(var x=0; x



Matriz[distancia][1]=108Matriz[Planeta][2]="Terra"

Matriz[luas][2]=1Matriz[anos][2]=1

Matriz[distancia][2]=150

Matriz[Planeta][3]="Marte"Matriz[luas][3]=2

Matriz[anos][3]=1.91Matriz[distancia][3]=228

document.write("Planeta luas anos distncia")

for(var indice=0; indice



document.write(a * b/c)

}

// Programa principal

Calcule(4, 3, 2)

O exemplo acima a funo no retornou valores.

Em um nico programa pode ser armazenado vrias funes diferentes, por exemplo:

// Funes

function Adicao(a, b){c=a + b

return c

}

function Subtracao(a, b) {return a-b

}

function Multiplicacao(a, b) {

c=a * breturn c

}

function Divisao(a, b){

return a/b}


document.write("2 + 8=" + Adicao(2, 8)+"")document.write("7-3=" + Subtracao(7, 3)+"")

document.write("3 * 4=" + Multiplicacao(3,4)+"")

document.write("8/2=" + Divisao(8, 2)+"")

Lista de exerccios

Exerccio 1. Crie uma funo que calcule a soma de dois nmeros

function soma(x, y) {

var sum=x + y

return sum}



//Programa principal

document.write("A soma de 5 e 4 " + soma(5, 4))

Exerccio 2. Crie uma funo que calcule o cubo de um nmero.

function cubo(x){

var cubocubo=x * x * x

return cubo

}

// Programa principaldocument.write("O cubo de 8 igual a " + cubo(8))

Exerccio 3. Crie uma funo que calcule a rea do retngulo

function calcArea(largura, altura){

a=largura * alturareturn a

}

// Programa principallargura=4

altura=8

document.write(calcArea(largura, altura))

Exerccio 4. Crie uma funo que calcule nmeros fatoriais

function fatorial(num){

res=1for(var k=num; k>=1; k--){

res=res * k

}return res

}


for(var k=1; k



document.write(k, "!=",fatorial(k)+"")

}

Variveis nulas (NULL)

Afinal o que Null?

1 - Null um valor que indica dados ausentes ou desconhecidos em um campo

2 - nulo

3 - vazio

4 - sem valor

Assim como existe variveis numricas (var_1=9), variveis strings (var_2="Texto") e variveis booleanas

(var_3=true) existem as variveis nulas (var_4=null).

Ateno: encontrar variveis nulas num cdigo fonte so raros, mas de vez enquanto aparecem, os exemplosabaixo so simplesmente demonstraes.

Quando voc que limpar uma varivel em fao o seguinte:

1 exemplo:

Var_1=9

Var_2="Texto"Var_3=true

//Limpando as variveis

Var_1=null

Var_2=nullVar_3=null

2 exemplo:

Nome=nullSobrenome=null



if(Nome==null) {Nome="Marcos"

}

if(Sobrenome==null){

Sobrenome="Aurelio"}

document.write(Nome + " " + Sobrenome)

3 exemplo:

a=10

b=null

c=5

resp=0if(a==null){

resp=b + c} else if(b==null) {

resp=a + c

} else if(c==null) {resp=a + b

} else {

resp=a + b + c}

document.write(resp)

Trabalhando com formulrios

Formulrio um documento estruturado com espao reservado para a entrada de informaes e, em geral,

contendo alguns cdigos especiais. Em algumas aplicaes (especialmente banco de dados), formulrio

uma caixa ou janela ou outro elemento de apresentao independente com reas predefinidas para a entradaou a alterao de informaes. Um formulrio um "filtro" visual para os dados bsicos que esto sendo

apresentados, em geral oferecendo as vantagens de uma melhor organizao de dados e maior facilidade de

visualizao.

Quem utiliza os formulrios so as seguintes linguagens de programao:

Visual Basic, Delphi, Java, Html, Javascript e outros.

Outras linguagens de programao antigas que usam o sistema Dos tais como Pascal, Clipper e outros no



usam formulrios.

Se ns fizermos uma comparao entre as linguagens de programao mais usadas encontraremos osseguintes objetos.

1) Formulrio

2) Boto de comando

2.a) Boto fechar:

2.b) Boto limpar:

3) Caixa de texto:

4) Rtulo (Label):

5) Senha (Password):

6) rea de texto:

7) Boto de opo:



8) Caixa de seleo:

9) Caixa de combos:

10) Caixa de listagem

11) Caixas de dilogo

12) Hiperlinks



13) Imagens

14) Barra de menu

15) Abrindo uma nova janela

Iremos estudar cada um com mais detalhes:

1) Formulrio:

Para sistamas via web tais como: o Html, o Javascript e o vbscript. Para criar um formulrio, voc utiliza a

tag . Assim como as tabelas, que usam o comando , o formulrio usa o

comando ... para definir a abertura e o fechamento do mesmo.

A forma geral do comando a seguinte:

...



Seus parmetros so:

Parmetros Definio

methodEsse parmetro especifica o metodo que ser usado para enviar o formulrio, usa os

parmetros get e post.

action O parmetro action especifica a URL que ser processado.

A tag usa dois parmetros action e method, veja abaixo:

METHOD o parmetro que define o metodo de envio de formulrio para o servidor onde est hospedadoseu site. O parmetro method s pode ter dois valores: "get" e "post"; mas o method="post" o mais

usado, acostume a utilizar o post.

ACTION o parmetro que define o endereo (www.servidor.com.br) e a pgina (bancodedados.php)

onde os dados do formulrio sero enviados.

Para enviar os dados do formulrio para o nosso servidor utilizamos o boto Submit:

Que iremos ver logo em seguida.

Observao: o boto enviar, o boto upload e o boto limpar s existem em Html, Javascript, PHP e ASP.

a) Boto Enviar (Submit)

Para enviarmos os dados do formulrio para o servidor onde est o banco de dados, devemos criar o boto

Submit.

b) Boto Limpar (Reset)

Se voc inserir novas informaes para os campos do formulrio, ter de apagar e digitar o texto nos

campos de digitao. Por meio do boto Limpar tudo, voc pode apagar e restabelecer o valor padro para

todos os campos do formulrio de uma nica vez.

Veja o comando limpar abaixo:

Veja o exemplo com os comandos enviar (Submit) e apagar (Reset) dentro de um formulrio:



Digite seu nome:

c) Fazendo um Upload de seus arquivos

Se voc quizer enviar a sua foto para o seu lbum de fotografia, este comando prprio para isto. Este

comando envia para o servidor qualquer tipo de arquivo.

Sintaxe:

Seus parmetros so:

Parmetros Definio

name Define o nome deste comando

Clicando no boto voc abre uma janela e nesta janela voc anexa seu arquivo na pgina de seu navegador.No campo ao lado do boto est o caminho do arquivo dentro de seu computador, exemplo:

c:\Pasta1\Histria\Feudalismo.doc

Exemplo:

Envie sua foto aqui:

2) Boto de comando



Se no quero enviar os dados do formulrio para o servidor mas que os dados fiquem no navegador usamos

o boto de comando (button), veja:

Seus parmetros so:

Parmetros Definio

name Define o nome do boto de comando

value Imprime um texto no boto

onclick Executa uma funo quando o usurio der um clique no boto

O boto de comando, que tambm um campo input e usa trs parmetros (type, value e onclick), usa

tambm a linguagem Javascript.

Para inserir um boto de comando use o parmetro input type="button", seguido do valor VALUE que emnosso caso value="Clique aqui!" pode ser alterado por um outro valor. O evento onclick envia os dados do

formulrio para a linguagem Javascript. Veja um exemplo prtico.

Exemplo

function meunome(formulario) {

alert("Meu nome :"+formulario.campo.value)}

Digite seu nome:

Iremos discutir o evento onclick, o comando this.form e a funo meu nome posteriormente.

3) Caixa de texto

Este o comando mais usado para digitao de um campo de texto:

Seus parmetros so:



Parmetros Definio

name Define o nome da caixa de texto

value Escreve um valor na caixa de text

size Define o tamanho da caixa de texto

maxlength Permite um limite de digitao de n caracteres

Veja o exemplo abaixo:

Campo 1:

Campo 2:

Campo 3:



sendo digitados.

Seus parmetros so:

Parmetros Definio

name Define o nome do password

size Define o tamanho do password

maxlength Permite um limite de digitao de n caracteres

Exemplo:

Digite uma senha:

Resultado:

5) Texto oculto (Hidden)

Os campos ocultos no so apresentados no formulrio. Eles ficam invisveis na apresentao do navegador.

Se algum decidir consultar o cdigo fonte Html da sua pgina este campo sero apresentados.

Seus parmetros so:

Parmetros Definio

name Define o nome do texto oculto

value Valor do texto oculto

Exemplo:

6) rea de texto (Textarea)

Define uma caixa de digitao onde o usurio pode digitar livremente um texto com vrias linhas.



[texto padro]

Seus parmetros so:

Parmetros Definio

name Define o nome da rea de texto.

rows Especifica a altura, ou seja, a quantidade de linhas que a caixa deve ter.

cols Especifica a largura, ou seja, a quantidade de colunas que a caixa deve ter.

Exemplo:

Digite seus comentrios

Resultado:

Cdigo fonte:

Coloque um limite de digitao de n caracteres igual a maxlength da caixa de texto:

Untitled Document

function updateCharCount(textareaId, spanId, maxSize) {textarea = document.getElementById(textareaId);if (textarea == null) {

return;}if (textarea.value.length > maxSize) {

textarea.value = textarea.value.substring(0, maxSize);}document.getElementById(spanId).innerHTML = maxSize - textarea.value.length;

}



Caracteres restantes: 2048

Resultado:

7) Boto de opo (Radio):

Os botes de opo indicam uma lista de tens, dos quais apenas um pode ser escolhido. Se um dos botesde opo for selecionado, todos os demais sero desativados.

Seus parmetros so:

Parmetros Definio

name Define o nome do boto

value Valor do boto de opo

checked Esse parmetro indica que o tem est pr-selecionado

Exemplo:

Escolha a sua corVerdeAmarelo

Azul

Resultado:



8) Caixa de seleo (checkbox)

A caixa de seleo parece com o boto de opo, vista anteriormente, mas tem uma diferena inportante.

As caixas de seleo permitem a seleo de vrios tens de uma lista. Cada caixa de verificao pode estarativada o desativada (o padro desativado).

Seus parmetros so:

Parmetros Definio

name Define o nome do boto

value valor do boto

checked Esse parmetro indica que o tem est pr-selecionado

Exemplo:

Negrito

ItlicoSublinhado

Resultado:

9) caixa de combos (select)

Este elemento corresponnde a uma caixa de escolha, na qual o usurio pode selecionar um conjunto pr-determinado de tens.

Sua sintaxe diferente do campo descrito anteriormente, veja:



Opo da seleo

Selees adicionais

Seus parmetros so:

Parmetros Definio

name Define o nome desta caixa de combos

option Define uma lista de palavras que sero selecionadas numa lista de opes

select Este parmetro indica que o tem est pr-selecionado

value Valor do tem selecionado

Exemplo:

Estado onde mora

Rio de JaneiroSo PauloMinas Gerais

Espirito SantoNenhuma das anteriores

Resultado:

10) Caixa de listagem (Select)

A caixa de listagem semelhante a caixa de combos. Este comando exibe uma lista de tens que podem ser

selecionados pelo usurio.



Tem a mesma sintaxe da caixa de combos, s aparece quando o parmetro SIZE for especificado.

Seus parmetros so:

Parmetros Definio

name Define o nome da caixa de listagem

sizeParmetro que designa o nmero de escolhas a mostrar. Se no for preenchido, os temssurgem como caixa de combos, caso contrrio, surgem dentro da caixa de listagem com o

nmero de elementos visveis colocado em size.

option Define uma lista de palavras que sero selecionadas numa lista de opo.

select Este parmetro indica que o tem est pr-selecionado

value valor do tem selecionado

multiple Esse parmetro opcional indica que podem ser escolhidos mltiplos tens da lista

Exemplo

Instrumento musical:

VioloGuitarraBaixo

TecladoBateriaSax

Resultado:

Obs: para selecionar dois ou mais itens da lista pressione shift ou ctrl e selecione o item com o

mouse.

O parmetro value:

Tanto a caixa de combos quanto a caixa de listagem, eu posso usar ou omitir o parmetro value, por

exemplo:



Item 1Item 2

Item 3

11) Caixas de dilogos:

Caixa de dilogo uma janela que um programa abre na tela para solicitar algum tipo de reposta do usurio.

So 3 tipos de caisas de dilogos:

a) Caixa para aletar (alert)

b) Caixa para escrever (prompt)

c) Caixa para confirmar (confirm)

Todas estas caixas esto contidos na linguagem Javascript.

11. a) Caixa para aletar (alert)

Este tipo de caixa avisa ao usurio se alguma coisa est dando errado, para depois o mesmo consertar.

Sua sintaxe :

alert("texto a ser exibido")

Exemplo:

alert("Bom dia!")



11.b) Caixa para escrever (prompt)

Esta caixa insere algum texto dentro da pgina html.

Sua sintaxe :

Sada_de_texto=prompt("Texto a ser exibido","Texto a ser escrito")

Exemplo:

var nome=prompt("como se chama","");document.write("Ol!meu nome "+nome);

11.c) Caixa para confirmar (confirm)

Quando executamos algum procedimento aparece uma janela pedindo se deseja confirmar esteprocedimento. A caixa para confirmar retorna os valores true (confirmado) ou false (no confirmado).

Sua sintaxe :

Verdadeir_ou_falso=confirm("Pergunta a ser feita.");

Exemplo:



if(confirm("Tem certeza de excluir o arquivo?"))

document.write("Documento excludo");elsedocument.write("Documento no foi excludo");

Ateno:

Podemos usar outros tens do Html e transform-los em tens do formulrio, tais como:

Alterando a imagem atravs de um boto;Transformando um link em um boto de comando e

Criar uma barra de menu dentro da pgina html.

Isto material a mais para vocs estudarem.

12) Hiperlinks

Nas pginas web, um hiperlink um boto ou trecho destacado do texto que, ao ser selecionado, remete o

leitor a uma outra pgina.

Veja um exemplo de link:

Pgina 1

Podemos transformar um hiperlink em um boto de comando Javascript.

Basta inserir dentro do atributo href o comando - "javascript:" + (mais) o comando de execuo, exemplo:

Boto de comando

Veja um exemplo de boto usando um link:

Exemplo 1



Boto 1

Boto 2

13) Imagens

Imagem a representao grfica ou fotogrfica de pessoas ou objetos, com um conjunto de valores de

brilho e cor em pixel, armazenadas num arquivo bitmap.

Observao:

Tambm podemos usar o evento onclick em substituio ao href="javascript:", a diferena que onclickno usa a esteno "javascript:" em seu atributo, ex:

Para inserir uma imagem s colocar este comando:

Onde o parmetro src o caminho onde est a imagem no computador ou servidor.

No Javascript, o objeto imagem usa os seguintes eventos:

Eventos Descrio

onmouseover Executa um comando quando passamos o mouse sobre o objeto selecionado.

onmouseout Executa um comando quando o mouse est fora do objeto selecionado.

Exemplo:

Observemos esta imagem:

Quando passamos o mouse sobre esta imagem, ela se altera, veja:



Quando tiramos o mouse sobre a imagem, ela volta ao normal:

Para testar use os seguintes comandos:

Onde:

primeiraimagem= segundaimagem=

14) Barra de menu:

A barra de menu uma faixa retangular apresentada em geral na parte superior da janela de um programaaplicativo, ou a esquerda numa pgina web, na qual o usurio pode selecionar um entre os vrios menusdisponveis. Os nomes dos menus disponveis so apresentados na barra de menus. A seleo de um desses

nomes com o teclado ou o mouse faz com que a lista de opes do menu correspondente seja mostrada natela.



15) Abrindo uma nova Janela:

Para a web, essas janelas so chamadas de Pop-up ou janela instantnea; estas janelas podem ser exibidas aqualquer momento na tela.

Existem quatro tipos de pop-up:

Pop-up externo;

Pop-up interno;Frames eJanela Modal .

Pop-up externo

Este tipo de pop-up fica externamente ao navegador, muitos usurios acham estas janelinhas chatas de fechare muitos navegadores bloqueiam estas janelas. Eles so escritos em Javascript.

Open(): O mtodo open [abrir], que no deve ser confundido com o mtido document.open(), usado para

abrir uma nova janela. Os argumentos padro que este mtodo assume so:

msgWindow=window.open("", "Hello", "toolbar=no, width=200, height=100");

Observe o uso da cadeia "toolbar=no, width=200, height=100" para definir os parmetos da janela. Estesparmetros podem ser definidos somente na abertura de novas janelas e no afeta a janela pai, ou a janelamais alta. A lista completa de argumentos de propriedades vlidos :

toolbar = yes|no [Barra de ferramentas]

location = yes|no [Localizao]

diretories = yes|no [Diretrios]

status = yes|no [Status]

menubar = yes|no [Barra de menus]

scrollbar = yes|no [Barra de rolagem]

resizable = yes|no [Tamanho altervel]

windth= pixels [Largura em pixels]

height = pixels [altura em pixels]

left = pixels [posiciona da esquerda para direita]

top = pixels [posiciona de cima para baixo]



Veja um exemplo deste tipo de janela:

Funciona bem no Internet Explorer

function makeArray(n){this.length=n;

for(var i=0; i



ver.document.open()// ver.document.write(document.forms[0].elements[0].value)ver.document.write(form1.texto.value)

ver.document.write("") ver.document.close()}

Insira o texto aqui

Veja outro exemplo de Pop-up que abre um documento Html:

Empresa x Empresa y

Pop-up interno

Este tipo de pop-up fica internamente ao navegador, muitos browsers no bloqueiam este tipo de janela. Ele

escrito parte em CSS e parte em Dhtml.

Veja exemplo:



Pop-up no bloquevel

#popup {position: absolute;

top: 30%;left: 30%;width: 300px;

height: 150px;padding: 20px 20px 20px;border-width: 2px;border-style: solid;

background: #ffffa0;display: none;}

function fechar() {document.getElementById('popup').style.display='none';}

function abrir() {document.getElementById('popup').style.display='block';setTimeout("fechar()",3000);}

Esse e um exemplo de popup utilizando DIV. Dessa maneira esse pop-up no ser bloqueado.

[X]

Abrir POPUP

Fechar POPUP

Outra forma de usar o CSS junto com o Dhtml aparecer e desaparecer texto, veja o cdigo:

Aparecer e desaparecer texto

Documents

Apostila Javascript