Apostila Javascript

20/04/13
Apostila Javascript
Javascript Caso sensitivo

Ateno Na linguagem Javascript voc deve prestar muita ateno na hora de digitar seu cdigo fonte, pois, o Javascript caso sensitivo, ou seja, ele diferencia letras maisculas de minsculas. Por exemplo, as palavras histria, Histria e HISTRIA so palavras diferentes. Por exemplo, veja este cdigo abaixo: Texto="A raiz quadrada de 9 3" document.write(Texto) As palavras Texto edocument.writeesto corretos, porm, se voc alterar o cdigo fonte com letras maisculas e minsculas,causar erros no cdigo fonte. Observe: Texto="A raiz quadrada de 9 3" Document.Write(TEXTO) As palavras TEXTO eDocument.Writeestoerrados,causando erros. O computadornoreconhece estas palavras. Na hora em que digitar o cdigo fonte preste bastante ateno nas letras maisculas e minsculas, por causa de uma letra pode causar erros.
Ponto-e-vrgula (;) no final das declaraes

Uma boa prtica ao programar utilizando Javascript sempre usar o; (ponto-e-vrgula) no final das suas declaraes, mas seu uso no obrigatrio. Voc precisa utilizaer o ponto-e-vrgula se utilizar algum compressor de Javascript para reduzir o tamanho do arquivo. como os comperssores distribuem os cdigos em uma nica linha, sem eles ser impossvel determinar onde comea e termina uma istrua, ocasionando erro.
Editor de texto
Editor de texto apenas um processador de texto que usado para digitar o programa. O texto resultante conhecido como cdigo fonte. O editor de texto um software que permite ao usurio selecionar trechos de um arquivo, alterar, apagar ou adicionar testo ao cdigo-fonte.
Cdigo-Fonte
www.webteste123.com/estudo/cursos/web2.0/apostilas/javascript.html
1/134
20/04/13
Apostila Javascript
Cdigo-fonte uma seqncia de instrues numa linguagem de programao. O cdigo-fonte escrito por um programador. Este mesmo cdigo traduzido por um outro programador que pode ser pelo navegador no caso do Javascript, pelo servidor no caso do PHP, ou pelo compilador no caso Java. O cdigo-fonte o cdigo bsico de um programa.
Criando um novo documento - O PRIMEIRO PROGRAMA

Para comear vamos analisar um exemplo bem simples - abra um editor de texto comum e digite o cdigo que est escrito abaixo: <html> <head> <title>Meu primeiro programa </title> </head> <body> <script language="javascript"> docoment.write("Esta minha primeira pgina") </script> </body> </html> Salve este documento com o nome pgina01.html Assim que o exemplo for salvo no editor de texto (bloco de notas, por exemplo) com a extenso .htm ou .html, ao ser executado, o programa enviar a seqncia de caracteres "Esta minha primeira pgina" para a sada padro que a tela do monitor. Para criar um arquivo Javascript, basta definir os elementos e suas formataes ou um editor de texto, e salv-lo com a extenso .html ou .htm, exemplo: programa.html texto.html arquivo01.html
Corpo do programa
Basicamente, a sintaxe do corpo do programa consiste em: <script> // Contedo </script> OU: <script language="javascript"> // Contedo </script>
www.webteste123.com/estudo/cursos/web2.0/apostilas/javascript.html 2/134
20/04/13
Apostila Javascript
Carregando um arquivo externo

No Javascript, h a possibilidade de colocar mais de 1 arquivo externo ao documento. Ao invs de trabalharmos com o Javascript internamente, podemos trabalh-lo externamente. Em vez de trabalharmos com um arquivo, podemos trabalhar com mais de um arquivo. Isto pode facilitar e muito a vida do programador. Abra um editor de texto e copie o arquivo abaixo: <html> <head> <title>Arquivo externo</title> </head> <body> <script language="javascript" src="teste.js"> </script> </body> </html> Salve este arquivo com arquivoesterno.html. Para incluir um arquivo externo ao documento use o comando src, no exemplo acima o arquivo externo "teste.js". Devemos sempre salvar este arquivo externo com a extenso js . Abra o editor de texto de novo e copie este arquivo abaixo: document.write("Testando um arquivo externo. ") document.write("Bom dia ") document.write("Boa tarde e ") document.write("Boa noite. ") document.write("Fim do arquivo externo.") Salve este arquivo como teste.js. Assim que o documento arquivoexterno.html seja executado ao ser executado o programa enviar para a tela do monitor: "Testando um arquivo externo. Bom dia, Boa tarde e Boa noite. Fim do arquivo externo." Observao: Se voc est trabalhando com o arquivo externo do Javascript. No use as tags <script> e </script> dentro do cdigo, o que causaria erros de programao. O arquivo teste.js s aceita comandos Javascript se colocarmos tags html geraria erros, s use tags html dentro de aspas "duplas" ou 'simples'.
Comentrios
Comentrio uma breve nota de explicao inseridas em um programa para descrever o que ele far. Os programadores usam comentrios em seus programas para que outros programadores (e ele prprio) entendam o que o programa faz e como funciona. Os comentrios geralmente descrevem o que o programa faz, quem o seu autor, por que ele foi alterado, e assim por diante. A maioria das linguagens de programao usa uma sintaxe prpria para a especificao de comentrios, de modo que os comentrios sejam ignorados pelo compilador. Os comentrios no so analisados pelo programa. Os comentrios podem ocupar uma ou vrias linhas. Veja o exemplo abaixo:
20/04/13
Apostila Javascript
Comentrios de uma linha

Para inserir um comentrio de uma linha basta colocar o smbolo // antes de qualquer comentrio. Exemplo: <script language="javascript"> //Comentrio de uma linha //Exemplo 1 //Exemplo 2 //Exemplo 3 </script>
Comentrio com mais de uma linha

Para inserir comentrios com mais de uma linha basta colocar os smbolos / * para abrir um comentrio e * / para fechar o comentrio. Exemplo: <script language="javascript"> /* Comentrio com mais de uma linha */ /* Exemplo 1 Exemplo 2 Exemplo 3 */ </script>
Usando aspas dentro de aspas

s vezes necessitamos informar algo entre aspas dentro de uma string. Isto pode ser resolvido alterando-se aspas duplas e simples. Isto usado em Javascript e PHP, veja o exemplo em Javascript. <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:
20/04/13
Apostila Javascript
<script language="javascript"> document.write("A raiz quadrada de 9 3<br>") document.write("A soma de 5 + 4 igual a 9 <br>") document.write("6 dividido por 3 igual a 2 <br>") </script>
Editando um texto
Para editar um texto externamente basta usar o comando leia: <html> <head> <title>Idade</title> </head> <body> <form name="frm_teste"> Digite seu nome:<input type="text" name="nome"><br> Digite sua idade:<input type="text" name="idade"><br /> <input type="button" value="Resultado" onClick="idadex()"> </form> <script language="javascript"> function idadex() { var nome = document.frm_teste.nome.value var idade = document.frm_teste.idade.value alert("meu nome " + nome + " e tenho " + idade + " anos.") } </script> </body> </html>
Caracteres especiais
Dentro de uma string de texto, podem ser especificado caracteres especiais mostrados a seguir: Hfen Aspas Barra invertida Nova linha \' \" \\ \n
Marca de tabulao \t Retorno de carro Backspace Exemplo: <script language="javascript"> document.write("<pre>")

\r \b
20/04/13
Apostila Javascript
document.write("\tO livro: \"Manual Prtico do ") document.write("Programador\". \nEst nas livrarias ") document.write("e \\ ou jornaleiros. ") document.write("</pre>") </script> Resultado:
Ol i v r o :" M a n u a lP r t i c od oP r o g r a m a d o r " . E s t n a sl i v r a r i a se\o uj o r n a l e i r o s .
Tipos de variveis
Variveis so smbolos que representa um valor numrico ou string usada no programa. O uso de variveis d ao programador flexibilidade para mudar o valor a qualquer momento no programa, mesmo que a princpio parea no ser necessrio este tipo de flexibilidade. O contedo de uma varivel pode mudar a qualquer momento. Por exemplo, uma varivel chamado cheque poderia conter o nmero 12, mas o programa teria condies de modificar esse valor a qualquer momento. O nome de uma varivel pode comear com uma letra ou sublinhado "_" seguido de nmeros ou letras sem espao. Veja alguns exemplos de nomes vlidos: nome Conta_pag z01 _cod
Varivel String
Varivel String um conjunto contnuo de caracteres alfanumricos que no contm nmeros usados para clculos. Nomes, endereos, palavras e frases so strings. Esses caracteres podem ser as letras maisculas, as letras minsculas, os nmeros e os caracteres especiais (&, #, @, ?, + ). Exemplos: "aluno" "1234" "@ internet" "0.34" "1 + 2" Observao: os dados do tipo literal na linguagem de programao so sempre representados entre aspas duplas(") ou aspas simples (').
Variveis Numricas
Os dados numricos dividem-se em dois grupos: inteiros e reais. Os nmeros inteiros podem ser positivos ou negativos e NO possuem parte decimal. Este tipo de dado armazenado na memria do computador, exemplos: -23 98 0 1350
20/04/13
Apostila Javascript
-257 237 -2 Os nmeros reais podem ser positivos ou negativos e possuem parte decimal. Este tipo de dado armazenado na memria do computador, exemplo: 23.45 346.98 -34.88 0.0 -247.0 Observao: na linguagem de programao, a separao entre a parte inteira e a parte decimal de um nmero feita pelo ponto (.), e a simples presena do ponto j significa que um nmero real.
Variveis Booleanas
Varivel Booleana uma expresso cujo resultado s pode ser verdadeiro (true) ou falso (false). As variveis booleanas so mais usadas em: Estrutura de deciso: If, Case e Ternrio; Operadores relacionais: >, <, >= , <= , ==, != ; Operadores booleanos: and, or, not. Este tipo de varivel, quando armazenado na memria do computador, ocupa 1 byte, pois possui apenas duas possibilidades de representao: true ou false. Exemplo: Expresso teste=true x=false y=true a=4<2 b=8>3 c=(3>2)&&(5<4) d=(3>4)||(5<4) a=false b=true c=false d=true Resultado Significado verdadeiro falso verdadeiro falso verdadeiro falso verdadeiro
Comando de atribuio
O primeiro operador que voc deve conhecer o de atribuio "=". Ele atribui o contedo da expresso sua direita para a varivel do seu lado esquerdo. x=30 y=10/2 + 6 z=true a="texto"
Regras bsicas
20/04/13
Apostila Javascript
Para criar uma varivel, a varivel deve obedecer as seguintes regras: 1. O primeiro caractere deve ser sempre uma letra ou um caractere sublinhado (_). 2. Os caracteres que voc pode utilizar na formao das variveis so: os nmeros, as letras maisculas, as letras minsculas e o caractere sublinhado (_). 3. No permitido acentuao (acento grave, acento agudo, acento circunflexo, trema e til), por exemplo: Antnio, mamo, difcil, cinqenta, etc. Dependendo da linguagem de programao usado pelo programador (ASP, Java, PHP, Javascript, Delphi, Visual Basic e outros) cada linguagem recebe regras de programao diferente, por exemplo: 1. As variveis podem ter qualquer tamanho. Entretanto, apenas os 63 primeiros caracteres so utilizados pelo compilador. 2. Dependendo da linguagem de programao, a varivel pode ser sensvel, ou no, a letras maisculas ou minsculas, isto se chama "caso sensitivo". O Javascript, por exemplo,faz diferenciao entre letras maisculas e minsculas; portanto a varivel NUM exatamente diferente a varivel num; Observao: algumas linguagens de programao so sensveis caixa alta e caixa baixa, um exemplo disso o Java, "Ol" e "OL" so duas palavras totalmente diferentes. O Delphi por exemplo no sensvel a caixa, "abc" exatamente igual a "ABC". 3. No podemos usar palavras reservadas em variveis. Palavras reservadas so nomes utilizados pelo compilador para representar comandos de controle do programa, operadores e nomes de sees de programas. As palavras reservadas da linguagem Pascal so: (veja a tabela abaixo) Exemplos de variveis vlidos: A a nota NOTA x5 A32 Nota_1 MATRICULA nota_1 dia IDADE Exemplos de variveis invlidos 5b e 12 x-y prova 2n nota(2) case Set matrcula Obs: matrcula com acento no . Resolva os exerccios abaixo:
20/04/13
Apostila Javascript
Exerccio 1: Identifique o tipo dos dados: (a) numrico inteiro; (b) numrico real; (c) lgico; (d) string. (c) true (d) "aula" (b) -0.342 (d) " " (a) 0 (b) 45.0 (d) "c * d" (b) 35.23 (b) -354.0 (a) 897 (a) 1234 (a) -234 (d) "34" (b) -15.2 (d) "false" (b) 0.0 (d) "1 2 3 4" (b) -18.589 (c) false (a) -23
Concatenao
Concatenar: Reunir duas strings de caracteres em um s por exemplo, combinar as duas strings "bom" e "dia" formando uma nica string "bom dia". <script language="javascript"> // Exemplo 1: Variavel="Texto1 " + "Texto2" + "<br>" document.write(Variavel) // Exemplo 2: String1="Isto " String2="um texto" String3="<br>" String4=String1 + String2 + String3 document.write(String4) // Exemplo 3 Nome="Jos " Sobrenome="Antnio" document.write("Meu nome : " + Nome + Sobrenome) </script>
Convertendo valores string para numrica

Quando usamos formulrios para efetuar clculos matemticos precisamos converter os valores strings dos formulrios em valores numricos, para logo em seguida calcular usando operadores aritmticos e funes matemticas. Se no convertermos os valores strings para numricas impossibilita de efetuarmos clculos matemticos, por exemplo: A="7" B="9" C=5 document.write(A + B + C)
20/04/13
Apostila Javascript
Esta operao geraria erros de programao o correto usarmos conversores, veja o exemplo abaixo: A="7" B="9" C=5 document.write(parseFloat(A) + parseFloat(B) + C) Observando que C j um valor numrico, enquanto A e B so strings. Veja outro exemplo: <form name="frm_teste"> Altura: <input type="text" name="Altura"> Largura: <input type="text" name="Largura"> <input type="button" value="Resultado" onClick="Areax()"> </form> <script language="javascript"> function Areax() { Altura=document.frm_teste.Altura.value Largura=document.frm_teste.Largura.value Area= parseFloat(Altura) + parseFloat(Largura)/2 alert(Area) } </script> Os valores Largura e Altura so valores strings e Area um valor numrico. No exemplo acima usamos os formulrios Altura e Largura, os valores Largura e Altura so valores strings enquanto Area um valor numrico. Se efetuarmos os clculos Area = Altura * Largura/2 sem converter string em numrica geraramos erros de programao. O correto Area=parseFloat(Altura) * parseFloat(Largura)/2. Exerccio 1: Use a calculadora abaixo:
<html> <head> <title>Calculadora</title> <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){
20/04/13
Apostila Javascript
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> Exerccio 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()">
20/04/13
Apostila Javascript
<input type="button" value="Multiplica" onClick="processa2()"><br> Resultado: <input type="text" name="campo4" value="" size="10" maxlength="10"> </form> </body> </html>
Operadores
Operadores so smbolos que representa uma operao matemtica; so trs tipos de operadores: Operadores Aritmticos ( + , -, * , /) Operadores Relacionais (<, >, =, <= , >= ) Operadores Booleanos (And, Or, Not) O operador mais usado o operador de atribuio "=". Ele atribui o contedo da expresso sua direita para a varivel do seu lado esquerdo. X=40 X=20/10 + 5 X=Y
Operadores Aritmticos
Operadores aritmticos so smbolos usados pelo computador + , -, * , /, para efetuar clculos matemticos. Os operadores aritmticos so os seguintes: Operadores + * / % Nome Adio Subtrao Multiplicao Diviso Mdulo Utilizao Soma valores Subtrai valores Multiplica valores Divide valores Determina o resto da diviso
Veja os exemplos abaixo: Exemplo 1: Efetue clculos usando operadores aritmticos Operao 5+8 12-7 3*6 10/3 10 % 3 Operao 4*2+1 4 * (2 + 1) 3 + 5 * 4-2
Resultado 13 5 18 3.333333 1 Resultado 9 12 21

12/134
Exemplo 2: Efetue clculos aritmticos usando parnteses
20/04/13
Apostila Javascript
(3 + 5) * (4-2)
16
Usando Operadores Aritmticos

+ Adio - Subtrao * Multiplicao / Diviso ( ) Parnteses Lista de Exerccios: Exerccio 1. Faa um programa que receba quatro nmeros inteiros, calcula e mostre a soma desses nmeros // Nome do arquivo: soma.txt <form name="frm_teste"> <input type="text" name="n1"> + <input type="text" name="n2"> + <input type="text" name="n3"> + <input type="text" name="n4"> <input type="button" value="Resultado" onClick="Somax()"> </form> <script language="javascript"> function Somax() { n1=document.frm_teste.n1.value n2=document.frm_teste.n2.value n3=document.frm_teste.n3.value n4=document.frm_teste.n4.value soma=parseFloat(n1) + parseFloat(n2) + parseFloat(n3) + parseFloat(n4) alert(soma) } </script> Exerccio 2. Faa um programa que receba trs notas, calcule e mostre a mdia aritmtica 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
20/04/13
Apostila Javascript
alert(area) } </script> Exerccio 4. Faa um programa que receba o salrio de um funcionrio, calcule e mostre o novo salrio, sabendo-se que este sofreu um aumento de 25%. // Nome do arquivo: salario.txt <form name="frm_teste"> Salrio: <input type="text" name="sal"> <input type="button" value="Resultado" onClick="Salariox()"> </form> <script language="javascript"> function Salariox() { sal=parseFloat(document.frm_teste.sal.value) aumento=sal * 25/100 novosal=sal + aumento alert(novosal) } </script> Exerccio 5. Crie um programa que d o resultado da soma, do produto e da diferena. // Nome do arquivo: resultado.txt<br> Entre com dois nmeros: <br> <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("Operaes com nmeros " + A + " e " + B + ":") alert("Soma = " + (A + B)) alert("Produto = " + (A * B)) alert("Diferena = " + (A-B)) } </script> Exerccio 6. Crie um programa que d o quadrado de um nmero <form name="frm_teste"> Digite um numero: <input type="text" name="n"> <input type="button" value="Resultado" onClick="Quadradox()">
20/04/13
Apostila Javascript
</form> <script language="javascript"> function Quadradox() { n=parseFloat(document.frm_teste.n.value) Quadrado=n*n alert("O quadrado de "+ n+ " e "+ Quadrado) } </script>
Operadores Relacionais
Operadores relacionais so operadores que permitem ao programador comparar dois (ou mais) valores ou expresses. Os operadores relacionais tpicos so: (veja a tabela abaixo:) Operador == != < > <= >= Significado Igual Diferente Menor que Maior que Menor ou igual a Maior ou igual a Veja os exemplos abaixo: Exemplo 1. Veja o seguinte resultado Operao 23<3 41>39 6 <= 5 10 >= 10 7==8 48 != 22 Operao a>b b>a a != b Operao 23==(4 * 2 + 3 * 5) 17==(12/2 + 8-5) Resultado false (falso) true (verdadeiro) false (falso) true (verdadeiro) false (falso) true (verdadeiro) Exemplo 2. Se a=100 e b=200, calcule: Resultado false (falso) true (verdadeiro) true (verdadeiro) Exemplo 3. Resolva a seguinte operao: Resultado true (verdadeiro) false (falso Exemplo 3==(4-1) ou "VILMA"=="VILMA" 5 != (3 + 3) ou "VILMA"!= "BETH" 3<23 41>39 5 <= 6 10 >= 10
15/134
20/04/13
Apostila Javascript
23==(4 * 2 + 3 * 5) 23==(8 + 15) 23==23 true Exemplo 4. Dadas as strings abaixo resolva: Operao "FRED"=="FRED" "FRED"!="SAM" "ONE"=="TWO" "THREE"!= "THREE" Resultado
17==(12/2 + 8-5) 17==6 + 8-5 17==9 false
true (verdadeiro) true (verdadeiro) false (falso) false (falso)
Operadores Booleanos
AND, OR, XOR e NOT so as operaes fundamentais a lgica booleana. Estes operadores s aceitam como operandos valores lgicos: TRUE ou FALSE. Veja a tabela abaixo Operador And ( && ) Or ( || ) Xor ( ^ ) Not ( ! ) Significado Verdadeiro se ambos os lados da expresso forem verdadeiros. Verdadeiro se um ou ambos os lados da expresso forem verdadeiros Verdadeiro se apenas um lado for verdadeiro Reverte verdadeiro para falso e vice-versa
Se voc est acostumado com o C, C + + , Java e Javascript j deve ter notado que seus operadores booleanos usam smbolos diferentes. And substitudo por && Or substitudo por || e Not substitudo por ! Se o leitor no teve nenhum contato com essas linguagens, poder ter algumas dificuldades iniciais de escrever este tipo de cdigo. Por exemplo: (x>2)&&(y==9) Leia-se: x maior que 2 E y igual a 9 (x<3)||(x>8) Leia-se: x menor que 3 OU x maior que 8 if((altura>170)||(idade>18)) { // Ao... } Leia-se: se altura maior que 170 centmetros OU idade maior que 18 anos... Veja a tabela abaixo: Smbolo && || ! Smbolo &
Operao And (E) Or (Ou) Not (No) Existem os operadores binrios (semelhantes aos operadores acima), veja a tabela abaixo: Operao And lgico
16/134
20/04/13
Apostila Javascript
| ^ Iremos estudar cada um:
Or lgico Xor lgico
AND (&&) verdadeiro se ambas as entradas forem verdadeiras, veja o quadro abaixo: (a==true)&&(b==true) o resultado true (verdadeiro) (a==false)&&(b==true) o resultado false (falso) (a==true)&&(b==false) o resultado false (falso) (a==false)&&(b==false) o resultado false (falso) Por exemplo a expresso: (3 + 2==5)&&(6 + 2==8) verdadeira porque as expresses em ambos os lados de And so verdadeiras. no entanto, a expresso: (4 + 3==9)&&(3 + 3==6) falsa, porque a expresso esquerda de And falsa. Lembre-se disto quando combinar expresses com And: se qualquer expresso for falsa, toda a expresso ser falsa. OR (||) verdadeiro se qualquer uma das entradas for verdadeira, veja o quadro abaixo: (a==true)||(b==true) o resultado true (verdadeiro) (a==false)||(b==true) o resultado true (verdadeiro) (a==true)||(b==false) o resultado true (verdadeiro) (a==false)||(b==false) o resultado false (falso) Por exemplo, as expresses: (3 + 6==2)||(4 + 4==8) e (4 + 1==5)||(7 + 2==9) So ambas verdadeiras porque pelo menos uma das expresses comparada verdadeira. Observe que no segundo caso, ambas as expresses comparadas so verdadeiras, o que tambm torna verdadeira uma expresso Or. Um XOR (OU exclusivo) verdadeiro se somente uma das entradas for verdadeira e no ambas, veja o quadro abaixo: (a==true)^(b==true) o resultado false (falso) (a==false)^(b==true) o resultado true (verdadeiro) (a==true)^(b==false) o resultado true (verdadeiro) (a==false)^(b==false) o resultado false (falso) Por exemplo, a expresso: (3 + 6==2)^(4 + 4==8) verdadeira porque apenas a expresso (4 + 4=8) verdadeira. No entanto a expresso: (4 + 1==5)^(7 + 2==9) falsa, porque ambas as expresses so verdadeiras. NOT (!) Uma operao lgica booleana que inverte a entrada. Se a entrada for true, a sada false, e vice-versa, veja o quadro abaixo:
20/04/13
Apostila Javascript
!(true) o resultado false !(false) o resultado true Por exemplo, a expresso: (4 + 3==5) No verdadeira; no entanto a expresso !(4 + 3==5) verdadeira porque o operador Not reverte para verdadeiro o resultado falso da expresso (4 + 3=5). Observe esta expresso: (4 + 5==9) && !(3 + 1==3) Esta expresso verdadeira ou falsa? Se voc disse verdadeira, compreende a forma como funcionam os operadores lgicos. As expresses em ambos os lados de And so verdadeiras, ento toda a expresso verdadeira. Veja exemplos abaixo: Exemplo 1. Resulta as seguintes operaes booleanas Expresso (3>2)&&(5>4) (2>1)&&(7>8) (3>4)||(9>2) (7>7)||(4>4) (2==2)^(5==5) (4>5)^(4<5) ! true ! (9<1)||(9<1) Expresso b>a && c>b b>a && b==c b>a || b==c b>a ^ c>b ! a <> b Resultado true (verdadeiro) false (falso) true (verdadeiro) false (falso) false (falso) true (verdadeiro) false (falso) true (verdadeiro) Resultado true (verdadeiro) falso (falso) true (verdadeiro) false (falso) false (falso) Exemplo 3. Resolva a seguinte operao: (4 * (3 + 5))/2>100 || (5 * (3 + 4)/2<100) Soluo (4 * (3 + 5))/2>100 || (5 * (3 + 4)/2<100) (4 * 8)/2>100 || (5 * 7/2<100) 32/2>100 || (35/2<100) 16>100 || 17.5<100 false || false false Exemplo 2. Se a=100, b=200 e c=300, resolva:
Hierarquia dos operadores

Observe a lista de prioridades abaixo:
20/04/13
Apostila Javascript
Em 1 lugar esto as variveis . Exemplo a=4 e b=8 => c=a + b Em 2 lugar esto as propriedades do objeto. Exemplo: Nota1.value=7 e Nota2.value=5 => media= (Nota1.value + Nota2.value)/2 Em 3 lugar esto os parnteses . Exemplo: 3 * (4 + 1) * 2 Em 4 lugar esto as funes . Exemplo: raiz quadrada, seno, cosseno, tangente, logaritmos e outros. Em 5 lugar est a potenciao. Exemplo: 3^4 + 2 Em 6 lugar esto multiplicao ( * ), diviso (/), e mdulo (%), na ordem em que aparecerem da esquerda para direita. Exemplo: 7 + 4/2 * 6/3-8 Em 7 lugar esto adio ( + ) e subtrao (-), na ordem em que aparecerem da esquerda para direita. Exemplo: 5 + 4-7-8 + 3-2 + 9 Em 8 lugar esto os operadores relacionais , maior que (>), menor que (<), maior ou igual ( >= ), menor ou igual ( <= ), igual (=), diferente ( <> ) Em 9 lugar est o operador booleano NOT. Exemplo: (4>5) Or Not(3>6) Em 10 lugar esto os operadores booleanos AND, OR e XOR. Exemplo: (3<7)&&(8>7) Resumindo Nvel de prioridade Mais alta: 1 2 3 4 5 6 7 8 9 Mais baixa: 10 Operadores Variveis Propriedades do Objeto Parnteses Funes Potenciao * , /, % +,>, <, >= , <= , ==, != ! &&, || Ordem da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita da esquerda para a direita
O comando If
O comando If uma instruo de linguagem de programao que compara dois ou mais conjuntos de dados e verifica os resultados. Se o resultado for verdadeiro, as instrues que seguem o comando If sero executados; se no, as instrues que seguirem o comando Else sero executados. Veja o exemplo abaixo: Se A for verdadeiro (true) execute B Se A for falso (false) execute C Vejamos: <script language="javascript"> A=true if (A==true) { document.write("Execute B") } else { document.write("Execute C") }
20/04/13
Apostila Javascript
</script> Outro exemplo a seguir tambm um exemplo bem simples: <script language="javascript"> teste=true if (teste) { document.write("Esta linha ser impressa") } else { document.write("Esta linha no ser impressa") } </script>
Usando a clusula If
Vamos ver um exemplo: <script language="javascript"> Descontos=315 if(Descontos!=0){ document.write("Descontos deste ms: " + Descontos) } </script> O sistema s executar o comando document.write quando o valor da varivel desconto for maior que 0. Agora, ficou claro que este comando muito til para dar ao sistema uma espcie de "poder de deciso". na verdade, estamos programando o sistema para cada tipo de situao e ento o software agir conforme a necessidade de cada problema, situao ou estado do sistema naquele momento.
Usando a clusula Else

Podemos dar ao fluxo mais uma opo utilizando a clusula else. Nesse caso, o fluxo executar o bloco antes ou depois desta clusula. No exemplo anterior, podemos incrementar o cdigo com mais uma situao. <script language="javascript"> Descontos=315 if(Descontos != 0){ document.write("Descontos deste ms: " + Descontos) } else { document.write("No h descontos este ms.") } </script>
20/04/13
Apostila Javascript
Para entender melhor o exemplo troque o valor da varivel Descontos para zero e teste novamente.
Usando a clusula else if

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

Lista de exerccios Exerccio 1. Elaborar um algoritmo para receber um nmero inteiro e informar se ele par ou mpar. Nome do arquivo: pares.txt <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 {
20/04/13
Apostila Javascript
alert("mpar") } } </script> Exerccio 2. Receber a temperatura - em graus Celsius - de uma pessoa e emitir uma mensagem se ela estiver com febre. Nome do arquivo: temperatura.txt<br> <form name="frm_teste"> Temperatura: <input type="text" name="temperatura"> <input type="button" value="Resultado" onClick="Temperaturax()"> </form> <script language="javascript"> function Temperaturax(){ temperatura=parseFloat(document.frm_teste.temperatura.value) febre=37 if(temperatura >= febre){ alert("Paciente com febre") }else { alert("Paciente sem febre") } } </script> Exerccio 3. Crie um algoritmo que informa se voc do sexo masculino ou feminino Nome do arquivo: sexo.txt<br> Voc do sexo masculino? s/n?? <form name="frm_teste"> <input type="text" name="s_n" size="1" maxlength="1"> <input type="button" value="Resultado" onClick="Sexox()"> </form> <script language="javascript"> function Sexox(){ s_n=document.frm_teste.s_n.value if(s_n=="s") { alert("Voc do sexo masculino") }else { alert("Voc do sexo feminino") } } </script> Exerccio 4. Faa um programa que indique se o ano bissexto ou no. Nome do arquivo: bissexto.txt <form name="frm_teste"> Digite o ano: <input type="text" name="Ano">
20/04/13
Apostila Javascript
<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 + "no bissexto") } } </script>
Usando Operadores relacionais

< Menor que > Maior que == Igual a <= Menor ou Igual a >= Maior ou igual a != Diferente Lista de exerccios Exerccio 1. Faa um programa que indique se ele maior, menor ou igual a 100. // Nome do arquivo: maiorque100.txt<br> <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 nmero menor do que 100") }else{ alert("O nmero maior ou igual a 100") } } </script> Exerccio 2. Faa um programa que indique se ele positivo, negativo ou igual a 0. // Nome do arquivo: positivo.txt <br> <form name="frm_teste"> Nmero: <input type="text" name="n"> <input type="button" value="Resultado" onClick="positivo()">
20/04/13
Apostila Javascript
</form> <script language="javascript"> function positivo() { n=parseFloat(document.frm_teste.n.value) if (n>0) { alert("O nmero positivo") }else { alert("O nmero ou igual a 0 ou negativo") } } </script> Exerccio 3. Faa um programa que receba dois nmeros e mostre o maior. // Nome do arquivo: maior.txt <form name="frm_teste"> Digite o primeiro nmero: <input type="text" name="num1"><br> digite o segundo nmero: <input type="text" name="num2"> <input type="button" value="Resultado" onClick="maior()"> </form> <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 nmero : "+ num1) } else if(num1<num2) { alert("O maior nmero : "+ num2) }else if(num1==num2) { alert("Os nmeros so iguais") } } </script> Exerccio 4. Criar um algoritmo que receba a idade e informe se criana, 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)
20/04/13
Apostila Javascript
if (idade<13) { alert("Voc uma criana") }else if(idade<18) { alert("Voc um adolescente") }else if(idade<65) { alert("Voc um adulto") } else { alert("Voc um idoso") } } </script>
Usando operadores Booleanos

AND && (E) OR || (OU) (NO) NOT !
Lista de exerccios Exerccio 1. Faa um programa que receba trs notas de um aluno, calcule e mostre a mdia aritmtica e diga se foi aprovado, reprovado ou em recuperao. // Nome do arquivo: aprovado.txt <br> <form name="frm_teste"> Digite a primeira nota: <input type="text" name="nota1"><br> Digite a segunda nota: <input type="text" name="nota2"><br> Digite a terceira nota: <input type="text" name="nota3"> <input type="button" value="Resultado" onClick="Mediax()"> </form> <script language="javascript"> function Mediax() { nota1=parseFloat(document.frm_teste.nota1.value) nota2=parseFloat(document.frm_teste.nota2.value) nota3=parseFloat(document.frm_teste.nota3.value) media=(nota1 + nota2 + nota3)/3 alert("Mdia aritmtica: " + media) if(media >= 0 && media<5) { alert("Reprovado") } else if( media >= 5 && media<7) { alert("Em recuperao") } else if (media >= 7 && media <= 10) { alert("Aprovado") } } </script>
20/04/13
Apostila Javascript
Exerccio 2. Faa um programa que receba trs notas de um aluno, calcule e mostre a mdia aritmtica e diga se tirou nota A, B, C, D, ou E. // Nome do arquivo: nota.txt <br> <form name="frm_teste"> Digite a primeira nota: <input type="text" name="nota1"><br> Digite a segunda nota: <input type="text" name="nota2"><br> Digite a terceira nota: <input type="text" name="nota3"> <input type="button" value="Resultado" onClick="Mediax()"> </form> <script language="javascript"> function Mediax() { nota1=parseFloat(document.frm_teste.nota1.value) nota2=parseFloat(document.frm_teste.nota2.value) nota3=parseFloat(document.frm_teste.nota3.value) media=(nota1 + nota2 + nota3)/3 alert("Mdia aritmtica: " + 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> Exerccio 3. Dados trs valores A, B, C, verificar se eles formam um tringulo eqiltero, issceles ou escaleno. // nome do arquivo: triangulo.txt<br> Tringulo<br> <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)) {
20/04/13
Apostila Javascript
if(A==B && B==C) { alert("Tringulo Eqiltero") } else if(A==B || A==C || B==C) { alert("Tringulo Issceles") } else { alert("Tringulo Escaleno") } }else { alert("Estes valore no formam um tringulo") } } </script> Exerccio 4. Crie uma estrutura de deciso comparando dois alunos e informe se ele foram aprovados ou reprovados // Nome do arquivo: alunos.txt <br> <script language="javascript"> Aluno1="Aprovado" Aluno2="Reprovado" if (Aluno1=="Aprovado" && Aluno2=="Aprovado"){ document.write("Ambos esto aprovados!") } else { document.write("Um dos alunos foi reprovado") } </script>
Comando Case
Repare nesta outra construo 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("Ms invlido")} </script> Embora essa construo seja perfeitamente vlida, h uma forma mais eficiente de se obter os mesmos resultados. o comando case cujo funcionamento muito parecido com os if's aninhados:
20/04/13
Apostila Javascript
<script language="javascript"> switch (mes){ case 1: document.write("Jan"); break; case 2: document.write("Fev"); break; case 3: document.write("Mar"); break; case 4: document.write("Abr"); break; case 5: document.write("Mai"); break; case 6: document.write("Jun"); break; case 7: document.write("Jul"); break; case 8: document.write("Ago"); break; case 9: document.write("Set"); break; case 10: document.write("Out"); break; case 11: document.write("Nov"); break; case 12: document.write("Dez"); break; default: document.write("Ms invlido!") } </script> Este comando permite que vrias comparaes sejam feitas e, no final, apenas uma seja escolhida para executar um cdigo especfico da condio selecionada. Ele funciona igualmente a vrios ifs, mas agora ele testa os valores de uma mesma varivel. Vejamos um exemplo: <script language="javascript"> valor=2 switch (valor){ case 0: document.write("O valor da varivel 0"); break; case 1: document.write("O valor da varivel 1 "); break; case 2: document.write("O valor da varivel 2 "); break; case 3: document.write("O valor da varivel 3 "); break; case 4: document.write("O valor da varivel 4 ") ; break; } </script> No exemplo anterior, o comando Case testar linha a linha, em busca de um case que corresponda ao valor da varivel. Quando encontrar o valor correspondente, executar os comandos que viro logo aps este case. Em linguagens de programao tais como o C, Java, Javascript PHP, esses comandos estaro entre { }, se for mais que um. Teste o cdigo e veja como fica.
Usando o comando break

Quando precisamos executar apenas o case que corresponda ao valor da varivel, utilizaremos um comando que tem a caracterstica de para fluxos de execuo, o comando break. Caso esse no seja utilizado, todos os cases aps o case que corresponda ao valor da varivel de referncia sero executados. Utilizando o exemplo anterior, veremos como ficaria o cdigo com o uso do comando break:
28/134
20/04/13
Apostila Javascript
<script language="javascript"> valor=2; switch(valor){ case 0: document.write("O valor da varivel 0"); break; case 1: document.write("O valor da varivel 1"); break; case 2: document.write("O valor da varivel 2"); break; case 3: document.write("O valor da varivel 3"); break; case 4: document.write("O valor da varivel 4"); break; } </script> No exemplo anterior, apenas os comandos que correspondam ao case que tem o mesmo valor da varivel sero executados. Teste os exemplos anteriores, veja a diferena entre eles e descobrir que o exemplo que possui o break , nesse caso, o correto. Exemplo 1. Determine o nmero de dias durante um ms // Nome do arquivo: dias.txt <form name="frm_teste"> Digite o ms: <input type="text" name="Mes"><br> Digite o ano: <input type="text" name="Ano"> <input type="button" value="Resultado" onClick="DiasX()"> </form> <script language="javascript"> function DiasX() { Mes=parseFloat(document.frm_teste.Mes.value) Ano=parseFloat(document.frm_teste.Ano.value) NumDias=0 switch(Mes) { case 4: case 6: case 9: case 11: NumDias=30 break; case 2: if (Ano % 4 == 0) { NumDias=29 } else { NumDias=28 } break; default: NumDias=31 break;
20/04/13
Apostila Javascript
} 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.txt DataToda=new Date() DiaDaSemana=DataToda.getDay() switch(DiaDaSemana) { case 0: document.write("Domingo"); break; case 1: document.write("Segunda"); break; case 2: document.write("Tera"); break; case 3: document.write("Quarta"); break; case 4: document.write("Quinta"); break; case 5: document.write("Sexta"); break; case 6: document.write("Sbado"); break; } </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.txt DataToda=new Date() HoraAtual=DataToda.getHours() switch(HoraAtual){ case 6: case 7: case 8: case 9: case 10: case 11: document.write("Bom dia!"); break; case 12: case 13: case 14: case 15: case 16: case 17: document.write("Boa tarde!"); break; default: document.write("Boa noite!") break; } </script>
20/04/13
Apostila Javascript
Exemplo 4. Crie um programa que gerencie um caixa eletrnico // Nome do arquivo: caixa.txt <pre> Menu Principal --------------1 - Incluso 2- Alterao 3 - Excluso 4 - Relatrio 5 - Fim -------------Escolha sua opo </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("Relatrio"); break; case "5": alert("Sair"); break; default: alert("Opo invlida "); break; } } </script> Exerccio 5. Crie uma calculadora com as 4 operaes da matemtica: adio, subtrao, diviso e multiplicao. // Nome do arquivo: operacao.txt <form name="frm_teste"> Digite o primeiro nmero: <input type="text" name="A"><br> Escolha um operador + , -, * , / <input type="text" name="operador" size="1" maxlength="1"><br> Digite o segundo nmero: <input type="text" name="B"> <input type="button" value="Reslutado" onClick="calculadora()"> </form> <script language="javascript"> function calculadora() { A=parseFloat(document.frm_teste.A.value) B=parseFloat(document.frm_teste.B.value) operador=document.frm_teste.operador.value switch(operador) { case "+": alert("Resultado soma da igual a "+ (A + B)); break; case "-": alert("Resultado da subtrao igual a "+ (A - B)); break;
20/04/13
Apostila Javascript
case "*": alert("Resultado da multiplicao igual a "+ (A * B)); break; case "/": alert("Resultado da diviso igual a "+ (A / B)); break; default: alert("Caractere diferente de + , -, * , /"); break; } } </script> Exerccio 6. Crie um programa que digite um caractere e diga se ele vogal maiscula, valor numrico, operador aritmtico ou outro caractere. // Nome do programa: caracteres.txt <form name="frm_teste"> Escolha um caractere: <input type="text" name="caractere" size="1" maxlength="1"> <input type="button" value="Resultado" onClick="Caracterex()"> </form> <script language="javascript"> function Caracterex() { caractere=document.frm_teste.caractere.value switch(caractere){ case "A": case "E": case "I": case "O": case "U": alert("Vogal maiscula"); break; case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": alert("Valor numrico"); break; case "+": case "-": case "*": case "/": alert("Operador Aritmtico"); break; default: alert("Voc digitou outro caractere") break; } } </script>
32/134
20/04/13
Apostila Javascript
Operador Ternrio
Diferente da instruo IF, o operador ternrio tem este nome porque necessita de trs operandos para se avaliado. Ooperador ternrio tem a seguinte forma: condio1 ? expresso_verdadeira : espresso_falsa Para avaliar o resultado da expresso primeiro a condio1 avaliada. Caso este resultado seja verdadeiro ento resultado da expresso ser igual ao valor da expresso_verdadeira, no caso contrrio expresso_falsa avaliada e se torna o resultado. Exemplo 1: <script language="javascript"> variavel=50 resultado=(variavel >= 0)&&(variavel <= 100) ? "VERDADEIRO" : "FALSO" document.write(resultado) </script> Exemplo 2: <script language="javascript"> horas=30 minutos=45 segundos=30 horas=(horas >= 0)&&(horas <= 24) ? horas : 0 minutos=(minutos >= 0)&&(minutos <= 60) ? minutos : 0 segundos=(segundos >= 0)&&(segundos <= 60) ? segundos : 0 document.write("So " + horas + ":" + minutos + ":" + segundos) </script> Exemplo 3: <form name="frm_teste"> Digite a primeira nota: <input type="text" name="nota1"><br> Digite a segunda nota: <input type="text" name="nota2"><br> Digite a terceira nota: <input type="text" name="nota3"> <input type="button" value="Resultado" onClick="Mediax()"> </form> <script language="javascript"> function Mediax() { nota1=parseFloat(document.frm_teste.nota1.value) nota2=parseFloat(document.frm_teste.nota2.value) nota3=parseFloat(document.frm_teste.nota3.value) media=(nota1 + nota2 + nota3)/3 alert("Mdia aritmtica: " + media) resultado=(media >= 6)&&(media <= 10) ? "Aprovado" : "Reprovado" alert(resultado) } </script>
Comando For
20/04/13
Apostila Javascript
O comando FOR uma estrutura de repetio que repete uma srie de instrues um nmero especificado de vezes. Digamos que deseje imprimir seu nome na tela dez vezes, por exemplo: <script language="javascript"> 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 boto Ok ou d Enter. Quando o fizer, o programa imprimir o nome dez vezes na janela do formulrio, como mostrado a seguir: Bart Simpson Bart Simpson Bart Simpson Bart Simpson Bart Simpson Bart Simpson Bart Simpson Bart Simpson Bart Simpson Bart Simpson Ter muitas linhas em seu programa contendo instrues idnticas alonga-o alm do necessrio e desperdia memria. Tambm mostra um estilo de programao ruim. Ao menos que voc deseje que seus amigos programadores riam de voc pelas costas, aprenda a substituir cdigos de programa redundante por loops de programa. A rotina do programa anterior pode ser extremamente fcil usando-se um loop For, e aqui est como: <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 sada ser idntica quela do primeiro programa, mas agora o programa menor e sem cdigo redundante. Exerccio 1. Crie uma estrutura de repetio que conte de 1 at 10. <script language="javascript"> // Nome do arquivo: de1a10.txt for(var x=1; x<=10; x++){ document.write(x+", ")
20/04/13
Apostila Javascript
} </script> Resultado: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Exerccio 2. Crie uma estrutura de repetio que imprima os nmeros pares. <script language="javascript"> // Nome do programa: mult2.txt for(var x=0; x<=20; x=x+2){ document.write(x+", ") } </script> Resultado: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, Exerccio 3. Crie uma estrutura de repetio que imprima os nmeros mpares. <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, Exerccio 4. Crie uma estrutura de repetio que imprima os nmeros mltiplos de 5. <script language="javascript"> // Nome do programa: mult5.txt for(var x=0; x<=50; x=x+5){ document.write(x+", ") } </script> Resultado: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, Exerccio 5. Crie uma estrutura de repetio que conte de 110 at 120. <script language="javascript"> // Nome do arquivo: de110a120.txt for(var x=110; x<=120; x++){ document.write(x+", ") } </script> Resultado: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, Exerccio 6. Crie uma estrutura de repetio que conte de 40 at 80 e ao mesmo tempo imprima nmeros mltiplos de 8.
35/134
20/04/13
Apostila Javascript
<script language="javascript"> // Nome do arquivo: mult8.txt for(var x=40; x<=80; x+=8){ document.write(x+", ") } </script> Resultado: 40, 48, 56, 64, 72, 80, Exerccio 7. Crie uma estrutura de repetio que conte de 20 at 1 invertidamente. <script language="javascript"> // Nome do arquivo: inverter.txt for(var x=20; x>=1; x--){ document.write(x+", ") } </script> Resultado: 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, Exerccio 8. Crie uma estrutura de repetio que conte de -10 at + 10 (nmeros negativos e nmeros positivos) <script language="javascript"> // Nome do arquivo: negativo.txt for(var x=-10; x<=10; x++){ document.write(x+", ") } </script> Resultado: -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Exerccio 9. Crie uma estrutura de repetio que conte de -25 at -15. <script language="javascript"> // Nome do arquivo: de25a15.txt for(var x=-25; x<=-15; x++){ document.write(x+", ") } </script> Resultado: -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15, Exerccio 10. Crie um conjunto dos nmeros mltiplos de 3 usando a estrutura de repetio FOR. <script language="javascript"> // Nome do programa: mult3.txt for(var x=0; x<=30; x+=3){ document.write(x+", ") } </script>
20/04/13
Apostila Javascript
Resultado: 0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, Exerccio 11. Crie uma estrutura de repetio de 1 at 10, informando o quadrado deste nmero. <script language="javascript"> // Nome do programa: Quadrado.txt for (var N=1; N<=10; N++){ Quadrado=N * N document.write("O quadrado de " + N + " " + Quadrado+"<br>") } </script> Exerccio 12. Crie uma estrutura de repetio que imprima "Ol" dez vezes. <script language="javascript"> // Nome do programa: ola10.txt for(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 condio for verdadeira. Um exemplo muito simples o de escrever os nmeros inteiros entre 1 e 10 na tela. Para isto podemos construir um programa muito simples para esta tarefa <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 como resultado false. Para que isto ocorra, necessariamente devemos ter i>10. A cada passo o programa primeiro testa a condio e aps imprime e incrementa a varivel. Assim o programa deve gerar seqencialmente os valores 1, 2, 3... 10. Aps o valor 10 faz i=11 e volta a testar a condio. Neste caso (11 <= 10) false e o programa termina. Exerccio 1. Crie uma estrutura de repetio que conte de 1 at 10. <script language="javascript"> x=1 while(x <= 10) { document.write(x+", ") x=x + 1 }
20/04/13
Apostila Javascript
</script> Resultado: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Exerccio 2. Crie uma estrutura de repetio que imprima os nmeros pares <script language="javascript"> x=0 while(x <= 20) { document.write(x+", ") x=x + 2 } </script> Resultado: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, Exerccio 3. Crie uma estrutura de repetio que imprima os nmeros mpares. <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, Exerccio 4. Crie uma estrutura de repetio que imprima os nmeros mltiplos de 5. <script language="javascript"> x=0 while(x <= 50) { document.write(x+", ") x=x + 5 } </script> Resultado: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, Exerccio 5. Crie uma estrutura de repetio que conte de 110 at 120. <script language="javascript"> x=110 while(x <= 120) { document.write(x+", ") x=x + 1 } </script> Resultado: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120,
38/134
20/04/13
Apostila Javascript
Exerccio 6. Crie uma estrutura de repetio que conte de 40 at 80 e ao mesmo tempo imprima nmeros mltiplos de 8. <script language="javascript"> x=40 while(x <= 80) { document.write(x+", ") x=x + 8 } </script> Resultado: 40, 48, 56, 64, 72, 80, Exerccio 7. Crie uma estrutura de repetio que conte de 20 at 1 invertidamente. <script language="javascript"> x=20 while(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, Exerccio 8. Crie uma estrutura de repetio que conte de -10 at + 10 (nmeros negativos e nmeros positivos) <script language="javascript"> x=-10 while(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, Exerccio 9. Crie uma estrutura de repetio que conte de -25 at -15. <script language="javascript"> x=-25 while(x <= -15) { document.write(x+", ") x=x + 1 } </script> Resultado: -25, -24, -23, -22, -21, -20, -19, -18, -17, -16, -15, Exerccio 10. Crie um conjunto dos nmeros mltiplos de 3 usando a estrutura de repetio while.
20/04/13
Apostila Javascript
<script language="javascript"> x=0 while(x <= 30) { document.write(x+", ") x=x + 3 } </script> Resultado: 0, 3, 6, 12, 15, 18, 21, 24, 27, 30, Exerccio 11. Antes de executar um programa, crie uma mensagem informando se deseja prosseguir. <script language="javascript"> tentativas=1 while(tentativas <= 3){ resposta=prompt("Voc deseja prosseguir (s ou n)?","") if (resposta=="s"){ document.write("<br>Execute o programa.") break; } else if(resposta=="n") { document.write("<br>Fim do programa.") break; } else { document.write("<br>Opo invlida:") document.write("<br>Tente novamente.") tentativas=tentativas + 1 } } if (tentativas >= 4) { document.write("<br>vou assumir como um no") } </script>
Loops invertidos
Assim como a instruo For e a instruo while, vistos anteriormente, o loop invertido, ao contrrio do comando while, um bloco de comando que ser executado pelo menos uma vez e ser repetido at que a condio associada seja verdadeira. H situaes em que importante se garantir a execuo de uma seqncia de comandos pelo menos uma vez. Veja um exemplo simples: <script language="javascript"> mes=prompt("Digite o ms:") mes=parseFloat(mes) while(mes<1 || mes>12) { document.write("<br>Digitao errada! Digite de novo.") mes=prompt("Digite o ms:")
20/04/13
Apostila Javascript
mes=parseFloat(mes) } </script> Observe que, repetimos duas vezes o mesmo comando: "Digite o ms". Podemos simplificar este comando somente uma vez, usando a estrutura de repetio do while . do while o loop invertido de while. Usando o exemplo anterior iremos substituir o comando while pelo comando do , observe: <script language="javascript"> do { mes=prompt("Digite o ms:") mes=parseFloat(mes) if(mes<1 || mes>12){ document.write("<br>Digitao errada! Digite de novo") } } while (mes<1 || mes>12) </script> Pode-se tambm utilizar este comando para execues sucessivas de um programa. Neste caso, comum se fazer uma pergunta do tipo "Deseja continuar (s/n)?" aps cada execuo. Naturalmente, necessrio uma varivel do tipo caractere que receba a resposta do usurio e que ser utilizada para controlar a estrutura de repetio. Teramos algo como: <script language="javascript"> // ... do { / * Seqncia de comandos do programa propriamente dito * / Resp=prompt("Deseja continuar (s/n)?","") } while(Resp.toUpperCase()!="N") </script> Vale lembrar que a funo toUpperCase() retorna o argumento no formato maisculo. Observe mais um exemplo: <script language="javascript"> do { num=prompt("Digite um nmero:","") num=parseFloat(num) if (num<100) { document.write("<br>O nmero " + num + " menor do que 100") } fim=prompt("Deseja testar outro [S/N] ?","") } while (fim.toUpperCase()!="N") </script>
Loops Infinitos
Veja o exemplo abaixo: Ateno, no teste este cdigo!
20/04/13
Apostila Javascript
No teste este cdigo <script language="javascript"> Contador=0; n=0; while(Contador<=10){ document.write(n + ", ") n=n + 1 } </script> No teste este cdigo Se voc entendeu os exemplos anteriores sobre os loops, deve perceber que existe um erro nesse exemplo. Como pode ver a condio do loop while refere-se varivel contador, mas essa varivel realmente no se altera durante o loop. Isso crua um loop infinito. O loop continuar executando at que seja interrompido pelo usurio ou at gerar algum tipo de erro. Os loops infinitos nem sempre podem ser interrompidos pelo usurio, exceto fechando onavegador, em alguns casos os loops infinitos podem at impedir que onavegadorfeche ou provocar uma pane no sistema. Eles tambm podem ser difceis de serem identificados, porque este tipo de cdigo no lhe mostrar um erro dizendo que h um loop infinito. Mas no se preocupe, pois esse tipo de loop pode ser evitado, o que tem que fazer : toda vez que for criar um loop em um script, voc deve ter cuidado de certificar-se de que h uma sada. Nota: Dependendo da verso do navegador em utilizao, o loop infinito pode at mesmo fazer o navegador para de responder ao usurio. Certifique-se de fornecer uma rota de escape de loops infinitos e salvar seu script at test-lo, em qualquer eventualidade. Ocasionalmente, voc pode querer criar um loop infinito. Isso talvez inclua situaes em que voc quer que seu programa execute at o usurio interromp-lo ou em que fornece uma rota de escape com a instruobreak. Uma maneira de criar um loop infinito o seguinte: while(true) { ...} Como o valor true condicional, esse loop sempre encontrar sua condio como sendo verdadeira.
Escapando de um loop infinito utilizando a instruobreak

H uma maneira de escapar de um loop infinito. Voc pode utilizar a instruobreak(que significa parar) durante um loop para sair dele imediatamente e continuar a primeira instruo depois do loop. O exemplo abaixo mostra o uso dessa instruo. <script language="javascript"> n=0 total=0 while(true){ n=n + 1 total=total + n document.write(total+", ") if(total >= 100){ break } } </script>
20/04/13
Apostila Javascript
Embora a instruo while esteja configurada como um loop infinito, a instruo if verifica o valor correspondente. Se total maior que 100, sai do loop. Quando este tipo de cdigo encontra uma instruobreak, ele pula o resto do loop e continua o script com a primeira instruo depois da chave de fechamento no final do loop. Voc pode utiliza a instruobreakem qualquer tipo de loop, seja infinita ou no.
Comando de controle do Loop Break

O comandoBreakinterrompe o comando while ou For que est sendo executado e transfere o controle do programa para o comando seguinte aquele que encerra o loop. <script language="Javascript"> var i=0; while (i<20) { i=i+1 if (i==10) break; document.write(i + ", "); } </script> Resultado: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
Continue
A declarao continue usada quando no se quer executar nenhum dos comandos daquele ponto at o fim do bloco, mas queremos que o lao prossiga com a prxima interao. No caso do exemplo anterior, se i for 10, o lao se interrompe e o restante da matriz no ser preenchido. Em lugar disto, podemos usarcontinueque no s salta o processo de atualizao, mas salta alm do calcula que iria provocar um erro. O seguinte cdigo permite que o lao continue, mas salta todos os nmeros mpares. <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
20/04/13
Apostila Javascript
Existem dois tipos de operadores incrementais o incremento (x++ ) e o decremento (x--) O incremento (x++ ) aumenta o valor da varivel em uma unidade, o decremento (x--) diminui o valor da varivel em uma unidade, ou seja: x++ idntico a x=x + 1 x-- idntico a x=x-1 Os operadores de incremento e decremento podem ser prefixos ou ps-fixos - isto , podem ser colocados antes ( ++x) ou depois (x++); da mesma forma o decremento (--x) igual a (x--), ou seja: x++ semelhante a ++x e x-- semelhante a --x. Conclui-se da seguinte forma: x++ ou ++x idntico a x=x + 1 x-- ou --x idntico a x=x-1 Veja o exemplo abaixo: <script language="javascript"> a=2 document.write("Se a=2<br>") a++ document.write("O resultado de a++ "+ a) a=2 document.write("<br>Se a=2<br>") ++a document.write("O resultado de ++a "+ a) </script> O resultado da execuo deste pequeno script o seguinte: Se a=2 O resultado de a++ 3 Se a=2 O resultado de ++a 3 Da mesma forma so os operadores decrementais a-- e --a, s substituir + + por --; porm o resultado 1. Os operadores incrementais so muito usados em estruturas de repeties, tais como o For e o while. Exemplo: Exemplo 1: <script language="javascript"> x=1 while(x<=10){ document.write(x+", ") x++ } </script> Resultado: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Exemplo 2: <script language="javascript"> x=20 while(x >= 1){
20/04/13
Apostila Javascript
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, Ateno programadores!!! Em linguagens de programao tais como Java e o Javascript devemos ter cuidado na hora de usar operadores incrementais. Quando colocamos uma varivel e um outro operador de atribuio "=" na frente dos operadores incrementais + + e -- h uma sutil diferena: A=x++ diferente de A= ++x Imagine que varivel x seja igual a 5. Nos dois casos o resultado de A deveria ser 6 nas duas operaes. Se: Se: A=5 e: A=x++ O resultado : A=5 e: x=6 Se A=5 e: A=++x O resultado : A=6 e: x=6
Esta sutileza sinttica pode gerar pequenos erros de programao. Da mesma forma o operador decremental "--". Se: A=5 e: A=x-O resultado : A=5 e: x=4 Veja o exemplo na prtica: <script Language="Javascript"> var a=2; document.write("Incrementos <br>") document.write("a=2 <br>") document.write("a++="+ a++ + "<br>"); a=2 document.write("++a="+ ++a); </script> O resultado da execuo deste pequeno script o seguinte: a=2
Se A=5 e: A=--x O resultado : A=4 e: x=4
20/04/13
Apostila Javascript
a++=2 ++a=3
Operadores de atribuio
Operadores de atribuio (semelhante aos operadores aritmticos) so smbolos usados pelo computador + , -, * , /, para efetuar clculos matemticos. Veja tabela abaixo: Nome Adio Subtrao Multiplicao Diviso Mdulo Concatenao Veja os exemplos: Operador += -= *= /= %= += Utilizao a+=b a-=b a * =b a/=b a%=b a+=b Equivalente a a=a + b a=a-b a=a * b a=a/b a=a%b a=a+b
<script language="javascript"> // Exemplo 1: a=2 b=3 a+=b // Resultado a=5, idntico a a=a + b document.write(a+"<br>") // Exemplo 2: x=7 y=4 x-=y // Resultado x=3, idntico a x=x-y document.write(x+"<br>") // Exemplo 3: V1=8 V1*=2 // Resultado V1=16, idntico a V1=V1 * 2 document.write(V1+"<br>") // Exemplo 4: z=12 z/=3 // Resultado z=4, idntico a z=z/3 document.write(z+"<br>") // Exemplo 5: h=9 i=2 h%=i // Resultado h=1, idntico a h=h%i // Observao: O operador Mdulo retorna o resto da diviso document.write(h+"<br>") // Exemplo 6:
20/04/13
Apostila Javascript
Variavel="texto 1 " Variavel+="texto 2" // Resultado variavel="texto 1 texto 2" idntico a variavel=variavel."texto 2" document.write(Variavel+"<br>") </script>
Array
Array um conjunto de dados semelhantes (Como nmeros, letras ou strings) armazenados com o mesmo nome. Aos dados atribudo um nmero diferente no array. Quando o array tem somente uma dimenso, chamado de vetor. A maioria das linguagens de programao pode armazenar e manipular matrizes de uma ou mais dimenses. As matrizes multidimensionais so muito usados em simulao cientfica e no processamento matemtico; entretanto uma matriz pode ser apenas uma tabela de preos mantidas na memria para acesso instantneo por um programa de entrada de pedido.
Tipos de Arrays
Os arrays se dividem em dois grupos: vetores e matrizes. Vetores so arrays com uma dimenso. Matrizes so arrays com mais de uma dimenso.
Exemplos de vetores
1 - Na horizontal <script language="javascript"> sexo= Array("masculino", "feminino") numero=Array(1, 2, 3, 4, 5, 6, 7, 8, 9) vogais=Array("A", "E", "I", "O", "U") Frutas=Array("Banana", "Laranja", "Ma", "Mamo") Cursos=Array("Portugus", "Matemtica", "Fsica", "Qumica", "Biologia", "Ingls", "Geografia", "Histria") estadocivil=Array("solteiro", "casado", "divorciado", "vivo") </script> 2 - Na vertical <script language="javascript"> sexo=Array() sexo[0]="masculino" sexo[1]="feminino"
20/04/13
Apostila Javascript
numero=Array() numero[0]=0 numero[1]=1 numero[2]=2 numero[3]=3 numero[4]=4 numero[5]=5 numero[6]=6 numero[7]=7 numero[8]=8 numero[9]=9 vogais=Array() vogais[0]="A" vogais[1]="E" vogais[2]="I" vogais[3]="O" vogais[4]="U" Fruta=Array() Fruta[0]="Banana" Fruta[1]="Laranja" Fruta[2]="Ma" Fruta[3]="Mamo" Cursos=Array() Cursos[0]="Portugus" Cursos[1]="Matemtica" Cursos[2]="Fsica" Cursos[3]="Qumica" Cursos[4]="Biologia" Cursos[5]="Ingls" Cursos[6]="Geografia" Cursos[7]="Histria" estadocivil=Array() estadocivil[0]="solteiro" estadocivil[1]="casado" estadocivil[2]="divorciado" estadocivil[3]="vivo" </script>
Usando vetores
Exerccio 1. Elabore um vetor vertical que contenha os dias da semana. <script language="Javascript"> var lista= new Array(); lista[0]="Segunda"; lista[1]="Tera";
20/04/13
Apostila Javascript
lista[2]="Quarta"; lista[3]="Quinta"; lista[4]="Sexta"; lista[5]="Sbado"; lista[6]="Domingo"; document.write("Dias da semana: "); for (var x=0; x <= 6; x++ ) { document.write(lista[x] + ", "); } </script> Exerccio 2. Elabore um vetor horizontal que contenha os meses do ano. <script language="Javascript"> var mes=Array("Janeiro", "Fevereiro", "Maro", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro") document.write("Mes do ano: "); for(var x=0; x <= 11; x++ ) { document.write(mes[x] + ", ") } </script> Exerccio 3. A partir da tabela abaixo, foram criados dois vetores de 6 posies: NOME e IDADE. Nome Idade 1 Beatriz 19 2 Pedro 32 3 Cludio 23 4 Susana 27 5 Marcos 16 6 Celina 35 Com base nesta informao, diga o que ser impresso pelas instrues abaixo: <script language="javascript"> for(var i=0; i<=5; i++) { if (idade[i]<20){ document.write(Nome[i]+" ") } } </script> Soluo:
49/134
20/04/13
Apostila Javascript
<script language="javascript"> Nome=Array() idade=Array() Nome[0]="Beatriz" idade[0]=19 Nome[1]="Pedro" idade[1]=32 Nome[2]="Cludio" idade[2]=23 Nome[3]="Susana" idade[3]=27 Nome[4]="Marcos" idade[4]=16 Nome[5]="Celina" idade[5]=35 for(var i=0; i<=5; i++) { if (idade[i]<20){ document.write(Nome[i]+" ") } } </script> Exerccio 4. A tabela abaixo contm o nome de algumas ruas e o bairro onde se localizam. Rua Mena Barreto Marechal Cmara lvaro Ramos Cesrio Alvim Jos Clemente Bairro Botafogo Centro Botafogo Humait Niteri
Constana Barbosa Mier
As instrues a seguir iniciam um programa que cria os vetores RUAS e BAIRROS. Escreva um programa de forma que ele imprima o nome das ruas do bairro de Botafogo. Soluo <script language="javascript"> ruas=Array("Mena Barreto", "Constana Barbosa", "Marechal Cmara", "lvaro Ramos", "Cesrio Alvim", "Jos Clemente") bairros=Array("Botafogo", "Mier", "Centro", "Botafogo", "Humait", "Niteri") alert("Nmero total de bairros: "+bairros.length) for(var i=0; i<=bairros.length-1; i++){ document.write("Rua: " + ruas[i] + ", bairro: " + bairros[i]+"<br>"); }
20/04/13
Apostila Javascript
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> Exerccio 5. Faa um programa para imprimir o signo do zodaco correspondente a uma data qualquer (dia / ms). A tabela a seguir mostra o ltimo dia de cada ms e o signo correspondente: Mes ltimo dia Signo 01 02 03 04 05 06 07 08 09 10 11 20 19 20 20 20 20 21 22 22 22 21 Capricrnio Aqurio Peixes ries Touro Gmeos Cncer Leo Virgem Libra Escorpio
12 21 Sagitrio Importante: Armazene o horscopo em uma array. <script language="javascript"> mes=Array() dia=Array() signo=Array() mes[0]=1 dia[0]=20 signo[0]="Capricrnio" mes[1]=2 dia[1]=19 signo[1]="Aqurio" mes[2]=3 dia[2]=20 signo[2]="Peixes" mes[3]=4 dia[3]=20 signo[3]="ries" mes[4]=5
20/04/13
Apostila Javascript
dia[4]=20 signo[4]="Touro" mes[5]=6 dia[5]=20 signo[5]="Gmeos" mes[6]=7 dia[6]=21 signo[6]="Cncer" mes[7]=8 dia[7]=22 signo[7]="Leo" mes[8]=9 dia[8]=22 signo[8]="Virgem" mes[9]=10 dia[9]=22 signo[9]="Libra" mes[10]=11 dia[10]=21 signo[10]="Escorpio" mes[11]=12 dia[11]=21 signo[11]="Sagitrio" document.write("Tabela de signos:<br><br>") for(x=1; x<=11; x++){ document.write(signo[x] + " ultimo dia " + dia[x] + " / " + mes[x]+"<br>") } </script> Exerccio 6. Faa um programa que imprima na tela a seguinte tabela abaixo: ndice Planeta Luas Anos Distncia 1 2 3 4 5 6 7 8 9 <script language="javascript"> planeta=Array() luas=Array() anos=Array()
Mercrio Vnus Terra Marte Jpiter Saturno Urano Netuno Pluto
0 0 1 2 16 18 15 8 1
0.024 0.625 1 1.91 12 29.9 85.24 167.19 251.29
58 108 150 228 778 1427 2869 4498 5900
20/04/13
Apostila Javascript
distancia=Array() planeta[0]="Mercrio" luas[0]=0 anos[0]=0.24 distancia[0]=58 planeta[1]="Vnus" luas[1]=0 anos[1]=0.625 distancia[1]=108 planeta[2]="Terra" luas[2]=1 anos[2]=1 distancia[2]=150 planeta[3]="Marte" luas[3]=2 anos[3]=1.91 distancia[3]=228 document.write("Planeta luas anos distncia<br><br>") for(indice=0; indice<=3; indice++){ document.write(planeta[indice] +" "+ luas[indice] +" "+ anos[indice]+ " "+ distancia[indice]+"<br>") } </script>
Matrizes
Tente pensar no problema como uma tabela Notas Aluno01 Aluno02 Aluno03 Aluno04 Aluno05 Veja que esta tabela tem dois tipos de informao: Alunos e notas. Por exemplo a 2 nota do aluno 3, encontra-se no cruzamento entre a terceira linha com a segunda coluna, ou melhor, encontra-se no cruzamento entre a linha de ndice 2 com a coluna de ndice 1 , isto partindo do pressuposto que o ndice da primeira linha 0 e o ndice da primeira coluna tambm 0 . Podemos transformar qualquer tabela em matriz. A array multidimensional mostrado acima pode ser alocado de forma dinmica. Veja a tabela abaixo: Coluna 1 Coluna 2 Coluna 3 Linha 1 a[0][0] Linha 2 a[1][0] Linha 3 a[2][0] Linha 4 a[3][0]
Nota 1 Nota 2 Nota 3
a[0][1] a[1][1] a[2][1] a[3][1]
a[0][2] a[1][2] a[2][2] a[3][2]

53/134
20/04/13
Apostila Javascript
Existem 4 formas de transformar uma tabela em matriz, veja o exemplo: Cada aluno tem a sua nota, veja a tabela abaixo: Notas Aluno01 Aluno02 Aluno03 Aluno04 Aluno05 Nota 1 Nota 2 7 6 7 3 4 7.5 5.5 8 7.5 4.5
Existem vrias formas de transformar tabelas em matrizes. Vejamos o exemplo 01: No 1 exemplo vamos transformar uma matriz de duas colunas em 2 vetores, veja: <script language="javascript"> Nota1=Array() Nota2=Array() Nota1[0]=7 Nota2[0]=7.5 Nota1[1]=6 Nota2[1]=5.5 Nota1[2]=7 Nota2[2]=8 Nota1[3]=3 Nota2[3]=7.5 Nota1[4]=4 Nota2[4]=4.5 /* O exemplo acima no uma matriz, mas sim, dois vetores vistos na lio anterior. Podemos substituir matrizes por vetores. Do exemplo 2 em diante, os vetores so substitudos por matrizes. */ // Para saber quanto o aluno 04 tirou na 2 nota fcil: document.write(Nota2[4-1]) // Observe que o aluno 04 3 (4-1) porque as notas iniciam com 0 e no com 1 </script> Exemplo 02: Do exemplo 2 em diante transformamos a tabela em matriz. <script language="javascript"> Aluno01=0 Aluno02=1 Aluno03=2 Aluno04=3 Aluno05=4 Nota1=0 Nota2=1 // Para no dar erros eu criei 2 Arrays e no 4 Arrays diferentes Classe=Array(Array(),Array())
20/04/13
Apostila Javascript
Classe[Nota1][Aluno01]=7 Classe[Nota2][Aluno01]=7.5 Classe[Nota1][Aluno02]=6 Classe[Nota2][Aluno02]=5.5 Classe[Nota1][Aluno03]=7 Classe[Nota2][Aluno03]=8 Classe[Nota1][Aluno04]=3 Classe[Nota2][Aluno04]=7.5 Classe[Nota1][Aluno05]=4 Classe[Nota2][Aluno05]=4.5 // Para saber quanto o aluno 05 tirou na 1 nota fcil: for(var y=0; y<=4; y++){ for(var x=0; x<=1; x++){ document.write(Classe[x][y]+"<br>") } } </script> Exemplo 03: O exemplo 3 no usa as variveis Aluno01, Aluno02, Aluno03, Nota1, Nota2, em seu cdigo: <script language="javascript"> // Para no dar erros eu criei 2 Arrays e no 4 Arrays diferentes Classe=Array(Array(),Array()) Classe[0][0]=7 Classe[1][0]=7.5 Classe[0][1]=6 Classe[1][1]=5.5 Classe[0][2]=7 Classe[1][2]=8 Classe[0][3]=3 Classe[1][3]=7.5 Classe[0][4]=4 Classe[1][4]=4.5 // Para saber quanto o aluno 02 tirou na 2 nota fcil: for(var y=0; y<=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(
20/04/13
Apostila Javascript
Array(7, 7.5), Array(6, 5.5), Array(7, 8), Array(3, 7.5), Array(4, 4.5) ) // Para saber quanto o aluno 03 tirou na 1 prova fcil: for(var y=0; y<=4; y++){ for(var x=0; x<=1; x++){ document.write(Classe[y][x]+"<br>") } } </script> Lista de exerccio: Exerccio 1. A partir da tabela abaixo, foram criados dois vetores de 6 posies: NOME e IDADE. Nome Idade 1 Beatriz 19 2 Pedro 32 3 Cludio 23 4 Susana 27 5 Marcos 16 6 Celina 35 Com base nesta informao, diga o que ser impresso pelas instrues abaixo: <script language="javascript"> for(var i=0; i<=5; i++) { if (idade[i]<20){ document.write(Nome[i]+" ") } } </script> Soluo 1: <script language="javascript"> Nome=Array() idade=Array() Nome[0]="Beatriz" idade[0]=19 Nome[1]="Pedro" idade[1]=32 Nome[2]="Cludio" idade[2]=23
20/04/13
Apostila Javascript
Nome[3]="Susana" idade[3]=27 Nome[4]="Marcos" idade[4]=16 Nome[5]="Celina" idade[5]=35 for(var i=0; i<=5; i++) { if (idade[i]<20){ document.write(Nome[i]+" ") } } </script> Soluo 2: <script language="javascript"> nome=0 idade=1 Matriz=Array(Array(),Array()) Matriz[nome][0]="Beatriz" Matriz[idade][0]=19 Matriz[nome][1]="Pedro" Matriz[idade][1]=32 Matriz[nome][2]="Cludio" Matriz[idade][2]=23 Matriz[nome][3]="Susana" Matriz[idade][3]=27 Matriz[nome][4]="Marcos" Matriz[idade][4]=16 Matriz[nome][5]="Celina" Matriz[idade][5]=35 for(var i=0; i<=5; i++){ if (Matriz[idade][i]<20){ document.write(Matriz[nome][i]+" ") } } </script> Soluo 3: <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]="Cludio"
20/04/13
Apostila Javascript
Matriz[1][2]=23 Matriz[0][3]="Susana" Matriz[1][3]=27 Matriz[0][4]="Marcos" Matriz[1][4]=16 Matriz[0][5]="Celina" Matriz[1][5]=35 for(var i=0; i<=5; i++){ if(Matriz[1][i]<20){ document.write(Matriz[0][i]+" ") } } </script> Soluo 4: <script language="javascript"> Matriz=Array( Array("Beatriz", 19), Array("Pedro", 32), Array("Cludio", 23), Array("Susana", 16), Array("Marcos", 16), Array("Celina", 35) ) for(var i=0;i<=5;i++){ if(Matriz[i][1]<20){ document.write(Matriz[i][0]+" ") } } </script> Exerccio 2. A tabela abaixo contm o nome de algumas ruas e o bairro onde se localizam. Rua Mena Barreto Marechal Cmara lvaro Ramos Cesrio Alvim Bairro Botafogo Centro Botafogo Humait
Constana Barbosa Mier
Jos Clemente Niteri As instrues a seguir iniciam um programa que cria os vetores RUAS e BAIRROS. Escreva um programa de forma que ele imprima o nome das ruas do bairro de Botafogo. Soluo <script language="javascript"> Criamatriz=Array(Array(),Array())
20/04/13
Apostila Javascript
Criamatriz[0][0]="Mena Barreto" Criamatriz[1][0]="Botafogo" Criamatriz[0][1]="Constana Barbosa" Criamatriz[1][1]="Mier" Criamatriz[0][2]="Marechal Cmara " Criamatriz[1][2]="Centro" Criamatriz[0][3]="lvaro Ramos " Criamatriz[1][3]="Botafogo" Criamatriz[0][4]="Cesrio Alvim " Criamatriz[1][4]="Humait" Criamatriz[0][5]="Jos Clemente " Criamatriz[1][5]="Niteri" for(var i=0; i<=5; i++){ document.write("Rua: " + Criamatriz[0][i] + ", bairro: " + Criamatriz[1][i]+"<br>") } document.write("<br>Ruas do bairro de Botafogo<br><br>") for(var i=0; i<=5; i++){ if (Criamatriz[1][i]=="Botafogo") { document.write("Nome da Rua: " + Criamatriz[0][i]) document.write("Nome do bairro: " + Criamatriz[1][i]+"<br>") } } </script> Exerccio 5. Faa um programa para imprimir o signo do zodaco correspondente a uma data qualquer (dia / ms). A tabela a seguir mostra o ltimo dia de cada ms e o signo correspondente: Mes ltimo dia Signo 01 02 03 04 05 06 07 08 09 10 11 20 19 20 20 20 20 21 22 22 22 21 Capricrnio Aqurio Peixes ries Touro Gmeos Cncer Leo Virgem Libra Escorpio
12 21 Sagitrio Importante: Armazene o horscopo em uma array. <script language="javascript">

20/04/13
Apostila Javascript
// {mes, dia, signo} SuperArray=Array( Array(1, 20, "Capricrnio"), Array(2, 19, "Aqurio"), Array(3, 20, "Peixes"), Array(4, 20, "ries"), Array(5, 20, "Touro"), Array(6, 20, "Gmeos"), Array(7, 21, "Cncer"), Array(8, 22, "Leo"), Array(9, 22, "Virgem"), Array(10, 22, "Libra"), Array(11, 21, "Escorpio"), Array(12, 21, "Sagitrio") ) mes=0 dia=1 signos=2 document.write("Tabela de signos<br><br>") for(var x=0; x<=11; x++) { document.write(SuperArray[x][signos] + " ltimo dia " + SuperArray[x][dia] + " / " + SuperArray[x][mes]+" <br>") } </script> Exerccio 6. Faa um programa que imprima na tela a seguinte tabela abaixo: ndice Planeta Luas Anos Distncia 1 2 3 4 5 6 7 8 9 Mercrio Vnus Terra Marte Jpiter Saturno Urano Netuno Pluto 0 0 1 2 16 18 15 8 1 0.024 0.625 1 1.91 12 29.9 85.24 167.19 251.29 58 108 150 228 778 1427 2869 4498 5900
<script language="javascript"> Matriz=Array(Array(),Array(),Array(),Array()) Planeta=0 luas=1 anos=2 distancia=3
60/134
20/04/13
Apostila Javascript
Matriz[Planeta][0]="Mercrio" Matriz[luas][0]=0 Matriz[anos][0]=0.24 Matriz[distancia][0]=58 Matriz[Planeta][1]="Vnus" Matriz[luas][1]=0 Matriz[anos][1]=0.625 Matriz[distancia][1]=108 Matriz[Planeta][2]="Terra" Matriz[luas][2]=1 Matriz[anos][2]=1 Matriz[distancia][2]=150 Matriz[Planeta][3]="Marte" Matriz[luas][3]=2 Matriz[anos][3]=1.91 Matriz[distancia][3]=228 document.write("Planeta luas anos distncia<br><br>") for(var indice=0; indice<=3; indice++){ document.write(Matriz[Planeta][indice]+ " "+ Matriz[luas][indice]+ " "+ Matriz[anos][indice]+ " "+ Matriz[distancia][indice]+"<br>") } </script>
Criando funes
Funo um subprograma de linguagem de computador que faz alguns clculos e retorna um nico valor para o programa principal. Exemplo: <script language="javascript"> // Funes function Calcule(a, b, c){ d=a * b/c return d } // Programa document.write(Calcule(4, 3, 2)) // Resultado 6 </script> O comando return uma instruo que encerra o processamento de uma funo e transfere o controle de volta ao mdulo que o chamou, e (opcionalmente) especifica o valor da funo. A funo acima retornou o valor que 6. Uma funo pode retornar ou no poder retornar valores, basta no usar a instruo return. Exemplo: <script language="javascript">
20/04/13
Apostila Javascript
// Funes function Calcule(a, b, c){ document.write(a * b/c) } // Programa principal Calcule(4, 3, 2) </script> O exemplo acima a funo no retornou valores. Em um nico programa pode ser armazenado vrias funes diferentes, por exemplo: <script language="javascript"> // Funes function Adicao(a, b){ c=a + b return c } function Subtracao(a, b) { return a-b } function Multiplicacao(a, b) { c=a * b return c } function Divisao(a, b){ return a/b } // Programa principal document.write("2 + 8=" + Adicao(2, 8)+"<br>") document.write("7-3=" + Subtracao(7, 3)+"<br>") document.write("3 * 4=" + Multiplicacao(3,4)+"<br>") document.write("8/2=" + Divisao(8, 2)+"<br>") </script>
Lista de exerccios Exerccio 1. Crie uma funo que calcule a soma de dois nmeros <script language="javascript"> function soma(x, y) { var sum=x + y return sum } //Programa principal
20/04/13
Apostila Javascript
document.write("A soma de 5 e 4 " + soma(5, 4)) </script> Exerccio 2. Crie uma funo que calcule o cubo de um nmero. <script language="Javascript"> function cubo(x){ var cubo cubo=x * x * x return cubo } // Programa principal document.write("O cubo de 8 igual a " + cubo(8)) </script> Exerccio 3. Crie uma funo que calcule a rea do retngulo <script language="javascript"> function calcArea(largura, altura){ a=largura * altura return a } // Programa principal largura=4 altura=8 document.write(calcArea(largura, altura)) </script> Exerccio 4. Crie uma funo que calcule nmeros fatoriais <script language="javascript"> function fatorial(num){ res=1 for(var k=num; k>=1; k--){ res=res * k } return res } // Programa principal for(var k=1; k<=10; k++){ document.write(k, "!=",fatorial(k)+"<br>") } </script>
63/134
20/04/13
Apostila Javascript
Variveis nulas (NULL)

Afinal o que Null? 1 - Null um valor que indica dados ausentes ou desconhecidos em um campo 2 - nulo 3 - vazio 4 - sem valor Assim como existe variveis numricas (var_1=9), variveis strings (var_2="Texto") e variveis booleanas (var_3=true) existem as variveis nulas (var_4=null). Ateno: encontrar variveis nulas num cdigo fonte so raros, mas de vez enquanto aparecem, os exemplos abaixo so simplesmente demonstraes. Quando voc que limpar uma varivel em fao o seguinte: 1 exemplo: <script language="javascript"> Var_1=9 Var_2="Texto" Var_3=true //Limpando as variveis Var_1=null Var_2=null Var_3=null </script> 2 exemplo: <script language="javascript"> Nome=null Sobrenome=null if(Nome==null) { Nome="Marcos" } if(Sobrenome==null){ Sobrenome="Aurelio" } document.write(Nome + " " + Sobrenome) </script> 3 exemplo: <script language="javascript"> a=10
20/04/13
Apostila Javascript
b=null c=5 resp=0 if(a==null){ resp=b + c } else if(b==null) { resp=a + c } else if(c==null) { resp=a + b } else { resp=a + b + c } document.write(resp) </script>
Trabalhando com formulrios

Formulrio um documento estruturado com espao reservado para a entrada de informaes e, em geral, contendo alguns cdigos especiais. Em algumas aplicaes (especialmente banco de dados), formulrio uma caixa ou janela ou outro elemento de apresentao independente com reas predefinidas para a entrada ou a alterao de informaes. Um formulrio um "filtro" visual para os dados bsicos que esto sendo apresentados, em geral oferecendo as vantagens de uma melhor organizao de dados e maior facilidade de visualizao. Quem utiliza os formulrios so as seguintes linguagens de programao: Visual Basic, Delphi, Java, Html, Javascript e outros. Outras linguagens de programao antigas que usam o sistema Dos tais como Pascal, Clipper e outros no usam formulrios. Se ns fizermos uma comparao entre as linguagens de programao mais usadas encontraremos os seguintes objetos. 1) Formulrio 2) Boto de comando 2.a) Boto fechar: 2.b) Boto limpar: 3) Caixa de texto:
4) Rtulo (Label):
5) Senha (Password):
65/134
20/04/13
Apostila Javascript
6) rea de texto:
7) Boto de opo:
8) Caixa de seleo:
9) Caixa de combos:
10) Caixa de listagem
11) Caixas de dilogo
12) Hiperlinks
13) Imagens
14) Barra de menu

20/04/13
Apostila Javascript
15) Abrindo uma nova janela
Iremos estudar cada um com mais detalhes: 1) Formulrio: Para sistamas via web tais como: o Html, o Javascript e o vbscript. Para criar um formulrio, voc utiliza a tag <FORM>. Assim como as tabelas, que usam o comando <TABLE> </TABLE>, o formulrio usa o comando <FORM> ... </FORM> para definir a abertura e o fechamento do mesmo. A forma geral do comando a seguinte: <form action="http://www.servidor.com.br/bancodedados.php" method="post"> ... </form> Seus parmetros so: Parmetros Definio method action Esse parmetro especifica o metodo que ser usado para enviar o formulrio, usa os parmetros get e post.
O parmetro action especifica a URL que ser processado. A tag <FORM> usa dois parmetros action e method, veja abaixo: METHOD o parmetro que define o metodo de envio de formulrio para o servidor onde est hospedado seu site. O parmetro method s pode ter dois valores: "get" e "post"; mas o method="post" o mais usado, acostume a utilizar o post. ACTION o parmetro que define o endereo (www.servidor.com.br) e a pgina (bancodedados.php) onde os dados do formulrio sero enviados. Para enviar os dados do formulrio para o nosso servidor utilizamos o boto Submit: <input type="submit" value="Enviar"> Que iremos ver logo em seguida. Observao: o boto enviar, o boto upload e o boto limpar s existem em Html, Javascript, PHP e ASP. a) Boto Enviar (Submit) Para enviarmos os dados do formulrio para o servidor onde est o banco de dados, devemos criar o boto Submit.
20/04/13
Apostila Javascript
<input type="submit" value="Enviar"> b) Boto Limpar (Reset) Se voc inserir novas informaes para os campos do formulrio, ter de apagar e digitar o texto nos campos de digitao. Por meio do boto Limpar tudo, voc pode apagar e restabelecer o valor padro para todos os campos do formulrio de uma nica vez. Veja o comando limpar abaixo: <input type="reset" value="Limpar"> Veja o exemplo com os comandos enviar (Submit) e apagar (Reset) dentro de um formulrio: <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 arquivos Se voc quizer enviar a sua foto para o seu lbum de fotografia, este comando prprio para isto. Este comando envia para o servidor qualquer tipo de arquivo. Sintaxe: <input type="file" name="nome_do_comando"> Seus parmetros so: Parmetros Definio name Define o nome deste comando Clicando no boto voc abre uma janela e nesta janela voc anexa seu arquivo na pgina de seu navegador. No campo ao lado do boto est o caminho do arquivo dentro de seu computador, exemplo: c:\Pasta1\Histria\Feudalismo.doc Exemplo: <Form Action="http:\\www.meuservidor.com\arquivo.php" method="post"> <center> Envie sua foto aqui:<br> <input type="file" name="foto"><br> <input type="submit" value="Enviar"> </center> </form> 2) Boto de comando Se no quero enviar os dados do formulrio para o servidor mas que os dados fiquem no navegador usamos o boto de comando (button), veja: <input type="button" value="clique aqui" onclick="funcao()"> Seus parmetros so: Parmetros Definio name value onclick Define o nome do boto de comando Imprime um texto no boto Executa uma funo quando o usurio der um clique no boto O boto de comando, que tambm um campo input e usa trs parmetros (type, value e onclick), usa
68/134
20/04/13
Apostila Javascript
tambm a linguagem Javascript. Para inserir um boto de comando use o parmetro input type="button", seguido do valor VALUE que em nosso caso value="Clique aqui!" pode ser alterado por um outro valor. O evento onclick envia os dados do formulrio para a linguagem Javascript. Veja um exemplo prtico. <html> <head> <title> Exemplo </title> </head> <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 funo meu nome posteriormente. 3) Caixa de texto Este o comando mais usado para digitao de um campo de texto: <input type="text" name="nome_do_campo" value="Digite seu texto"> Seus parmetros so: Parmetros Definio name value size Define o nome da caixa de texto Escreve um valor na caixa de text Define o tamanho da caixa de texto 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>
maxlength Permite um limite de digitao de n caracteres
20/04/13
Apostila Javascript
 Campo 4: <input type="text" name="campo3" value="Isto um texto">  </form> Resultado
4) Senha (password) Esse comando idntico ao comando caixa de texto. Sua nica diferena que, no lugar dos caracteres digitados aparecem asteriscos. Como o prprio nome indica, ele ideal para a visualizao do texto que est sendo digitados. Seus parmetros so: Parmetros Definio name size Define o nome do password Define o tamanho do password
maxlength Permite um limite de digitao 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 no so apresentados no formulrio. Eles ficam invisveis na apresentao do navegador. Se algum decidir consultar o cdigo fonte Html da sua pgina este campo sero apresentados. Seus parmetros so: Parmetros Definio name value Define o nome do texto oculto Valor do texto oculto Exemplo: <input type="hidden" name="personagem" value="Bob Esponja Cala Quadrada"> 6) rea de texto (Textarea)
20/04/13
Apostila Javascript
Define uma caixa de digitao onde o usurio pode digitar livremente um texto com vrias linhas. <textarea name="nome" rows="num_lin" cols="num_col"> [texto padro] </textarea> Seus parmetros so: Parmetros Definio name rows cols Define o nome da rea de texto. Especifica a altura, ou seja, a quantidade de linhas que a caixa deve ter. 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 comentrios </textarea> </form> Resultado:
Cdigo fonte: Coloque um limite de digitao 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>
20/04/13
Apostila Javascript
<p>Caracteres restantes: <span id="charCount">2048</span></p> </body> </html> Resultado:
7) Boto de opo (Radio):
Os botes de opo indicam uma lista de tens, dos quais apenas um pode ser escolhido. Se um dos botes de opo for selecionado, todos os demais sero desativados. Seus parmetros so: Parmetros name value checked 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: Definio Define o nome do boto Valor do boto de opo Esse parmetro indica que o tem est pr-selecionado
72/134
20/04/13
Apostila Javascript
8) Caixa de seleo (checkbox)
A caixa de seleo parece com o boto de opo, vista anteriormente, mas tem uma diferena inportante. As caixas de seleo permitem a seleo de vrios tens de uma lista. Cada caixa de verificao pode estar ativada o desativada (o padro desativado). Seus parmetros so: Parmetros Definio name value checked Define o nome do boto valor do boto Esse parmetro 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">Itlico<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 usurio pode selecionar um conjunto pr-determinado de tens. Sua sintaxe diferente do campo <input type="objeto"> descrito anteriormente, veja: <select name="nome_do_seletor"> <option [selected]> Opo da seleo <option> Selees adicionais </select> Seus parmetros so: Parmetros Definio name option select value Define o nome desta caixa de combos Define uma lista de palavras que sero selecionadas numa lista de opes Este parmetro indica que o tem est pr-selecionado Valor do tem selecionado
73/134
20/04/13
Apostila Javascript
Exemplo: Estado onde mora<br> <select name="estado"> <option selected>Rio de Janeiro <option>So Paulo <option>Minas Gerais <option>Espirito Santo <option>Nenhuma das anteriores </select> </form> Resultado:
10) Caixa de listagem (Select)
A caixa de listagem semelhante a caixa de combos. Este comando exibe uma lista de tens que podem ser selecionados pelo usurio. Tem a mesma sintaxe da caixa de combos, s aparece quando o parmetro SIZE for especificado. Seus parmetros so: Parmetros Definio name size option select value multiple Define o nome da caixa de listagem Parmetro que designa o nmero de escolhas a mostrar. Se no for preenchido, os tems surgem como caixa de combos, caso contrrio, surgem dentro da caixa de listagem com o nmero de elementos visveis colocado em size. Define uma lista de palavras que sero selecionadas numa lista de opo. Este parmetro indica que o tem est pr-selecionado valor do tem selecionado Esse parmetro opcional indica que podem ser escolhidos mltiplos tens da lista Exemplo
<form> Instrumento musical:<br> <select name="instrumento" size="5" multiple> <option selected>Violo <option>Guitarra <option>Baixo <option>Teclado
20/04/13
Apostila Javascript
<option>Bateria <option>Sax </select> </form> Resultado:
Obs: para selecionar dois ou mais itens da lista pressione shift ou ctrl e selecione o item com o mouse. O parmetro value: Tanto a caixa de combos quanto a caixa de listagem, eu posso usar ou omitir o parmetro 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 dilogos:
Caixa de dilogo uma janela que um programa abre na tela para solicitar algum tipo de reposta do usurio. So 3 tipos de caisas de dilogos: a) Caixa para aletar (alert) b) Caixa para escrever (prompt) c) Caixa para confirmar (confirm) Todas estas caixas esto contidos na linguagem Javascript. 11. a) Caixa para aletar (alert)
75/134
20/04/13
Apostila Javascript
Este tipo de caixa avisa ao usurio se alguma coisa est dando errado, para depois o mesmo consertar. Sua sintaxe : alert("texto a ser exibido") Exemplo: <script language="javascript"> alert("Bom dia!") </script> 11.b) Caixa para escrever (prompt)
Esta caixa insere algum texto dentro da pgina html. Sua sintaxe : Sada_de_texto=prompt("Texto a ser exibido","Texto a ser escrito") Exemplo: <script language="javascript"> 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 este procedimento. A caixa para confirmar retorna os valores true (confirmado) ou false (no confirmado). Sua sintaxe : Verdadeir_ou_falso=confirm("Pergunta a ser feita.");
76/134
20/04/13
Apostila Javascript
Exemplo: <script language="javascript"> if(confirm("Tem certeza de excluir o arquivo?")) document.write("Documento excludo"); else document.write("Documento no foi excludo"); </script> Ateno: Podemos usar outros tens do Html e transform-los em tens do formulrio, tais como: Alterando a imagem atravs de um boto; Transformando um link em um boto de comando e Criar uma barra de menu dentro da pgina html. Isto material a mais para vocs estudarem. 12) Hiperlinks
Nas pginas web, um hiperlink um boto ou trecho destacado do texto que, ao ser selecionado, remete o leitor a uma outra pgina. Veja um exemplo de link: <a href="pagina1.html">Pgina 1</a> Podemos transformar um hiperlink em um boto de comando Javascript. Basta inserir dentro do atributo href o comando - "javascript:" + (mais) o comando de execuo, exemplo: <a href="javascript: mensagem('texto');">Boto de comando</a> Veja um exemplo de boto usando um link: <html> <head> <title> Exemplo 1</title> <script language="javascript"> <!-function mensagem(texto) { alert(texto); } --> </script> </head> <body> <p> <a href="javascript: mensagem('Testando boto 1');">Boto 1</a></p> <p> <a href="javascript: mensagem('Oi!');">Boto 2</a></p> <p> <a href="javascript: mensagem('testando imagem');"><img src="imagem1.jpg"></a></p> </body> </html> 13) Imagens
77/134
20/04/13
Apostila Javascript
Imagem a representao grfica ou fotogrfica de pessoas ou objetos, com um conjunto de valores de brilho e cor em pixel, armazenadas num arquivo bitmap. Observao: Tambm podemos usar o evento onclick em substituio ao href="javascript:", a diferena que onclick no usa a esteno "javascript:" em seu atributo, ex: <a href="#" onclick="mensagem('texto');"> Para inserir uma imagem s colocar este comando: <img src="imagem1.jpg"> Onde o parmetro src o caminho onde est a imagem no computador ou servidor. No Javascript, o objeto imagem usa os seguintes eventos: Eventos Descrio onmouseover Executa um comando quando passamos o mouse sobre o objeto selecionado. onmouseout Executa um comando quando o mouse est fora do objeto selecionado. Exemplo: Observemos esta imagem:
Quando passamos o mouse sobre esta imagem, ela se altera, veja:
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:

20/04/13
Apostila Javascript
A barra de menu uma faixa retangular apresentada em geral na parte superior da janela de um programa aplicativo, ou a esquerda numa pgina web, na qual o usurio pode selecionar um entre os vrios menus disponveis. Os nomes dos menus disponveis so apresentados na barra de menus. A seleo de um desses nomes com o teclado ou o mouse faz com que a lista de opes do menu correspondente seja mostrada na tela. 15) Abrindo uma nova Janela:
Para a web, essas janelas so chamadas de Pop-up ou janela instantnea; estas janelas podem ser exibidas a qualquer momento na tela. Existem quatro tipos de pop-up: Pop-up externo; Pop-up interno; Frames e Janela Modal .
Pop-up externo
Este tipo de pop-up fica externamente ao navegador, muitos usurios acham estas janelinhas chatas de fechar e muitos navegadores bloqueiam estas janelas. Eles so escritos em Javascript. Open(): O mtodo open [abrir], que no deve ser confundido com o mtido document.open(), usado para abrir uma nova janela. Os argumentos padro que este mtodo assume so: msgWindow=window.open("", "Hello", "toolbar=no, width=200, height=100"); Observe o uso da cadeia "toolbar=no, width=200, height=100" para definir os parmetos da janela. Estes parmetros podem ser definidos somente na abertura de novas janelas e no afeta a janela pai, ou a janela mais alta. A lista completa de argumentos de propriedades vlidos : toolbar = yes|no location = yes|no diretories = yes|no status = yes|no menubar = yes|no scrollbar = yes|no resizable = yes|no [Barra de ferramentas] [Localizao] [Diretrios] [Status] [Barra de menus] [Barra de rolagem] [Tamanho altervel]
79/134
20/04/13
Apostila Javascript
windth= pixels height = pixels left = pixels
[Largura em pixels] [altura em 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> Observao: No exemplo acima eu posso transformar num pequeno editor html com a ajuda do argumento: msgWindow.document.write("<h1>Texto em Html</h1>"); Onde: "<h1>Texto em Html</h1>" o texto onde a janela pai insere dados para a janela filho. Veja o exemplo: <html> <head> <title> Editor simples de HTML </title> </head> <script language="JavaScript"> function verpagina(form1) { ver = window.open("", "ver")
20/04/13
Apostila Javascript
ver.document.open() // ver.document.write(document.forms[0].elements[0].value) ver.document.write(form1.texto.value) ver.document.write("<br>") ver.document.close() } </script> <body bgcolor="#EEEEEE" text="#000000"> <form action="" method="post" name="form1"> <textarea cols=45 rows=13 name="texto"> Insira o texto aqui </textarea> <br> <br> <input type="button" value="Visualizar" onClick="verpagina(this.form)"> <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"> <!-function openwin(url){ awindow=window.open(url, "Publicidade", "width=300, height=400, toolbar=no, status=no, scroll=yes, resize=no, menubar=no, left=150, top=100"); } // --> </script> </head> <body> <p> <a href="javascript: openwin('empresax.html');">Empresa x</a></p> <p> <a href="javascript: openwin('empresay.html');">Empresa y</a></p> </body> </html>
Pop-up interno
Este tipo de pop-up fica internamente ao navegador, muitos browsers no bloqueiam este tipo de janela. Ele escrito parte em CSS e parte em Dhtml. Veja exemplo: <html>
20/04/13
Apostila Javascript
<head> <title>Pop-up no bloquevel</title> </head> <style type="text/css"> #popup { position: absolute; top: 30%; left: 30%; width: 300px; height: 150px; padding: 20px 20px 20px; border-width: 2px; border-style: solid; background: #ffffa0; display: none; } </style> <body onload="javascript: abrir()"> <script language="javascript" type=""> function fechar() { document.getElementById('popup').style.display='none'; } function abrir() { document.getElementById('popup').style.display='block'; setTimeout("fechar()",3000); } </script> <DIV id="popup" class="popup"> <p> Esse e um exemplo de popup utilizando DIV. Dessa maneira esse pop-up no ser bloqueado. </p> <p> <small><a href="javascript: fechar();">[X]</a> </small> </p> </div> <br> <a href="javascript: abrir();">Abrir POPUP</a> <br> <a href="javascript: fechar();">Fechar POPUP</a> </body> </html> Outra forma de usar o CSS junto com o Dhtml aparecer e desaparecer texto, veja o cdigo: <html> <head> <title>Aparecer e desaparecer texto</title> </head> <script language="javascript" type="text/javascript"> <!-function aparecer() { if(identificado.style.display=='none') { identificado.style.display='';
20/04/13
Apostila Javascript
} else { identificado.style.display='none'; }; } --> </script> <body> <a href="javascript:;" onClick="aparecer();">APARECER</a> <div id="identificado" style="display: none"> <p>Texto includo pelo boto</p> <p>Texto includo pelo boto</p> <p>Texto includo pelo boto</p> <p>Texto includo pelo boto</p> <p>Texto includo pelo boto</p> </div> <p>Texto fora da tag DIV</p> </body> </html>
Frames
Para j, vou apresentar as frames. Utilisar as frames permite a diviso de janelas afixando a pgina HTML em vrias partes independentes ums dos outros. Pode-se assim caregar diferentes pginas em cada parte. Para a sintaxe Html das frames, recomendo o tutorial de HTML Em Javascript, interessa a capacidade das frames interagir. Ou seja a capacidade de trocar informaes entre elas. A filosofia do Html quer que cada pgina que compe um site seja uma entidade independente. Neste esquemas a pgina principal contem duas frames, em que podemos trocar informaes entre as frames mantendo sempre a mesma pgina: <=>
Propriedades PROPRIEDADES DESCRIO length parent Devolve o nmero de frames subordinadas na pgina principal (pgina que contem todas as frames). Sinnimo para a pgina principal.
Troca de informao entre frames Com o exemplo seguinte, vamos transferir dados introduzidos pelo utilizador de uma frame, para outra frame.
20/04/13
Apostila Javascript
A pgina principal das frames <HTML> <HEAD> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME SRC="subordinada01.htm" name="subordinada01"> <FRAME SRC="subordinada02.htm" name="subordinada02"> </FRAMESET> </HTML> A pgina principal contm duas frames subordinadas "subordinada01" e "subordinada02". A frame subordinada01.htm <HTML> <BODY> <FORM name="form1"> <INPUT TYPE="TEXT" NAME="en" value=" "> </FORM> </BODY> </HTML> A frame subordinada02.htm <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> <!-function affi(form) { parent.subordinada01.document.form1.en.value=document.form2.out.value } // --> </SCRIPT> </HEAD> <BODY> Escreve um valor e clica em "Enviar". <FORM NAME="form2" > <INPUT TYPE="TEXT" NAME="out"> <INPUT TYPE="button" VALUE="Enviar" onClick="affi(this.form)"> </FORM> </BODY> </HTML> Os dados introduzido pelo utilizador encontra-se pelo caminho document.form2.out.value . Transfere-se estes dados na zona de texto da outra frame. Para isso, temos de especificar o caminho completo. Primeiro a zona de texto encontra-se na frame subordinada chamada subordinada01. Ento o caminho comea por parent.subordinada01. Nesta frame encontra-se um documento que contm um formulrio (form1) que contm por sua vez uma zona de texto (en), que tem como propriedade value. o que faz, que o caminho seja document.form1.en.value . E a expresso completa ser: parent.subordinada01.document.form1.en.value=document.form2.out.value
20/04/13
Apostila Javascript
Resultado:
Comunicao da janela modal

Eis um exemplo de mtodo JavaScript para abertura de janela modal para funcionar nos dois navegadores. dialogHeight: valor em px dialogLeft: valor em px dialogTop: valor em px dialogWidth: valor em px center: (yes | no | 1 | 0 | on | off) dialogHide: (yes | no | 1 | 0 | on | off) edge: (sunken | raised) help: (yes | no | 1 | 0 | on | off) resizable: (yes | no | 1 | 0 | on | off) scroll: (yes | no | 1 | 0 | on | off) status: (yes | no | 1 | 0 | on | off) unadorned: (yes | no | 1 | 0 | on | off) Arquivo: pagina1.html <html> <head> <title>Exemplo de Janela Modal</title> <script language="javascript">
20/04/13
Apostila Javascript
function AbreModal(url) { window.showModalDialog(url,window,"dialogWidth:300px;dialogHeight:200px;"); } </script> </head> <body> <b>Exemplo de Janela Modal</b> <form name="formTexto"> Informe um texto: <input type="text" name="txtTexto"> <input type="button" value="Procurar..." onClick="AbreModal('pagina2.htm')"> </form> </body> </html> Arquivo: pagina2.html <html> <head> <title>Exemplo de Janela Modal</title> <script language="javascript"> function EscreveValor() { if(window.navigator.appName!="Netscape"){ // Para Internet Explore var vFormPai = window.dialogArguments; vFormPai.formTexto.txtTexto.value = document.formValor.txtValor.value; } else { // Para Netscape window.opener.document.formTexto.txtTexto.value = document.formValor.txtValor.value; } self.close(); } </script> </head> <body> <b>Exemplo de Janela Modal</b> <form name="formValor"> Informe um valor: <input type="text" name="txtValor"><br> <input type="button" value="Enviar valor e fechar" onClick="EscreveValor()"> </form>
20/04/13
Apostila Javascript
</body> </html> Exemplo:
Eventos do formulrio
Evento qualquer ao ou ocorrncia, em geral provocada pelo usurio, qual o programa possa responder. Por exemplo: o precionamento de uma tela ou a movimentao do mouse. Se um usurio d um clique no boto do mouse, este evento (de clicar o mouse) gera uma mensagem. Veja alguns eventos mais comuns: Elemento <body> ou <frameset> <form> Boto de comando Boto Reset Boto Submit Boto de opo Caixa de seleo
Evento onLoad OnUnLoad onSubmit onClick onClick onClick onClick onClick

87/134
20/04/13
Apostila Javascript
Hiperlink Imagem ou Hiperlink Caixa de texto ou rea de texto Caixa de combos ou Caixa de listagem Veja o funcionamento de cada evento: onLoad = script
onClick onMouseOver onMouseOut onBlur onChange onFocus onSelect onBlur onChange onFocus
O evento onLoad ocorre quando o usurio termina de carregar uma janela ou todos os fremes dentro de um FRAMESET. Esse atributo pode ser usado com os elementos BODY e FRAMESET. onUnLoad = script O evento onUnLoad ocorre quando o usurio remove ou abandona um documento de uma janela ou frame. Esse atributo pode ser usado com os elementos BODY e FRAMESET. onSubmit = script O evento onSubmit ocorre quando um formulrio enviado. Ele s se aplica ao elemento FORM. onReset = script O evento onReset ocorre quando um formulrio redefinido. Ele s se aplica ao elemento FORM. onClick = script O evento onClick ocorre quando o bot do mouse clicado sobre um elemento. Esse atributo pede ser usado com a maioria dos elementos. onDblClick = script O evento onDblClick ocorre quando o boto do mause clicado duas vezes sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos. onMouseOver = script O evento onMouseOver ocorre quando o cursor movido sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos. onMouseOut = script O evento onMouseOut ocorre quando o cursor movido para fora de um elemento. Esse atrubuto pode ser usado com a maioria dos elementos.
20/04/13
Apostila Javascript
onFocus = script O evento onFocus ocorre quando um elemento recebe o foco, seja pelo mouse ou pela navegao com tabulao. Esse atrubuto pode ser usado com os seguintes elementos: INPUT, SELECT, TEXTAREA e BUTTON. onBlur = script O evento onBlur ocorre quando um elemento perde o foco, seja pelo mouse ou pela navegao com tabulao. Ele pode ser usado com os mesmo elementos de onFocus. onChange = script O evento onChange ocorre quando um controele perde o foco de entrada e seu valor foi modificado desde que ele ganhou o foco. Esse atrubuto se aplica aos seguintes elementos: INPUT, SELECT e TEXTAREA. onSelect = script O evento onSelect ocorre quando um usurio seleciona algum texto em um campo de texto. Esse atributo pode ser usado com os elementos INPUT e TEXTAREA. onMouseDown = script O evento onMouseDown ocorre quando o boto do mouse precionado sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos. onMouseUp = script O evento onMouseUp ocorre quando o boto do mouse liberado sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos. onMouseMove = script O evento onMouseMove ocorre quando o cursor movimentado quando est sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos. onKeyPress = script O evento onKeyPress ocorre quando uma tecla pressionada e liberada sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos. onKeyDown = script 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.
20/04/13
Apostila Javascript
Eventos de teclado No podem ser usados com os elemento base, bdo, br, frame, frameset, head, html , iframe, meta, param, script , style, e title. ATRIBUTO VALOR onkeydown script onkeypress script onkeyup Eventos do mouse No podem ser usados com os elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style e title. ATRIBUTO onclick ondblclick VALOR script script DESCRIO Script a executar quando detectado um clique no rato Script a executar quando detectado um clique duplo no rato Script a executar quando o boto do rato pressionado Script a executar quando o ponteiro do rato muda de posio Script a executar quando o ponteiro do rato deixa de estar sobre um elemento Script a executar quando o ponteiro do rato passa a estar sobre um elemento Script a executar quando o boto do rato libertado script DESCRIO Script a executar quando uma tecla pressionada Script a executar quando uma tecla pressionada e seguidamente libertada Script a executar quando uma tecla libertada
onmousedown script onmousemove script onmouseout script
onmouseover script onmouseup script
Vamos deixar de teoria de lado e vamos para a prtica: 1 - Evento onClick Este o evento mais usado. O evento onClick ocorre quando um objeto de um formulrio do tipo button, checkbox, radio, link, reset ou submit clicado. Esse evento controlado pelo gerenciador da linguagem Javascript, como mostra os exemplos a seguir: <input type="button" value="Calcula" onClick="processa(this.form)"> <input type="button" value="Azul" onClick="document.bgColor='blue'"> Exemplo 1: Ativando caixa de alerta:
90/134
20/04/13
Apostila Javascript
<html> <head> <title> onClick - 01 </title> </head> <body> <form> <center> <input type="button" value="No aperte este boto" onClick="alert('Curisidade Mata! O seu disco rgido est sendo formatado')"> <hr> <h2> Prova </h2> </center> 1. Quem descobriu o Brasil? <input type="button" value="A" onClick="alert('A: Volte para a escola!')"> Vasco da Gama <input type="button" value="B" onClick="alert('B: Correto.')"> Pedro lvares Cabral <input type="button" value="C" onClick="alert('C: Este descobriu a Amrica')"> Cristvo Colombo <hr> 2. Qual a raz quadrada de 16? <input type="button" value="Resposta" onClick="alert(eval(Math.sqrt(16)))">  </form> </body> </html> Exemplo 2 - Alterando propriedades
<html> <head> <title> onClick - 02 </title> </head> <body>

20/04/13
Apostila Javascript
<center> <h2>Usando onClick para alterar propriedades </h2> <hr> <form> <input type="button" value="Vermelho" onClick="document.bgColor='red'"> <input type="button" value="Ciano" onClick="document.bgColor='cyan'"> <input type="button" value="Azul" onClick="document.bgColor='blue'"> <input type="button" value="Cinza" onClick="document.bgColor='silver'"> <hr> Cinza: <input type="radio" name="bgcolor" onClick="document.bgColor='gray'"> Azul: <input type="radio" name="bgcolor" onClick="document.bgColor='blue'"> Verde: <input type="radio" name="bgcolor" onClick="document.bgColor='lightgreen'"> Ciano: <input type="radio" name="bgcolor" onClick="document.bgColor='cyan'"> </form> </center> </body> </html> Exemplo 3: Alterando o contedo de outros campos:
<html> <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 contedo de outro campo </h2> Campo1: <input type="text" name="campo1" value="" size="10" maxlength="10">
20/04/13
Apostila Javascript
Campo2: <input type="text" name="campo2" value="" size="10" maxlength="10"> Campo3: <input type="text" name="campo3" value="" size="10" maxlength="10"> <hr> <center> <input type="button" value="Soma" onClick="processa1()"> <input type="button" value="Multiplica" onClick="processa2()"> <hr> Resultado: <input type="text" name="campo4" value="" size="10" maxlength="10"> </center> </form> </body> </html> 2 - Evento onLoad O evento onLoad ocorre quando voc carrega uma pgina ou documento. Por exemplo, voc clicou no boto back ou voltar do browser ou clicou em um hiperlink. O gerenciador onLoad responsvel por esse evento. Ele pode pertencer ao objeto window e no ao objeto document, como voc poderia imaginar: <body onLoad="rotinadeabertura()"> Exemplo: <html> <head> <title>Teste</title> </head> <script language="javascript"> function jump() { window.open("pag2.html"); } </script> <body onLoad="jump()"> </body> </html> 3 - Evento onUnLoad O evento onUnLoad ocorre quando voc abandona uma pgina ou documento; por exemplo, quando clica no boto back ou voltar do Browser ou em um hiperlink. O gerenciador onUnLoad responsvel por este evento. Ele pode ser especificado no comando <body> ou <frameset> e pertence ao objeto window, e no ao objeto document como voc poderia imaginar. Exemplo: <body onUnLoad="rotinadefechamento()"> Vejamos um exemplo funcional para esses dois eventos. Criando trs pginas chamadas respectivamente de pag01.htm, pag02.htm e pag03.htm. O documento pag01.htm contm o comando: <body onunload="alert('Voc ainda est na pgina pag01 e vai carregar a pgina pag02.')"> <a href="pag02.htm">Pag02</a> </body> Ao clicar em um link para a pgina seguinte, o mtodo alert ser executado antes do carregamento da prxima pgina. A pgina pag02.htm contm apenas dois links, um para a pgina anterior e outro para a pgina
20/04/13
Apostila Javascript
posterior pag03.htm. A pgina pag03.htm possui o comando: <body onload="alert('Voc est na pgina Pgina pag03')"> Que exibe a caixa de dilogo com a mensagem durante o carregamento da pgina. 4 - Evento onSubmit O evento onSubmit ocorre quando o usurio preciona o boto Enviar do formulrio. Usando o gerenciador de eventos onSubmit voc pode executar algum precedimento especial antes de enviar o formulrio e at mesmo evitar que o formulrio seja preenchido. Para evitar o envio do formulrio acrescente o comando "return false" dentro do cdigo associado ao gerenciador onSubmit. Se ocomando return for omitido ou outro valor for especificado, o formulrio ser enviado. No exemplo abaixo, o gerenciador onSubmit executa o comando return, que executar a funo testacampo(), que por sua vez dever retornar o valor false para evitar o envio do formulrio ou outro valor qualquer para envi-lo. <form onSubmit="return testacampo(this)"> O exemplo a seguir mostra o gerenciador em ao. No comando Form acrescentamos o gerenciador onSubmit: <form name="ficha" onSubmit="return testacampo()"> Que ativa a funo testacampo() quando o boto de envio precionado. Essa funo verifica se todos os campos possuem algum contedo digitado testando o tamento dos campos. Caso algum deles no tenha sido preenchido, a funo exibe uma caixa de dilogo de alerta e retorna False, evitando o envio do formulrio. Caso contrrio, exibe uma mensagem informando que todos os campos est preenchidos e envia o formulrio aps o retorno de true. Na prtica voc pode optar por consistir cada campo individualmente usando os gerenciadores onClick, onChange e onBlur, optar por fazer uma consistncia geral ou, ainda, combinar os dois mtidos, pois um usurio pode preencher os dados solicitados em um formulrio e pressinar o boto de envio sem ter preenchido nehum campo, exemplo: <html> <head> <title> onSubmit </title> </head> <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 formulrio devem ser preenchidos"); return false; } else { alert("todos os campos do formulrio foram preenchidos"); return true; } } </script> <body>
20/04/13
Apostila Javascript
<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> Endereo: <input type="text" name="campo2" value=""> <br> Cidade: <input type="text" name="campo3" value=""><br> <center><input type="submit" value="Enviar"></center> </form> </body> </html> Em certas circunstocias pode ser til submeter um form, mesmo sem utilizar um boto submit, como era tradicional no Html. Vejamos o seguinte exemplo: <html> <head> <title>Teste</title> </head> <body> <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 ao de subit equivalente ao de pressionar o boto submit, mesmo sem este existir! Esta ao pode ser produzida com um simples ENTER aps o preenchimento do campo. Uma vez que o form est sendo submetido via e-mail, o usurio notificado pelo brewser dos riscos de segurana (este mecanismo de aviso pede ser desligado nas opes do browser www). 5 - Evento onMouseOver O evento onMouseOver pertence ao objeto Link. Toda vez que o cursor do mouse posicionado sobre um link, o gerenciador de eventos onMouseOver ativado, caso tenha sido especificado no comando. Como padro, quando posicionamos o cursor sobre um link, a barra de status da janela do browser mostra o endereo do link. O cdigo associado ao gerenciador deve sempre conter o comando return true para que fincione corretamente. O prximo exemplo mostra o uso desse gerenciador em duas situaes. Na primeira, ele cria um link falso no qual o evento usado para alterar a cor de fundo do formulrio. Se voc pocisionar o cursor sobre a palavra vermelho o fundo passar a ter essa cor; o mesmo ocorre com as palavras ciano e verde. Nos dosi links, mostramos em seguida, ao passar o cursor sobre eles, aparecer uma mensagem especfica na linha de status da janela. Uma vez colocada essa mensagem na linha de status, ela permanece l at que outro link receba o cursor sobre ele. <html> <head>
20/04/13
Apostila Javascript
<title> onMouseOver </title> </head> <body> Esta pgina contm um link para a pgina chamada pag03 e outro para a pgina pag01 <br> <a href="" onMouseOver="document.bgColor='red'">Vermelho</a> <a href="" onMouseOver="document.bgColor='cyan'">Cyan</a> <a href="" onMouseOver="document.bgColor='lightgreen'">Verde</a> <hr> <a href="pag03.htm" onMouseOver="window.status='Esta pgina pode conter material imprprio para menores'; return true">Vai para a pgina 03</a> <a href="pag01.htm" onMouseOver="window.status='Esta pgina pode conter material imprprio para maiores'; return true"> Vai para a pgina 01</a> </body> </html> 6 - Evento onBlur O evento onBlur ocorre quando um campo no est mais sob o foco. Por exemplo, quando voc digita o contedo de um campo do tipo texto e pressiona a tecla Tab para avanar para outro campo, ou quando clica em um outro objeto do formulrio, fazendo com que o campo atual no seja mais o objeto ativo do programa. Os objetos que geram esse evento so: select, text e textarea. Sintaxe: onBlur="cdigo a ser executado" Quando um formulrio precisa ser preenchido e alguns dos campos so obrigatrios, o gerenciador de eventos onBlur perfeito para criar uma consistncia genrica entre os campos. Veja o exemplo a seguir, no qual, em um formulrio com cinco campos, o usurio no pode deixar de preencher trs deles. Nos campos cdigo, nome e telefone foi adicionado o evento onBlur. nos campos mencionados, quando o usurio pressiona Tab para avanar para outro campo, onBlur ativado e executa a funo campovital(), passando como argumento uma cpia do objeto atual (o campo do tipo text), representada pela palavra chave this. A funo campovital recebe o objeto e testa se o contedo da propriedade valor igal a "", ou seja, nada foi atribudo ao campo. Se isso form verdade, ele exibe uma caixa de dilogo de alerta sugernido o prenchimento daquele campo. Note que na mensagem usamos a propriedade x.name para exibir o nome do campo. <html> <head> <title> onBlur</title> <script language="javascript"> function campovital(x) { if (x.value=="") { alert("O campo "+ x.name+" no pode ser deixado em branco") } } </script> </head> <body> <form> <br> Cdigo: <input type="text" name="codigo" value="" size="5" maxlength="5" onBlur="campovital(this)"> <br> Nome: <input type="text" name="nome" value="" size="30" maxlength="0" onBlur="campovital(this)"> <br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="0"> <br> Telefone: <input type="text" name="telefone" value="" size="15" maxlength="0" onBlur="campovital(this)"> <br> Ramal: <input type="text" name="ramal" value="" size="4" maxlength="0">
20/04/13
Apostila Javascript
</form> </body> </html> Execute o programa. Deixe um dos campos obrigatrios sem preencher e precione Tab o clique em outro campo. A mensagem ser exibida imediatamente. 7 - Evento onChange O evento onChange ocorre quando um campo do tipo select, text ou textarea perde o foco e seu contedo alterado. Ele diferente do evento onBlur, que ocorre sempre que o campo perde o foco independente de ter seu contedo alterado. O prximo exemplo mostra o uso do gerenciador onChange. no campo nome, ele foi especificado para ativar uma funo que verifica a quantidade de caracteres digitados e se for menor do que 5, exibe uma mensagem de erro. Veja o cdigo do programa: <html> <head> <title>onChange</title> <script language="javascript"> function testanome(x){ if(x.value.length<5){ alert("O campo "+x.name+" no pode ter menos do que 5 caracteres") }} </script> </head> <body> <form> <h2> Textando alteraes em um campo com onChange</h2> <br> Cdigo: <input type="text" name="codigo" value="" size="5" onChange="testanome(this)"> <br> Nome: <input type="text" name="nome" value="" size="30" maxlength="30" onChange="testanome(this)"> <br> 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 digitao pelo pressionamento da tecla Tab no campo anterior, Shift+Tab do campo pesterior ou pelo clique do mouse. Ele atua sobre campos do tipo select, text e textarea. Vomos analizar o cdigo do prximo exemplo, que solicita a digitao de cinco campos. Os trs primeiros so os que devero receber um nmero. O campo 4 um campo que recebe automaticamente a somatria dos campos anteriores, mas que permite a digitao de outro valor. A somatria dos campos feita pela funo precessa1(), que automaticamente executada quando o campo recebe o foco de digitao. Ns tambm aproveitamos para acrescentar o evento onBlur nos campos de 1 a 3 para fazermos um teste. Se o campo permanecer em branco assumido o valor 0 para ele. Dessa forma evitamos um erro de Javascript na hora de somar um dos campos que eventualmente foi deixado em branco.
20/04/13
Apostila Javascript
O ltimo campo, chamado comentrio, mostra uma caixa de alerta assim que recebe o foco, avisando que seu preenchimento obrigatrio. <html> <head> <title>onFocus</title> <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 clculos 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> Comentrio: <input type="text" name="campo5" value="" size="30" onFocus="alert('Este campo de comentrio deve ser preenchido')"> </form> </body> </html> 9 - Evento onSelect O evento onSelect ocorre quando um texto de um campo do tipo text ou textarea selecionado. O gerenciador onSelect responsvel por este evento. Veja como um comando usa on Select: <input type="text" value="" name="campo1" onSelect="altera()"> O exemplo a seguir exibe a ativao de caixa de alerta quando um texto do segundo campo selecionado. <html> <head> <title> onSelect </title> </head> <body> <form> <h2> Testando alteraes em um campo com onSelect</h2> <br> cdigo: <input type="text" name="codigo" value="" size="5" maxlength="5"> <br> nome: <input type="text" name="nome" value="" size="30" maxlength="30" onSelect="alert('Campo com texto selecionado')"> <br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="20">
20/04/13
Apostila Javascript
</form> </body> </html> Usando um menu para acessar outra pgina:
Para personalizar a rotina, basta substituir os nomes dos sites na matriz itens e os endereos correspondentes na matriz URL. <html> <head> <title>Menu Select: Acessando outras pginas </title> <script language="javascript"> function criamatriz() { this.length=criamatriz.arguments.length for(var i=0; i<this.length; i++) this[i+1]=criamatriz.arguments[i] } var itens=new criamatriz("Escolha um site para visitar:", "Uol", "Microsoft", "Oracle", "Borland", "CNN"); var url=new criamatriz("", "http://www.uol.com.br", "http://www.microsoft.com", "http://www.oracle.com", "http://www.borland.com", "http://www.cnn.com"); function vaipara(form1) { i=form1.lista.selectedIndex; if (i==0) return; window.location.href=url[i+1]; } </script> </head> <body> <h1>Lista de home page </h1> <hr> <script language="javascript"> document.write("<form>") document.write('<select name="lista" onChange="vaipara(this.form)">'); var tot=itens.length; for(var i=1; i<=tot; i++) document.writeln("<option>"+itens[i]);
20/04/13
Apostila Javascript
document.writeln('</select>'); document.writeln('</form>'); </script> O uso de uma lista de seleo para acessar outras pginas muito til, principalmente se a pgina tiver pouco espao disponvel. alm disso, uma forma elegante para mudar de pgina. </body> </html>
Propriedades do formulrio
Propriedades so atributos de um objeto que definem sua aparncia e comportamento, tais como sua posio, cor, forma e nome.
Prefixos
Para identificar os elementos do formulrio, as trs primeirasl letras do nome do formulrio - frm - form colocadas propositadamente como um prefixo para indicar que o objeto nomeado um formulrio. Esta no uma regra obrigatria, mas ir facilitar a compreeno do cdigo de programao. Pesteriormente voc ir utilizar outros tipos de objetos que tambm sero identificados com nomes iniciados por prefixos, por exemplo, uma caixa de texto que ter seu nome iniciado por "txt". padronizar os programas facilita a compreenso de seus cdigos. Tipo de Objeto Prefixo Definio Form Button Text Label Textarea Radio Checkbox Select Select + Size Img Password Menu frm btn txt lbl txa rad chk cbo lst img pss mnu Formulrio Boto de Comando Caixa de texto Rtulo rea de texto Boto de opo Caixa de seleo Caixa de combos Caixa de listagem Imagem Senha Menu
Vejamos as propriedades de cada objeto: a) Elemento boto <input type="button" name="nome do boto" value="texto do boto" [onClick="cdigo javascript"]> Propriedades name value Nome do elemento Valor contido no elemento Exemplo:
100/134
20/04/13
Apostila Javascript
<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="cdigo Javascript"]> Propriedades name value Nome do elemento valor contido no elemento c) Elemento reset <input type="reset" name="nome do reset" value="texto do reset" [onClick="cdigo Javascript"]> Propriedades name value Nome do elemento Valor contido no elemento d) Elemento text <input type="text" name="nome do texto" value="valor do texto" size=inteiro [onBlur="cdigo Javascript"] [onChange="cdigo Javascript"] [onFocus=="cdigo Javascript"] [onSelect="cdigo Javascript"] > Propriedades defaultValue name value Indica o valor inicial que vai aparecer na zona de texto (especificado como parametro da marca Html <input ...> ) Nome do elemento Valor contido no elemento Exemplo 1:
<form name="frm_teste"> Digite seu nome: <input type="text" name="txt_nome" value=""> <input type="button" name="btn_botao" value="Resultado" onClick='document.frm_teste.txt_nome.value=prompt("Seu nome "+document.frm_teste.txt_nome.value+", digite um outro nome.", "");'> </form> Exemplo 2: <script language="javascript"> function campo(x) { alert(x.name+" = "+x.value) } </script> <form> Nome: <input type="text" name="txt_nome" value="Joo" onBlur="campo(this)"><br>
20/04/13
Apostila Javascript
Endereo: <input type="text" name="txt_endereco" value="Rua: Augusta n 555" onBlur="campo(this)"><br> Telefone: <input type="text" name="txt_telefone" value="9999-8888" onBlur="campo(this)"> </form> e) Elemento textarea <textarea name="nome da rea de texto" rows=inteiro cols=inteiro [onBlur="cdigo Javascript"] [onChange="cdigo Javascript"] [onFocus="cdigo Javascript"] [onSelect="cdigo Javascript"] Propriedades defaultValue name value Indica o valor inicial que vai aparecer na zona de texto (especificado como parmetro da marca Html <input ...>) Nome do elemento Valor contido no elemento Exemplo: <script language="javascript"> function teste(frm_form) { frm_form.txa_teste.value="\tO livro: \"Manual Prtico do Programador\". \nEst nas livrarias e \\ ou jornaleiros." } </script> <form> <center> <textarea name="txa_teste" cols="30" rows="10"> </textarea><br> <input type="button" value="testando" onClick="teste(this.form)"> </center> </form> f) Elemento password <input type="password" name="nome da senha" [value="texto da senha"] size=inteiro> Propriedades defaultValue Formece uma cadeia padro se nenhuma outra for fornecida name value Eventos onFocus 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
Nome do elemento valor contido no elemento onBlur onSelect
20/04/13
Apostila Javascript
defaultValue name value
Esta propriedade armazena o valor padro que o elemento oculto armazena se nenhuma outra informao for fornecida Nome do elemento Valor do elemento
Obs: esta propriedade no 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 seleo <input type="checkbox" name="nome da caixa de seleo" value="valor da caixa de seleo" [checked] [onClick="cdigo Javascript"] > Texto da caixa de seleo Propriedades checked defaultChecked name value Esta propriedade reflete o estado da caixa, se est selecionada (verdadeiro) ou no (falso) Esta propriedade determina qual o estado padro da caixa. true para selecionado e false para deselecionado Nome do elemento Valor contido no elemento Exemplo:
<form name="frm_teste"> <input type="checkbox" name="chk_opcao">Caixa selecionada / deselecionada<br> <input type="button" name="btn_teste" value="selecionar/deselecionar" onClick="if(document.frm_teste.chk_opcao.checked==true) { document.frm_teste.chk_opcao.checked=false } else { document.frm_teste.chk_opcao.checked=true }" > </form> i) Elemento radio <input type="radio" name="nome do grupo" value="valor do boto" [checked] [onClick="cdigo Javascript"] > Texto do boto radio Propriedades checked defaultChecked index length Esta propriedade contm o valor booleano do estado do boto de rdio; verdadeiro para selecionado, falso para deselecionado. Esta propriedade indica se este o boto padro que deve ser selecionado entre os botes de rdio do grupo. Esta propriedade indica qual o elemento este boto de rdio no grupo corrente substitui por est selecionado. Esta propriedade indica o nmero de botes de rdio no grupo
103/134
20/04/13
Apostila Javascript
name value
Nome do elemento Valor contido no elemento Exemplo:
<form name="frm_teste"> <input type="radio" name="rdo_valor" value="1 Item" checked>Item 1<br> <input type="radio" name="rdo_valor" value="2 Item">Item 2<br> <input type="button" name="btn_teste" value="Teste" onClick="if(document.frm_teste.rdo_valor[0].checked==true) { document.frm_teste.rdo_valor[1].checked=true } else { document.frm_teste.rdo_valor[0].checked=true } "><br> Valor do Item 1:<input type="text" value="" name="txt_texto"> </form> <script language="javascript"> var y=document.frm_teste.rdo_valor[0].value document.frm_teste.txt_texto.value=y document.write("Quantidade de tens do boto de rdio: "+document.frm_teste.rdo_valor.length) </script> j) Elemento select <select name="nome do seletor" [size=inteiro] [multiple] [onBlur="Cdigo Javascript"] [onChange="Cdigo Javascript"] [onFocus="Cdigo Javascript"]> <option [selected]> Opo da seleo <option> Selees adicionais </select> Propriedades length name option selectedIndex Nmero de elementos da lista de seleo nome do elemento Esta uma matriz de diferentes opes disponveis para escolha. A matriz vai de option[0] para a primeira alternativa a option[n-1] para a ltima na lista de escolha. Se o atributo multiple estiver ativada, ento alterar o valor de selectedIndex limpa todas as demais alternativas j que o ndice se refere nica opo
claro, a matriz de opes tambm na verdade uma matriz de objetos, que possuem suas prprias propriedades. Cada opo individual em um elemento select possui as seguintes propriedades: Propriedades do option defaultSelected index selected Este um valor booleano indicando se a opo est selecionada automaticamente ou deselecionada quando aparecer. Indica onde na lista de opes a alternativa corrente est localizada Indica se a opo est corretamente selecionada
104/134
20/04/13
Apostila Javascript
text value
Contm o texto apresentado para cada opo
esta propriedade contm os dados enviados ao servidor a partir da lista de seleo quando o boto submeter for precionado. Para acessar os elementos individuais das opes em um elemento select, podemos usar o nome do objeto select: selectName.option[ndice].propriedade <script language="javascript"> function selecao() { var x=document.frm_teste.lst_lista.selectedIndex var y=document.frm_teste.lst_lista[x].value document.frm_teste.txt_texto.value=y } </script> <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 cdigo est em Dhtml
<html> <head> <script type="text/javascript">

20/04/13
Apostila Javascript
function adicionar(campo) { var x=document.getElementById("mySelect"); //retorna o objeto select var options = x.getElementsByTagName("option"); //pega a lista de options do select if (x.selectedIndex>=0) { var y=document.createElement('option'); //cria um novo elemento option y.text=campo; //seta o texto do elemento option y.value=options.length; //seta o valor do elemento option var sel=x.options[x.length]; //pega o indice selecionado do objeto select try { x.add(y,sel); // adiciona um novo option antes do indice selecionado para navegadores complacentes } catch(ex) { x.add(y,x.length); // adiciona um novo option antes do indice selecionado para o IE } } } function remover() { var x=document.getElementById("mySelect") x.remove(x.selectedIndex) } function renomear(campo) { x = document.getElementById("mySelect").selectedIndex document.getElementById("mySelect")[x].text = campo } </script> </head> <body> <form name="formulario"> <input type="text" name="campo"> <select id="mySelect"> <option value="0">Maa</option> <option value="1">Melo</option> <option value="2">Banana</option> <option value="3">Laranja</option> </select> <input type="button" onClick="adicionar(document.formulario.campo.value)" value="Adicionar" /> <input type="button" onClick="remover()" value="Remover"> <input type="button" onClick="renomear(document.formulario.campo.value)" value="Renomear" /> </form> </body> </html>
106/134
20/04/13
Apostila Javascript
Biblioteca de funes
O Javascript possui um conjunto bastante vasto de funes com aplicao especfica. As funes so muito vantajosas para o usurio, pois permitem diminuir o tempo gasto na elaborao de formulrios, assim como eventuais erros na sua concepo. As funes do Javascript agrupam-se em: Funes matemticas; Funes tipo string; Funes tipo data; Funes tipo hora; Funes do sistema operacional; Banco de dados; Outras funes. As funes do Javascript tem a seguinte sintaxe: = nomedafuno(argumentos) Os tipos de argumentos variam de funo para funo e em relao s necessidades de clculo do usurio. Os tipos de argumentos mais utilizados so: variveis numricas, variveis strings, variveis booleanas, arrays e propriedades. Exemplos (tericos) de funes: Inicio escreva( Potencia(2, 6) ) escreva( Soma(12, 36) ) escreva( Media(8, 3) ) Fim
Funes Matemticas
Para auxiliar os clculos matemticos, alm dos operadores matemticos de adio, subtrao, multiplicao e diviso existem outras funoes matemticas. Algumas funes so comuns, tais como: raiz quadrada, potnciao, mdulo, etc. Outras exigem conhecimento a nvel de 2 grau tais como: trigonometria e logartmos. Vejamos Covertendo string para numrica Calcula o contedo da string Exemplo: eval resultado=eval("(10*20)+2-8") document.write(resultado) Resultado: 194 Transforma string em inteiro
20/04/13
Apostila Javascript
parseInt
Exemplo: valor=parseInt("79.65732") document.write(valor) Resultado: 79 Transforma string em nmero real
parseFloat
Exemplo: valor=parseFloat("79.65732") document.write(valor) Resultado: 79.65732
Arredondando valores Math.floor(nmero) - Devolve o inteiro anterior menor que "nmero" 32.5 torna-se 32 e -24.8 torna-se -24. Math.ceil(nmero) - Devolve o inteiro maior que o "nmero" 32.5 torna-se 33 e -24.8 torna-se -25. Math.round(nmero) - Arredonda "nmero" para o inteiro mais prximo. Se a poro decimal do nmero for 0.5, o nmero arredonda para cima. Funes matemticas comuns Math.random() - Devolve um nmero aleatrio entre 0 e 1. Math.abs(nmero) - Valor absoluto do "nmero", ou seja, sempre o valor idependente do sinal (positivo ou negativo) -4 fica igual a 4. Math.max(num1, num2) - Devolve o nmero maior dos nmeros "num1" e "num2". Math.min(num1, num2) - Devolve o nmero menor dos nmeros "num1" e "num2". Math.pow(num, expoente) - Devolve "num" elevado a "expoente". Math.sqrt(nmero) - Raiz quadrada de "nmero". Math.SQRT1_2 - Raiz quadrada de 1/2 (aproximadamente 0.7071067811865476). Math.SQRT2 - Raiz quadrada de 2 (aproximadamente 1.4142135623730951). Funes trigonomtricas Math.PI - Retorma o valor de PI (aproximadamente 3.141592653589793). Math.sin(nmero) - Retorna o seno de um nmero (em radianos). Math.cos(nmero) - Retorna o cosseno de um nmero (em radianos). Math.tan(nmero) - Retorna a tangente de um nmero (em radianos). Math.asin(nmero) - Retorna o arco seno de um nmero (em radianos). Math.acos(nmero) - Retorna o arco cosseno de um nmero (em radianos). Math.atan(nmero) - Retorna o arco tangente de um nmero (em radianos). Trigonometria no tringulo retngulo
20/04/13
Apostila Javascript
Considere um tringulo ABC, retngulo em (=90), onde a medida da hipotenusa, b e c so as medidas dos catetos e , so ngulos agudos.
Pelo teorema de Pitgoras, temos que "o quadrado da hipotenusa igual a soma dos quadrados dos catetos", ou seja, pela figura, a2=b2+c2 Observamos ainda que os ngulos agudos do tringolo retngulo so complementares na figura + = 90 Exerccios: 1) Usando o teorema de Pitgoras, calcule o valor de x: a) b) c)
2) Determine o valor de ou nas figuras seguintes: a) b)
Razes trigonomtricas
109/134
20/04/13
Apostila Javascript
= ngulo a = Hipotenusa b = Cateto oposto c = Cateto adjacente Seno de um ngulo o quociente entre a medida do cateto oposto ao ngulo e a medida da hipotenusa:
Cosseno de um ngulo o quociente entre a medida do cateto adjacente ao ngulo e a medida da hipotenusa:
Tangente de um ngulo o quociente entre as medidas do cateto oposto e do cateto adjacente ao ngulo:
Observao: O seno de um ngulo igual ao cosseno do seu complemento; O cosseno de um ngulo igual ao seno do seu complemento.
Exerccios 1) Em cada caso, determinar o sen , cos e tg :
a)
c) b)
110/134
20/04/13
Apostila Javascript
e) d)
Tabela dos ngulos mais usados do tringulo retngulo Grau sen cos tg em radianos
111/134
20/04/13
Apostila Javascript
30
45 60 Exerccios: 1) Encontre x:
2) Encontre y:
b) a)
3) Encontre x e y:
112/134
20/04/13
Apostila Javascript
c) a) b)
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. em em grau radianos 360 180 90
ngulo
60
20/04/13
Apostila Javascript
45
30 A unidade de medida usada pelos brasileiros o grau, porm a unidade de medida usada pela maioria das linguagens de programao o radiano, ento acostume-se a transformar graus em radianos. Calculando o seno, cosseno e tangente pelo computador Se o argumento estiver em graus, multiplique-o por PI()/180 ou use a funo radianos() para convert-lo em radianos. Exemplo: <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-16 document.write("<br>"+Math.sin(Math.PI/2)) // O seno de radianos de pi/2 (1). Resultado: 1 document.write("<br>"+Math.sin(30*Math.PI/180)) // O seno de 30 graus (0,5). Resultado: 0.49999999999999994 document.write("<br>"+Math.sin(30*radianos())) // O seno de 30 graus (0,5). Resultado: 0.49999999999999994 document.write("<br>"+Math.cos(60*Math.PI/180)) // O cosseno de 60 graus (0,5). Resuntado: 0.5000000000000001 document.write("<br>"+Math.cos(60*radianos())) // O cosseno de 60 graus (0,5). Resultado: 0.5000000000000001 document.write("<br>"+Math.tan(45*Math.PI/180)) // A tangente de 45 graus (1). Resultado: 0.9999999999999999 document.write("<br>"+Math.tan(45*radianos())) // A tangente de 45 graus (1). Resultado: 0.9999999999999999 </script> Calculando o arco seno, arco cosseno e arco tangente pelo computador Retorna o arco seno ou o seno inverso de um nmero. O arco seno o ngulo cujo seno nm. O ngulo retornado fornecido em radianos; o mesmo para arco cosseno e arco tangente. Para expressar o arco seno em graus, multiplique o resultado por 180/PI( ) ou use a funo graus(). <script language="javascript"> function graus() {
20/04/13
Apostila Javascript
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>
Logartmos Math.log(nmero) - Retorna op logartmo de um nmero Math.E - Retorna a base dos logartmos naturais (aproximadamente 2.718281828459045) Math.LN2 - Retorna o valor do logartmo de 2 (aproximadamente 0.6931471805599453) Math.LOG2E - Retorna a base do logaritmo de 2 (aproximadamente 1.4426950408889634) Math.LN10 - Retorna o valor do logartimo de 10 (aproximadamente 2.302585092994046) Math.LOG10E - Retorna a base do logartmo de 10 (aproximadamente0.4342944819032518) Definio Sendo a e b nmeros reais e positivos com a1, chama-se logaritmo de b na base a o expoente x ao qual se deve elevar a base a de modo que a potncia ax seja igual a b. logab=x <=> ax=b Na expresso logab=x, temos: a a base do logartmo; b o logaritmando; x o logaritmo. Vejamos alguns exemplos de logartmos: log24=2, pois 22=4 log381=4, pois 34=81 log77=1, pois 71=7 log51=0, pois 50=1 Logaritmo decimal No mbito do Ensino Mdio, usa-se bastante a base 10, uma vez que neste ambiente a base decimal recebe as preferncias para o trabalho com o nosso sistema de numerao, mas devemos observar que em contextos mais avanados, a base decimal tem pouca utilidade. Quando escrevermos Log a partir daqui neste trabalho, entenderemos o Logaritmo na base decimal e escrevemos:
20/04/13
Apostila Javascript
y = Log(x) para entender que y o Logaritmo de x na base 10 e nesta base 10, temos algumas caractersticas interessantes com os logaritmos das potncias de 10 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Log(1)=0 Log(0) no tem sentido Log(10)=Log(101 )=1 Log(1/10)=Log(10-1 )=-1 Log(100)=Log(10)=2 Log(1/100)=Log(10-2 )=-2 Log(1000)=Log(10)=3 Log(1/1000)=Log(10-3 )=-3 Log(10n)=n Log(10-n)=-n
A partir da propriedade Log 10n =n temos que o Logaritmo de 10n na base 10 o expoente n, o que nos faz pensar que para todo x real positivo vale a relao: Log(10x) = x Mudana de base Apesar de existirem identidades muito teis, a mais importante para o uso na calculadora a que permite encontrar logaritmos com bases que no as que foram programadas na calculadora (normalmente loge e log10). Para encontrar um logaritmo com uma base b usando qualquer outra base a:
Prova da frmula de mudana de base
por definio
aplica-se
em ambos os lados
simplifica-se o lado esquerdo da igualdade
116/134
20/04/13
Apostila Javascript
divide-se por log k(b)
Clculos mais fceis Logaritmos trocam nmeros por expoentes. Mantendo-se a mesma base, possvel tornar algumas poucas operaes mais fceis: Operao com nmeros Operao com expoentes Identidade logartmica
Demonstrao da identidade log(a) + log(b) = log(ab) Por definio, se: log(a) = x ento a = 10x. Logo, considerando-se b = 10y, tem-se:
Observa-se em ambos os lados da expresso acima que x + y = x + y, o que comprova a identidade.
Funes de tratamento de String

Manipulando Strings O Javascript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio. Abaixo apresentamos os mtodos disponveis para manuseio de strings. 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
length
20/04/13
Apostila Javascript
O mtodo substring (subcadeia) retorna a cadeia que se estende do indice Inicial at o caractere logo antes de indice final. Se indice Inicial for maior que indice final, o mtodo funciona como se ambos estivessem com as posies trocadas. Se os dois ndices forem iguais, retorna uma cadeia vasia. substring(indiceInicial, Exemplo: var s="Esta e uma string de texto"; indiceFinal) var s1=s.substring(4, 10); document.write(s1); Resultado: "e uma" Funciona da mesma forma que o substring, s que, retorna o caractere simples em uma posio especfica na String. charAt(posio) Exemplo: var s="Esta e uma string de texto"; var s1=s.charAt(5); document.write(s1); Resultado: "e" O mtodo indexOf faz a busca no objeto string pela primeira ocorrncia do caractere e retorna o ndice correspondente. o argumento inicIndex opcional e indica a partir de onde inicia a busca. Podemos localizar os valores dos ndices para todos os caracteres do mesmo tipo iniciando aps o ndice anterior. Exemplo: text="Hello, world!"; index=0 document.write("<pre>"); while(index<text.lastIndexOf("l")) { index= text.indexOf("l", index+1); document.write(index+"\t"); } document.write("\n"); document.write("</pre>") Resultado:" 2 3 10" O mtodo lasIndexOf idntico ao mtodo index of exceto que faz a busca do caractere lastIndexOf(caractere, na cadeia do fim para o comeo iniciando em inicIndex. [inicIndex]) Veja o exemplo anterior O mtodo replace voc insere uma palavra ou uma letra em que voc deseja substituir por outra. replace(palavra, Exemplo: s="Este automovel caro"
118/134
indexOf(caractere, [inicIndex])
20/04/13
Apostila Javascript
substituto)
document.write(s.replace("automovel", "carro")) Resultado: Este carro caro
O mtodo search localiza a palavra dentro de uma string. search(palavra) Exemplo: s="Este automovel caro" document.write(s.search("automovel")) Resultado: "5" O mtodo toLowerCase (para minsculo) retorna a cadeia com todos os caracteres alterados para minsculo. toLowerCase() Exemplo: s="ISTO UM EXEMPLO" document.write(s.toLowerCase()) Resultado: isto um exemplo O mtodo toUpperCase (para maisculo) retorna a cadeia com todos os caracteres alterados para maisculo. toUpperCase() Exemplo: s="isto um exemplo" document.write(s.toUpperCase()) Resultado: ISTO UM EXEMPLO
Veja um exemplo de cdigo que inverte o texto ao contrrio: <head> <title>Se no entendeu, use este cdigo HTML</title> </head> <script language="javascript"> <!-function inverter(formulario){ var vtexto1=formulario.texto1.value var vtexto2="" for(var x=vtexto1.length; x>=0; x--){ vtexto2+=vtexto1.charAt(x) } formulario.texto2.value=vtexto2
20/04/13
Apostila Javascript
} --> </script> <body> <form> Insira o texto aqui: <br/> <textarea name="texto1" cols="120" rows="10"></textarea> <br /> <input type="button" name="Inverter" value="Inverter" onClick="inverter(this.form)"/> <input type="reset" value="Apagar"> <br /> <textarea name="texto2" cols="120" rows="10"></textarea> </form> </body> </html>
Manipulando datas e horas

Existe apenas uma funo para que se possa obter a data e a hora. a funo Date(). Esta funo devolve data e hora no formanto: Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano Ex: Fri May 24 16:58:02 1996 Para se obter os dados separadamente, existem os seguintes mtodos: getDate() - Retorna o dia do ms (inteiro entre 1 e 31) getDay() - Retorna o dia da semana (0=Domingo, 1=Segunda-feira,... , 6=Sbado) getMonth() - Retorna o ms (entre 0=Janeiro e 11=Dezembro) getFullYear() - Retorna o ano com quatro dgitos (o mais usado) getYear() - Retorna o ano com 2 dgitos. getHours() - Retorna a hora do dia (entre 0 e 23) getMinutes() - Retorna os minutos dentro da hora (entre 0 e 59) getSeconds() - Retorna os segundos (entre 0 e 59) No exemplo 1 abaixo obteremos o dia da semana e as horas. Para tal, utilizaremos a varivel DataToda para armazenar data e hora. <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"
20/04/13
Apostila Javascript
semana[2]="Tera" semana[3]="Quarta" semana[4]="Quinta" semana[5]="Sexta" semana[6]="Sabado" Semana_atual=semana[Dia_da_semana] //------------------------Mes2=Array(11) Mes2[0]="Janeiro" Mes2[1]="Fevereiro" Mes2[2]="Maro" Mes2[3]="Abril" Mes2[4]="Maio" Mes2[5]="Junho" Mes2[6]="Julho" Mes2[7]="Agosto" Mes2[8]="Setembro" Mes2[9]="Outubro" Mes2[10]="Novembro" Mes2[11]="Desembro" Mes_atual=Mes2[Mes] document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano) document.write("<br>") document.write("So: "+Horas+" horas, "+Minutos+" minutos e "+Segundos+" segundos.") </script> exemplo 4: alterando a data Para criar uma varivel tipo Date com o contedo informado pela aplicao, existe o mtido set. Assim temos os seguintes mtodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds . Os mas importantes so: setDate(valor) - Coloca o dia do ms (valor entre 1 e 31) setMonth(valor) - coloca o ms (valor entre 0 e 11) setYear(valor) - coloca os anos (valor acima de 1970) <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]="Tera"
20/04/13
Apostila Javascript
semana[3]="Quarta" semana[4]="Quinta" semana[5]="Sexta" semana[6]="Sabado" Semana_atual=semana[Dia_da_semana] //------------------------Mes2=Array(11) Mes2[0]="Janeiro" Mes2[1]="Fevereiro" Mes2[2]="Maro" Mes2[3]="Abril" Mes2[4]="Maio" Mes2[5]="Junho" Mes2[6]="Julho" Mes2[7]="Agosto" Mes2[8]="Setembro" Mes2[9]="Outubro" Mes2[10]="Novembro" Mes2[11]="Desembro" Mes_atual=Mes2[Mes] document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano) </script> exmeplo 3: vendo as horas <script language="javascript"> rel = new Date() hora = rel.getHours() minuto = rel.getMinutes() segundo = rel.getSeconds() temp = hora temp += ((minuto < 10) ? ":0" : ":") + minuto temp += ((segundo < 10) ? ":0" : ":") + segundo document.write("So exatamente: "+temp) </script> Exemplo 4: relgio <HTML> <HEAD> <TITLE> Exemplo </TITLE> <SCRIPT language="javascript"> function relogio() { rel = new Date() hora = rel.getHours() minuto = rel.getMinutes() segundo = rel.getSeconds() temp = "" + hora temp += ((minuto < 10) ? ":0" : ":") + minuto temp += ((segundo < 10) ? ":0" : ":") + segundo
20/04/13
Apostila Javascript
document.form1.text1.value = temp setTimeout("relogio()", 1000) } </SCRIPT> </HEAD> <BODY onLoad="relogio()"> <FORM NAME="form1"> So exatamente: <INPUT TYPE="text" NAME="text1" SIZE="8" VALUE=""> </FORM> </BODY> </HTML>
Usando o Timer
um mtodo que permite a programao para que uma determinada ao s ocorra aps o transcusro de um determinado tempo. Varivel = setTimeout("ao",tempo) Varivel uma varivel apenas para controle do timer ao a ao que se quer realizar tempo o tempo de espera para que a ao ocorra em milisegundos. Obs: importante observar que a ao s ocorrer uma vez. para que a ao volte a ocorrer, ser necessrio repetir o comando dentro da ao, optendo-se, assim um LOOP. Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte mtodo: clearTimeout(Varivel) Onde: Varivel o nome da varivel de controle do timer. <HTML> <HEAD> <TITLE> Exemplo </TITLE> <SCRIPT language="javascript"> function relogio() { rel = new Date() hora = rel.getHours() minuto = rel.getMinutes() segundo = rel.getSeconds() temp = "" + hora temp += ((minuto < 10) ? ":0" : ":") + minuto temp += ((segundo < 10) ? ":0" : ":") + segundo document.form1.text1.value = temp controleRelogio=setTimeout("relogio()", 1000) } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> So exatamente: <INPUT TYPE="text" NAME="text1" SIZE="8" VALUE=""><br>
20/04/13
Apostila Javascript
<INPUT TYPE="button" VALUE="Ativar Relgio" onClick="relogio()"> <INPUT TYPE="button" VALUE="Parar Relgio" onClick="clearTimeout(controleRelogio)"> </FORM> </BODY> </HTML>
Funes de converso de data e hora

Clique aqui!
Funes arrays
Pode ser definido como um conjunto ordenado de valores, numricos ou no, que so referenciados por um mesmo nome. Em geral, criado por uma das formas: new Array(tamanho) // ou new Array(valor0, valor1, valor2, ...) // Exemplo: nivel = new Array("baixo","medio","alto"); nivel = new Array[3]; Para este ltimo, os valores devem ser dados individualmente: nivel[0] = "baixo"; nivel[1] = "medio"; nivel[2] = "alto"; // Exemplo com valores numricos: nivel = new Array(10, 20, 30); // Tambm pode ser criado a partir da forma literal: nivel = ["baixo", "mdio", "alto"]; join(sep): Junta seqencialmente os elementos de uma array usando o caractere (ou caracteres) dados por sep. Se ele no indicado, usa a vrgula como default. Exemplos: nivel = new Array("baixo","medio","alto"); str_1 = nivel.join(); //resulta "baixo,mdio,alto" em str_1 str_2 = nivel.join(", "); //resulta "baixo, mdio, alto" em str_2 str_3 = nivel.join("/"); //resulta "baixo/mdio/alto" em str_3 length: Indica o nmero de elementos em uma array. Pode ser usado para diminuir o comprimento de um objeto j definido. No pode aumentar. Exemplo: nivel = new Array("baixo","medio","alto","muito alto");
20/04/13
Apostila Javascript
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 varivel eliminado contm "muito alto" push(valor1, valor2, ...): Adiciona um ou mais elementos (valor1, valor2, etc) ao final de uma array, retornando o seu novo tamanho. Exemplo (a varivel novo ser 4 e os dois elementos sero adicionados): nivel = new Array("baixo","medio"); novo = nivel.push("alto","muito alto"); reverse(): Inverte a ordem dos elementos. O primeiro se torna o ltimo e o ltimo se torna o primeiro. Exemplo (nivel[0], nivel[1] e nivel[2] sero respectivamente "alto", "mdio" e "baixo"): nivel = new Array("baixo","medio","alto"); nivel.reverse(); shift(): Remove o primeiro elemento e retorna esse elemento, reduzindo o tamanho da array. Exemplo (a varivel removido ter "muito baixo" e a nivel no ter esse elemento): nivel = new Array("muito baixo","baixo","medio","alto"); removido = nivel.shift(); slice(ini [, fim]): Extrai uma parte de uma array e retorna uma nova com essa parte. O parmetro ini o ndice base zero a partir do qual comea a extrao. Os elementos so extrados at, mas no incluindo, o ndice base zero dado por fim. Se este no indicado, a operao se d at o final da seqncia. A funo no altera o objeto original. Os valores so copiados para a nova array. Exemplo (escreve: "baixo,mdio,alto"): nivel = new Array("muito baixo","baixo","medio","alto","muito alto"); document.write(nivel.slice(1,4); sort(func_comp): Ordena os elementos de uma array segundo o critrio da funo de comparao func_comp. Se esta no dada, a ordenao se d como se fosse um dicionrio. No caso de strings de texto, em geral essa operao desejada. No caso de nmeros, pode no ser, uma vez que, por exemplo, 12 fica antes de 4. A funo de comparao deve ser uma do tipo comparar(a,b) tal que: . Se retornar valor < 0, b fica em ndice menor que a; . Se retornar valor = 0, a e b no mudam de ndice; . Se retornar valor > 0, b fica em ndice maior que a. Para comparar nmeros, a funo pode ser simplesmente: function comparar(a, b){
20/04/13
Apostila Javascript
return a - b; } Exemplo: function comparar(a, b){ return a - b; } num = new Array("11", "10", "7", "8", "9"); document.write(num.sort()); //escreve 10,11,7,8,9 document.write("<br>"); //avana uma linha document.write(num.sort(comparar)); //escreve 7,8,9,10,11 splice(iniNdx, quant, [elm1][, ..., elmN]): Muda o contedo de uma array, adicionando novos elementos e removendo outros. iniNdx o ndice base zero a partir do qual a operao comea. quant um inteiro indicando o nmero de elementos a remover. Se zero, nenhum elemento removido, mas deve ser indicado pelo menos um novo elemento. elm1 ... elemN so os novos elementos a adicionar. Se no indicados, a funo apenas remove elementos. Se o nmero de elementos a adicionar diferente do nmero de elementos a remover, o tamanho da arrray alterado. A funo retorna uma array com os elementos removidos. Exemplos: num = new Array("10", "20", "30", "40"); document.write(num); //escreve 10,20,30,40 document.write("<br>"); //avana uma linha de_fora = num.splice(2,0,"25"); document.write(num); //escreve 10,20,25,30,40 document.write("<br>"); //avana uma linha de_fora = num.splice(2,1,"28"); document.write(num); //escreve 10,20,28,30,40 document.write("<br>"); //avana uma linha document.write(de_fora); //escreve 25 toString(): Retorna uma string com os elementos dispostos seqencialmente e separados por vrgula. Exemplo: num = new Array("10", "20", "30", "40"); str = num.toString(); //str contm "10,20,30,40" unshift(elm1,..., elmN): Adiciona um ou mais elementos no incio da array e retorna seu novo tamanho. Os parmetros (elm1, ..., elmN) so os novos elementos. Exemplo (escreve: "baixo,mdio,alto"): nivel = new Array("baixo","medio","alto","muito alto"); nivel.unshift("muito baixo");
20/04/13
Apostila Javascript
document.write(nivel); //escreve "muito baixo,baixo,medio,alto,muito alto"
Impressora
Para imprimir um arquivo use este cdigo: <script language="javascript"> <!-function Imprimir() { window.print(); } --> </script> <a href="javascript:Imprimir();">Imprimir</a>
Fechando um programa
Para interromper a execuo do programa que est sendo executado use o comando window.close(), exemplo: (...) <a href="javascript:window.close()">Fechar</a> (....)
Indo para um endereo sem usar <A>Link</A>

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

<script language="javascript"> largura = screen.width; //Capta a largura total do Monitor altura = screen.height; //Capta a altura total do Monitor document.write("Largura total do monitor: "+largura); document.write("<br>Altura total do monitor: "+altura); </script>
127/134
20/04/13
Apostila Javascript
Alterando o tamanho e movendo a janela de seu navegador

<script language="javascript">
window.moveTo(0,0);
//Move a janela dentro dos eixos x(horizontalmente) e y(verticalmente).
window.resizeTo(screen.availWidth, screen.availHeight);
//Permite o ajuste de largura de uma s vez. //screen.availWidth - Usa a LARGURA disponvel no monitor. //screen.availHeight - Usa a ALTURA disponvel no monitor.
// Obs: alterando os valores em pixels mover e alterar o tamanho da janela, ex: //window.moveTo(10,20); //Move a janela para o eixo 10 e 20; //window.resizeTo(100, 200); // Altera a largura para 100 e a altura para 200 </script>
Tela cheia
<html> <head> <title>Untitled Document</title> </head> <body> <FORM> <INPUT TYPE="BUTTON" NAME="BTN_FullScreen" VALUE="Modo tela cheia" OnClick="window.open(document.location, 'big', 'fullscreen=yes')"> </FORM> <br> <br> Fechar o browser <a href="javascript:window.close()" target="_top">Sair</a> <br> <br> </body> </html>
128/134
20/04/13
Apostila Javascript
Inativar boto direito do Mouse

<html> <title>Inativar Boto Direito Tambm No FireFox</title> <head> <script> function click() { if (event.button==2||event.button==3) { oncontextmenu='return false'; } } document.onmousedown=click document.oncontextmenu = new Function("return false;") </script> </head> <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 boto direito do mouse

<html> <title>Inativar Boto Direito Tambm No FireFox</title> <head> <script> function click() { if (event.button==2||event.button==3) { oncontextmenu='return false'; } } function alerta() { alert('Boto direito do mouse') } document.onmousedown=click document.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>
20/04/13
Apostila Javascript
</html>
Posio do Mouse (S funciona no Internet Explorer)

<html> <head> <title>Nova pagina 1</title> <script type="text/javascript"> function teste() { document.mouse.x.value = event.offsetX document.mouse.y.value = event.offsetY } </script> </head> <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"> <!-function exemplo() { var tecla = window.event.keyCode; window.status = "Voc pressionou a tecla: " + String.fromCharCode(tecla); alert("O Cdigo da tecla pressionada : " + tecla); } document.onkeypress = exemplo; //--> </script> </head>
20/04/13
Apostila Javascript
<body> <p align="center">Obtendo o Cdigo da tecla pressionada::.</p> </body> </html>
Endereo de IP
<script language="javascript"> //host - Armazena uma string com o formato "hostname:port" da pgina HTML atual. document.write('<p>Demostrao da propriedade host: '+location.host) //hostname - Armazena uma string, com o IP da pgina HTML atual. document.write('<p>Demostrao da propriedade hostname: '+location.hostname) //href - String identica a mostrada na barra "location" do browser. document.write('<p>A URL desta pgina : '+ location.href) //pathname - Contm uma string com o path da pgina HTML atual. document.write('<p>O path da URL desta pgina : '+ location.pathname) //port - Armazena a porta por onde est sendo feita a conexo com o servidor. document.write('<p>A porta usada para conexo com o servidor : '+ location.port) //protocol - String que armazena o protocolo de acesso a um determinado endereo. ("http:","ftp:","file:"). document.write('<p>O protocolo de acesso para esta pgina : '+ location.protocol) </script>
Informaes de seu navegador

<HTML> <HEAD> <TITLE> Exemplo </TITLE> </HEAD> <BODY> <SCRIPT> browserNome = window.navigator.appName browserCod = window.navigator.appCodeName browserVer = window.navigator.appVersion browserLingua = window.navigator.language browserPlat = window.navigator.platform browserJava = window.navigator.javaEnabled() document.write ("Voc utiliza o browser " + browserNome) document.write (", cujo cdigo " + browserCod) document.write (", na verso <I>" + browserVer + "</I>") document.write (". A linguagem do browser " + browserLingua) document.write (" e sua plataforma " + browserPlat) document.write (". O suporte a Java est ") if (browserJava) { document.write ("ativado.") } else {
20/04/13
Apostila Javascript
document.write ("desativado.") } </SCRIPT> </BODY> </HTML>
Criando objetos
<html><head><title> Cria Objeto </title> <script> function NovaFunc(nome,tel,UF){ this.nome=nome this.tel=tel this.UF=UF } </script> </head><body> <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 1 var carro1=new veiculo("Peugeot","106","1996",1100) document.write("marca = "+carro1.marca) document.write("<br>modelo = "+carro1.modelo) document.write("<br>Ano da matrcula = "+carro1.ano_matricula) document.write("<br>Cilindrada = "+carro1.cilindrada) document.write("<br><br><br>") //exemplo 2 var carro2=new veiculo()
20/04/13
Apostila Javascript
carro2[0]="Fiat"; carro2[1]="187"; carro2[2]="1995"; carro2[3]=2200; // Lista das propriedades do objeto for(var k=0; k<=3; k++) { document.write("Propriedade "+k+" = "+carro2[k]+"<br>"); } document.write("<br><br><br>") // exemplo 3 var carro3=new veiculo() carro3["marca"]="Ford" carro3["modelo"]="K2" carro3["ano_matricula"]="1999" carro3["cilindrada"]= 3300 document.write("marca = "+carro3.marca) document.write("<br>modelo = "+carro3.modelo) document.write("<br>Ano da matrcula = "+carro3.ano_matricula) document.write("<br>Cilindrada = "+carro3.cilindrada) </script>
Inserindo um texto na barra de ttulo e na barra de status

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

Apostila Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

Apostila Javascript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

20/04/13

Javascript Caso sensitivo

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

Criando um novo documento - O PRIMEIRO PROGRAMA

Carregando um arquivo externo

Comentrios de uma linha

Comentrio com mais de uma linha

Usando aspas dentro de aspas

Marca de tabulao \t Retorno de carro Backspace Exemplo: <script language="javascript"> document.write("<pre>")

Convertendo valores string para numrica

Resultado 13 5 18 3.333333 1 Resultado 9 12 21

Exemplo 2: Efetue clculos aritmticos usando parnteses

Usando Operadores Aritmticos

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

true (verdadeiro) true (verdadeiro) false (falso) false (falso)

| ^ Iremos estudar cada um:

Or lgico Xor lgico

Hierarquia dos operadores

Usando a clusula Else

Usando a clusula else if

Usando estrutura de deciso If

Usando Operadores relacionais

Usando operadores Booleanos

Usando o comando break

Escapando de um loop infinito utilizando a instruobreak

Comando de controle do Loop Break

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

Constana Barbosa Mier

Mercrio Vnus Terra Marte Jpiter Saturno Urano Netuno Pluto

0.024 0.625 1 1.91 12 29.9 85.24 167.19 251.29

58 108 150 228 778 1427 2869 4498 5900

Nota 1 Nota 2 Nota 3

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

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

Constana Barbosa Mier

12 21 Sagitrio Importante: Armazene o horscopo em uma array. <script language="javascript">

<script language="javascript"> Matriz=Array(Array(),Array(),Array(),Array()) Planeta=0 luas=1 anos=2 distancia=3

Variveis nulas (NULL)

Trabalhando com formulrios

10) Caixa de listagem

11) Caixas de dilogo

14) Barra de menu

15) Abrindo uma nova janela

maxlength Permite um limite de digitao de n caracteres

<p>Caracteres restantes: <span id="charCount">2048</span></p> </body> </html> Resultado:

7) Boto de opo (Radio):

8) Caixa de seleo (checkbox)

10) Caixa de listagem (Select)

<option>Bateria <option>Sax </select> </form> Resultado:

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

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

14) Barra de menu:

windth= pixels height = pixels left = pixels

[Largura em pixels] [altura em pixels] [posiciona da esquerda para direita]

Comunicao da janela modal

</body> </html> Exemplo:

Evento onLoad OnUnLoad onSubmit onClick onClick onClick onClick onClick

onmousedown script onmousemove script onmouseout script

onmouseover script onmouseup script

<html> <head> <title> onClick - 02 </title> </head> <body>