Formulario e JavaScript (1)
-
Upload
lucassfair -
Category
Documents
-
view
56 -
download
0
Transcript of Formulario e JavaScript (1)
HTML - Formulários
Ambiente Gráfico ou Visual
Objetos
Propriedades Eventos Métodos
HTML - Formulários
Os formulários permitem dotar uma página web de elementos interativos
os quais possibilitam um diálogo com usuário da internet .
Os formulários são definidos por meio das etiquetas <form> e </form>.
Entre estas duas etiquetas pode-se colocar objetos de formulário que
serão vistos a seguir.
A marcação <form> tem os seguintes atributos.:
<form name = “nome” method = post / get action = “arquivo”>
...
</form>
HTML - Formulários
Caixa de Texto e Propriedades
<input type=text name=“nome” maxlength = qtde. caracteres
size = tamanho caixa value = “conteúdo” readonly disabled>
Exemplo:
Endereço: <input type = text name=“endr” maxlength = 30 size = 30
value = “Seu endereço”>
Endereço: Seu endereço
Caixa de Texto tipo Senha e Propriedades
<input type = password name = “nome” maxlength = qtde.caracteres
size=tamanho caixa value = “conteúdo” readonly disabled >
Exemplo:
Senha: <input type = password name=“s1” maxlength = 8 size = 8>
Senha:
HTML - Formulários
HTML - FormuláriosMúltipla escolha e Propriedades
<input type = checkbox name=“nome” value = “conteúdo” checked
disabled>
Exemplo:
Esporte(s) que pratica:
<input type = checkbox name=“fut” value = “F”> Futebol
<input type = checkbox name=“vol” value = “V”> Vôlei
<input type = checkbox name=“bas” value = “B”> Basquete
<input type = checkbox name=“nat” value = “N”> Natação
Esporte(s) que pratica: Futebol Vôlei Basquete Natação
HTML - Formulários
Única Escolha e Propriedades
<input type = radio name=“nome” value = “conteúdo” checked
disabled>
O agrupamento de opções do botão RADIO é feita através da
propriedade NAME.
Exemplo:
Reside em:
<input type = radio name=“reside” value = “C” checked> Casa térrea
<input type = radio name=“reside” value = “A”> Apartamento
<input type = radio name=“reside” value = “S”> Sobrado
Reside em:
HTML - Formulários
Botões de Ação e Propriedades
Botão SUBMIT causa o envio dos dados de entrada para o servidor e para
outra página. Trabalha em conjunto com a marcação FORM e parâmetro
ACTION:
<input type = submit name = “nome” value = “rótulo” disabled>
Exemplo:
<input type = submit name = “env” value = “Enviar dados”>
Enviar dados
HTML - Formulários
Botões de Ação e Propriedades
Botão RESET restaura os valores iniciais das entradas de dados.
<input type = reset name = “nome” value = “rótulo” disabled>
Exemplo:
<input type = reset name = “limpa” value = “Restaura página”>
Restaura página
HTML - Formulários
Botões de Ação e Propriedades
Botão do tipo BUTTON não têm comportamento pré-definido, sendo
usados apenas em scripts no lado cliente.
.
<input type = button name = “nome” value = “rótulo” disabled>
Exemplo:
<input type = button name = “calc” value = “Calcular”>
Calcular
É uma imagem que age como botão submit.
<input type="image" src=“imagem.ext" width = largura height = altura>
HTML - Formulários
Imagem e Propriedades
<input type="image" src="botao_01.jpg" width=100 height=30><p>
<input type="image" src="botao_02.jpg" width=70 height=50><p>
<input type="image" src="home.jpg" width=100 height=30><p>
HTML - Formulários
Caixa de Seleção e Propriedades
<select name = “nome“ size = nº linhas visíveis inicialmente disabled>
<option value = “valor” selected> texto </option>
...
<option value = “valor”> texto </option>
</select>
<select name = "funcoes" size = 1>
<option value="1">Analista de Sistemas</option>
<option value="2">Analista de Segurança</option>
<option value="3">Analista de Negócios</option>
<option value="4">Administrador de BD</option>
<option value="5">Administrador de Redes</option>
<option value="6">Programador</option>
</select>
HTML - Formulários
Caixa de Seleção e Propriedades
<select name = "funcoes" size = 3>
<option value="1">Analista de Sistemas</option>
<option value="2">Analista de Segurança</option>
<option value="3">Analista de Negócios</option>
<option value="4">Administrador de BD</option>
<option value="5">Administrador de Redes</option>
<option value="6">Programador</option>
</select>
HTML - Formulários
Caixa de Seleção e Propriedades
<select name = "funcoes" size = 3>
<option value="1” selected>Analista de Sistemas</option>
<option value="2">Analista de Segurança</option>
<option value="3“>Analista de Negócios</option>
<option value="4">Administrador de BD</option>
<option value="5">Administrador de Redes</option>
<option value="6">Programador</option>
</select>
<select name="funcoes" size=1>
<option value="">-- Escolha uma função --</option>
<option value="1">Analista de Sistemas</option>
<option value="2">Analista de Segurança</option>
<option value="3">Analista de Negócios</option>
<option value="4">Administrador de BD</option>
<option value="5">Administrador de Redes</option>
<option value="6">Programador</option>
</select>
HTML - Formulários
Caixa de Seleção e Propriedades
HTML - Formulários
Área de Texto e Propriedades
O controle TEXTAREA é um campo de texto multi-linha. Os atributos rows e cols
definem o número de linhas de altura e o de "caracteres" de largura,
respectivamente.
<textarea name=“nome" rows = nºlinhas cols = nºcaracteres readonly disabled>
Texto ....
</textarea>
Exemplo:
<textarea name="comentarios" rows = 5 cols = 40>
Entre com seus comentários.
</textarea>
HTML - FormuláriosAplicação – Cadastro de Alunos
HTML - FormuláriosAplicação – Cadastro de Alunos - Código
<html>
<body>
<font face=arial><center>
Faculdade Sabetudo<br>
Cadastro de Alunos<br></center>
<hr size=3 color=black>
<form name="cadastro">
<table>
<tr><td>Matrícula:</td><td><input type = text name="matricula" maxlength=9 size=9></td></tr>
<tr><td>Nome:</td><td><input type = text name="nome" maxlength=30 size=45></td></tr>
<tr><td>Curso:</td><td>
<select name="cursos" size=1>
<option value="">--- Escolha um dos cursos ---</option>
<option value="AS">Análise de Sistemas</option>
<option value="GR">Gerenciamento de Redes</option>
<option value="SI">Segurança da Informação</option>
<option value="BD">Banco de Dados</option>
<option value="ST">Sistemas para Internet</option>
<option value="GP">Gerenciamento de Projetos</option>
</select></td></tr>
<tr><td>Login:</td><td><input type = text name="login" maxlength=10 size=15></td></tr>
<tr><td>Senha:</td><td><input type = password name="senha" maxlength=6 size=6></td></tr>
</table><br>
Período:
Diurno<input type = radio name="per" value="D">
Noturno<input type = radio name="per" value="N" checked>
<br><br>
Idioma(s) (básico):
Inglês<input type = checkbox name="ing" value="I">
Espanhol<input type = checkbox name="esp" value="E">
Francês<input type = checkbox name="fra" value="F">
Alemão<input type = checkbox name="ale" value="A">
<br><br>
Observações:<br>
<textarea name="obs" rows = 3 cols = 30></textarea>
<br><br>
<input type=submit name="sub" value="Submeter">
<input type=reset name="res" value="Limpar">
<input type=button name="but" value="Executar">
</form>
</font>
</body>
</html>
Desenvolvida pela NETSCAPE, a linguagem
JavaScript foi criada para trabalhar com aplicações
interativas nas páginas HTML.
Javascript é uma extensão do HTML (Linguagem
de Marcação de Hipertexto), os comandos JavaScript
são embutidos nas páginas HTML e interpretados pelo
browser, ou seja, o JavaScript não possui nenhum
procedimento de compilação e como tal, é utilizada
também para controlar dinamicamente o comportamento
de objetos nas páginas.
Javascript é compatível com os principais
navegadores em uso atualmente (IE, Mozila Firefox,
Chrome, Opera e Safari). Porém, devido a constantes
atualizações e lançamento de novas versões é
altamente recomendável que se faça testes nos mais
diversos browsers antes de disponibilizar uma aplicação
na WEB.
COMPATIBILIDADE ENTRE NAVEGADORES
Processamento de Dados
Conceitos Gerais
Entrada Processamento Saída
Dados Transformação Informação
Operações aritméticas (+, -, /, *) atribuição =Operações relacionais (<, >, ==, !=, >=, <=)
• Comparações:
• Seleções / Filtros
• Ordenação / Classificação
Operações lógicas (e, ou, não)
Criação do contexto,
cenário ou problemaAnálise e
programaçãoExecução
Pessoas / usuários Analistas / programadores Computador
Nomes de Variáveis ou Constantes
• Faz diferença entre nomes de variáveis com letras minúsculas e
maiúsculas:
Exemplo: Peso <> peso
• iniciar com letras:
Seguidos de letras, números ou traço baixo
peso = 80.5;
• Declaração:
Local: var peso = 80.5;
Global: peso = 80.5;
• não podemos definir um identificador com o mesmo nome que
uma palavra chave
If While Var For End
JavaScriptVariáveis / Constantes
• Espaço de memória de um certo tipo de dadoassociado a um nome para referenciar seu conteúdo.
JavaScript
Tipos de Dados
Tipo Conteúdo(s)
Boleano True ou False
Numérico -
inteiro ou
ponto flutuante
(real)
Conteúdos numéricos inteiros ou com casas
decimais.
Literal (String) Conteúdos alfanuméricos (caracteres
alfabéticos, numéricos e especiais (#, @, $,
etc.)
Função Valor Retornado
parseInt() Número Inteiro
parseFloat() Número de Ponto
flutuante ou Real
eval() Resultado de
cálculos com literais
(“2 + 2“)
JavaScript
Funções de Conversão (string para numérico)
Entrada Processamento Saída
Dados Transformação Informação
Comandos de Entrada, Processamento e Saída
variável = operações aritméticas;
JavaScript
JavaScript
Operadores Aritméticos
Operador Operação
* Multiplicação
/ Divisão
+ Adição
- Subtração
% Resto
( ) Alteração de
prioridade
Ambiente Gráfico ou Visual
Objetos
Propriedades Eventos Métodos
EVENTO MANIPULADOR DESCRIÇÃO
blur onBlur Ocorre quando o usuário retira o foco de um objeto
de formulário.
change onChange Ocorre quando o usuário muda o valor de um objeto
de formulário.
click onClick Ocorre quando o usuário clica sobre o objeto
focus onFocus Ocorre quando o usuário focaliza o objeto.
load onLoad Ocorre quando o usuário carrega a página.
unload onUnload Ocorre quando o usuário abandona a página.
mouseOver onMouseOver Ocorre quando o ponteiro do mouse passa sobre um
link ou âncora. Válidos apenas para hiperlinks.
select onSelect Ocorre quando o usuário seleciona um elemento de
um formulário.
JavaScript - Eventos
EVENTO MANIPULADOR DESCRIÇÃO
submit onSubmit Ocorre quando o usuário envia um formulário.
mouseDown onMouseDown Ocorre quando o botão do mouse é pressionado.
mouseMove onMouseMove Ocorre quando o ponteiro do mouse se movimenta
sobre o objeto.
mouseOut onMouseOut Ocorre quando o ponteiro do mouse afasta de um
objeto. Válidos apenas para hiperlinks.
mouseUp onMouseUp Ocorre quando o botão do mouse é solto.
keyDown onKeyDown Ocorre quando uma tecla é segurada.
keyPress onKeyPress Ocorre quando uma tecla é pressionada.
keyUp onKeyUp Ocorre quando uma tecla é solta.
JavaScript - Eventos
Os métodos são funções associadas aos objetos. Um objeto pode assim ser definido
em termos de propriedades, não só pelas suas variáveis, mas também pelos métodos que tiver
associados, que permitem não só realizar ações sobre as propriedades próprias do objeto, como
também outros tipos de operações diversas.
Objetos integrados no JavaScript
O JavaScript incorpora, uma série de objetos que permitem realizar as tarefas mais importantes
que se esperam realizar com esta linguagem.
Relativamente aos objetos que podem ser utilizados em scripts JavaScript, dividem-se em quatro
tipos:
Objectos para operações com Strings
Permitem efetuar várias operações com texto e sequências de caracteres.
Operações matemáticas
Implementam as operações matemáticas correntes.
Data e Hora
Esta família de objetos permite realizar operações com datas e horas.
Objetos relacionados com o browser
Permitem várias operações e manipulações ao nível do browser Web.
Métodos
JavaScript
Métodos - Strings
Propriedade:length
Comprimento da string (número de caracteres)
Métodos:charAt(posição)
Devolve o carácter localizado na posição indicada da String de texto.
slice(inicio,fim)
Define um pedaço de uma string entre as posições início e fim.
substr(inicio,comp)
Define uma substring, a partir de início e com o tamanho “comp".
toLowerCase()
Devolve uma String com todos os caracteres convertidos para minúsculas.
toUpperCase()
Idem, mas convertendo todos os caracteres para maiúsculas.
JavaScript
Métodos - Formatação
toLocaleString() - converte dados para formato local.Obs.: resultado varia de navegador e
não implementado no Google Chrome.
<script language=“javascript”>
var nr = 25321.86;
alert(“Valor: “ + nr.toLocaleString());
</script>
toFixed(número de casas decimais)
<script language="javascript">
var data = new Date();
alert("Hoje é: " + data.toLocaleString());
</script>
<script language=“javascript”>
var nr = 25321.12352;
alert(“Valor: “ + nr.toFixed(3));
</script>
JavaScript
Operações Matemáticas
As operações matemáticas podem ser realizadas também por meio do objeto "Math".
Métodos:
abs(número)
Valor absoluto do "número", ou seja, sempre o valor independentemente do sinal
(positivo ou negativo).
pow(num,expoente)
Devolve "num" elevado a "expoente".
random()
Devolve um número aleatório entre 0 e 1.
round(número)
Arredonda "número" para o inteiro mais próximo.
Exemplo:
//Gerar um número aleatório inteiro entre 0 e 10
var y = 10*(Math.random()); //gera número
var z = Math.round(y)); // arrendonda
document.write("<br/>z = ", z);
JavaScript
Datas e Horas
O tratamento de datas e horas em JavaScript é realizado pelo objeto "Date". Para a utilização deste objeto é necessário
efetuar a criação de um objeto concreto (instância).
A criação de um objeto do tipo "Date" faz-se com a seguinte sintaxe:
nome_objeto = new Date(parâmetro);
Uma data pode ser referenciada do seguinte modo, AAAA,MM-1,DD.
Métodos:
getDate()
Devolve o dia do mês (inteiro entre 1 e 31).
getDay()
Devolve o dia da semana (0 = Domingo, 1 = Segunda-Feira, ... ,6 = Sábado).
getFullYear()
Devolve o ano correspondente à data, com quatro dígitos.
getHours()
Devolve a hora (inteiro entre 0 e 23).
getMilliseconds()
Devolve o campo milissegundos.
getMinutes()
Devolve os minutos (inteiro entre 0 e 59).
getMonth()
Devolve o mês (inteiro entre 0 = Janeiro e 11 = Dezembro).
getSeconds()
Devolve os segundos (inteiro entre 0 e 59).
getTime()
Devolve um inteiro com o número de milissegundos que se passaram desde 1 de Janeiro de 1970 às 0:00:00.
JavaScript
JavaScriptCaixas de Diálogos
alert() - caixa de diálogo informativa
<SCRIPT LANGUAGE=“javascript">
alert("Esta é uma caixa de diálogo informativa.")
</SCRIPT>
prompt() - caixa de diálogo de entrada de dados simples
<SCRIPT LANGUAGE=“javascript">
nome = prompt("Qual é o seu nome?","");
alert("Seu nome é " + nome);
</SCRIPT>
JavaScriptCaixas de Diálogos
confirm() - caixa de diálogo de confirmação.
retorna TRUE (botão OK) ou FALSE (botão Cancelar).
<SCRIPT LANGUAGE=“javascript">
decisao = confirm("Clique em um botão!");
if(decisao)
{
alert("Você clicou no botão OK");
}
else
{
alert("Você clicou no botão CANCELAR");
}
</SCRIPT>
Exemplo - Calculadora
JavaScript
Formulário: calc
op1
op2
res
mult
divisao adic subtr
limpa
Funções:
multiplica()
divide()
soma()
subtrai()
<script language="javascript">
function multiplica()
{
calc.res.value = calc.op1.value * calc.op2.value;
}
function divide()
{
calc.res.value = calc.op1.value / calc.op2.value;
}
function soma()
{
calc.res.value = parseInt(calc.op1.value) + parseInt(calc.op2.value);
}
function subtrai()
{
calc.res.value = calc.op1.value - calc.op2.value;
}
</script>
<html>
<body>
<font size=4 face=arial>
Calculadora<br><br>
<form name="calc">
Operador 1 <input type=text name="op1" maxlength=4 size=2><p>
Operador 2 <input type=text name="op2" maxlength=4 size=2><p>
Resultado <input type=text name="res" size=2><p>
<input type=button name="mult" value="*" onclick="multiplica()">
<input type=button name="divisao" value="/" onclick="divide()">
<input type=button name="adic" value="+" onclick="soma()">
<input type=button name="subtr" value="-" onclick="subtrai()">
<input type=reset name="limpa" value="Limpar">
</form>
</font>
</body>
</html>
Calculadora - Código
JavaScript
Exercício - Média
JavaScript
Formulário: boletim
n1
n2
n3
n4
med
Função: calcmedia()
calc limpa
<script language="javascript">
function calcmedia()
{
boletim.med.value = (parseFloat(boletim.n1.value) +
parseFloat(boletim.n2.value) + parseFloat(boletim.n3.value) +
parseFloat(boletim.n4.value)) / 4;
}
</script>
<html>
<body>
<font size=4 face=arial>
Boletim<br><br>
<form name= "boletim">
Nota 1 <input type=text name="n1" maxlength=4 size=3><p>
Nota 2 <input type=text name="n2" maxlength=4 size=3><p>
Nota 3 <input type=text name="n3" maxlength=4 size=3><p>
Nota 4 <input type=text name="n4" maxlength=4 size=3><p>
Média <input type=text name="med" size=4 readonly><p>
<input type=button name= "calc" value="Calcular Média" onclick="calcmedia()">
<input type=reset name=“limpa" value="Limpar">
</form>
</font>
</body>
</html>
Exercício – Média - Código
JavaScript
Exercício – Consumo de Combustível
JavaScript
tv
vm
auto
dp
cons
calc
limpa
Função: calconsumo()
Formulário: consumo
Entrada Processamento Saída
Dados Transformação Informação
Comandos de Entrada, Processamento e Saída
variável = operações aritméticas
estruturas de controle condicional
e de repetição
JavaScript
JavaScript
Operadores Relacionais
Operador Ação
> Maior
< Menor
>= Maior igual
<= Menor igual
== Igual
!= diferente
Operadores Lógicos
Operador Ação
|| OU
&& E
Teste Resultado
Verdadeiro 1
Falso 0
JavaScript
Operador Ação
> Maior
< Menor
>= Maior igual
<= Menor igual
== Igual
!= diferente
Operador Ação
|| OU
&& E
Estruturas de Controle Condicional
Relacionais Lógicos
<condição 1> || <condição 2> Resultado
V V V
V F V
F F F
<condição 1> && <condição 2> Resultado
V V V
V F F
F F F
JavaScript
Estrutura de Controle Condicional Simples
if( <condição>)
{
<comando>;
<comando>;
}
Exemplo
if( salario > 5000 && situacao == “Ativo”)
{
imposto = salario * 0,25;
sal_bruto = salario – imposto;
}
JavaScript
Estrutura de Controle Condicional Composta
if( <condição>)
{
<comando>;
<comando>;
}
else
{
<comando>;
<comando>;
}
Exemplo
if(idade >= 18 && sexo == “Masculino”)
{
situacao = “Alistamento”;
}
else
{
situacao = “Contingência”;
}
JavaScript
Exercício – Média c/ Situação
JavaScript
Média Situação
Maior igual a 6 APROVADO
Entre 3 e 6 EXAME
Menor que 3 REPROVADOFormulário: boletim
Função: calcmedia()
n1
n2
n3
n4
med
situ
calclimpa
Exercício – Venda de Automóveis
JavaScript
marca modelo
motor { 1.01.41.8} value
dhte
ab
fa
dta
f} value
txtmarca txtmodelovt
limpacalcFunção: calcvtot()
Formulário: vendauto
valuevalue
Estruturas de Controle de Repetição
Razão de utilização
JavaScript
Algoritmo para somar 10 números:
n -> 25 - 12 - 9 - 18 - 5 - 11 - 3 - 21 - 14 - 7
cont n
ac = 0
1 ac = ac + 25
2 ac = ac + 12
3 ac = ac + 9
4 ac = ac + 18
5 ac = ac + 5
6 ac = ac + 11
7 ac = ac + 3
8 ac = ac + 21
9 ac = ac + 14
10 ac = ac + 7
ac = 0;
for(cont=1; cont <= 10; cont = cont + 1)
// entrada dos números (n)
ac = ac + n;
Estrutura de Controle de Repetição - FOR
for(variavel = val.inicial; condição de finalização; incremento)
{
<comando>;
<comando>;
<comando>;
}
JavaScript
Exemplo - Tabuada
JavaScript
Formulário: tabuada
Função: calctab()
nr
areatab
geratab limpa
Exercício - Investimento
JavaScript
Formulário: inv
vinv
taxa
prazo
areainv
Função: calcinv()calc
limpa
Estrutura de Controle de Repetição – WHILE
while(<condição>)
{
<comando>;
<comando>;
}
JavaScript
while(soma < 1000)
{
// gera e acumula números aleatórios entre 0 e 100
soma = soma + parseInt(Math.random() * 100);
document.write (soma + "<br>");
}
Exemplo
Exercício – Raiz Quadrada Exata
JavaScript
cc n ci r
1 16 1 15
2 15 3 12
3 12 5 7
4 7 7 0
Raiz Quadrada Exata
JavaScript
nrq
res
calc
limpaFunção: calcrq()
Formulário: rq
Exercício – Raiz Quadrada não Exata
JavaScript
cc n ci r
1 19 1 18
2 18 3 15
3 15 5 10
4 10 7 3
5 3 9 - 6{
Raiz Quadrada - Completa
JavaScript
Exercício – Máximo Divisor Comum - MDC
JavaScript
Dividendo
(d1)
Divisor
(d2)
Quociente
(q)
Resto
(r)
152 32 4 24
32 24 1 8
24 8 3 0
Máximo Divisor Comum - MDC
JavaScript
n1 n2
res
calc
limpaFunção: calcmdc()
Formulário: mdc
Layout de página – CSS e DIV
Layout de página
CSS e DIV
Código
<html>
<head>
<style type="text/css">
.c1 {
font: 28pt "arial";
color: beige;
background: coral;
width: 620px;
text-align: center;
}
.c2 {
float: left;
font: 20pt "arial";
color: brown;
background: tan;
width: 250px;
height: 350px;
}
.c3 {
float: left;
font: 20pt "arial";
color: brown;
background: tan;
width: 370px;
height: 350px;
}
.c4 {
clear: both;
margin-left: 90px;
}
</style>
</head>
Layout de página
CSS e DIV
Código (continuação)
<body>
<div class="c1">Cadastro de Funcionários</div>
<form name="func" action="func_inclusao.php" method=post>
<div class="c2">
Matrícula<br>
Nome<br>
Data Nasc.<br>
Departamento<br>
Salário<br>
Sexo<br>
Idioma(s) (Básico)<br>
Resumo do Currículo Profissional
</div>
<div class="c3">
<input type=text name="mat" maxlength=13 size=13 style="font: 16pt 'arial'; color: 'blue'"><br>
<input type=text name="nome" maxlength=30 size=30 style="font: 16pt 'arial'; color: 'blue'"><br>
<input type=text name="nasc" maxlength=10 size=10 style="font: 16pt 'arial'; color: 'blue'"><br>
<select name="depto" style="font: 16pt 'arial'; color: 'blue'">
<option value="Administrativo">Administrativo</option>
<option value="Comercial">Comercial</option>
<option value="Engenharia">Engenharia</option>
<option value="Finanças">Finanças</option>
<option value="Tecnologia">Tecnologia</option>
</select><br>
<input type=text name="salario" maxlength=13 size=11 style="font: 16pt 'arial'; color: 'blue';text-align:right;"><br>
Masculino<input type=radio name="sexo" value="M" checked>
Feminino<input type=radio name="sexo" value="F"><br>
Inglês<input type=checkbox name="ing" value="i">
Espanhol<input type=checkbox name="esp" value="e">
Francês<input type=checkbox name="fra" value="f"><br>
<textarea name="curr" cols=30 rows=5 style="font: 16pt 'arial'; color: 'blue'"></textarea>
</div>
<div class="c4"> <br>
<input type=button name="valida" value="Validação de Dados" style="font: 16pt 'arial'; color: 'blue'">
<input type=submit name="grava" value="Gravar" style="font: 16pt 'arial'; color: 'blue'" disabled>
<input type=reset name="limp" value="Limpar" style="font: 16pt 'arial'; color: 'blue'">
</div>
</form>
</body>
</html>
Formatação e Validação de Dados de Entrada
JavaScript
Formatação de Dados de Entrada
JavaScript
Formatação de Dados de Entrada
JavaScript
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.3.js"></script>
<script type="text/javascript" src="jquery.maskMoney.js"></script>
<script type="text/javascript">
// a – Representa caracteres alfa (letras) (A-Z,a-z)
// 9 – Representa caracteres numéricos (números) (0-9)
// * – Representa caracteres alfanuméricos (letras e números) (A-Z,a-z,0-9)
jQuery.noConflict();
(function($) {
$(function() {
$('.mask-mat').mask('999.999.999-9'); //matricula
$('.mask-real').maskMoney({showSymbol:true,symbol:'R$ ', decimal:',',
thousands:'.', allowZero:true}); // valores monetários - precision:no. casas dec.
// inserir aqui outras funções.
});
})(jQuery);
</script>
Formatação de Dados de Entrada
JavaScript
<input type=text name="mat" maxlength=13 size=13 style="font:
16pt 'arial'; color: 'blue'" class="mask-mat"><br>
<input type=text name="salario" maxlength=13 size=11
style="font: 16pt 'arial'; color: 'blue'; text-align:right;"
class="mask-real"><br>
Matrícula
Salário
Dados de Entrada – Controle DatePicker
JavaScript
JavaScript
<script type="text/javascript" src="jquery-ui-1.9.2.custom.js"> </script>
$('.calendario').datepicker({
dateFormat:'dd/mm/yy',
yearRange: '-100:-10',
showOn: "button",
buttonImage: "calendario.gif",
changeMonth: true,
changeYear: true,
dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
monthNames:
['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro
','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
});
<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.2.custom.css">
<input type=text name="nasc" maxlength=10 size=10 style="font: 16pt 'arial'; color: 'blue'" class="calendario" readonly>
Dados de Entrada – Controle DatePicker
<script language="javascript">
function validados()
{
if(func.mat.value == "")
{
alert("Matrícula não informada!");
func.mat.focus();
exit();
}
}
</script>
Matrícula:
Validação de Dados de Entrada
<input type=button name="valida" value="Validação de Dados"
onclick = "validados()">
Validação de Dados de Entrada
If(vermat(func.mat.value) == false)
{
alert("Matrícula incorreta!");
func.mat.focus();
exit();
}
012.345.678-9
Cálculo Dígito
Verificador
d1 d2 d3 d4 d5 d6 d7 d8 d9
0 1 2 3 4 5 6 7 8
dv
9
X
10
X
9
X
8
X
7
X
6
X
5
X
4
X
3
X
2
0 + 9 + 16 + 21 + 24 + 25 + 24 + 21 + 16 = 156
Calcula o RESTO de 156 por 11
Se RESTO >= 2 → dígito = 11 - RESTO
Senão dígito = 0
156 / 11 = 14 RESTO 2
11 – 2 = 9
dígito = 9
Validação de Dados de Entrada
function vermat(vmat)
{
//calcula digito
soma = 0;
peso=10;
for(i=0; i<=12; i=i+1)
{
if(i != 3 && i!=7 && i != 11 && i != 12)
{
d = parseInt(vmat.substr(i,1));
soma = soma + d * peso;
peso = peso - 1;
}
if(i == 12)
di = parseInt(vmat.substr(i,1));
}
r = soma % 11;
if(r >= 2)
dc = 11 - r; // dígito calculado
else
dc = 0; // dígito calculado
if(di == dc)
return true;
else
return false;
}
012.345.678-9
Validação dos demais dados
JavaScript
if(func.nome.value == "")
{
alert("Nome não informado!");
func.nome.focus();
exit;
}
if(func.nasc.value == "")
{
alert("Data Nascimento não informada!");
func.nasc.focus();
exit;
}
if(func.salario.value == "" || func.salario.value == "0,00")
{
alert("Salário não informado!");
func.salario.focus();
exit;
}
if(func.curr.value == "")
{
alert("Currículo não informado!");
func.curr.focus();
exit;
}
Validação dos demais dados
JavaScript
Validação de Dados de Entrada
func.grava.disabled=false;
func.valida.disabled=true;
}
</script>
Terminando o código JavaScript