formulario e javascript (1)

77
HTML - Formulários

Upload: lucassfair

Post on 27-Dec-2015

55 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Formulario e JavaScript (1)

HTML - Formulários

Page 2: Formulario e JavaScript (1)

Ambiente Gráfico ou Visual

Objetos

Propriedades Eventos Métodos

Page 3: Formulario e JavaScript (1)

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>

Page 4: Formulario e JavaScript (1)

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

Page 5: Formulario e JavaScript (1)

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

Page 6: Formulario e JavaScript (1)

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

Page 7: Formulario e JavaScript (1)

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:

Page 8: Formulario e JavaScript (1)

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

Page 9: Formulario e JavaScript (1)

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

Page 10: Formulario e JavaScript (1)

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

Page 11: Formulario e JavaScript (1)

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

Page 12: Formulario e JavaScript (1)

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>

Page 13: Formulario e JavaScript (1)

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>

Page 14: Formulario e JavaScript (1)

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>

Page 15: Formulario e JavaScript (1)

<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

Page 16: Formulario e JavaScript (1)

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>

Page 17: Formulario e JavaScript (1)

HTML - FormuláriosAplicação – Cadastro de Alunos

Page 18: Formulario e JavaScript (1)

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>

Page 19: Formulario e JavaScript (1)
Page 20: Formulario e JavaScript (1)

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.

Page 21: Formulario e JavaScript (1)

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

Page 23: Formulario e JavaScript (1)

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.

Page 24: Formulario e JavaScript (1)

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

Page 25: Formulario e JavaScript (1)

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)

Page 26: Formulario e JavaScript (1)

Entrada Processamento Saída

Dados Transformação Informação

Comandos de Entrada, Processamento e Saída

variável = operações aritméticas;

JavaScript

Page 27: Formulario e JavaScript (1)

JavaScript

Operadores Aritméticos

Operador Operação

* Multiplicação

/ Divisão

+ Adição

- Subtração

% Resto

( ) Alteração de

prioridade

Page 28: Formulario e JavaScript (1)

Ambiente Gráfico ou Visual

Objetos

Propriedades Eventos Métodos

Page 29: Formulario e JavaScript (1)

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

Page 30: Formulario e JavaScript (1)

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

Page 31: Formulario e JavaScript (1)

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

Page 32: Formulario e JavaScript (1)

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

Page 33: Formulario e JavaScript (1)

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

Page 34: Formulario e JavaScript (1)

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

Page 35: Formulario e JavaScript (1)

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

Page 36: Formulario e JavaScript (1)

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>

Page 37: Formulario e JavaScript (1)

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>

Page 38: Formulario e JavaScript (1)

Exemplo - Calculadora

JavaScript

Formulário: calc

op1

op2

res

mult

divisao adic subtr

limpa

Funções:

multiplica()

divide()

soma()

subtrai()

Page 39: Formulario e JavaScript (1)

<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 &nbsp;&nbsp;<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

Page 40: Formulario e JavaScript (1)

Exercício - Média

JavaScript

Formulário: boletim

n1

n2

n3

n4

med

Função: calcmedia()

calc limpa

Page 41: Formulario e JavaScript (1)

<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 &nbsp;<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

Page 42: Formulario e JavaScript (1)

Exercício – Consumo de Combustível

JavaScript

tv

vm

auto

dp

cons

calc

limpa

Função: calconsumo()

Formulário: consumo

Page 43: Formulario e JavaScript (1)

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

Page 44: Formulario e JavaScript (1)

JavaScript

Operadores Relacionais

Operador Ação

> Maior

< Menor

>= Maior igual

<= Menor igual

== Igual

!= diferente

Page 45: Formulario e JavaScript (1)

Operadores Lógicos

Operador Ação

|| OU

&& E

Teste Resultado

Verdadeiro 1

Falso 0

JavaScript

Page 46: Formulario e JavaScript (1)

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

Page 47: Formulario e JavaScript (1)

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

Page 48: Formulario e JavaScript (1)

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

Page 49: Formulario e JavaScript (1)

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

Page 50: Formulario e JavaScript (1)

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

Page 51: Formulario e JavaScript (1)

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;

Page 52: Formulario e JavaScript (1)

Estrutura de Controle de Repetição - FOR

for(variavel = val.inicial; condição de finalização; incremento)

{

<comando>;

<comando>;

<comando>;

}

JavaScript

Page 53: Formulario e JavaScript (1)

Exemplo - Tabuada

JavaScript

Formulário: tabuada

Função: calctab()

nr

areatab

geratab limpa

Page 54: Formulario e JavaScript (1)

Exercício - Investimento

JavaScript

Formulário: inv

vinv

taxa

prazo

areainv

Função: calcinv()calc

limpa

Page 55: Formulario e JavaScript (1)

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

Page 56: Formulario e JavaScript (1)

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

Page 57: Formulario e JavaScript (1)

Raiz Quadrada Exata

JavaScript

nrq

res

calc

limpaFunção: calcrq()

Formulário: rq

Page 58: Formulario e JavaScript (1)

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{

Page 59: Formulario e JavaScript (1)

Raiz Quadrada - Completa

JavaScript

Page 60: Formulario e JavaScript (1)

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

Page 61: Formulario e JavaScript (1)

Máximo Divisor Comum - MDC

JavaScript

n1 n2

res

calc

limpaFunção: calcmdc()

Formulário: mdc

Page 62: Formulario e JavaScript (1)

Layout de página – CSS e DIV

Page 63: Formulario e JavaScript (1)

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>

Page 64: Formulario e JavaScript (1)

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>

Page 65: Formulario e JavaScript (1)

Formatação e Validação de Dados de Entrada

JavaScript

Page 66: Formulario e JavaScript (1)

Formatação de Dados de Entrada

JavaScript

Page 67: Formulario e JavaScript (1)

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>

Page 68: Formulario e JavaScript (1)

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

Page 69: Formulario e JavaScript (1)

Dados de Entrada – Controle DatePicker

JavaScript

Page 70: Formulario e JavaScript (1)

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

Page 71: Formulario e JavaScript (1)

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

Page 72: Formulario e JavaScript (1)

Validação de Dados de Entrada

If(vermat(func.mat.value) == false)

{

alert("Matrícula incorreta!");

func.mat.focus();

exit();

}

012.345.678-9

Page 73: Formulario e JavaScript (1)

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

Page 74: Formulario e JavaScript (1)

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

Page 75: Formulario e JavaScript (1)

Validação dos demais dados

JavaScript

Page 76: Formulario e JavaScript (1)

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

Page 77: Formulario e JavaScript (1)

Validação de Dados de Entrada

func.grava.disabled=false;

func.valida.disabled=true;

}

</script>

Terminando o código JavaScript