2010
JavaScript
Professora Lucélia Oliveira
Sumário
INTRODUÇÃO .....................................................................................................................................................................3
Exemplos práticos ................................................................................................................................................................4
Variáveis .............................................................................................................................................................................5
Operadores..........................................................................................................................................................................6
Lista de Exerícios 01.............................................................................................................................................................7
Estruturas de controle ...........................................................................................................................................................8
Estrutura If ...........................................................................................................................................................................8
Estrutura SWITCH ................................................................................................................................................................9
Estruturas de Repetição ......................................................................................................................................................10
Loop FOR ..........................................................................................................................................................................10
Loops WHILE e DO WHILE .................................................................................................................................................10
Funções em Javascript .......................................................................................................................................................11
Funções pré-definidas de Javascript ....................................................................................................................................12
Exercícios: Estruturas de controle ........................................................................................................................................13
Manipuladores de eventos...................................................................................................................................................14
Validação de Formulários ....................................................................................................................................................17
Objetos..............................................................................................................................................................................21
Outros Exemplos ................................................................................................................................................................27
Exercícios de Revisão.........................................................................................................................................................29
2
INTRODUÇÃO
A linguagem JavaScript foi criada em 1995 pela Netscape, com o objetivo de permitir a manipulação dinâmica
dos elementos de uma página HTML. Devido ao seu grande sucesso, a Microsoft decidiu implementar sua versão do
JavaScript que seria utilizada no Internet Explorer.
Existem três maneiras de incluir JavaScript em páginas HTML:
1. Colocando as instruções entre as tags <script> e </script>
<html>
<head><title>Uso de JavaScript I</title>
</head>
<body>
<script type = “text/javascript”>
<!—Var nome = “Olá Lucélia!”
Document.write(nome);
-->
</script>
</body>
</html>
2. Inserindo manipuladores de eventos dentro de tags HTML específicas.
<html>
<head><title>Uso de JavaScript II</title>
<script type = “text/javascript”>
<!—function mensagem(){
document.alert(“Seja bem-vindo(a)!!!”);
}
-->
</script>
</head>
<body onload = “mensagem();”>
</body>
</html>
3. Inserindo código JavaScript dentro de um arquivo com extensão .js e colocando o seu nome como valor do atributo
src no documento HTML:
function mensagem(){
exemplo.js
nome = document.prompt(“Informe o seu nome: ”);
document.alert(nome + “,Seja bem-vindo(a)!!!”);
}
<html>
<head><title>Uso de JavaScript II</title>
<script type = “text/javascript” src = “exemplo.js”>
</script>
</head>
<body onload = “mensagem();”>
</body>
</html>
3
Existem muitos tipos de eventos distintos, por exemplo, a pulsação de um botão, o movimento do mouse ou a seleção de
texto da página. Como funcionam esses eventos, veremos mais adiante.
Para evitar que o texto dos scripts se escreva na página quando os navegadores não os entendem, temos que ocultá-los
com comentários HTML (<!--comentario HTML -->). Exemplo de como se devem ocultar os scripts.
<SCRIPT>
<!-Código Javascript
//-->
</SCRIPT>
Exemplos práticos
Abrir uma janela secundária, inserir a data atual e inserir um botão para voltar.
Por exemplo: abrir uma janela secundária sem barras de menus que mostre o buscador Google:
<html>
<head>
<title>Exemplos JS</title>
</head>
<body>
<script type="text/javascript">
<!-Var data = new Date();
//Data no formato dd/mm/aaaa
document.write(“Hoje é “+ data.getDate() + “/” + data.getMonth() + “/” +
data.getFullYear());
window.open("http://www.google.com.br","Google","width=300,height=300");
//-->
</script>
<br />
<input type="button" value="Atrás" onclick="history.go(-1)">
</body>
</html>
Maiúsculas e minúsculas
JavaScript é faz distinção entre maiúsculas e minúsculas e devemos sempre usar letras minúsculas em nome de variáveis e
utilizar o padrão camelCase.
Apesar da linguagem não nos obrigar a utilizar (;) ponto e vírgula ao final das instruções, esta é uma boa prática, pois, outras
linguagens como Java ou C obrigam a utilizá-las e estaremos nos acostumando a realizar uma sintaxe mais parecida à habitual
em torno de programações avançadas.
4
Variáveis
Uma variável é um espaço em memória onde se armazena um dado.
Exemplo:
parcela1 = 23
parcela2 = 33
soma = parcela1 + parcela2
Nomes não válidos para variáveis:
12meses àcomeça com número
seu nome àcontém espaço
return à palavra reservada
pe%pe à caracter especial
Em JavaScript não é obrigatório a declaração de variáveis, mas, pode-se declarar utilizando a palavra var antes do nome da
variável.
Exempo:
var numero;
Também é permitido declarar e atribuir em um mesmo comando.
Exemplo:
Var numero = 10;
Escopo das variáveis
As variáveis podem ser locais e globais.
Variáveis globais
As variáveis globais são as que estão declaradas no âmbito mais amplo possível, que em Javascript é uma página web. Para
declarar uma variável global à página simplesmente faremos em um script, com a palavra var.
<script type="text/javascript">
var variávelGlobal;
</script>
Variáveis locais
Também poderemos declarar variáveis em lugares mais dimensionados, como por exemplo, uma função. A estas variáveis
chamaremos de locais. Quando se declarem variáveis locais somente poderemos acessá-las dentro do lugar aonde tenha sido
declaradas.
As variáveis podem ser locais em uma função, mas também podem ser locais a outros âmbitos, como por exemplo, um laço de
repetição.
Exemplo:
<script type="text/javascript">
function minhaFuncao) (){
var variavelLocal
}
</script>
5
A variável só poderá ser local se utilizarmos a palavra var e se estiver dentro de uma função ou bloco de repetição, por exemplo.
Exemplo de utilização das variáveis:
var parcela1 = 23
var parcela2 = "33"
var soma = parcela1 + parcela2
document.write(soma)
Operadores
Exemplos
preço = 128 //introduzo um 128 na variável preço
unidades = 10 //outra atribuição, logo veremos operadores de atribuição
fatura = preço * unidades //multiplico preço por unidades, obtenho o valor
fatura
resto = fatura % 3 //obtenho o resto de dividir a variável fatura por 3
preço++ //incrementa em uma unidade o preço (agora vale 129)
Operadores Lógicos
! Operador NO ou negação. Se é true passa a false e vice-versa.
&& Operador Y, se são os dois verdadeiros vale verdadeiro.
|| Operador O, vale verdadeiro se pelo menos um deles for verdadeiro.
Exemplo
meuBoleano = true
meuBoleano = !meuBoleano //meuBoleano agora vale false
tenhofome = true
tenhoComida = true
comoComida = tenhoFome && tenhoComida
Operadores Condicionais
== Comprova se dois números são iguais
!= Comprova se dois números são distintos
> Maior que, devolve true se o primeiro operador for maior que o segundo
< Menor que, é true quando o elemento da esquerda for menor que o da direita
>= Maior igual.
<= Menor igual
Caracteres Especiais
Alguns caracteres especiais que são permitidos em valores do tipo string:
· \b: retrocesso (backspace);
· \f: nova página (form feed);
· \n: nova linha (line feed);
· \r: retorno de carro (carriage return);
· \t: caracter de tabulação (tab).
6
Lista de Exerícios 01
Para a solução dos exercícios a seguir, use o método prompt() para fazer as entradas de dados e o
método alert() para mostrar os resultados.
Escolha uma das três formas de inserção de JavaScript de sua preferência.
1.
Faça um programa que leia dois números, calcule e imprima a soma desses dois números.
2.
Faça um programa que receba dois números, calcule e imprima a divisão do primeiro número pelo
segundo.
3.
Faça um programa que leia um número e informe a metade e o dobro desse número.
4.
Escrever um programa que permita receber o nome e a idade de uma pessoa e em seguida, informar
o nome digitado e a idade da pessoa daqui a 30 anos.
5.
Faça um programa que leia três notas de um aluno, calcule e imprima a média aritmética entre essas
notas.
6.
Faça um programa que receba dois números inteiros, calcule e imprima:
- soma do dois números;
- subtração do primeiro pelo segundo;
- subtração do segundo pelo primeiro;
- produto dos dois números;
- divisão do primeiro pelo segundo;
- quociente inteiro da divisão do primeiro pelo segundo;
- resto da divisão do primeiro pelo segundo.
7
Estruturas de controle
Tomada de decisões
São usadas para realizar umas ações ou outras em função do estado das variáveis. Ou seja, tomar decisões para executar umas
instruções ou outras dependendo do que esteja ocorrendo neste instante em nossos programas.
Por exemplo, dependendo se o usuário que entra em nossa página for maior de idade ou não, podemos lhe permitir ou não ver os
conteúdos de nossa página.
Se idade é maior que 18 então:
Deixo-lhe ver o conteúdo para adultos
Se não
Mando-lhe fora da página
Em JavaScript podemos tomar decisões usando duas estruturas distintas:
·
·
IF
SWITCH
Loops
Os loops se utilizam para realizar certas ações repetidamente. São muito utilizados em todos os níveis na programação. Com um
loop podemos por exemplo, imprimir em uma página os números de 1 ao 100 sem a necessidade de escrever cem vezes a
instrução a imprimir.
Desde o 1 até o 100
Imprimir o número atual
Em javascript existem vários tipos de loops, cada um está indicado para um tipo de repetição distinto e são os seguintes:
·
·
·
FOR
WHILE
DO WHILE
Estrutura If
Sintaxe:
if (expressão) {
ações a realizar em caso positivo
...
} else {
ações a realizar em caso negativo
...
}
Exemplos:
if (dia == "Segunda-feira")
document.write ("Que tenha um ótimo começo de semana")
if (credito >= preço) {
document.write("comprou o artigo " + novoArtigo) //mostro compra
carrinho += novoArtigo //coloco o artigo no carrinho da compra
credito -= preço //diminuo o crédito conforme o preço do artigo
8
} else {
document.write("acabou o seu crédito"); //informo que lhe falta dinhero
window.location = "carrinhodacompra. html"; //vou à página do carrinho
}
if (idade > 18)
document.write("pode ver esta página para adultos");
if (bateria == 0 && redeEletrica = 0)
document.write("seu laptop vai se apagar em segundos");
Estrutura SWITCH
Utilizada para tomar decisões em função de distintos estados das variáveis.
Sintaxe:
switch (expressão)
case valor1:
Sentenças a
break
case valor2:
Sentenças a
break
case valor3:
Sentenças a
break
default:
Sentenças a
}
{
executar se a expressão tem como valor a valor1
executar se a expressão tem como valor a valor2
executar se a expressão tem como valor a valor3
executar se o valor não é nenhum dos anteriores
Exemplo:
Switch (dia_da_semana) {
case 1:
document.write("É segunda-feira");
break;
case 2:
document.write("É terça-feira");
break;
case 3:
document.write("É quarta-feira");
break;
case 4:
document.write("É quinta-feira");
break;
case 5:
document.write("É sexta-feira ");
break;
case 6:
document.write("É fim de semana");
break;
default:
document.write("Esse dia não existe")
}
9
Estruturas de Repetição
Loop FOR
Sintaxe:
for (iniciação;condição;atualização) {
sentenças a executar em cada repetição
}
Exemplo:
for (i=1;i<=1000;i+=2)
document.write(i);
for (i=343;i>=10;i--)
document.write(i);
}
Exemplo de HTML e JavaScript
O que desejamos escrever em uma página web mediante JavaScript é o seguinte:
<H1>Cabeçalho de nível 1</H1>
<H2>Cabeçalho de nível 2</H2>
<H3> Cabeçalho de nível 3</H3>
<H4> Cabeçalho de nível 4</H4>
<H5> Cabeçalho de nível 5</H5>
<H6> Cabeçalho de nível 6</H6>
Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em cada repetição escreveremos o respectivo cabeçalho.
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Cabeçalho de nível " + i + "</H" + i + ">")
}
Loops WHILE e DO WHILE
Estes loops se utilizam quando queremos repetir um número indefinido de vezes a execução de umas sentenças, sempre que se
cumpra uma condição.
Sintaxe:
while (condição){
sentenças a executar
}
e
do {
sentenças do loop
} while (condição)
10
Exemplo:
var soma = 0
while (soma < 1000){
soma += parseInt(Math.random() * 100)
document.write (soma + "<br>")
}
Funções em Javascript
As funções são utilizadas constantemente, não só as que você escreve como também as que já estão definidas pelas linguagens,
pois todas as linguagens de programação têm várias funções para realizar processos habituais como, por exemplo, obter a hora,
imprimir uma mensagem na tela ou converter variáveis de um tipo a outro. Já vimos alguma função nos exemplos anteriores,
quando fazíamos um document.write() na verdade estávamos chamando à função write() associada ao documento da página que
escreve um texto na página.
Sintaxe:
function nomefuncao (){
instruções da função
...
}
Exemplos:
function escreverBoasvindas(){
document.write("<H1>Olá a todos</H1>");
}
Para chamar a função utilizamos seu nome seguido dos parênteses.
NomeDaFuncao()
A função deverá estar dentro do JavaScript e também deverá ser chamada dentro de um JavaScript.
<html>
<head>
<title>Minha Página</title>
<script>
function minhafuncao(){
//faço algo...
document.write("Isto está bom");
}
</script>
</head>
<body>
<div style=”text-align:center”>
<script>
minhafuncao()
</script>
</div>
</body>
</html>
Exemplo sem função:
<html>
<head>
<title>Untitled</title>
11
<script type="text/javascript">
<!-num1 = prompt("Informe o primeiro número","Insira aqui");
num2 = prompt("Informe o segundo número","Insira aqui");
total = num1 + num2;
alert("Soma = "+total);
//-->
</script>
</head>
<body>
<p>teste</p>
</body>
</html>
Exemplo com função:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!-function soma(){
num1 = prompt("Informe o primeiro número","Insira aqui");
num2 = prompt("Informe o segundo número","Insira aqui");
total = num1 + num2;
alert("Soma = "+total);
}
//-->
</script>
</head>
<body>
<button onclick="soma();">Somar</button>
<p>teste</p>
</body>
</html>
Funções pré-definidas de Javascript
Algumas funções pré-definidas de Javascript são:
·
eval (string), onde string representa uma expressão a ser resolvida,
retornando um valor numérico.
Exemplo:
x = 4;
eval (“3 + x + 8”);
Resultado = 15
·
parseInt(string, base), onde o primeiro parâmetro representa uma string a ser convertida para a base especificada no
segundo parâmetro.
12
Exercícios: Estruturas de controle
1. Faça um programa que receba o valor do salário-base de um funcionário, calcule e mostre o salário a receber, sabendose que este funcionário tem gratificação de 5% sobre o salário-base e paga imposto de 7% sobre o salário-base
(Estrutura Seqüencial).
2. Faça um programa que leia 10 números inteiros e exiba na tela a mensagem ‘Par’ se ele for um número par, ou ‘Ímpar’
se ele for um número ímpar (Estrutura de Seleção).
3. Faça um programa que receba duas notas de seis alunos, calcule e mostre (Utilize a Estrutura de Repetição
Determinada FOR):
A média aritmética das duas notas de cada aluno;
A mensagem que está na tabela a seguir:
Média aritmética
Abaixo de 3,0
De 3,0 a 7,0
Acima de 7,0
Mensagem
Reprovado
Exame
Aprovado
O total de alunos aprovados;
O total de alunos de exame;
Total de alunos reprovados;
A média da classe.
4. Faça um programa que receba a idade de 10 pessoas. O programa deve calcular e mostrar a quantidade de pessoas
com idade maior que 18 anos (Estrutura de Repetição Indeterminada WHILE).
13
Manipuladores de eventos
Existem duas categorias de manipuladores de eventos: eventos de sistema e eventos de mouse. Os eventos de sistema
disponíveis são: OnLoad e OnUnload. Eles não exigem a interação do usuário para serem ativados.
Os eventos de mouse disponíveis são: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver.
Eles exigem a interação do usuário (através do mouse ou não) para serem ativados.
ONLOAD
Este evento é ativado após a página HTML ser completamente carregada.
Exemplo:
<html>
<head>
<script language="Javascript">
function chegada() {
window.alert("A página foi carregada com sucesso!");
}
</script>
</head>
<body OnLoad="chegada()">
<p>
Veja que interessante utilização do evento OnLoad.
</p>
</body>
</html>
ONUNLOAD
Este evento é ativado após a página HTML ser abandonada (seja através do clique sobre algum link, ou sobre os botões
de avanço/retrocesso do browser).
Exemplo:
<html>
<head>
<script language="Javascript">
function saida() {
window.alert("Volte sempre!");
}
</script>
</head>
<body OnUnload="saida()">
<p>
Veja que interessante utilização do evento OnUnload.
<a href="http://www.google.com.br">Google</a>
</p>
</body>
</html>
ONCLICK
O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é ativado sempre que se dá um clique sobre um
objeto que aceita evento de clique de mouse. Objetos que aceitam um evento OnClick são links, caixas de verificação e botões.
Exemplo:
14
<html>
<head>
<script type="text/javascript">
function mensagem() {
window.alert("Você clicou neste campo");
}
</script>
</head>
<body>
<a href="http://www.google.com.br" OnClick="mensagem()">
Link comum</a><br>
<form>
<div>
<input type="radio" OnClick="mensagem()">Radio
<br />
<input type="checkbox" OnClick="mensagem()">Checkbox
<br />
<input type="reset" OnClick="mensagem()" value="Limpar">
<br />
<input type="submit" OnClick="mensagem()" value="Enviar">
<br />
</div>
</form>
</body>
</html>
ONFOCUS
O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usuário clicar ou alternar para um objeto
específico na página. Este evento pode ser associado aos objetos text, password, textarea e select (definidos pelas tags
<INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>
<script type="text/javascript">
<!-function foco() {
window.alert("O campo EMAIL está em foco");
}
//-->
</script>
</head>
<body>
<form>
<div>
Nome: <input name="nome" type="text"><br>
Email: <input name="email" type="text" OnFocus="foco()"><br>
Telefone: <input name="telefone" type="text">
</div>
</form>
</body>
</html>
ONBLUR
Este evento é ativado quando um objeto torna-se fora de foco - quando se muda para outra janela, ou aplicativo, ou quando se
passa para outro objeto utilizando cliques do mouse, ou a tecla TAB. Ele é associado aos objetos text, password, textarea e select
(definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
15
Exemplo:
<html>
<head>
<script type="text/javascript">
<!-function semFoco() {
window.alert("O campo EMAIL perdeu o foco");
}
//-->
</script>
</head>
<body>
<form>
<div>
Nome: <input name="nome" type="text"><br>
Email: <input name="email" type="text" OnBlur="semFoco()"><br>
Telefone: <input name="telefone" type="text">
</div>
</form>
</body>
</html>
ONCHANGE
Este evento é ativado sempre que um objeto perde o foco e o seu valor é alterado. Ele é associado aos objetos text, password,
textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>
<script type="text/javascript">
function mudou1() {
document.form1.completo.value=document.form1.nome.value;
}
function mudou2() {
document.form1.completo.value=document.form1.completo.value
+ " " + document.form1.sobrenome.value;
}
</script>
</head>
<body>
<form name="form1">
<pre>
Nome:
<input name="nome" type="text" OnChange="mudou1()">
Sobrenome:
<input name="sobrenome" type="text" OnChange="mudou2()">
Nome completo:
<input name="completo" type="text">
</pre>
</form>
</body>
</html>
Exercício
Faça uma terceira função que receba o primeiro, segundo e último nome e mostre em um quarto <input> o nome gerado pelos
três campos anteriores.
16
ONSELECT
Este evento é ativado quando o usuário seleciona (deixa em destaque) parte do texto em um dos objetos aos quais está
associado. São eles: text, password e textarea (definidos pelas tags <INPUT> e <TEXTAREA>).
Exemplo:
<html>
<head>
<script type="text/javascript">
function selecao() {
window.alert("Campo selecionado");
}
</script>
</head>
<body>
<form>
<pre>
Campo input texto:
<input type="text" OnSelect="selecao()">
Campo input senha:
<input type="password" OnSelect="selecao()">
Campo textarea:
<textarea OnSelect="selecao()"></textarea>
</pre>
</form>
</body>
</html>
ONSUBMIT
Este evento é ativado no momento de enviar os dados do formulário. Ele é associado ao objeto form (definido pela tag <FORM>).
Exemplo:
<html>
<head>
<script type="text/javascript">
function submete() {
window.alert("Evento OnSubmit ativado!");
}
</script>
</head>
<body>
<div>
<form name="form1" OnSubmit="submete()">
Campo 1: <input type="text" size="10" name="campo1"><br />
Campo 2: <input type="text" size="10" name="campo2"><br />
<input type="submit" value="Enviar">
</form>
</div>
</body>
</html>
Validação de Formulários
Muitas vezes, os dados que são inseridos em um formulário precisam ser separados, analisados, manipulados ou
verificados quanto a erros antes de serem transmitidos para o servidor. O evento OnSubmit permite a captura e, se necessário, a
interrupção do envio dos dados de um formulário. Isto é realizado chamando-se a função a partir do manipulador OnSubmit,
fazendo com que ela retorne verdadeiro ou falso. Se a função associada ao manipulador retornar falso, os dados do formulário
não serão enviados. Esta funcionalidade pode ser verificada a partir do código a seguir.
17
Exemplos:
Exemplo de validação de campos do tipo text
<html>
<head>
<script type="text/javascript">
function submete() {
if
(document.form1.campo1.value
==
""
||
document.form1.campo2.value == "") {
alert("É necessário preencher todos os campos!!!");
return false;
}
else {
alert("Dados enviados com sucesso!!!");
return true;
}
}
</script>
</head>
<body>
<form name="form1" action="#" OnSubmit="return submete()">
Campo 1: <input type="text" size="10" name="campo1"><br />
Campo 2: <input type="text" size="10" name="campo2"><br />
<input type="submit" value="Enviar">
</form>
</body>
</html>
Exemplo de validação de campos numéricos
<html>
<head>
<script type="text/javascript">
function submete() {
if
(isNaN(document.form1.cpf.value)||isNaN(document.form1.idade.value)){
alert("Preencha
os
campos
CPF
e
idade
apenas
números!!!");
return false;
}
else {
alert("Dados enviados com sucesso!!!");
return true;
}
}
</script>
</head>
<body>
<form name="form1" action="#" OnSubmit="return submete()">
CPF: <input type="text" size="10" name="cpf"><br />
Idade: <input type="text" size="10" name="idade"><br />
<input type="submit" value="Enviar">
</form>
</body>
</html>
com
18
Exemplo de validação de campos do tipo checkbox
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!-function verifica(){
if ((form1.cultura.checked == false)&& (form1.esporte.checked
== false) && (form1.lazer.checked == false)){
alert("Marque pelo menos uma questão!");
return false;
}
else{
alert("Dados enviados com sucesso!!!");
return true;
}
}
//-->
</script>
</head>
<body>
<form action="#" name="form1" OnSubmit="return verifica()">
<p>Escolha sua opção:<br />
<input type="checkbox" name="cultura" />Cultura <br />
<input type="checkbox" name="esporte" />Lazer<br />
<input type="checkbox" name="lazer" />Esporte<br />
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
Exemplo de validação de campos do tipo botões de radio
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!-function verifica(){
if
((form1.opcao[0].checked
==
false)
(form1.opcao[1].checked == false) && (form1.opcao[2].checked == false)){
alert("Marque uma das opções!!!");
return false;
}
else{
alert("Dados enviados com sucesso!!!");
return true;
}
}
&&
//-->
</script>
</head>
<body>
<form action="#" name="form1" OnSubmit="return verifica()">
<p>Escolha sua opção:<br />
<input type="radio" name="opcao" />Cultura <br />
<input type="radio" name="opcao" />Lazer<br />
<input type="radio" name="opcao" />Esporte<br />
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
19
Exemplo de validação de campos de seleção
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!-function listaSelecao(site) {
if(!(document.form1.site.options[1].selected
||document.form1.site.options[2].selected)){
alert("É obrigatória a seleção de um item");
return false;
}
else{
alert("Dados selecionados com sucesso!!!");
return true;
}
}
//-->
</script>
</head>
<body>
<form action="#" name="form1" onsubmit="return listaSelecao(site)">
<p>Escolha uma das opções<br />
<select name="site">
<option value="0">Escolha uma Opção</option>
<option value="1">Google</option>
<option value="2">Yahoo</option>
</select>
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
ONMOUSEOVER
Este evento é ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou botões.
Exemplo:
<html>
<head>
<script language="Javascript">
function ativa() {
window.alert("Evento OnMouseOver ativado!");
}
</script>
</head>
<body>
<a href="http://www.google.com.br" OnMouseOver="ativa()">
Passe o mouse sobre este link</a>
<form>
<input type="reset" value="Botão Reset" OnMouseOver="ativa()"><br />
<input type="submit" value="Botão Submit" OnMouseOver="ativa()">
</form>
</body>
</html>
20
Objetos
Hierarquia
O nível mais alto de objetos em Javascript consiste naqueles objetos que pertencem a navigator (navegador).
Diretamente abaixo deste nível, estão os objetos window (janela). Cada janela tem uma árvore de níveis que se ramifica a partir
dela. Estas árvores consistem em location (localização), history (histórico) e document (documento). A cada nível há outros
objetos e abaixo da árvore de documentos há outra ramificação. Neste nível, há três objetos array – forms (formulários), anchor
(âncoras) e links.
No browser, os objetos seguem a mesma estrutura hierárquica da página HTML: de acordo com essa hierarquia, os
descendentes dos objetos são propriedades desses objetos.
Quando uma página é carregada no browser, ele cria um número de objetos de acordo com o conteúdo da página. Os
seguintes objetos são sempre criados, independentemente do conteúdo da página: window, location, history e document.
A Natureza Orientada a Objetos de XHTML
Javascript considera HTML uma linguagem orientada a objetos, na qual os diversos tags HTML correspondem a diferentes tipos
de objetos Javascript.
Exemplo:
<html>
<head><title>Minha pagina</title>
<script type="text/javascript">
<!-function manipulaObjetos(){
document.title = "Novo Título";
}
//-->
</script>
</head>
<body>
<form>
<p>
<script type="text/javascript">
<!-manipulaObjetos();
//-->
</script>
</p>
</form>
</body>
</html>
A partir do código acima, obtem-se os seguintes objetos Javascript:
·
·
·
document.title : título da página
document.formulario1 : formulário da página
document.formulario1.botao1 : botão do formulário
Este é apenas um exemplo dos objetos que Javascript cria automaticamente de HTML. Observe que quase todo elemento HTML
pode ser usado como um objeto. Além disso, é possível ler e atribuir valores a estes objetos dinamicamente.
Tenha em mente que à medida que se estrutura uma página, também está se definindo objetos e seus valores para Javascript. As
próximas seções apresentam detalhadamente o conjunto de objetos da linguagem Javascript.
21
OBJETO NAVIGATOR
Este objeto dá informações sobre o navegador. Ele apresenta as seguintes propriedades: appName, appVersion, appCodeName,
userAgent.
· Propriedade appName: retorna o nome do browser do usuário.
Exemplo: navigator.appName = Netscape
· Propriedade appVersion: retorna a versão do browser e a versão do sistema operacional em que ele está rodando. [
formato: número da versão (plataforma; país) ]
Exemplo: navigator.appVersion = 2.0 (Win95; I)
· Propriedade appCodeName: retorna o nome do código de desenvolvimento interno do desenvolvedor de um browser
específico.
Exemplo: navigator.appCodeName = Mozilla
· Propriedade userAgent: usada em cabeçalhos HTTP para fins de identificação, é a combinação das propriedades
appCodeName e appVersion. Servidores Web usam esta informação para identificar os recursos que o navegador
dispõe.
Exemplo: navigator.userAgent=Mozilla/2.0 (Win95; I)
OBJETO LOCATION
Este objeto é utilizado para identificar o documento corrente. Ele consiste em uma URL completa no formato
protocolo//servidor:porta/caminho seguidos de ?search ou #hash.
Suas propriedades são: protocol, hostname, port, pathname, search, hash. Cada uma de suas propriedades representa
uma parte da URL total.
· Propriedade protocol: retorna o protocolo de transporte do documento.
Exemplo: location.protocol = http:
· Propriedade hostname: identifica o nome do computador hospedeiro.
· Propriedade port: especifica a porta para o endereço. Esta informação é utilizada apenas se uma porta não-padrão
estiver sendo usada.
· Propriedade pathname: define o caminho e o nome do arquivo.
· Propriedade search: retorna quaisquer comandos de consulta que possam estar embutidos na URL corrente. Valores de
search são separados do resto da URL por um sinal de interrogação (“?”).
Exemplo: location.search = nome=Joao
· Propriedade hash: retorna quaisquer âncoras que possam ter sido passadas na URL. Valores de hash são separados do
resto da URL por um sinal de cerquilha (“#”).
Exemplo: location.hash = capitulo1
OBJETO CHECKBOX
Utilizado na construção de caixas de verificação. Suas propriedades são: name, value, checked, defaultChecked.
· Propriedade name: especifica o nome da caixa.
· Propriedade value: especifica o valor da caixa.
Exemplo:
nomeForm.nomeCheckbox.value = “1”
· Propriedade checked: valor booleano que especifica o estado de seleção da caixa (selecionada ou não-selecionada).
Exemplo:
if ( nomeForm.nomeCheckbox.checked == true ) {
funcao();
}
· Propriedade defaultChecked: valor booleano que especifica o estado default de seleção da caixa.
Exemplo completo:
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
22
<!-function verifica(){
if (document.form1.azul.checked == true ){
window.document.body.style.backgroundColor = "blue";
}
else
if (document.form1.vermelho.checked == true ){
window.document.body.style.backgroundColor = "red";
}
else
if (document.form1.amarelo.checked == true ){
window.document.body.style.backgroundColor = "yellow";
}
}
//-->
</script>
</script>
</head>
<body>
<form action="#" name="form1">
<p>Escolha a cor do site<br />
<input type="checkbox" name="azul" />Azul <br />
<input type="checkbox" name="vermelho" />Vermelho<br />
<input type="checkbox" name="amarelo" />Amarelo<br />
</p>
</form>
<p>
<button onclick="verifica();">OK</button>
</p>
</body>
</html>
OBJETO RADIO
Corresponde a um array de botões, onde todos os botões compartilham a mesma propriedade name. Suas propriedades são:
name, checked, defaultChecked, length.
· Propriedade name: especifica o nome do objeto.
· Propriedade checked e defaultChecked: funcionamento idêntico ao definido em checkbox.
· Propriedade length: especifica o comprimento do array.
Exemplo:
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!-function verifica(){
if (form1.cor[0].checked == true )
window.document.body.style.backgroundColor = "blue";
else
if (form1.cor[1].checked == true)
window.document.body.style.backgroundColor = "red";
else
if (form1.cor[2].checked == true)
window.document.body.style.backgroundColor = "yellow";
}
//-->
</script>
</head>
23
<body>
<form action="#" name="form1">
<p>Escolha a cor do site<br />
<input type="radio" name="cor" />Azul<br />
<input type="radio" name="cor" />Vermelho<br />
<input type="radio" name="cor" />Amarelo<br /><br />
</p>
</form>
<p>
<button onclick="verifica()">OK</button>
</p>
</body>
</html>
OBJETO HIDDEN
Utilizado para enviar informações quando o formulário é submetido (este objeto não aparece no formulário). Suas propriedades
são: name, value.
· Propriedade name: especifica o nome do objeto.
· Propriedade value: especifica a informação que está sendo passada.
OBJETO TEXT
Utilizado para entrada/saída de dados. Suas propriedades são: name, value, defaultValue.
· Propriedade name: especifica o nome do objeto.
· Propriedade value: especifica o valor do objeto.
· Propriedade defaultValue: especifica o valor default do objeto.
OBJETO RESET
Utilizado para limpar dados de um formulário. Suas propriedades são: name, value.
· Propriedade name: especifica o nome do botão.
· Propriedade value: especifica o título colocado na face do botão.
Exemplo: document.form.botao.value=“novo titulo”
OBJETO SUBMIT
Utilizado para interfacear Javascript e outros scripts/programas. Suas propriedades são: name, value.
· Propriedade name: especifica o nome do botão.
· Propriedade value: especifica o título colocado na face do botão.
OBJETO BUTTON
Utilizado na construção de interfaces. Suas propriedades são: name, value.
· Propriedade name: especifica o nome do botão.
· Propriedade value: especifica o título colocado na face do botão.
OBJETO TEXTAREA
Utilizado para entrada/saída de dados. Suas propriedades são: name, value, defaultValue.
· Propriedade name: especifica o nome do objeto.
· Propriedade value: especifica o valor do objeto.
· Propriedade defaultValue: especifica o valor default do objeto.
24
OBJETO SELECT
Utilizado para construir caixas de seleção. Suas propriedades são: name, options, length.
· Propriedade name: especifica o nome do objeto.
· Propriedade options: array que contém uma entrada para cada opção de uma caixa de seleção.
· Propriedade length: especifica o comprimento do array de opções.
O exemplo a seguir identifica que opções foram selecionadas na caixa de seleção.
Exemplo:
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!-function listaSelecao(site) {
if (document.form1.site.options[1].selected){
window.open("http://www.google.com.br","Google","status:no;left:100px");
}
else
if (document.form1.site.options[2].selected){
window.open("http://www.yahoo.com.br");
}
}
//-->
</script>
</script>
</head>
<body>
<form action="#" name="form1">
<p>Escolha um dos sites:<br />
<select name="site">
<option value="0">Escolha uma Opção</option>
<option value="1">Google</option>
<option value="2">Yahoo</option>
</select>
</p>
</form>
<p>
<button onclick="listaSelecao()">OK</button>
</p>
</body>
</html>
Objetos do CORE Javascript
Os objetos do CORE Javascript são os objetos instrínsecos da linguagem, isto é existem tanto no cliente (navegador), quanto no
servidor Web.
Os objetos do Client-Side Javascript e do Server-Side Javascript somente funcionam, respectivamente, em programas escritos
para o navegador e para o servidor Web.
OBJETO ARRAY
É possível criar um vetor através do objeto Array, pré-definido no Javascript.
nome_do_array = new Array(10)
Para inserir e consultar elementos de um array, deve-se utilizar a seguinte sintaxe: nome_do_array[x]
A variável x representa o índice de um elemento. O primeiro elemento é o de número 0.
25
OBJETO DATE
O objeto Date lhe ajuda a manipular datas. Para criar um objeto do tipo Date, deve-se utilizar a seguinte sintaxe:
nome_do_objeto = new Date(parâmetros)
Se não for indicado nenhum parâmetro, será criado um objeto com a data e a hora atual do sistema. É possível passar uma string
representando uma data e hora como parâmetro:
x = new Date(“October 01, 2001 08:00:00”)
Caso sejam omitidos hora, minuto e segundo, o valor padrão será 0. Outra forma de indicar data e hora é através de uma série de
parâmetros numéricos, representando o ano, mês, dia, hora, minutos e segundos.
A função Date( ) retorna a data atual.
OBJETO STRING
Em Javascript, toda string é um objeto, e, portanto, tem métodos e propriedades associadas.
· length (propriedade): retorna o comprimento de um string.
Sintaxe: string.length
· indexOf( ) (método): retorna a posição da primeira ocorrência do caracter procurado dentro de um string específico. As
posições dos caracteres que compõem um string variam entre "0" e "comprimento do string - 1" (length - 1). Se o caracter
procurado não for encontrado em nenhuma posição, o método retorna "-1".
Sintaxe: string.indexOf(caracter_procurado,posição_inicial_de_busca)
· charAt( ) (método): retorna o caracter encontrado na posição indicada.
Sintaxe: string.charAt(posição)
· toUpperCase( ) (método): traduz todo caracter dentro de uma string para letra maiúscula.
Sintaxe: string.toUpperCase()
· toLowerCase( ) (método): traduz todo caracter dentro de uma string para letra minúscula.
Sintaxe: string.toLowerCase()
· substring( ) (método): retorna uma sequência de caracteres de uma string maior.
Sintaxe: string.substring(índiceA, índiceB)
onde índiceA e índiceB são ambos valores numéricos entre 0 e a propriedade de string length.
OBJETO WINDOW
O objeto window representa a janela do navegador ou um frame. É criado um objeto window sempre que o navegador encontra
uma tag <BODY>.
Propriedades mais utilizadas:
· defaultStatus: a mensagem que será exibida quando não tiver nenhuma outra na status bar do navegador. Cuidado para
não confundir com a propriedade status, que reflete umas mensagens transitórias, adequadas para um certo momento
ou ação do usuário;
· Height: esta propriedade contém a altura, em pixels, da janela do navegador;
· Width: semelhante à propriedade anterior, porém trabalha com a largura;
· name: representa o nome da janela;
· status: especifica a mensagem a ser exibida na status bar do navegador. É muito útil para comunicar ao usuário
pequenas mensagens.
Métodos mais utilizados:
·
·
·
·
alert( ): exibe uma mensagem para o usuário. A string com a mensagem deve ser passada para o método como
parâmetro;
back( ): é equivalente a apertar o botão back do navegador. Ou seja, volta atrás na última navegação feita pelo usuário;
forward( ): tem o mesmo efeito do botão forward do navegador. Ou seja, se o usuário tiver apertado o botão back para
voltar à última página visitada, o forward avança novamente para a página mais recente;
open( ): abre uma nova janela. O método recebe como parâmetros uma URL (o endereço da página que vai ficar na nova
janela), o nome da janela e uma string com suas carcterísticas;
26
·
·
·
close( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por ele. Caso
contrário, aparece uma caixa de confirmação para o usuário;
confirm( ): exibe uma caixa de mensagem para o usuário com duas opções: OK e Cancel. Caso o usuário pressione OK,
o método retorna true. Caso contrário, false. Ele recebe como parâmetro uma string com a mensagem a ser exibida para
o usuário;
prompt( ): exibe uma caixa de mensagem e campo para o usuário entrar com uma string. O método retorna a string
digitada pelo usuário. São aceitos dois parâmetros. O primeiro é uma string com a mensagem a ser exibida e o segundo
é o valor padrão da string a ser digitada pelo usuário.
Outros Exemplos
1. Exemplo de uma calculadora simples:
<html>
<head>
<script type="text/javascript">
<!--- Escondendo o script de browsers antigos
function calcula(form1) {
if (confirm("Tem certeza?"))
form1.result.value = eval(form1.expr.value);
else
alert("Tente novamente");
}
// fim do script -->
</script>
</head>
<body>
<h1>Calculadora</h1>
<div>
<form name="form1" action="#">
Forneça uma expressão matemática:
<input type="text" name="expr" size="15" /><br /><br />
<input type="button" VALUE="Calcule"
onClick="calcula(form1)" />
<input type ="reset" VALUE="Limpar"> <br /><br />
</div>
</body>
</html>
Resultado:
<input type ="text" NAME="result" SIZE=15 />
</ form >
2. Relógio Digital
<html>
<head>
<title>Relógio Animado</title>
<script type="text/javascript">
<!-- esconder de clientes antigos
function relogio()
{
var agora = new Date();
27
var
horas=agora.getHours()<10?"0"+agora.getHours():agora.getHours();
var
minutos=agora.getMinutes()<10?"0"+agora.getMinutes():agora.getMinutes();
var
segundos=agora.getSeconds()<10?"0"+agora.getSeconds():agora.getSeconds();
document.form1.caixa.value=horas+":"+minutos+":"+segundos;
setTimeout("relogio()", 1000);
}
// -->
</script>
</head>
<body onLoad="relogio()">
<form name="form1">
<input type="text" value="" name="caixa">
</form>
</body>
</html>
3. Seguindo o ponteiro do mouse
<html>
<head>
<title>Animacao e Eventos</title>
<style type="text/css">
#bloco { position: absolute; top: 50px; left: 50px }
</style>
<script type="text/javascript">
function m(e)
{
document.getElementById("bloco").style.left=e.clientX;
document.getElementById("bloco").style.top=e.clientY;
}
</script>
</head>
<body onMouseMove="m(event)">
<span id="bloco">Sempre a seguir !!!</span>
</body>
</html>
4. Banner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Banners Animados</title>
</head>
<script type="text/javascript">
<!-var mensagens = ["um", "dois", "três", "quatro"];
var contador = 0;
28
function animarBanner()
{
if(document.getElementById)
document.getElementById('alvo').innerHTML=mensagens[contador];
else
if(document.layers)
{
with (document.alvo.document)
{
open();
write(mensagens[contador]);
close();
}
}
contador++;
if (contador >= mensagens.length)
contador = 0;
setTimeout("animarBanner()",500);
}
//-->
</script>
<body onload="animarBanner()">
<div id="alvo"></div>
</body>
</html>
Exercícios de Revisão
1. Faça uma página que solicite o nome do aluno e escreva na tela uma mensagem de boas-vindas (“Bem-Vindo,
NomeDoAluno”) em título <h1>.
Em seguida, apresente dois input type=”text” para entrada de valores inteiros e quatro botões para efetuar as operações
matemáticas básicas (+, -, %, *). O resultado deve ser impresso em um terceiro input type=”text”.
29
2. Faça um script que solicite a entrada da idade do usuário e apresente a seguinte saída (numa caixa de alerta):
-
se a idade for menor que 18 :
“Você pode entrar no site. Divirta-se!”
-
se a idade for igual ou maior que 18:
“Você não pode entrar no site. ”
3. Qual a saída após a execução deste código?
<script type="text/javascript">
soma = 0;
num = 1;
while (num <= 20) {
soma += num;
num++;
}
document.write("Resultado : = " + soma)
</script>
4. Qual a saída após a execução deste código?
<script type="text/javascript">
test = "Professora Lucélia Oliveira";
parts = test.split(" ");
document.write(parts[0] + "<br>");
document.write(parts[1] + "<br>");
document.write(parts[2] + "<br>");
</script>
5. Qual a saída após a execução deste código?
<script type="text/javascript">
numero = prompt("Digite um numero");
for(num = 1; num <= 5; num++)
document.write(num + numero + " ");
</script>
30
6. Desenvolva um código para criar o formulário abaixo. Utilize JavaScript para validar se todos os campos estão
preenchidos ou marcados. Caso não esteja, emitir ume mensagem solicitando que o campo seja preenchido.
31
Download
