Introdução Javascript

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>
</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>
var sexo;
if (sexo == "M") {
p.innerHTML = "Exmo Senhor";
}
else {
p.innerHTML = "Exma Senhora";
}
</script>
</body>
</html>
switch
<html>
<body>
var fruta = "laranja";
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;
}
</script>
</body>
</html>
Ciclos
for
<html>
<body>
for (var conta=0; conta<5; ++conta) {
p.innerHTML = conta;
}
</script>
</body>
</html>
while
<html>
<body>
var n=0;
while (n<5) {
n++;
p.innerHTML = n;
}
</script>
</body>
</html>
do while
<html>
<body>
i = 1;
do {
p.innerHTML = i;
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>
carro = {marca:"Suzuki", modelo:"Baleno", cilindrada:"1.3GL"};
var resultado = "";
for (var i in carro) {
resultado += "carro" + "." + i + "=" + carro[i] + "<br />";
}
resultado += "<hr />";
p.innerHTML = resultado;
</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>
function quadrado(num) {
return (num*num);
}
</script>
</head>
<body>
x1=2;
y1=3;
document.write();
document.write();
p.innerHTML = "<br />"O quadrado de " + x + " = " + quadrado(x1) + "<br />"O quadrado
de " + y + " = " + quadrado(y1);
</script>
</body>
</html>
<html>
<head>
function imprime() {
var result = "<br />O carro " + this.marca + " de " + this.ano + " de " +
this.owner;
p.innerHTML = result;
}
function carro(p, m, a) {
this.owner = p;
this.marca = m;
this.ano = a;
this.imprime = imprime;
}
</script>
</head>
<body>
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>
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.

Introdução Javascript

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

Introdução Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

Introduo

Como escrever JavaScript num documento HTML

Onde colocar o JavaScript

Outros aspectos sintcticos

Nmeros: 1 ou -133 ou 0.299

Para declarar uma varivel podemos fazer:

Scope das variveis

Global: quando declarada fora de uma funo

Se existe uma varivel global com o mesmo nome

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

var pessoa = new Object();

DOM - Document Object Model

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

Hierarquia de objectos de uma pgina HTML

navigator: nome e verso do browser;

open() - abre uma nova janela do browser

anchors[] - array com todas as ncoras do documento

forms[] - array com todas os formulrios do documento

href - altera ou retorna o endereo actual

o utilizador carrega numa

uma pgina acaba de carregar

documentos, butes, links

Considere o seguinte exemplo:

Validao de campos de formulrios

o texto introduzido (utilizando o evento onChange)

Você também pode gostar