Você está na página 1de 15

Introduo

JavaScript a linguagem de scripting mais popular na internet. O JavaScript permite tornar dinmicas as pginas
HTML. Dessa forma possvel reagir a eventos (com premir um boto), processar e validar dados de um formulrio,
alterar dinamicamente os contedos de uma pgina (incluindo o seu texto), e muito mais.
O JavaScript uma linguagem interpretada. Isto quer dizer que a prpria ferramenta de navegao (o browser)
que interpreta e executa o cdigo JavaScript. A linguagem JavaScript baseada em objectos (mas no em classes).
Isto significa que no h distino entre tipos de objectos, sendo que as propriedades e os mtodos podem ser
adicionados dinamicamente a qualquer objecto. Como consequncia, os tipos de dados das variveis no so
declarados.
Para se familiarizar com a apresentao dos elementos que vo sendo introduzidos ao longo deste guia, sugere-se
que v experimentando criar as suas pginas HTML e verificando no browser o funcionamento dos seus scripts.

Como escrever JavaScript num documento HTML


O cdigo JavaScript integrado e embebido no cdigo HTML. Por exemplo:
<html>
<body>
<p>Este um pargrafo em HTML normal</p>
<script type="text/javascript">
var p = document.createElement("p");
p.innerHTML = "Este um pargrafo em Javascript";
document.body.appendChild(p);
</script>
</body>
</html>
Tem como resultado:

O cdigo JavaScript tem de se encontrar entre as etiquetas <script> e </script>. Para indicar ao browser que o
cdigo JavaScript, a etiqueta <script> deve incluir o atributo type="text/javascript".
Devido aos browsers que no suportam JavaScript (o que cada vez mais raro hoje em dia) normal encontrar o
cdigo JavaScript entre comentrios html como no exemplo seguinte:
<html>
<body>
<p>Este um pargrafo em HTML normal</p>
<script type="text/javascript">
<!--

var p = document.createElement("p");
p.innerHTML = "Este um pargrafo em Javascript";
document.body.appendChild(p);
//-->
</script>
</body>
</html>
Dentro do cdigo JavaScript os comentrios de linha so feitos utilizando // e blocos de comentrios comeam com
/* e terminam com */. No exemplo anterior foi utilizado um comentrio de linha para impedir que o interpretador de
JavaScript tente executar o fim de comentrio HTML.

Onde colocar o JavaScript


O cdigo JavaScript pode ser colocado nos dois blocos principais de um documento HTML: o cabealho (<head>) e
o corpo (<body>).
Cdigo colocado no corpo executado quando a pgina carrega.
Cdigo colocado no cabealho executado quando chamado.
Quando temos um conjunto de funes que pretendemos utilizar em vrias pginas, devemos coloc-las num
ficheiro externo, e aceder a esse ficheiro externo a partir do documento HTML. Podemos usar scripts externos da
seguinte forma:
<html>
<head>
<script type="text/javascript" src="ficheiro.js" />
</head>
<body>
</body>
</html>
No ficheiro externo no se deve colocar a etiqueta <script>. Esse ficheiro deve ter apenas cdigo JavaScript e no
cdigo HTML. A linha que declara onde se encontra o script externo deve ser colocada onde se colocaria o script
caso estivesse a ser escrito directamente no cdigo: no cabealho se for para ser usado quando chamado, ou no
corpo para ser usado quando a pgina carrega.

Outros aspectos sintcticos


JavaScript distingue entre maisculas e minsculas.
H duas formas de terminar uma instruo JavaScript: mudar de linha ou usar ponto e vrgula. Est ltima forma
opcional, mas normal us-la. Deve ter em considerao que no pode usar duas (ou mais) linhas para escrever
uma instruo, visto que o fim de linha corresponde ao fim de instruo. Mas pode escrever mais do que uma
instruo por linha, separando-as com ponto e vrgula.

Valores e Variveis
O JavaScript reconhece os seguintes tipos de valores:

Nmeros: 1 ou -133 ou 0.299


Cadeias de caracteres: "Ol"
Lgicos: true ou false
Especiais: null e undefined

Variveis
Como noutras linguagens uma varivel um nome ou identificador que contm um valor.

Para declarar uma varivel podemos fazer:


var x;
Depois da declarao a varivel est vazia (com o valor undefined). No entanto, se quisermos, podemos
inicializar uma varivel logo no momento da declarao.
var x = 42;
Em JavaScript podemos inclusivamente atribuir valores a variveis que ainda no foram declaradas, sendo estas
declaradas automaticamente.
y = 24;
Como pode ter reparado, ao declarar uma varivel no foi especificado o seu tipo. Isto porque em JavaScript o tipo
de uma varivel pode variar durante a execuo de um script.
x = "Sou uma string"; // x do tipo string
x = 42; // x passou a ser do tipo numeric
O tipo pode ser determinado pela expresso que d origem ao valor que fica armazenado na varivel.
x = "A resposta " + x; // x do tipo string com o valor "A resposta 42"
x = "37" + 7; // x do tipo string com o valor "377"
x = "37" - 7; // x do tipo numeric com o valor 30, porque o operador subtraco
// precisa de dois operandos numeric o que obriga a
// converter "37" para 37
var a; // a tem o valor undefined
b = a; // a e b tm o valor undefined
c = a + 1; // c do tipo numeric e tem o valor NaN
// (que corresponde ao undefined em numeric)
d = e; // erro, porque no foi declarado (nem automaticamente)
if (a == undefined) // verdadeiro
if (a) // equivalente a if (false)

Scope das variveis


Cada varivel tem um de dois scopes:

Global: quando declarada fora de uma funo


Local: quando declarada dentro de uma funo

Dentro uma funo obrigatrio declarar uma varivel com var nas seguintes situaes:

Se existe uma varivel global com o mesmo nome


Se funes recursivas ou vrias funes utilizam variveis com o mesmo nome

Operadores
Aritmticos
Assuma que y=5 nos exemplos seguintes
Operador
Descrio
Exemplo Resultado
+
Adio
x = y + 2 x = 7
Subtraco
x = y - 2 x = 3
*
Multiplicao x = y * 2 x = 10
/
Diviso
x = y / 2 x = 2.5
%
Resto da diviso x = y % 2 x = 1
++
Incremento
x = ++y
x = 6

--

Decremento

x = --y

x = 4

Atribuio
Assuma que x=10 e y=5 nos exemplos seguintes
Operador Exemplo Resultado
=
x = y
x = 5
+=
x += y x = 15
-=
x -= y
x = 5
*=
x *= y x *= 50
/=
x /= y
x = 2
%=
x %= y
x = 0

Comparao
Assuma que x=5 nos exemplos seguintes
Operador
==
===
!=
!==
>
<
>=
<=

Descrio
igual a

Exemplo Resultado
x == 8
false
x === 5
true
exactamente igual a
x === "5" false
diferente de
x != 8
true
x !== 5
false
exactamente diferente de
x !== "5"
true
maior que
x > 8
false
menor que
x < 8
true
maior ou igual que
x >= 8
false
menor ou igual que
x <= 8
true

Lgicos
Assuma que x=6 e y=3 nos exemplos seguintes
Operador Descrio
Exemplo
Resultado
&&
and
x < 10 && y > 1
true
||
or
x == 5 || y == 5 false
!
not
!(x == y)
true

Outros operadores
Condicional
Permite atribuir um valor a uma varivel em funo do resultado de uma condio.

var status = (idade >= 18) ? "adulto" : "menor";


New
Permite criar um objecto.

var pessoa = new Object();


var data = new date();
Delete
Permite remover um objecto.

delete pessoa;
This
Permite aceder ao objecto corrente.

var x = this.value;

Expresses

Condicionais
if ... else
<html>
<body>
<script type="text/javascript">
var sexo;
var p = document.createElement("p");
if (sexo == "M") {
p.innerHTML = "Exmo Senhor";
}
else {
p.innerHTML = "Exma Senhora";
}
document.body.appendChild(p);
</script>
</body>
</html>

switch
<html>
<body>
<script type="text/javascript">
var fruta = "laranja";
var p = document.createElement("p");
switch (fruta) {
case "laranja":
p.innerHTML = "Laranjas a 1 o quilo";
break;
case "ma":
p.innerHTML = "Mas a 1.25 o quilo";
break;
default:
p.innerHTML = "No escolheu a fruta!";
break;
}
document.body.appendChild(p);
</script>
</body>
</html>

Ciclos
for
<html>
<body>
<script type="text/javascript">
for (var conta=0; conta<5; ++conta) {
var p = document.createElement("p");
p.innerHTML = conta;
document.body.appendChild(p);
}
</script>
</body>
</html>

while

<html>
<body>
<script type="text/javascript">
var n=0;
while (n<5) {
n++;
var p = document.createElement("p");
p.innerHTML = n;
document.body.appendChild(p);
}
</script>
</body>
</html>

do while
<html>
<body>
<script type="text/javascript">
i = 1;
do {
var p = document.createElement("p");
p.innerHTML = i;
document.body.appendChild(p);
i++;
} while (i < 5);
</script>
</body>
</html>

break e continue
Dentro de um ciclo possvel utilizar o comando break para interromper a execuo do ciclo (a execuo do script
continua na execuo imediatamente a seguir ao fim do ciclo), ou o comando continue para saltar imediatamente
para o incio da prxima iterao do ciclo.

Manipulao de objectos
for ... in
A expresso for ... in permite iterar todos os elementos de um vector ou todas as propriedades de um objecto. O
cdigo dentro de um bloco for ... in executado uma vez para todos os elementos ou propriedades.
<html>
<head>
<title>Exemplo de For .. in</title>
</head>
<body>
<script type="text/javascript">
carro = {marca:"Suzuki", modelo:"Baleno", cilindrada:"1.3GL"};
var resultado = "";
for (var i in carro) {
resultado += "carro" + "." + i + "=" + carro[i] + "<br />";
}
resultado += "<hr />";
var p = document.createElement("p");
p.innerHTML = resultado;
document.body.appendChild(p);
</script>
</body>
</html>

Funes
As funes so pequenos blocos de cdigo que podem ser invocados noutras partes do programa para expandir a
funcionalidade da linguagem. Existem funes pr-definidas (j vimos algumas neste guio) e os programadores
podem definir as suas prprias funes.
Na definio de uma funo deve incluir:

a keyword function
o nome da funo
a lista de argumentos, entre parnteses e separados por vrgulas
os comandos que definem o cdigo da funo, entre chavetas
a keyword return se a funo retornar um valor

<html>
<head>
<script type="text/javascript">
function quadrado(num) {
return (num*num);
}
</script>
</head>
<body>
<script type="text/javascript">
x1=2;
y1=3;
document.write();
document.write();
var p = document.createElement("p");
p.innerHTML = "<br />"O quadrado de " + x + " = " + quadrado(x1) + "<br />"O quadrado
de " + y + " = " + quadrado(y1);
document.body.appendChild(p);
</script>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function imprime() {
var result = "<br />O carro " + this.marca + " de " + this.ano + " de " +
this.owner;
var p = document.createElement("p");
p.innerHTML = result;
document.body.appendChild(p);
}
function carro(p, m, a) {
this.owner = p;
this.marca = m;
this.ano = a;
this.imprime = imprime;
}
</script>
</head>
<body>
<script type="text/javascript">
carroana = new carro("Ana", "Ford", 1999);
carropb = new carro("Paulo", "Honda", 1995);
carroana.imprime();
carropb.imprime();
</script>
</body>
</html>

Objectos pr-definidos
String
O objecto String utilizado para manipular um pedao de texto. Como deve ser bvio pelo que j foi apresentado ao
longo deste guio, no necessrio criar objectos deste tipo recorrendo ao operador new.
var
var
var
var
var
var

txt = "Ol";
x = txt.length; // x = 3
upper = txt.toUpperCase(); // upper = "OL"
c = txt.charAt(2); // c = ""
i = txt.indexOf("l"); // i = 1
con = txt.concat(upper); // con = "OlOL";

Date
O objecto Date utilizado para trabalhar com datas e horas.
var novaData = new Date();
novaData.setFullYear(2010, 0, 14); // novaData 14 de Janeiro de 2010
novaData.setDate(novaData.getDate() + 5); // novaData cinco dias no futuro
hora = novaData.getHours(); // existem mtodos semelhantes para dias, minutos,
segundos ...
novaData.setMinutes(33); // existem mtodos semelhantes para dias, horas, segundos ...

Array
O objecto Array utilizado para armazenar vrios valores numa s varivel.
meuArray = new Array(5); // cria um array de tamanho 5
meuArray = new Array(1,4,2); // cria um array com 3 elementos
meuArray.length; // indica o tamanho do array
meuArray[0]; // valor do primeiro elemento

DOM - Document Object Model

Todos os elementos de uma pgina HTML so organizados numa hierarquia de objectos. Isto significa que todos os
elementos so objectos com propriedades e mtodos. Utilizando JavaScript possvel manipular esses objectos,
tornando assim uma pgina HTML em algo verdadeiramente dinmico.
Considere o seguinte cdigo HTML:
<html>
<body bgcolor="white">
<center>
<img src="fcul.gif" name="fcul" />
</center>
<form name="MeuForm">
Nome: <input type="text" name="nome" value="Insira nome" /> <br />
E-mail: <input type="text" name="mail" value="Insira e-mail" /> <br /> <br />
<input type="button" name="botao1"
value="Pressione" onClick="alert('Pressionou boto')" />
</form>
<p>Link: <a href="http://si.di.fc.ul.pt">Sistemas de Informao</a></p>
<p>
<center>
<img src="linha.gif" name="linha" />
</center> ...
Na seguinte imagem pode ver como que esse cdigo apresentado no browser. Na imagem tambm se
identificam os vrios elementos da pgina de acordo com o modelo de objectos do documento.

A imagem seguinte apresenta parte da estrutura do DOM da pgina apresentada.

E na tabela seguinte podemos ver como aceder a alguns dos objectos e suas propriedades em JavaScript.
Propriedade

Valor

Comentrio
o ttulo do documento que
document.title
""
neste exemplo no foi
atribudo
a propriedade background color
document.bgcolor
#ffffff
estabelecida como atributo do
elemento body
o endereo para onde aponta o
document.links[0].href
http://si.di.fc.ul.pt
primeiro link da pgina
o endereo do documento que
http://si.di.fc.ul.pt/ipm/jsobjlocation.href
est a ser apresentado no
ex1.htm
browser
possvel aceder aos objectos e suas propriedades de duas formas. A que foi apresentada atrs acede aos
objectos usando os vrios arrays que organizam todos os elementos de uma pgina HTML. Por exemplo, para
aceder ao valor do primeiro elemento do formulrio podemos escrever:
document.forms[0].elements[0].value
(tinha vantagem se quisessemos percorrer todos elementos de um tipo na pgina)
Mas tambm podemos aceder-lhe utilizando o nome dos elementos. O nome de um elemento valor do
atributo name desse elemento. Assim, se quisermos aceder ao mesmo elemento do exemplo acima, podemos
escrever:
document.meuForm.nome.value
(prefervel para aceder elementos de forma independente dos outros elementos, e sua
ordem)

Hierarquia de objectos de uma pgina HTML


Na figura seguinte apresentada a hierarquia de objectos de uma pgina HTML.

Quando se carrega uma pgina HTML num browser, esta hierarquia de objectos construda:

navigator: nome e verso do browser;


window: objecto de topo da hierarquia;
document: propriedades baseadas no contedo do documento
location: propriedades baseadas no endereo corrente
history: propriedades que representam os endereos requisitados anteriormente pelo cliente

Objecto Window
Este objecto de topo da hierarquia JavaScript. Este objecto representa uma janela do browser.
Alguns dos seus mtodos:

open() - abre uma nova janela do browser


close() - fecha a janela actual do browser
alert() - apresenta uma caixa de alerta com uma mensagem e um boto OK
confirm() - apresenta uma caixa de dilogo com uma mensagem, um boto OK e um boto Cancel
prompt() - apresenta uma caixa de dilogo com um campo de texto para se inserir um valor

Objecto Document
Este objecto representa todo o documento HTML e pode ser usado para aceder a qualquer um dos seus elementos.
Sendo parte do objecto Window pode ser acedido atravs da propriedade window.document.
Alguns dos seus mtodos e propriedades:

anchors[] - array com todas as ncoras do documento


links[] - array com todas as ligaes do documento
images[] - array com todas as imagens do documento

forms[] - array com todas os formulrios do documento


URL - retorna o endereo do documento
write() e writeln() - usados para escrever no documento
getElementById(id) - retorna uma referncia para o primeiro elemento do documento com o id especificado
getElementsByName(name) - retorna um array de elementos que tenham o name especificado

Objecto Location
Este objecto na realidade um objecto JavaScript e no um objecto DOM. Tem a informao sobre a localizao
actual e pode ser utilizado para carregar novas pginas. Sendo parte do objecto Window pode ser acedido atravs
da propriedade window.location.
Alguns dos seus mtodos e propriedades:

href - altera ou retorna o endereo actual


reload() - carrega novamente o documento actual
replace() - substitui o documento actual por um novo endereo

Objecto Form
Este objecto representa um formulrio HTML, ou seja, por cada etiqueta <form> no documento HTML uma entrada
no array forms[] criada. Este objecto particularmente til porque nos permite aceder informao introduzida
pelos utilizadores nos vrios campos de um formulrio.
Para aceder a um formulrio j vimos que o podemos fazer de duas formas. Atravs do array forms[]
(document.forms[0]) ou atravs do atributo namecaso este tenha sido atribudo (document.myForm).
Para aceder aos elementos do formulrio podemos proceder dessas duas formas tambm. Os vrios elementos
esto armazenados num array chamado elements[]. Assim podemos aceder ao primeiro elemento do formulrio
usando document.forms[0].elements[0]. Se o atributo name desse elemento tiver sido atribudo ento
podemos aceder atravs de document.myForm.text1.

Div e Span
div e span so duas etiquetas HTML muito teis para estruturar o contedo de um documento, e agrup-lo para
fins de formatao. A etiqueta divagrupa contedo em blocos. O comportamento dos browsers ao encontrar um
bloco , tipicamente, colocar uma mudana de linha antes e depois de um bloco. A etiqueta span agrupa contedo
inline. Neste caso o browser no coloca mudanas de linha. No exemplo seguinte pode ver-se a diferena entre as
duas etiquetas.
<p>Isto um <div>bloco div</div> dentro de um pargrafo.</p>
<p>Isto um <span>bloco span</span>dentro de um pargrafo.</p>
E esta a forma como este cdigo HTML apresentado pelo browser:
Isto um
bloco div
dentro de um pargrafo.
Isto um bloco span dentro de um pargrafo.
A utilizao destes blocos conjuntamente com JavaScript permite alterar dinamicamente, de uma forma simples e
eficaz, o contedo e a apresentao de uma pgina HTML. Basta para isso usar um atributo id no bloco, e atravs
do mtodo getElementById() aceder a esse elemento. Atravs de JavaScript podemos alterar o valor do
atributo style do elemento para modificar o estilo de apresentao. Para aceder ao contedo de um bloco
podemos usar o atributo innerHTML. Considere o seguinte cdigo:
<div id="texto">Isto um texto</div>
O valor de texto.innerHTML "Isto um texto".

Eventos
As aplicaes JavaScript so event-driven, ou seja, orientadas por eventos. Eventos so aces que ocorrem como
resultado de acontecimentos (p.ex. a pgina acaba de carregar) ou algo que o utilizador faz (p.ex. carregar num
boto, ou inserir texto num campo). Para reagir aos eventos necessrio definir event handlers. Na tabela seguinte
apresentam-se alguns dos event handlers definidos pelo JavaScript.
Event handler
onBlur
onChange
onClick
onFocus
onKeyPress
(onKeyDown e
onKeyUp)
onLoad
onMouseDown
(onMouseUp)
onMouseMove

Aplica-se a
janelas e todos os elementos de um
formulrio

Ocorre quando
o utilizador tira o foco a
uma janela ou a um elemento
o utilizador muda o valor de
text fields, textareas, select lists
um elemento
buttons, radio buttons, checkboxes,
o utilizador clica no
submit buttons, reset buttons, links
elemento ou no link
janelas e todos os elementos de um o utilizador d o foco a uma
formulrio
janela ou formulrio
documentos, imagens, links, text
areas

o utilizador carrega numa


tecla

document body

uma pgina acaba de carregar


o utilizador carrega num
boto do rato
o utilizador move o rato
o utilizador submete um
formulrio

onSubmit

documentos, butes, links

formulrio

Considere o seguinte exemplo:


<a href="http://si.di.fc.ul.pt/"
onclick="confirm('Quer mesmo ir para a pgina de Sistemas de Informao?')">
Sistemas de Informao</a>
Neste caso, quando o utilizador clicar sobre o link, aparece uma caixa de dilogo que pede ao utilizador para
confirmar que pretende seguir a ligao. Apenas no caso do utilizador responder OK (caso em que o script
devolve true) que a ligao seguida.

Validao de campos de formulrios


As possibilidades que os eventos oferecem so muitas vezes utilizadas para fazer uma primeira validao do
preenchimento dos campos de um formulrio. Os dados introduzidos por um utilizador podem ser validados em duas
ocasies:

o texto introduzido (utilizando o evento onChange)


o formulrio submetido (utilizando o evento onClick do boto de submisso)

Exemplo:
<html>
<head>
<script type="text/javascript">
function qty_check(item, min, max) {
var returnVal = false;
if (item.value <= 0)
alert("Introduza um nmero positivo");
else if (parseInt(item.value) < min)
alert("Introduza uma " + item.name + " maior que " + min);
else if (parseInt(item.value) > max)
alert("Introduza uma " + item.name + " menor que " + max);
else
returnVal = true; return returnVal;
}
function validate(theform) {
if (qty_check(theform.quantidade, 2, 999))
alert("Pedido aceite");

else
alert("Desculpe, mas o pedido no foi aceite");
}
</script>
</head>
<body>
<form name="order">
Quantas unidades quer?
<input type="text" name="quantidade" onchange="qty_check(this, 2, 999)" /> <br />
<input type="button" onclick="validate(this.form)" />
</form>
</body>
</html>

Exerccios
1.
2.

3.
4.
5.

Construa uma pgina HTML com um formulrio com um nico boto. Quando o utilizador premir o boto,
dever ser exibida uma caixa de alerta com o texto "Boto seleccionado".
Acrescente um campo para introduo de texto ao formulrio do exerccio anterior. Modifique o
comportamento do boto de modo a que quando for premido, a caixa de alerta apresente o texto que
estiver escrito no campo do formulrio.
Modifique o formulrio de forma a que, quando o utilizador tiver escrito mais que cinco caracteres na caixa
de introduo de texto, aparea uma caixa de alerta indicando quantos caracteres foram escritos.
Acrescente um novo boto ao formulrio. Quando esse boto for premido a pgina do departamento de
informtica da FCUL dever ser carregada.
Construa uma pgina HTML que dever ter um bloco de texto e um "link". Quando o utilizador seleccionar o
"link", o contedo do bloco de texto dever ser substitudo (p.ex. "Texto antigo" passa a "Novo texto"), sem
que uma nova pgina seja carregada.