Formulario e Javascript

Desenvolvimento para Internet
Formulrio e JavaScript
Desenvolvimento para Internet
Ambiente Grfico ou Visual
Objetos
Propriedades Eventos Mtodos

Formulrios
Os formulrios permitem dotar uma pgina web de elementos interativos
os quais possibilitam um dilogo com usurio da internet .
Os formulrios so definidos por meio das etiquetas <form> e </form>.
Entre estas duas etiquetas pode-se colocar objetos de formulrio que
sero vistos a seguir.
A marcao <form> tem os seguintes atributos.:
<body>
<form name = nome method = post / get action = arquivo>
</form>
</body>
Formulrios
Caixa de Texto e Propriedades
<input type=text name=nome maxlength = qtde. caracteres

size = tamanho caixa value = contedo readonly disabled>
Exemplo:
Endereo: <input type = text name=endr maxlength = 30 size = 30
value = Seu endereo>
Endereo: Seu endereo

Formulrios
Caixa de Texto tipo Senha e Propriedades
<input type = password name = nome maxlength = qtde.caracteres

size=tamanho caixa value = contedo readonly disabled >
Exemplo:
Senha: <input type = password name=s1 maxlength = 8 size = 8>
Senha:
Formulrios
nica Escolha e Propriedades
<input type = radio name=nome value = contedo checked disabled>

O agrupamento de opes do boto RADIO feita atravs da propriedade NAME.
Exemplo:
Reside em:
<input type = radio name=reside value = C checked> Casa trrea
<input type = radio name=reside value = A> Apartamento
<input type = radio name=reside value = S> Sobrado
Reside em:
Formulrios
Mltipla escolha e Propriedades
<input type = checkbox name=nome value = contedo checked disabled>
Exemplo:
Esporte(s) que pratica:

<input type = checkbox name=fut value = F> Futebol
<input type = checkbox name=vol value = V> Vlei
<input type = checkbox name=bas value = B> Basquete
<input type = checkbox name=nat value = N> Natao
Esporte(s) que pratica: Futebol Vlei Basquete Natao

Formulrios
Botes de Ao e Propriedades
Boto SUBMIT causa o envio dos dados de entrada para o servidor e para
outra pgina. Trabalha em conjunto com a marcao FORM e parmetro
ACTION:
<input type = submit name = nome value = rtulo disabled>
Exemplo:
<input type = submit name = env value = Enviar dados>
Enviar dados
Formulrios
Boto RESET restaura os valores iniciais das entradas de dados.
<input type = reset name = nome value = rtulo disabled>
Exemplo:
<input type = reset name = limpa value = Restaura pgina>
Restaura pgina
Formulrios
Boto do tipo BUTTON no tm comportamento pr-definido, sendo

usados apenas em scripts no lado cliente.
<input type = button name = nome value = rtulo disabled>
Exemplo:
<input type = button name = calc value = Calcular>
Calcular
Formulrios
Caixa de Seleo e Propriedades
<select name = nome size = n linhas visveis inicialmente disabled>
<option value = valor selected> texto </option>
...
<option value = valor> texto </option>
</select>
<select name = "funcoes" size = 1>

<option value="1 selected>Analista de Sistemas</option>
<option value="2">Analista de Segurana</option>
<option value="3">Analista de Negcios</option>
<option value="4">Administrador de BD</option>
<option value="5">Administrador de Redes</option>
<option value="6">Programador</option>
</select>
Formulrios
Caixa de Seleo e Propriedades
<select name="funcoes" size=1>

<option value="">-- Escolha uma funo --</option>
<option value="1">Analista de Sistemas</option>
<option value="2">Analista de Segurana</option>
<option value="3">Analista de Negcios</option>
<option value="4">Administrador de BD</option>
<option value="5">Administrador de Redes</option>
<option value="6">Programador</option>
</select>
Formulrios
rea de Texto e Propriedades
O controle TEXTAREA um campo de texto multi-linha. Os atributos rows e cols
definem o nmero de linhas de altura e o de "caracteres" de largura,
respectivamente.
<textarea name=nome" rows = nlinhas cols = ncaracteres readonly disabled>

Texto ....
</textarea>
Exemplo:
<textarea name="comentarios" rows = 5 cols = 40>
Entre com seus comentrios.
</textarea>
Formulrios
Aplicao Cadastro de Alunos
Formulrios
<html>
<body>
<font face=arial><center> (parte 1)
Faculdade Sabetudo<br>
Cadastro de Alunos<br></center>
<hr size=3 color=black>
<form name="cadastro">
<table>
<tr><td>Matrcula:</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">Anlise de Sistemas</option>
<option value="GR">Gerenciamento de Redes</option>
<option value="SI">Segurana da Informao</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>
Formulrios
(parte 2)
Perodo:
Diurno<input type = radio name="per" value="D">
Noturno<input type = radio name="per" value="N" checked>
<br><br>
Idioma(s) (bsico):
Ingls<input type = checkbox name="ing" value="I">
Espanhol<input type = checkbox name="esp" value="E">
Francs<input type = checkbox name="fra" value="F">
Alemo<input type = checkbox name="ale" value="A">
<br><br>
Observaes:<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>
JavaScript
JavaScript
Desenvolvida pela NETSCAPE, a linguagem

JavaScript foi criada para trabalhar com aplicaes
interativas nas pginas HTML.
Javascript uma extenso do HTML (Linguagem
de Marcao de Hipertexto), os comandos JavaScript
so embutidos nas pginas HTML e interpretados pelo
browser, ou seja, o JavaScript no possui nenhum
procedimento de compilao e como tal, utilizada
tambm para controlar dinamicamente o comportamento
de objetos nas pginas.
JavaScript
COMPATIBILIDADE ENTRE NAVEGADORES
Javascript compatvel com os principais
navegadores em uso atualmente (IE, Mozila Firefox,
Chrome, Opera e Safari). Porm, devido a constantes
atualizaes e lanamento de novas verses
altamente recomendvel que se faa testes nos mais
diversos browsers antes de disponibilizar uma aplicao
na WEB.
JavaScript
Processamento de Dados
Conceitos Gerais
Dados Transformao Informao
Entrada Processamento Sada
Operaes aritmticas (+, -, /, *) atribuio =
Operaes relacionais (<, >, ==, !=, >=, <=)
Comparaes:
Selees / Filtros
Ordenao / Classificao
Operaes lgicas (e, ou, no)
JavaScript
Operadores Aritmticos
Operador Operao
* Multiplicao
/ Diviso
+ Adio
- Subtrao
% Resto
() Alterao de prioridade
JavaScript
Tipos de Dados
Tipo Contedo(s)
Boleano True ou False
Numrico - Contedos numricos inteiros ou com casas
inteiro ou decimais.
ponto flutuante
(real)
Literal (String) Contedos alfanumricos (caracteres
alfabticos, numricos e especiais (#, @, $,
etc.)
JavaScript
Funes de Converso (string para numrico)
Funo Valor Retornado

parseInt() Nmero Inteiro
parseFloat() Nmero de Ponto

flutuante ou Real
eval() Resultado de
clculos com literais
(2 + 2)
JavaScript
Ambiente Grfico ou Visual
Objetos
Propriedades Eventos Mtodos

JavaScript Eventos
EVENTO MANIPULADOR DESCRIO
blur onblur Ocorre quando o usurio retira o foco de um objeto
de formulrio.
change onchange Ocorre quando o usurio muda o valor de um objeto
de formulrio.
click onclick Ocorre quando o usurio clica sobre o objeto
focus onfocus Ocorre quando o usurio focaliza o objeto.
load onload Ocorre quando o usurio carrega a pgina.
unload onunload Ocorre quando o usurio abandona a pgina.
mouseOver onmouseover Ocorre quando o ponteiro do mouse passa sobre um

link ou ncora. Vlidos apenas para hiperlinks.
select onselect Ocorre quando o usurio seleciona um elemento de
um formulrio.
JavaScript Eventos
EVENTO MANIPULADOR DESCRIO
submit onsubmit Ocorre quando o usurio envia um formulrio.
mouseDown onmousedown Ocorre quando o boto 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. Vlidos apenas para hiperlinks.
mouseUp onmouseup Ocorre quando o boto 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
Mtodos - Formatao
toFixed(nmero de casas decimais)

<script language=javascript>
var nr = 25321.12352;
alert(Valor: + nr.toFixed(3));
</script>
JavaScript
Caixa de Dilogo
alert() - caixa de dilogo informativa
<SCRIPT LANGUAGE=javascript">
alert("Esta uma caixa de dilogo informativa.")
</SCRIPT>
JavaScript
Caixa de Dilogo
confirm() - caixa de dilogo de confirmao.
retorna TRUE (boto OK) ou FALSE (boto Cancelar).
<SCRIPT LANGUAGE=javascript">
decisao = confirm("Clique em um boto!");
if(decisao)
{
alert("Voc clicou no boto OK");
}
else
{
alert("Voc clicou no boto CANCELAR");
}
</SCRIPT>
JavaScript
Exemplo - Calculadora
Funes:
multiplica()
divide()
soma()
subtrai()
op1
Formulrio: calc
op2
res
mult limpa
divisao adic subtr

JavaScript Calculadora - Cdigo
JavaScript HTML
<script language="javascript">
function multiplica() <html>
{ <body>
calc.res.value = calc.op1.value * calc.op2.value; <font size=4 face=arial>
} Calculadora<br><br>
function divide() <form name="calc">
{ Operador 1 <input type=text name="op1" maxlength=4 size=2><p>
calc.res.value = calc.op1.value / calc.op2.value; Operador 2 <input type=text name="op2" maxlength=4 size=2><p>
} Resultado <input type=text name="res" size=2><p>
function soma() <input type=button name="mult" value="*" onclick="multiplica()">
{ <input type=button name="divisao" value="/" onclick="divide()">
calc.res.value = parseInt(calc.op1.value) + <input type=button name="adic" value="+" onclick="soma()">
parseInt(calc.op2.value); <input type=button name="subtr" value="-" onclick="subtrai()">
} <input type=reset name="limpa" value="Limpar">
function subtrai() </form>
{ </font>
calc.res.value = calc.op1.value - calc.op2.value; </body>
} </html>
</script>
JavaScript Exerccio - Boletim
Funo: calcmedia()
n1
Formulrio: boletim
n2
n3
n4
med
calc limpa
<script language="javascript"> JavaScript Exerccio - Boletim
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>
Mdia <input type=text name="med" size=4 readonly><p>
<input type=button name= "calc" value="Calcular Mdia" onclick="calcmedia()">
<input type=reset name=limpa" value="Limpar">
</form>
</font>
</body>
</html>
JavaScript
Funo: calconsumo()
Exerccio
Formulrio: consumo Consumo de
Combustvel
tv
vm
auto
dp
cons
limpa
calc
JavaScript
Estrutura de Controle Condicional Simples
if( <condio>) if( salario > 5000 && situacao == Ativo)

{ {
<comando>; imposto = salario * 0.25;
<comando>; sal_bruto = salario imposto;
} }
JavaScript
Estrutura de Controle Condicional Composta
if( <condio>) if(idade >= 18 && sexo == Masculino)

{ {
<comando>; situacao = Alistamento;
<comando>; }
} else
else {
{ situacao = Contingncia;
<comando>;
<comando>; }
}
JavaScript
Operadores Relacionais
Operador Ao
> Maior
< Menor
>= Maior igual
<= Menor igual
== Igual
!= diferente
JavaScript
Operadores Lgicos
Operador Ao
|| OU
&& E
Teste Resultado
Verdadeiro True
Falso False
Exerccio JavaScript
Boletim c/
Situao
Funo: calcmedia()
Formulrio: boletim
n1
n2
n3
n4
Mdia Situao
med
Maior igual a 6 APROVADO
situ
Entre 3 e 6 EXAME
calc
limpa
Menor que 3 REPROVADO
JavaScript Exerccio
Venda de
Automveis
Formulrio: vendauto
marca modelo
motor
{ 1.0
1.4
1.8 } value
value value
dh d
te
ab
fa
txtmarca txtmodelo
t
a
f
} value
vt
Funo: calcvtot() calc limpa

JavaScript
Estrutura de Controle de Repetio - FOR
for(variavel = val.inicial; condio de finalizao; incremento)

{
<comando>;
<comando>;
<comando>;
}
JavaScript
Formulrio: soma Exerccio - Somatrias
soma1
soma2
soma3
calc1 calc2 calc3

Funo: calcsoma1() Funo: calcsoma2() Funo: calcsoma3()
JavaScript Exerccio
Tabuada
Funo: calctab()
nr
Formulrio: tabuada
areatab
geratab limpa
JavaScript
Estrutura de Controle de Repetio WHILE
while(<condio>)
{
<comando>;
<comando>;
}
JavaScript
Aplicao Raiz Quadrada Exata
cc n ci r
1 16 1 15
2 15 3 12
3 12 5 7
4 7 7 0
JavaScript
Raiz Quadrada Exata
Formulrio: rq
nrq
res
Funo: calcrq() limpa

calc
JavaScript
Exerccio Raiz Quadrada no Exata
cc n ci r
1 19 1 18
2 18 3 15
3 15 5 10
{ 4
5
10
3
7
9
3
-6
JavaScript
Raiz Quadrada - Completa
Aumentar
propriedade
SIZE
JavaScript
Exerccio Mximo Divisor Comum - MDC
Dividendo Divisor Quociente Resto

(d1) (d2) (q) (r)
152 32 4 24
32 24 1 8
24 8 3 0
JavaScript
Mximo Divisor Comum - MDC
Formulrio: mdc n1 n2
res
Funo: calcmdc() limpa

calc
Objetivo
(HTML+CSS+JavaScript)
Formulrio e Javascript

Formulario e Javascript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Formulario e Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento para Internet

Ambiente Grfico ou Visual

Propriedades Eventos Mtodos

<input type=text name=nome maxlength = qtde. caracteres

Endereo: Seu endereo

<input type = password name = nome maxlength = qtde.caracteres

Senha: <input type = password name=s1 maxlength = 8 size = 8>

<input type = radio name=nome value = contedo checked disabled>

<input type = checkbox name=nome value = contedo checked disabled>

Esporte(s) que pratica:

Esporte(s) que pratica: Futebol Vlei Basquete Natao

<input type = submit name = nome value = rtulo disabled>

<input type = submit name = env value = Enviar dados>

Boto RESET restaura os valores iniciais das entradas de dados.

<input type = reset name = nome value = rtulo disabled>

<input type = reset name = limpa value = Restaura pgina>

Boto do tipo BUTTON no tm comportamento pr-definido, sendo

<input type = button name = nome value = rtulo disabled>

<input type = button name = calc value = Calcular>

<select name = "funcoes" size = 1>

<select name="funcoes" size=1>

<textarea name=nome" rows = nlinhas cols = ncaracteres readonly disabled>

Desenvolvida pela NETSCAPE, a linguagem

Funo Valor Retornado

parseFloat() Nmero de Ponto

Ambiente Grfico ou Visual

Propriedades Eventos Mtodos

focus onfocus Ocorre quando o usurio focaliza o objeto.

load onload Ocorre quando o usurio carrega a pgina.

unload onunload Ocorre quando o usurio abandona a pgina.

mouseOver onmouseover Ocorre quando o ponteiro do mouse passa sobre um

mouseDown onmousedown Ocorre quando o boto do mouse pressionado.

mouseMove onmousemove Ocorre quando o ponteiro do mouse se movimenta

mouseUp onmouseup Ocorre quando o boto do mouse solto.

keyDown onkeydown Ocorre quando uma tecla segurada.

keyPress onkeypress Ocorre quando uma tecla pressionada.

keyUp onkeyup Ocorre quando uma tecla solta.

toFixed(nmero de casas decimais)

divisao adic subtr

if( <condio>) if( salario > 5000 && situacao == Ativo)

if( <condio>) if(idade >= 18 && sexo == Masculino)

Funo: calcvtot() calc limpa

for(variavel = val.inicial; condio de finalizao; incremento)

calc1 calc2 calc3

Funo: calcrq() limpa

Dividendo Divisor Quociente Resto

Funo: calcmdc() limpa

Você também pode gostar