MOD 5 - Javascript

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 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>
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>
for (inicializao; condio; incremento)

{
cdigo
}
<html>
<body>
for (i=1; i<=5; i++)
{
document.write(Ol<br>);
}
</script>
</body>
</html>
JavaScript
<html>
<head>
</head>
<body>
var d=5;
if (d==5)
document.write( o nmero cinco);
else
document.write(No o numero cinco);
</script >
</body>
</html>
23
Do
{ cdigo a ser executado enquanto a
condio for verdadeira; }
..while (condio) <html>
<body>
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
Form onReset, onSubmit
Frame
onLoad, onUnload
Link
onClick, onMouseOut, onMouseOver
Select
onBlur, onChange, onFocus
Submit
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.
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
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
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

MOD 5 - Javascript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

MOD 5 - Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

JAVASCRIPT

O JavaScript uma linguagem de scripting,

Interactividade nas pginas HTML

Interpretada pelos Browsers

Javascript versus Java

coisa ou coisas diferentes?

Java uma linguagem diferente

O que faz o Javascript?

Cria um interface com o utilizador activo;

Onde colocar o Javascript?

Dentro do ficheiro HTML

Num ficheiro externo

pelas mesmas razes das CSS

O uso de JavaScript deve ser definido da

Existem 3 tipos de janelas que podem ser usadas e

(algumtexto) - Janela de alerta

(algumtexto) - Janela de confirmao

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

variveis definidas com var e sem valor atribudo

As variveis so globais se definidas fora de uma

Tipos de dados primitivos

nmeros (inteiros e reais)

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

function nome_de_funo (parametro1, parametro2, ... )

As variveis declaradas dentro de uma funo s podem ser

A definio de uma funo consiste

Estruturas de Deciso - Operadores

Atravs dos operadores lgicos podemos criar condies

Para facilitar a interpretao do cdigo e evitar sequencias muito

for (inicializao; condio; incremento)

definido como um conjunto de literais

definido com o construtor new do objecto - Array

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

Fica com o dia

Fica com o ano

Retoma a posio de onde de encontra a substring

Retoma a substring formada pela posio de inicio e

Pe todos os elementos em maisculas

Quando clica com o rato num html control

Quando dupla clica com o rato num html control

Quando pressiona o boto do rato

Quando move o rato

Quando move o rato para fora

Quando move o rato em cima

Quando deixa de pressionar

Quando pressiona uma tecla

Quando pressiona uma tecla, este evento est

Quando deixa de pressionar a tecla

Quando a janela inicializada

Quando o utilizador muda o tamanho da janela

Quando um valor alterado

Quando um elemento ganha controlo

Quando o utilizador faz reset

Quando o utilizador muda de select

Quando o utilizador submite uma form

Retorna um array com todas as imagens do documento

Retorna um array com toos os forms do documento

Retorna um array com todos os links do documento

Retorna o url do documento

Retorna o elemento especifico dado pelo id

Quando o utilizador submite uma form

JavaScript Dom (Document Object Model)

Contm informao sobre os eventos que ocorrem

JavaScript Windows e Frames