Академический Документы
Профессиональный Документы
Культура Документы
O que Javascript?
Javascript e Java
Pesquisa
Diferena entre Javascript e Java
Javascript Java
evento de um elemento
Como elemento SCRIPT dentro de BODY
Como funo, dentro de HEAD
<script src="common.js">
</script>
Usando JavaScript
Janelas
confirm
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
<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
JavaScript
Tipos de dados
Tipos de dados dinmicos
var x=3.14
var str=hello world
var nome
14
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.
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*/}
Significado
||
Ou (OR)
&&
E (AND)
No (NOT)
Estruturas de Deciso
Seleo Sequencial
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
<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
var paises=["Portugal","Espanha","Frana"];
25
Propriedades e Mtodos
Date
Mtodos
Descrio
Getday()
Getmonth()
Fica com o ms
Getyear()
Setdate()
Ajusta o dia do ms
Setyear()
Ajusta o ano
Propriedades e Mtodos
String
Propriedade
length
Descrio
Nmero de caracteres
Mtodos
Indexof()
substring()
touppercase()
Eventos
Eventos do rato
Eventos
Descrio
onclick
ondblclick
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
Eventos
Teclado
Eventos
Descrio
onkeydown
onkeypress
onkeyup
Window
Eventos
Descrio
onload
onresize
Eventos
HTML elementos
Eventos
Descrio
onchange
onfocus
onreset
onselect
onsubmit
Objectos
document
propriedades
Descrio
images
forms
links
url
getelementbyid
onsubmit
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
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
JavaScript
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
41
JavaScript
url = window.location
window.location = url
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
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
JavaScript
JavaScript e Forms
Por indice
document.forms[0]
Por id/name
document.myform
JavaScript
Eventos
45
Javascript
Object
Event Handlers
47
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 [ ]
49
Regime:
<input type="radio" name="Regime" value="Diurno"
checked=checked>Diurno
<input type="radio" name="Regime" value="Noturno">Noturno
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
document.formname.htmlname
/padro/
52
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
^.+
carcter obrigatrio
.+
\.
Carcter . obrigatrio
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