Você está na página 1de 50

JAVASCRIPT

O que Javascript?

O JavaScript uma linguagem de scripting,


orientada a objectos e independente de
plataformas
Criada pela NetScape
Cdigo embebido em paginas HTML
Utilizada para:

Interactividade nas pginas HTML


Validar formulrios

Interpretada pelos Browsers

Javascript e Java

Javascript versus Java


A mesma

coisa ou coisas diferentes?

Pesquisa
Diferena entre Javascript e Java

Javascript Java

Java uma linguagem diferente


So
duas
tcnicas
diferentes
de
programao na Internet:
Java uma linguagem de programao.
JavaScript uma linguagem de scripting
(tal como diz o nome). Embedida numa
pgina web.

O que faz o Javascript?

Cria um interface com o utilizador activo;


Pode validar dados introduzidos em formulrios
(form);
Permite personalizar uma pgina HTML, com
base: nos dados introduzidos, cookies, no dia
de semana, na semana, da localizao, entre
outras;
Pode controlar os browsers (utilizador pode
permitir ou no);

Onde colocar o Javascript?

Dentro do ficheiro HTML


Como

evento de um elemento
Como elemento SCRIPT dentro de BODY
Como funo, dentro de HEAD

Num ficheiro externo


Prefervel,

pelas mesmas razes das CSS

<script src="common.js">

</script>

Usando JavaScript

O uso de JavaScript deve ser definido da


seguinte forma:
<script language="javascript">
/* script */
</script>

Janelas

Existem 3 tipos de janelas que podem ser usadas e


que permitem a interao com o utilizador:
alert

(algumtexto) - Janela de alerta

confirm

(algumtexto) - Janela de confirmao

prompt

(algumtexto,valorinicial) - Janela
recolha dados

<html>
<body>
<script>
var num=prompt(Escreva um numero);
Alert(Escreveu o nmero+num);
Confirm(Est certo);
</script>
</body>
</html>

Javascript: exemplo

O script abaixo l o nome do utlizador e d boas-vindas.

<body>
<script language="javascript">
/* Script de Boas-Vindas */
var NOME;
NOME = window.prompt ("Entre com seu nome: " , "Digite-o aqui: ");
document.write ("Oi " + NOME + " esteja a vontade" );
</script>
</body>

Javascript: exemplo
<html>
<head>
<script language="javascript">
var nome
nome = window.prompt("Digite o seu nome:");
document.write("Bom dia, " + nome + "!<BR>");
document.write("tchau!!");
</script>
</head>
<body>
</body>
</html>
10

Javascript: exemplo
<html>
<head>
<title>Javascript</title>
</head>
<body>
<h1>Em HTML</h1>
<h1>
<script type="text/javascript">
document.write(Agora em JavaScript");
</script>
</h1>
</body>
</html>
11

JavaScript

Variveis

definio
x=3.14
var x=3.14

13

variveis definidas com var e sem valor atribudo


tem valor undefined

As variveis so globais se definidas fora de uma


funo, caso contrrio so variveis locais.

JavaScript

Tipos de dados
Tipos de dados dinmicos
var x=3.14
var str=hello world
var nome

Tipos de dados primitivos

14

nmeros (inteiros e reais)


string (cadeia de caracteres)
lgicos (true ou false)
null
undefined

Operadores

OJavaScripttemosseguintesoperadores:

Operadores

Aritmticos
Strings Afectao
Comparao
Lgicos
(booleanos)

Operadores de afectao
Operador
x += y
x -= y
x *= y
Ex:a+=3a=
a+3retorna7se
x /= y
avaler4
x %= y
x ^= y

Equivalncia
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
x=x^y

Funes
variveis globais.

As funes em JavaScript tm um nome e, em geral, tm


argumentos e geram um valor.
}

function nome_de_funo (parametro1, parametro2, ... )


{
declaraes de variaveis e instrues...
}

As variveis declaradas dentro de uma funo s podem ser


acedidas dentro da funo onde so declaradas.

A definio de uma funo consiste


na palavra-chave
}
function, seguida pelo seu nome, uma lista de argumentos dentro de parntesis e separados por vrgulas - e as
respectivas instrues, dentro de chavetas.

Ultimaactualizao:18-10-2011

Estruturas de Deciso

Deciso Simples:
If (condio)
{
/*Instrues para condio verdadeira*/
}

Deciso Composta:
If (condio)
{
/*Instrues para condio verdadeira*/}
Else
{
/*Instrues para condio falsa*/}

Estruturas de Deciso - Operadores


Lgicos
Smbolo

Significado

||

Ou (OR)

&&

E (AND)

No (NOT)

Atravs dos operadores lgicos podemos criar condies


compostas.
Exemplo:
if (sexo==F && idade>= 18)
{
document.write (Mulher Maior de Idade);
}

Estruturas de Deciso

Seleo Sequencial

Para facilitar a interpretao do cdigo e evitar sequencias muito


grandes de encadeamento de deciso, utilizamos o Switch...
Case.

Exemplo:
switch (mes)
{
case 1: document.write(Janeiro); break;
case 2:document.write(Fevereiro); break;
......
}

Estruturas de Repetio

while (condio)
{ cdigo a ser executado enquanto a
condio for verdadeira; }
<html>
<body>
<script LANGUAGE=Javascript>
Var i=1;
While (i<=5)
{
document.write(O numero " +i+ "<br>);
i++;
}
</script>
</body>
</html>

Estruturas de Repetio

for (inicializao; condio; incremento)


{
cdigo
}

<html>
<body>
<script LANGUAGE=Javascript>
for (i=1; i<=5; i++)
{
document.write(Ol<br>);
}
</script>
</body>
</html>

JavaScript
<html>
<head>
</head>
<body>
<script LANGUAGE=Javascript>
var d=5;
if (d==5)
document.write( o nmero cinco);
else
document.write(No o numero cinco);
</script >
</body>
</html>
23

Estruturas de Repetio
Do
{ cdigo a ser executado enquanto a
condio for verdadeira; }
..while (condio) <html>

<body>
<script LANGUAGE=Javascript>
Var i=1;
do
{
document.write(O numero " +i+ "<br>";
i++;
}
While (i<=5)
</script>
</body>
</html>

JavaScript

Arrays

definido como um conjunto de literais

var paises=["Portugal","Espanha","Frana"];

definido com o construtor new do objecto - Array

var cidades = new Array(Porto",Braga",Viseu");


var vec1=new Array(4);

25

Propriedades e Mtodos
Date

Mtodos

Descrio

Getday()

Fica com o dia

Getmonth()

Fica com o ms

Getyear()

Fica com o ano

Setdate()

Ajusta o dia do ms

Setyear()

Ajusta o ano

Propriedades e Mtodos
String

Propriedade
length

Descrio
Nmero de caracteres

Mtodos
Indexof()

Retoma a posio de onde de encontra a substring

substring()

Retoma a substring formada pela posio de inicio e


pela do fim

touppercase()

Pe todos os elementos em maisculas

Eventos
Eventos do rato
Eventos

Descrio

onclick

Quando clica com o rato num html control

ondblclick

Quando dupla clica com o rato num html control

onmousedown

Quando pressiona o boto do rato

onmousemove

Quando move o rato

onmouseout

Quando move o rato para fora

onmouseover

Quando move o rato em cima

onmouseup

Quando deixa de pressionar

Eventos
Teclado
Eventos

Descrio

onkeydown

Quando pressiona uma tecla

onkeypress

Quando pressiona uma tecla, este evento est


activo continuamente at deixar de pressionar na
tecla

onkeyup

Quando deixa de pressionar a tecla

Window
Eventos

Descrio

onload

Quando a janela inicializada

onresize

Quando o utilizador muda o tamanho da janela

Eventos
HTML elementos
Eventos

Descrio

onchange

Quando um valor alterado

onfocus

Quando um elemento ganha controlo

onreset

Quando o utilizador faz reset

onselect

Quando o utilizador muda de select

onsubmit

Quando o utilizador submite uma form

Objectos
document
propriedades

Descrio

images

Retorna um array com todas as imagens do documento

forms

Retorna um array com toos os forms do documento

links

Retorna um array com todos os links do documento

url

Retorna o url do documento

getelementbyid

Retorna o elemento especifico dado pelo id

onsubmit

Quando o utilizador submite uma form

Por exemplo
Document.images[0] -referencia a primeira imagem do documento
document.getElementById(teste) referencia o lemento de html
usado na pgina que tem o nome teste

39

JavaScript Dom (Document Object Model)

JavaScript

JavaScript DOM
window
contm a informao sobre as janelas e frames

document
contm informao sobre o documento HTML e
permite aceder aos elementos HTML dentro do
documento

navigator
Contm informao sobre o browser do utilizador

event
40

Contm informao sobre os eventos que ocorrem


na pgina

JavaScript

JavaScript Windows e Frames

window.alert(text)
apresenta uma janela com o texto especificado como parmetro

result = window.confirm(text)
apresenta uma janela de dilogo. result um valor booleano com
valor true se foi premido o boto OK e false para o boto Cancel

window.open("URL", "name" [, "windowfeatures"])


mtodo para criar uma nova janela. Devolve um objecto do tipo window.
O name permite identificar a janela para ser utilizado no target.
windowfeatures define propriedades da janela como altura, largura,
toolbar
var winobj=window.open("btest2.html", "bwin",
"toolbar,status");

41

JavaScript
url = window.location
window.location = url

propriedade para definir novo url da pgina ou saber url corrente


function getNews() {
window.location= "http://www.cnn.com"; }
no html: <button onclick="getNews();">News</button>

window.parent
devolve uma referncia para a janela (frame) pai da janela( frame)
corrente.

window.top
devolve uma referncia para a janela principal (ou frameset) numa hierarquia
de janelas

msg = window.status
window.status = msg

42

propriedade que permite alterar o texto na statusbar do browser.

JavaScript

windows.history
devolve uma referncia para o objecto history que contm uma
lista dos URL visitados. O mtodo go, back e forward deste objecto
permite redireccionar o browser.

h = window.history;
if ( h.length )
{ // if there is a history
h.back();
// equivalent to clicking back button
}

windows.setTimeOut
window.setTimeout("tick();", 100);

43

Funo tick ser chamada ao fim de 100 ms

JavaScript

JavaScript e Forms

Cada form HTML num documento cria um objecto form


Existe um array forms com as vrias forms de um
documento.
Acesso a um form em javascript

Por indice

document.forms[0]

Por id/name
document.myform

//no html <form id=myform


name=myform
44

O objecto form contm um array elements com os


elementos que a constituem

JavaScript

Eventos

O JavaScript implementa um modelo de eventos


Os eventos permitem escrever cdigo para interagir com as
aces do utilizador
Para cada evento (click) existe um eventhandler (onclick)
para responder ao evento
Ligao de um elemento HTML a um evento:
<input type="button" value=Enviar"
onClick=validar(this.form)">
<input type="button" value="Pesquisa Google"
onclick="window.open('www.google.com');" >

45

Javascript
Object

Event Handlers

Area onClick, onMouseOut, onMOuseOver


Button
onBlur, onClick, onFocus
Checkbox
onBlur, onClick, onFocus
Form onReset, onSubmit
Frame
onLoad, onUnload
Link
onClick, onMouseOut, onMouseOver
Select
onBlur, onChange, onFocus
Submit
onBlur, onClick, onFocus
Text
onBlur, onChange, onFocus
Window onBlur, onError, onFocus,
onLoad, onUnload
46

Acesso aos elementos de um Form

Input text, textarea e password


Nome: <input type="text" name=nome
id="nome" size="36"></p>
nomeobj=document.getElementById("nome")
strnome=nomeobj.value

47

propriedade value do objecto.

Acesso aos elementos de um Form

Select
<p><select size="2" name="cidades
id=cidades>
<option value="1">Porto</option>
<option value="2">Lisboa</option>
</select></p>
O controlo select tem um array options[ ]
O mtodo selectedIndex devolve o ndice da opo
seleccionada
A propriedade
textatributo
devolvemultiple
o texto*/da opo
/* Select sem
var obj=document.getElementById("cidades");
index=obj.selectedIndex;

48

str=cidadesobj.options[index].text

Acesso aos elementos de um Form

Select
Propriedade

selected de option [ ]

/* Select com atributo multiple*/


for (i=0;i<myselect.length;i++){
if (myselect.options[i].selected)
{
seleccionados[j]=myselect.options[i].tex
t; //guardar num vector
j++;
}

49

Acesso aos elementos de um Form

Radio Buttons / Checkboxes

Regime:
<input type="radio" name="Regime" value="Diurno"
checked=checked>Diurno
<input type="radio" name="Regime" value="Noturno">Noturno

getElementsByName devolve um array de objectos com o mesmo nome


Propriedade checked devolve true se seleccionado
Propriedade value devolve o valor do elemento

var
radioobj=document.getElementsByName(Regime")
for (i=0;i<radioobj.length;i++)

50

if (radioobj[i].checked)
str=radioobj[i].value;

Deteco do browser
var ns4 = (document.layers) ? true : false;
var ie4 = (document.all && !document.getElementById) ?
true : false;
var w3c = (document.getElementById) ? true : false;

getElementByID

e
getElementsByName

so os mtodos propostos pelo DOM W3C para


aceder aos elementos HTML e so
implementados no IE 6 e Netscape 7
Cdigo
51

antigo nos forms

document.formname.htmlname

Expresses Regulares em JavaScript

Usadas para validar a informao num Form HTML

Criar uma expresso regular:

Usando uma expresso literal:


var regexpr = /^\d{6}$/
com a seguinte sintaxe:

/padro/

usando o construtor do objecto RegExp :

52

var regexpr = new


RegExp("^\d{6}$")
Aplicar a expresso regular
Mtodo test do objecto RegExp
regexp.test(num)

Expresses Regulares em
JavaScript

Exemplo

function validate()
{
var regexp=/^\d{6}$/;
num=document.getElementById("numaluno").value;
if (regexp.test(num))
{ return true;}
else { alert("Nmero tem de ter 6 dgitos");
return false;
}
}

53

Caracteres especiais
Pattern

Symbol

Alternative

adigit(positiveinteger)

\d

[0123456789]
or[0-9]

anon-digit

\D

[^0-9]

awordcharacter

\w

[a-zA-Z0-9_]

anon-wordcharacter

\W

[^\w]

awhitespacecharacter

\s

[ \t\n\r\f]

anon-whitespacecharacter

\S

[^\s]

anysinglecharacterexceptnewline

[^\n]

matchoneormoreoccurrencesofx

x+

{1,}

Matchestheprecedingpatternx0or1times

x?

zeroormoreoccurrencesoftheprecedingpatternx

x*

{0,}

54

Matchesatleastnandatmostmoccurrencesofthe
precedingpatternx

{n,m}

Matchesexactlynoccurrencesoftheprecedingpatternx

x{n}

Matchesatleastnoccurrencesoftheprecedingpatternx

x{n,}

Anchorsyoursearchatthebeginningoftheline

^pattern

Anchorsattheendoftheline

pattern$

exactlyonecharacteroutoftheset

[character
s]

matchesanysinglecharacter,except

[^charact
ers]

arange,i.e.allthecharactersfromchar1tochar2
inclusive

[char1char2]

grouporformsubpattern&remember

(subpattern)

or

escapespecialcharacters
55

Expresses Regulares em
JavaScript

/^\D+$/ s caracteres e pelo menos um


/^.+@.+\..{2,3}$/validao simples de
um email

^.+

no inicio um ou mais caracteres

carcter obrigatrio

.+

. Seguido de um ou mais caracteres

\.

Carcter . obrigatrio

.{2,3}$ no fim ocorrncia de pelo menos 2


caracteres e no mximo 3
56

JavaScript e CSS
Alterao de estilos de um elemento
usando o objecto style
Sintaxe:

objectelement.style.propriedade=valor
var objdiv=document.getElementById("p1")
objdiv.style.color=black"
objdiv.style.backGroundColor=red
obj.style.display="block";

57

JavaScript e CSS
Alterao do contedo de um
elemento HTML innerHTML

function change_div_over(strid)
{
var myobj=document.getElementById(strid)
myobj.style.color="blue";
myobj.style.backgroundColor = "#00DD33";
myobj.innerHTML="Departamento de Engenharia
Informtica";
}
58