Interface Web
Programação Cliente
JavaScript
JavaScript
O JavaScript é uma linguagem de scripting,
orientada a objectos e independente de
plataformas
Criada pela NetScape
Código embebido em paginas HTML
Utilizada para:
Interactividade nas páginas HTML
Validar formulários
Recentemente no AJAX
Interpretada pelos Browsers
JavaScript
Tipos de dados
Tipos de dados dinâmicos
var x=3.14
var str=”hello world”
Conversão entre tipos automática
str=x
Operador + para concatenação de strings
Tipos de dados primitivos
• números (sem distinção entre inteiros e reais)
•
•
•
•
string (cadeia de caracteres)
lógicos (true ou false)
null
undefined
JavaScript
Variáveis
definição
x=3.14
var x=3.14
variáveis definidas com var e sem valor atribuído tem
valor undefined
As variáveis são globais se definidas fora de uma função,
caso contrário são variáveis locais.
JavaScript
ARRAY
definido como um conjunto de literais
var paises=["Portugal","Espanha","França"];
definido com o construtor new do objecto Array
var cidades = new Array( "Porto",“Braga",“Viseu");
var vec1=new Array(4);
vec1[0]=5
propriedade length
for (i=0;i<cidades.length;i++)
{ document.writeln(paises[i]); }
JavaScript
Métodos do objecto Array:
Concat- agrupa dois arrays e devolve um
novo array
Join – agrupa todos os elementos de um
array numa string
pop – remove o ultimo elemento
push – acrescenta um elemento
sort – ordena os elementos do array
…
JavaScript
Array associativo
Array onde a indexação pode ser feita por uma string
concelhos["Porto"]="Aldoar, Foz, Nevogilde, Lordelo do Ouro";
concelhos["Maia"]="Águas Santas, Moreira, Milheiró, Vermoim";
concelhos["Gaia"]="Candal, São Pedro da Afurada, Arcozelo";
Cada uma das chaves pode ser considerada como
uma propriedade do objecto concelhos
concelhos.Esposende="Esposende,Fão,Fonte Boa";
document.writeln (conselhos.Porto)
JavaScript
Principais instruções
if (condition) {
statements1}
[else {
statements2
} ]
function checkAno () {
if (document.getElementById(“ano”).value < 2007 ) {
return true; }
else {alert("Ano tem de ser menor que 2007”);
return false; }
}
JavaScript
switch (expression){
case label :
statement;
break;
...
default : statement; }
for ([initialExpression]; [condition];
[incrementExpression]) {
statements
}
for...in
Iteracção de uma variável sobre as propriedades de um objecto
for (variable in object) {
statements }
while (condition) {
statements
}
JavaScript
Objectos primitivos
Sintaxe OO
objectName.propertyName
objectName.methodname(params);
Principais objectos
String
Array
Date
Math
RegExp
JavaScript
Objecto String
var strmail =new String(“[email protected]”)
length
devolve o comprimento de uma string (é uma propriedade do objecto string)
Var n=str.length
indexOf(str1,[start])
devolve a posição da primeira ocorrência de str1
var pos=strmail.indexOf(“@”)
charAt(index)
devolve o caracter da string na posição especificada por index
var ch=strmail.charAt(4);
substring(start,end)
devolve os caracteres da string entre as posições especificadas
JavaScript
Objecto String
Outros métodos
charCodeAt
toUpperCase
fromCharCode
Split
toLowercase
function leftTrim(sString)
{
while (sString.substring(0,1) == ' ')
{
sString = sString.substring(1, sString.length);
}
return sString;
}
JavaScript
Objecto Date
new
new
new
new
construtores
Date(); // devolve a data do sistema
Date( milliseconds)
Date( dateString)
Date( yr_num, mo_num, day_num[, hr_num,
min_num, sec_num])
métodos
.getHours();
.getMinutes();
.getDate();
.getMonth();
.getYear();
.getDay()
.getTime()
.setDate()
.setMonth()
.setTime()
.toString()
JavaScript
Objecto Math
O objecto Math tem métodos para trabalhar com
constantes e funções matemáticas
Math.PI
Math.sqrt(x)
Math.abs(x)
Math.round(x)
Math.cos(x)
Math.max(x,y)
Math.pow(x,y)
Math.random()
JavaScript
Funções primitivas
parseFloat(str)
converte o argumento str num float. Se não for possível a conversão
devolve “NaN" (not a number).
parseInt(str [, radix])
converte str num inteiro de acordo com o argumento radix. Se não
for possível a conversão devolve “NaN" (not a number).
isNaN(testValue)
devolve true se o argumento é um NaN
num=parseInt(document.getElementById(“ano”).value;
if (isNaN(num) || num > 2007)
alert ("erro")
JavaScript Dom (Document Object Model)
JavaScript
JavaScript DOM
window
contém a informação sobre as janelas e frames
document
navigator
contém informação sobre o documento HTML e permite
aceder aos elementos HTML dentro do documento
Contém informação sobre o browser do utilizador
event
Contém informação sobre os eventos que ocorrem na
página
JavaScript
JavaScript Windows e Frames
window.alert(text)
apresenta uma janela com o texto especificado como parâmetro
result = window.confirm(text)
apresenta uma janela de diálogo. result é um valor booleano com
valor true se foi premido o botão OK e false para o botão Cancel
window.open("URL", "name" [, "windowfeatures"])
método 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");
JavaScript
url = window.location
window.location = url
propriedade para definir novo url da página ou saber url corrente
function getNews() {
window.location= "http://www.cnn.com"; }
no html: <button onclick="getNews();">News</button>
window.parent
devolve uma referência para a janela (frame) pai da janela( frame) corrente.
window.top
devolve uma referência para a janela principal (ou frameset) numa hierarquia
de janelas
msg = window.status
window.status = msg
propriedade que permite alterar o texto na statusbar do browser.
JavaScript
windows.history
devolve uma referência para o objecto history que contém uma
lista dos URL visitados. O método 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);
Função 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 várias 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”
O objecto form contém um array elements com os
elementos que a constituem
document.myform.elements[0]
JavaScript
Aceder aos elementos de um form
getElementByID e getElementsByName
métodos especificados no DOM-W3C para aceder aos
elementos HTML e que são implementados nos browser
mais recentes ( IE 6/7, Firefox, Safari)
var nomeinput=document.getElementByID(“idnome”)
<input type="text" name=”nome” id=“idnome" </p>
JavaScript
Eventos
O JavaScript implementa um modelo de eventos
Os eventos permitem escrever código para interagir com as
acções do utilizador
Para cada evento (click) existe um eventhandler (onclick) para
responder ao evento
Ligação 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');" >
Javascript\
Object
Event Handlers
Area
Button
Checkbox
Form
Frame
Link
Select
Submit
Text
Window
onClick, onMouseOut, onMOuseOver
onBlur, onClick, onFocus
onBlur, onClick, onFocus
onReset, onSubmit
onLoad, onUnload
onClick, onMouseOut, onMouseOver
onBlur, onChange, onFocus
onBlur, onClick, onFocus
onBlur, onChange, onFocus
onBlur, onError, onFocus,
onLoad, onUnload
Event Handlers
Attribute
onabort
onblur
onchange
onclick
ondblclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
The event occurs when...
Loading of an image is interrupted
An element loses focus
The user changes the content of a field
Mouse clicks an object
Mouse double-clicks an object
An error occurs when loading a document or an image
An element gets focus
A keyboard key is pressed
A keyboard key is pressed or held down
A keyboard key is released
Event Handlers
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onresize
onselect
onsubmit
onunload
A page or an image is finished loading
A mouse button is pressed
The mouse is moved
The mouse is moved off an element
The mouse is moved over an element
A mouse button is released
The reset button is clicked
A window or frame is resized
Text is selected
The submit button is clicked
The user exits the page
Eventos
Mouse / Keyboard Attributes
Property
altKey
button
clientX
clientY
ctrlKey
metaKey
relatedTarget
screenX
screenY
shiftKey
Description
Returns whether or not the "ALT" key was pressed
when an event was triggered
Returns which mouse button was clicked when an
event was triggered
Returns the horizontal coordinate of the mouse
pointer when an event was triggered
Returns the vertical coordinate of the mouse pointer
when an event was triggered
Returns whether or not the "CTRL" key was pressed
when an event was triggered
Returns whether or not the "meta" key was pressed
when an event was triggered
Returns the element related to the element that
triggered the event
Returns the horizontal coordinate of the mouse
pointer when an event was triggered
Returns the vertical coordinate of the mouse pointer
when an event was triggered
Returns whether or not the "SHIFT" key was
pressed when an event was triggered
Demo evento
Coordenadas do rato
function writeClientCoords(event)
{
var x=event.clientX;
var y=event.clientY;
var objtextx=document.getElementById("textx");
var objtexty=document.getElementById("texty");
objtextx.value=x;
objtexty.value=y;
}
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
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 método selectedIndex devolve o índice da opção seleccionada
A propriedade text devolve o texto da opção
/* Select sem atributo multiple */
var obj=document.getElementById("cidades");
index=obj.selectedIndex;
str=cidadesobj.options[index].text
Acesso aos elementos de um Form
Select (multiple)
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].text;
//guardar num vector ou ...
j++;
}
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
radiosobj=document.getElementsByName(“Regime")
for (i=0;i<radioobj.length;i++)
if (radiosobj[i].checked)
str=radiosobj[i].value;
Detecção do Browser
Detecção do browser do cliente
Objecto navigator do JS
Propriedades
.appName – nome do browser
.appVersion – versão do browser
.platform - plataforma
var browser=navigator.appName
var b_version=navigator.appVersion
if (browser=“Microsoft Internet Explorer”)
...
browser -> “Microsoft Internet Explorer”
b_version- > 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET …
Expressões Regulares em JavaScript
Usadas para validar a informação num Form HTML
Criar uma expressão regular:
• Com uma expressão literal:
var regexpr = /^\d{6}$/
com a seguinte sintaxe: /padrão/
• Com o construtor do objecto RegExp :
var regexpr = new RegExp("^\d{6}$")
Aplicar a expressão regular
Método test do objecto RegExp
var valido=regexp.test(num)
Expressões Regulares em JavaScript
Exemplo
function validate()
{
var regexp=/^\d{7}$/;
num=document.getElementById("numaluno").value;
if (regexp.test(num))
{ return true;}
else { alert("Número tem de ter 7 dígitos");
return false;
}
}
Caracteres especiais
Pattern
Symbol
Alternative
a digit (positive integer)
\d
[0123456789]
or [0-9]
a non-digit
\D
[^0-9]
a word character
\w
[a-zA-Z0-9_]
a non-word character
\W
[^\w]
a whitespace character
\s
[ \t\n\r\f]
a non-whitespace character
\S
[^\s]
any single character except newline
.
[^\n]
match one or more occurrences of x
x+
{1,}
Matches the preceding pattern x 0 or 1 times
x?
zero or more occurrences of the preceding pattern x
x*
{0,}
Matches at least n and at most m occurrences of the
preceding pattern x
{n,m}
Matches exactly n occurrences of the preceding pattern x
x{n}
Matches at least n occurrences of the preceding pattern x
x{n,}
Anchors your search at the beginning of the line
^pattern
Anchors at the end of the line
pattern$
exactly one character out of the set
[characters]
matches any single character, except
[^characters]
a range, i.e. all the characters from char1 to char2
inclusive
[char1-char2]
group or form subpattern & remember
(subsub-pattern)
or
|
escape special characters
\
Expressões Regulares em JavaScript
/^\D+$/ - só caracteres e pelo menos um
/^.+@.+\..{2,3}$/ - validação simples de
um email
^.+
no inicio um ou mais caracteres
@
carácter obrigatório
.+
. Seguido de um ou mais caracteres
\.
Carácter . obrigatório
.{2,3}$ no fim ocorrência de pelo menos 2
caracteres e no máximo 3
JavaScript e CSS
Alteração 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";
JavaScript e CSS
Alteração do conteúdo de um elemento HTML
.innerHTML
function change_div_over(iddiv)
{
var myobj=document.getElementById(iddiv)
myobj.style.color="blue";
myobj.style.backgroundColor = "#00DD33";
myobj.innerHTML="Departamento de Engenharia
Informática";
}
O futuro
Web Hypertext Application Technology Working Group
http://www.whatwg.org/
HTML 5.0
Web Forms 2.0
http://www.whatwg.org/specs/web-apps/current-work/
http://www.whatwg.org/specs/web-forms/current-work/#extend-formcontrols
Novos controlos nos formulários
Validações e restrições declarativas nos controlos - min,
max , ...
Gráficos vectoriais (canvas) – linhas, arcos, rectângulos, ..
Links avançados e divertidos
http://simonbaird.com/coolclock/
http://rainbow.arch.scriptmania.com/scripts/mouse_cl
ock4.html
http://www.geekpedia.com/Samples/RTB/Editor.html
http://dhtml-menu.com/dhtml-samples/menu375.html
http://henrikfalck.com/sudoku/