Javascript: Introdução à linguagem

14/8/2014
Apostila Javascript
Javascript
Caso sensitivo
Ateno
Na linguagem Javascript voc deve prestar muita ateno na hora de digitar seu cdigo fonte, pois, o
Javascript 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 letras
maisculas 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
http://www.webteste123.com/curso_web/informatica/web/apostilas/programacao/javascript/javascript.html
1/154
14/8/2014
Apostila Javascript
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 do
Javascript, 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 PRIMEIRO

PROGRAMA
Para comear vamos analisar um exemplo bem simples - abra um editor de texto comum e digite o cdigo
que est escrito abaixo:
<html>
<head>
<title>Meu primeiro programa </title>
</head>
<body>
<script language="javascript">
docoment.write("Esta minha primeira pgina")
</script>
</body>
</html>
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, e
salv-lo com a extenso .html ou .htm, exemplo:
programa.html
texto.html
arquivo01.html
2/154
14/8/2014
Apostila Javascript
Corpo do programa
Basicamente, a sintaxe do corpo do programa consiste em:
<script>
// Contedo
</script>
OU:
// Contedo
</script>
Carregando um arquivo externo

No Javascript, h a possibilidade de colocar mais de 1 arquivo externo ao documento. Ao invs de
trabalharmos 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:
<html>
<head>
<title>Arquivo externo</title>
</head>
<body>
<script language="javascript" src="teste.js">
</script>
</body>
</html>
Salve este arquivo com arquivoesterno.html.

3/154
14/8/2014
Apostila Javascript
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 <script> e
</script> 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.
4/154
14/8/2014
Apostila Javascript
Exemplo:
//Comentrio de uma linha
//Exemplo 1
//Exemplo 2
//Exemplo 3
</script>
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
*/
</script>
Usando aspas dentro de aspas

5/154
14/8/2014
Apostila Javascript
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.
<script>
document.write("<img src='Teste.gif'>")
</script>
Outro exemplo:
<input Type="button" name="teste" value="Clique Aqui" onclick="alert('Exemplo de Aspas')">
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<br>")
document.write("A soma de 5 + 4 igual a 9 <br>")
document.write("6 dividido por 3 igual a 2 <br>")
</script>
Editando um texto
Para editar um texto externamente basta usar o comando leia:
<html>
<head>
<title>Idade</title>
</head>
<body>
<form name="frm_teste">
Digite seu nome:<input type="text" name="nome"><br>
Digite sua idade:<input type="text" name="idade"><br />
<input type="button" value="Resultado" onClick="idadex()">
</form>
function idadex() {
var nome = document.frm_teste.nome.value
var idade = document.frm_teste.idade.value
alert("meu nome " + nome + " e tenho " + idade + " anos.")
}
</script>
</body>
6/154
14/8/2014
Apostila Javascript
</html>
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("<pre>")
document.write("\tO livro: \"Manual Prtico do ")
document.write("Programador\". \nEst nas livrarias ")
document.write("e \\ ou jornaleiros. ")
document.write("</pre>")
</script>
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 condies
de 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
7/154
14/8/2014
Apostila Javascript
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
8/154
14/8/2014
Apostila Javascript
-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: >, <, >= , <= , ==, != ;
Operadores booleanos: and, or, not.
Este tipo de varivel, quando armazenado na memria do computador, ocupa 1 byte, pois possui apenas
duas possibilidades de representao: true ou false.
Exemplo:
Expresso
Resultado
Significado
teste=true
verdadeiro
x=false
falso
y=true
verdadeiro
a=4<2
a=false
falso
b=8>3
b=true
verdadeiro
c=(3>2)&&(5<4)
c=false
falso
d=(3>4)||(5<4)
d=true
verdadeiro
Comando de atribuio
O primeiro operador que voc deve conhecer o de atribuio "=". Ele atribui o contedo da expresso
sua direita para a varivel do seu lado esquerdo.
x=30
y=10/2 + 6
z=true
a="texto"
9/154
14/8/2014
Apostila Javascript
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
10/154
14/8/2014
Apostila Javascript
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".
11/154
14/8/2014
Apostila Javascript
// Exemplo 1:
Variavel="Texto1 " + "Texto2" + "<br>"
document.write(Variavel)
// Exemplo 2:
String1="Isto "
String2="um texto"
String3="<br>"
String4=String1 + String2 + String3
document.write(String4)
// Exemplo 3
Nome="Jos "
Sobrenome="Antnio"
document.write("Meu nome : " + Nome + Sobrenome)
</script>
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 funes
matemticas.
Se no convertermos os valores strings para numricas impossibilita de efetuarmos clculos matemticos, por
exemplo:
A="7"
B="9"
C=5
document.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: <input type="text" name="Altura">
Largura: <input type="text" name="Largura">
<input type="button" value="Resultado" onClick="Areax()">
</form>
function Areax() {
12/154
14/8/2014
Apostila Javascript
Altura=document.frm_teste.Altura.value
Largura=document.frm_teste.Largura.value
Area= parseFloat(Altura) + parseFloat(Largura)/2
alert(Area)
}
</script>
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 valor
numrico.
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:
<html>
<head>
<title>Calculadora</title>
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;
}
</script>
</head>
<body>
<form>
<input type="text" name="campo1">
<input type="text" name="campo2"><br>
<input type="button" value="+" onClick="calcula(this.form,0)">
<input type="button" value="-" onClick="calcula(this.form,1)">
<input type="button" value="*" onClick="calcula(this.form,2)">
13/154
14/8/2014
Apostila Javascript
<input type="button" value="/" onClick="calcula(this.form,3)">

<input type="reset" value="Limpar"><br>
Resultado: <input type="text" name="resultado">
</form>
</body>
</html>
Exerccio 2: Use esta outra calculadora
<html>
<head>
<title>Calculadora</title>
function processa1() {
d = eval(document.calculo.campo1.value)+
eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
d = eval(document.calculo.campo1.value)*
eval(document.calculo.campo2.value)*
}
</script>
</head>
<body>
<form name="calculo">
Campo1: <input type="text" name="campo1" value="" size="10" maxlength="10">
Campo3: <input type="text" name="campo3" value="" size="10" maxlength="10"><br>
<input type="button" value="Soma" onClick="processa1()">
<input type="button" value="Multiplica" onClick="processa2()"><br>
Resultado: <input type="text" name="campo4" value="" size="10" maxlength="10">
</form>
</body>
</html>
Operadores
Operadores so smbolos que representa uma operao matemtica; so trs tipos de operadores:
14/154
14/8/2014
Apostila Javascript
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
3*6
18
10/3
3.333333
10 % 3
Exemplo 2: Efetue clculos aritmticos usando parnteses

Operao
Resultado
4*2+1
4 * (2 + 1)
12
3 + 5 * 4-2
21
(3 + 5) * (4-2)
16
15/154
14/8/2014
Apostila Javascript
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

<input type="text" name="n1"> +
<input type="text" name="n4">
<input type="button" value="Resultado" onClick="Somax()">
</form>
function Somax() {
n1=document.frm_teste.n1.value
soma=parseFloat(n1) + parseFloat(n2) + parseFloat(n3) + parseFloat(n4)
alert(soma)
}
</script>
Exerccio 2. Faa um programa que receba trs notas, calcule e mostre a mdia aritmtica entre elas.
// Nome do arquivo: triangulo.txt

Base: <input type="text" name="base">
Altura: <input type="text" name="altura">
<input type="button" value="Resultado" onClick="Areax()">
</form>
function Areax() {
16/154
14/8/2014
Apostila Javascript
base= parseFloat(document.frm_teste.base.value)
altura=parseFloat(document.frm_teste.altura.value)
area=(base * altura)/2
alert(area)
}
</script>
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: <input type="text" name="sal">
<input type="button" value="Resultado" onClick="Salariox()">
</form>
function Salariox() {
sal=parseFloat(document.frm_teste.sal.value)
aumento=sal * 25/100
novosal=sal + aumento
alert(novosal)
}
</script>
Exerccio 5. Crie um programa que d o resultado da soma, do produto e da diferena.
// Nome do arquivo: resultado.txt<br>

Entre com dois nmeros: <br>
A: <input type="text" name="A">
B: <input type="text" name="B">
<input type="button" value="Resultado" onClick="resultadox()" >
</form>
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))
}
17/154
14/8/2014
Apostila Javascript
</script>
Exerccio 6. Crie um programa que d o quadrado de um nmero
Digite um numero: <input type="text" name="n">
<input type="button" value="Resultado" onClick="Quadradox()">
</form>
function Quadradox() {
n=parseFloat(document.frm_teste.n.value)
Quadrado=n*n
alert("O quadrado de "+ n+ " e "+ Quadrado)
}
</script>
Operadores Relacionais
Operadores relacionais so operadores que permitem ao programador comparar dois (ou mais) valores ou
expresses.
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<23
>
Maior que
41>39
<=
Menor ou igual a
5 <= 6
>=
Maior ou igual a
10 >= 10
Veja os exemplos abaixo:

Exemplo 1. Veja o seguinte resultado
Operao
Resultado
23<3
false (falso)
41>39
true (verdadeiro)
6 <= 5
false (falso)
10 >= 10
true (verdadeiro)
18/154
14/8/2014
Apostila Javascript
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)
17==(12/2 + 8-5)
23==(8 + 15)
17==6 + 8-5
23==23
17==9
true
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
19/154
14/8/2014
Apostila Javascript
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 operadores
booleanos 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 de
escrever este tipo de cdigo. Por exemplo:
(x>2)&&(y==9)
Leia-se: x maior que 2 E y igual a 9
(x<3)||(x>8)
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:

20/154
14/8/2014
Apostila Javascript
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 uma
expresso Or.
Um XOR (OU exclusivo) verdadeiro se somente uma das entradas for verdadeira e no ambas, veja o
quadro abaixo:
(a==true)^(b==true) o resultado false (falso)
21/154
14/8/2014
Apostila Javascript
(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 viceversa, 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 os
operadores 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)
22/154
14/8/2014
Apostila Javascript
(2==2)^(5==5)
false (falso)
(4>5)^(4<5)
true (verdadeiro)
! true
false (falso)
! (9<1)||(9<1)
true (verdadeiro)
Exemplo 2. Se a=100, b=200 e c=300, resolva:

Expresso
Resultado
b>a && c>b
true (verdadeiro)
b>a && 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)/2<100)
Soluo
(4 * (3 + 5))/2>100 || (5 * (3 + 4)/2<100)
(4 * 8)/2>100 || (5 * 7/2<100)
32/2>100 || (35/2<100)
16>100 || 17.5<100
false || false
false
Hierarquia dos operadores

Observe a lista de prioridades abaixo:
Em 1 lugar esto as variveis. Exemplo a=4 e b=8 => c=a + b
Em 2 lugar esto as propriedades do objeto. Exemplo: Nota1.value=7 e Nota2.value=5 => media=
(Nota1.value + Nota2.value)/2
Em 3 lugar esto os parnteses. Exemplo: 3 * (4 + 1) * 2
Em 4 lugar esto as funes. Exemplo: raiz quadrada, seno, cosseno, tangente, logaritmos e outros.
Em 5 lugar est a potenciao. Exemplo: 3^4 + 2
Em 6 lugar esto multiplicao ( * ), diviso (/), e mdulo (%), na ordem em que aparecerem da
esquerda para direita. Exemplo: 7 + 4/2 * 6/3-8
Em 7 lugar esto adio ( + ) e subtrao (-), na ordem em que aparecerem da esquerda para
direita. Exemplo: 5 + 4-7-8 + 3-2 + 9
Em 8 lugar esto os operadores relacionais, maior que (>), menor que (<), maior ou igual ( >= ),
23/154
14/8/2014
Apostila Javascript
menor ou igual ( <= ), igual (=), diferente ( <> )

Em 9 lugar est o operador booleano NOT. Exemplo: (4>5) Or Not(3>6)
Em 10 lugar esto os operadores booleanos AND, OR e XOR. Exemplo: (3<7)&&(8>7)
Resumindo
Nvel de prioridade Operadores
Ordem
Mais alta:
da esquerda para a direita
Variveis
Propriedades do Objeto da esquerda para a direita
Parnteses
Funes
Potenciao
* , /, %
+,-
>, <, >= , <= , ==, !=
&&, ||
Mais baixa: 10
O comando If
O comando If uma instruo de linguagem de programao que compara dois ou mais conjuntos de dados
e verifica os resultados. Se o resultado for verdadeiro, as instrues que seguem o comando If sero
executados; se no, as instrues que seguirem o comando Else sero executados. Veja o exemplo abaixo:
Se A for verdadeiro (true) execute B
Se A for falso (false) execute C
Vejamos:
A=true
if (A==true) {
document.write("Execute B")
} else {
document.write("Execute C")
}
</script>
Outro exemplo a seguir tambm um exemplo bem simples:
24/154
14/8/2014
Apostila Javascript
teste=true
if (teste) {
document.write("Esta linha ser impressa")
} else {
document.write("Esta linha no ser impressa")
}
</script>
Usando a clusula If
Vamos ver um exemplo:
Descontos=315
if(Descontos!=0){
document.write("Descontos deste ms: " + Descontos)
}
</script>
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". na
verdade, estamos programando o sistema para cada tipo de situao e ento o software agir conforme a
necessidade 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 bloco
antes ou depois desta clusula. No exemplo anterior, podemos incrementar o cdigo com mais uma situao.
Descontos=315
if(Descontos != 0){
document.write("Descontos deste ms: " + Descontos)
} else {
document.write("No h descontos este ms.")
}
</script>
Para entender melhor o exemplo troque o valor da varivel Descontos para zero e teste novamente.
25/154
14/8/2014
Apostila Javascript
Usando a clusula else if

A clusulaelse ifnos permite ter vrias expresses dentro do mesmo comando If. Isso permite escolher entre
vrias situaes e, caso nenhuma retorne verdadeiro, o fluxo ir para a clusula else, se esta for utilizada.
Veja
Salario=1550
if (Salario<1250){
document.write("Remunerao isenta de imposto")
} else if (Salario >= 1250 && Salario<1800) {
document.write("Reteno de 5% para imposto mensal")
} else if (Salario >= 1800 && Salario<2200) {
djocument.write("Reteno de 7% para imposto mensal")
} else {
document.write("Reteno de 9% para imposto mensal")
}
</script>
Podemos observar que a clusula else if pode ser utilizada vrias vezes, permitindo calcular vrias faixas para
um valor de salrio. Aqui, utilizamos a varivel Salario, mas este valor pode vir de um banco de dados que
ser alimentado por usurios do sistema, em momento totalmente distinto a sua programao.
Por isso, os sistemas so bastante flexveis aos dados e devem trat-los de acordo com as normas e
legislaes vigentes.
Podemos verificar isso no exemplo anterior, no qual para cada faixa salarial aplicado um imposto que, em
um software oficial, deve estar de acordo com as normas legais.
Usando estrutura de deciso If

Lista de exerccios
Exerccio 1. Elaborar um algoritmo para receber um nmero inteiro e informar se ele par ou mpar.
Nome do arquivo: pares.txt

Numero: <input type="text" name="num">
<input type="button" value="Resultado" onclick="Parx()">
</form>
function Parx(){
26/154
14/8/2014
Apostila Javascript
num=parseFloat(document.frm_teste.num.value)
if(num % 2 == 0){
alert("Par")
} else {
alert("mpar")
}
}
</script>
Exerccio 2. Receber a temperatura - em graus Celsius - de uma pessoa e emitir uma mensagem se ela
estiver com febre.
Nome do arquivo: temperatura.txt<br>

Temperatura: <input type="text" name="temperatura">
<input type="button" value="Resultado" onClick="Temperaturax()">
</form>
function Temperaturax(){
temperatura=parseFloat(document.frm_teste.temperatura.value)
febre=37
if(temperatura >= febre){
alert("Paciente com febre")
}else {
alert("Paciente sem febre")
}
}
</script>
Exerccio 3. Crie um algoritmo que informa se voc do sexo masculino ou feminino
Nome do arquivo: sexo.txt<br>

Voc do sexo masculino? s/n??
<input type="text" name="s_n" size="1" maxlength="1">
<input type="button" value="Resultado" onClick="Sexox()">
</form>
function Sexox(){
s_n=document.frm_teste.s_n.value
if(s_n=="s") {
alert("Voc do sexo masculino")
}else {
alert("Voc do sexo feminino")
}
}
27/154
14/8/2014
Apostila Javascript
</script>
Exerccio 4. Faa um programa que indique se o ano bissexto ou no.
Nome do arquivo: bissexto.txt

Digite o ano: <input type="text" name="Ano">
<input type="button" value="Resultado" onClick="Bissexto()">
</form>
function Bissexto() {
Ano=parseFloat(document.frm_teste.Ano.value)
if (Ano % 4 == 0){
alert(Ano + " bissexto")
} else {
alert(Ano + "no bissexto")
}
}
</script>
Usando Operadores relacionais

< Menor que
> Maior que
== Igual a
<= Menor ou 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<br>
Numero: <input type="text" name="numero">
<input type="button" value="Resultado" onClick="maiorque()">
</form>
function maiorque() {
numero=parseFloat(document.frm_teste.numero.value)
if(numero<100){
alert("O nmero menor do que 100")
}else{
alert("O nmero maior ou igual a 100")
28/154
14/8/2014
Apostila Javascript
}
}
</script>
Exerccio 2. Faa um programa que indique se ele positivo, negativo ou igual a 0.

// Nome do arquivo: positivo.txt
<br>
Nmero: <input type="text" name="n">
<input type="button" value="Resultado" onClick="positivo()">
</form>
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")
}
}
</script>
Exerccio 3. Faa um programa que receba dois nmeros e mostre o maior.

// Nome do arquivo: maior.txt
Digite o primeiro nmero:
<input type="text" name="num1"><br>
digite o segundo nmero:
<input type="text" name="num2">
<input type="button" value="Resultado" onClick="maior()">
</form>
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<num2) {
alert("O maior nmero : "+ num2)
}else if(num1==num2) {
alert("Os nmeros so iguais")
}
}
</script>
29/154
14/8/2014
Apostila Javascript
Exerccio 4. Criar um algoritmo que receba a idade e informe se criana, adolescente, adulto ou idoso:
//Nome do arquivo: idade.txt
<br>
Qual a sua idade?
<input type="text" name="idade">
<input type="button" value="Resultado" onClick="Idadex()">
</form>
function Idadex() {
idade=parseFloat(document.frm_teste.idade.value)
if (idade<13) {
alert("Voc uma criana")
}else if(idade<18) {
alert("Voc um adolescente")
}else if(idade<65) {
alert("Voc um adulto")
} else {
alert("Voc um idoso")
}
}
</script>
Usando operadores Booleanos

AND && (E)
OR
||
NOT !
(OU)
(NO)
Lista de exerccios
Exerccio 1. Faa um programa que receba trs notas de um aluno, calcule e mostre a mdia aritmtica e
diga se foi aprovado, reprovado ou em recuperao.
// Nome do arquivo: aprovado.txt
<br>
Digite a primeira nota: <input type="text" name="nota1"><br>
Digite a segunda nota: <input type="text" name="nota2"><br>
Digite a terceira nota: <input type="text" name="nota3">
<input type="button" value="Resultado" onClick="Mediax()">
</form>
function Mediax() {
30/154
14/8/2014
Apostila Javascript
nota1=parseFloat(document.frm_teste.nota1.value)
media=(nota1 + nota2 + nota3)/3
alert("Mdia aritmtica: " + media)
if(media >= 0 && media<5) {
alert("Reprovado")
}
else if( media >= 5 && media<7) {
alert("Em recuperao")
}
else if (media >= 7 && media <= 10) {
alert("Aprovado")
}
}
</script>
Exerccio 2. Faa um programa que receba trs notas de um aluno, calcule e mostre a mdia aritmtica e
diga se tirou nota A, B, C, D, ou E.
// Nome do arquivo: nota.txt
<br>
</form>
function Mediax() {
if(media >= 8 && media <= 10) {
alert("nota A")
}else if(media >= 6 && media<8) {
alert("nota B")
alert("nota C")
alert("nota D")
alert("nota E")
}
31/154
14/8/2014
Apostila Javascript
}
</script>
Exerccio 3. Dados trs valores A, B, C, verificar se eles formam um tringulo eqiltero, issceles ou
escaleno.
// nome do arquivo: triangulo.txt<br>
Tringulo<br>
Lado A: <input type="text" name="A"><br>
Lado B: <input type="text" name="B"><br>
Lado C: <input type="text" name="C">
<input type="button" value="Resultado" onClick="Triangulo()">
</form>
function Triangulo() {
C=parseFloat(document.frm_teste.C.value)
if(A<(B + C) && B<(A + C) && C<(A + B)) {
if(A==B && B==C) {
alert("Tringulo Eqiltero")
} else if(A==B || A==C || B==C) {
alert("Tringulo Issceles")
} else {
alert("Tringulo Escaleno")
}
}else {
alert("Estes valore no formam um tringulo")
}
}
</script>
Exerccio 4. Crie uma estrutura de deciso comparando dois alunos e informe se ele foram aprovados ou
reprovados
// Nome do arquivo: alunos.txt
<br>
Aluno1="Aprovado"
Aluno2="Reprovado"
if (Aluno1=="Aprovado" && Aluno2=="Aprovado"){
document.write("Ambos esto aprovados!")
} else {
document.write("Um dos alunos foi reprovado")
}
</script>
32/154
14/8/2014
Apostila Javascript
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")}
</script>
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!")
}
</script>
Este comando permite que vrias comparaes sejam feitas e, no final, apenas uma seja escolhida para
executar um cdigo especfico da condio selecionada. Ele funciona igualmente a vrios ifs, mas agora ele
testa os valores de uma mesma varivel.
33/154
14/8/2014
Apostila Javascript
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 4: document.write("O valor da varivel 4 ") ; break;
}
</script>
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 { }, se
for 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, todos
os 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;
break;
break;
break;
break;
}
</script>
No exemplo anterior, apenas os comandos que correspondam ao case que tem o mesmo valor da varivel
34/154
14/8/2014
Apostila Javascript
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: <input type="text" name="Mes"><br>
Digite o ano: <input type="text" name="Ano">
<input type="button" value="Resultado" onClick="DiasX()">
</form>
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=30
break;
case 2:
if (Ano % 4 == 0) {
NumDias=29
} else {
NumDias=28
}
break;
default:
NumDias=31
break;
}
alert("O mes "+ Mes + " tem " + NumDias + " dias.")
}
</script>
Exemplo 2. Crie um algoritmo que informe o dia da semana
// Nome do arquivo: semana.txt
DataToda=new Date()
DiaDaSemana=DataToda.getDay()
switch(DiaDaSemana) {
case 0: document.write("Domingo"); break;
35/154
14/8/2014
Apostila Javascript
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;
}
</script>
Exemplo 3: Crie um algoritmo que d um aviso de bom dia, boa tarde e boa noite:
// Nome do arquivo: bomdia.txt
DataToda=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;
}
</script>
Exemplo 4. Crie um programa que gerencie um caixa eletrnico
// Nome do arquivo: caixa.txt
<pre>
Menu Principal
--------------1 - Incluso
2- Alterao
3 - Excluso
4 - Relatrio
5 - Fim
36/154
14/8/2014
Apostila Javascript
-------------Escolha sua opo

</pre>
<input type="text" name="menu" size="1" maxlength="1">
<input type="button" value="Resultado" onClick="Menux()">
</form>
function Menux() {
menu=document.frm_teste.menu.value
switch(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;
}
}
</script>
Exerccio 5. Crie uma calculadora com as 4 operaes da matemtica: adio, subtrao, diviso e
multiplicao.
// Nome do arquivo: operacao.txt
Digite o primeiro nmero: <input type="text" name="A"><br>
Escolha um operador + , -, * , / <input type="text" name="operador" size="1" maxlength="1"><br>
Digite o segundo nmero: <input type="text" name="B">
<input type="button" value="Reslutado" onClick="calculadora()">
</form>
function calculadora() {
operador=document.frm_teste.operador.value
switch(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;
}
}
</script>
Exerccio 6. Crie um programa que digite um caractere e diga se ele vogal maiscula, valor numrico,
operador aritmtico ou outro caractere.
37/154
14/8/2014
Apostila Javascript
// Nome do programa: caracteres.txt

Escolha um caractere: <input type="text" name="caractere" size="1" maxlength="1">
<input type="button" value="Resultado" onClick="Caracterex()">
</form>
function Caracterex() {
caractere=document.frm_teste.caractere.value
switch(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;
}
}
</script>
Operador Ternrio
Diferente da instruo IF, o operador ternrio tem este nome porque necessita de trs operandos para se
avaliado. Ooperador ternrio tem a seguinte forma:
38/154
14/8/2014
Apostila Javascript
condio1 ? expresso_verdadeira : espresso_falsa

Para avaliar o resultado da expresso primeiro a condio1 avaliada. Caso este resultado seja verdadeiro
ento resultado da expresso ser igual ao valor da expresso_verdadeira, no caso contrrio
expresso_falsa avaliada e se torna o resultado.
Exemplo 1:
variavel=50
resultado=(variavel >= 0)&&(variavel <= 100) ? "VERDADEIRO" : "FALSO"
document.write(resultado)
</script>
Exemplo 2:
horas=30
minutos=45
segundos=30
horas=(horas >= 0)&&(horas <= 24) ? horas : 0
minutos=(minutos >= 0)&&(minutos <= 60) ? minutos : 0
segundos=(segundos >= 0)&&(segundos <= 60) ? segundos : 0
document.write("So " + horas + ":" + minutos + ":" + segundos)
</script>
Exemplo 3:
</form>
function Mediax() {
resultado=(media >= 6)&&(media <= 10) ? "Aprovado" : "Reprovado"
alert(resultado)
}
</script>
Comando For
O comando FOR uma estrutura de repetio que repete uma srie de instrues um nmero especificado
39/154
14/8/2014
Apostila Javascript
de vezes. Digamos que deseje imprimir seu nome na tela dez vezes, por exemplo:
nome=prompt("Digite um nome:","")
document.write(nome+"<br>")
</script>
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 desperdia
memria. Tambm mostra um estilo de programao ruim. Ao menos que voc deseje que seus amigos
programadores riam de voc pelas costas, aprenda a substituir cdigos de programa redundante por loops
de 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<=10; i++){
40/154
14/8/2014
Apostila Javascript
}
</script>
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.txt
for(var x=1; x<=10; x++){
document.write(x+", ")
}
</script>
Resultado: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
Exerccio 2. Crie uma estrutura de repetio que imprima os nmeros pares.

// Nome do programa: mult2.txt
for(var x=0; x<=20; x=x+2){
}
</script>
Resultado: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20,
Exerccio 3. Crie uma estrutura de repetio que imprima os nmeros mpares.

// Nome do programa: impares.txt
for(var x=1; x<=21; x=x+2){
}
</script>
Resultado: 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21,
Exerccio 4. Crie uma estrutura de repetio que imprima os nmeros mltiplos de 5.

for(var x=0; x<=50; x=x+5){
}
41/154
14/8/2014
Apostila Javascript
</script>
Resultado: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50,

for(var x=110; x<=120; x++){
}
</script>
Resultado: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120,
Exerccio 6. Crie uma estrutura de repetio que conte de 40 at 80 e ao mesmo tempo imprima nmeros
mltiplos de 8.
// Nome do arquivo: mult8.txt
for(var x=40; x<=80; x+=8){
}
</script>
Resultado: 40, 48, 56, 64, 72, 80,
Exerccio 7. Crie uma estrutura de repetio que conte de 20 at 1 invertidamente.

// Nome do arquivo: inverter.txt
for(var x=20; x>=1; x--){
}
</script>
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)
// Nome do arquivo: negativo.txt
for(var x=-10; x<=10; x++){
42/154
14/8/2014
Apostila Javascript
}
</script>
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.

for(var x=-25; x<=-15; x++){
}
</script>
Resultado: -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15,
Exerccio 10. Crie um conjunto dos nmeros mltiplos de 3 usando a estrutura de repetio FOR.
for(var x=0; x<=30; x+=3){
}
</script>
Resultado: 0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30,
Exerccio 11. Crie uma estrutura de repetio de 1 at 10, informando o quadrado deste nmero.
// Nome do programa: Quadrado.txt
for (var N=1; N<=10; N++){
Quadrado=N * N
document.write("O quadrado de " + N + " " + Quadrado+"<br>")
}
</script>
Exerccio 12. Crie uma estrutura de repetio que imprima "Ol" dez vezes.
// Nome do programa: ola10.txt
for(var x=1; x<=10; x++){
document.write("Ol<br>")
43/154
14/8/2014
Apostila Javascript
}
</script>
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 e
10 na tela. Para isto podemos construir um programa muito simples para esta tarefa
i=1
while(i <= 10) {
document.write(i+", ")
i=i + 1
}
</script>
Segundo o programa acima podemos ver que o programa termina quando o teste i <= 10 der como
resultado false.
Para que isto ocorra, necessariamente devemos ter i>10. A cada passo o programa primeiro testa a
condio e aps imprime e incrementa a varivel. Assim o programa deve gerar seqencialmente os valores
1, 2, 3... 10. Aps o valor 10 faz i=11 e volta a testar a condio. Neste caso (11 <= 10) false e o
programa termina.

x=1
while(x <= 10) {
x=x + 1
}
</script>
Resultado: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
Exerccio 2. Crie uma estrutura de repetio que imprima os nmeros pares

x=0
while(x <= 20) {
x=x + 2
}
</script>
44/154
14/8/2014
Apostila Javascript
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) {
x=x + 2
}
</script>
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 <= 50) {
x=x + 5
}
</script>
Resultado: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50,

x=110
while(x <= 120) {
x=x + 1
}
</script>
Resultado: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120,
Exerccio 6. Crie uma estrutura de repetio que conte de 40 at 80 e ao mesmo tempo imprima nmeros
mltiplos de 8.
x=40
while(x <= 80) {
45/154
14/8/2014
Apostila Javascript
x=x + 8
}
</script>
Resultado: 40, 48, 56, 64, 72, 80,
Exerccio 7. Crie uma estrutura de repetio que conte de 20 at 1 invertidamente.

x=20
while(x >= 1) {
x=x - 1
}
</script>
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 <= 10) {
x=x + 1
}
</script>
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.

x=-25
while(x <= -15) {
x=x + 1
}
</script>
Resultado: -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15,
46/154
14/8/2014
Apostila Javascript
Exerccio 10. Crie um conjunto dos nmeros mltiplos de 3 usando a estrutura de repetio while.
x=0
while(x <= 30) {
x=x + 3
}
</script>
Resultado: 0, 3, 6, 12, 15, 18, 21, 24, 27, 30,
Exerccio 11. Antes de executar um programa, crie uma mensagem informando se deseja prosseguir.
tentativas=1
while(tentativas <= 3){
resposta=prompt("Voc deseja prosseguir (s ou n)?","")
if (resposta=="s"){
document.write("<br>Execute o programa.")
break;
}
else if(resposta=="n") {
document.write("<br>Fim do programa.")
break;
} else {
document.write("<br>Opo invlida:")
document.write("<br>Tente novamente.")
tentativas=tentativas + 1
}
}
if (tentativas >= 4) {
document.write("<br>vou assumir como um no")
}
</script>
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 a
condio 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:
47/154
14/8/2014
Apostila Javascript
mes=prompt("Digite o ms:")
mes=parseFloat(mes)
while(mes<1 || mes>12) {
document.write("<br>Digitao errada! Digite de novo.")
mes=parseFloat(mes)
}
</script>
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=parseFloat(mes)
if(mes<1 || mes>12){
document.write("<br>Digitao errada! Digite de novo")
}
} while (mes<1 || mes>12)
</script>
Pode-se tambm utilizar este comando para execues sucessivas de um programa. Neste caso, comum se
fazer 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")
</script>
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)
48/154
14/8/2014
Apostila Javascript
if (num<100) {
document.write("<br>O nmero " + num + " menor do que 100")
}
fim=prompt("Deseja testar outro [S/N] ?","")
} while (fim.toUpperCase()!="N")
</script>
Loops Infinitos
Veja o exemplo abaixo:
Ateno, no teste este cdigo!
No teste este cdigo
Contador=0; n=0;
while(Contador<=10){
document.write(n + ", ")
n=n + 1
}
</script>
No teste este cdigo
Se voc entendeu os exemplos anteriores sobre os loops, deve perceber que existe um erro nesse exemplo.
Como pode ver a condio do loop while refere-se varivel contador, mas essa varivel realmente no se
altera durante o loop. Isso crua um loop infinito. O loop continuar executando at que seja interrompido
pelo usurio ou at gerar algum tipo de erro.
Os loops infinitos nem sempre podem ser interrompidos pelo usurio, exceto fechando onavegador, em
alguns casos os loops infinitos podem at impedir que onavegadorfeche ou provocar uma pane no sistema.
Eles tambm podem ser difceis de serem identificados, porque este tipo de cdigo no lhe mostrar um erro
dizendo que h um loop infinito. Mas no se preocupe, pois esse tipo de loop pode ser evitado, o que tem
que fazer : toda vez que for criar um loop em um script, voc deve ter cuidado de certificar-se de que h
uma sada.
Nota: Dependendo da verso do navegador em utilizao, o loop infinito pode at mesmo fazer o navegador
para de responder ao usurio. Certifique-se de fornecer uma rota de escape de loops infinitos e salvar seu
script at test-lo, em qualquer eventualidade.
Ocasionalmente, voc pode querer criar um loop infinito. Isso talvez inclua situaes em que voc quer que
seu programa execute at o usurio interromp-lo ou em que fornece uma rota de escape com a
instruobreak. Uma maneira de criar um loop infinito o seguinte:
while(true) { ...}
Como o valor true condicional, esse loop sempre encontrar sua condio como sendo verdadeira.
49/154
14/8/2014
Apostila Javascript
Escapando de um loop infinito utilizando a

instruobreak
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 exemplo
abaixo mostra o uso dessa instruo.
n=0
total=0
while(true){
n=n + 1
total=total + n
document.write(total+", ")
if(total >= 100){
break
}
}
</script>
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 a
primeira 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 do
programa para o comando seguinte aquele que encerra o loop.
<script language="Javascript">
var i=0;
while (i<20) {
i=i+1
if (i==10)
break;
document.write(i + ", ");
}
</script>
Resultado: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
50/154
14/8/2014
Apostila Javascript
Continue
A declarao continue usada quando no se quer executar nenhum dos comandos daquele ponto at o fim
do 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 <= 20){
k++ ;
if((k%2)!=0)
continue;
document.write(k + ", ");
}
</script>
Resultado: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20,
Operadores incrementais
Existem dois tipos de operadores incrementais o incremento (x++ ) e o decremento (x--)
O incremento (x++ ) aumenta o valor da varivel em uma unidade, o decremento (x--) diminui o valor da
varivel em uma unidade, ou seja:
x++ idntico a x=x + 1
x-- idntico a x=x-1
Os operadores de incremento e decremento podem ser prefixos ou ps-fixos - isto , podem ser colocados
antes ( ++x) ou depois (x++); da mesma forma o decremento (--x) igual a (x--), ou seja:
x++ semelhante a ++x e
x-- semelhante a --x.
Conclui-se da seguinte forma:
x++ ou ++x idntico a x=x + 1
x-- ou --x idntico a x=x-1
51/154
14/8/2014
Apostila Javascript
a=2
document.write("Se a=2<br>")
a++
document.write("O resultado de a++ "+ a)
a=2
document.write("<br>Se a=2<br>")
++a
document.write("O resultado de ++a "+ a)
</script>
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<=10){
x++
}
</script>
Resultado: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
Exemplo 2:
x=20
while(x >= 1){
--x
}
</script>
Resultado: 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1,
52/154
14/8/2014
Apostila Javascript
Ateno programadores!!!
Em linguagens de programao tais como Java e o Javascript devemos ter cuidado na hora de usar
operadores 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:
Se
A=5
A=5
e:
e:
A=x++
A=++x
O resultado :
O resultado :
A=5
A=6
e:
e:
x=6
x=6
Esta sutileza sinttica pode gerar pequenos erros de programao.

Da mesma forma o operador decremental "--".
Se:
Se
A=5
A=5
e:
e:
A=x--
A=--x
53/154
14/8/2014
Apostila Javascript
O resultado :
O resultado :
A=5
A=4
e:
e:
x=4
x=4
Veja o exemplo na prtica:

<script Language="Javascript">
var a=2;
document.write("Incrementos <br>")
document.write("a=2 <br>")
document.write("a++="+ a++ + "<br>");
a=2
document.write("++a="+ ++a);
</script>
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
54/154
14/8/2014
Apostila Javascript
b=3
a+=b // Resultado a=5, idntico a a=a + b
document.write(a+"<br>")
// Exemplo 2:
x=7
y=4
x-=y // Resultado x=3, idntico a x=x-y
document.write(x+"<br>")
// Exemplo 3:
V1=8
V1*=2 // Resultado V1=16, idntico a V1=V1 * 2
document.write(V1+"<br>")
// Exemplo 4:
z=12
z/=3 // Resultado z=4, idntico a z=z/3
document.write(z+"<br>")
// Exemplo 5:
h=9
i=2
h%=i // Resultado h=1, idntico a h=h%i
// Observao: O operador Mdulo retorna o resto da diviso
document.write(h+"<br>")
// Exemplo 6:
Variavel="texto 1 "
Variavel+="texto 2" // Resultado variavel="texto 1 texto 2" idntico a variavel=variavel."texto 2"
document.write(Variavel+"<br>")
</script>
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.
55/154
14/8/2014
Apostila Javascript
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")
</script>
2 - Na vertical
sexo=Array()
sexo[0]="masculino"
sexo[1]="feminino"
numero=Array()
numero[0]=0
numero[1]=1
numero[2]=2
numero[3]=3
numero[4]=4
numero[5]=5
numero[6]=6
numero[7]=7
numero[8]=8
numero[9]=9
vogais=Array()
vogais[0]="A"
vogais[1]="E"
vogais[2]="I"
56/154
14/8/2014
Apostila Javascript
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"
</script>
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 <= 6; x++ ) {
document.write(lista[x] + ", ");
}
</script>
57/154
14/8/2014
Apostila Javascript
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 <= 11; x++ ) {
document.write(mes[x] + ", ")
}
</script>
Exerccio 3. A partir da tabela abaixo, foram criados dois vetores de 6 posies: NOME e IDADE.
Nome Idade
1 Beatriz 19
2 Pedro
32
3 Cludio 23
4 Susana 27
5 Marcos 16
6 Celina 35
Com base nesta informao, diga o que ser impresso pelas instrues abaixo:
for(var i=0; i<=5; i++) {
if (idade[i]<20){
document.write(Nome[i]+" ")
}
}
</script>
Soluo:
Nome=Array()
idade=Array()
Nome[0]="Beatriz"
idade[0]=19
Nome[1]="Pedro"
idade[1]=32
58/154
14/8/2014
Apostila Javascript
Nome[2]="Cludio"
idade[2]=23
Nome[3]="Susana"
idade[3]=27
Nome[4]="Marcos"
idade[4]=16
Nome[5]="Celina"
idade[5]=35
for(var i=0; i<=5; i++) {
if (idade[i]<20){
}
}
</script>
Exerccio 4. A tabela abaixo contm o nome de algumas ruas e o bairro onde se localizam.
Rua
Bairro
Mena Barreto
Botafogo
Constana Barbosa Mier

Marechal Cmara Centro
lvaro Ramos
Botafogo
Cesrio Alvim
Humait
Jos Clemente
Niteri
As instrues a seguir iniciam um programa que cria os vetores RUAS e BAIRROS. Escreva um programa
de forma que ele imprima o nome das ruas do bairro de Botafogo.
Soluo
ruas=Array("Mena Barreto", "Constana Barbosa", "Marechal Cmara", "lvaro Ramos", "Cesrio Alvim",
"Jos Clemente")
bairros=Array("Botafogo", "Mier", "Centro", "Botafogo", "Humait", "Niteri")
alert("Nmero total de bairros: "+bairros.length)
for(var i=0; i<=bairros.length-1; i++){
document.write("Rua: " + ruas[i] + ", bairro: " + bairros[i]+"<br>");
}
document.write("<br>Ruas do bairro de Botafogo:<br>")
for(var i=0; i<=bairros.length-1; i++){
59/154
14/8/2014
Apostila Javascript
if(bairros[i]=="Botafogo"){
document.write("Nome da rua: " + ruas[i])
document.write(" Nome do bairro: " + bairros[i]+"<br>")
}
}
</script>
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]=1
dia[0]=20
signo[0]="Capricrnio"
mes[1]=2
dia[1]=19
signo[1]="Aqurio"
mes[2]=3
dia[2]=20
signo[2]="Peixes"
mes[3]=4
dia[3]=20
signo[3]="ries"
mes[4]=5
60/154
14/8/2014
Apostila Javascript
dia[4]=20
signo[4]="Touro"
mes[5]=6
dia[5]=20
signo[5]="Gmeos"
mes[6]=7
dia[6]=21
signo[6]="Cncer"
mes[7]=8
dia[7]=22
signo[7]="Leo"
mes[8]=9
dia[8]=22
signo[8]="Virgem"
mes[9]=10
dia[9]=22
signo[9]="Libra"
mes[10]=11
dia[10]=21
signo[10]="Escorpio"
mes[11]=12
dia[11]=21
signo[11]="Sagitrio"
document.write("Tabela de signos:<br><br>")
for(x=1; x<=11; x++){
document.write(signo[x] + " ultimo dia " + dia[x] + " / " + mes[x]+"<br>")
}
</script>
Exerccio 6. Faa um programa que imprima na tela a seguinte tabela abaixo:

ndice Planeta Luas Anos Distncia
1
Mercrio
0.024
58
Vnus
0.625
108
Terra
150
Marte
1.91
228
Jpiter
16
12
778
Saturno
18
29.9
1427
Urano
15
85.24
2869
Netuno
167.19
4498
Pluto
251.29
5900
61/154
14/8/2014
Apostila Javascript
planeta=Array()
luas=Array()
anos=Array()
distancia=Array()
planeta[0]="Mercrio"
luas[0]=0
anos[0]=0.24
distancia[0]=58
planeta[1]="Vnus"
luas[1]=0
anos[1]=0.625
distancia[1]=108
planeta[2]="Terra"
luas[2]=1
anos[2]=1
distancia[2]=150
planeta[3]="Marte"
luas[3]=2
anos[3]=1.91
distancia[3]=228
document.write("Planeta luas anos distncia<br><br>")
for(indice=0; indice<=3; indice++){
document.write(planeta[indice] +" "+ luas[indice] +" "+ anos[indice]+ " "+ distancia[indice]+"<br>")
}
</script>
Matrizes
Tente pensar no problema como uma tabela
Notas
Nota 1 Nota 2 Nota 3
Aluno01
Aluno02
Aluno03
Aluno04
Aluno05
Veja que esta tabela tem dois tipos de informao: Alunos e notas.
Por exemplo a 2 nota do aluno 3, encontra-se no cruzamento entre a terceira linha com a segunda coluna,
ou melhor, encontra-se no cruzamento entre a linha de ndice 2 com a coluna de ndice 1 , isto partindo do
pressuposto que o ndice da primeira linha 0 e o ndice da primeira coluna tambm 0 .
Podemos transformar qualquer tabela em matriz.
62/154
14/8/2014
Apostila Javascript
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.5
Aluno02
5.5
Aluno03
Aluno04
7.5
Aluno05
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]=6
Nota2[1]=5.5
Nota1[2]=7
Nota2[2]=8
Nota1[3]=3
Nota2[3]=7.5
Nota1[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
</script>
63/154
14/8/2014
Apostila Javascript
Exemplo 02:
Do exemplo 2 em diante transformamos a tabela em matriz.
Aluno01=0
Aluno02=1
Aluno03=2
Aluno04=3
Aluno05=4
Nota1=0
Nota2=1
// Para no dar erros eu criei 2 Arrays e no 4 Arrays diferentes
Classe=Array(Array(),Array())
Classe[Nota1][Aluno01]=7
Classe[Nota2][Aluno01]=7.5
for(var y=0; y<=4; y++){
for(var x=0; x<=1; x++){
document.write(Classe[x][y]+"<br>")
}
}
</script>
Exemplo 03:
O exemplo 3 no usa as variveis Aluno01, Aluno02, Aluno03, Nota1, Nota2, em seu cdigo:
// Para no dar erros eu criei 2 Arrays e no 4 Arrays diferentes
Classe=Array(Array(),Array())
Classe[0][0]=7
Classe[1][0]=7.5
Classe[0][1]=6
Classe[1][1]=5.5
Classe[0][2]=7
Classe[1][2]=8
64/154
14/8/2014
Apostila Javascript
Classe[0][3]=3
Classe[1][3]=7.5
Classe[0][4]=4
Classe[1][4]=4.5
for(var y=0; y<=4; y++){
for(var x=0; x<=1; x++){
document.write(Classe[x][y]+"<br>")
}
}
</script>
Exemplo 04:
O exemplo 04 a forma abreviada de uma matriz
Classe= Array(
Array(7, 7.5),
Array(6, 5.5),
Array(7, 8),
Array(3, 7.5),
Array(4, 4.5)
)
// Para saber quanto o aluno 03 tirou na 1 prova fcil:
for(var y=0; y<=4; y++){
for(var x=0; x<=1; x++){
document.write(Classe[y][x]+"<br>")
}
}
</script>
Lista de exerccio:
Exerccio 1. A partir da tabela abaixo, foram criados dois vetores de 6 posies: NOME e IDADE.
Nome Idade
1 Beatriz 19
2 Pedro
32
3 Cludio 23
4 Susana 27
5 Marcos 16
65/154
14/8/2014
Apostila Javascript
6 Celina 35
Com base nesta informao, diga o que ser impresso pelas instrues abaixo:
for(var i=0; i<=5; i++) {
if (idade[i]<20){
}
}
</script>
Soluo 1:
Nome=Array()
idade=Array()
Nome[0]="Beatriz"
idade[0]=19
Nome[1]="Pedro"
idade[1]=32
Nome[2]="Cludio"
idade[2]=23
Nome[3]="Susana"
idade[3]=27
Nome[4]="Marcos"
idade[4]=16
Nome[5]="Celina"
idade[5]=35
for(var i=0; i<=5; i++) {
if (idade[i]<20){
}
}
</script>
Soluo 2:
nome=0
idade=1
Matriz=Array(Array(),Array())
Matriz[nome][0]="Beatriz"
66/154
14/8/2014
Apostila Javascript
Matriz[idade][0]=19
Matriz[nome][1]="Pedro"
Matriz[idade][1]=32
Matriz[nome][2]="Cludio"
Matriz[idade][2]=23
Matriz[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<=5; i++){
if (Matriz[idade][i]<20){
document.write(Matriz[nome][i]+" ")
}
}
</script>
Soluo 3:
Matriz=Array(Array(), Array())
Matriz[0][0]="Beatriz"
Matriz[1][0]=19
Matriz[0][1]="Pedro"
Matriz[1][1]=32
Matriz[0][2]="Cludio"
Matriz[1][2]=23
Matriz[0][3]="Susana"
Matriz[1][3]=27
Matriz[0][4]="Marcos"
Matriz[1][4]=16
Matriz[0][5]="Celina"
Matriz[1][5]=35
for(var i=0; i<=5; i++){
if(Matriz[1][i]<20){
document.write(Matriz[0][i]+" ")
}
}
</script>
Soluo 4:
Matriz=Array(
Array("Beatriz", 19),
67/154
14/8/2014
Apostila Javascript
Array("Pedro", 32),
Array("Cludio", 23),
Array("Susana", 16),
Array("Marcos", 16),
Array("Celina", 35)
)
for(var i=0;i<=5;i++){
if(Matriz[i][1]<20){
document.write(Matriz[i][0]+" ")
}
}
</script>
Exerccio 2. A tabela abaixo contm o nome de algumas ruas e o bairro onde se localizam.
Rua
Bairro
Mena Barreto
Botafogo
Constana Barbosa Mier

Marechal Cmara Centro
lvaro Ramos
Botafogo
Cesrio Alvim
Humait
Jos Clemente
Niteri
As instrues a seguir iniciam um programa que cria os vetores RUAS e BAIRROS. Escreva um programa
de forma que ele imprima o nome das ruas do bairro de Botafogo.
Soluo
Criamatriz=Array(Array(),Array())
Criamatriz[0][0]="Mena Barreto"
Criamatriz[1][0]="Botafogo"
Criamatriz[0][1]="Constana Barbosa"
Criamatriz[1][1]="Mier"
Criamatriz[0][2]="Marechal Cmara "
Criamatriz[1][2]="Centro"
Criamatriz[0][3]="lvaro Ramos "
Criamatriz[1][3]="Botafogo"
Criamatriz[0][4]="Cesrio Alvim "
Criamatriz[1][4]="Humait"
Criamatriz[0][5]="Jos Clemente "
Criamatriz[1][5]="Niteri"
for(var i=0; i<=5; i++){
document.write("Rua: " + Criamatriz[0][i] + ", bairro: " + Criamatriz[1][i]+"<br>")
68/154
14/8/2014
Apostila Javascript
}
document.write("<br>Ruas do bairro de Botafogo<br><br>")
for(var i=0; i<=5; i++){
if (Criamatriz[1][i]=="Botafogo") {
document.write("Nome da Rua: " + Criamatriz[0][i])
document.write("Nome do bairro: " + Criamatriz[1][i]+"<br>")
}
}
</script>
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, dia, signo}
SuperArray=Array(
Array(1, 20, "Capricrnio"),
Array(2, 19, "Aqurio"),
Array(3, 20, "Peixes"),
Array(4, 20, "ries"),
Array(5, 20, "Touro"),
Array(6, 20, "Gmeos"),
Array(7, 21, "Cncer"),
Array(8, 22, "Leo"),
69/154
14/8/2014
Apostila Javascript
Array(9, 22, "Virgem"),

Array(10, 22, "Libra"),
Array(11, 21, "Escorpio"),
Array(12, 21, "Sagitrio")
)
mes=0
dia=1
signos=2
document.write("Tabela de signos<br><br>")
for(var x=0; x<=11; x++) {
document.write(SuperArray[x][signos] + " ltimo dia " + SuperArray[x][dia] + " / " + SuperArray[x][mes]+"
<br>")
}
</script>
Exerccio 6. Faa um programa que imprima na tela a seguinte tabela abaixo:

ndice Planeta Luas Anos Distncia
1
Mercrio
0.024
58
Vnus
0.625
108
Terra
150
Marte
1.91
228
Jpiter
16
12
778
Saturno
18
29.9
1427
Urano
15
85.24
2869
Netuno
167.19
4498
Pluto
251.29
5900
Matriz=Array(Array(),Array(),Array(),Array())
Planeta=0
luas=1
anos=2
distancia=3
Matriz[Planeta][0]="Mercrio"
Matriz[luas][0]=0
Matriz[anos][0]=0.24
Matriz[distancia][0]=58
Matriz[Planeta][1]="Vnus"
Matriz[luas][1]=0
70/154
14/8/2014
Apostila Javascript
Matriz[Planeta][2]="Terra"
Matriz[luas][2]=1
Matriz[anos][2]=1
Matriz[Planeta][3]="Marte"
Matriz[luas][3]=2
document.write("Planeta luas anos distncia<br><br>")
for(var indice=0; indice<=3; indice++){
document.write(Matriz[Planeta][indice]+ " "+ Matriz[luas][indice]+ " "+ Matriz[anos][indice]+ " "+
Matriz[distancia][indice]+"<br>")
}
</script>
Criando funes
Funo um subprograma de linguagem de computador que faz alguns clculos e retorna um nico valor
para o programa principal.
Exemplo:
// Funes
function Calcule(a, b, c){
d=a * b/c
return d
}
// Programa
document.write(Calcule(4, 3, 2)) // Resultado 6
</script>
O comando return uma instruo que encerra o processamento de uma funo e transfere o controle de
volta ao mdulo que o chamou, e (opcionalmente) especifica o valor da funo.
A funo acima retornou o valor que 6.
Uma funo pode retornar ou no poder retornar valores, basta no usar a instruo return.
Exemplo:
// Funes
function Calcule(a, b, c){
71/154
14/8/2014
Apostila Javascript
document.write(a * b/c)
}
// Programa principal
Calcule(4, 3, 2)
</script>
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 * b
return c
}
function Divisao(a, b){
return a/b
}
document.write("2 + 8=" + Adicao(2, 8)+"<br>")
document.write("7-3=" + Subtracao(7, 3)+"<br>")
document.write("3 * 4=" + Multiplicacao(3,4)+"<br>")
document.write("8/2=" + Divisao(8, 2)+"<br>")
</script>
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
}
72/154
14/8/2014
Apostila Javascript
//Programa principal
document.write("A soma de 5 e 4 " + soma(5, 4))
</script>
Exerccio 2. Crie uma funo que calcule o cubo de um nmero.

function cubo(x){
var cubo
cubo=x * x * x
return cubo
}
document.write("O cubo de 8 igual a " + cubo(8))
</script>
Exerccio 3. Crie uma funo que calcule a rea do retngulo

function calcArea(largura, altura){
a=largura * altura
return a
}
largura=4
altura=8
document.write(calcArea(largura, altura))
</script>
Exerccio 4. Crie uma funo que calcule nmeros fatoriais

function fatorial(num){
res=1
for(var k=num; k>=1; k--){
res=res * k
}
return res
}
for(var k=1; k<=10; k++){
73/154
14/8/2014
Apostila Javascript
document.write(k, "!=",fatorial(k)+"<br>")
}
</script>
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 exemplos
abaixo 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=null
Var_3=null
</script>
2 exemplo:
Nome=null
Sobrenome=null
74/154
14/8/2014
Apostila Javascript
if(Nome==null) {
Nome="Marcos"
}
if(Sobrenome==null){
Sobrenome="Aurelio"
}
document.write(Nome + " " + Sobrenome)
</script>
3 exemplo:
a=10
b=null
c=5
resp=0
if(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)
</script>
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 entrada
ou 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
75/154
14/8/2014
Apostila Javascript
usam formulrios.
Se ns fizermos uma comparao entre as linguagens de programao mais usadas encontraremos os
seguintes 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:
76/154
14/8/2014
Apostila Javascript
8) Caixa de seleo:
9) Caixa de combos:
10) Caixa de listagem
11) Caixas de dilogo
12) Hiperlinks
77/154
14/8/2014
Apostila Javascript
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 <FORM>. Assim como as tabelas, que usam o comando <TABLE> </TABLE>, o formulrio usa o
comando <FORM> ... </FORM> para definir a abertura e o fechamento do mesmo.
A forma geral do comando a seguinte:
<form action="http://www.servidor.com.br/bancodedados.php" method="post">

...
</form>
78/154
14/8/2014
Apostila Javascript
Seus parmetros so:

Parmetros Definio
method
Esse 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 <FORM> usa dois parmetros action e method, veja abaixo:

METHOD o parmetro que define o metodo de envio de formulrio para o servidor onde est hospedado
seu 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:
<input type="submit" value="Enviar">
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:
<input type="reset" value="Limpar">
Veja o exemplo com os comandos enviar (Submit) e apagar (Reset) dentro de um formulrio:
79/154
14/8/2014
Apostila Javascript
<form action="http://www.meuservidor.com/formulario.php" method="post">

Digite seu nome: <input type="text" name="nome" size="30" maxlength="50"> <br>
</form>
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:
<input type="file" name="nome_do_comando">
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:
<Form Action="http:\\www.meuservidor.com\arquivo.php" method="post">
<center>
Envie sua foto aqui:<br>
<input type="file" name="foto"><br>
</center>
</form>
2) Boto de comando
80/154
14/8/2014
Apostila Javascript
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:
<input type="button" value="clique aqui" onclick="funcao()">
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 em
nosso 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.
<html>
<head>
<title> Exemplo </title>
</head>
function meunome(formulario) {
alert("Meu nome :"+formulario.campo.value)
}
</script>
<body>
<form>
Digite seu nome: <input type="text" name="campo" value="">
<input type="button" value="Resultado" onclick="meunome(this.form)" />
</form>
</body>
</html>
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:

<input type="text" name="nome_do_campo" value="Digite seu texto">
Seus parmetros so:
81/154
14/8/2014
Apostila Javascript
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

<form>
Campo 1: <input type="text" name="campo1"> <br>

Campo 2: <input type="text" name="campo2" size=5 maxlength=10> <br>

Campo 3: <input type="text" name="campo3" maxlength=5> <br>

</script>
</head>
91/154
14/8/2014
Apostila Javascript
<body>
<p> <a href="javascript: mensagem('Testando boto 1');">Boto 1</a></p>
<p> <a href="javascript: mensagem('Oi!');">Boto 2</a></p>
<p> <a href="javascript: mensagem('testando imagem');"><img src="imagem1.jpg"></a></p>
</body>
</html>
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 onclick
no usa a esteno "javascript:" em seu atributo, ex:
<a href="#" onclick="mensagem('texto');">
Para inserir uma imagem s colocar este comando:
<img src="imagem1.jpg">
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:

92/154
14/8/2014
Apostila Javascript
Quando tiramos o mouse sobre a imagem, ela volta ao normal:
Para testar use os seguintes comandos:
<img src="primeiraimagem.jpg" onMouseOver="src='segundaimagem.jpg'"

onMouseOut="src='primeiraimagem.jpg'">
Onde:
primeiraimagem=
segundaimagem=
14) Barra de menu:
A barra de menu uma faixa retangular apresentada em geral na parte superior da janela de um programa
aplicativo, ou a esquerda numa pgina web, na qual o usurio pode selecionar um entre os vrios menus
disponveis. 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 na
tela.
93/154
14/8/2014
Apostila Javascript
15) Abrindo uma nova Janela:
Para a web, essas janelas so chamadas de Pop-up ou janela instantnea; estas janelas podem ser exibidas a
qualquer momento na tela.
Existem quatro tipos de pop-up:
Pop-up externo;
Pop-up interno;
Frames e
Janela Modal .
Pop-up externo
Este tipo de pop-up fica externamente ao navegador, muitos usurios acham estas janelinhas chatas de fechar
e 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. Estes
parmetros podem ser definidos somente na abertura de novas janelas e no afeta a janela pai, ou a janela
mais 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]
94/154
14/8/2014
Apostila Javascript
Veja um exemplo deste tipo de janela:

<html>
<head>
<title>Funciona bem no Internet Explorer</title>
</head>
<body>
function makeArray(n){
this.length=n;
for(var i=0; i<=n; i++)
this[i]=0;
return this;
}
text= new makeArray(4);
text[0]="Hello, world!";
text[1]="Bem-Vindos";
text[2]="";
text[3]="minha";
text[4]="Page!";
msgWindow=window.open("", "Hello", "toolbar=no, width=200, height=100");
for( var j=0; j<=text.length; j++) {
msgWindow.document.open();
msgWindow.document.write("<h1>"+text[j]+"</h1>");
msgWindow.document.close();
for(i=0; i<600000; i++){}
}
</script>
</body>
</html>
Observao:
No exemplo acima eu posso transformar num pequeno editor html com a ajuda do argumento:
msgWindow.document.write("<h1>Texto em Html</h1>");
Onde: "<h1>Texto em Html</h1>" o texto onde a janela pai insere dados para a janela filho.
Veja o exemplo:
<html>
<head>
<title> Editor simples de HTML </title>
</head>
<script language="JavaScript">
function verpagina(form1)
{
ver = window.open("", "ver")
95/154
14/8/2014
Apostila Javascript
ver.document.open()
// ver.document.write(document.forms[0].elements[0].value)
ver.document.write(form1.texto.value)
ver.document.write("<br>")
ver.document.close()
}
</script>
<body bgcolor="#EEEEEE" text="#000000">
<form action="" method="post" name="form1">
<textarea cols=45 rows=13 name="texto">
Insira o texto aqui
</textarea>
<br>
<br>
<input type="button" value="Visualizar" onClick="verpagina(this.form)">
</form>
<br>
<br>
</body>
</html>
Veja outro exemplo de Pop-up que abre um documento Html:
<html>
<head>
<!-function openwin(url){
awindow=window.open(url, "Publicidade", "width=300, height=400, toolbar=no, status=no, scroll=yes,
resize=no, menubar=no, left=150, top=100");
}
// -->
</script>
</head>
<body>
<p> <a href="javascript: openwin('empresax.html');">Empresa x</a></p>
<p> <a href="javascript: openwin('empresay.html');">Empresa y</a></p>
</body>
</html>
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:
96/154
14/8/2014
Apostila Javascript
<html>
<head>
<title>Pop-up no bloquevel</title>
</head>
<style type="text/css">
#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;
}
</style>
<body onload="javascript: abrir()">
<script language="javascript" type="">
function fechar() {
document.getElementById('popup').style.display='none';
}
function abrir() {
document.getElementById('popup').style.display='block';
setTimeout("fechar()",3000);
}
</script>
<DIV id="popup" class="popup">
<p>
Esse e um exemplo de popup utilizando DIV. Dessa maneira esse pop-up no ser bloqueado.
</p>
<p>
<small><a href="javascript: fechar();">[X]</a> </small>
</p>
</div>
<br> <a href="javascript: abrir();">Abrir POPUP</a>
<br> <a href="javascript: fechar();">Fechar POPUP</a>
</body>
</html>
Outra forma de usar o CSS junto com o Dhtml aparecer e desaparecer texto, veja o cdigo:
<html>
<head>
<title>Aparecer e desaparecer texto</title>
</head>
<script language="javascript" type="text/javascript">
<!-http://www.webteste123.com/curso_web/informatica/web/apostilas/programacao/javascript/javascript.html
97/154
14/8/2014
Apostila Javascript
function aparecer() {
if(identificado.style.display=='none') {
identificado.style.display='';
} else {
identificado.style.display='none';
};
}
-->
</script>
<body>
<a href="javascript:;" onClick="aparecer();">APARECER</a>
<div id="identificado" style="display: none">
<p>Texto includo pelo boto</p>
</div>
<p>Texto fora da tag DIV</p>
</body>
</html>
Frames
Para j, vou apresentar as frames. Utilisar as frames permite a diviso de janelas afixando a pgina HTML
em vrias partes independentes ums dos outros. Pode-se assim caregar diferentes pginas em cada parte.
Para a sintaxe Html das frames, recomendo o tutorial de HTML
Em Javascript, interessa a capacidade das frames interagir. Ou seja a capacidade de trocar informaes
entre elas.
A filosofia do Html quer que cada pgina que compe um site seja uma entidade independente.
Neste esquemas a pgina principal contem duas frames, em que podemos trocar informaes entre as frames
mantendo sempre a mesma pgina:
<=>
Propriedades
PROPRIEDADES DESCRIO
98/154
14/8/2014
Apostila Javascript
length
Devolve o nmero de frames subordinadas na pgina principal (pgina que contem

todas as frames).
parent
Sinnimo para a pgina principal.
Troca de informao entre frames

Com o exemplo seguinte, vamos transferir dados introduzidos pelo utilizador de uma frame, para outra frame.
A pgina principal das frames
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="subordinada01.htm" name="subordinada01">
<FRAME SRC="subordinada02.htm" name="subordinada02">
</FRAMESET>
</HTML>
A pgina principal contm duas frames subordinadas "subordinada01" e "subordinada02".
A frame subordinada01.htm
<HTML>
<BODY>
<FORM name="form1">
<INPUT TYPE="TEXT" NAME="en" value=" ">
</FORM>
</BODY>
</HTML>
A frame subordinada02.htm
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!-function affi(form) {
parent.subordinada01.document.form1.en.value=document.form2.out.value
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Escreve um valor e clica em "Enviar".
<FORM NAME="form2" >
<INPUT TYPE="TEXT" NAME="out">
<INPUT TYPE="button" VALUE="Enviar" onClick="affi(this.form)">
</FORM>
</BODY>
99/154
14/8/2014
Apostila Javascript
</HTML>
Os dados introduzido pelo utilizador encontra-se pelo caminho document.form2.out.value. Transfere-se
estes dados na zona de texto da outra frame. Para isso, temos de especificar o caminho completo. Primeiro a
zona de texto encontra-se na frame subordinada chamada subordinada01. Ento o caminho comea por
parent.subordinada01. Nesta frame encontra-se um documento que contm um formulrio (form1) que
contm por sua vez uma zona de texto (en), que tem como propriedade value. o que faz, que o caminho seja
document.form1.en.value. E a expresso completa ser:
parent.subordinada01.document.form1.en.value=document.form2.out.value
Resultado:
Comunicao da janela modal

Eis um exemplo de mtodo JavaScript para abertura de janela modal para funcionar nos dois navegadores.
dialogHeight: valor em px
dialogLeft: valor em px
dialogTop: valor em px
dialogWidth: valor em px
100/154
14/8/2014
Apostila Javascript
center: (yes | no | 1 | 0 | on | off)

dialogHide: (yes | no | 1 | 0 | on | off)
edge: (sunken | raised)
help: (yes | no | 1 | 0 | on | off)
resizable: (yes | no | 1 | 0 | on | off)
scroll: (yes | no | 1 | 0 | on | off)
status: (yes | no | 1 | 0 | on | off)
unadorned: (yes | no | 1 | 0 | on | off)
Arquivo: pagina1.html
<html>
<head>
<title>Exemplo de Janela Modal</title>
function AbreModal(url)
{
window.showModalDialog(url,window,"dialogWidth:300px;dialogHeight:200px;");
}
</script>
</head>
<body>
<b>Exemplo de Janela Modal</b>
<form name="formTexto">
Informe um texto:
<input type="text" name="txtTexto">
<input type="button" value="Procurar..." onClick="AbreModal('pagina2.htm')">
</form>
</body>
</html>
Arquivo: pagina2.html
<html>
<head>
<title>Exemplo de Janela Modal</title>
function EscreveValor()
{
if(window.navigator.appName!="Netscape"){
101/154
14/8/2014
Apostila Javascript
// Para Internet Explore

var vFormPai = window.dialogArguments;
vFormPai.formTexto.txtTexto.value = document.formValor.txtValor.value;
} else {
// Para Netscape
window.opener.document.formTexto.txtTexto.value = document.formValor.txtValor.value;
}
self.close();
}
</script>
</head>
<body>
<b>Exemplo de Janela Modal</b>
<form name="formValor">
Informe um valor:
<input type="text" name="txtValor"><br>
<input type="button" value="Enviar valor e fechar" onClick="EscreveValor()">
</form>
</body>
</html>
Exemplo:
102/154
14/8/2014
Apostila Javascript
Eventos do formulrio
Evento qualquer ao ou ocorrncia, em geral provocada pelo usurio, qual o programa possa
responder. Por exemplo: o precionamento de uma tela ou a movimentao do mouse. Se um usurio d um
clique no boto do mouse, este evento (de clicar o mouse) gera uma mensagem.
Veja alguns eventos mais comuns:
Elemento
Evento
<body> ou <frameset>
onLoad
OnUnLoad
<form>
onSubmit
Boto de comando
onClick
Boto Reset
onClick
Boto Submit
onClick
Boto de opo
onClick
Caixa de seleo
onClick
103/154
14/8/2014
Apostila Javascript
Hiperlink
onClick
Imagem ou Hiperlink
onMouseOver
onMouseOut
Caixa de texto ou
rea de texto
onBlur
onChange
onFocus
onSelect
Caixa de combos ou
Caixa de listagem
onBlur
onChange
onFocus
Veja o funcionamento de cada evento:
onLoad = script
O evento onLoad ocorre quando o usurio termina de carregar uma janela ou todos os fremes dentro de um
FRAMESET. Esse atributo pode ser usado com os elementos BODY e FRAMESET.
onUnLoad = script
O evento onUnLoad ocorre quando o usurio remove ou abandona um documento de uma janela ou frame.
Esse atributo pode ser usado com os elementos BODY e FRAMESET.
onSubmit = script
O evento onSubmit ocorre quando um formulrio enviado. Ele s se aplica ao elemento FORM.
onReset = script
O evento onReset ocorre quando um formulrio redefinido. Ele s se aplica ao elemento FORM.
onClick = script
104/154
14/8/2014
Apostila Javascript
O evento onClick ocorre quando o bot do mouse clicado sobre um elemento. Esse atributo pede ser
usado com a maioria dos elementos.
onDblClick = script
O evento onDblClick ocorre quando o boto do mause clicado duas vezes sobre um elemento. Esse
atributo pode ser usado com a maioria dos elementos.
onMouseOver = script
O evento onMouseOver ocorre quando o cursor movido sobre um elemento. Esse atributo pode ser usado
com a maioria dos elementos.
onMouseOut = script
O evento onMouseOut ocorre quando o cursor movido para fora de um elemento. Esse atrubuto pode ser
onFocus = script
O evento onFocus ocorre quando um elemento recebe o foco, seja pelo mouse ou pela navegao com
tabulao. Esse atrubuto pode ser usado com os seguintes elementos: INPUT, SELECT, TEXTAREA e
BUTTON.
onBlur = script
O evento onBlur ocorre quando um elemento perde o foco, seja pelo mouse ou pela navegao com
tabulao. Ele pode ser usado com os mesmo elementos de onFocus.
onChange = script
105/154
14/8/2014
Apostila Javascript
O evento onChange ocorre quando um controele perde o foco de entrada e seu valor foi modificado desde
que ele ganhou o foco. Esse atrubuto se aplica aos seguintes elementos: INPUT, SELECT e TEXTAREA.
onSelect = script
O evento onSelect ocorre quando um usurio seleciona algum texto em um campo de texto. Esse atributo
pode ser usado com os elementos INPUT e TEXTAREA.
onMouseDown = script
O evento onMouseDown ocorre quando o boto do mouse precionado sobre um elemento. Esse atributo
pode ser usado com a maioria dos elementos.
onMouseUp = script
O evento onMouseUp ocorre quando o boto do mouse liberado sobre um elemento. Esse atributo pode
ser usado com a maioria dos elementos.
onMouseMove = script
O evento onMouseMove ocorre quando o cursor movimentado quando est sobre um elemento. Esse
atributo pode ser usado com a maioria dos elementos.
onKeyPress = script
O evento onKeyPress ocorre quando uma tecla pressionada e liberada sobre um elemento. Esse atributo
pode ser usado com a maioria dos elementos.
onKeyDown = script
106/154
14/8/2014
Apostila Javascript
O evento onKeyDown ocorre quando uma tecla pressionada sobre um elemento. Esse atributo pode ser
onKeyUp = script
O evento onKeyUp ocorre quando uma tecla liberada sobre um elemento. Esse atributo pode ser usado
com a maioria dos elementos.
Eventos de teclado
No podem ser usados com os elemento base, bdo, br, frame, frameset, head, html , iframe, meta, param,
script , style, e title.
ATRIBUTO VALOR
DESCRIO
onkeydown script
Script a executar quando uma tecla pressionada
onkeypress
script
Script a executar quando uma tecla pressionada e seguidamente libertada
onkeyup
script
Script a executar quando uma tecla libertada
Eventos do mouse
No podem ser usados com os elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style e title.
ATRIBUTO VALOR
DESCRIO
onclick
script
Script a executar quando detectado um clique no rato
ondblclick
script
Script a executar quando detectado um clique duplo no rato
onmousedown script
Script a executar quando o boto do rato pressionado
onmousemove script
Script a executar quando o ponteiro do rato muda de posio
onmouseout
script
onmouseover script
onmouseup
script
Script a executar quando o ponteiro do rato deixa de estar sobre um elemento

Script a executar quando o ponteiro do rato passa a estar sobre um elemento
Script a executar quando o boto do rato libertado
Vamos deixar de teoria de lado e vamos para a prtica:

107/154
14/8/2014
Apostila Javascript
1 - Evento onClick
Este o evento mais usado.

O evento onClick ocorre quando um objeto de um formulrio do tipo button, checkbox, radio, link, reset ou
submit clicado. Esse evento controlado pelo gerenciador da linguagem Javascript, como mostra os
exemplos a seguir:
<input type="button" value="Calcula" onClick="processa(this.form)">
<input type="button" value="Azul" onClick="document.bgColor='blue'">
Exemplo 1: Ativando caixa de alerta:
<html>
<head>
<title> onClick - 01 </title>
</head>
<body>
<form>
<center>
<input type="button" value="No aperte este boto" onClick="alert('Curisidade Mata! O seu disco rgido
est sendo formatado')">
<hr>
<h2> Prova </h2> </center>
1. Quem descobriu o Brasil?
<input type="button" value="A" onClick="alert('A: Volte para a escola!')">
Vasco da Gama
<input type="button" value="B" onClick="alert('B: Correto.')">
Pedro lvares Cabral
<input type="button" value="C" onClick="alert('C: Este descobriu a Amrica')">
Cristvo Colombo
<hr>
2. Qual a raz quadrada de 16?
<input type="button" value="Resposta" onClick="alert(eval(Math.sqrt(16)))">

</form>
108/154
14/8/2014
Apostila Javascript
</body>
</html>
Exemplo 2 - Alterando propriedades
<html>
<head>
</head>
<body>
<center>
<h2>Usando onClick para alterar propriedades </h2>
<hr>
<form>
<input type="button" value="Vermelho" onClick="document.bgColor='red'">
<input type="button" value="Ciano" onClick="document.bgColor='cyan'">
<input type="button" value="Azul" onClick="document.bgColor='blue'">
<input type="button" value="Cinza" onClick="document.bgColor='silver'">
<hr>
Cinza: <input type="radio" name="bgcolor" onClick="document.bgColor='gray'">
Azul: <input type="radio" name="bgcolor" onClick="document.bgColor='blue'">
Verde: <input type="radio" name="bgcolor" onClick="document.bgColor='lightgreen'">
Ciano: <input type="radio" name="bgcolor" onClick="document.bgColor='cyan'">
</form>
</center>
</body>
</html>
Exemplo 3: Alterando o contedo de outros campos:
<html>
109/154
14/8/2014
Apostila Javascript
<head>
d= eval(document.calculo.campo1.value)+
}
d= eval(document.calculo.campo1.value)*
eval(document.calculo.campo2.value)*
}
</script>
</head>
<body>
<h2> Usando onClick para alterar o contedo de outro campo </h2>
<hr>
<center>
<input type="button" value="Soma" onClick="processa1()">
<input type="button" value="Multiplica" onClick="processa2()">
<hr>
Resultado: <input type="text" name="campo4" value="" size="10" maxlength="10">
</center>
</form>
</body>
</html>
2 - Evento onLoad
O evento onLoad ocorre quando voc carrega uma pgina ou documento. Por exemplo, voc clicou no
boto back ou voltar do browser ou clicou em um hiperlink. O gerenciador onLoad responsvel por esse
evento. Ele pode pertencer ao objeto window e no ao objeto document, como voc poderia imaginar:
<body onLoad="rotinadeabertura()">
Exemplo:
<html>
<head>
<title>Teste</title>
</head>
function jump() {
110/154
14/8/2014
Apostila Javascript
window.open("pag2.html");
}
</script>
<body onLoad="jump()">
</body>
</html>
3 - Evento onUnLoad
O evento onUnLoad ocorre quando voc abandona uma pgina ou documento; por exemplo, quando clica
no boto back ou voltar do Browser ou em um hiperlink.
O gerenciador onUnLoad responsvel por este evento. Ele pode ser especificado no comando <body> ou
<frameset> e pertence ao objeto window, e no ao objeto document como voc poderia imaginar.
Exemplo:
<body onUnLoad="rotinadefechamento()">
Vejamos um exemplo funcional para esses dois eventos. Criando trs pginas chamadas respectivamente de
pag01.htm, pag02.htm e pag03.htm.
O documento pag01.htm contm o comando:
<body onunload="alert('Voc ainda est na pgina pag01 e vai carregar a pgina pag02.')">
<a href="pag02.htm">Pag02</a>
</body>
Ao clicar em um link para a pgina seguinte, o mtodo alert ser executado antes do carregamento da
prxima pgina.
A pgina pag02.htm contm apenas dois links, um para a pgina anterior e outro para a pgina posterior
pag03.htm. A pgina pag03.htm possui o comando:
<body onload="alert('Voc est na pgina Pgina pag03')">
Que exibe a caixa de dilogo com a mensagem durante o carregamento da pgina.
4 - Evento onSubmit
O evento onSubmit ocorre quando o usurio preciona o boto Enviar do formulrio. Usando o gerenciador
de eventos onSubmit voc pode executar algum precedimento especial antes de enviar o formulrio e at
mesmo evitar que o formulrio seja preenchido.
Para evitar o envio do formulrio acrescente o comando "return false" dentro do cdigo associado ao
gerenciador onSubmit. Se ocomando return for omitido ou outro valor for especificado, o formulrio ser
enviado.
111/154
14/8/2014
Apostila Javascript
No exemplo abaixo, o gerenciador onSubmit executa o comando return, que executar a funo
testacampo(), que por sua vez dever retornar o valor false para evitar o envio do formulrio ou outro valor
qualquer para envi-lo.
<form onSubmit="return testacampo(this)">
O exemplo a seguir mostra o gerenciador em ao. No comando Form acrescentamos o gerenciador

onSubmit:
<form name="ficha" onSubmit="return testacampo()">
Que ativa a funo testacampo() quando o boto de envio precionado. Essa funo verifica se todos os
campos possuem algum contedo digitado testando o tamento dos campos. Caso algum deles no tenha sido
preenchido, a funo exibe uma caixa de dilogo de alerta e retorna False, evitando o envio do formulrio.
Caso contrrio, exibe uma mensagem informando que todos os campos est preenchidos e envia o
formulrio aps o retorno de true. Na prtica voc pode optar por consistir cada campo individualmente
usando os gerenciadores onClick, onChange e onBlur, optar por fazer uma consistncia geral ou, ainda,
combinar os dois mtidos, pois um usurio pode preencher os dados solicitados em um formulrio e
pressinar o boto de envio sem ter preenchido nehum campo, exemplo:
<html>
<head>
<title> onSubmit </title>
</head>
function testacampos() {
if( document.ficha.campo1.value.length==0 |
document.ficha.campo2.value.length==0 |
document.ficha.campo3.value.length==0)
{
alert("todos os campos do formulrio devem ser preenchidos");
return false;
} else {
alert("todos os campos do formulrio foram preenchidos");
return true;
}
}
</script>
<body>
<h2>Preencha seus dados abaixo </h2>
<form onSubmit="return testacampos()" name="ficha" action="formulario.php" method="post">
nome: <input type="text" name="campo1" value=""> <br>
112/154
14/8/2014
Apostila Javascript
Endereo: <input type="text" name="campo2" value=""> <br>

Cidade: <input type="text" name="campo3" value=""><br>
<center><input type="submit" value="Enviar"></center>
</form>
</body>
</html>
Em certas circunstocias pode ser til submeter um form, mesmo sem utilizar um boto submit, como era
tradicional no Html. Vejamos o seguinte exemplo:
<html>
<head>
<title>Teste</title>
</head>
<body>
function mudou(form) {
form.submit();
}
</script>
<form method="post" action="mailto:fulano@beltrano.com">
Qual o seu nome? <input type="text" name="texto" onChange="mudou(this.form)">
</form>
</body>
</html>
Neste caso, logo que exista um evento change associado ao campo texto, preduzida uma ao de subit
equivalente ao de pressionar o boto submit, mesmo sem este existir! Esta ao pode ser produzida com um
simples ENTER aps o preenchimento do campo. Uma vez que o form est sendo submetido via e-mail, o
usurio notificado pelo brewser dos riscos de segurana (este mecanismo de aviso pede ser desligado nas
opes do browser www).
5 - Evento onMouseOver
O evento onMouseOver pertence ao objeto Link. Toda vez que o cursor do mouse posicionado sobre um
link, o gerenciador de eventos onMouseOver ativado, caso tenha sido especificado no comando. Como
padro, quando posicionamos o cursor sobre um link, a barra de status da janela do browser mostra o
endereo do link. O cdigo associado ao gerenciador deve sempre conter o comando return true para que
fincione corretamente.
O prximo exemplo mostra o uso desse gerenciador em duas situaes. Na primeira, ele cria um link falso
no qual o evento usado para alterar a cor de fundo do formulrio. Se voc pocisionar o cursor sobre a
palavra vermelho o fundo passar a ter essa cor; o mesmo ocorre com as palavras ciano e verde. Nos dosi
links, mostramos em seguida, ao passar o cursor sobre eles, aparecer uma mensagem especfica na linha de
status da janela. Uma vez colocada essa mensagem na linha de status, ela permanece l at que outro link
receba o cursor sobre ele.
113/154
14/8/2014
Apostila Javascript
<html>
<head>
<title> onMouseOver </title>
</head>
<body>
Esta pgina contm um link para a pgina chamada pag03 e outro para a pgina pag01 <br>
<a href="" onMouseOver="document.bgColor='red'">Vermelho</a>
<a href="" onMouseOver="document.bgColor='cyan'">Cyan</a>
<a href="" onMouseOver="document.bgColor='lightgreen'">Verde</a>
<hr>
<a href="pag03.htm" onMouseOver="window.status='Esta pgina pode conter material imprprio para
menores'; return true">Vai para a pgina 03</a>
<a href="pag01.htm" onMouseOver="window.status='Esta pgina pode conter material imprprio para
maiores'; return true"> Vai para a pgina 01</a>
</body>
</html>
6 - Evento onBlur
O evento onBlur ocorre quando um campo no est mais sob o foco. Por exemplo, quando voc digita o
contedo de um campo do tipo texto e pressiona a tecla Tab para avanar para outro campo, ou quando
clica em um outro objeto do formulrio, fazendo com que o campo atual no seja mais o objeto ativo do
programa. Os objetos que geram esse evento so: select, text e textarea.
Sintaxe:
onBlur="cdigo a ser executado"
Quando um formulrio precisa ser preenchido e alguns dos campos so obrigatrios, o gerenciador de
eventos onBlur perfeito para criar uma consistncia genrica entre os campos. Veja o exemplo a seguir, no
qual, em um formulrio com cinco campos, o usurio no pode deixar de preencher trs deles. Nos campos
cdigo, nome e telefone foi adicionado o evento onBlur. nos campos mencionados, quando o usurio
pressiona Tab para avanar para outro campo, onBlur ativado e executa a funo campovital(), passando
como argumento uma cpia do objeto atual (o campo do tipo text), representada pela palavra chave this.
A funo campovital recebe o objeto e testa se o contedo da propriedade valor igal a "", ou seja, nada foi
atribudo ao campo. Se isso form verdade, ele exibe uma caixa de dilogo de alerta sugernido o
prenchimento daquele campo. Note que na mensagem usamos a propriedade x.name para exibir o nome do
campo.
<html>
<head>
<title> onBlur</title>
function campovital(x) {
if (x.value=="") {
alert("O campo "+ x.name+" no pode ser deixado em branco")
}
}
</script>
114/154
14/8/2014
Apostila Javascript
</head>
<body>
<form>
<br> Cdigo: <input type="text" name="codigo" value="" size="5" maxlength="5" onBlur="campovital(this)">
<br> Nome: <input type="text" name="nome" value="" size="30" maxlength="0" onBlur="campovital(this)">
<br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="0">
<br> Telefone: <input type="text" name="telefone" value="" size="15" maxlength="0"
onBlur="campovital(this)">
<br> Ramal: <input type="text" name="ramal" value="" size="4" maxlength="0">
</form>
</body>
</html>
Execute o programa. Deixe um dos campos obrigatrios sem preencher e precione Tab o clique em outro
campo. A mensagem ser exibida imediatamente.
7 - Evento onChange
O evento onChange ocorre quando um campo do tipo select, text ou textarea perde o foco e seu contedo
alterado. Ele diferente do evento onBlur, que ocorre sempre que o campo perde o foco independente de
ter seu contedo alterado. O prximo exemplo mostra o uso do gerenciador onChange. no campo nome, ele
foi especificado para ativar uma funo que verifica a quantidade de caracteres digitados e se for menor do
que 5, exibe uma mensagem de erro.
Veja o cdigo do programa:
<html>
<head>
<title>onChange</title>
function testanome(x){
if(x.value.length<5){
alert("O campo "+x.name+" no pode ter menos do que 5 caracteres")
}}
</script>
</head>
<body>
<form>
<h2> Textando alteraes em um campo com onChange</h2>
<br> Cdigo: <input type="text" name="codigo" value="" size="5" onChange="testanome(this)">
<br> Nome: <input type="text" name="nome" value="" size="30" maxlength="30"
onChange="testanome(this)">
<br> Telefone: <input type="text" name="telefone" value="" size="15" maxlength="30"
onChange="testanome(this)">
<br> Ramal: <input type="text" name="ramal" value="" size="4" maxlength="0">
115/154
14/8/2014
Apostila Javascript
</form>
</body>
</html>
8 - Evento onFocus
Este evento ocorre quando um campo recebe o foco de entrada ou digitao pelo pressionamento da tecla
Tab no campo anterior, Shift+Tab do campo pesterior ou pelo clique do mouse. Ele atua sobre campos do
tipo select, text e textarea.
Vomos analizar o cdigo do prximo exemplo, que solicita a digitao de cinco campos. Os trs primeiros
so os que devero receber um nmero. O campo 4 um campo que recebe automaticamente a somatria
dos campos anteriores, mas que permite a digitao de outro valor. A somatria dos campos feita pela
funo precessa1(), que automaticamente executada quando o campo recebe o foco de digitao. Ns
tambm aproveitamos para acrescentar o evento onBlur nos campos de 1 a 3 para fazermos um teste. Se o
campo permanecer em branco assumido o valor 0 para ele. Dessa forma evitamos um erro de Javascript
na hora de somar um dos campos que eventualmente foi deixado em branco.
O ltimo campo, chamado comentrio, mostra uma caixa de alerta assim que recebe o foco, avisando que
seu preenchimento obrigatrio.
<html>
<head>
<title>onFocus</title>
d = eval(document.calculo.campo1.value)+
}
</script>
</head>
<body>
<h2> Usando onFocus para executar clculos e mensagens </h2>
Campo 1: <input type="text" name="campo1" value="" size="10" maxlength="10" onBlur='if(this.value=="")
{this.value=0}'> <br>
Resultado: <input type="text" name="campo4" value="" size="10" onFocus="processa1()"> <br>
Comentrio: <input type="text" name="campo5" value="" size="30" onFocus="alert('Este campo de
comentrio deve ser preenchido')">
</form>
</body>
</html>
116/154
14/8/2014
Apostila Javascript
9 - Evento onSelect
O evento onSelect ocorre quando um texto de um campo do tipo text ou textarea selecionado. O
gerenciador onSelect responsvel por este evento.
Veja como um comando usa on Select:
<input type="text" value="" name="campo1" onSelect="altera()">
O exemplo a seguir exibe a ativao de caixa de alerta quando um texto do segundo campo selecionado.
<html>
<head>
<title> onSelect </title>
</head>
<body>
<form>
<h2> Testando alteraes em um campo com onSelect</h2>
<br> cdigo: <input type="text" name="codigo" value="" size="5" maxlength="5">
<br> nome: <input type="text" name="nome" value="" size="30" maxlength="30" onSelect="alert('Campo
com texto selecionado')">
</form>
</body>
</html>
Usando um menu para acessar outra pgina:
Para personalizar a rotina, basta substituir os nomes dos sites na matriz itens e os endereos correspondentes
na matriz URL.
<html>
<head>
<title>Menu Select: Acessando outras pginas </title>
function criamatriz() {
this.length=criamatriz.arguments.length
for(var i=0; i<this.length; i++)
this[i+1]=criamatriz.arguments[i]
}
var itens=new criamatriz("Escolha um site para visitar:",
117/154
14/8/2014
Apostila Javascript
"Uol",
"Microsoft",
"Oracle",
"Borland",
"CNN");
var url=new criamatriz("",
"http://www.uol.com.br",
"http://www.microsoft.com",
"http://www.oracle.com",
"http://www.borland.com",
"http://www.cnn.com");
function vaipara(form1) {
i=form1.lista.selectedIndex;
if (i==0) return;
window.location.href=url[i+1];
}
</script>
</head>
<body>
<h1>Lista de home page </h1>
<hr>
document.write("<form>")
document.write('<select name="lista" onChange="vaipara(this.form)">');
var tot=itens.length;
for(var i=1; i<=tot; i++)
document.writeln("<option>"+itens[i]);
document.writeln('</select>');
document.writeln('</form>');
</script>
O uso de uma lista de seleo para acessar outras pginas muito til, principalmente se a pgina tiver pouco
espao disponvel. alm disso, uma forma elegante para mudar de pgina.
</body>
</html>
Propriedades do formulrio
Propriedades so atributos de um objeto que definem sua aparncia e comportamento, tais como sua
posio, cor, forma e nome.
Prefixos
Para identificar os elementos do formulrio, as trs primeirasl letras do nome do formulrio - frm - form
colocadas propositadamente como um prefixo para indicar que o objeto nomeado um formulrio. Esta no
uma regra obrigatria, mas ir facilitar a compreeno do cdigo de programao. Pesteriormente voc ir
118/154
14/8/2014
Apostila Javascript
utilizar outros tipos de objetos que tambm sero identificados com nomes iniciados por prefixos, por
exemplo, uma caixa de texto que ter seu nome iniciado por "txt".
padronizar os programas facilita a compreenso de seus cdigos.
Tipo de Objeto Prefixo Definio
Form
frm
Formulrio
Button
btn
Boto de Comando
Text
txt
Caixa de texto
Label
lbl
Rtulo
Textarea
txa
rea de texto
Radio
rad
Boto de opo
Checkbox
chk
Caixa de seleo
Select
cbo
Caixa de combos
Select + Size
lst
Caixa de listagem
Img
img
Imagem
Password
pss
Senha
Menu
mnu
Menu
Vejamos as propriedades de cada objeto:

a) Elemento boto
<input type="button" name="nome do boto" value="texto do boto" [onClick="cdigo javascript"]>
Propriedades
name
Nome do elemento
value
Valor contido no elemento
Exemplo:
<input type="button" name="btn_botao" value="Verdadeiro"
onClick='if(document.frm_teste.btn_botao.value=="Verdadeiro") {
document.frm_teste.btn_botao.value="Falso"
} else {
document.frm_teste.btn_botao.value="Verdadeiro"
}'>
</form>
b) Elemento submit
<input type="submit" name="nome do submit" value="texto do submit" [onClick="cdigo Javascript"]>
119/154
14/8/2014
Apostila Javascript
Propriedades
name
Nome do elemento
value
valor contido no elemento
c) Elemento reset
<input type="reset" name="nome do reset" value="texto do reset" [onClick="cdigo Javascript"]>
Propriedades
name
Nome do elemento
value
d) Elemento text
<input type="text" name="nome do texto" value="valor do texto" size=inteiro
[onBlur="cdigo Javascript"] [onChange="cdigo Javascript"]
[onFocus=="cdigo Javascript"] [onSelect="cdigo Javascript"] >
Propriedades
defaultValue
Indica o valor inicial que vai aparecer na zona de texto (especificado como parametro da
marca Html <input ...> )
name
Nome do elemento
value
Exemplo 1:
Digite seu nome: <input type="text" name="txt_nome" value="">
<input type="button" name="btn_botao" value="Resultado"
onClick='document.frm_teste.txt_nome.value=prompt("Seu nome "+document.frm_teste.txt_nome.value+",
digite um outro nome.", "");'>
</form>
Exemplo 2:
function campo(x) {
alert(x.name+" = "+x.value)
}
</script>
<form>
Nome: <input type="text" name="txt_nome" value="Joo" onBlur="campo(this)"><br>
120/154
14/8/2014
Apostila Javascript
Endereo: <input type="text" name="txt_endereco" value="Rua: Augusta n 555" onBlur="campo(this)">

<br>
Telefone: <input type="text" name="txt_telefone" value="9999-8888" onBlur="campo(this)">
</form>
e) Elemento textarea
<textarea name="nome da rea de texto"
rows=inteiro
cols=inteiro
[onBlur="cdigo Javascript"] [onChange="cdigo Javascript"]

[onFocus="cdigo Javascript"] [onSelect="cdigo Javascript"]
Propriedades
defaultValue
Indica o valor inicial que vai aparecer na zona de texto (especificado como parmetro da
marca Html <input ...>)
name
Nome do elemento
value
Exemplo:
function teste(frm_form) {
frm_form.txa_teste.value="\tO livro: \"Manual Prtico do Programador\". \nEst nas livrarias e \\ ou
jornaleiros."
}
</script>
<form>
<center>
<textarea name="txa_teste" cols="30" rows="10">
</textarea><br>
<input type="button" value="testando" onClick="teste(this.form)">
</center>
</form>
f) Elemento password
<input type="password" name="nome da senha" [value="texto da senha"] size=inteiro>
Propriedades
defaultValue Formece uma cadeia padro se nenhuma outra for fornecida
name
Nome do elemento
value
valor contido no elemento
Eventos
onFocus
onBlur
onSelect
121/154
14/8/2014
Apostila Javascript
Exemplo:
<form name="frm_form">
Digite a senha: <input type="password" name="pss_senha">
<input type="button" name="btn_senha" value="Sua senha ?" onClick="alert('Sua senha : ' +
document.frm_form.pss_senha.value)">
</form>
g) Elemento hidden
<input type="hidden" name="Nome do elemento oculto" value="Texto do elemento oculto">
Propriedades
defaultValue
Esta propriedade armazena o valor padro que o elemento oculto armazena se nenhuma outra
informao for fornecida
name
Nome do elemento
value
Valor do elemento
Obs: esta propriedade no usa nenhum evento.

Exemplo:
<input type="hidden" name="oculto" value="Rio de Janeiro">
<input type="button" name="btn_botao" value="Texto oculto" onClick="alert('Mostrar o texto oculto: '+
document.frm_teste.oculto.value);">
</form>
h) Elemento caixa de seleo
<input type="checkbox" name="nome da caixa de seleo" value="valor da caixa de seleo" [checked]
[onClick="cdigo Javascript"] > Texto da caixa de seleo
Propriedades
checked
Esta propriedade reflete o estado da caixa, se est selecionada (verdadeiro) ou no (falso)
defaultChecked
Esta propriedade determina qual o estado padro da caixa. true para selecionado e false
para deselecionado
name
Nome do elemento
value
Exemplo:
<input type="checkbox" name="chk_opcao">Caixa selecionada / deselecionada<br>
<input type="button" name="btn_teste" value="selecionar/deselecionar"
onClick="if(document.frm_teste.chk_opcao.checked==true) {
document.frm_teste.chk_opcao.checked=false
} else {
122/154
14/8/2014
Apostila Javascript
document.frm_teste.chk_opcao.checked=true
}"
>
</form>
i) Elemento radio
<input type="radio" name="nome do grupo" value="valor do boto" [checked]
[onClick="cdigo Javascript"] > Texto do boto radio
Propriedades
checked
Esta propriedade contm o valor booleano do estado do boto de rdio; verdadeiro para
selecionado, falso para deselecionado.
defaultChecked
Esta propriedade indica se este o boto padro que deve ser selecionado entre os
botes de rdio do grupo.
index
Esta propriedade indica qual o elemento este boto de rdio no grupo corrente substitui
por est selecionado.
length
Esta propriedade indica o nmero de botes de rdio no grupo
name
Nome do elemento
value
Exemplo:
<input type="radio" name="rdo_valor" value="1 Item" checked>Item 1<br>
<input type="radio" name="rdo_valor" value="2 Item">Item 2<br>
<input type="button" name="btn_teste" value="Teste"
onClick="if(document.frm_teste.rdo_valor[0].checked==true) {
document.frm_teste.rdo_valor[1].checked=true
} else {
document.frm_teste.rdo_valor[0].checked=true
}
"><br>
Valor do Item 1:<input type="text" value="" name="txt_texto">
</form>
var y=document.frm_teste.rdo_valor[0].value
document.frm_teste.txt_texto.value=y
document.write("Quantidade de tens do boto de rdio: "+document.frm_teste.rdo_valor.length)
</script>
j) Elemento select
123/154
14/8/2014
Apostila Javascript
<select name="nome do seletor" [size=inteiro] [multiple]

[onBlur="Cdigo Javascript"] [onChange="Cdigo Javascript"] [onFocus="Cdigo Javascript"]>
<option [selected]> Opo da seleo
<option> Selees adicionais
</select>
Propriedades
length
Nmero de elementos da lista de seleo
name
nome do elemento
option
Esta uma matriz de diferentes opes disponveis para escolha. A matriz vai de option[0]
para a primeira alternativa a option[n-1] para a ltima
selectedIndex
na lista de escolha. Se o atributo multiple estiver ativada, ento alterar o valor de

selectedIndex limpa todas as demais alternativas j que o ndice se refere nica opo
claro, a matriz de opes tambm na verdade uma matriz de objetos, que possuem suas prprias
propriedades. Cada opo individual em um elemento select possui as seguintes propriedades:
Propriedades do option
defaultSelected
Este um valor booleano indicando se a opo est selecionada automaticamente ou

deselecionada quando aparecer.
index
Indica onde na lista de opes a alternativa corrente est localizada
selected
Indica se a opo est corretamente selecionada
text
Contm o texto apresentado para cada opo
value
esta propriedade contm os dados enviados ao servidor a partir da lista de seleo quando
o boto submeter for precionado.
Para acessar os elementos individuais das opes em um elemento select, podemos usar o nome do objeto
select:
selectName.option[ndice].propriedade
function selecao() {
var x=document.frm_teste.lst_lista.selectedIndex
var y=document.frm_teste.lst_lista[x].value
document.frm_teste.txt_texto.value=y
}
</script>
<select name="lst_lista">
<option value="A">Item 1
124/154
14/8/2014
Apostila Javascript
<option value="B">Item 2
<option value="C">Item 3
<option value="D">Item 4
<option value="E">Item 5
</select>
<input type="button" name="btn_teste" value="Teste"
onClick="selecao()">
<input type="button" value="Selecionar item 5" name="btn_selecao"
onClick="document.frm_teste.lst_lista[4].selected=true">
<input type="text" name="txt_texto" value="">
</form>
Adicionando, removendo e renomeando select:
Obs: este cdigo est em Dhtml
<html>
<head>
<script type="text/javascript">
function adicionar(campo)
{
var x=document.getElementById("mySelect"); //retorna o objeto select
var options = x.getElementsByTagName("option"); //pega a lista de options do select
if (x.selectedIndex>=0)
{
var y=document.createElement('option'); //cria um novo elemento option
y.text=campo; //seta o texto do elemento option
y.value=options.length; //seta o valor do elemento option
var sel=x.options[x.length]; //pega o indice selecionado do objeto select
try
{
x.add(y,sel); // adiciona um novo option antes do indice selecionado para navegadores complacentes
}
catch(ex)
{
125/154
14/8/2014
Apostila Javascript
x.add(y,x.length); // adiciona um novo option antes do indice selecionado para o IE

}
}
}
function remover()
{
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
function renomear(campo) {
x = document.getElementById("mySelect").selectedIndex
document.getElementById("mySelect")[x].text = campo
}
</script>
</head>
<body>
<form name="formulario">
<input type="text" name="campo">
<select id="mySelect">
<option value="0">Maa</option>
<option value="1">Melo</option>
<option value="2">Banana</option>
<option value="3">Laranja</option>
</select>
<input type="button" onClick="adicionar(document.formulario.campo.value)" value="Adicionar" />
<input type="button" onClick="remover()" value="Remover">
<input type="button" onClick="renomear(document.formulario.campo.value)" value="Renomear" />
</form>
</body>
</html>
Biblioteca de funes
O Javascript possui um conjunto bastante vasto de funes com aplicao especfica.
As funes so muito vantajosas para o usurio, pois permitem diminuir o tempo gasto na elaborao de
formulrios, assim como eventuais erros na sua concepo.
As funes do Javascript agrupam-se em:
Funes matemticas;
Funes tipo string;
Funes tipo data;
Funes tipo hora;
Funes do sistema operacional;
126/154
14/8/2014
Apostila Javascript
Banco de dados;
Outras funes.
As funes do Javascript tem a seguinte sintaxe:
= nomedafuno(argumentos)
Os tipos de argumentos variam de funo para funo e em relao s necessidades de clculo do usurio.
Os tipos de argumentos mais utilizados so: variveis numricas, variveis strings, variveis booleanas, arrays
e propriedades.
Exemplos (tericos) de funes:
Inicio
escreva( Potencia(2, 6) )
escreva( Soma(12, 36) )
escreva( Media(8, 3) )
Fim
Funes Matemticas
Para auxiliar os clculos matemticos, alm dos operadores matemticos de adio, subtrao, multiplicao
e diviso existem outras funoes matemticas.
Algumas funes so comuns, tais como: raiz quadrada, potnciao, mdulo, etc. Outras exigem
conhecimento a nvel de 2 grau tais como: trigonometria e logartmos.
Vejamos
Covertendo string para numrica
Calcula o contedo da string
Exemplo:
eval
resultado=eval("(10*20)+2-8")
document.write(resultado)
Resultado: 194
Transforma string em inteiro

parseInt
Exemplo:
valor=parseInt("79.65732")
127/154
14/8/2014
Apostila Javascript
document.write(valor)
Resultado: 79
Transforma string em nmero real

parseFloat
Exemplo:
valor=parseFloat("79.65732")
document.write(valor)
Resultado: 79.65732
Arredondando valores
Math.floor(nmero) - Devolve o inteiro anterior menor que "nmero" 32.5 torna-se 32 e -24.8 tornase -24.
Math.ceil(nmero) - Devolve o inteiro maior que o "nmero" 32.5 torna-se 33 e -24.8 torna-se -25.
Math.round(nmero) - Arredonda "nmero" para o inteiro mais prximo. Se a poro decimal do
nmero for 0.5, o nmero arredonda para cima.
Funes matemticas comuns
Math.random() - Devolve um nmero aleatrio entre 0 e 1.
Math.abs(nmero) - Valor absoluto do "nmero", ou seja, sempre o valor idependente do sinal
(positivo ou negativo) -4 fica igual a 4.
Math.max(num1, num2) - Devolve o nmero maior dos nmeros "num1" e "num2".
Math.min(num1, num2) - Devolve o nmero menor dos nmeros "num1" e "num2".
Math.pow(num, expoente) - Devolve "num" elevado a "expoente".
Math.sqrt(nmero) - Raiz quadrada de "nmero".
Math.SQRT1_2 - Raiz quadrada de 1/2 (aproximadamente 0.7071067811865476).
Math.SQRT2 - Raiz quadrada de 2 (aproximadamente 1.4142135623730951).
Funes trigonomtricas
Math.PI - Retorma o valor de PI (aproximadamente 3.141592653589793).
Math.sin(nmero) - Retorna o seno de um nmero (em radianos).
Math.cos(nmero) - Retorna o cosseno de um nmero (em radianos).
Math.tan(nmero) - Retorna a tangente de um nmero (em radianos).
Math.asin(nmero) - Retorna o arco seno de um nmero (em radianos).
Math.acos(nmero) - Retorna o arco cosseno de um nmero (em radianos).
Math.atan(nmero) - Retorna o arco tangente de um nmero (em radianos).
Trigonometria no tringulo retngulo
128/154
14/8/2014
Apostila Javascript
Considere um tringulo ABC, retngulo em (=90), onde a medida da hipotenusa, b e c so as

medidas dos catetos e , so ngulos agudos.
Pelo teorema de Pitgoras, temos que "o quadrado da hipotenusa igual a soma dos quadrados dos
catetos", ou seja, pela figura, a2=b2+c2
Observamos ainda que os ngulos agudos do tringolo retngulo so complementares na figura + = 90
Exerccios:
1) Usando o teorema de Pitgoras, calcule o valor de x:
a)
b)
c)
2) Determine o valor de ou nas figuras seguintes:

a)
b)
129/154
14/8/2014
Apostila Javascript
Razes trigonomtricas
= ngulo
a = Hipotenusa
b = Cateto oposto
c = Cateto adjacente
Seno de um ngulo o quociente entre a medida do cateto oposto ao ngulo e a medida da
hipotenusa:
Cosseno de um ngulo o quociente entre a medida do cateto adjacente ao ngulo e a medida da

hipotenusa:
Tangente de um ngulo o quociente entre as medidas do cateto oposto e do cateto adjacente ao

ngulo:
Observao:
O seno de um ngulo igual ao cosseno do seu complemento;
O cosseno de um ngulo igual ao seno do seu complemento.
130/154
14/8/2014
Apostila Javascript
Exerccios
1) Em cada caso, determinar o sen , cos e tg :
a)
b)
c)
e)
d)
131/154
14/8/2014
Apostila Javascript
Tabela dos ngulos mais usados do tringulo retngulo

Grau sen
cos
tg
em
radianos
30
45
60
Exerccios:
1) Encontre x:
132/154
14/8/2014
Apostila Javascript
2) Encontre y:
b)
a)
3) Encontre x e y:
c)
a)
b)
133/154
14/8/2014
Apostila Javascript
Unidades de medida
Grau: unidade de medida a qual uma volta equivale a 360, exemplos: 30, 45, 60.
Radianos: unidade de medida de ngulo a qual uma volta equivale a 2, exemplos: a /6, /4, /3.
ngulo
em
em
grau radianos
360
180
90
60
45
134/154
14/8/2014
Apostila Javascript
30
A unidade de medida usada pelos brasileiros o grau, porm a unidade de medida usada pela maioria das
linguagens de programao o radiano, ento acostume-se a transformar graus em radianos.
Calculando o seno, cosseno e tangente pelo computador
Se o argumento estiver em graus, multiplique-o por PI()/180 ou use a funo radianos() para convert-lo
em radianos.
Exemplo:
function radianos(){
return Math.PI/180
}
document.write("<br>"+ Math.sin(Math.PI)) // O seno de radianos de pi(0, aproximadamente). Resultado:
1.2246063538223773e-16
document.write("<br>"+Math.sin(Math.PI/2)) // O seno de radianos de pi/2 (1). Resultado: 1
document.write("<br>"+Math.sin(30*Math.PI/180)) // O seno de 30 graus (0,5). Resultado:
0.49999999999999994
document.write("<br>"+Math.sin(30*radianos())) // O seno de 30 graus (0,5). Resultado:
0.49999999999999994
document.write("<br>"+Math.cos(60*Math.PI/180)) // O cosseno de 60 graus (0,5). Resuntado:
0.5000000000000001
document.write("<br>"+Math.cos(60*radianos())) // O cosseno de 60 graus (0,5). Resultado:
0.5000000000000001
document.write("<br>"+Math.tan(45*Math.PI/180)) // A tangente de 45 graus (1). Resultado:
0.9999999999999999
document.write("<br>"+Math.tan(45*radianos())) // A tangente de 45 graus (1). Resultado:
0.9999999999999999
</script>
Calculando o arco seno, arco cosseno e arco tangente pelo computador
Retorna o arco seno ou o seno inverso de um nmero. O arco seno o ngulo cujo seno nm. O ngulo
retornado fornecido em radianos; o mesmo para arco cosseno e arco tangente.
Para expressar o arco seno em graus, multiplique o resultado por 180/PI( ) ou use a funo graus().
function graus() {
return 180/Math.PI
}
document.write("<br>"+Math.round(Math.asin(0.5)*180/Math.PI)) // O arco seno de 0,5 em graus 30
document.write("<br>"+Math.round(Math.asin(0.5)*graus())) // O arco seno de 0,5 em graus 30
135/154
14/8/2014
Apostila Javascript
document.write("<br>"+Math.round(Math.acos(-0.5)*180/Math.PI)) // O arco cosseno de -0.5 em graus

120
document.write("<br>"+Math.round(Math.acos(-0.5)*graus())) // O arco cosseno de -0.5 em graus 120
document.write("<br>"+Math.round(Math.atan(1)*180/Math.PI)) // O arco tangente de 1 em graus 45
document.write("<br>"+Math.round(Math.atan(1)*graus())) // O arco tangente de 1 em graus 45
</script>
Logartmos
Math.log(nmero) - Retorna op logartmo de um nmero
Math.E - Retorna a base dos logartmos naturais (aproximadamente 2.718281828459045)
Math.LN2 - Retorna o valor do logartmo de 2 (aproximadamente 0.6931471805599453)
Math.LOG2E - Retorna a base do logaritmo de 2 (aproximadamente 1.4426950408889634)
Math.LN10 - Retorna o valor do logartimo de 10 (aproximadamente 2.302585092994046)
Math.LOG10E - Retorna a base do logartmo de 10 (aproximadamente0.4342944819032518)
Definio
Sendo a e b nmeros reais e positivos com a1, chama-se logaritmo de b na base a o expoente x ao qual se
deve elevar a base a de modo que a potncia ax seja igual a b.
logab=x <=> ax=b
Na expresso logab=x, temos:
a a base do logartmo;
b o logaritmando;
x o logaritmo.
Vejamos alguns exemplos de logartmos:
log24=2, pois 22=4
log381=4, pois 34=81
log77=1, pois 71=7
log51=0, pois 50=1
Logaritmo decimal
No mbito do Ensino Mdio, usa-se bastante a base 10, uma vez que neste ambiente a base decimal recebe
136/154
14/8/2014
Apostila Javascript
as preferncias para o trabalho com o nosso sistema de numerao, mas devemos observar que em
contextos mais avanados, a base decimal tem pouca utilidade. Quando escrevermos Log a partir daqui
neste trabalho, entenderemos o Logaritmo na base decimal e escrevemos:
y = Log(x)
para entender que y o Logaritmo de x na base 10 e nesta base 10, temos algumas caractersticas
interessantes com os logaritmos das potncias de 10
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Log(1)=0
Log(0) no tem sentido
Log(10)=Log(101 )=1
Log(1/10)=Log(10-1 )=-1
Log(100)=Log(10)=2
Log(1/100)=Log(10-2 )=-2
Log(1000)=Log(10)=3
Log(1/1000)=Log(10-3 )=-3
Log(10n)=n
Log(10-n)=-n
A partir da propriedade
Log 10n=n
temos que o Logaritmo de 10n na base 10 o expoente n, o que nos faz pensar que para todo x real
positivo vale a relao:
Log(10x) = x
Mudana de base
Apesar de existirem identidades muito teis, a mais importante para o uso na calculadora a que permite
encontrar logaritmos com bases que no as que foram programadas na calculadora (normalmente loge e
log10). Para encontrar um logaritmo com uma base b usando qualquer outra base a:
Prova da frmula de mudana de base
por definio
137/154
14/8/2014
Apostila Javascript
aplica-se
em ambos os lados
simplifica-se o lado esquerdo da igualdade
divide-se por logk (b)
Clculos mais fceis

Logaritmos trocam nmeros por expoentes. Mantendo-se a mesma base, possvel tornar algumas poucas
operaes mais fceis:
Operao com nmeros Operao com expoentes
Identidade logartmica
Demonstrao da identidade log(a) + log(b) = log(ab)

Por definio, se: log(a) = x ento a = 10x. Logo, considerando-se b = 10y, tem-se:
Observa-se em ambos os lados da expresso acima que x + y = x + y, o que comprova a identidade.
Funes de tratamento de String

Manipulando Strings
O Javascript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total
flexibilidade em seu manuseio.
Abaixo apresentamos os mtodos disponveis para manuseio de strings.
138/154
14/8/2014
Apostila Javascript
Retorna o comprimento de uma String.
length
Exemplo:
var s="Esta e uma string de texto";
document.write("Tamanho da String = "+s.length+" caracteres");
Resultado:
Tamanho da String = 26 caracteres
O mtodo substring (subcadeia) retorna a cadeia que se estende do indice Inicial

at o caractere logo antes de indice final. Se indice Inicial for maior que indice final,
o mtodo funciona como se ambos estivessem com as posies trocadas. Se os
dois ndices forem iguais, retorna uma cadeia vasia.
substring(indiceInicial, Exemplo:
indiceFinal)
var s1=s.substring(4, 10);
document.write(s1);
Resultado:
"e uma"
Funciona da mesma forma que o substring, s que, retorna o caractere simples em

uma posio especfica na String.
charAt(posio)
Exemplo:
var s1=s.charAt(5);
document.write(s1);
Resultado: "e"
O mtodo indexOf faz a busca no objeto string pela primeira ocorrncia do

caractere e retorna o ndice correspondente. o argumento inicIndex opcional e
indica a partir de onde inicia a busca. Podemos localizar os valores dos ndices para
todos os caracteres do mesmo tipo iniciando aps o ndice anterior.
indexOf(caractere,
[inicIndex])
Exemplo:
text="Hello, world!";
index=0
document.write("<pre>");
while(index<text.lastIndexOf("l")) {
index= text.indexOf("l", index+1);
document.write(index+"\t");
}
document.write("\n");
document.write("</pre>")
139/154
14/8/2014
Apostila Javascript
Resultado:" 2 3 10"
O mtodo lasIndexOf idntico ao mtodo index of exceto que faz a busca do

lastIndexOf(caractere,
caractere na cadeia do fim para o comeo iniciando em inicIndex.
[inicIndex])
Veja o exemplo anterior
O mtodo replace voc insere uma palavra ou uma letra em que voc deseja
substituir por outra.
replace(palavra,
substituto)
Exemplo:
s="Este automovel caro"
document.write(s.replace("automovel", "carro"))
Resultado:
Este carro caro
O mtodo search localiza a palavra dentro de uma string.

search(palavra)
Exemplo:
s="Este automovel caro"
document.write(s.search("automovel"))
Resultado: "5"
O mtodo toLowerCase (para minsculo) retorna a cadeia com todos os caracteres

alterados para minsculo.
toLowerCase()
Exemplo:
s="ISTO UM EXEMPLO"
document.write(s.toLowerCase())
Resultado:
isto um exemplo
O mtodo toUpperCase (para maisculo) retorna a cadeia com todos os caracteres

alterados para maisculo.
toUpperCase()
Exemplo:
s="isto um exemplo"
document.write(s.toUpperCase())
Resultado:
ISTO UM EXEMPLO
140/154
14/8/2014
Apostila Javascript
Veja um exemplo de cdigo que inverte o texto ao contrrio:

<head>
<title>Se no entendeu, use este cdigo HTML</title>
</head>
<!-function inverter(formulario){
var vtexto1=formulario.texto1.value
var vtexto2=""
for(var x=vtexto1.length; x>=0; x--){
vtexto2+=vtexto1.charAt(x)
}
formulario.texto2.value=vtexto2
}
-->
</script>
<body>
<form>
Insira o texto aqui: <br/>
<textarea name="texto1" cols="120" rows="10"></textarea> <br />
<input type="button" name="Inverter" value="Inverter" onClick="inverter(this.form)"/>
<input type="reset" value="Apagar"> <br />
<textarea name="texto2" cols="120" rows="10"></textarea>
</form>
</body>
</html>
Manipulando datas e horas

Existe apenas uma funo para que se possa obter a data e a hora. a funo Date(). Esta funo devolve
data e hora no formanto: Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano
Ex:
Fri May 24 16:58:02 1996
Para se obter os dados separadamente, existem os seguintes mtodos:
getDate() - Retorna o dia do ms (inteiro entre 1 e 31)
getDay() - Retorna o dia da semana (0=Domingo, 1=Segunda-feira,... , 6=Sbado)
getMonth() - Retorna o ms (entre 0=Janeiro e 11=Dezembro)
getFullYear() - Retorna o ano com quatro dgitos (o mais usado)
getYear() - Retorna o ano com 2 dgitos.
getHours() - Retorna a hora do dia (entre 0 e 23)
getMinutes() - Retorna os minutos dentro da hora (entre 0 e 59)
141/154
14/8/2014
Apostila Javascript
getSeconds() - Retorna os segundos (entre 0 e 59)

No exemplo 1 abaixo obteremos o dia da semana e as horas. Para tal, utilizaremos a varivel DataToda
para armazenar data e hora.
DataToda=new Date()
Dia_do_mes=DataToda.getDate()
Dia_da_semana=DataToda.getDay()
Mes=DataToda.getMonth()
Ano=DataToda.getFullYear()
// --------------------------------------Horas=DataToda.getHours()
Minutos=DataToda.getMinutes()
Segundos=DataToda.getSeconds()
// --------------------------------------semana = Array(6)
semana[0]="Domingo"
semana[1]="Segunda"
semana[2]="Tera"
semana[3]="Quarta"
semana[4]="Quinta"
semana[5]="Sexta"
semana[6]="Sabado"
Semana_atual=semana[Dia_da_semana]
//------------------------Mes2=Array(11)
Mes2[0]="Janeiro"
Mes2[1]="Fevereiro"
Mes2[2]="Maro"
Mes2[3]="Abril"
Mes2[4]="Maio"
Mes2[5]="Junho"
Mes2[6]="Julho"
Mes2[7]="Agosto"
Mes2[8]="Setembro"
Mes2[9]="Outubro"
Mes2[10]="Novembro"
Mes2[11]="Desembro"
Mes_atual=Mes2[Mes]
document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano)
document.write("<br>")
document.write("So: "+Horas+" horas, "+Minutos+" minutos e "+Segundos+" segundos.")
</script>
exemplo 4: alterando a data
Para criar uma varivel tipo Date com o contedo informado pela aplicao, existe o mtido set. Assim
142/154
14/8/2014
Apostila Javascript
temos os seguintes mtodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e

setSeconds. Os mas importantes so:
setDate(valor) - Coloca o dia do ms (valor entre 1 e 31)
setMonth(valor) - coloca o ms (valor entre 0 e 11)
setYear(valor) - coloca os anos (valor acima de 1970)
DataToda=new Date()
DataToda.setDate(28)
DataToda.setMonth(4)
DataToda.setYear(1997)
// --------------------------------------Dia_do_mes=DataToda.getDate()
Dia_da_semana=DataToda.getDay()
Mes=DataToda.getMonth()
Ano=DataToda.getFullYear()
// --------------------------------------semana = Array(6)
semana[0]="Domingo"
semana[1]="Segunda"
semana[2]="Tera"
semana[3]="Quarta"
semana[4]="Quinta"
semana[5]="Sexta"
semana[6]="Sabado"
Semana_atual=semana[Dia_da_semana]
//------------------------Mes2=Array(11)
Mes2[0]="Janeiro"
Mes2[1]="Fevereiro"
Mes2[2]="Maro"
Mes2[3]="Abril"
Mes2[4]="Maio"
Mes2[5]="Junho"
Mes2[6]="Julho"
Mes2[7]="Agosto"
Mes2[8]="Setembro"
Mes2[9]="Outubro"
Mes2[10]="Novembro"
Mes2[11]="Desembro"
Mes_atual=Mes2[Mes]
document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano)
</script>
exmeplo 3: vendo as horas
rel = new Date()
143/154
14/8/2014
Apostila Javascript
hora = rel.getHours()
minuto = rel.getMinutes()
segundo = rel.getSeconds()
temp = hora
temp += ((minuto < 10) ? ":0" : ":") + minuto
temp += ((segundo < 10) ? ":0" : ":") + segundo
document.write("So exatamente: "+temp)
</script>
Exemplo 4: relgio
<HTML>
<HEAD>
<TITLE> Exemplo </TITLE>
<SCRIPT language="javascript">
function relogio() {
rel = new Date()
temp = "" + hora
document.form1.text1.value = temp
setTimeout("relogio()", 1000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="relogio()">
<FORM NAME="form1">
So exatamente:
<INPUT TYPE="text" NAME="text1" SIZE="8" VALUE="">
</FORM>
</BODY>
</HTML>
Usando o Timer
um mtodo que permite a programao para que uma determinada ao s ocorra aps o transcusro de
um determinado tempo.
Varivel = setTimeout("ao",tempo)
Varivel uma varivel apenas para controle do timer
ao a ao que se quer realizar
tempo o tempo de espera para que a ao ocorra em milisegundos.
144/154
14/8/2014
Apostila Javascript
Obs:
importante observar que a ao s ocorrer uma vez. para que a ao volte a ocorrer, ser necessrio
repetir o comando dentro da ao, optendo-se, assim um LOOP.
Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte mtodo:
clearTimeout(Varivel)
Onde:
Varivel o nome da varivel de controle do timer.
<HTML>
<HEAD>
<TITLE> Exemplo </TITLE>
<SCRIPT language="javascript">
function relogio() {
rel = new Date()
temp = "" + hora
document.form1.text1.value = temp
controleRelogio=setTimeout("relogio()", 1000)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
So exatamente:
<INPUT TYPE="text" NAME="text1" SIZE="8" VALUE=""><br>
<INPUT TYPE="button" VALUE="Ativar Relgio" onClick="relogio()">
<INPUT TYPE="button" VALUE="Parar Relgio" onClick="clearTimeout(controleRelogio)">
</FORM>
</BODY>
</HTML>
Funes arrays
Pode ser definido como um conjunto ordenado de valores, numricos ou no, que so referenciados por um
mesmo nome.
Em geral, criado por uma das formas:
new Array(tamanho)
// ou
new Array(valor0, valor1, valor2, ...)
145/154
14/8/2014
Apostila Javascript
// Exemplo:
nivel = new Array("baixo","medio","alto");
nivel = new Array[3];
Para este ltimo, os valores devem ser dados individualmente:
nivel[0] = "baixo";
nivel[1] = "medio";
nivel[2] = "alto";
// Exemplo com valores numricos:
nivel = new Array(10, 20, 30);
// Tambm pode ser criado a partir da forma literal:
nivel = ["baixo", "mdio", "alto"];
join(sep): Junta seqencialmente os elementos de uma array usando o caractere (ou caracteres) dados por
sep. Se ele no indicado, usa a vrgula como default.
Exemplos:
str_1 = nivel.join(); //resulta "baixo,mdio,alto" em str_1
str_2 = nivel.join(", "); //resulta "baixo, mdio, alto" em str_2
str_3 = nivel.join("/"); //resulta "baixo/mdio/alto" em str_3
length: Indica o nmero de elementos em uma array. Pode ser usado para diminuir o comprimento de um
objeto j definido. No pode aumentar.
Exemplo:
nivel = new Array("baixo","medio","alto","muito alto");
nivel.length = 3; //reduz o tamanho de 4 para 3
pop(): Remove e retorna o ltimo elemento de uma array, reduzindo o seu tamanho.
Exemplo:
eliminado = nivel.pop; //a varivel eliminado contm "muito alto"
push(valor1, valor2, ...): Adiciona um ou mais elementos (valor1, valor2, etc) ao final de uma array,
retornando o seu novo tamanho.
Exemplo (a varivel novo ser 4 e os dois elementos sero adicionados):
nivel = new Array("baixo","medio");
novo = nivel.push("alto","muito alto");
reverse(): Inverte a ordem dos elementos. O primeiro se torna o ltimo e o ltimo se torna o primeiro.
Exemplo (nivel[0], nivel[1] e nivel[2] sero respectivamente "alto", "mdio" e "baixo"):
146/154
14/8/2014
Apostila Javascript

nivel.reverse();
shift(): Remove o primeiro elemento e retorna esse elemento, reduzindo o tamanho da array.
Exemplo (a varivel removido ter "muito baixo" e a nivel no ter esse elemento):
nivel = new Array("muito baixo","baixo","medio","alto");
removido = nivel.shift();
slice(ini [, fim]): Extrai uma parte de uma array e retorna uma nova com essa parte. O parmetro ini o
ndice base zero a partir do qual comea a extrao. Os elementos so extrados at, mas no incluindo, o
ndice base zero dado por fim. Se este no indicado, a operao se d at o final da seqncia.
A funo no altera o objeto original. Os valores so copiados para a nova array.
Exemplo (escreve: "baixo,mdio,alto"):
nivel = new Array("muito baixo","baixo","medio","alto","muito alto");
document.write(nivel.slice(1,4);
sort(func_comp): Ordena os elementos de uma array segundo o critrio da funo de comparao
func_comp. Se esta no dada, a ordenao se d como se fosse um dicionrio. No caso de strings de
texto, em geral essa operao desejada. No caso de nmeros, pode no ser, uma vez que, por exemplo,
12 fica antes de 4.
A funo de comparao deve ser uma do tipo comparar(a,b) tal que:
. Se retornar valor < 0, b fica em ndice menor que a;
. Se retornar valor = 0, a e b no mudam de ndice;
. Se retornar valor > 0, b fica em ndice maior que a.
Para comparar nmeros, a funo pode ser simplesmente:
function comparar(a, b){
return a - b;
}
Exemplo:
function comparar(a, b){
return a - b;
}
num = new Array("11", "10", "7", "8", "9");
document.write(num.sort()); //escreve 10,11,7,8,9
document.write("<br>"); //avana uma linha
document.write(num.sort(comparar)); //escreve 7,8,9,10,11
splice(iniNdx, quant, [elm1][, ..., elmN]): Muda o contedo de uma array, adicionando novos elementos e
removendo outros.
iniNdx o ndice base zero a partir do qual a operao comea.
147/154
14/8/2014
Apostila Javascript
quant um inteiro indicando o nmero de elementos a remover. Se zero, nenhum elemento removido,
mas deve ser indicado pelo menos um novo elemento.
elm1 ... elemN so os novos elementos a adicionar. Se no indicados, a funo apenas remove elementos.
Se o nmero de elementos a adicionar diferente do nmero de elementos a remover, o tamanho da arrray
alterado. A funo retorna uma array com os elementos removidos.
Exemplos:
num = new Array("10", "20", "30", "40");
document.write(num); //escreve 10,20,30,40
de_fora = num.splice(2,0,"25");
document.write(num); //escreve 10,20,25,30,40
de_fora = num.splice(2,1,"28");
document.write(num); //escreve 10,20,28,30,40
document.write(de_fora); //escreve 25
toString(): Retorna uma string com os elementos dispostos seqencialmente e separados por vrgula.
Exemplo:
num = new Array("10", "20", "30", "40");
str = num.toString(); //str contm "10,20,30,40"
unshift(elm1,..., elmN): Adiciona um ou mais elementos no incio da array e retorna seu novo tamanho. Os
parmetros (elm1, ..., elmN) so os novos elementos.
Exemplo (escreve: "baixo,mdio,alto"):
nivel.unshift("muito baixo");
document.write(nivel); //escreve "muito baixo,baixo,medio,alto,muito alto"
Impressora
Para imprimir um arquivo use este cdigo:
<!-function Imprimir() {
window.print();
}
-->
</script>
<a href="javascript:Imprimir();">Imprimir</a>
148/154
14/8/2014
Apostila Javascript
Fechando um programa
Para interromper a execuo do programa que est sendo executado use o comando window.close(),
exemplo:
(...)
<a href="javascript:window.close()">Fechar</a>
(....)
Indo para um endereo sem usar <A>Link</A>

<HTML> <HEAD> <TITLE> location </TITLE></HEAD><BODY>
<SCRIPT>
resp = window.prompt("Para onde deseja ir?","http://www.abeu.com.br")
if (resp) {
location.href = resp
}
</SCRIPT>
Nenhuma endereo foi informado, ao cancelada !!!
</BODY></HTML>
Descobrindo a largura e a altura de seu monitor

largura = screen.width; //Capta a largura total do Monitor
altura = screen.height; //Capta a altura total do Monitor
document.write("Largura total do monitor: "+largura);
document.write("<br>Altura total do monitor: "+altura);
</script>
Alterando o tamanho e movendo a janela de seu

navegador
window.moveTo(0,0);
//Move a janela dentro dos eixos x(horizontalmente) e y(verticalmente).
window.resizeTo(screen.availWidth, screen.availHeight);
//Permite o ajuste de largura de uma s vez.
//screen.availWidth - Usa a LARGURA disponvel no monitor.
149/154
14/8/2014
Apostila Javascript
//screen.availHeight - Usa a ALTURA disponvel no monitor.
// Obs: alterando os valores em pixels mover e alterar o tamanho da janela, ex:

//window.moveTo(10,20);
//Move a janela para o eixo 10 e 20;
//window.resizeTo(100, 200);
// Altera a largura para 100 e a altura para 200
</script>
Tela cheia
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<FORM>
<INPUT TYPE="BUTTON" NAME="BTN_FullScreen" VALUE="Modo tela cheia"
OnClick="window.open(document.location, 'big', 'fullscreen=yes')">
</FORM>
<br>
<br>
Fechar o browser
<a href="javascript:window.close()" target="_top">Sair</a>
<br>
<br>
</body>
</html>
Endereo de IP
Teste aqui seu navegador >>
//host - Armazena uma string com o formato "hostname:port" da pgina HTML atual.
document.write('<p>Demostrao da propriedade host: '+location.host)
//hostname - Armazena uma string, com o IP da pgina HTML atual.
document.write('<p>Demostrao da propriedade hostname: '+location.hostname)
//href - String identica a mostrada na barra "location" do browser.
150/154
14/8/2014
Apostila Javascript
document.write('<p>A URL desta pgina : '+ location.href)

//pathname - Contm uma string com o path da pgina HTML atual.
document.write('<p>O path da URL desta pgina : '+ location.pathname)
//port - Armazena a porta por onde est sendo feita a conexo com o servidor.
document.write('<p>A porta usada para conexo com o servidor : '+ location.port)
//protocol - String que armazena o protocolo de acesso a um determinado endereo. ("http:","ftp:","file:").
document.write('<p>O protocolo de acesso para esta pgina : '+ location.protocol)
</script>
Informaes de seu navegador

Teste aqui seu navegador >>
browserNome = window.navigator.appName
browserCod = window.navigator.appCodeName
browserVer = window.navigator.appVersion
browserLingua = window.navigator.language
browserPlat = window.navigator.platform
browserJava = window.navigator.javaEnabled()
document.write ("Voc utiliza o browser " + browserNome)
document.write (", cujo cdigo " + browserCod)
document.write (", na verso <I>" + browserVer + "</I>")
document.write (". A linguagem do browser " + browserLingua)
document.write (" e sua plataforma " + browserPlat)
document.write (". O suporte a Java est ")
if (browserJava) {
document.write ("ativado.")
}
else {
document.write ("desativado.")
}
</script>
</body>
Array dinmica
<html><head><title> Cria Objeto </title>
<script>
function NovaFunc(nome,tel,UF){
this.nome=nome
this.tel=tel
this.UF=UF
}
151/154
14/8/2014
Apostila Javascript
</script>
</head><body>
<script>
fulano = new NovaFunc("Alguem","2222-2222","SP")
document.write(fulano.tel + "<br>")
document.write(fulano.UF + "<br>")
document.write(fulano.nome)
document.write(fulano[1] + "<br>")
document.write(fulano[2] + "<br>")
document.write(fulano[0])
</script>
</body></html>
Outro exemplo
function veiculo(a, b, c, d) {
this.marca=a;
this.modelo=b;
this.ano_matricula=c;
this.cilindrada=d;
}
//exemplo 1
var carro1=new veiculo("Peugeot","106","1996",1100)
document.write("marca = "+carro1.marca)
document.write("<br>modelo = "+carro1.modelo)
document.write("<br>Ano da matrcula = "+carro1.ano_matricula)
document.write("<br>Cilindrada = "+carro1.cilindrada)
document.write("<br><br><br>")
//exemplo 2
var carro2=new veiculo()
carro2[0]="Fiat";
carro2[1]="187";
carro2[2]="1995";
carro2[3]=2200;
// Lista das propriedades do objeto
for(var k=0; k<=3; k++) {
document.write("Propriedade "+k+" = "+carro2[k]+"<br>");
}
document.write("<br><br><br>")
// exemplo 3
var carro3=new veiculo()
152/154
14/8/2014
Apostila Javascript
carro3["marca"]="Ford"
carro3["modelo"]="K2"
carro3["ano_matricula"]="1999"
carro3["cilindrada"]= 3300
document.write("marca = "+carro3.marca)
document.write("<br>modelo = "+carro3.modelo)
document.write("<br>Ano da matrcula = "+carro3.ano_matricula)
document.write("<br>Cilindrada = "+carro3.cilindrada)
</script>
Inserindo um texto na barra de ttulo e na barra de status

Barra de Status no FIREFOX (window.status)
Pra muita gente que no sabe, aqui vai uma dica fundamental, pra quem quer que a mensagem sai na barra
de ferramentas do FIREFOX, quando utilizamos a funo:
windows.status("Mais por muito menos");
Pesquisando sobre o assunto, depois de muito tempo acabei achando a soluo, simples e direta, Entre no
FIREFOX v em:
FERRAMENTAS
OPES
CONTEUDO
CLIQUE NO BOTO AVANADO DE PERMITIR JAVASCRIPT
SELECIONE MODIFICAR TEXTO NA BARRA DE STATUS.
E como dizem os meus amigos "E SEJA FELIZ".
<html>
<head>
<title>Arquivo de teste</title>
</head>
function Status() {
// Barra de status:
window.status = "Testando a barra de status";
// Barra de ttulo:
document.title = "Testando a barra de ttulo";
}
</script>
<body>
<p>
<input type="button" value="Teste" onclick="Status()" /></p>
</body>
</html>
153/154
14/8/2014
Apostila Javascript
154/154

Javascript: Introdução à linguagem

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript: Introdução à linguagem

Transféré par

Droits d'auteur :

Formats disponibles

14/8/2014

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

Criando um novo documento - O PRIMEIRO

Carregando um arquivo externo

Salve este arquivo com arquivoesterno.html.

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

Salve este arquivo como teste.js.

Comentrios de uma linha

Comentrio com mais de uma linha

Usando aspas dentro de aspas

Exemplos de variveis invlidos

(d) "c * d"

(d) "1 2 3 4"

(d) " "

Convertendo valores string para numrica

<input type="button" value="/" onClick="calcula(this.form,3)">

Determina o resto da diviso

Veja os exemplos abaixo:

Exemplo 2: Efetue clculos aritmticos usando parnteses

Usando Operadores Aritmticos

// Nome do arquivo: soma.txt

// Nome do arquivo: triangulo.txt

// Nome do arquivo: salario.txt

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

// Nome do arquivo: resultado.txt<br>

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

Veja os exemplos abaixo:

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

Exemplo 3. Resolva a seguinte operao:

Exemplo 4. Dadas as strings abaixo resolva:

Verdadeiro se ambos os lados da expresso forem verdadeiros.

Verdadeiro se um ou ambos os lados da expresso forem verdadeiros

Verdadeiro se apenas um lado for verdadeiro

Reverte verdadeiro para falso e vice-versa

Iremos estudar cada um:

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

Exemplo 2. Se a=100, b=200 e c=300, resolva:

b>a && c>b

b>a && b==c

Exemplo 3. Resolva a seguinte operao:

Hierarquia dos operadores

menor ou igual ( <= ), igual (=), diferente ( <> )

da esquerda para a direita

Propriedades do Objeto da esquerda para a direita

da esquerda para a direita

da esquerda para a direita

da esquerda para a direita

da esquerda para a direita

da esquerda para a direita

>, <, >= , <= , ==, !=

da esquerda para a direita

da esquerda para a direita

da esquerda para a direita

Outro exemplo a seguir tambm um exemplo bem simples:

Usando a clusula Else

Usando a clusula else if

Usando estrutura de deciso If

Nome do arquivo: pares.txt

Nome do arquivo: temperatura.txt<br>

Nome do arquivo: sexo.txt<br>

Nome do arquivo: bissexto.txt

Usando Operadores relacionais