sw11 - JavaScript3

sistemas web
aula 11
l 11
JavaScript
p
(continuação)
instruções condicionais: switch
<html><head><script language="Javascript">
function pergunta() {
var resp = prompt("Quantos
t("Q t satélites
télit t
tem a T
Terra?","");
?" "")
switch(resp) {
case '0': alert("quase");
break;
case '1': alert("certo");
break;
case '2': alert("quase");
b
break;
k
default: alert("errado");
}
}
</script></head>
<body>
<a href="javascript:pergunta();">Pergunta 1: astronomia </a>
</body>
/
</html>
pedro leão SW 0809 11.2
instruções iterativas: ciclo while
<html>
<body>
<script
i t t
type="text/javascript">
"t t/j i t"
i = 0;
while (i <= 5) {
document.write("Este
document.write( Este é o número " + i);
document.write("<br>");
i++;
}
</script>
/ i
</body>
</html>
instruções iterativas: ciclo for
<html>
<body>
<script
i t t
"t t/j i t"
for (i = 0; i <= 5; i++) {
document.write("Este é o número " + i);
document.write( <br> );
document.write("<br>");
}
</script>
</body>
</html>
/h l
instruções iterativas: break
<html>
<body>
<script type="text/javascript">
for (i=0;i<5;i++){
document.write (i);
interrompe = window.prompt
("Quer
( Q interromper?
p sim ou não",
, "");
);
if (interrompe == "sim"){
break;
}
}
</script>
</body>
</html>
/
objectos
o Javascript dispõe de um conjunto de objectos predefinidos:
document, window, Math, Frame, String, Form, Array, Browser, Date, etc.
, , , , g, , y, , ,
os objectos têm atributos (variáveis) e métodos (funções).
a sintaxe para a utilização de objectos, métodos e atributos é a
seguinte:
i t
objecto.atributo
objecto.metodo()
exemplos
l
document.write() invoca o método write() do objecto document
document.forms[0]
[ ] invoca o primeiro formulário do documento
p
window.alert() invoca o método alert() do objecto window
Math.pow() invoca o método pow() do objecto Math
St.length invoca o atributo length de um objecto com o nome St
invoca o atributo length de um objecto com o nome St
St.toLowerCase() invoca o método toLowerCase()
de um objecto com o nome St
animação interactiva
<html><body>
<script language="javascript">
i 1 new I
img1= Image();
()
img1.src="fotos/portugal.jpg";
img2= new Image();
img2.src fotos/caboverde.jpg ;
img2.src="fotos/caboverde.jpg";
</script>
<img src="fotos/portugal.jpg"
border="0" width=169 height=135 name="muda">
<form>
f
<input type="button" value=" portugal "
onClick="muda.src=img1.src;";>
<input type
type="button"
button value
value=" cabo verde "
onClick="muda.src=img2.src;";>
</body>
</html>
animação temporizada
<html> <head>
<script language="javascript"> durante 500 ms
var timer_t1=null, timer_t2=null;
function ppt()
() {
clearTimeout(timer_t1); clearTimeout(timer_t2);
document.imagem.src=img1.src;
timer_t1=setTimeout("cv()", 500);
}
function cv() {
document.imagem.src=img2.src;
timer_t2=setTimeout("pt()", 1000);
}
</script> </head>
<body onLoad="pt()">
<script language="javascript"> durante 1000 ms
img1= new Image(); img1
img1.src=
src="fotos/portugal
fotos/portugal.jpg
jpg";;
img2= new Image(); img2.src="fotos/caboverde.jpg";
</script>
<img name="imagem" src="fotos/portugal.jpg"
border="0" width="150" height="100">
</body>
</html>
vectores
<html>
<body>
<script
i t t
"t t/j i t"
var nome = new Array(4);
nome[0] = "Sofia";
nome[1] = "Ana";
Ana ;
nome[2] = "Carla";
nome[3] = "Sara";
for (i=0; i<4; i++) {
d
document.write(nome[i]
i ( [i] + "<br>");
b )
}
</script>
</body>
</html>
vectores: pesquisa
<html>
<head>
<script language="Javascript">
var nomes = new Array(6);
nomes[0]="Maria"; nomes[1]="João";
nomes[2]="Manuel"; nomes[3]="Júlia";
nomes[4]=""; nomes[5]="Sofia";
</script> </head>
<body>
<h2>Instrução "while" e vectores</h2>
document write(“Tamanho
document.write( Tamanho do vector: “ + nomes
nomes.length+
length+”<br>”);
<br> );
var i=0;
while(i<nomes.length){
if(nomes[i] != ""){
nlinha = i + 1;
document.write("<br>" + nlinha + "º nome: " + nomes[i]);
}
i++;
}
</script> </body>
</html>
exemplo …
… exemplo …
<html>
<head> <title>Centro Comercial</title>
( ) {
function calcular(
document.loja.T1.value = 13 * document.loja.Q1.value;
document.loja.TT.value = parseInt(document.loja.T1.value) +
parseInt(document.loja.T2.value) +
parseInt(document.loja.T3.value);
}
function limpar( ) {
document.loja.Q1.value = "";
document loja T1 value = "";
document.loja.T1.value ;
document.loja.T2.value = "";
document.loja.T3.value = "";
document.loja.TT.value = "";
}
</script>
</head>
… exemplo …
<body bgcolor="#C0C0C0">
<center>
<p><font size="6">Centro Comercial</font></p>
p
<p>
<form name="loja">
<table border="1" width="60%">
<tr>
<td width="10%"
width 10% align
align="center"><b>Qtd</b>
center ><b>Qtd</b> </td>
<td width="30%" align="left"><b>Descrição</b> </td>
<td width="15%" align="center"><b>Preço euros</b> </td>
<td width="45%" align="center"><b>Total</b> </td>
</tr>
<tr>
<td width="10%" align="center">
<input type="text" name="Q1" size="8"></td>
<td width="30%"
width= 30% align=
align="left">Charuto
left >Charuto </td>
<td width="15%" align="center">13 € </td>
<input type="text" name="T1" size="20" readonly></td>
</tr>
… exemplo …
<tr>
g
<td width="30%" align="left">Perfume </td>
/
<td width="15%" align="center">50 € </td>
</tr>
<tr>
<td width="30%"
width= 30% align=
align="left">Telemóvel</td>
left >Telemóvel</td>
<td width="15%" align="center">145 €</td>
</tr>
<tr>
<td width="10%" align="center"></td>
<td width="30%" align="left"></td>
<td width="15%" align="center"><b>TOTAL</b></td>
<input type="text" name="TT" size="20" readonly></td> </tr>
… exemplo …
<tr>
<td width="10%" align="center"> </td>
<td width="30%" align="left"> </td>
<td g
width="15%" align="center"> </td>
/
<a href="javascript:calcular( );">
<img border="0" src="fotos/calcular.jpg"
width="50"
width 50 height
height="30"></a>
30 ></a>
<a href="javascript:limpar( );">
<img border="0“ src="fotos/limpar.jpg"
width="50" height="30"></a> </td>
</tr>
</table> <p> </p>
</form>
</center>
</body>
</html>
… exemplo
caixas de selecção dinâmicas …
as caixas de selecção são utilizadas para permitir a um
visitante seleccionar produtos, configurações, realizar
ii l i d fi õ li
simulações, ...
é possível criar caixas de selecção através da utilização
do HTML, mas torna a tarefa dispendiosa sempre que é
necessário realizar alguma alteração
a técnica apresentada baseia‐se na utilização de
p ç
vectores, melhorando assim o processo de manutenção
… caixas de selecção dinâmicas …
<html> função para a construção
<head><script language="JavaScript"> dinâmica das caixas de
selecção
listaSO=new y( );
Array(4);
listaSO[1]= "Windows";
listaSO[2]= "Mac OS"; \ retira o significado do
listaSO[3]= "Linux"; caracter seguinte
listaSW=new Array(5);
listaSW[1]= "Director"; construção da marca
listaSW[2]= "Flash"; select
listaSW[3]= "Photoshop";
Photoshop ;
listaSW[4]= "Netscape";
function CriaSelect(nomeStr, lista){

var tStr="<select
tStr= <select name=\""+nomeStr+"\">"+
name=\ +nomeStr+ \ > +
"<option selected> -escolha uma opção-";
for(i=1; i<lista.length; i++)
tStr+="<option>"+ lista[i]; construção das restantes
tStr+="</select>"; lilinhas
h
return tStr;
}
função que tem a
ç q
function confirmar (){ informação seleccionada
indice1=document.forms[0].SO.selectedIndex;
indice2=document.forms[0].SW.selectedIndex;
pelo utilizador
(
return confirm("Os items seleccionados foram:\n\n“
\ \
+listaSO[indice1]+" e "+listaSW[indice2]
+"\n\n Confirmar as escolhas?");
}
</script> chamar a função que cria a caixa de
ç q
</head> selecção do Sistema Operativo
<body><form>
<p>Seleccione os SO e SW desejados:</p> chamar a função que cria a
<p> Sistema Operativo:</p> caixa de selecção do software
i d l ã d ft
<script language="JavaScript">
document.write(CriaSelect("SO", listaSO)+"<BR>");
</script>
<p>Software:</p> chamar a função
chamar a função
<script language="JavaScript"> para confirmar
document.write(CriaSelect("SW", listaSW)+"<BR>");
</script> escolhas
<p><input type="submit" value="ENVIAR" OnClick="confirmar();"></p>
</form></body>
</html>
mudança de imagens por acção do rato
utilização da colecção images
<html>
<script language="Javascript"> agrupa todas as imagens
f
function
ti t
troca_img(index,source)
i (i d ) { existentes numa página num
document.images[index].src = source;
único vector, permitindo a
}
</script>
/ p sua manipulação
<body>
<a href="Javascript: troca_img(0, 'fotos/caboverde.jpg');">
<img src=“fotos/portugal.jpg"></a>
</b d >
</body> utilização dos apostrofos
</html>
‘
em vez de aspas
“
para evitar que o Javascript as
interprete como sendo o
f h d
fecho das aspas iniciais
i i i i
click
sobre a
imagem
<html>
idêntico ao anterior
<head>
<script
i t l
language="Javascript">
" i t"
function troca_img(index,source) { utilização dos eventos
document.images[index].src = source; onmouseover
} e
</script> onmouseout
</head>
<body>
<f
<form>>
<img src="fotos/portugal.jpg" border="0"
onmouseover="troca_img(0, 'fotos/caboverde.jpg');"
onmouseout="troca_img(0,
g( , 'fotos/portugal.jpg');"></a>
/p g jpg ); /
</form>
</body>
</html>
…
trabalho

sw11 - JavaScript3

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

sw11 - JavaScript3

Enviado por

Direitos autorais:

Formatos disponíveis

sistemas web

function CriaSelect(nomeStr, lista){

Você também pode gostar