sw09 - JavaScript1

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
… 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
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>
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
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>


</html>
/ht l
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>
exemplo de um ficheiro externo
javaexterno.js
document.write(“texto do ficheiro externo”);
fx1.html
<html>
<head>
<script src=“javaexterno.js”> </script>
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
document.write(“texto do ficheiro 2”);
</script>
</head>
<body></body>
</html>
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
… 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
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>
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>
… onclick
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>
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>
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>
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>
…
trabalho

sw09 - JavaScript1

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

sw09 - JavaScript1

Enviado por

Direitos autorais:

Formatos disponíveis

sistemas web

Você também pode gostar