Você está na página 1de 20

sistemas web

aula 9
l 9
™JavaScript
p
introdução …
™ JavaScript é
ƒ linguagem de programação da família da linguagem C
g g p g ç g g
ƒ criada para a Internet pela Netscape em 1995
™ standard definido pelo ECMA (European Computers 
Manufacuring Organization) – ECMA‐261 (ISO‐16262)
Manufacuring Organization) – ECMA‐261 (ISO‐16262)
ƒ – ECMA
ƒ http://www.ecma‐international.org/publications/standards/ECMA‐262.htm
ƒ – Netscape
N t
ƒ http://devedge‐temp.mozilla.org/central/javascript/index_en.html
ƒ – Microsoft
ƒ http://msdn2.microsoft.com/en‐us/library/hbxc2t98(vs.71).aspx
htt // d 2 i ft / /lib /hb 2t98( 71)
™ recursos para programar em JavaScript:
ƒ um editor de texto simples para escrever o código
ƒ um navegador (browser) para testar

pedro leão SW 0809 9.2
… introdução …
™ características
ƒ linguagem embebida no HTML
g g
ƒ orientada a eventos
ƒ não compilada
ƒ interpretada
ƒ “independente” da plataforma

™ potencialidades
t i lid d
ƒ gerar HTML
ƒ reagir a acções do visitante
ƒ gerar conteúdos dinâmicos
ƒ verificar o correcto preenchimento de formulários
ƒ g
criar efeitos gráficos

pedro leão SW 0809 9.3
… introdução …
™ vantagens
ƒ semelhante à linguagem C
semelhante à linguagem C
ƒ fácil aprendizagem
ƒ não exige recursos do lado do servidor
ƒ rápida, não tem de esperar por resposta do servidor
ƒ segura, porque não permite ler ou escrever no computador do visitante 
(excepto os cookies), nem no servidor

™ desvantagens
ƒ o código fica exposto no meio do código HTML
ód f d ód
ƒ não é uma ferramenta adequada para aceder a base de dados
ƒ é menos versátil do que o Java
q

pedro leão SW 0809 9.4
estrutura dos programas
<html>
<head>
<script>
...
</script>
</head>
<body>
...
</body>
</html>

ou
<html>
<body>
b d
<script type=“text/javascript”>
document.write(“Sistemas Web”);
</script>
</body>
/
</html>

pedro leão SW 0809 9.5
sintaxe
™ todas as instruções devem terminar com ponto e vírgula  ;

™ linguagem sensível a maiúsculas e a minúsculas
ƒ A instrução while não deve ser escrita While
ƒ A váriável nome é diferente da variável Nome ou NOME
ƒ A função calcular é diferente da função Calcular ou CALCULAR

™ os espaços em branco são ignorados
ƒ var x=0 identico a    var x = 0

™ utilização de comentários
ƒ /*
/ comentário 
comentário */
/ permite ter várias linhas de comentários
permite ter várias linhas de comentários
ƒ // comentário apenas numa linha
pedro leão SW 0809 9.6
exemplos de comentários
<html>
<body>
<script type="text/javascript">
type= text/javascript >
/* aqui estão comentários Javascript */
// aqui estão mais comentários Javascript
/* aqui estão outros comentários Javascript
a ocuparem varias linhas
*/
document.write("<p>uma linha</p>"); // outro comentário
document.write("<p> outra linha </p><p>e mais outra</p>");
</
</script>
i t>
</body>
<!-- comentários HTML -->
<!-- são diferentes dos comentários em Javascript -->
</html>
/ht l

pedro leão SW 0809 9.7
ficheiros externos
™quando se pretende que o mesmo código seja usado por 
vários documentos
ái d

™o ficheiro externo com código JavaScript
ƒ deve ser um ficheiro com extensão .js j
ƒ deve ser invocado a partir do ficheiro HTML
ƒ deve ser invocado na forma
ƒ <script src=“ficheiroExterno.js”></script>
ƒ não deve conter a marca <script>

pedro leão SW 0809 9.8
exemplo de um ficheiro externo
javaexterno.js
document.write(“texto do ficheiro externo”);

fx1.html
<html>
<head>
<script src=“javaexterno.js”> </script>
<script type=“text/javascript”>
document.write(“texto do ficheiro 1”);
p
</script>
</head>
<body></body> <html> fx2.html
</html> <head>
p src=“javaexterno.js”>
<script j j </script>
/ p
<script type=“text/javascript”>
document.write(“texto do ficheiro 2”);
</script>
</head>
<body></body>
</html>
pedro leão SW 0809 9.9
eventos …
™o JavaScript é uma linguagem orientada a 
eventos

™os eventos podem ser produzidos
ƒ pelo sistema
ƒ carregar ou descarregar uma página
ƒ por acção directa do visitante
ƒp
premir um botão do rato

pedro leão SW 0809 9.10
… eventos …
elementos 
elementos eventos suportados
eventos suportados
HTML blur click change focus load mouseover select submit unload
button D
checkbox D
document D D D
form D
link D D
radio D
reset D
selection D D D
submit D
text D D D D
textarea D D D D
a cada evento corresponde o respectivo manipular de evento
onblur, onclick, onchange, onfocus, onload, onmouseover, onselect, onsubmit, onunload
pedro leão SW 0809 9.11
eventos de sistema
<html>
<head>
<script
i t l
language=“Javascript”>
“ i t”
function init(){
window.alert(“Bom dia.\n
Bem vindo.”);
);
}
function sai(){
window.alert(“Adeus…”);
}
</script>
</head>
<body
y onload=“init();”
();
onunload=“sai();”>
<p> Texto da página </p>
</body>
</ht l>
</html>

pedro leão SW 0809 9.12
eventos do utilizador … onclick
<html>
<head><script language=“Javascript”>
function fun1() {
document.bgColor=“red”; }
f
function
ti f
fun2()
2() {
document.bgColor=“green”; }
function fun3() {
document.bgColor=“yellow”;
g y ; }
</script>
</head>
<body>
<h2>T t dos
<h2>Teste d eventos
t OnLoad
O L d e OnClick</h2>
O Cli k</h2>
<a href=“javascript:fun1();”>Fundo de cor vermelho</a>
<form name=“fm”>
<input
p type=“radio”
yp name=“campo”
p onclick=“fun2();”>
();
Fundo verde<br>
<input type=“radio” name=“campo” onclick=“fun3();”>
Fundo amarelo<br>
</f
</form>>
</body>
</html>
pedro leão SW 0809 9.13
… onclick

pedro leão SW 0809 9.14
onsubmit
<html>
<head>
<script
i t l
language="Javascript">
" i t"
function envio() {
window.alert("Informação enviada!");
}
</script> (só simula que envia)
</head>
<body>
< >T t d
<p>Teste do evento
t S Submit</p>
b it</ >
<form name="form1" onsubmit="envio();">
Nome: <input type="input" name="nome"> <br>
Morada: <input
p type="input"
yp p name="morada"> <br>
<input type="submit" value="Enviar">
</form>
</body>
</ht l>
</html>

pedro leão SW 0809 9.15
onfocus
<html>
<head>
<script
i t l
language=“Javascript”>
“ i t”
function foco() {
window.alert(“O campo Nome ganhou o foco”);
}
</script>
</head>
<body>
< >T t d
<p>Teste do evento
t d de f
foco</p>
</ >
<form name=“form1”>
Nome:<input type=“text” name=“nome” onfocus=“foco();”> <br>
Morada:<input
p type=“text”
yp name=“morada"> <br>
<input type=“submit” value="Enviar">
</form>
</body>
</ht l>
</html>

pedro leão SW 0809 9.16
colocação inicial do focus
Quando o documento e 
carregado, o foco fica 
automaticamente no 
campo nome do 
formulário registo

<html>
<body onLoad=“document.registo.nome.focus()”>
<f
<form name=“registo”>
“ i t ”>
Nome: <input type=“text” name=“nome” size=“20” > <br>
Telefone: <input type=“text” size=“7” name=“telefone”>
</form>
/
</body>
</html>

pedro leão SW 0809 9.17
onmouseover

<html>
<head>
<script language=“Javascript”>
function legenda() {
window.alert(“Bandeira de Portugal”);
}
</script>
</head>
/
<body>
<p>Teste do evento mouseOver</p>
<p> <img src=“fotos/portugal.jpg”
src fotos/portugal.jpg onmouseover
onmouseover=“legenda();”></p>
legenda(); ></p>
</body>
</html>
pedro leão SW 0809 9.18

pedro leão SW 0809 9.19
trabalho

pedro leão SW 0809 9.20