apostila javascript

20/04/13 Apostila Javascript

www.webteste123.com/estudo/cursos/web2.0/apostilas/javascript.html 1/134

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óriae 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 eminú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 deuma 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 dassuas 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 otamanho do arquivo. como os comperssores distribuem os códigos em uma única linha, sem eles será impossíveldeterminar 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 ouadicionar 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 umprogramador.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 PRIMEIROPROGRAMA

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

<html><head>

<title>Meu primeiro programa </title></head><body><script language="javascript">docoment.write("Esta é minha primeira página")</script></body></html>Salve este documento com o nome página01.htmlAssim 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ídapadrã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á-locom a extensão .html ou .htm, exemplo:programa.htmltexto.htmlarquivo01.html

Corpo do programa

Basicamente, a sintaxe do corpo do programa consiste em:

<script>

// Conteúdo

</script>

OU:

<script language="javascript">

// 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 trabalharmoscom o Javascript internamente, podemos trabalhá-lo externamente. Em vez de trabalharmos com um arquivo,podemos trabalhar com mais de um arquivo.Isto pode facilitar e muito a vida do programador.Abra um editor de texto e copie o arquivo abaixo: <html><head><title>Arquivo externo</title></head><body><script language="javascript" src="teste.js"></script></body></html> Salve este arquivo com arquivoesterno.html.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 domonitor: "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 decomentá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 deuma linha

* // *

Exemplo 1Exemplo 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 aspasduplas e simples. Isto é usado em Javascript e PHP, veja o exemplo em Javascript.

<script>

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

Outro exemplo:

<input Type="button" name="teste" value="Clique Aqui" onclick="alert('Exemplo de Aspas')">

Inserindo um texto

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




document.write("A raiz quadrada de 9 é 3<br>")document.write("A soma de 5 + 4 é igual a 9 <br>")

document.write("6 dividido por 3 é igual a 2 <br>")</script>

Editando um texto

Para editar um texto externamente basta usar o comando leia:

<html>

<head><title>Idade</title>

</head><body>

<form name="frm_teste">Digite seu nome:<input type="text" name="nome"><br>

Digite sua idade:<input type="text" name="idade"><br /><input type="button" value="Resultado" onClick="idadex()">

</form><script language="javascript">

function idadex() {var nome = document.frm_teste.nome.value

var idade = document.frm_teste.idade.valuealert("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:

<script language="javascript">document.write("<pre>")



document.write("\tO livro: \"Manual Prático do ")document.write("Programador\". \nEstá nas livrarias ")

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

document.write("</pre>")</script>

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 aprincí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_pagz01_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:-23980

1350



-257237-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.45346.98

-34.880.0-247.0Observaçã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 possuiapenas 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 daexpressão à sua direita para a variável do seu lado esquerdo.

x=30

y=10/2 + 6z=truea="texto"

Regras básicas



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

1. O primeiro caractere deve ser sempre uma letra ou um caractere sublinhado (_).2. Os caracteres que você pode utilizar na formação das variáveis são: os números, as letras maiúsculas, as

letras minúsculas e o caractere sublinhado (_).3. 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:

1. As variáveis podem ter qualquer tamanho. Entretanto, apenas os 63 primeiros caracteres são utilizadospelo compilador.

2. Dependendo da linguagem de programação, a variável pode ser sensível, ou não, a letras maiúsculas ouminúsculas, isto se chama "caso sensitivo".

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

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

3. 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: (vejaa tabela abaixo)

Exemplos de variáveis válidos:A

anotaNOTAx5

A32Nota_1MATRICULAnota_1

diaIDADE Exemplos de variáveis inválidos

5be 12x-y

prova 2nnota(2)caseSet

matrículaObs: 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;

(c) lógico;(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".

<script language="javascript">// Exemplo 1:Variavel="Texto1 " + "Texto2" + "<br>"document.write(Variavel)

// Exemplo 2:String1="Isto é "String2="um texto"

String3="<br>"String4=String1 + String2 + String3document.write(String4)

// Exemplo 3Nome="José "Sobrenome="Antônio"

document.write("Meu nome é: " + Nome + Sobrenome) </script>

Convertendo valores string para numérica

Quando usamos formulários para efetuar cálculos matemáticos precisamos converter os valores stringsdos 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=5document.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.valueArea= parseFloat(Altura) + parseFloat(Largura)/2alert(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 valornumérico.

Se efetuarmos os cálculos Area = Altura * Largura/2 sem converter string em numérica geraríamoserros 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=40X=20/10 + 5X=Y

Operadores Aritméticos

Operadores aritméticos são símbolos usados pelo computador + , -, * , /, para efetuar cálculosmatemá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


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 dessesnú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.valuen2=document.frm_teste.n2.valuen3=document.frm_teste.n3.valuen4=document.frm_teste.n4.valuesoma=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/100novosal=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()">




function Quadradox() {n=parseFloat(document.frm_teste.n.value)Quadrado=n*nalert("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


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:


a>b false (falso)

b>a true (verdadeiro)

a != b true (verdadeiro)

Exemplo 3. Resolva a seguinte operação:


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:


"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 operadoresbooleanos 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 8if((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)e(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 || falsefalse

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)/2Em 3º lugar estão os parênteses. Exemplo: 3 * (4 + 1) * 2Em 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 + 2Em 6º lugar estão multiplicação ( * ), divisão (/), e módulo (%), na ordem em que aparecerem daesquerda 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 + 9Em 8º lugar estão os operadores relacionais, maior que (>), menor que (<), maior ou igual ( >= ), menorou 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ãoexecutados; se não, as instruções que seguirem o comando Else serão executados. Veja o exemplo abaixo:

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

Vejamos:


A=trueif (A==true) {document.write("Execute B")} else {document.write("Execute C")}



</script>

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

<script language="javascript">teste=trueif (teste) {document.write("Esta linha será impressa")} else {document.write("Esta linha não será impressa")}

</script>

Usando a cláusula If

Vamos ver um exemplo:

<script language="javascript">Descontos=315

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 anecessidade 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 blocoantes ou depois desta cláusula. No exemplo anterior, podemos incrementar o código com mais uma situação.

<script language="javascript">Descontos=315

if(Descontos != 0){document.write("Descontos deste mês: " + Descontos)} else {document.write("Não há descontos este mês.")}</script>



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 escolherentre várias situações e, caso nenhuma retorne verdadeiro, o fluxo irá para a cláusula else, se esta for utilizada.Veja

<script language="javascript">Salario=1550

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 dadosque 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 elaestiver 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=37if(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.valueif(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íciosExercí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)


Exercício 1. Faça um programa que receba três notas de um aluno, calcule e mostre a média aritméticae 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)/3alert("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)/3alert("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 aprovadosou 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:

<script language="javascript">if (mes==1) {document.write("Jan")}else if (mes==2) {document.write("Fev")}else if (mes==3) {document.write("Mar")}else if (mes==4) {document.write("Abr")}else if (mes==5) {document.write("Mai")}else if (mes==6) {document.write("Jun")}else if (mes==7) {document.write("Jul")}else if (mes==8) {document.write("Ago")}else if (mes==9) {document.write("Set")}else if (mes==10) {document.write("Out")}else if (mes==11) {document.write("Nov")}else if (mes==12) {document.write("Dez")}else {document.write("Mês inválido")}</script>

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:



}alert("O mes "+ Mes + " tem " + NumDias + " dias.")}</script>

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

<script language="javascript">// Nome do arquivo: semana.txtDataToda=new Date()DiaDaSemana=DataToda.getDay()

switch(DiaDaSemana) {

case 0: document.write("Domingo"); break;case 1: document.write("Segunda"); break; case 2: document.write("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:

<script language="javascript">// Nome do arquivo: bomdia.txtDataToda=new Date()HoraAtual=DataToda.getHours()

switch(HoraAtual){case 6:case 7:case 8:case 9:case 10:case 11:document.write("Bom dia!");break;case 12:case 13:case 14:case 15:case 16:case 17:document.write("Boa tarde!");

break;default:document.write("Boa noite!")break;}</script>



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

// Nome do arquivo: caixa.txt

<pre>Menu Principal---------------1 - Inclusão2- Alteração3 - Exclusão4 - Relatório5 - 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 emultiplicaçã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.valueswitch(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.valueswitch(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 parase avaliado. Ooperador ternário tem a seguinte forma:

condição1 ? expressão_verdadeira : espressão_falsaPara 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árioexpressão_falsa é avaliada e se torna o resultado.

Exemplo 1:

<script language="javascript">variavel=50resultado=(variavel >= 0)&&(variavel <= 100) ? "VERDADEIRO" : "FALSO"document.write(resultado)</script>

Exemplo 2:

<script language="javascript">horas=30minutos=45segundos=30horas=(horas >= 0)&&(horas <= 24) ? horas : 0minutos=(minutos >= 0)&&(minutos <= 60) ? minutos : 0segundos=(segundos >= 0)&&(segundos <= 60) ? segundos : 0document.write("São " + horas + ":" + minutos + ":" + segundos)</script>

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)/3alert("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:


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

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

Bart SimpsonBart SimpsonBart SimpsonBart SimpsonTer 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 seusamigos programadores riam de você pelas costas, aprenda a substituir códigos de programa redundante porloops de programa.

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

<script language="javascript">nome=prompt("Digite um nome:","")

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.

<script language="javascript">// Nome do arquivo: de1a10.txtfor(var x=1; x<=10; x++){document.write(x+", ")



}</script>

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.

<script language="javascript">// Nome do programa: mult2.txtfor(var x=0; x<=20; x=x+2){document.write(x+", ")}</script>

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.

<script language="javascript">// Nome do programa: impares.txt

for(var x=1; x<=21; x=x+2){document.write(x+", ")}</script>

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.

<script language="javascript">// Nome do programa: mult5.txtfor(var x=0; x<=50; x=x+5){document.write(x+", ")}</script>

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.

<script language="javascript">// Nome do arquivo: de110a120.txtfor(var x=110; x<=120; x++){document.write(x+", ")}</script>

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


// Nome do programa: Quadrado.txtfor (var N=1; N<=10; N++){Quadrado=N * Ndocument.write("O quadrado de " + N + " é " + Quadrado+"<br>")}</script>

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

<script language="javascript">// Nome do programa: ola10.txtfor(var x=1; x<=10; x++){document.write("Olá<br>")}</script>

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

<script language="javascript">i=1

while(i <= 10) {document.write(i+", ")i=i + 1}</script>

Segundo o programa acima podemos ver que o programa termina quando o teste i <= 10 der comoresultado false.

Para que isto ocorra, necessariamente devemos ter i>10. A cada passo o programa primeiro testa acondiçã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 programatermina.

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

<script language="javascript">x=1while(x <= 10) {document.write(x+", ")x=x + 1}



</script>

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

<script language="javascript">x=0while(x <= 20) {document.write(x+", ")x=x + 2}</script>

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.

<script language="javascript">x=1

while(x < 21) {document.write(x+", ")x=x + 2}</script>

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 imprimanú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.

<script language="javascript">x=20while(x >= 1) {document.write(x+", ")x=x - 1}</script>

Resultado: 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, Exercício 8. Crie uma estrutura de repetição que conte de -10 até + 10 (números negativos e números

positivos)


x=-10while(x <= 10) {document.write(x+", ")x=x + 1}</script>

Resultado: -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Exercício 9. Crie uma estrutura de repetição que conte de -25 até -15.

<script language="javascript">x=-25while(x <= -15) {document.write(x+", ")x=x + 1}</script>

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.



mes=parseFloat(mes)}</script>

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:

<script language="javascript">do {mes=prompt("Digite o mês:")mes=parseFloat(mes)if(mes<1 || mes>12){

document.write("<br>Digitação errada! Digite de novo")}} while (mes<1 || mes>12)</script>

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:

<script language="javascript">// ...do {/ * Seqüência de comandos do programa propriamente dito * /Resp=prompt("Deseja continuar (s/n)?","")

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

Vale lembrar que a função toUpperCase() retorna o argumento no formato maiúsculo.Observe mais um exemplo:

<script language="javascript">do {num=prompt("Digite um número:","")num=parseFloat(num)if (num<100) {document.write("<br>O número " + num + " é menor do que 100")}fim=prompt("Deseja testar outro [S/N] ?","")} while (fim.toUpperCase()!="N")</script>

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 nesseexemplo. Como pode ver a condição do loop while refere-se à variável contador, mas essa variável realmentenão se altera durante o loop. Isso crua um loop infinito. O loop continuará executando até que seja interrompidopelo usuário ou até gerar algum tipo de erro.

Os loops infinitos nem sempre podem ser interrompidos pelo usuário, exceto fechando onavegador, emalguns 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 quetem 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 onavegador para de responder ao usuário. Certifique-se de fornecer uma rota de escape de loops infinitos e salvarseu script até testá-lo, em qualquer eventualidade.

Ocasionalmente, você pode querer criar um loop infinito. Isso talvez inclua situações em que você querque seu programa execute até o usuário interrompê-lo ou em que fornece uma rota de escape com ainstruçã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 ainstruçãobreak

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

<script language="javascript">n=0total=0while(true){n=n + 1total=total + ndocument.write(total+", ")if(total >= 100){break}}</script>



Embora a instrução while esteja configurada como um loop infinito, a instrução if verifica o valorcorrespondente. 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 scriptcom a primeira instrução depois da chave de fechamento no final do loop. Você pode utiliza a instruçãobreakemqualquer 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 controledo programa para o comando seguinte aquele que encerra o loop.

<script language="Javascript">var i=0;while (i<20) {i=i+1if (i==10)break;document.write(i + ", ");}</script>

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 ifor 10, o laço se interrompe e o restante da matriz não será preenchido. Em lugar disto, podemosusarcontinueque não só salta o processo de atualização, mas salta além do calcula que iria provocar um erro. Oseguinte código permite que o laço continue, mas salta todos os números ímpares.

<script language="javascript">var k=0;while(k <= 20){k++ ;if((k%2)!=0)continue;document.write(k + ", ");}</script>

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

Operadores incrementais



Existem dois tipos de operadores incrementais o incremento (x++ ) e o decremento (x--)

O incremento (x++ ) aumenta o valor da variável em uma unidade, o decremento (x--) diminui ovalor da variável em uma unidade, ou seja:

x++ é idêntico a x=x + 1x-- é idêntico a x=x-1Os 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 ex-- é semelhante a --x.Conclui-se da seguinte forma:x++ ou ++x é idêntico a x=x + 1x-- ou --x é idêntico a x=x-1Veja o exemplo abaixo:

<script language="javascript">a=2document.write("Se a=2<br>")a++ document.write("O resultado de a++ é "+ a)a=2

document.write("<br>Se a=2<br>")++adocument.write("O resultado de ++a é "+ a)</script>

O resultado da execução deste pequeno script é o seguinte:Se a=2O resultado de a++ é 3Se a=2O resultado de ++a é 3Da 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:

<script language="javascript">x=1while(x<=10){document.write(x+", ")x++}</script>

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

Exemplo 2:

<script language="javascript">x=20while(x >= 1){



document.write(x+", ")--x}</script>

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 deA= ++xImagine que variável x seja igual a 5. Nos dois casos o resultado de A deveria ser 6 nas duas

operações.Se:

Se:A=5e:A=x++O resultado é:A=5e:x=6

SeA=5e:A=++xO resultado é:A=6e:x=6

Esta sutileza sintática pode gerar pequenos erros de programação.Da mesma forma é o operador decremental "--".

Se:A=5e:A=x--O resultado é:A=5e:x=4

SeA=5e:A=--xO resultado é:A=4e:x=4

Veja o exemplo na prática:

<script Language="Javascript">var a=2;document.write("Incrementos <br>")document.write("a=2 <br>")

document.write("a++="+ a++ + "<br>");a=2document.write("++a="+ ++a);</script>

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 pelocomputador + , -, * , /, 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:

<script language="javascript">// Exemplo 1: a=2b=3a+=b // Resultado a=5, idêntico a a=a + bdocument.write(a+"<br>")

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

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

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

// Exemplo 5:h=9i=2h%=i // Resultado h=1, idêntico a h=h%i// Observação: O operador Módulo retorna o resto da divisãodocument.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 omesmo 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 processamentomatemático; entretanto uma matriz pode ser apenas uma tabela de preços mantidas na memória para acessoinstantâ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


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

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

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

Frutas=Array("Banana", "Laranja", "Maçã", "Mamão")

Cursos=Array("Português", "Matemática", "Física", "Química", "Biologia", "Inglês", "Geografia", "História")

estadocivil=Array("solteiro", "casado", "divorciado", "viúvo")

</script>

2 - Na vertical

<script language="javascript">sexo=Array()sexo[0]="masculino"sexo[1]="feminino"



numero=Array()numero[0]=0numero[1]=1numero[2]=2numero[3]=3numero[4]=4numero[5]=5numero[6]=6numero[7]=7numero[8]=8numero[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.

<script language="Javascript">var lista= new Array();lista[0]="Segunda";lista[1]="Terça";



lista[2]="Quarta";lista[3]="Quinta";lista[4]="Sexta";lista[5]="Sábado";lista[6]="Domingo";

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.

<script language="Javascript">var mes=Array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro","Outubro", "Novembro", "Dezembro")

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

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

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:

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

Solução:



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.

<script language="javascript">mes=Array()dia=Array()signo=Array()mes[0]=1dia[0]=20signo[0]="Capricórnio"mes[1]=2dia[1]=19signo[1]="Aquário"mes[2]=3dia[2]=20

signo[2]="Peixes"mes[3]=4dia[3]=20signo[3]="Áries"mes[4]=5



dia[4]=20signo[4]="Touro"mes[5]=6dia[5]=20signo[5]="Gêmeos"mes[6]=7dia[6]=21signo[6]="Câncer"mes[7]=8dia[7]=22signo[7]="Leão"mes[8]=9dia[8]=22

signo[8]="Virgem"mes[9]=10dia[9]=22signo[9]="Libra"mes[10]=11dia[10]=21signo[10]="Escorpião"mes[11]=12dia[11]=21signo[11]="Sagitário"

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

<script language="javascript">planeta=Array()luas=Array()anos=Array()



distancia=Array()

planeta[0]="Mercúrio"luas[0]=0anos[0]=0.24distancia[0]=58 planeta[1]="Vênus"

luas[1]=0anos[1]=0.625distancia[1]=108 planeta[2]="Terra"luas[2]=1anos[2]=1distancia[2]=150 planeta[3]="Marte"luas[3]=2anos[3]=1.91distancia[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 partindodo 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:

<script language="javascript">Nota1=Array()Nota2=Array()Nota1[0]=7Nota2[0]=7.5Nota1[1]=6Nota2[1]=5.5Nota1[2]=7Nota2[2]=8Nota1[3]=3Nota2[3]=7.5Nota1[4]=4Nota2[4]=4.5

/* O exemplo acima não é uma matriz, mas sim, dois vetores vistos na lição anterior. Podemos substituir matrizespor 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.

<script language="javascript">Aluno01=0Aluno02=1Aluno03=2

Aluno04=3Aluno05=4Nota1=0Nota2=1

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



Classe[Nota1][Aluno01]=7Classe[Nota2][Aluno01]=7.5Classe[Nota1][Aluno02]=6Classe[Nota2][Aluno02]=5.5Classe[Nota1][Aluno03]=7Classe[Nota2][Aluno03]=8Classe[Nota1][Aluno04]=3Classe[Nota2][Aluno04]=7.5Classe[Nota1][Aluno05]=4Classe[Nota2][Aluno05]=4.5

// Para saber quanto o aluno 05 tirou na 1ª 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 03:O exemplo 3 não usa as variáveis Aluno01, Aluno02, Aluno03, Nota1, Nota2, em seu código:

<script language="javascript">// Para não dar erros eu criei 2 Arrays e não 4 Arrays diferentesClasse=Array(Array(),Array())Classe[0][0]=7Classe[1][0]=7.5Classe[0][1]=6Classe[1][1]=5.5Classe[0][2]=7Classe[1][2]=8Classe[0][3]=3Classe[1][3]=7.5Classe[0][4]=4Classe[1][4]=4.5

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

<script language="javascript">Classe= Array(



Array(7, 7.5),Array(6, 5.5),Array(7, 8),Array(3, 7.5),

Array(4, 4.5)) // Para saber quanto o aluno 03 tirou na 1ª prova é fácil:for(var y=0; y<=4; y++){for(var x=0; x<=1; x++){document.write(Classe[y][x]+"<br>")}}</script>

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:

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

Solução 1:

<script language="javascript">Nome=Array()idade=Array()

Nome[0]="Beatriz"idade[0]=19Nome[1]="Pedro"idade[1]=32

Nome[2]="Cláudio"idade[2]=23



Nome[3]="Susana"idade[3]=27Nome[4]="Marcos"idade[4]=16Nome[5]="Celina"idade[5]=35

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

Solução 2:

<script language="javascript">nome=0idade=1

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

Matriz[nome][0]="Beatriz"Matriz[idade][0]=19Matriz[nome][1]="Pedro"Matriz[idade][1]=32Matriz[nome][2]="Cláudio"Matriz[idade][2]=23Matriz[nome][3]="Susana"Matriz[idade][3]=27Matriz[nome][4]="Marcos"Matriz[idade][4]=16Matriz[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:

<script language="javascript">Matriz=Array(Array(), Array())Matriz[0][0]="Beatriz"Matriz[1][0]=19 Matriz[0][1]="Pedro"Matriz[1][1]=32 Matriz[0][2]="Cláudio"



Matriz[1][2]=23 Matriz[0][3]="Susana"Matriz[1][3]=27 Matriz[0][4]="Marcos"Matriz[1][4]=16 Matriz[0][5]="Celina"Matriz[1][5]=35

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

Solução 4:

<script language="javascript">Matriz=Array(Array("Beatriz", 19),Array("Pedro", 32),Array("Cláudio", 23),Array("Susana", 16),Array("Marcos", 16),Array("Celina", 35))for(var i=0;i<=5;i++){if(Matriz[i][1]<20){document.write(Matriz[i][0]+" ")}}</script>

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 umprograma de forma que ele imprima o nome das ruas do bairro de Botafogo.

Solução

<script language="javascript">Criamatriz=Array(Array(),Array())



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.




// {mes, dia, signo}SuperArray=Array(Array(1, 20, "Capricórnio"),Array(2, 19, "Aquário"),Array(3, 20, "Peixes"),Array(4, 20, "Áries"),Array(5, 20, "Touro"),Array(6, 20, "Gêmeos"),Array(7, 21, "Câncer"),Array(8, 22, "Leão"),Array(9, 22, "Virgem"),Array(10, 22, "Libra"),Array(11, 21, "Escorpião"),Array(12, 21, "Sagitário"))mes=0dia=1signos=2

document.write("Tabela de signos<br><br>")

for(var x=0; x<=11; x++) {document.write(SuperArray[x][signos] + " último dia " + SuperArray[x][dia] + " / " + SuperArray[x][mes]+"<br>")}</script>

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

<script language="javascript">Matriz=Array(Array(),Array(),Array(),Array())

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



Matriz[Planeta][0]="Mercúrio"Matriz[luas][0]=0Matriz[anos][0]=0.24Matriz[distancia][0]=58Matriz[Planeta][1]="Vênus"Matriz[luas][1]=0Matriz[anos][1]=0.625Matriz[distancia][1]=108Matriz[Planeta][2]="Terra"Matriz[luas][2]=1Matriz[anos][2]=1Matriz[distancia][2]=150Matriz[Planeta][3]="Marte"Matriz[luas][3]=2Matriz[anos][3]=1.91Matriz[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 únicovalor para o programa principal.

Exemplo:

<script language="javascript">// Funções function Calcule(a, b, c){d=a * b/creturn d}

// Programadocument.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 controlede 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:




// Funçõesfunction Calcule(a, b, c){document.write(a * b/c)}

// Programa principalCalcule(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:

<script language="javascript">// Funções function Adicao(a, b){c=a + breturn c}

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

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

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

// Programa principaldocument.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>


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

<script language="javascript">function soma(x, y) {var sum=x + yreturn sum}

//Programa principal



Variáveis nulas (NULL)

Afinal o que Null?1 - Null é um valor que indica dados ausentes ou desconhecidos em um campo2 - nulo3 - vazio4 - sem valorAssim 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:

<script language="javascript">Var_1=9Var_2="Texto"Var_3=true

//Limpando as variáveis

Var_1=nullVar_2=nullVar_3=null</script>

2º exemplo:

<script language="javascript">Nome=nullSobrenome=null

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

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

document.write(Nome + " " + Sobrenome)

</script>

3º exemplo:

<script language="javascript">a=10



b=nullc=5

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

} else {resp=a + b + c}document.write(resp)</script>

Trabalhando com formulários

Formulário é um documento estruturado com espaço reservado para a entrada de informações e, emgeral, 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 aalteração de informações. Um formulário é um "filtro" visual para os dados básicos que estão sendoapresentados, em geral oferecendo as vantagens de uma melhor organização de dados e maior facilidade devisualizaçã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 outrosnão usam formulários.

Se nós fizermos uma comparação entre as linguagens de programação mais usadas encontraremos osseguintes 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 ocomando <FORM> ... </FORM> para definir a abertura e o fechamento do mesmo.

A forma geral do comando é a seguinte: <form action="http://www.servidor.com.br/bancodedados.php" method="post">

...</form> Seus parâmetros são:

Parâmetros Definição

methodEsse 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" é omais 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:<input type="submit" value="Enviar">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.



<input type="submit" value="Enviar"> 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 paratodos os campos do formulário de uma única vez.

Veja o comando limpar abaixo:

<input type="reset" value="Limpar"> Veja o exemplo com os comandos enviar (Submit) e apagar (Reset) dentro de um formulário: <form action="http://www.meuservidor.com/formulario.php" method="post">Digite seu nome: <input type="text" name="nome" size="30" maxlength="50"> <br><input type="submit" value="Enviar"><input type="reset" value="Limpar"></form> c) Fazendo um Upload de seus arquivosSe 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:<input type="file" name="nome_do_comando">Seus parâmetros sã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 seunavegador. No campo ao lado do botão está o caminho do arquivo dentro de seu computador, exemplo:

c:\Pasta1\História\Feudalismo.docExemplo:<Form Action="http:\\www.meuservidor.com\arquivo.php" method="post"><center>Envie sua foto aqui:<br><input type="file" name="foto"><br><input type="submit" value="Enviar"></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 navegadorusamos o botão de comando (button), veja:

<input type="button" value="clique aqui" onclick="funcao()">Seus parâmetros sã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 doformulá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:<input type="text" name="nome_do_campo" value="Digite seu texto">Seus parâmetros sã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 doscaracteres digitados aparecem asteriscos. Como o próprio nome indica, ele é ideal para a visualização do textoque está sendo digitados.

Seus parâmetros sã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:


name Define o nome do texto oculto

value Valor do texto oculto

Exemplo:<input type="hidden" name="personagem" value="Bob Esponja Calça Quadrada"> 6) Área de texto (Textarea)



Define uma caixa de digitação onde o usuário pode digitar livremente um texto com várias linhas.<textarea name="nome" rows="num_lin" cols="num_col">[texto padrão]</textarea>Seus parâmetros sã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 dosbotões de opção for selecionado, todos os demais serão desativados.



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çainportante.

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



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 conjuntopré-determinado de ítens.

Sua sintaxe é diferente do campo <input type="objeto"> descrito anteriormente, veja:<select name="nome_do_seletor"><option [selected]> Opção da seleção<option> Seleções adicionais</select>Seus parâmetros sã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 podemser 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:


name Define o nome da caixa de listagem

sizeParâmetro que designa o número de escolhas a mostrar. Se não for preenchido, os ítems surgemcomo caixa de combos, caso contrário, surgem dentro da caixa de listagem com o número deelementos 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 como 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:

<form><select name="lista" size="3"><option value="Item 1">Item 1<option value="Item 2">Item 2<option value="Item 3">Item 3</select></form>

11) Caixas de diálogos:

Caixa de diálogo é uma janela que um programa abre na tela para solicitar algum tipo de reposta dousuá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:

<script language="javascript">alert("Bom dia!")</script>

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:


var nome=prompt("como se chama","");document.write("Olá!meu nome é"+nome);</script>

11.c) Caixa para confirmar (confirm)

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

Sua sintaxe é: Verdadeir_ou_falso=confirm("Pergunta a ser feita.");

Exemplo:

<script language="javascript">if(confirm("Tem certeza de excluir o arquivo?"))document.write("Documento excluído");elsedocument.write("Documento não foi excluído");</script>

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 eCriar 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:<a href="#" onclick="mensagem('texto');">

Para inserir uma imagem é só colocar este comando:<img src="imagem1.jpg">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: <img src="primeiraimagem.jpg" onMouseOver="src='segundaimagem.jpg'"

onMouseOut="src='primeiraimagem.jpg'"> Onde:

primeiraimagem= segundaimagem=

14) Barra de menu:



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

15) Abrindo uma nova Janela:

Para a web, essas janelas são chamadas de Pop-up ou janela instantânea; estas janelas podem serexibidas a qualquer momento na tela.

Existem quatro tipos de pop-up:Pop-up externo;Pop-up interno;Frames eJanela Modal .

Pop-up externo

Este tipo de pop-up fica externamente ao navegador, muitos usuários acham estas janelinhas chatas defechar 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(), é usadopara 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 janelamais 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>

<script language="JavaScript">function verpagina(form1)

{ver = window.open("", "ver")

ver.document.open()// ver.document.write(document.forms[0].elements[0].value)ver.document.write(form1.texto.value)ver.document.write("<br>") ver.document.close()}</script><body bgcolor="#EEEEEE" text="#000000"><form action="" method="post" name="form1"><textarea cols=45 rows=13 name="texto">

Insira o texto aqui

</textarea><br><br><input type="button" value="Visualizar" onClick="verpagina(this.form)"><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 dejanela. 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"><!--function aparecer() {if(identificado.style.display=='none') {identificado.style.display='';



} else {identificado.style.display='none';};}--></script><body><a href="javascript:;" onClick="aparecer();">APARECER</a><div id="identificado" style="display: none"><p>Texto 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áginaHTML 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 trocarinformaçõ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

lengthDevolve o número de frames subordinadas na página principal (página que contem todas asframes).

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

<HTML><HEAD></HEAD> <FRAMESET ROWS="30%,70%"><FRAME SRC="subordinada01.htm" name="subordinada01"><FRAME SRC="subordinada02.htm" name="subordinada02"></FRAMESET> </HTML>

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

A frame subordinada01.htm

<HTML> <BODY> <FORM name="form1"> <INPUT TYPE="TEXT" NAME="en" value=" "></FORM></BODY> </HTML>

A frame subordinada02.htm

<HTML> <HEAD><SCRIPT LANGUAGE="Javascript">  </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 estesdados na zona de texto da outra frame. Para isso, temos de especificar o caminho completo. Primeiro a zona detexto encontra-se na frame subordinada chamada subordinada01. Então o caminho começa porparent.subordinada01. Nesta frame encontra-se um documento que contém um formulário (form1) que contémpor sua vez uma zona de texto (en), que tem como propriedade value. o que faz, que o caminho sejadocument.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 doisnavegadores.

dialogHeight: valor em pxdialogLeft: valor em pxdialogTop: valor em pxdialogWidth: valor em pxcenter: (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">



</body></html>

Exemplo:

Eventos do formulário

Evento é qualquer ação ou ocorrência, em geral provocada pelo usuário, à qual o programa possaresponder. Por exemplo: o precionamento de uma tela ou a movimentação do mouse. Se um usuário dá umclique no botão do mouse, este evento (de clicar o mouse) gera uma mensagem.

Veja alguns eventos mais comuns:

Elemento Evento

<body> ou <frameset>onLoadOnUnLoad

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

Caixa de texto ouÁrea de texto

onBluronChangeonFocusonSelect

Caixa de combos ouCaixa de listagem

onBluronChangeonFocus

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

onBlur = scriptO 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 osexemplos a seguir:

<input type="button" value="Calcula" onClick="processa(this.form)"><input type="button" value="Azul" onClick="document.bgColor='blue'">

Exemplo 1: Ativando caixa de alerta:

<html><head><title> onClick - 01 </title></head><body><form><center><input type="button" value="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 onLoadO 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 esseevento. Ele pode pertencer ao objeto window e não ao objeto document, como você poderia imaginar:

<body onLoad="rotinadeabertura()">Exemplo:

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

3 - Evento onUnLoadO 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:<body onUnLoad="rotinadefechamento()">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:

<body onunload="alert('Você ainda está na página pag01 e vai carregar a página pag02.')"><a href="pag02.htm">Pag02</a></body>

Ao clicar em um link para a página seguinte, o método alert será executado antes do carregamento dapró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:<body onload="alert('Você está na página Página pag03')">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 eaté 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 aogerenciador 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çãotestacampo(), que por sua vez deverá retornar o valor false para evitar o envio do formulário ou outro valorqualquer para enviá-lo.

<form onSubmit="return testacampo(this)"> O exemplo a seguir mostra o gerenciador em ação. No comando Form acrescentamos o gerenciador

onSubmit: <form name="ficha" onSubmit="return testacampo()"> 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 sidopreenchido, a função exibe uma caixa de diálogo de alerta e retorna False, evitando o envio do formulário. Casocontrário, exibe uma mensagem informando que todos os campos está preenchidos e envia o formulário após oretorno de true. Na prática você pode optar por consistir cada campo individualmente usando os gerenciadoresonClick, onChange e onBlur, optar por fazer uma consistência geral ou, ainda, combinar os dois métidos, pois umusuário pode preencher os dados solicitados em um formulário e pressinar o botão de envio sem ter preenchidonehum 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, comoera 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:[email protected]">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 desubit equivalente ao de pressionar o botão submit, mesmo sem este existir! Esta ação pode ser produzida comum simples ENTER após o preenchimento do campo. Uma vez que o form está sendo submetido via e-mail, ousuário é notificado pelo brewser dos riscos de segurança (este mecanismo de aviso pede ser desligado nasopçõ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 quefincione corretamente.

O próximo exemplo mostra o uso desse gerenciador em duas situações. Na primeira, ele cria um linkfalso no qual o evento é usado para alterar a cor de fundo do formulário. Se você pocisionar o cursor sobre apalavra 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 dajanela. Uma vez colocada essa mensagem na linha de status, ela permanece lá até que outro link receba o cursorsobre 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 onBlurO 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 clicaem 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, noqual, em um formulário com cinco campos, o usuário não pode deixar de preencher três deles. Nos camposcódigo, nome e telefone foi adicionado o evento onBlur. nos campos mencionados, quando o usuário pressionaTab para avançar para outro campo, onBlur é ativado e executa a função campovital(), passando comoargumento 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 oprenchimento daquele campo. Note que na mensagem usamos a propriedade x.name para exibir o nome docampo.

<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 emoutro 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 focoindependente de ter seu conteúdo alterado. O próximo exemplo mostra o uso do gerenciador onChange. nocampo 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 dotipo select, text e textarea.

Vomos analizar o código do próximo exemplo, que solicita a digitação de cinco campos. Os trêsprimeiros são os que deveráo receber um número. O campo 4 é um campo que recebe automaticamente asomatória dos campos anteriores, mas que permite a digitação de outro valor. A somatória dos campos é feitapela função precessa1(), que é automaticamente executada quando o campo recebe o foco de digitação. Nõstambém aproveitamos para acrescentar o evento onBlur nos campos de 1 a 3 para fazermos um teste. Se ocampo permanecer em branco é assumido o valor 0 para ele. Dessa forma evitamos um erro de Javascript nahora 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, avisandoque 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áriodeve 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:<input type="text" value="" name="campo1" onSelect="altera()">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 comtexto 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çoscorrespondentes na matriz URL.<html><head><title>Menu Select: Acessando outras páginas </title><script language="javascript">function criamatriz() {this.length=criamatriz.arguments.lengthfor(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 poucoespaç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 suaposição, cor, forma e nome.

Prefixos

Para identificar os elementos do formulário, as três primeirasl letras do nome do formulário - frm - formcolocadas 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<input type="button" name="nome do botão" value="texto do botão" [onClick="código javascript"]>

Propriedades

name Nome do elemento

value Valor contido no elemento

Exemplo:



<form name="frm_teste"><input type="button" name="btn_botao" value="Verdadeiro"onClick='if(document.frm_teste.btn_botao.value=="Verdadeiro") {document.frm_teste.btn_botao.value="Falso"} else {document.frm_teste.btn_botao.value="Verdadeiro"}'></form>

b) Elemento submit<input type="submit" name="nome do submit" value="texto do submit" [onClick="código Javascript"]>

Propriedades


value valor contido no elemento

c) Elemento reset<input type="reset" name="nome do reset" value="texto do reset" [onClick="código Javascript"]>

Propriedades



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

defaultValueIndica o valor inicial que vai aparecer na zona de texto (especificado como parametro da marcaHtml <input ...> )



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:

<script language="javascript">function campo(x) {alert(x.name+" = "+x.value)}</script><form>Nome: <input type="text" name="txt_nome" value="João" onBlur="campo(this)"><br>



Endereço: <input type="text" name="txt_endereco" value="Rua: Augusta nº 555" onBlur="campo(this)"><br>Telefone: <input type="text" name="txt_telefone" value="9999-8888" onBlur="campo(this)"></form>

e) Elemento textarea<textarea name="nome da área de texto"rows=inteiro cols=inteiro[onBlur="código Javascript"] [onChange="código Javascript"][onFocus="código Javascript"] [onSelect="código Javascript"]

Propriedades

defaultValueIndica o valor inicial que vai aparecer na zona de texto (especificado como parâmetro da marcaHtml <input ...>)



Exemplo:

<script language="javascript">function teste(frm_form) {frm_form.txa_teste.value="\tO livro: \"Manual Prático do Programador\". \nEstá nas livrarias e \\ ou jornaleiros."}</script>

<form><center><textarea name="txa_teste" cols="30" rows="10"></textarea><br><input type="button" value="testando" onClick="teste(this.form)"></center></form>

f) Elemento password<input type="password" name="nome da senha" [value="texto da senha"] size=inteiro>

Propriedades

defaultValue Formece uma cadeia padrão se nenhuma outra for fornecida


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<input type="hidden" name="Nome do elemento oculto" value="Texto do elemento oculto">

Propriedades



defaultValueEsta propriedade armazena o valor padrão que o elemento oculto armazena se nenhuma outrainformação for fornecida


value Valor do elemento

Obs: esta propriedade não usa nenhum evento.

Exemplo:

<form name="frm_teste"><input type="hidden" name="oculto" value="Rio de Janeiro"><input type="button" name="btn_botao" value="Texto oculto" onClick="alert('Mostrar o texto oculto: '+document.frm_teste.oculto.value);"></form>

h) Elemento caixa de 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)

defaultCheckedEsta propriedade determina qual o estado padrão da caixa. true para selecionado e false paradeselecionado



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

checkedEsta propriedade contém o valor booleano do estado do botão de rádio; verdadeiro paraselecionado, falso para deselecionado.

defaultCheckedEsta propriedade indica se este é o botão padrão que deve ser selecionado entre os botõesde rádio do grupo.

indexEsta propriedade indica qual o elemento é este botão de rádio no grupo corrente substitui porestá selecionado.

length Esta propriedade indica o número de botões de rádio no grupo





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


var y=document.frm_teste.rdo_valor[0].valuedocument.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

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

selectedIndexna lista de escolha. Se o atributo multiple estiver ativada, então alterar o valor de selectedIndexlimpa 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ópriaspropriedades. Cada opção individual em um elemento select possui as seguintes propriedades:

Propriedades do option

defaultSelectedEste é um valor booleano indicando se a opção está selecionada automaticamente oudeselecionada 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

valueesta propriedade contém os dados enviados ao servidor a partir da lista de seleção quando obotão submeter for precionado.

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

selectName.option[índice].propriedade

<script language="javascript">function selecao() {var x=document.frm_teste.lst_lista.selectedIndexvar y=document.frm_teste.lst_lista[x].valuedocument.frm_teste.txt_texto.value=y

}</script><form name="frm_teste"><select name="lst_lista"><option value="A">Item 1<option value="B">Item 2<option value="C">Item 3<option value="D">Item 4<option value="E">Item 5</select><input type="button" name="btn_teste" value="Teste"onClick="selecao()"><input type="button" value="Selecionar item 5" name="btn_selecao"onClick="document.frm_teste.lst_lista[4].selected=true"><input type="text" name="txt_texto" value=""></form>

Adicionando, removendo e renomeando select:Obs: este código está em Dhtml

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



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 dousuá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 exigemconhecimento 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

Transforma string em inteiro



parseIntExemplo: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úmerofor 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 (positivoou 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 asmedidas 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, a2=b2+c2

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:

a) b)c)

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

a) b)

Razões trigonométricas



α = ânguloa = Hipotenusab = Cateto opostoc = 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 dahipotenusa:

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 tgem

radianos



30º

45º 1

60º

Exercícios:

1) Encontre x:

2) Encontre y:

a)

b)

3) Encontre x e y:



a)b)

c)

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.

Ânguloemgrau

emradianos

360º

180º

90º

60º



45º

30º

A unidade de medida usada pelos brasileiros é o grau, porém a unidade de medida usada pela maioriadas 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() paraconvertê-lo em radianos.

Exemplo:

<script language="javascript">function radianos(){return Math.PI/180} document.write("<br>"+ Math.sin(Math.PI)) // O seno de radianos de pi(0, aproximadamente). Resultado:1.2246063538223773e-16document.write("<br>"+Math.sin(Math.PI/2)) // O seno de radianos de pi/2 (1). Resultado: 1document.write("<br>"+Math.sin(30*Math.PI/180)) // O seno de 30 graus (0,5). Resultado:0.49999999999999994document.write("<br>"+Math.sin(30*radianos())) // O seno de 30 graus (0,5). Resultado:0.49999999999999994

document.write("<br>"+Math.cos(60*Math.PI/180)) // O cosseno de 60 graus (0,5). Resuntado:0.5000000000000001document.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.9999999999999999document.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().

<script language="javascript"> function graus() {



return 180/Math.PI}

document.write("<br>"+Math.round(Math.asin(0.5)*180/Math.PI)) // O arco seno de 0,5 em graus é 30 document.write("<br>"+Math.round(Math.asin(0.5)*graus())) // O arco seno de 0,5 em graus é 30

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 ax seja igual a b.

logab=x <=> ax=b

Na expressão logab=x, temos:

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

Vejamos alguns exemplos de logarítmos:

log24=2, pois 22=4

log381=4, pois 34=81

log77=1, pois 71=7

log51=0, pois 50=1

Logaritmo decimal

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

1. Log(1)=02. Log(0) não tem sentido

3. Log(10)=Log(101)=1

4. Log(1/10)=Log(10-1)=-15. Log(100)=Log(10²)=2

6. Log(1/100)=Log(10-2)=-27. Log(1000)=Log(10³)=3

8. Log(1/1000)=Log(10-3)=-3

9. Log(10n)=n

10. Log(10-n)=-n

A partir da propriedade

Log 10n=n

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

Log(10x) = x

Mudança de base

Apesar de existirem identidades muito úteis, a mais importante para o uso na calculadora é a que permiteencontrar logaritmos com bases que não as que foram programadas na calculadora (normalmente loge e log10).

Para encontrar um logaritmo com uma base b usando qualquer outra base a:

Prova da 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 logk(b)

Cálculos mais fáceis

Logaritmos trocam números por expoentes. Mantendo-se a mesma base, é possível tornar algumas poucasoperaçõ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 = 10x. Logo, considerando-se b = 10y, 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 String

Manipulando StringsO 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é ocaractere logo antes de indice final. Se indice Inicial for maior que indice final, o métodofunciona 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 umaposiçã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 eretorna o índice correspondente. o argumento inicIndex é opcional e indica a partir deonde inicia a busca. Podemos localizar os valores dos índices para todos os caracteresdo mesmo tipo iniciando após o índice anterior.

Exemplo:text="Hello, world!";index=0document.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 caracterena cadeia do fim para o começo iniciando em inicIndex.Veja o exemplo anterior

replace(palavra,

O método replace você insere uma palavra ou uma letra em que você deseja substituirpor outra.

Exemplo:s="Este automovel é caro"

substituto) 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 caracteresalterados 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 caracteresalterados 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.valuevar 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ãodevolve 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 1996Para 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ávelDataToda para armazenar data e hora.

<script language="javascript">DataToda=new Date()Dia_do_mes=DataToda.getDate()Dia_da_semana=DataToda.getDay()Mes=DataToda.getMonth()Ano=DataToda.getFullYear()// ---------------------------------------Horas=DataToda.getHours()Minutos=DataToda.getMinutes()Segundos=DataToda.getSeconds()// ---------------------------------------semana = Array(6)semana[0]="Domingo"semana[1]="Segunda"



semana[2]="Terça"semana[3]="Quarta"semana[4]="Quinta"semana[5]="Sexta"semana[6]="Sabado"Semana_atual=semana[Dia_da_semana]//-------------------------Mes2=Array(11)Mes2[0]="Janeiro"Mes2[1]="Fevereiro"Mes2[2]="Março"Mes2[3]="Abril"Mes2[4]="Maio"Mes2[5]="Junho"Mes2[6]="Julho"Mes2[7]="Agosto"Mes2[8]="Setembro"Mes2[9]="Outubro"Mes2[10]="Novembro"Mes2[11]="Desembro"Mes_atual=Mes2[Mes]document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano)document.write("<br>")document.write("São: "+Horas+" horas, "+Minutos+" minutos e "+Segundos+" segundos.")</script>

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

<script language="javascript">DataToda=new Date()DataToda.setDate(28)DataToda.setMonth(4)DataToda.setYear(1997)// ---------------------------------------Dia_do_mes=DataToda.getDate()Dia_da_semana=DataToda.getDay()Mes=DataToda.getMonth()

Ano=DataToda.getFullYear()// ---------------------------------------semana = Array(6)semana[0]="Domingo"semana[1]="Segunda"semana[2]="Terça"



semana[3]="Quarta"semana[4]="Quinta"semana[5]="Sexta"semana[6]="Sabado"Semana_atual=semana[Dia_da_semana]//-------------------------

Mes2=Array(11)Mes2[0]="Janeiro"Mes2[1]="Fevereiro"Mes2[2]="Março"Mes2[3]="Abril"Mes2[4]="Maio"Mes2[5]="Junho"Mes2[6]="Julho"Mes2[7]="Agosto"Mes2[8]="Setembro"Mes2[9]="Outubro"Mes2[10]="Novembro"Mes2[11]="Desembro"Mes_atual=Mes2[Mes]document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano)</script>

exmeplo 3: vendo as horas

<script language="javascript">rel = new Date()hora = rel.getHours()minuto = rel.getMinutes()segundo = rel.getSeconds()

temp = horatemp += ((minuto < 10) ? ":0" : ":") + minutotemp += ((segundo < 10) ? ":0" : ":") + segundodocument.write("São exatamente: "+temp)</script>

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 = "" + horatemp += ((minuto < 10) ? ":0" : ":") + minutotemp += ((segundo < 10) ? ":0" : ":") + segundo



document.form1.text1.value = tempsetTimeout("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 transcusrode um determinado tempo.

Variável = setTimeout("ação",tempo)Variável é uma variável apenas para controle do timeração é a ação que se quer realizartempo é 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 = "" + horatemp += ((minuto < 10) ? ":0" : ":") + minutotemp += ((segundo < 10) ? ":0" : ":") + segundodocument.form1.text1.value = tempcontroleRelogio=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 ummesmo nome.Em geral, criado por uma das formas:

new Array(tamanho) // ounew 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_1str_2 = nivel.join(", "); //resulta "baixo, médio, alto" em str_2str_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 objetojá definido. Não pode aumentar.

Exemplo:

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

http://www.webteste123.com/estudo/cursos/web2.0/codigo_fonte/javascript/funcao_data/



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 oseu 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 índicebase zero a partir do qual começa a extração. Os elementos são extraídos até, mas não incluindo, o índice basezero 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 essaoperaçã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,9document.write("<br>"); //avança uma linhadocument.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 eremovendo 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, masdeve 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,40document.write("<br>"); //avança uma linhade_fora = num.splice(2,0,"25");document.write(num); //escreve 10,20,25,30,40document.write("<br>"); //avança uma linhade_fora = num.splice(2,1,"28");document.write(num); //escreve 10,20,28,30,40document.write("<br>"); //avança uma linhadocument.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. Osparâ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:

<script language="javascript"></script>

<a href="javascript:Imprimir();">Imprimir</a>

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

<script language="javascript">largura = screen.width; //Capta a largura total do Monitoraltura = screen.height; //Capta a altura total do Monitordocument.write("Largura total do monitor: "+largura);document.write("<br>Altura total do monitor: "+altura);</script>



Alterando o tamanho e movendo a janela de seunavegador


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

<a href="javascript:window.close()" target="_top">Sair</a> <br><br></body></html>



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=clickdocument.oncontextmenu = new Function("return false;")</script></head>

<body><p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p><p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p><p>19</p> <p>20 </p></body>

</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=clickdocument.oncontextmenu = new Function("alerta();return false;")</script></head>

<body><p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p><p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p><p>19</p> <p>20 </p></body>

</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.offsetXdocument.mouse.y.value = event.offsetY}</script></head>

<body onmousemove="teste()"><form name="mouse">X:<input type="text" name="x"><br>Y:<input type="text" name="y"></form></body>

</html>

Teclado

(Só funciona no Internet Explorer)

<html><head><script language="javascript"></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.appNamebrowserCod = window.navigator.appCodeNamebrowserVer = window.navigator.appVersionbrowserLingua = window.navigator.languagebrowserPlat = window.navigator.platformbrowserJava = 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=nomethis.tel=telthis.UF=UF}</script></head><body>

<script>fulano = new NovaFunc("Alguem","2222-2222","SP")document.write(fulano.tel + "<br>")document.write(fulano.UF + "<br>")document.write(fulano.nome)

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

</body></html>

Outro exemplo

<script language="javascript">function veiculo(a, b, c, d) {this.marca=a;this.modelo=b;this.ano_matricula=c;this.cilindrada=d;}

//exemplo 1var 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 2var carro2=new veiculo()



carro2[0]="Fiat";carro2[1]="187";carro2[2]="1995";carro2[3]=2200;

// Lista das propriedades do objetofor(var k=0; k<=3; k++) {document.write("Propriedade "+k+" = "+carro2[k]+"<br>");}

document.write("<br><br><br>")

// exemplo 3var carro3=new veiculo()carro3["marca"]="Ford"carro3["modelo"]="K2"carro3["ano_matricula"]="1999"carro3["cilindrada"]= 3300document.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 deferramentas 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 noFIREFOX vá em:

FERRAMENTASOPÇÕESCONTEUDOCLIQUE NO BOTÃO AVANÇADO DE PERMITIR JAVASCRIPTSELECIONE 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() {

http://www.webteste123.com/estudo/cursos/web2.0/apostilas/javascript.html#



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

apostila javascript

Documents