sw10 - JavaScript2 PDF

sistemas web
aula 10
l 10
JavaScript
p
(continuação)
variáveis …
Nome atribuído a uma posição de memória onde se
pode armazenar dados
d d d
<html>
<body>
<script type=“text/javascript”>
var disciplina = “Sistemas Web”;
document.write(disciplina);
document.write(“<h1>”
( + nome + “</h1>”);
)
</script>
</body>
</html>
pedro leão SW 0809 10.2
… variáveis
Declaração
var x;
var y, z;
var a=2
a=2, b=3;
Tipos
Não é necessário indicar o tipo das variáveis
Não é necessário indicar o tipo das variáveis
Conversão entre tipos
a=b.toString(); //conversão de número para string
c=d.ParseInt(); //conversão de string para número inteiro
e=f.ParseFloat(); //conversão de string para número real
operadores … aritméticos
operador nome
+ adição
- subtracção
* multiplicação
/ di i ã
divisão
% resto da divisão inteira
<html><head>
h l h d
<script language=“Javascript”>
var a=2;
var b=3;
b 3;
soma=a+b;
</script></head>
<body><script language=“Javascript”>
document.write(a + “+” + b + “=“ + soma);
</script></body></html>
… operadores … incremento e decremento
operador nome
++ incremento
-- decremento
As instruções b++ incrementam a variável b de uma
ç
unidade.
As instruções b‐‐ decrementam a variável b de uma
As instruções b decrementam a variável b de uma
unidade
… operadores … atribuição
operador exemplo significado

= x=y x=y
+
+= x+=y
+ x=x+y
+
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= y
x%=y x=x%y
y
… operadores … relacionais
<html><head> operador descrição exemplo resultado
<script language="javascript">
var x = 10, y = 3, z = y; == igual a 2==1 false
function calculos(){
document.write ("<br>x = " + x); != diferente de 2!=1 true
document.write ("<br>y = " + y);
document.write ("<br>z = " + z);
> maior do que 2>1 true
document.write ("<br>"); < menor do que 2<1 false
w = x == y;
document write (
document.write ("<br>x==y
<br>x==y -> " + w); >= maior ou igual que
maior ou igual que 2>=1 true
w = y == z;
document.write ("<br>y==z -> " + w); <= menor ou igual 2<=1 false
w = x != y; que
document.write ("<br>x!=y -> " + w);
w = y != z;
document.write ("<br>y!=z -> " + w);
w = x >= y;
document.write ("<br>x>=y -> " + w);
w = x < y;
document.write ("<br>x<y -> " + w);
}
</script></head><body>
<h2>Operadores
p Relacionais</h2>
<script language="javascript">calculos();</script>
</body></html>
… operadores … lógicos
<html><head><script language=
language="javascript">
javascript >
var x = true, y = false;
function logicos(){
document.write ("<br>Variável x = " + x);
document.write ("<br>Variável y = " + y);
z = x || x;document.write (“<br><br>x || x = " + z);
z = x || y;document.write ("<br> x || y = " + z);
z = y || x;document.write ("<br> y || x = " + z);
z = y || y;document.write ("<br> y || y = " + z +"<br>");
z = x && x;
document.write ("<br> x && x = " + z); operador descrição exemplo result
z = x && y; ! negação x=1 true
document.write ("<br> x && y = " + z);
z = y && x; y=2
document.write ("<br> y && x = " + z); !(
!(x==y)
)
z = y && y;
document.write ("<br> y && y = " + z); && conjunção x=1 false
z = ! x; y=5
document write (
document.write (“<br><br>
<br><br> ! x = " + z); (x<3 && y<3)
z = ! y;
document.write ("<br> ! y = " + z); || disjunção x=1 true
} inclusiva y=5
</script></head>
p (x<3 || y<3)
<body>
<script language="javascript"> logicos(); </script>
</body> </html>
… operadores … “strings”
operador descrição exemplo resultado
+ concatenação str1=“sistemas” sistemas web
str2=“ web”
<html> str3=str1+str2
<head>
<script language="javascript">
var s1 = “Sistemas“, s2 = “Web";
function cadeias(){
document.write ("<br> Variável s1 = " + s1);
document.write ("<br> Variável s2 = " + s2);
document.write ("<br>");
espaco = " "
"; // EEspaço em b
branco
w = s1 + espaco + s2;
document.write ("<br> s1 + espaco + s2 = " + w);
}
</script>
/ i t
</head>
<body>
<script language="javascript">cadeias();</script>
</body>
/
</html>
funções …
sequência de instruções que constitui uma entidade coerente e
que pode ser invocada a partir de qualquer ponto do programa.
que pode ser invocada a partir de qualquer ponto do programa.
o JavaScript possui funções predefinidas
parseInt(string), parseFloat(string), ...
I t( t i ) Fl t( t i )
o programador pode criar as suas funções que são, usualmente,
definidas no cabeçalho do ficheiro e invocadas posteriormente
definidas no cabeçalho do ficheiro e invocadas posteriormente
podem ter parâmetros que são passados na chamada da função e
usados pela função como variáveis locais
usados pela função como variáveis locais
podem devolver um valor ao programa de chamada mediante a
utilização da instrução return
utilização da instrução return
… funções … exemplo
<html>
<head>
<script
i t t
type="text/javascript">
"t t/j i t" recebe os valores nos
recebe os valores nos
function total(numA,numB) parâmetros numA e numB
{
return numA + numB;
} devolve o resultado
</script> da operação
</head> através da utilização
ç
<body>
b d
da instrução return
<script type="text/javascript">
document.write(total(2,3));
</script>
</body> função total
</html> com dois argumentos: 2 e 3
… funções … visibilidade das variáveis
declaradas fora de qualquer estrutura de código
tornam‐se variáveis globais
só são destruídas quando a página é encerrada
só são destruídas quando a página é encerrada
d l d
declaradas no interior de uma função
i i d f ã
tornam‐se variáveis locais
quando se abandona a função a variável é destruída
… funções … visibilidade das variáveis
<html><head><script language="Javascript">
var y = 10;
function fun1(){
var
ar x = 5
5;
document.write("<br>Na função fun1, a variável local x vale " + x);
document.write("<br>Por seu lado, a variável global y vale " + y + "<br>");
}
function fun2(){
var x = -7;
document.write("<br>Na função fun2, a variável local x vale " + x);
document.write("<br>Por seu lado, a variável global y vale " + y + "<br>");
}
</script></head>
<body>
<h2>Variáveis locais e globais</h2>
<script
p language="Javascript">
g g p
fun1();
fun2();
</script>
</body>
</html>
=== maquina de calcular ===
o que se vai testar
receber os valores introduzidos pelo visitante num formulário
b l i t d id l i it t f lá i
processar os valores utilizando operadores aritméticos
apresentar resultados
apresentar resultados
para compreender o exemplo basta perceber o
funcionamento da adição e depois aplicar para as outras
funcionamento da adição e depois aplicar para as outras
operações; no entanto para a potenciação é necessário
utilizar o método pow() do objecto Math.
utilizar o método pow() do objecto Math.
o formulário utilizado para a calculadora deve apresentar
o seguinte layout:
o segu te ayout:
os botões das operações têm manipuladores de evento
onClick que invocam as funções correspondentes
que invocam as funções correspondentes
para aceder a cada caixa de texto, utiliza‐se a notação:
document.forms[i].elements[j].value
[ ] [j]
forms[i] indica que a referência é ao formulário i
elements[j] indica que é o elemento j do formulário i
no e emplo da calc ladora
no exemplo da calculadora
primeira caixa de texto (campo a): elements[0]
botão de adição (botão para adição): elements[1]
botão de adição (botão para adição): elements[1]
...
segunda caixa de texto (campo b): elements[6]
terceira caixa de texto (campo resultado): elements[7]
<html><head>
a função eval() permite
<script>
function a_mais_b(a,b){
a mais b(a b){ operações com numero
p ç
x=eval(a); inteiros e fraccionários,
y=eval(b); onde os valores são
resultado=x+y; “respeitados” no seu
doc ment forms[0] elements[7] al e = res
document.forms[0].elements[7].value resultado;
ltado f
formato original.
t i i l
}
function a_menos_b(a,b){ por exemplo: com a
x=eval(a); função eval()
ç () a operação
p ç
y=eval(b);
l(b)
4 * 2,5 = 10, mas com a
resultado=x-y;
document.forms[0].elements[7].value = resultado; função parseInt() a mesma
} operação seria igual a 8,
function a_vezes_b(a,b){ porque era considerada
porque era considerada
x=eval(a); apenas a parte inteira do
y=eval(b); numero
resultado=x*y;
document.forms[0].elements[7].value = resultado;
}
function a_dividir_b(a,b){
x=eval(a);
y=eval(b);
resultado=x/y;
document.forms[0].elements[7].value = resultado;
}
function a_potencia_b(a,b){
a potencia b(a b){
x=parseInt(a);
y=parseInt(b);
resultado=Math.pow(x,y);
d
document.forms[0].elements[7].value
t f [0] l t [7] l = resultado;
lt d
}
</script>
<title>
calculadora
l l d
</title>
</head>
<body><form>
b d f
<input type="text" size="4" name="a">
<input type="button" value=" + "

onClick="a_mais_b(document.forms[0].elements[0].value,
document.forms[0].elements[6].value);">
<input type="button" value=" - "
onClick="a_menos_b(document.forms[0].elements[0].value,
<input type="button" value=" * "
onClick="a_vezes_b(document.forms[0].elements[0].value,
<input type="button" value=" / "
onClick="a_dividir_b(document.forms[0].elements[0].value,
<input type="button" value=" pot "
onClick="a_potencia_b(document.forms[0].elements[0].value,
<input type="text" size="4" name="b"> =

<input type="text" size="4" name="resultado">
</form></body></html>
instruções condicionais … if
<html><head><script language="javascript">
language= javascript >
function verifica(){
var x=window.prompt("1º número", "");
var y=window.prompt("2º número", "");
x=parseInt(x);
y=parseInt(y);
document.write("<br>Primeiro
document write("<br>Primeiro número:"+x);
document.write("<br>Segundo número:"+y);
document.write("<br>");
if(x>y)
document.write("<br> 1º > 2º");
else
if(x==y)
d
document.write("<br>
t it ("<b > 1º = 2º")
2º");
else
document.write("<br> 1º < 2º");
}
</
</script></head>
i t></h d>
<body><script language="javascript"> verifica(); </script>
</body></html>
validações de formulários …
Pretende‐se que o código Javascript faça as seguintes validações:
O campo Nome está preenchido
O campo Nome está preenchido
O campo Número
está preenchido com, pelo meno, 7 caracteres
Apenas tem algarismos
A l i
O campo Ano
Não tem mais de 4 algarismos
Tem apenas algarismos
O seu valor deve ser posterior a 1900
O campo Mês
p
Tem 2 caracteres
Deve ter um valor entre 01 e 12
O campo Correio electrónico deve ter um carácter @
O campo Correio electrónico deve ter um carácter @
… validações de formulários …
<html>
<head><script language="javascript">
function valida(){
//cria variável para a mensagem de erro, vazia

var mensagem="";
//testa o comprimento do nome

if(document.registo.nome.value.length == 0){
mensagem=mensagem+"Introduza o nome!\n";
} isNaN
//testa o comprimento do número do BI para verificar
if(document.registo.numero.value.length < 7){ se o campo
mensagem=mensagem+"escreva todos os dígitos do BI\n"; tem valores
}
//testa se o número do BI tem apenas algarismos não numéricos
else if (isNaN(document.registo.numero.value)){
mensagem=mensagem + "o BI deve ter apenas algarismos. \n";
}
//testa se o ano nao tem mais que 4 caracteres
if(document.registo.ano.value.length > 4){
mensagem=mensagem+ "Introduza o ano correctamente \n";
}
//testa se apenas foram introduzidos algarismos no ano
else if (isNaN(document.registo.ano.value)){
mensagem= mensagem+ "o ano deve ter apenas algarismos\n";
}
//testa se o ano é posterior a 1900
else if (document.registo.ano.value <= 1900){
mensagem = mensagem + "o ano deve ser maior que 1900\n";
}
//testa se entram 2 caracteres no mês
if (document.registo.mes.value.length != 2){
mensagem=mensagem + "Introduza os 2 caracteres do mês\n";
}
//testa se os valores estão entre 1 and 12
else if (document.registo.mes.value < 1 ||
document.registo.mes.value > 12 ) {
mensagem=mensagem + "o mês tem que estar entre 01 e 12 \n";
}
//testa o endereço de correio electrónico
if (document.registo.correio.value.indexOf("@") == -1){
mensagem = mensagem + "endereço de correio errado \n";
}
//decide se o formulário está ou não bem preenchido
if (mensagem.length > 0){ //verifica se existe uma mensagem de erro
alert (mensagem); // apresenta a mensagem de erro
return false; // existe erro
erro, não processa o formulário
}
else {
return true; // não existe erro, processa o formulário
}
}//fim da função valida()
//fi d
//fim do código
ódi Javascript
i
</script>
</head>
<body onLoad="document.registo.nome.focus()">
<form name="registo" action="javascriptEnviouFormulario.html"

onsubmit="return
onsubmit= return valida();">
valida(); >
Nome:
<input type="text" name="nome" size="20" maxlength="30"> <br>
Nº do Bilhete de Identidade:
<input type="text"
type "text" size
size="8"
"8" name
name="numero"
"numero" maxlength
maxlength="8">
"8"> <br>
Ano do nascimento:
<input type="text" name="ano" maxlength="6"> <br>
Mês do nascimento:
<i
<input
t type="text"
t "t t" name="mes"
" " maxlength="2">
l th "2"> <b
<br>
>
Correio electrónico:
<input type="text" name="correio" maxlength="20"> <br>
<input
i type="submit"
b i value="Enviar">
l i <br>
b
</form>
</body>
</html>
… validações de formulários
…
trabalho

sw10 - JavaScript2 PDF

Enviado por

Dados do documento

Título original

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

sw10 - JavaScript2 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

sistemas web

operador exemplo significado

<input type="button" value=" + "

<input type="text" size="4" name="b"> =

//cria variável para a mensagem de erro, vazia

//testa o comprimento do nome

}//fim da função valida()

<form name="registo" action="javascriptEnviouFormulario.html"

Você também pode gostar