Aula3Eventos e Funcoes20171

INF1030 Conceitos de Informtica *
Javascript
1
Exerccios
Faa uma pgina que mostre o valor da

entrada e de cada parcela a ser paga por
uma pessoa. O total comprado e o nmero
de parcelas ser fornecido pelo usurio. A
loja s parcela 70% do montante
<!DOCTYPE html>
<html>
<head>
<h1><title>Aula2 INF1030</title></h1>
<meta charset="utf-8" />
<meta name="description" content="introduo ao javascript" />
<meta name="keywords"
content="javascript,prompt,write,variaveis" />
<meta name="author" content="Claudia" />
</head>
<body>
<script type="text/javascript">
{
var total,nparcelas,entrada,parcela;
total = prompt( "Valor total da compra?");
nparcelas = prompt("Em quantas vezes");
entrada = total*0.3;
parcela=total*0.7/nparcelas;
document.write("<hr/><hr/>");
document.write("<br/> --------- Forma de Pagamento ---------
<br/><br/>");
document.write(" Entrada: R$ , entrada.toFixed(2));
document.write("nparcelas , " parcelas de R$ , parcela.toFixed(2));
document.write("<hr/><hr/>");
}
</script>
</body>
</html> 3
Como melhorar a parte visual da
interao? Utilizar
formulrios
prestacoescomformsemacao.html
4
5
*Formulrios: Mecanismo de captura de
informaes
Permite que o autor da pgina receba informaes
provenientes de um usurio. So constitudos por campos
que devem ser preenchidos com os dados do usurio e
enviados para o servidor onde est hospedado o site ou
para um endereo de "e-mail".
Formulrio HTML representa somente a parte visual da
interao real. Para o funcionamento de um formulrio
necessrio que no lado do servidor exista um outro
programa (escrito em outra linguagem de programao)
para receber e processar as informaes enviadas OU um
SCRIPT que utilize esses dados
6
*Formulrios: Estrutura para usar
campos com JS
<form ...>
Definio do Campo1 do formulrio
.....
</form>
<form>
Nome: <input type="text"
name="firstname"><br />
Senha: <input type="password"
name="senha">
</form>
7
*Formulrios: Campos
Existem os seguintes campos:
input que pode ser (entre outros) do tipo:
text: campo de texto linear
password: campo de senha
radio : campo de mltipla escolha
checkbox : campo de confirmao
file : boto seleo de arquivo atravs de uma
caixa de dilogo
submit : encaminha os dados inseridos
reset : restaura os valores iniciais
button: define um boto clicvel
textarea : caixa de texto com mltiplas linhas
select : campo de seleo. Cria uma lista drop-down
button- boto clicvel. Difere de <input> por poder conter
8
*Formulrios: Estrutura dos campos
Inputcheckbox, password, radio, text, submit, reset,..
<input type="tipo " name="nome " />
nome do campo
Outros parmetros (opcionais): H parmetros prprios

para cada tipo
value=... especifica que texto aparecer no campo qdo o
formulrio for exibido.
size=... altera o tamanho deste campo exibido na tela.
maxlength=... limita o nmero de caracteres que o
usurio pode digitar.
9
*Formulrios: text e password
<form>
</form>
*Formulrios: button
Define um boto clicvel
til para programar uma ao JS na pgina como
resposta ao evento onclick
Exemplo:
<input type="button"onclick="alert(Oi,
Turma!')"value=Tente!">
11
Voltando ao Exerccio... Como melhorar a parte visual da
Entrada de Dados?
<html>
<head>
<h1><title>Aula4 INF1030</title></h1>
<style>
h1 {color: red; text-decoration=blink;} h2 {color: maroon; font-size:
12pt;background-color=black;}
p {margin-left: 40px} body
{background-color:#ffa;margin:8px}
</style>
</head>
<body>
<form id="formulario">
<fieldset> <legend> Dados da Compra </legend> <br/>
Valor Total da Compra: <input id="tot" type="text"
name="tot" size="10" maxlength="20" /> <br>/ Em quantas
O atributoid
Vezes?<input id="vezes" type="text" name="vezes" size="3" maxlength="3" />
<br>/
identifica
</fieldset>
univocamente o
</form>
</body>
elemento.
O</html> como
elemento fieldset, agrupa os campos e os emoldura com seu CPF
um ttulo
determinado pelo elemento legend 12
Como usar os valores digitados?
<fieldset> <legend> Dados da Compra </legend>
<br/>Valor Total da Compra:<input id="tot" type="text"
name="tot" size="10" maxlength="20" />
<br/>Em quantas Vezes?<input id="vezes"
Docume
type="text"
name="vezes" size="3" maxlength="3" /> nt
</fieldset>
Elemento
</form> raiz
html
Selecionando elementos pela Elemento

Elemento
identificao: head
body
Qualquer elemento HTML pode ter Element

o
Elemento
form#formul
ario
um atributoid. title
Elemen
Elemento
O valor desse atributo deve ser to
input#t input#ve
Text: ot zes
nico dentro do documento.

Aula 4
de
INF103
0
possvel selecionar um elemento

com base no id pelo mtodo do ODOM utilizado pelo
DOM: navegador Web para
representar a pgina Web e
document.getElementById(ID) podem ser acessados pelo
que retorna elemento c/atributo objeto JSdocument.
ID.
13
Como usar os valores digitados?
<fieldset> <legend> Dados da Compra
</legend>
<br/>Valor Total da Compra:<input
id="tot" type="text" name="tot /> Docume
nt
<br/>Em quantas Vezes?<input Elemento

raiz
id="vezes" type="text" name="vezes /> html
</fieldset> Elemento Elemento
</form> head body
Element Elemento
o form#formul
title ario
Elemen
to Elemento
input#t input#ve
Text:
ot zes
Aula 4
de
INF103
0
var input1= document.getElementById(tot);

var input2= document.getElementById(vezes);
14
Como usar os valores digitados? Utilizando a
propriedade value
<fieldset> <legend> Dados da Compra </legend>
<br/>Valor Total da Compra:<input id="tot"
type="text" name="tot" size="10" maxlength="20" />
<br/>Em quantas Vezes?<input id="vezes"
type="text" name="vezes" size="3" maxlength="3" />
</fieldset>
</form>
Os elementos do tipotextbox,passwordou textarea, tem a
propriedadevalue, que refere-se ao valor do campo.
Pode armazenar um valor padro OU um valor digitado pelo usurio OU
atribudo por um script .
Pode ser recuperada ou modificada:
Exemplo 1:
var total = document.getElementById(tot").value; // Recuperando o
valor:
total.value =123.34 ; // Alterando o valor:
Exemplo 2:
var formulario = document.getElementById('formulario');
var total = +formulario.tot.value;
Exemplo 3: alterando o valor sem a necessidade de utilizar uma varivel

document .getElementById(saida").value = "outro texto qualquer";
15
Voltando aoComo
Exerccio...
usar os valores digitados?
O script
executado na
carga da
pgina....
ANTES do
usurio poder
digitar
qualquer
prestacoescomformsoentradav2.html
16
Possvel Soluo: usar eventos e/ou
botes
prestacoescomformsemacao.html
17
Utilizando propriedades de estilo
Exemplo 2:
<body>
<p id ="pg1">
Texto de teste , bl,bl,bl....<br/>
blalalala
</p>
var y = document.getElementById("pg1");
y.style.backgroundColor='#0000FF';
y.style.color = '#fff';
</script>
</body>
Cor de fundo: elemento.

style.backgroundColor';
Cor da fonte: elemento.style.color
18
EVENTOS
Sempre que algo acontece em uma pgina Web, ocorre um
evento.
Eventos podem ser qualquer coisa : clique do mouse, o mouse
arrastado, uma pgina carregada, uma imagem recebe o
foco, a abertura de uma pgina web ou imagem, o envio de
um formulrio html, uma tecla pressionada, etc
Javascript permite realizar aes quando um evento ocorre.
Calcular
19
Eventos so fatos que ocorrem durante a execuo do sistema,
a partir dos quais o programador pode definir aes a serem
realizadas pelo programa. Existe uma infinidade de eventos
definidos para uso em JS, sendo que entre os principais e mais
utilizados esto:
onBlur remove o foco do elemento
onChange muda o valor do elemento
o elemento clicado pelo
onClick
usurio
onFocus o elemento focado
o usurio pressiona uma
onKeyPress
tecla sobre o elemento
carrega o elemento por
onLoad
completo
define ao quando o
onMouseOver usurio passa o mouse
sobre o elemento
define ao quando o
onMouseOut usurio retira o mouse sobre
o elemento
20
Reagindo ao evento onclick
21
Colocando o foco no 1 campo
do formulrio
prestacoescomformcomfocus.html 22
separar
criando uma
funo
prestacoescomformcomfocus.html 23
Funes
Conjunto de instrues que possui uma
funcionalidade, ou seja, descreve uma parte
especfica da soluo de um problema.
Conjunto de instrues que s sero executadas
quando a funo for chamada explicitamente ou
ocorrer um determinado evento
Pode ser chamada de qualquer lugar da pgina
Pode ser definida em HEAD ou BODY
Quando a funo definida em HEAD garante-se que
ela j estar carregada quando for chamada
2
*Definio de Funo
Sintaxe:
function nomeDaFuncao(var1, var2, ..., varN)

{
Lista de variveis,
cdigo executvel separadas por vrgula
}
Toda funo tem obrigatoriamente ( )

Os parmetros var1, var2, etc. so variveis para
guardar os dados que a funo recebe de quem a
chamou.
Os { e } definem o incio e o fim da funo
Uma funo pode retornar um dado para quem a
chamou. Quando a funo retorna um dado utiliza-
se o comando return
25
Usando uma funo
<!DOCTYPE html
<head>
function mostraMensagem()
{
alert(Alo mundo!");
}
</script>
<title>Mostra uma mensagem</title>
</head>
<body>
<form>
<input
type="button"
value="No aperte o boto"
onclick="mostraMensagem()">
</form>
</body>
</html>
exemplofuncao.html 26
Agora com funo
27
Agora sem boto
Executa a
funo
quando um
campo de
entrada
modificado
28
Faa uma pgina para realizar o solicitado
na figura acima Quando o usurio clicar
sobre o boto Calcular, o IMC deve ser
calculado e exibido no campo IMC.
29
sobre o boto da operao escolhida, esta
deve ser realizada e o resultado exibido no
campo Resultado.
30
31
32
Entregando valores para a funo!!!
33
*O comando return
O comando return utilizado para
especificar um valor que ser retornado da
funo chamada para quem a chamou
Sintaxe:
return; // apenas retorna da funo
OU
return valor; // retorna um valor da funo
34
*Exemplo de uso de return
<!DOCTYPE HTML>
<html>
<head>
function produto(a,b)
{
var c;
c = a * b;
return c; // poderia ser return a * b;
}
</script>
<title>Comando return</title>
</head>
<body>
var result = produto(4, 3);
document.write(result);
</script>
</body>
</html>
35
Funes: Resumo
Funes so blocos de construo
fundamentais em JavaScript.
Uma funo um conjunto de instruesque
executa uma tarefa ou calcula um valor,
identificada por um nome
Para usar uma funo, voc deve defini-la em
algum lugar
Para a funo ser executada, preciso cham-
la SINTAXE:
( por seu nome) entregando-lhe os valores
que ela usa
function nomeDaFuncao(var1, var2, ..., varN)
{
A funo pode
cdigo retornar um valor
executvel
}
36
sobre o boto Calcular, o IMC deve ser
calculado e exibido no campo IMC.
Crie uma funo para o clculo do IMC. Esta
funo retorna o valor do IMC
37
sobre o boto da operao escolhida, esta
deve ser realizada e o resultado exibido no
campo Resultado.
Faa uma funo para cada operao.
38
*Exerccios
Faa uma pgina HTML contendo um
formulrio com um boto. A pgina dever
exibir uma mensagem quando o usurio
clicar no boto.
39
Resposta:
<!DOCTYPE html >
<html>
<head>
<title>Exercicios\Evento\Mensagem.html</title>
</head>
<body>
<form>
<input type="button" onclick='alert("Uma mensagem")'
value="Aperte aqui"/>
</form>
</body>
</html>
40
*Exerccios
Faa uma pgina com um formulrio
contendo dois campos texto. A pgina
dever exibir a soma dos valores digitados
nos campos
41
Resposta:
<!DOCTYPE html >
<html>
<head>
function opera()
{
var num1, num2, resultado;
num1 = parseFloat(document.calculadora.op1.value);
num2 = parseFloat(document.calculadora.op2.value);
resultado = num1 + num2;
document.write("A soma de " + num1 + " com " + num2 + " " +
resultado);
}
</script>
<title>Exercicios\Evento\Soma.html</title>
</head>
<body>
<form name="calculadora">
Operando 1: <input type="text" name="op1"><br/>
Operando 2: <input type="text" name="op2"><br/>
<input type=button" value="Calcula" onclick="opera()">
</form>
</body>
</html>
42

Aula3Eventos e Funcoes20171

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aula3Eventos e Funcoes20171

Diunggah oleh

Hak Cipta:

Format Tersedia

INF1030 Conceitos de Informtica *

Faa uma pgina que mostre o valor da

Outros parmetros (opcionais): H parmetros prprios

Selecionando elementos pela Elemento

Qualquer elemento HTML pode ter Element

nico dentro do documento.

possvel selecionar um elemento

<br/>Em quantas Vezes?<input Elemento

</fieldset> Elemento Elemento

</form> head body

var input1= document.getElementById(tot);

Exemplo 3: alterando o valor sem a necessidade de utilizar uma varivel

Cor de fundo: elemento.

function nomeDaFuncao(var1, var2, ..., varN)

Toda funo tem obrigatoriamente ( )

return valor; // retorna um valor da funo

Anda mungkin juga menyukai