Javascript

Caso sensitivo

Atenção

Na linguagem Javascript você deve prestar muita atenção na hora de digitar seu código fonte, pois, o Javascript é caso sensitivo, ou seja, ele diferencia letras maiúsculas de minúsculas. Por exemplo, as palavras história, História e HISTÓRIA são palavras diferentes.

Por exemplo, veja este código abaixo:

Texto="A raiz quadrada de 9 é 3"

document.write(Texto)

As palavras Texto edocument.writeestão corretos, porém, se você alterar o código fonte com letras maiúsculas e minúsculas,causará erros no código fonte. Observe:

Texto="A raiz quadrada de 9 é 3"

Document.Write(TEXTO)

As palavras TEXTO eDocument.Writeestãoerrados,causando erros. O computadornãoreconhece estas palavras. Na hora em que digitar o código fonte preste bastante atenção nas letras maiúsculas e minúsculas, por causa de uma letra pode causar erros.

Ponto-e-vírgula (;) no final das declarações

Uma boa prática ao programar utilizando Javascript é sempre usar o; (ponto-e-vírgula) no final das suas declarações, mas seu uso não é obrigatório.

Você precisa utilizaer o ponto-e-vírgula se utilizar algum compressor de Javascript para reduzir o tamanho do arquivo. como os comperssores distribuem os códigos em uma única linha, sem eles será impossível determinar onde começa e termina uma istruçõa, ocasionando erro.

Editor de texto

Editor de texto é apenas um processador de texto que é usado para digitar o programa. O texto resultante é conhecido como código fonte.

O editor de texto é um software que permite ao usuário selecionar trechos de um arquivo, alterar, apagar ou adicionar testo ao código-fonte.

Código-Fonte

Código-fonte é uma seqüência de instruções numa linguagem de programação. O código-fonte é escrito por um programador.

Este mesmo código é 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 código-fonte é o código básico de um programa.

Criando um novo documento - O PRIMEIRO PROGRAMA

Para começar vamos analisar um exemplo bem simples - abra um editor de texto comum e digite o código que está escrito abaixo:

<html>

<head>

<title>Meu primeiro programa </title>

</head>

<body>

docoment.write("Esta é minha primeira página")

</script>

</body>

</html>

Salve este documento com o nome página01.html

Assim que o exemplo for salvo no editor de texto (bloco de notas, por exemplo) com a extensão .htm ou .html, ao ser executado, o programa enviará a seqüência de caracteres "Esta é minha primeira página" para a saída padrão que é a tela do monitor.

Para criar um arquivo Javascript, basta definir os elementos e suas formatações ou um editor de texto, e salvá-lo com a extensão .html ou .htm, exemplo:

programa.html

texto.html

arquivo01.html

Corpo do programa

Basicamente, a sintaxe do corpo do programa consiste em:

// Conteúdo

</script>

OU:

// Conteúdo

</script>

Carregando um arquivo externo

No Javascript, há a possibilidade de colocar mais de 1 arquivo externo ao documento. Ao invés 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>

</body>

</html>

Salve este arquivo com arquivoesterno.html.

Para incluir um arquivo externo ao documento use o comando src, no exemplo acima o arquivo externo é "teste.js". Devemos sempre salvar este arquivo externo com a extensão 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."

Observação: Se você está trabalhando com o arquivo externo do Javascript. Não use as tags <script> e </script> dentro do código, o que causaria erros de programação. O arquivo teste.js só aceita comandos Javascript se colocarmos tags html geraria erros, só use tags html dentro de aspas "duplas" ou 'simples'.

Comentários

Comentário é uma breve nota de explicação inseridas em um programa para descrever o que ele fará.

Os programadores usam comentários em seus programas para que outros programadores (e ele próprio) entendam o que o programa faz e como funciona.

Os comentários 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 programação usa uma sintaxe própria para a especificação de comentários, de modo que os comentários sejam ignorados pelo compilador.

Os comentários não são analisados pelo programa.

Os comentários podem ocupar uma ou várias linhas. Veja o exemplo abaixo:

Comentários de uma linha

Para inserir um comentário de uma linha basta colocar o símbolo // antes de qualquer comentário.

Exemplo:

//Comentário de uma linha

//Exemplo 1

//Exemplo 2

//Exemplo 3

</script>

Comentário com mais de uma linha

Para inserir comentários com mais de uma linha basta colocar os símbolos / * para abrir um comentário e * / para fechar o comentário.

Exemplo:

/ *

Comentário

com mais de

uma linha

* /

/ *

Exemplo 1

Exemplo 2

Exemplo 3

* /

</script>

Usando aspas dentro de aspas

Ás vezes necessitamos informar algo entre aspas dentro de uma string. Isto pode ser resolvido alterando-se aspas duplas e simples. Isto é usado em Javascript e PHP, veja o exemplo em Javascript.

document.write("<img src='Teste.gif'>")

</script>

Outro exemplo:

Inserindo um texto

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

document.write("A raiz quadrada de 9 é 3<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>
<script language="javascript">
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>
</html>

Caracteres especiais

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

Hífen	\'
Aspas	\"
Barra invertida	\\
Nova linha	\n
Marca de tabulação	\t
Retorno de carro	\r
Backspace	\b

Exemplo:

Resultado:

	O livro: "Manual Prático do Programador".
Está nas livrarias e \ ou jornaleiros.

Tipos de variáveis

Variáveis são símbolos que representa um valor numérico ou string usada no programa. O uso de variáveis dá ao programador flexibilidade para mudar o valor a qualquer momento no programa, mesmo que a princípio pareça não ser necessário este tipo de flexibilidade.

O conteúdo de uma variável pode mudar a qualquer momento.

Por exemplo, uma variável chamado cheque poderia conter o número 12, mas o programa teria condições de modificar esse valor a qualquer momento.

O nome de uma variável pode começar com uma letra ou sublinhado "_" seguido de números ou letras sem espaço. Veja alguns exemplos de nomes válidos:

nome

Conta_pag

z01

_cod

Variável String

Variável String é um conjunto contínuo de caracteres alfanuméricos que não contém números usados para cálculos. Nomes, endereços, palavras e frases são strings. Esses caracteres podem ser as letras maiúsculas, as letras minúsculas, os números e os caracteres especiais (&, #, @, ?, + ). Exemplos:

"aluno"

"1234"

"@ internet"

"0.34"

"1 + 2"

Observação: os dados do tipo literal na linguagem de programação são sempre representados entre aspas duplas(") ou aspas simples (').

Variáveis Numéricas

Os dados numéricos dividem-se em dois grupos: inteiros e reais.

Os números inteiros podem ser positivos ou negativos e NÃO possuem parte decimal. Este tipo de dado é armazenado na memória do computador, exemplos:

-23

1350

-257

237

-2

Os números reais podem ser positivos ou negativos e possuem parte decimal. Este tipo de dado é armazenado na memória do computador, exemplo:

23.45

346.98

-34.88

0.0

-247.0

Observação: na linguagem de programação, a separação entre a parte inteira e a parte decimal de um número é feita pelo ponto (.), e a simples presença do ponto já significa que é um número real.

Variáveis Booleanas

Variável Booleana é uma expressão cujo resultado só pode ser verdadeiro (true) ou falso (false).

As variáveis booleanas são mais usadas em:

Estrutura de decisão: If, Case e Ternário;
Operadores relacionais: >, <, >= , <= , ==, != ;
Operadores booleanos: and, or, not.

Este tipo de variável, quando armazenado na memória do computador, ocupa 1 byte, pois possui apenas duas possibilidades de representação: true ou false.

Exemplo:

Expressão	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 atribuição

O primeiro operador que você deve conhecer é o de atribuição "=". Ele atribui o conteúdo da expressão à sua direita para a variável do seu lado esquerdo.

x=30

y=10/2 + 6

z=true

a="texto"

Regras básicas

Para criar uma variável, a variável deve obedecer as seguintes regras:

O primeiro caractere deve ser sempre uma letra ou um caractere sublinhado (_).
Os caracteres que você pode utilizar na formação das variáveis são: os números, as letras maiúsculas, as letras minúsculas e o caractere sublinhado (_).
Não é permitido acentuação (acento grave, acento agudo, acento circunflexo, trema e til), por exemplo: Antônio, mamão, difícil, cinqüenta, etc.

Dependendo da linguagem de programação usado pelo programador (ASP, Java, PHP, Javascript, Delphi, Visual Basic e outros) cada linguagem recebe regras de programação diferente, por exemplo:

As variáveis podem ter qualquer tamanho. Entretanto, apenas os 63 primeiros caracteres são utilizados pelo compilador.
Dependendo da linguagem de programação, a variável pode ser sensível, ou não, a letras maiúsculas ou minúsculas, isto se chama "caso sensitivo".

O Javascript, por exemplo,faz diferenciação entre letras maiúsculas e minúsculas; portanto a variável NUM é exatamente diferente a variável num;

Observação: algumas linguagens de programação são sensíveis à caixa alta e caixa baixa, um exemplo disso é o Java, "Olá" e "OLÁ" são duas palavras totalmente diferentes. O Delphi por exemplo não é sensível a caixa, "abc" é exatamente igual a "ABC".

Não podemos usar palavras reservadas em variáveis.

Palavras reservadas são nomes utilizados pelo compilador para representar comandos de controle do programa, operadores e nomes de seções de programas. As palavras reservadas da linguagem Pascal são: (veja a tabela abaixo)

Exemplos de variáveis válidos:

nota

NOTA

A32

Nota_1

MATRICULA

nota_1

dia

IDADE

Exemplos de variáveis inválidos

e 12

x-y

prova 2n

nota(2)

case

Set

matrícula

Obs: matrícula com acento no í.

Resolva os exercícios abaixo:

Exercício 1: Identifique o tipo dos dados:

(a) numérico inteiro;

(b) numérico real;

(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

Concatenação

Concatenar: Reunir duas strings de caracteres em um só por exemplo, combinar as duas strings "bom" e "dia" formando uma única string "bom dia".

Convertendo valores string para numérica

Quando usamos formulários para efetuar cálculos matemáticos precisamos converter os valores strings dos formulários em valores numéricos, para logo em seguida calcular usando operadores aritméticos e funções matemáticas.

Se não convertermos os valores strings para numéricas impossibilita de efetuarmos cálculos matemáticos, por exemplo:

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

Esta operação geraria erros de programação 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 numérico, enquanto A e B são strings.

Veja outro exemplo:

<form name="frm_teste">
Altura: <input type="text" name="Altura">
Largura: <input type="text" name="Largura">
<input type="button" value="Resultado" onClick="Areax()">
</form>
<script language="javascript">
function Areax() {
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 são valores strings e Area é um valor numérico. No exemplo acima usamos os formulários Altura e Largura, os valores Largura e Altura são valores strings enquanto Area é um valor numérico.

Se efetuarmos os cálculos Area = Altura * Largura/2 sem converter string em numérica geraríamos erros de programação.

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

Exercício 1: Use a calculadora abaixo:

<html>
<head>
<title>Calculadora</title>
<script language="javascript">
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)">
<input type="button" value="/" onClick="calcula(this.form,3)">
<input type="reset" value="Limpar"><br>
Resultado: <input type="text" name="resultado">
</form>
</body>
</html>

Exercício 2: Use esta outra calculadora

<html>
<head>
<title>Calculadora</title>
<script language="javascript">
function processa1() {
d = eval(document.calculo.campo1.value)+
eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
function processa2() {
d = eval(document.calculo.campo1.value)*
eval(document.calculo.campo2.value)*
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</script>
</head>
<body>
<form name="calculo">
Campo1: <input type="text" name="campo1" value="" size="10" maxlength="10">
Campo2: <input type="text" name="campo2" 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 são símbolos que representa uma operação matemática; são três tipos de operadores:

Operadores Aritméticos ( + , -, * , /)
Operadores Relacionais (<, >, =, <= , >= )
Operadores Booleanos (And, Or, Not)

O operador mais usado é o operador de atribuição "=". Ele atribui o conteúdo da expressão à sua direita para a variável do seu lado esquerdo.

X=40

X=20/10 + 5

X=Y

Operadores Aritméticos

Operadores aritméticos são símbolos usados pelo computador + , -, * , /, para efetuar cálculos matemáticos.

Os operadores aritméticos são os seguintes:

Operadores	Nome	Utilização
+	Adição	Soma valores
-	Subtração	Subtrai valores
*	Multiplicação	Multiplica valores
/	Divisão	Divide valores
%	Módulo	Determina o resto da divisão

Veja os exemplos abaixo:

Exemplo 1: Efetue cálculos usando operadores aritméticos

Operação	Resultado
5 + 8	13
12-7	5
3 * 6	18
10/3	3.333333
10 % 3	1

Exemplo 2: Efetue cálculos aritméticos usando parênteses

Operação	Resultado
4 * 2 + 1	9
4 * (2 + 1)	12
3 + 5 * 4-2	21
(3 + 5) * (4-2)	16

Usando Operadores Aritméticos

+	Adição
-	Subtração
*	Multiplicação
/	Divisão
( )	Parênteses

Lista de Exercícios:

Exercício 1. Faça um programa que receba quatro números inteiros, calcula e mostre a soma desses números

// Nome do arquivo: soma.txt
<form name="frm_teste">
<input type="text" name="n1"> +
<input type="text" name="n2"> +
<input type="text" name="n3"> +
<input type="text" name="n4">
<input type="button" value="Resultado" onClick="Somax()">
</form>
<script language="javascript">
function Somax() {
n1=document.frm_teste.n1.value
n2=document.frm_teste.n2.value
n3=document.frm_teste.n3.value
n4=document.frm_teste.n4.value
soma=parseFloat(n1) + parseFloat(n2) + parseFloat(n3) + parseFloat(n4)
alert(soma)
}
</script>

Exercício 2. Faça um programa que receba três notas, calcule e mostre a média aritmética entre elas.

// Nome do arquivo: triangulo.txt
<form name="frm_teste">
Base: <input type="text" name="base">
Altura: <input type="text" name="altura">
<input type="button" value="Resultado" onClick="Areax()">
</form>
<script language="javascript">
function Areax() {
base= parseFloat(document.frm_teste.base.value)
altura=parseFloat(document.frm_teste.altura.value)
area=(base * altura)/2
alert(area)
}
</script>

Exercício 4. Faça um programa que receba o salário de um funcionário, calcule e mostre o novo salário, sabendo-se que este sofreu um aumento de 25%.

// Nome do arquivo: salario.txt
<form name="frm_teste">
Salário: <input type="text" name="sal">
<input type="button" value="Resultado" onClick="Salariox()">
</form>
<script language="javascript">
function Salariox() {
sal=parseFloat(document.frm_teste.sal.value)
aumento=sal * 25/100
novosal=sal + aumento
alert(novosal)
}
</script>

Exercício 5. Crie um programa que dê o resultado da soma, do produto e da diferença.

// Nome do arquivo: resultado.txt<br>
Entre com dois números: <br>
<form name="frm_teste">
A: <input type="text" name="A">
B: <input type="text" name="B">
<input type="button" value="Resultado" onClick="resultadox()" >
</form>
<script language="javascript">
function resultadox() {
A=parseFloat(document.frm_teste.A.value)
B=parseFloat(document.frm_teste.B.value)
alert("Operações com números " + A + " e " + B + ":")
alert("Soma = " + (A + B))
alert("Produto = " + (A * B))
alert("Diferença = " + (A-B))
}
</script>

Exercício 6. Crie um programa que dê o quadrado de um número

<form name="frm_teste">
Digite um numero: <input type="text" name="n">
<input type="button" value="Resultado" onClick="Quadradox()">
</form>
<script language="javascript">
function Quadradox() {
n=parseFloat(document.frm_teste.n.value)
Quadrado=n*n
alert("O quadrado de "+ n+ " e "+ Quadrado)
}
</script>

Operadores Relacionais

Operadores relacionais são operadores que permitem ao programador comparar dois (ou mais) valores ou expressões.

Os operadores relacionais típicos são: (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

Operação	Resultado
23<3	false (falso)
41>39	true (verdadeiro)
6 <= 5	false (falso)
10 >= 10	true (verdadeiro)
7==8	false (falso)
48 != 22	true (verdadeiro)

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

Operação	Resultado
a>b	false (falso)
b>a	true (verdadeiro)
a != b	true (verdadeiro)

Exemplo 3. Resolva a seguinte operação:

Operação	Resultado
23==(4 * 2 + 3 * 5)	true (verdadeiro)
17==(12/2 + 8-5)	false (falso

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

23==(8 + 15)

23==23

true

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

17==6 + 8-5

17==9

false

Exemplo 4. Dadas as strings abaixo resolva:

Operação	Resultado
"FRED"=="FRED"	true (verdadeiro)
"FRED"!="SAM"	true (verdadeiro)
"ONE"=="TWO"	false (falso)
"THREE"!= "THREE"	false (falso)

Operadores Booleanos

AND, OR, XOR e NOT são as operações fundamentais a lógica booleana.

Estes operadores só aceitam como operandos valores lógicos: TRUE ou FALSE.

Veja a tabela abaixo

Operador	Significado
And ( && )	Verdadeiro se ambos os lados da expressão forem verdadeiros.
Or ( \|\| )	Verdadeiro se um ou ambos os lados da expressão 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 símbolos diferentes.

And é substituído por &&

Or é substituído por ||

e Not é substituído por !

Se o leitor não teve nenhum contato com essas linguagens, poderá ter algumas dificuldades iniciais de escrever este tipo de código. 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)) {

// Ação...

}

Leia-se: se altura maior que 170 centímetros OU idade maior que 18 anos...

Veja a tabela abaixo:

Símbolo	Operação
&&	And (E)
\|\|	Or (Ou)
!	Not (Não)

Existem os operadores binários (semelhantes aos operadores acima), veja a tabela abaixo:

Símbolo	Operação
&	And lógico
\|	Or lógico
^	Xor lógico

Iremos estudar cada um:

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

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

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

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

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

Por exemplo a expressão:

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

É verdadeira porque as expressões em ambos os lados de And são verdadeiras. no entanto, a expressão:

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

É falsa, porque a expressão à esquerda de And é falsa. Lembre-se disto quando combinar expressões com And: se qualquer expressão for falsa, toda a expressão 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 expressões:

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

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

São ambas verdadeiras porque pelo menos uma das expressões comparada é verdadeira. Observe que no segundo caso, ambas as expressões comparadas são verdadeiras, o que também torna verdadeira uma expressão Or.

Um XOR (OU exclusivo) é verdadeiro se somente uma das entradas for verdadeira e não ambas, veja o quadro abaixo:

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

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

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

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

Por exemplo, a expressão:

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

É verdadeira porque apenas a expressão (4 + 4=8) é verdadeira. No entanto a expressão:

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

É falsa, porque ambas as expressões são verdadeiras.

NOT (!) Uma operação lógica booleana que inverte a entrada. Se a entrada for true, a saída é false, e vice-versa, veja o quadro abaixo:

!(true) o resultado é false

!(false) o resultado é true

Por exemplo, a expressão:

(4 + 3==5)

Não é verdadeira; no entanto a expressão

!(4 + 3==5)

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

Observe esta expressão:

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

Esta expressão é verdadeira ou falsa? Se você disse verdadeira, compreende a forma como funcionam os operadores lógicos. As expressões em ambos os lados de And são verdadeiras, então toda a expressão é verdadeira.

Veja exemplos abaixo:

Exemplo 1. Resulta as seguintes operações booleanas

Expressão	Resultado
(3>2)&&(5>4)	true (verdadeiro)
(2>1)&&(7>8)	false (falso)
(3>4)\|\|(9>2)	true (verdadeiro)
(7>7)\|\|(4>4)	false (falso)
(2==2)^(5==5)	false (falso)
(4>5)^(4<5)	true (verdadeiro)
! true	false (falso)
! (9<1)\|\|(9<1)	true (verdadeiro)

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

Expressão	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 operação:

(4 * (3 + 5))/2>100 || (5 * (3 + 4)/2<100)

Solução

(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 estão as variáveis. Exemplo a=4 e b=8 => c=a + b
Em 2º lugar estão as propriedades do objeto. Exemplo: Nota1.value=7 e Nota2.value=5 => media=(Nota1.value + Nota2.value)/2
Em 3º lugar estão os parênteses. Exemplo: 3 * (4 + 1) * 2
Em 4º lugar estão as funções. Exemplo: raiz quadrada, seno, cosseno, tangente, logaritmos e outros.
Em 5º lugar está a potenciação. Exemplo: 3^4 + 2
Em 6º lugar estão multiplicação ( * ), divisão (/), e módulo (%), na ordem em que aparecerem da esquerda para direita. Exemplo: 7 + 4/2 * 6/3-8
Em 7º lugar estão adição ( + ) e subtração (-), na ordem em que aparecerem da esquerda para direita. Exemplo: 5 + 4-7-8 + 3-2 + 9
Em 8º lugar estão os operadores relacionais, maior que (>), menor que (<), maior ou igual ( >= ), menor ou igual ( <= ), igual (=), diferente ( <> )
Em 9º lugar está o operador booleano NOT. Exemplo: (4>5) Or Not(3>6)
Em 10º lugar estão os operadores booleanos AND, OR e XOR. Exemplo: (3<7)&&(8>7)

Resumindo

Nível de prioridade		Operadores	Ordem
Mais alta:	1	Variáveis	da esquerda para a direita
	2	Propriedades do Objeto	da esquerda para a direita
	3	Parênteses	da esquerda para a direita
	4	Funções	da esquerda para a direita
	5	Potenciação	da esquerda para a direita
	6	* , /, %	da esquerda para a direita
	7	+ , -	da esquerda para a direita
	8	>, <, >= , <= , ==, !=	da esquerda para a direita
	9	!	da esquerda para a direita
Mais baixa:	10	&&, \|\|	da esquerda para a direita

O comando If

O comando If é uma instrução de linguagem de programação que compara dois ou mais conjuntos de dados e verifica os resultados. Se o resultado for verdadeiro, as instruções que seguem o comando If serão executados; se não, as instruções que seguirem o comando Else serão executados. Veja o exemplo abaixo:

Se A for verdadeiro (true) execute B
Se A for falso (false) execute C

Vejamos:

Outro exemplo a seguir também é um exemplo bem simples:

Usando a cláusula If

Vamos ver um exemplo:

if(Descontos!=0){
document.write("Descontos deste mês: " + Descontos)
}
</script>

O sistema só executará o comando document.write quando o valor da variável desconto for maior que 0. Agora, ficou claro que este comando é muito útil para dar ao sistema uma espécie de "poder de decisão". na verdade, estamos programando o sistema para cada tipo de situação e então o software agirá conforme a necessidade de cada problema, situação ou estado do sistema naquele momento.

Usando a cláusula Else

Podemos dar ao fluxo mais uma opção utilizando a cláusula else. Nesse caso, o fluxo executará o bloco antes ou depois desta cláusula. No exemplo anterior, podemos incrementar o código com mais uma situação.

Para entender melhor o exemplo troque o valor da variável Descontos para zero e teste novamente.

Usando a cláusula else if

A cláusulaelse ifnos permite ter várias expressões dentro do mesmo comando If. Isso permite escolher entre várias situações e, caso nenhuma retorne verdadeiro, o fluxo irá para a cláusula else, se esta for utilizada. Veja

if (Salario<1250){
document.write("Remuneração isenta de imposto")
} else if (Salario >= 1250 && Salario<1800) {
document.write("Retenção de 5% para imposto mensal")
} else if (Salario >= 1800 && Salario<2200) {
djocument.write("Retenção de 7% para imposto mensal")
} else {
document.write("Retenção de 9% para imposto mensal")
}
</script>

Podemos observar que a cláusula else if pode ser utilizada várias vezes, permitindo calcular várias faixas para um valor de salário. Aqui, utilizamos a variável Salario, mas este valor pode vir de um banco de dados que será alimentado por usuários do sistema, em momento totalmente distinto a sua programação.

Por isso, os sistemas são bastante flexíveis aos dados e devem tratá-los de acordo com as normas e legislações 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 decisão If

Lista de exercícios

Exercício 1. Elaborar um algoritmo para receber um número inteiro e informar se ele é par ou ímpar.

Nome do arquivo: pares.txt
<form name="frm_teste">
Numero: <input type="text" name="num">
<input type="button" value="Resultado" onclick="Parx()">
</form>
<script language="javascript">
function Parx(){
num=parseFloat(document.frm_teste.num.value)
if(num % 2 == 0){
alert("Par")
} else {
alert("Ímpar")
}
}
</script>

Exercício 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>
<form name="frm_teste">
Temperatura: <input type="text" name="temperatura">
<input type="button" value="Resultado" onClick="Temperaturax()">
</form>
<script language="javascript">
function Temperaturax(){
temperatura=parseFloat(document.frm_teste.temperatura.value)
febre=37
if(temperatura >= febre){
alert("Paciente com febre")
}else {
alert("Paciente sem febre")
}
}
</script>

Exercício 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??
<form name="frm_teste">
<input type="text" name="s_n" size="1" maxlength="1">
<input type="button" value="Resultado" onClick="Sexox()">
</form>
<script language="javascript">
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")
}
}
</script>

Exercício 4. Faça um programa que indique se o ano é bissexto ou não.

Nome do arquivo: bissexto.txt
<form name="frm_teste">
Digite o ano: <input type="text" name="Ano">
<input type="button" value="Resultado" onClick="Bissexto()">
</form>
<script language="javascript">
function Bissexto() {
Ano=parseFloat(document.frm_teste.Ano.value)
if (Ano % 4 == 0){
alert(Ano + " é bissexto")
} else {
alert(Ano + "não é bissexto")
}
}
</script>

Usando Operadores relacionais

<	Menor que
>	Maior que
==	Igual a
<=	Menor ou Igual a
>=	Maior ou igual a
!=	Diferente

Lista de exercícios

Exercício 1. Faça um programa que indique se ele é maior, menor ou igual a 100.

// Nome do arquivo: maiorque100.txt<br>
<form name="frm_teste">
Numero: <input type="text" name="numero">
<input type="button" value="Resultado" onClick="maiorque()">
</form>
<script language="javascript">
function maiorque() {
numero=parseFloat(document.frm_teste.numero.value)
if(numero<100){
alert("O número é menor do que 100")
}else{
alert("O número é maior ou igual a 100")
}
}
</script>

Exercício 2. Faça um programa que indique se ele é positivo, negativo ou igual a 0.

// Nome do arquivo: positivo.txt
<br>
<form name="frm_teste">
Número: <input type="text" name="n">
<input type="button" value="Resultado" onClick="positivo()">
</form>
<script language="javascript">
function positivo() {
n=parseFloat(document.frm_teste.n.value)
if (n>0) {
alert("O número é positivo")
}else {
alert("O número ou é igual a 0 ou é negativo")
}
}
</script>

Exercício 3. Faça um programa que receba dois números e mostre o maior.

// Nome do arquivo: maior.txt
<form name="frm_teste">
Digite o primeiro número:
<input type="text" name="num1"><br>
digite o segundo número:
<input type="text" name="num2">
<input type="button" value="Resultado" onClick="maior()">
</form>
<script language="javascript">
function maior() {
num1=parseFloat(document.frm_teste.num1.value)
num2=parseFloat(document.frm_teste.num2.value)
if(num1>num2){
alert("O maior número é: "+ num1)
} else if(num1<num2) {
alert("O maior número é: "+ num2)
}else if(num1==num2) {
alert("Os números são iguais")
}
}
</script>

Exercício 4. Criar um algoritmo que receba a idade e informe se é criança, adolescente, adulto ou idoso:

//Nome do arquivo: idade.txt
<br>
<form name="frm_teste">
Qual a sua idade?
<input type="text" name="idade">
<input type="button" value="Resultado" onClick="Idadex()">
</form>
<script language="javascript">
function Idadex() {
idade=parseFloat(document.frm_teste.idade.value)
if (idade<13) {
alert("Você é uma criança")
}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	\|\|	(OU)
NOT	!	(NÃO)

Lista de exercícios

Exercício 1. Faça um programa que receba três notas de um aluno, calcule e mostre a média aritmética e diga se foi aprovado, reprovado ou em recuperação.

// Nome do arquivo: aprovado.txt
<br>
<form name="frm_teste">
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>
<script language="javascript">
function Mediax() {
nota1=parseFloat(document.frm_teste.nota1.value)
nota2=parseFloat(document.frm_teste.nota2.value)
nota3=parseFloat(document.frm_teste.nota3.value)
media=(nota1 + nota2 + nota3)/3
alert("Média aritmética: " + media)

if(media >= 0 && media<5) {
alert("Reprovado")
}
else if( media >= 5 && media<7) {
alert("Em recuperação")
}
else if (media >= 7 && media <= 10) {
alert("Aprovado")
}
}
</script>

Exercício 2. Faça um programa que receba três notas de um aluno, calcule e mostre a média aritmética e diga se tirou nota A, B, C, D, ou E.

// Nome do arquivo: nota.txt
<br>
<form name="frm_teste">
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>
<script language="javascript">
function Mediax() {
nota1=parseFloat(document.frm_teste.nota1.value)
nota2=parseFloat(document.frm_teste.nota2.value)
nota3=parseFloat(document.frm_teste.nota3.value)
media=(nota1 + nota2 + nota3)/3
alert("Média aritmética: " + media)

if(media >= 8 && media <= 10) {
alert("nota A")
}else if(media >= 6 && media<8) {
alert("nota B")
}else if(media >= 4 && media<6) {
alert("nota C")
}else if(media >= 2 && media<4) {
alert("nota D")
}else if(media >= 0 && media<2) {
alert("nota E")
}
}
</script>

Exercício 3. Dados três valores A, B, C, verificar se eles formam um triângulo eqüilátero, isósceles ou escaleno.

// nome do arquivo: triangulo.txt<br>
Triângulo<br>
<form name="frm_teste">
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>
<script language="javascript">
function Triangulo() {
A=parseFloat(document.frm_teste.A.value)
B=parseFloat(document.frm_teste.B.value)
C=parseFloat(document.frm_teste.C.value)
if(A<(B + C) && B<(A + C) && C<(A + B)) {
if(A==B && B==C) {
alert("Triângulo Eqüilátero")
} else if(A==B || A==C || B==C) {
alert("Triângulo Isósceles")
} else {
alert("Triângulo Escaleno")
}
}else {
alert("Estes valore não formam um triângulo")
}
}
</script>

Exercício 4. Crie uma estrutura de decisão comparando dois alunos e informe se ele foram aprovados ou reprovados

// Nome do arquivo: alunos.txt
<br>
<script language="javascript">
Aluno1="Aprovado"
Aluno2="Reprovado"
if (Aluno1=="Aprovado" && Aluno2=="Aprovado"){
document.write("Ambos estão aprovados!")
} else {
document.write("Um dos alunos foi reprovado")
}
</script>

Comando Case

Repare nesta outra construção para comando if aninhado:

Embora essa construção seja perfeitamente válida, há uma forma mais eficiente de se obter os mesmos resultados. É o comando case cujo funcionamento é muito parecido com os if's aninhados:

Este comando permite que várias comparações sejam feitas e, no final, apenas uma seja escolhida para executar um código específico da condição selecionada. Ele funciona igualmente a vários ifs, mas agora ele testa os valores de uma mesma variável.

Vejamos um exemplo:

No exemplo anterior, o comando Case testará linha a linha, em busca de um case que corresponda ao valor da variável.

Quando encontrar o valor correspondente, executará os comandos que virão logo após este case.

Em linguagens de programação tais como o C, Java, Javascript PHP, esses comandos estarão entre { }, se for mais que um. Teste o código e veja como fica.

Usando o comando break

Quando precisamos executar apenas o case que corresponda ao valor da variável, utilizaremos um comando que tem a característica de para fluxos de execução, o comando break. Caso esse não seja utilizado, todos os cases após o case que corresponda ao valor da variável de referência serão executados.

Utilizando o exemplo anterior, veremos como ficaria o código com o uso do comando break:

switch(valor){
case 0: document.write("O valor da variável é 0");
break;
case 1: document.write("O valor da variável é 1");
break;
case 2: document.write("O valor da variável é 2");
break;
case 3: document.write("O valor da variável é 3");
break;
case 4: document.write("O valor da variável é 4");
break;
}
</script>

No exemplo anterior, apenas os comandos que correspondam ao case que tem o mesmo valor da variável serão executados.

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

Exemplo 1. Determine o número de dias durante um mês

// Nome do arquivo: dias.txt
<form name="frm_teste">
Digite o mês: <input type="text" name="Mes"><br>
Digite o ano: <input type="text" name="Ano">
<input type="button" value="Resultado" onClick="DiasX()">
</form>
<script language="javascript">
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

switch(DiaDaSemana) {

case 0: document.write("Domingo"); break;
case 1: document.write("Segunda"); break;
case 2: document.write("Terça"); break;
case 3: document.write("Quarta"); break;
case 4: document.write("Quinta"); break;
case 5: document.write("Sexta"); break;
case 6: document.write("Sábado"); break;
}
</script>

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

Exemplo 4. Crie um programa que gerencie um caixa eletrônico

// Nome do arquivo: caixa.txt
<pre>
Menu Principal
---------------
1 - Inclusão
2- Alteração
3 - Exclusão
4 - Relatório
5 - Fim
--------------

Escolha sua opção
</pre>
<form name="frm_teste">
<input type="text" name="menu" size="1" maxlength="1">
<input type="button" value="Resultado" onClick="Menux()">
</form>
<script language="javascript">
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("Relatório"); break;
case "5": alert("Sair"); break;
default: alert("Opção inválida "); break;
}
}
</script>

Exercício 5. Crie uma calculadora com as 4 operações da matemática: adição, subtração, divisão e multiplicação.

// Nome do arquivo: operacao.txt
<form name="frm_teste">
Digite o primeiro número: <input type="text" name="A"><br>
Escolha um operador + , -, * , / <input type="text" name="operador" size="1" maxlength="1"><br>
Digite o segundo número: <input type="text" name="B">
<input type="button" value="Reslutado" onClick="calculadora()">
</form>
<script language="javascript">
function calculadora() {
A=parseFloat(document.frm_teste.A.value)
B=parseFloat(document.frm_teste.B.value)
operador=document.frm_teste.operador.value
switch(operador) {
case "+": alert("Resultado soma da igual a "+ (A + B)); break;
case "-": alert("Resultado da subtração igual a "+ (A - B)); break;
case "*": alert("Resultado da multiplicação igual a "+ (A * B)); break;
case "/": alert("Resultado da divisão igual a "+ (A / B)); break;
default: alert("Caractere diferente de + , -, * , /"); break;
}
}
</script>

Exercício 6. Crie um programa que digite um caractere e diga se ele é vogal maiúscula, valor numérico, operador aritmético ou outro caractere.

// Nome do programa: caracteres.txt
<form name="frm_teste">
Escolha um caractere: <input type="text" name="caractere" size="1" maxlength="1">
<input type="button" value="Resultado" onClick="Caracterex()">
</form>
<script language="javascript">
function Caracterex() {
caractere=document.frm_teste.caractere.value
switch(caractere){
case "A":
case "E":
case "I":
case "O":
case "U":
alert("Vogal maiúscula");
break;
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
alert("Valor numérico");
break;
case "+":
case "-":
case "*":
case "/":
alert("Operador Aritmético");
break;
default:
alert("Você digitou outro caractere")
break;
}
}
</script>

Operador Ternário

Diferente da instrução IF, o operador ternário tem este nome porque necessita de três operandos para se avaliado. Ooperador ternário tem a seguinte forma:

condição1 ? expressão_verdadeira : espressão_falsa

Para avaliar o resultado da expressão primeiro a condição1 é avaliada. Caso este resultado seja verdadeiro então resultado da expressão será igual ao valor da expressão_verdadeira, no caso contrário expressão_falsa é avaliada e se torna o resultado.

Exemplo 1:

Exemplo 2:

Exemplo 3:

<form name="frm_teste">
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>
<script language="javascript">
function Mediax() {
nota1=parseFloat(document.frm_teste.nota1.value)
nota2=parseFloat(document.frm_teste.nota2.value)
nota3=parseFloat(document.frm_teste.nota3.value)
media=(nota1 + nota2 + nota3)/3
alert("Média aritmética: " + media)
resultado=(media >= 6)&&(media <= 10) ? "Aprovado" : "Reprovado"
alert(resultado)
}
</script>

Comando For

O comando FOR é uma estrutura de repetição que repete uma série de instruções um número especificado de vezes. Digamos que deseje imprimir seu nome na tela dez vezes, por exemplo:

document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
document.write(nome+"<br>")
</script>

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

Bart Simpson

Ter muitas linhas em seu programa contendo instruções idênticas alonga-o além do necessário e desperdiça memória. Também mostra um estilo de programação ruim. Ao menos que você deseje que seus amigos programadores riam de você pelas costas, aprenda a substituir códigos de programa redundante por loops de programa.

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

for(var i=1; i<=10; i++){
document.write(nome+"<br>")
}
</script>

Substitua a rotina do programa anterior por esta. Quando você roda o programa, a saída será idêntica àquela do primeiro programa, mas agora o programa é menor e sem código redundante.

Exercício 1. Crie uma estrutura de repetição que conte de 1 até 10.

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

Exercício 2. Crie uma estrutura de repetição que imprima os números pares.

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

Exercício 3. Crie uma estrutura de repetição que imprima os números ímpares.

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

Exercício 4. Crie uma estrutura de repetição que imprima os números múltiplos de 5.

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

Exercício 5. Crie uma estrutura de repetição que conte de 110 até 120.

Resultado: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120,

Exercício 6. Crie uma estrutura de repetição que conte de 40 até 80 e ao mesmo tempo imprima números múltiplos de 8.

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

Exercício 7. Crie uma estrutura de repetição que conte de 20 até 1 invertidamente.

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

Exercício 8. Crie uma estrutura de repetição que conte de -10 até + 10 (números negativos e números positivos)

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

Exercício 9. Crie uma estrutura de repetição que conte de -25 até -15.

Resultado: -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15,

Exercício 10. Crie um conjunto dos números múltiplos de 3 usando a estrutura de repetição FOR.

Resultado: 0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30,

Exercício 11. Crie uma estrutura de repetição de 1 até 10, informando o quadrado deste número.

Exercício 12. Crie uma estrutura de repetição que imprima "Olá" dez vezes.

Comando while

O comando while é utilizado quando se deseja repetir um comando, ou um grupo de comandos, enquanto uma dada condição for verdadeira. Um exemplo muito simples é o de escrever os números inteiros entre 1 e 10 na tela. Para isto podemos construir um programa muito simples para esta tarefa

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 condição e após imprime e incrementa a variável. Assim o programa deve gerar seqüencialmente os valores 1, 2, 3... 10. Após o valor 10 faz i=11 e volta a testar a condição. Neste caso (11 <= 10) é false e o programa termina.

Exercício 1. Crie uma estrutura de repetição que conte de 1 até 10.

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

Exercício 2. Crie uma estrutura de repetição que imprima os números pares

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

Exercício 3. Crie uma estrutura de repetição que imprima os números ímpares.

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

Exercício 4. Crie uma estrutura de repetição que imprima os números múltiplos de 5.

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

Exercício 5. Crie uma estrutura de repetição que conte de 110 até 120.

Resultado: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120,

Exercício 6. Crie uma estrutura de repetição que conte de 40 até 80 e ao mesmo tempo imprima números múltiplos de 8.

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

Exercício 7. Crie uma estrutura de repetição que conte de 20 até 1 invertidamente.

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

Exercício 8. Crie uma estrutura de repetição que conte de -10 até + 10 (números negativos e números positivos)

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

Exercício 9. Crie uma estrutura de repetição que conte de -25 até -15.

Resultado: -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15,

Exercício 10. Crie um conjunto dos números múltiplos de 3 usando a estrutura de repetição while.

Resultado: 0, 3, 6, 12, 15, 18, 21, 24, 27, 30,

Exercício 11. Antes de executar um programa, crie uma mensagem informando se deseja prosseguir.

Loops invertidos

Assim como a instrução For e a instrução while, vistos anteriormente, o loop invertido, ao contrário do comando while, é um bloco de comando que será executado pelo menos uma vez e será repetido até que a condição associada seja verdadeira.

Há situações em que é importante se garantir a execução de uma seqüência de comandos pelo menos uma vez. Veja um exemplo simples:

Observe que, repetimos duas vezes o mesmo comando: "Digite o mês".

Podemos simplificar este comando somente uma vez, usando a estrutura de repetição do while .

do while é o loop invertido de while.

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

Pode-se também utilizar este comando para execuções sucessivas de um programa. Neste caso, é comum se fazer uma pergunta do tipo "Deseja continuar (s/n)?" após cada execução.

Naturalmente, é necessário uma variável do tipo caractere que receba a resposta do usuário e que será utilizada para controlar a estrutura de repetição. Teríamos algo como:

} while(Resp.toUpperCase()!="N")
</script>

Vale lembrar que a função toUpperCase() retorna o argumento no formato maiúsculo.

Observe mais um exemplo:

Loops Infinitos

Veja o exemplo abaixo:

Atenção, não teste este código!

Não teste este código
<script language="javascript">
Contador=0; n=0;
while(Contador<=10){
document.write(n + ", ")
n=n + 1
}
</script>
Não teste este código

Se você entendeu os exemplos anteriores sobre os loops, deve perceber que existe um erro nesse exemplo. Como pode ver a condição do loop while refere-se à variável contador, mas essa variável realmente não se altera durante o loop. Isso crua um loop infinito. O loop continuará executando até que seja interrompido pelo usuário ou até gerar algum tipo de erro.

Os loops infinitos nem sempre podem ser interrompidos pelo usuário, exceto fechando onavegador, em alguns casos os loops infinitos podem até impedir que onavegadorfeche ou provocar uma pane no sistema.

Eles também podem ser difíceis de serem identificados, porque este tipo de código não lhe mostrará um erro dizendo que há um loop infinito. Mas não 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 saída.

Nota: Dependendo da versão do navegador em utilização, o loop infinito pode até mesmo fazer o navegador para de responder ao usuário. 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 situações em que você quer que seu programa execute até o usuário interrompê-lo ou em que fornece uma rota de escape com a instruçãobreak. Uma maneira de criar um loop infinito é o seguinte:

while(true) { ...}

Como o valor true é condicional, esse loop sempre encontrará sua condição como sendo verdadeira.

Escapando de um loop infinito utilizando a instruçãobreak

Há uma maneira de escapar de um loop infinito. Você pode utilizar a instruçãobreak(que significa parar) durante um loop para sair dele imediatamente e continuar a primeira instrução depois do loop. O exemplo abaixo mostra o uso dessa instrução.

Embora a instrução while esteja configurada como um loop infinito, a instrução if verifica o valor correspondente. Se total maior que 100, sai do loop.

Quando este tipo de código encontra uma instruçãobreak, ele pula o resto do loop e continua o script com a primeira instrução depois da chave de fechamento no final do loop. Você pode utiliza a instruçãobreakem qualquer tipo de loop, seja infinita ou não.

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.

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

Continue

A declaração continue é usada quando não se quer executar nenhum dos comandos daquele ponto até o fim do bloco, mas queremos que o laço prossiga com a próxima interação. No caso do exemplo anterior, se i for 10, o laço se interrompe e o restante da matriz não será preenchido. Em lugar disto, podemos usarcontinueque não só salta o processo de atualização, mas salta além do calcula que iria provocar um erro. O seguinte código permite que o laço continue, mas salta todos os números ímpares.

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 variável em uma unidade, o decremento (x--) diminui o valor da variável em uma unidade, ou seja:

x++ é idêntico a x=x + 1

x-- é idêntico a x=x-1

Os operadores de incremento e decremento podem ser prefixos ou pós-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 é idêntico a x=x + 1

x-- ou --x é idêntico a x=x-1

Veja o exemplo abaixo:

O resultado da execução deste pequeno script é o seguinte:

Se a=2

O resultado de a++ é 3

Se a=2

O resultado de ++a é 3

Da mesma forma são os operadores decrementais a-- e --a, é só substituir + + por --; porém o resultado é 1.

Os operadores incrementais são muito usados em estruturas de repetições, tais como o For e o while. Exemplo:

Exemplo 1:

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

Exemplo 2:

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

Atenção programadores!!!

Em linguagens de programação tais como Java e o Javascript devemos ter cuidado na hora de usar operadores incrementais.

Quando colocamos uma variável e um outro operador de atribuição "=" na frente dos operadores incrementais + + e -- há uma sutil diferença:

A=x++

é diferente de

A= ++x

Imagine que variável x seja igual a 5. Nos dois casos o resultado de A deveria ser 6 nas duas operações.

Se:

A=5

A=x++

O resultado é:

A=5

x=6

A=5

A=++x

O resultado é:

A=6

x=6

Esta sutileza sintática pode gerar pequenos erros de programação.

Da mesma forma é o operador decremental "--".

Se:

A=5

A=x--

O resultado é:

A=5

x=4

A=5

A=--x

O resultado é:

A=4

x=4

Veja o exemplo na prática:

O resultado da execução deste pequeno script é o seguinte:

a=2

a++=2

++a=3

Operadores de atribuição

Operadores de atribuição (semelhante aos operadores aritméticos) são símbolos usados pelo computador + , -, * , /, para efetuar cálculos matemáticos.

Veja tabela abaixo:

Nome	Operador	Utilização	Equivalente a
Adição	+=	a+=b	a=a + b
Subtração	-=	a-=b	a=a-b
Multiplicação	* =	a * =b	a=a * b
Divisão	/=	a/=b	a=a/b
Módulo	%=	a%=b	a=a%b
Concatenação	+=	a+=b	a=a+b

Veja os exemplos:

// Exemplo 2:
x=7
y=4
x-=y // Resultado x=3, idêntico a x=x-y
document.write(x+"<br>")

// Exemplo 3:
V1=8
V1*=2 // Resultado V1=16, idêntico a V1=V1 * 2
document.write(V1+"<br>")

// Exemplo 4:
z=12
z/=3 // Resultado z=4, idêntico a z=z/3
document.write(z+"<br>")

// Exemplo 5:
h=9
i=2
h%=i // Resultado h=1, idêntico a h=h%i
// Observação: O operador Módulo retorna o resto da divisão
document.write(h+"<br>")

// Exemplo 6:
Variavel="texto 1 "
Variavel+="texto 2" // Resultado variavel="texto 1 texto 2" idêntico a variavel=variavel."texto 2"
document.write(Variavel+"<br>")
</script>

Array

Array é um conjunto de dados semelhantes (Como números, letras ou strings) armazenados com o mesmo nome. Aos dados é atribuído um número diferente no array.

Quando o array tem somente uma dimensão, é chamado de vetor.

A maioria das linguagens de programação pode armazenar e manipular matrizes de uma ou mais dimensões. As matrizes multidimensionais são muito usados em simulação científica e no processamento matemático; entretanto uma matriz pode ser apenas uma tabela de preços mantidas na memória para acesso instantâneo por um programa de entrada de pedido.

Tipos de Arrays

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

Vetores são arrays com uma dimensão.

Matrizes são arrays com mais de uma dimensão.

Exemplos de vetores

1 - Na horizontal

2 - Na vertical

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"
vogais[3]="O"
vogais[4]="U"

Fruta=Array()
Fruta[0]="Banana"
Fruta[1]="Laranja"
Fruta[2]="Maçâ"
Fruta[3]="Mamão"

Cursos=Array()
Cursos[0]="Português"
Cursos[1]="Matemática"
Cursos[2]="Física"
Cursos[3]="Química"
Cursos[4]="Biologia"
Cursos[5]="Inglês"
Cursos[6]="Geografia"
Cursos[7]="História"

estadocivil=Array()
estadocivil[0]="solteiro"
estadocivil[1]="casado"
estadocivil[2]="divorciado"
estadocivil[3]="viúvo"
</script>

Usando vetores

Exercício 1. Elabore um vetor vertical que contenha os dias da semana.

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

for (var x=0; x <= 6; x++ ) {
document.write(lista[x] + ", ");
}
</script>

Exercício 2. Elabore um vetor horizontal que contenha os meses do ano.

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

for(var x=0; x <= 11; x++ ) {
document.write(mes[x] + ", ")
}
</script>

Exercício 3. A partir da tabela abaixo, foram criados dois vetores de 6 posições: NOME e IDADE.

	Nome	Idade
1	Beatriz	19
2	Pedro	32
3	Cláudio	23
4	Susana	27
5	Marcos	16
6	Celina	35

Com base nesta informação, diga o que será impresso pelas instruções abaixo:

Solução:

Nome[0]="Beatriz"
idade[0]=19
Nome[1]="Pedro"
idade[1]=32
Nome[2]="Cláudio"
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){
document.write(Nome[i]+" ")
}
}
</script>

Exercício 4. A tabela abaixo contém o nome de algumas ruas e o bairro onde se localizam.

Rua	Bairro
Mena Barreto	Botafogo
Constança Barbosa	Méier
Marechal Câmara	Centro
Álvaro Ramos	Botafogo
Cesário Alvim	Humaitá
José Clemente	Niterói

As instruções 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.

Solução

bairros=Array("Botafogo", "Méier", "Centro", "Botafogo", "Humaitá", "Niterói")

alert("Número 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++){

if(bairros[i]=="Botafogo"){
document.write("Nome da rua: " + ruas[i])
document.write(" Nome do bairro: " + bairros[i]+"<br>")
}

}
</script>

Exercício 5. Faça um programa para imprimir o signo do zodíaco correspondente a uma data qualquer (dia / mês).

A tabela a seguir mostra o último dia de cada mês e o signo correspondente:

Mes	Último dia	Signo
01	20	Capricórnio
02	19	Aquário
03	20	Peixes
04	20	Áries
05	20	Touro
06	20	Gêmeos
07	21	Câncer
08	22	Leão
09	22	Virgem
10	22	Libra
11	21	Escorpião
12	21	Sagitário

Importante: Armazene o horóscopo em uma array.

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>

Exercício 6. Faça um programa que imprima na tela a seguinte tabela abaixo:

Índice	Planeta	Luas	Anos	Distância
1	Mercúrio	0	0.024	58
2	Vênus	0	0.625	108
3	Terra	1	1	150
4	Marte	2	1.91	228
5	Júpiter	16	12	778
6	Saturno	18	29.9	1427
7	Urano	15	85.24	2869
8	Netuno	8	167.19	4498
9	Plutão	1	251.29	5900

planeta[0]="Mercúrio"
luas[0]=0
anos[0]=0.24
distancia[0]=58
planeta[1]="Vênus"
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 distância<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 informação: 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 é também 0 .

Podemos transformar qualquer tabela em matriz.

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

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

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

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

Notas	Nota 1	Nota 2
Aluno01	7	7.5
Aluno02	6	5.5
Aluno03	7	8
Aluno04	3	7.5
Aluno05	4	4.5

Existem várias formas de transformar tabelas em matrizes. Vejamos o exemplo 01:

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

/* O exemplo acima não é uma matriz, mas sim, dois vetores vistos na lição anterior. Podemos substituir matrizes por vetores. Do exemplo 2 em diante, os vetores são substituídos por matrizes. */

// Para saber quanto o aluno 04 tirou na 2ª nota é fácil:

document.write(Nota2[4-1])
// Observe que o aluno 04 é 3 (4-1) porque as notas iniciam com 0 e não com 1
</script>

Exemplo 02:

Do exemplo 2 em diante transformamos a tabela em matriz.

Exemplo 03:

O exemplo 3 não usa as variáveis Aluno01, Aluno02, Aluno03, Nota1, Nota2, em seu código:

// Para saber quanto o aluno 02 tirou na 2ª nota é fácil:
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

Lista de exercício:

Exercício 1. A partir da tabela abaixo, foram criados dois vetores de 6 posições: NOME e IDADE.

	Nome	Idade
1	Beatriz	19
2	Pedro	32
3	Cláudio	23
4	Susana	27
5	Marcos	16
6	Celina	35

Com base nesta informação, diga o que será impresso pelas instruções abaixo:

Solução 1:

Nome[0]="Beatriz"
idade[0]=19
Nome[1]="Pedro"
idade[1]=32
Nome[2]="Cláudio"
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){
document.write(Nome[i]+" ")
}
}
</script>

Solução 2:

Matriz=Array(Array(),Array())

Matriz[nome][0]="Beatriz"
Matriz[idade][0]=19
Matriz[nome][1]="Pedro"
Matriz[idade][1]=32
Matriz[nome][2]="Cláudio"
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>

Solução 3:

for(var i=0; i<=5; i++){
if(Matriz[1][i]<20){
document.write(Matriz[0][i]+" ")
}
}
</script>

Solução 4:

Exercício 2. A tabela abaixo contém o nome de algumas ruas e o bairro onde se localizam.

Rua	Bairro
Mena Barreto	Botafogo
Constança Barbosa	Méier
Marechal Câmara	Centro
Álvaro Ramos	Botafogo
Cesário Alvim	Humaitá
José Clemente	Niterói

As instruções 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.

Solução

Criamatriz[0][0]="Mena Barreto"
Criamatriz[1][0]="Botafogo"
Criamatriz[0][1]="Constança Barbosa"
Criamatriz[1][1]="Méier"
Criamatriz[0][2]="Marechal Câmara "
Criamatriz[1][2]="Centro"
Criamatriz[0][3]="Álvaro Ramos "
Criamatriz[1][3]="Botafogo"
Criamatriz[0][4]="Cesário Alvim "
Criamatriz[1][4]="Humaitá"
Criamatriz[0][5]="José Clemente "
Criamatriz[1][5]="Niterói"

for(var i=0; i<=5; i++){
document.write("Rua: " + Criamatriz[0][i] + ", bairro: " + Criamatriz[1][i]+"<br>")
}

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>

Exercício 5. Faça um programa para imprimir o signo do zodíaco correspondente a uma data qualquer (dia / mês).

A tabela a seguir mostra o último dia de cada mês e o signo correspondente:

Mes	Último dia	Signo
01	20	Capricórnio
02	19	Aquário
03	20	Peixes
04	20	Áries
05	20	Touro
06	20	Gêmeos
07	21	Câncer
08	22	Leão
09	22	Virgem
10	22	Libra
11	21	Escorpião
12	21	Sagitário

Importante: Armazene o horóscopo em uma array.

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>

Exercício 6. Faça um programa que imprima na tela a seguinte tabela abaixo:

Índice	Planeta	Luas	Anos	Distância
1	Mercúrio	0	0.024	58
2	Vênus	0	0.625	108
3	Terra	1	1	150
4	Marte	2	1.91	228
5	Júpiter	16	12	778
6	Saturno	18	29.9	1427
7	Urano	15	85.24	2869
8	Netuno	8	167.19	4498
9	Plutão	1	251.29	5900

Planeta=0
luas=1
anos=2
distancia=3

Matriz[Planeta][0]="Mercúrio"
Matriz[luas][0]=0
Matriz[anos][0]=0.24
Matriz[distancia][0]=58
Matriz[Planeta][1]="Vênus"
Matriz[luas][1]=0
Matriz[anos][1]=0.625
Matriz[distancia][1]=108
Matriz[Planeta][2]="Terra"
Matriz[luas][2]=1
Matriz[anos][2]=1
Matriz[distancia][2]=150
Matriz[Planeta][3]="Marte"
Matriz[luas][3]=2
Matriz[anos][3]=1.91
Matriz[distancia][3]=228

document.write("Planeta luas anos distância<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 funções

Função é um subprograma de linguagem de computador que faz alguns cálculos e retorna um único valor para o programa principal.

Exemplo:

// Programa
document.write(Calcule(4, 3, 2)) // Resultado 6
</script>

O comando returné uma instrução que encerra o processamento de uma função e transfere o controle de volta ao módulo que o chamou, e (opcionalmente) especifica o valor da função.

A função acima retornou o valor que é 6.

Uma função pode retornar ou não poder retornar valores, basta não usar a instrução return.

Exemplo:

// Programa principal
Calcule(4, 3, 2)
</script>

O exemplo acima a função não retornou valores.

Em um único programa pode ser armazenado várias funções diferentes, por exemplo:

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

function Multiplicacao(a, b) {
c=a * b
return c
}

function Divisao(a, b){
return a/b
}

// Programa principal
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 exercícios

Exercício 1. Crie uma função que calcule a soma de dois números

//Programa principal
document.write("A soma de 5 e 4 é " + soma(5, 4))
</script>

Exercício 2. Crie uma função que calcule o cubo de um número.

// Programa principal
document.write("O cubo de 8 é igual a " + cubo(8))
</script>

Exercício 3. Crie uma função que calcule a área do retângulo

// Programa principal
largura=4
altura=8
document.write(calcArea(largura, altura))
</script>

Exercício 4. Crie uma função que calcule números fatoriais

// Programa principal

for(var k=1; k<=10; k++){
document.write(k, "!=",fatorial(k)+"<br>")
}
</script>

Variáveis 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 variáveis numéricas (var_1=9), variáveis strings (var_2="Texto") e variáveis booleanas (var_3=true) existem as variáveis nulas (var_4=null).

Atenção: encontrar variáveis nulas num código fonte são raros, mas de vez enquanto aparecem, os exemplos abaixo são simplesmente demonstrações.

Quando você que limpar uma variável em faço o seguinte:

1º exemplo:

//Limpando as variáveis
Var_1=null
Var_2=null
Var_3=null
</script>

2º exemplo:

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

if(Sobrenome==null){
Sobrenome="Aurelio"
}

document.write(Nome + " " + Sobrenome)

</script>

3º exemplo:

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 formulários

Formulário é um documento estruturado com espaço reservado para a entrada de informações e, em geral, contendo alguns códigos especiais. Em algumas aplicações (especialmente banco de dados), formulário é uma caixa ou janela ou outro elemento de apresentação independente com áreas predefinidas para a entrada ou a alteração de informações. Um formulário é um "filtro" visual para os dados básicos que estão sendo apresentados, em geral oferecendo as vantagens de uma melhor organização de dados e maior facilidade de visualização.

Quem utiliza os formulários são as seguintes linguagens de programação:

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

Outras linguagens de programação antigas que usam o sistema Dos tais como Pascal, Clipper e outros não usam formulários.

Se nós fizermos uma comparação entre as linguagens de programação mais usadas encontraremos os seguintes objetos.

1) Formulário

2) Botão de comando

2.a) Botão fechar:

2.b) Botão limpar:

3) Caixa de texto:

4) Rótulo (Label):

5) Senha (Password):

6) Área de texto:

7) Botão de opção:

8) Caixa de seleção:

9) Caixa de combos:

10) Caixa de listagem

11) Caixas de diálogo

12) Hiperlinks

13) Imagens

14) Barra de menu

15) Abrindo uma nova janela

Iremos estudar cada um com mais detalhes:

1) Formulário:

Para sistamas via web tais como: o Html, o Javascript e o vbscript. Para criar um formulário, você utiliza a tag <FORM>. Assim como as tabelas, que usam o comando <TABLE> </TABLE>, o formulário usa o comando <FORM> ... </FORM> para definir a abertura e o fechamento do mesmo.

A forma geral do comando é a seguinte:

...

</form>

Seus parâmetros são:

Parâmetros	Definição
method	Esse parâmetro especifica o metodo que será usado para enviar o formulário, usa os parâmetros get e post.
action	O parâmetro action especifica a URL que será processado.

A tag <FORM> usa dois parâmetros action e method, veja abaixo:

METHOD é o parâmetro que define o metodo de envio de formulário para o servidor onde está hospedado seu site. O parâmetro method só pode ter dois valores: "get" e "post"; mas o method="post" é o mais usado, acostume a utilizar o post.

ACTION é o parâmetro que define o endereço (www.servidor.com.br) e a página (bancodedados.php) onde os dados do formulário serão enviados.

Para enviar os dados do formulário para o nosso servidor utilizamos o botão Submit:

Que iremos ver logo em seguida.

Observação: o botão enviar, o botão upload e o botão limpar só existem em Html, Javascript, PHP e ASP.

a) Botão Enviar (Submit)

Para enviarmos os dados do formulário para o servidor onde está o banco de dados, devemos criar o botão Submit.

b) Botão Limpar (Reset)

Se você inserir novas informações para os campos do formulário, terá de apagar e digitar o texto nos campos de digitação. Por meio do botão Limpar tudo, você pode apagar e restabelecer o valor padrão para todos os campos do formulário de uma única vez.

Veja o comando limpar abaixo:

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

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 é próprio para isto. Este comando envia para o servidor qualquer tipo de arquivo.

Sintaxe:

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome deste comando

Clicando no botão você abre uma janela e nesta janela você anexa seu arquivo na página de seu navegador. No campo ao lado do botão está o caminho do arquivo dentro de seu computador, exemplo:

c:\Pasta1\História\Feudalismo.doc

Exemplo:

Envie sua foto aqui:<br>

</center>

</form>

2) Botão de comando

Se não quero enviar os dados do formulário para o servidor mas que os dados fiquem no navegador usamos o botão de comando (button), veja:

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome do botão de comando
value	Imprime um texto no botão
onclick	Executa uma função quando o usuário der um clique no botão

O botão de comando, que também é um campo input e usa três parâmetros (type, value e onclick), usa também a linguagem Javascript.

Para inserir um botão de comando use o parâmetro 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 formulário para a linguagem Javascript. Veja um exemplo prático.

<html>
<head>
<title> Exemplo </title>
</head>
<script language="javascript">
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 função meu nome posteriormente.

3) Caixa de texto

Este é o comando mais usado para digitação de um campo de texto:

Seus parâmetros são:

Parâmetros	Definição
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 digitação de n caracteres

Veja o exemplo abaixo:

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

        

        Campo 4: <input type="text" name="campo3" value="Isto é um texto">

        

</form>

Resultado

4) Senha (password)

Esse comando é idêntico ao comando caixa de texto. Sua única diferença é que, no lugar dos caracteres digitados aparecem asteriscos. Como o próprio nome indica, ele é ideal para a visualização do texto que está sendo digitados.

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome do password
size	Define o tamanho do password
maxlength	Permite um limite de digitação de n caracteres

Exemplo:

<form>
Digite uma senha: <input type="password" name="senha" size=5 maxlength=5>
</form>

Resultado:

5) Texto oculto (Hidden)

Os campos ocultos não são apresentados no formulário. Eles ficam invisíveis na apresentação do navegador. Se alguém decidir consultar o código fonte Html da sua página este campo serão apresentados.

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome do texto oculto
value	Valor do texto oculto

Exemplo:

6) Área de texto (Textarea)

Define uma caixa de digitação onde o usuário pode digitar livremente um texto com várias linhas.

[texto padrão]

</textarea>

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome da área de texto.
rows	Especifica a altura, ou seja, a quantidade de linhas que a caixa deve ter.
cols	Especifica a largura, ou seja, a quantidade de colunas que a caixa deve ter.

Exemplo:

<form>
         <textarea name="campo1" rows=4 cols=20>
                 Digite seus comentários
         </textarea>
</form>

Resultado:

Código fonte:

Coloque um limite de digitação de n caracteres igual a maxlength da caixa de texto:

<html>
<head>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function updateCharCount(textareaId, spanId, maxSize) {
textarea = document.getElementById(textareaId);
if (textarea == null) {
return;
}
if (textarea.value.length > maxSize) {
textarea.value = textarea.value.substring(0, maxSize);
}
document.getElementById(spanId).innerHTML = maxSize - textarea.value.length;
}
</script>
<body>
<textarea id="messageBody" name="bodyText" cols="50" rows="15" style="width:570px" onKeyUp="updateCharCount('messageBody', 'charCount', 2048)"></textarea>
<p>Caracteres restantes: <span id="charCount">2048</span></p>
</body>
</html>

Resultado:

7) Botão de opção (Radio):

Os botões de opção indicam uma lista de ítens, dos quais apenas um pode ser escolhido. Se um dos botões de opção for selecionado, todos os demais serão desativados.

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome do botão
value	Valor do botão de opção
checked	Esse parâmetro indica que o ítem está pré-selecionado

Exemplo:

<form>
Escolha a sua cor<br>
<input type="radio" name="cor" value="green">Verde<br>
<input type="radio" name="cor" value="yellow" checked>Amarelo<br>
<input type="radio" name="cor" value="blue">Azul<br>
</form>

Resultado:

8) Caixa de seleção (checkbox)

A caixa de seleção parece com o botão de opção, vista anteriormente, mas tem uma diferença inportante.

As caixas de seleção permitem a seleção de vários ítens de uma lista. Cada caixa de verificação pode estar ativada o desativada (o padrão é desativado).

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome do botão
value	valor do botão
checked	Esse parâmetro indica que o ítem está pré-selecionado

Exemplo:

<form>
<input type="checkbox" name="negrito" value="n">Negrito<br>
<input type="checkbox" name="italico" value="i">Itálico<br>
<input type="checkbox" name="sublinhado" value="s" checked>Sublinhado<br>
</form>

Resultado:

9) caixa de combos (select)

Este elemento corresponnde a uma caixa de escolha, na qual o usuário pode selecionar um conjunto pré-determinado de ítens.

Sua sintaxe é diferente do campo <input type="objeto"> descrito anteriormente, veja:

<option [selected]> Opção da seleção

<option> Seleções adicionais

</select>

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome desta caixa de combos
option	Define uma lista de palavras que serão selecionadas numa lista de opções
select	Este parâmetro indica que o ítem está pré-selecionado
value	Valor do ítem selecionado

Exemplo:

Estado onde mora<br>
<select name="estado">
<option selected>Rio de Janeiro
<option>São Paulo
<option>Minas Gerais
<option>Espirito Santo
<option>Nenhuma das anteriores
</select>
</form>

Resultado:

10) Caixa de listagem (Select)

A caixa de listagem é semelhante a caixa de combos. Este comando exibe uma lista de ítens que podem ser selecionados pelo usuário.

Tem a mesma sintaxe da caixa de combos, só aparece quando o parâmetro SIZE for especificado.

Seus parâmetros são:

Parâmetros	Definição
name	Define o nome da caixa de listagem
size	Parâmetro que designa o número de escolhas a mostrar. Se não for preenchido, os ítems surgem como caixa de combos, caso contrário, surgem dentro da caixa de listagem com o número de elementos visíveis colocado em size.
option	Define uma lista de palavras que serão selecionadas numa lista de opção.
select	Este parâmetro indica que o ítem está pré-selecionado
value	valor do ítem selecionado
multiple	Esse parâmetro opcional indica que podem ser escolhidos múltiplos ítens da lista

Exemplo

<form>
Instrumento musical:<br>
<select name="instrumento" size="5" multiple>
<option selected>Violão
<option>Guitarra
<option>Baixo
<option>Teclado
<option>Bateria
<option>Sax
</select>
</form>

Resultado:

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

O parâmetro value:

Tanto a caixa de combos quanto a caixa de listagem, eu posso usar ou omitir o parâmetro value, por exemplo:

11) Caixas de diálogos:

Caixa de diálogo é uma janela que um programa abre na tela para solicitar algum tipo de reposta do usuário.

São 3 tipos de caisas de diálogos:

a) Caixa para aletar (alert)

b) Caixa para escrever (prompt)

c) Caixa para confirmar (confirm)

Todas estas caixas estão contidos na linguagem Javascript.

11. a) Caixa para aletar (alert)

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

Sua sintaxe é:

alert("texto a ser exibido")

Exemplo:

11.b) Caixa para escrever (prompt)

Esta caixa insere algum texto dentro da página html.

Sua sintaxe é:

Saída_de_texto=prompt("Texto a ser exibido","Texto a ser escrito")

Exemplo:

11.c) Caixa para confirmar (confirm)

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

Sua sintaxe é:

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

Exemplo:

Atenção:

Podemos usar outros ítens do Html e transformá-los em ítens do formulário, tais como:

Alterando a imagem através de um botão;
Transformando um link em um botão de comando e
Criar uma barra de menu dentro da página html.

Isto é material a mais para vocês estudarem.

12) Hiperlinks

Nas páginas web, um hiperlink é um botão ou trecho destacado do texto que, ao ser selecionado, remete o leitor a uma outra página.

Veja um exemplo de link:

<a href="pagina1.html">Página 1</a>

Podemos transformar um hiperlink em um botão de comando Javascript.

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

<a href="javascript: mensagem('texto');">Botão de comando</a>

Veja um exemplo de botão usando um link:

<html>
<head>
<title> Exemplo 1</title>
<script language="javascript">

</script>
</head>
<body>
<p> <a href="javascript: mensagem('Testando botão 1');">Botão 1</a></p>
<p> <a href="javascript: mensagem('Oi!');">Botão 2</a></p>
<p> <a href="javascript: mensagem('testando imagem');"><img src="imagem1.jpg"></a></p>
</body>
</html>

13) Imagens

Imagem é a representação gráfica ou fotográfica de pessoas ou objetos, com um conjunto de valores de brilho e cor em pixel, armazenadas num arquivo bitmap.

Observação:

Também podemos usar o evento onclick em substituição ao href="javascript:", a diferença é que onclick não usa a estenção "javascript:" em seu atributo, ex:

Para inserir uma imagem é só colocar este comando:

Onde o parâmetro src é o caminho onde está a imagem no computador ou servidor.

No Javascript, o objeto imagem usa os seguintes eventos:

Eventos	Descrição
onmouseover	Executa um comando quando passamos o mouse sobre o objeto selecionado.
onmouseout	Executa um comando quando o mouse está fora do objeto selecionado.

Exemplo:

Observemos esta imagem:

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

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

Para testar use os seguintes comandos:

Onde:

primeiraimagem=

segundaimagem=

14) Barra de menu:

A barra de menu é uma faixa retangular apresentada em geral na parte superior da janela de um programa aplicativo, ou a esquerda numa página web, na qual o usuário pode selecionar um entre os vários menus disponíveis. Os nomes dos menus disponíveis são apresentados na barra de menus. A seleção de um desses nomes com o teclado ou o mouse faz com que a lista de opções do menu correspondente seja mostrada na tela.

15) Abrindo uma nova Janela:

Para a web, essas janelas são chamadas de Pop-up ou janela instantânea; 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 usuários acham estas janelinhas chatas de fechar e muitos navegadores bloqueiam estas janelas. Eles são escritos em Javascript.

Open(): O método open [abrir], que não deve ser confundido com o métido document.open(), é usado para abrir uma nova janela. Os argumentos padrão que este método assume são:

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

Observe o uso da cadeia "toolbar=no, width=200, height=100" para definir os parâmetos da janela. Estes parâmetros podem ser definidos somente na abertura de novas janelas e não afeta a janela pai, ou a janela mais alta. A lista completa de argumentos de propriedades válidos é:

toolbar = yes\|no	[Barra de ferramentas]
location = yes\|no	[Localização]
diretories = yes\|no	[Diretórios]
status = yes\|no	[Status]
menubar = yes\|no	[Barra de menus]
scrollbar = yes\|no	[Barra de rolagem]
resizable = yes\|no	[Tamanho alterável]
windth= pixels	[Largura em pixels]
height = pixels	[altura em pixels]
left = pixels	[posiciona da esquerda para direita]
top = pixels	[posiciona de cima para baixo]

Veja um exemplo deste tipo de janela:

<html>
<head>
<title>Funciona bem no Internet Explorer</title>
</head>
<body>
<script language="javascript">
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>

Observação:

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>

Insira o texto aqui

</textarea>
<br>
<br>
<input type="button" value="Visualizar" onClick="verpagina(this.form)">
<input type="reset" value="Limpar">
</form>
<br>
<br>
</body>
</html>

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

<html>
<head>
<script language="javascript">

</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 não bloqueiam este tipo de janela. Ele é escrito parte em CSS e parte em Dhtml.

Veja exemplo:

<html>
<head>
<title>Pop-up não bloqueável</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 não 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 código:

<html>
<head>
<title>Aparecer e desaparecer texto</title>
</head>
<script language="javascript" type="text/javascript">

</script>
<body>
<a href="javascript:;" onClick="aparecer();">APARECER</a>
<div id="identificado" style="display: none">
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
</div>
<p>Texto fora da tag DIV</p>
</body>
</html>

Frames

Para já, vou apresentar as frames. Utilisar as frames permite a divisão de janelas afixando a página HTML em várias partes independentes ums dos outros. Pode-se assim caregar diferentes páginas 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 informações entre elas.

A filosofia do Html quer que cada página que compõe um site seja uma entidade independente.

Neste esquemas a página principal contem duas frames, em que podemos trocar informações entre as frames mantendo sempre a mesma página:

<=>

Propriedades

PROPRIEDADES	DESCRIÇÃO
length	Devolve o número de frames subordinadas na página principal (página que contem todas as frames).
parent	Sinónimo para a página principal.

Troca de informação entre frames

Com o exemplo seguinte, vamos transferir dados introduzidos pelo utilizador de uma frame, para outra frame.

A página principal das frames

A página principal contém duas frames subordinadas "subordinada01" e "subordinada02".

A frame subordinada01.htm

A frame subordinada02.htm

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">

</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>
</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. Então o caminho começa por parent.subordinada01. Nesta frame encontra-se um documento que contém um formulário (form1) que contém 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 expressão completa será:

parent.subordinada01.document.form1.en.value=document.form2.out.value

Resultado:

Comunicação da janela modal

Eis um exemplo de método 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

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>
<script language="javascript">
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>
<script language="javascript">
function EscreveValor()
{
if(window.navigator.appName!="Netscape"){

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

Eventos do formulário

Evento é qualquer ação ou ocorrência, em geral provocada pelo usuário, à qual o programa possa responder. Por exemplo: o precionamento de uma tela ou a movimentação do mouse. Se um usuário dá um clique no botão 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
Botão de comando	onClick
Botão Reset	onClick
Botão Submit	onClick
Botão de opção	onClick
Caixa de seleção	onClick
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 usuário 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 usuário 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 formulário é enviado. Ele só se aplica ao elemento FORM.

onReset = script

O evento onReset ocorre quando um formulário é redefinido. Ele só se aplica ao elemento FORM.

onClick = script

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 botão 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 usado com a maioria dos elementos.

onFocus = script

O evento onFocus ocorre quando um elemento recebe o foco, seja pelo mouse ou pela navegação com tabulação. 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 navegação com tabulação. Ele pode ser usado com os mesmo elementos de onFocus.

onChange = script

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 usuário 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 botão do mouse é precionado sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onMouseUp = script

O evento onMouseUp ocorre quando o botão 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

O evento onKeyDown ocorre quando uma tecla é pressionada sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

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

Não podem ser usados com os elemento base, bdo, br, frame, frameset, head, html , iframe, meta, param, script , style, e title.

ATRIBUTO	VALOR	DESCRIÇÃO
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

Não podem ser usados com os elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style e title.

ATRIBUTO	VALOR	DESCRIÇÃO
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 botão do rato é pressionado
onmousemove	script	Script a executar quando o ponteiro do rato muda de posição
onmouseout	script	Script a executar quando o ponteiro do rato deixa de estar sobre um elemento
onmouseover	script	Script a executar quando o ponteiro do rato passa a estar sobre um elemento
onmouseup	script	Script a executar quando o botão do rato é libertado

Vamos deixar de teoria de lado e vamos para a prática:

1 - Evento onClick

Este é o evento mais usado.

O evento onClick ocorre quando um objeto de um formulário do tipo button, checkbox, radio, link, reset ou submit é clicado. Esse evento é controlado pelo gerenciador da linguagem Javascript, como mostra os exemplos a seguir:

Exemplo 1: Ativando caixa de alerta:

<html>
<head>
<title> onClick - 01 </title>
</head>
<body>
<form>
<center>
<input type="button" value="Não aperte este botão" onClick="alert('Curisidade Mata! O seu disco rígido 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 América')">
Cristóvão Colombo
<hr>
2. Qual é a raíz quadrada de 16?
<input type="button" value="Resposta" onClick="alert(eval(Math.sqrt(16)))">

</form>
</body>
</html>

Exemplo 2 - Alterando propriedades

<html>
<head>
<title> onClick - 02 </title>
</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 conteúdo de outros campos:

<html>
<head>
<title> onClick - 03 </title>
<script language="javascript">
function processa1() {
d= eval(document.calculo.campo1.value)+
eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
function processa2() {
d= eval(document.calculo.campo1.value)*
eval(document.calculo.campo2.value)*
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</script>
</head>
<body>
<form name="calculo">
<h2> Usando onClick para alterar o conteúdo de outro campo </h2>
Campo1: <input type="text" name="campo1" value="" size="10" maxlength="10">
Campo2: <input type="text" name="campo2" value="" size="10" maxlength="10">
Campo3: <input type="text" name="campo3" value="" size="10" maxlength="10">
<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 página ou documento. Por exemplo, você clicou no botão back ou voltar do browser ou clicou em um hiperlink. O gerenciador onLoad é responsável por esse evento. Ele pode pertencer ao objeto window e não ao objeto document, como você poderia imaginar:

Exemplo:

<html>
<head>
<title>Teste</title>
</head>
<script language="javascript">
function jump() {
window.open("pag2.html");
}
</script>
<body onLoad="jump()">
</body>
</html>

3 - Evento onUnLoad

O evento onUnLoad ocorre quando você abandona uma página ou documento; por exemplo, quando clica no botão back ou voltar do Browser ou em um hiperlink.

O gerenciador onUnLoad é responsável por este evento. Ele pode ser especificado no comando <body> ou <frameset> e pertence ao objeto window, e não ao objeto document como você poderia imaginar.

Exemplo:

Vejamos um exemplo funcional para esses dois eventos. Criando três páginas chamadas respectivamente de pag01.htm, pag02.htm e pag03.htm.

O documento pag01.htm contém o comando:

Ao clicar em um link para a página seguinte, o método alert será executado antes do carregamento da próxima página.

A página pag02.htm contém apenas dois links, um para a página anterior e outro para a página posterior pag03.htm. A página pag03.htm possui o comando:

Que exibe a caixa de diálogo com a mensagem durante o carregamento da página.

4 - Evento onSubmit

O evento onSubmit ocorre quando o usuário preciona o botão Enviar do formulário. Usando o gerenciador de eventos onSubmit você pode executar algum precedimento especial antes de enviar o formulário e até mesmo evitar que o formulário seja preenchido.

Para evitar o envio do formulário acrescente o comando "return false" dentro do código associado ao gerenciador onSubmit. Se ocomando return for omitido ou outro valor for especificado, o formulário será enviado.

No exemplo abaixo, o gerenciador onSubmit executa o comando return, que executará a função testacampo(), que por sua vez deverá retornar o valor false para evitar o envio do formulário ou outro valor qualquer para enviá-lo.

O exemplo a seguir mostra o gerenciador em ação. No comando Form acrescentamos o gerenciador onSubmit:

Que ativa a função testacampo() quando o botão de envio é precionado. Essa função verifica se todos os campos possuem algum conteúdo digitado testando o tamento dos campos. Caso algum deles não tenha sido preenchido, a função exibe uma caixa de diálogo de alerta e retorna False, evitando o envio do formulário. Caso contrário, exibe uma mensagem informando que todos os campos está preenchidos e envia o formulário após o retorno de true. Na prática você pode optar por consistir cada campo individualmente usando os gerenciadores onClick, onChange e onBlur, optar por fazer uma consistência geral ou, ainda, combinar os dois métidos, pois um usuário pode preencher os dados solicitados em um formulário e pressinar o botão de envio sem ter preenchido nehum campo, exemplo:

<html>
<head>
<title> onSubmit </title>
</head>
<script language="javascript">
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 formulário devem ser preenchidos");
return false;
} else {
alert("todos os campos do formulário 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>
Endereço: <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 circunstãocias pode ser útil submeter um form, mesmo sem utilizar um botão submit, como era tradicional no Html. Vejamos o seguinte exemplo:

<html>
<head>
<title>Teste</title>
</head>
<body>
<script language="javascript">
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 ação de subit equivalente ao de pressionar o botão submit, mesmo sem este existir! Esta ação pode ser produzida com um simples ENTER após o preenchimento do campo. Uma vez que o form está sendo submetido via e-mail, o usuário é notificado pelo brewser dos riscos de segurança (este mecanismo de aviso pede ser desligado nas opções 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 padrão, quando posicionamos o cursor sobre um link, a barra de status da janela do browser mostra o endereço do link. O código associado ao gerenciador deve sempre conter o comando return true para que fincione corretamente.

O próximo exemplo mostra o uso desse gerenciador em duas situações. Na primeira, ele cria um link falso no qual o evento é usado para alterar a cor de fundo do formulário. 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 específica 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.

<html>
<head>
<title> onMouseOver </title>
</head>
<body>
Esta página contém um link para a página chamada pag03 e outro para a página 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 página pode conter material impróprio para menores'; return true">Vai para a página 03</a>
<a href="pag01.htm" onMouseOver="window.status='Esta página pode conter material impróprio para maiores'; return true"> Vai para a página 01</a>
</body>
</html>

6 - Evento onBlur

O evento onBlur ocorre quando um campo não está mais sob o foco. Por exemplo, quando você digita o conteúdo de um campo do tipo texto e pressiona a tecla Tab para avançar para outro campo, ou quando clica em um outro objeto do formulário, fazendo com que o campo atual não seja mais o objeto ativo do programa. Os objetos que geram esse evento são: select, text e textarea.

Sintaxe:

onBlur="código a ser executado"

Quando um formulário precisa ser preenchido e alguns dos campos são obrigatórios, o gerenciador de eventos onBlur é perfeito para criar uma consistência genérica entre os campos. Veja o exemplo a seguir, no qual, em um formulário com cinco campos, o usuário não pode deixar de preencher três deles. Nos campos código, nome e telefone foi adicionado o evento onBlur. nos campos mencionados, quando o usuário pressiona Tab para avançar para outro campo, onBlur é ativado e executa a função campovital(), passando como argumento uma cópia do objeto atual (o campo do tipo text), representada pela palavra chave this.

A função campovital recebe o objeto e testa se o conteúdo da propriedade valor é igal a "", ou seja, nada foi atribuído ao campo. Se isso form verdade, ele exibe uma caixa de diálogo 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>
<script language="javascript">
function campovital(x) {
if (x.value=="") {
alert("O campo "+ x.name+" não pode ser deixado em branco")
}
}
</script>
</head>
<body>
<form>
<br> Código: <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 obrigatórios 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 conteúdo é alterado. Ele é diferente do evento onBlur, que ocorre sempre que o campo perde o foco independente de ter seu conteúdo alterado. O próximo exemplo mostra o uso do gerenciador onChange. no campo nome, ele foi especificado para ativar uma função que verifica a quantidade de caracteres digitados e se for menor do que 5, exibe uma mensagem de erro.

Veja o código do programa:

<html>
<head>
<title>onChange</title>
<script language="javascript">
function testanome(x){
if(x.value.length<5){
alert("O campo "+x.name+" não pode ter menos do que 5 caracteres")
}}
</script>
</head>
<body>
<form>
<h2> Textando alterações em um campo com onChange</h2>
<br> Código: <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> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="0">
<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">
</form>
</body>
</html>

8 - Evento onFocus

Este evento ocorre quando um campo recebe o foco de entrada ou digitação 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 código do próximo exemplo, que solicita a digitação de cinco campos. Os três primeiros são os que deveráo receber um número. O campo 4 é um campo que recebe automaticamente a somatória dos campos anteriores, mas que permite a digitação de outro valor. A somatória dos campos é feita pela função precessa1(), que é automaticamente executada quando o campo recebe o foco de digitação. Nõs também 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 comentário, mostra uma caixa de alerta assim que recebe o foco, avisando que seu preenchimento é obrigatório.

<html>
<head>
<title>onFocus</title>
<script language="javascript">
function processa1() {
d = eval(document.calculo.campo1.value)+
eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</script>
</head>
<body>
<form name="calculo">
<h2> Usando onFocus para executar cálculos e mensagens </h2>
Campo 1: <input type="text" name="campo1" value="" size="10" maxlength="10" onBlur='if(this.value=="") {this.value=0}'> <br>
Campo 2: <input type="text" name="campo2" value="" size="10" maxlength="10" onBlur='if(this.value=="") {this.value=0}'> <br>
Campo 3: <input type="text" name="campo3" 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>
Comentário: <input type="text" name="campo5" value="" size="30" onFocus="alert('Este campo de comentário deve ser preenchido')">
</form>
</body>
</html>

9 - Evento onSelect

O evento onSelect ocorre quando um texto de um campo do tipo text ou textarea é selecionado. O gerenciador onSelect é responsável por este evento.

Veja como um comando usa on Select:

O exemplo a seguir exibe a ativação de caixa de alerta quando um texto do segundo campo é selecionado.

<html>
<head>
<title> onSelect </title>
</head>
<body>
<form>
<h2> Testando alterações em um campo com onSelect</h2>
<br> código: <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')">
<br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="20">
</form>
</body>
</html>

Usando um menu para acessar outra página:

Para personalizar a rotina, basta substituir os nomes dos sites na matriz itens e os endereços correspondentes na matriz URL.

<html>
<head>
<title>Menu Select: Acessando outras páginas </title>
<script language="javascript">
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:",
"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>
<script language="javascript">
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 seleção para acessar outras páginas é muito útil, principalmente se a página tiver pouco espaço disponível. além disso, é uma forma elegante para mudar de página.
</body>
</html>

Propriedades do formulário

Propriedades são atributos de um objeto que definem sua aparência e comportamento, tais como sua posição, cor, forma e nome.

Prefixos

Para identificar os elementos do formulário, as três primeirasl letras do nome do formulário - frm - form colocadas propositadamente como um prefixo para indicar que o objeto nomeado é um formulário. Esta não é uma regra obrigatória, mas irá facilitar a compreenção do código de programação. Pesteriormente você irá utilizar outros tipos de objetos que também serão identificados com nomes iniciados por prefixos, por exemplo, uma caixa de texto que terá seu nome iniciado por "txt".

padronizar os programas facilita a compreensão de seus códigos.

Tipo de Objeto	Prefixo	Definição
Form	frm	Formulário
Button	btn	Botão de Comando
Text	txt	Caixa de texto
Label	lbl	Rótulo
Textarea	txa	Área de texto
Radio	rad	Botão de opção
Checkbox	chk	Caixa de seleção
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 botão

Propriedades
name	Nome do elemento
value	Valor contido no elemento

Exemplo:

b) Elemento submit

Propriedades
name	Nome do elemento
value	valor contido no elemento

c) Elemento reset

Propriedades
name	Nome do elemento
value	Valor contido no elemento

d) Elemento text

<input type="text" name="nome do texto" value="valor do texto" size=inteiro

[onBlur="código Javascript"] [onChange="código Javascript"]

[onFocus=="código Javascript"] [onSelect="código 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	Valor contido no elemento

Exemplo 1:

<form name="frm_teste">
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:

e) Elemento textarea

<textarea name="nome da área de texto"

rows=inteiro cols=inteiro

[onBlur="código Javascript"] [onChange="código Javascript"]

[onFocus="código Javascript"] [onSelect="código Javascript"]

Propriedades
defaultValue	Indica o valor inicial que vai aparecer na zona de texto (especificado como parâmetro da marca Html <input ...>)
name	Nome do elemento
value	Valor contido no elemento

Exemplo:

f) Elemento password

Propriedades
defaultValue	Formece uma cadeia padrão se nenhuma outra for fornecida
name	Nome do elemento
value	valor contido no elemento
Eventos
onFocus onBlur onSelect

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

Propriedades
defaultValue	Esta propriedade armazena o valor padrão que o elemento oculto armazena se nenhuma outra informação for fornecida
name	Nome do elemento
value	Valor do elemento
Obs: esta propriedade não usa nenhum evento.

Exemplo:

h) Elemento caixa de seleção

<input type="checkbox" name="nome da caixa de seleção" value="valor da caixa de seleção" [checked]

[onClick="código Javascript"] > Texto da caixa de seleção

Propriedades
checked	Esta propriedade reflete o estado da caixa, se está selecionada (verdadeiro) ou não (falso)
defaultChecked	Esta propriedade determina qual o estado padrão da caixa. true para selecionado e false para deselecionado
name	Nome do elemento
value	Valor contido no elemento

Exemplo:

<form name="frm_teste">
<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 {
document.frm_teste.chk_opcao.checked=true
}"
>
</form>

i) Elemento radio

<input type="radio" name="nome do grupo" value="valor do botão" [checked]

[onClick="código Javascript"] > Texto do botão radio

Propriedades
checked	Esta propriedade contém o valor booleano do estado do botão de rádio; verdadeiro para selecionado, falso para deselecionado.
defaultChecked	Esta propriedade indica se este é o botão padrão que deve ser selecionado entre os botões de rádio do grupo.
index	Esta propriedade indica qual o elemento é este botão de rádio no grupo corrente substitui por está selecionado.
length	Esta propriedade indica o número de botões de rádio no grupo
name	Nome do elemento
value	Valor contido no elemento

Exemplo:

<form name="frm_teste">
<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>
<script language="javascript">

var y=document.frm_teste.rdo_valor[0].value
document.frm_teste.txt_texto.value=y

document.write("Quantidade de ítens do botão de rádio: "+document.frm_teste.rdo_valor.length)

</script>

j) Elemento select

<select name="nome do seletor" [size=inteiro] [multiple]

[onBlur="Código Javascript"] [onChange="Código Javascript"] [onFocus="Código Javascript"]>

<option [selected]> Opção da seleção

<option> Seleções adicionais

</select>

Propriedades
length	Número de elementos da lista de seleção
name	nome do elemento
option	Esta é uma matriz de diferentes opções disponíveis 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, então alterar o valor de selectedIndex limpa todas as demais alternativas já que o índice se refere à única opção

É claro, a matriz de opções é também na verdade uma matriz de objetos, que possuem suas próprias propriedades. Cada opção individual em um elemento select possui as seguintes propriedades:

Propriedades do option
defaultSelected	Este é um valor booleano indicando se a opção está selecionada automaticamente ou deselecionada quando aparecer.
index	Indica onde na lista de opções a alternativa corrente está localizada
selected	Indica se a opção está corretamente selecionada
text	Contém o texto apresentado para cada opção
value	esta propriedade contém os dados enviados ao servidor a partir da lista de seleção quando o botão submeter for precionado.

Para acessar os elementos individuais das opções em um elemento select, podemos usar o nome do objeto select:

selectName.option[índice].propriedade

Adicionando, removendo e renomeando select:
Obs: este código 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)
{
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">Maça</option>
<option value="1">Melão</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 funções

O Javascript possui um conjunto bastante vasto de funções com aplicação específica.

As funções são muito vantajosas para o usuário, pois permitem diminuir o tempo gasto na elaboração de formulários, assim como eventuais erros na sua concepção.

As funções do Javascript agrupam-se em:

Funções matemáticas;
Funções tipo string;
Funções tipo data;
Funções tipo hora;
Funções do sistema operacional;
Banco de dados;
Outras funções.

As funções do Javascript tem a seguinte sintaxe:

= nomedafunção(argumentos)

Os tipos de argumentos variam de função para função e em relação às necessidades de cálculo do usuário.

Os tipos de argumentos mais utilizados são: variáveis numéricas, variáveis strings, variáveis booleanas, arrays e propriedades.

Exemplos (teóricos) de funções:

Inicio

escreva( Potencia(2, 6) )

escreva( Soma(12, 36) )

escreva( Media(8, 3) )

Fim

Funções Matemáticas

Para auxiliar os cálculos matemáticos, além dos operadores matemáticos de adição, subtração, multiplicação e divisão existem outras funçoes matemáticas.

Algumas funções são comuns, tais como: raiz quadrada, potênciação, módulo, etc. Outras exigem conhecimento a nível de 2º grau tais como: trigonometria e logarítmos.

Vejamos

Covertendo string para numérica

eval

Calcula o conteúdo da string

Exemplo:

resultado=eval("(10*20)+2-8")
document.write(resultado)

Resultado: 194

parseInt

Transforma string em inteiro

Exemplo:
valor=parseInt("79.65732")
document.write(valor)

Resultado: 79

parseFloat

Transforma string em número real

Exemplo:
valor=parseFloat("79.65732")
document.write(valor)

Resultado: 79.65732

Arredondando valores

Math.floor(número) - Devolve o inteiro anterior menor que "número" 32.5 torna-se 32 e -24.8 torna-se -24.
Math.ceil(número) - Devolve o inteiro maior que o "número" 32.5 torna-se 33 e -24.8 torna-se -25.
Math.round(número) - Arredonda "número" para o inteiro mais próximo. Se a porção decimal do número for 0.5, o número arredonda para cima.

Funções matemáticas comuns

Math.random() - Devolve um número aleatório entre 0 e 1.
Math.abs(número) - Valor absoluto do "número", ou seja, sempre o valor idependente do sinal (positivo ou negativo) -4 fica igual a 4.
Math.max(num1, num2) - Devolve o número maior dos números "num1" e "num2".
Math.min(num1, num2) - Devolve o número menor dos números "num1" e "num2".
Math.pow(num, expoente) - Devolve "num" elevado a "expoente".
Math.sqrt(número) - Raiz quadrada de "número".
Math.SQRT1_2 - Raiz quadrada de 1/2 (aproximadamente 0.7071067811865476).
Math.SQRT2 - Raiz quadrada de 2 (aproximadamente 1.4142135623730951).

Funções trigonométricas

Math.PI - Retorma o valor de PI (aproximadamente 3.141592653589793).

Math.sin(número) - Retorna o seno de um número (em radianos).
Math.cos(número) - Retorna o cosseno de um número (em radianos).
Math.tan(número) - Retorna a tangente de um número (em radianos).

Math.asin(número) - Retorna o arco seno de um número (em radianos).
Math.acos(número) - Retorna o arco cosseno de um número (em radianos).
Math.atan(número) - Retorna o arco tangente de um número (em radianos).

Trigonometria no triângulo retângulo

Considere um triângulo ABC, retângulo em Â (Â=90º), onde á é a medida da hipotenusa, b e c são as medidas dos catetos e α, β são ângulos agudos.

Pelo teorema de Pitágoras, temos que "o quadrado da hipotenusa é igual a soma dos quadrados dos catetos", ou seja, pela figura, a²=b²+c²

Observamos ainda que os ângulos agudos do triângolo retângulo são complementares na figura α + β = 90º

Exercícios:

1) Usando o teorema de Pitágoras, calcule o valor de x:

2) Determine o valor de α ou β nas figuras seguintes:

Razões trigonométricas

α = â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:

Observação:

O seno de um ângulo é igual ao cosseno do seu complemento;
O cosseno de um ângulo é igual ao seno do seu complemento.

Exercícios

1) Em cada caso, determinar o sen α, cos α e tg α:

a)	b)	c)
d)	e)

Tabela dos ângulos mais usados do triângulo retângulo

Grau	sen	cos	tg	em radianos
30º
45º			1
60º

Exercícios:

1) Encontre x:

2) Encontre y:

3) Encontre x e y:

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 grau	em radianos
	360º
	180º
	90º
	60º
	45º
	30º

A unidade de medida usada pelos brasileiros é o grau, porém a unidade de medida usada pela maioria das linguagens de programação é o radiano, então 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 função radianos() para convertê-lo em radianos.

Exemplo:

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 número. O arco seno é o ângulo cujo seno é núm. 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 função graus().

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

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>

Logarítmos

Math.log(número) - Retorna op logarítmo de um número

Math.E - Retorna a base dos logarítmos naturais (aproximadamente 2.718281828459045)
Math.LN2 - Retorna o valor do logarítmo de 2 (aproximadamente 0.6931471805599453)
Math.LOG2E - Retorna a base do logaritmo de 2 (aproximadamente 1.4426950408889634)
Math.LN10 - Retorna o valor do logarítimo de 10 (aproximadamente 2.302585092994046)
Math.LOG10E - Retorna a base do logarítmo de 10 (aproximadamente0.4342944819032518)

Definição

Sendo a e b números reais e positivos com a≠1, chama-se logaritmo de b na base a o expoente x ao qual se deve elevar a base a de modo que a potência a^x seja igual a b.

log_ab=x <=> a^x=b

Na expressão log_ab=x, temos:

a é a base do logarítmo;
b é o logaritmando;
x é o logaritmo.

Vejamos alguns exemplos de logarítmos:

log₂4=2, pois 2²=4

log₃81=4, pois 3⁴=81

log₇7=1, pois 7¹=7

log₅1=0, pois 5⁰=1

Logaritmo decimal

No âmbito do Ensino Médio, usa-se bastante a base 10, uma vez que neste ambiente a base decimal recebe as preferências para o trabalho com o nosso sistema de numeração, mas devemos observar que em contextos mais avançados, 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 características interessantes com os logaritmos das potências de 10

Log(1)=0
Log(0) não tem sentido
Log(10)=Log(10¹)=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(10ⁿ)=n
Log(10^-n)=-n

A partir da propriedade

Log 10ⁿ=n

temos que o Logaritmo de 10ⁿ na base 10 é o expoente n, o que nos faz pensar que para todo x real positivo vale a relação:

Log(10^x) = x

Mudança de base

Apesar de existirem identidades muito úteis, a mais importante para o uso na calculadora é a que permite encontrar logaritmos com bases que não as que foram programadas na calculadora (normalmente log_e e log₁₀). Para encontrar um logaritmo com uma base b usando qualquer outra base a:

Prova da fórmula de mudança de base
	por definição
	aplica-se em ambos os lados
	simplifica-se o lado esquerdo da igualdade
	divide-se por $log k$ $(b)$

Cálculos mais fáceis

Logaritmos trocam números por expoentes. Mantendo-se a mesma base, é possível tornar algumas poucas operações mais fáceis:

Operação com números	Operação com expoentes	Identidade logarítmica

Demonstração da identidade $log(a) + log(b) = log(ab)$

Por definição, se: $log(a) = x$ então $a = 10 x$ . Logo, considerando-se $b = 10 y$ , tem-se:

Observa-se em ambos os lados da expressão acima que $x + y = x + y$ , o que comprova a identidade.

Funções de Tratamento de Arrays

Funções 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 métodos disponíveis para manuseio de strings.

length	Retorna o comprimento de uma String. Exemplo: var s="Esta e uma string de texto"; document.write("Tamanho da String = "+s.length+" caracteres"); Resultado: Tamanho da String = 26 caracteres
substring(indiceInicial, indiceFinal)	O método 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 método funciona como se ambos estivessem com as posições trocadas. Se os dois índices forem iguais, retorna uma cadeia vasia. Exemplo: var s="Esta e uma string de texto"; var s1=s.substring(4, 10); document.write(s1); Resultado: "e uma"
charAt(posição)	Funciona da mesma forma que o substring, só que, retorna o caractere simples em uma posição específica na String. Exemplo: var s="Esta e uma string de texto"; var s1=s.charAt(5); document.write(s1); Resultado: "e"
indexOf(caractere, [inicIndex])	O método indexOf faz a busca no objeto string pela primeira ocorrência 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 após o índice anterior. 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>") Resultado:" 2 3 10"
lastIndexOf(caractere, [inicIndex])	O método lasIndexOf é idêntico ao método index of exceto que faz a busca do caractere na cadeia do fim para o começo iniciando em inicIndex. Veja o exemplo anterior
replace(palavra, substituto)	O método replace você insere uma palavra ou uma letra em que você deseja substituir por outra. Exemplo: s="Este automovel é caro" document.write(s.replace("automovel", "carro")) Resultado: Este carro é caro
search(palavra)	O método search localiza a palavra dentro de uma string. Exemplo: s="Este automovel é caro" document.write(s.search("automovel")) Resultado: "5"
toLowerCase()	O método toLowerCase (para minúsculo) retorna a cadeia com todos os caracteres alterados para minúsculo. Exemplo: s="ISTO É UM EXEMPLO" document.write(s.toLowerCase()) Resultado: isto é um exemplo
toUpperCase()	O método toUpperCase (para maiúsculo) retorna a cadeia com todos os caracteres alterados para maiúsculo. Exemplo: s="isto é um exemplo" document.write(s.toUpperCase()) Resultado: ISTO É UM EXEMPLO

Veja um exemplo de código que inverte o texto ao contrário:

<head>
<title>Se não entendeu, use este código HTML</title>
</head>
<script language="javascript">
<!--
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 função para que se possa obter a data e a hora. É a função Date(). Esta funão devolve data e hora no formanto: Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano

Ex:

Fri May 24 16:58:02 1996

Para se obter os dados separadamente, existem os seguintes métodos:

getDate() - Retorna o dia do mês (inteiro entre 1 e 31)
getDay() - Retorna o dia da semana (0=Domingo, 1=Segunda-feira,... , 6=Sábado)
getMonth() - Retorna o mês (entre 0=Janeiro e 11=Dezembro)
getFullYear() - Retorna o ano com quatro dígitos (o mais usado)
getYear() - Retorna o ano com 2 dígitos.

getHours() - Retorna a hora do dia (entre 0 e 23)
getMinutes() - Retorna os minutos dentro da hora (entre 0 e 59)
getSeconds() - Retorna os segundos (entre 0 e 59)

No exemplo 1 abaixo obteremos o dia da semana e as horas. Para tal, utilizaremos a variável DataToda para armazenar data e hora.

exemplo 4: alterando a data

Para criar uma variável tipo Date com o conteúdo informado pela aplicação, existe o métido set. Assim temos os seguintes métodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds. Os mas importantes são:

setDate(valor) - Coloca o dia do mês (valor entre 1 e 31)
setMonth(valor) - coloca o mês (valor entre 0 e 11)
setYear(valor) - coloca os anos (valor acima de 1970)

exmeplo 3: vendo as horas

Exemplo 4: relógio

<HTML>
<HEAD>
<TITLE> Exemplo </TITLE>
<SCRIPT language="javascript">
function relogio() {
rel = new Date()
hora = rel.getHours()
minuto = rel.getMinutes()
segundo = rel.getSeconds()
temp = "" + hora
temp += ((minuto < 10) ? ":0" : ":") + minuto
temp += ((segundo < 10) ? ":0" : ":") + segundo
document.form1.text1.value = temp
setTimeout("relogio()", 1000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="relogio()">
<FORM NAME="form1">
São exatamente:
<INPUT TYPE="text" NAME="text1" SIZE="8" VALUE="">
</FORM>
</BODY>
</HTML>

Usando o Timer

É um método que permite a programação para que uma determinada ação só ocorra após o transcusro de um determinado tempo.

Variável = setTimeout("ação",tempo)

Variável é uma variável apenas para controle do timer

ação é a ação que se quer realizar

tempo é o tempo de espera para que a ação ocorra em milisegundos.

Obs:

É importante observar que a ação só ocorrerá uma vez. para que a ação volte a ocorrer, será necessãrio repetir o comando dentro da ação, optendo-se, assim um LOOP.

Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte método:

clearTimeout(Variável)

Onde:

Variável é o nome da variável de controle do timer.

<HTML>
<HEAD>
<TITLE> Exemplo </TITLE>
<SCRIPT language="javascript">
function relogio() {
rel = new Date()
hora = rel.getHours()
minuto = rel.getMinutes()
segundo = rel.getSeconds()
temp = "" + hora
temp += ((minuto < 10) ? ":0" : ":") + minuto
temp += ((segundo < 10) ? ":0" : ":") + segundo
document.form1.text1.value = temp
controleRelogio=setTimeout("relogio()", 1000)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
São exatamente:
<INPUT TYPE="text" NAME="text1" SIZE="8" VALUE=""><br>
<INPUT TYPE="button" VALUE="Ativar Relógio" onClick="relogio()">
<INPUT TYPE="button" VALUE="Parar Relógio" onClick="clearTimeout(controleRelogio)">
</FORM>
</BODY>
</HTML>

Funções de conversão de data e hora

Clique aqui!

Funções arrays

Pode ser definido como um conjunto ordenado de valores, numéricos ou não, que são referenciados por um mesmo nome.
Em geral, criado por uma das formas:

new Array(tamanho)
// ou
new Array(valor0, valor1, valor2, ...)
// 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 numéricos:
nivel = new Array(10, 20, 30);
// Também pode ser criado a partir da forma literal:
nivel = ["baixo", "médio", "alto"];

join(sep): Junta seqüencialmente os elementos de uma array usando o caractere (ou caracteres) dados por sep. Se ele não é indicado, usa a vírgula como default.

Exemplos:

nivel = new Array("baixo","medio","alto");
str_1 = nivel.join(); //resulta "baixo,médio,alto" em str_1
str_2 = nivel.join(", "); //resulta "baixo, médio, alto" em str_2
str_3 = nivel.join("/"); //resulta "baixo/médio/alto" em str_3

length: Indica o número de elementos em uma array. Pode ser usado para diminuir o comprimento de um objeto já definido. Não 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:

nivel = new Array("baixo","medio","alto","muito alto");
eliminado = nivel.pop; //a variável eliminado contém "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 variável novo será 4 e os dois elementos serão 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] serão respectivamente "alto", "médio" e "baixo"):

nivel = new Array("baixo","medio","alto");
nivel.reverse();

shift(): Remove o primeiro elemento e retorna esse elemento, reduzindo o tamanho da array.

Exemplo (a variável removido terá "muito baixo" e a nivel não 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 parâmetro ini é o índice base zero a partir do qual começa a extração. Os elementos são extraídos até, mas não incluindo, o índice base zero dado por fim. Se este não é indicado, a operação se dá até o final da seqüência.

A função não altera o objeto original. Os valores são copiados para a nova array.

Exemplo (escreve: "baixo,médio,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 critério da função de comparação func_comp. Se esta não é dada, a ordenação se dá como se fosse um dicionário. No caso de strings de texto, em geral essa operação é desejada. No caso de números, pode não ser, uma vez que, por exemplo, 12 fica antes de 4.

A função de comparação 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 não mudam de índice;
. Se retornar valor > 0, b fica em índice maior que a.

Para comparar números, a função 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>"); //avança uma linha
document.write(num.sort(comparar)); //escreve 7,8,9,10,11

splice(iniNdx, quant, [elm1][, ..., elmN]): Muda o conteúdo de uma array, adicionando novos elementos e removendo outros.

iniNdx é o índice base zero a partir do qual a operação começa.

quant é um inteiro indicando o número de elementos a remover. Se é zero, nenhum elemento é removido, mas deve ser indicado pelo menos um novo elemento.

elm1 ... elemN são os novos elementos a adicionar. Se não indicados, a função apenas remove elementos.

Se o número de elementos a adicionar é diferente do número de elementos a remover, o tamanho da arrray é alterado. A função retorna uma array com os elementos removidos.

Exemplos:

num = new Array("10", "20", "30", "40");
document.write(num); //escreve 10,20,30,40
document.write("<br>"); //avança uma linha
de_fora = num.splice(2,0,"25");
document.write(num); //escreve 10,20,25,30,40
document.write("<br>"); //avança uma linha
de_fora = num.splice(2,1,"28");
document.write(num); //escreve 10,20,28,30,40
document.write("<br>"); //avança uma linha
document.write(de_fora); //escreve 25

toString(): Retorna uma string com os elementos dispostos seqüencialmente e separados por vírgula.

Exemplo:

num = new Array("10", "20", "30", "40");
str = num.toString(); //str contém "10,20,30,40"

unshift(elm1,..., elmN): Adiciona um ou mais elementos no início da array e retorna seu novo tamanho. Os parâmetros (elm1, ..., elmN) são os novos elementos.

Exemplo (escreve: "baixo,médio,alto"):

nivel = new Array("baixo","medio","alto","muito alto");
nivel.unshift("muito baixo");
document.write(nivel); //escreve "muito baixo,baixo,medio,alto,muito alto"

Impressora

Para imprimir um arquivo use este código:

Fechando um programa

Para interromper a execução do programa que está sendo executado use o comando window.close(), exemplo:

(...)
<a href="javascript:window.close()">Fechar</a>
(....)

Indo para um endereço 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 endereço foi informado, ação cancelada !!!
</BODY></HTML>

Descobrindo a largura e a altura de seu monitor

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 disponível no monitor.
//screen.availHeight - Usa a ALTURA disponível 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

Inativar botão direito do Mouse

<html>
<title>Inativar Botão Direito Também No FireFox</title>
<head>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
</head>

</html>

Inserindo um alerta com o botão direito do mouse

<html>
<title>Inativar Botão Direito Também No FireFox</title>
<head>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
function alerta() {
alert('Botão direito do mouse')
}
document.onmousedown=click
document.oncontextmenu = new Function("alerta();return false;")
</script>
</head>

</html>

Posição do Mouse

(Só funciona no Internet Explorer)

<html>

<head>
<title>Nova pagina 1</title>
<script type="text/javascript">
function teste() {
document.mouse.x.value = event.offsetX
document.mouse.y.value = event.offsetY
}
</script>
</head>

</html>

Teclado

(Só funciona no Internet Explorer)

<html>
<head>
<script language="javascript">
<!--

function exemplo()
{
var tecla = window.event.keyCode;
window.status = "Você pressionou a tecla: " + String.fromCharCode(tecla);
alert("O Código da tecla pressionada é: " + tecla);

}

document.onkeypress = exemplo;
//-->
</script>
</head>
<body>
<p align="center">Obtendo o Código da tecla pressionada::.</p>
</body>
</html>

Endereço de IP

//host - Armazena uma string com o formato "hostname:port" da página HTML atual.
document.write('<p>Demostração da propriedade host: '+location.host)

//hostname - Armazena uma string, com o IP da página HTML atual.
document.write('<p>Demostração da propriedade hostname: '+location.hostname)

//href - String identica a mostrada na barra "location" do browser.
document.write('<p>A URL desta página é: '+ location.href)

//pathname - Contém uma string com o path da página HTML atual.
document.write('<p>O path da URL desta página é: '+ location.pathname)

//port - Armazena a porta por onde está sendo feita a conexão com o servidor.
document.write('<p>A porta usada para conexão com o servidor é: '+ location.port)

//protocol - String que armazena o protocolo de acesso a um determinado endereço. ("http:","ftp:","file:").
document.write('<p>O protocolo de acesso para esta página é: '+ location.protocol)
</script>

Informações de seu navegador

<HTML> <HEAD> <TITLE> Exemplo </TITLE> </HEAD> <BODY> <SCRIPT>
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 código é " + browserCod)
document.write (", na versão <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> </HTML>

Criando objetos

<html><head><title> Cria Objeto </title>
<script>
function NovaFunc(nome,tel,UF){
this.nome=nome
this.tel=tel
this.UF=UF
}
</script>
</head><body>

document.write(fulano[1] + "<br>")
document.write(fulano[2] + "<br>")
document.write(fulano[0])
</script>

</body></html>

Outro exemplo

//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 matrícula = "+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()
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 matrícula = "+carro3.ano_matricula)
document.write("<br>Cilindrada = "+carro3.cilindrada)

</script>

Inserindo um texto na barra de título e na barra de status

Barra de Status no FIREFOX (window.status)

Pra muita gente que não sabe, aqui vai uma dica fundamental, pra quem quer que a mensagem sai na barra de ferramentas do FIREFOX, quando utilizamos a função:

windows.status("Mais por muito menos");

Pesquisando sobre o assunto, depois de muito tempo acabei achando a solução, simples e direta, Entre no FIREFOX vá em:

FERRAMENTAS
OPÇÕES
CONTEUDO
CLIQUE NO BOTÃO AVANÇADO 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>
<script language="javascript">
function Status() {
// Barra de status:
window.status = "Testando a barra de status";
// Barra de título:
document.title = "Testando a barra de título";
}
</script>
<body>
<p>
<input type="button" value="Teste" onclick="Status()" /></p>
</body>
</html>