interface web programação cliente javascriptlosa/arqsi/adesjavascriptv4.pdf · matches at least...
TRANSCRIPT
Interface Web Programação Cliente
JavaScriptProgramaçã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âmicosvar x=3.14
var str=”hello world”
� Conversão entre tipos automática� Conversão entre tipos automáticastr=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 undefinedvalor 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 literaisvar paises=["Portugal","Espanha","França"];
� definido com o construtor new do objecto Arrayvar cidades = new Array( "Porto",“Braga",“Viseu");
var vec1=new Array(4);var vec1=new Array(4);
vec1[0]=5
� propriedade lengthfor (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 stringpop – remove o ultimo elemento� 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 {
statements2statements2
} ]
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]) {[incrementExpression]) {
statements
}
� for...in
Iteracção de uma variável sobre as propriedades de um objectofor (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 Stringvar 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 str1devolve a posição da primeira ocorrência de str1var pos=strmail.indexOf(“@”)
� charAt(index)
devolve o caracter da string na posição especificada por indexvar ch=strmail.charAt(4);
� substring(start,end)
devolve os caracteres da string entre as posições especificadas
JavaScript
� Objecto String
� Outros métodoscharCodeAt Split
toUpperCase toLowercase
fromCharCode
function leftTrim(sString)
{
while (sString.substring(0,1) == ' ')
{
sString = sString.substring(1, sString.length);
}
return sString;
}
JavaScript
� Objecto Date� construtores
new Date(); // devolve a data do sistema
new Date( milliseconds)
new Date( dateString)
new Date( yr_num, mo_num, day_num[, hr_num,
min_num, sec_num])
� métodos.getHours(); .getTime()
.getMinutes(); .setDate()
.getDate(); .setMonth()
.getMonth(); .setTime()
.getYear(); .toString()
.getDay()
JavaScript
� Objecto MathO objecto Math tem métodos para trabalhar com
constantes e funções matemáticas
Math.PI
Math.sqrt(x)
Math.abs(x)Math.abs(x)
Math.round(x)
Math.cos(x)
Math.max(x,y)
Math.pow(x,y)
Math.random()
JavaScript
� Funções primitivasparseFloat(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ãoconverte str num inteiro de acordo com o argumento radix. Se nãofor 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
� documentcontém informação sobre o documento HTML e permite aceder aos elementos HTML dentro do documento
� navigatorContém informação sobre o browser do utilizador
� eventConté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 comvalor true se foi premido o botão OK e false para o botão Cancel
� window.open("URL", "name" [, "windowfeatures"])� 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
� window.parent
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 hierarquiade 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 umalista dos URL visitados. O método go, back e forward deste objectopermite redireccionar o browser.
h = window.history;
if ( h.length )
{ // if there is a history
h.back();
// equivalent to clicking back button// 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/namedocument.myform
//no html <form id=“myform” name=“myform”
� O objecto form contém um array elements com os elementos que a constituemdocument.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)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:� 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 onClick, onMouseOut, onMOuseOver
Button onBlur, onClick, onFocus
Checkbox onBlur, onClick, onFocus
Form onReset, onSubmit
Frame onLoad, onUnloadFrame onLoad, onUnload
Link onClick, onMouseOut, onMouseOver
Select onBlur, onChange, onFocus
Submit onBlur, onClick, onFocus
Text onBlur, onChange, onFocus
Window onBlur, onError, onFocus, onLoad, onUnload
Event Handlers
Attribute The event occurs when...
onabort Loading of an image is interrupted
onblur An element loses focus
onchange The user changes the content of a field
onclick Mouse clicks an object onclick Mouse clicks an object
ondblclick Mouse double-clicks an object
onerror An error occurs when loading a document or an image
onfocus An element gets focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed or held down
onkeyup A keyboard key is released
Event Handlers
onload A page or an image is finished loading
onmousedown A mouse button is pressed
onmousemove The mouse is moved
onmouseout The mouse is moved off an element
onmouseover The mouse is moved over an element
onmouseup A mouse button is released
onreset The reset button is clicked
onresize A window or frame is resized
onselect Text is selected
onsubmit The submit button is clicked
onunload The user exits the page
Eventos
Mouse / Keyboard Attributes
Property Description
altKey Returns whether or not the "ALT" key was pressed
when an event was triggered
button Returns which mouse button was clicked when an
event was triggered
clientX Returns the horizontal coordinate of the mouse
pointer when an event was triggered
clientY Returns the vertical coordinate of the mouse pointer clientY Returns the vertical coordinate of the mouse pointer
when an event was triggered
ctrlKey Returns whether or not the "CTRL" key was pressed
when an event was triggered
metaKey Returns whether or not the "meta" key was pressed
when an event was triggered
relatedTarget Returns the element related to the element that
triggered the event
screenX Returns the horizontal coordinate of the mouse
pointer when an event was triggered
screenY Returns the vertical coordinate of the mouse pointer
when an event was triggered
shiftKey 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 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 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 / CheckboxesRegime:
<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 � 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
browser -> “Microsoft Internet Explorer”b_version- > 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET …
var browser=navigator.appName
var b_version=navigator.appVersion
if (browser=“Microsoft Internet Explorer”)
...
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
� Exemplofunction validate()
{
var regexp=/^\d{7}$/;
num=document.getElementById("numaluno").value;
if (regexp.test(num))if (regexp.test(num))
{ return true;}
else { alert("Número tem de ter 7 dígitos");
return false;
}
}
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]
Caracteres especiais
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 xxxx+ {1,}
Matches the preceding pattern x 0 or 1 times xxxx?
zero or more occurrences of the preceding pattern x xxxx* {0,}
Matches at least nnnn and at most mmmm occurrences of the
preceding pattern x{nnnn,mmmm}
Matches exactly nnnn occurrences of the preceding pattern x xxxx{nnnn}
Matches at least nnnn occurrences of the preceding pattern x xxxx{nnnn,}
Anchors your search at the beginning of the line ^patternpatternpatternpattern
Anchors at the end of the line patternpatternpatternpattern$
exactly one character out of the set [characterscharacterscharacterscharacters]exactly one character out of the set [characterscharacterscharacterscharacters]
matches any single character, except [^characterscharacterscharacterscharacters]
a range, i.e. all the characters from char1 to char2
inclusive[char1char1char1char1-char2char2char2char2]
group or form subpattern & remember (subsubsubsub----patternpatternpatternpattern)
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")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) 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� http://www.whatwg.org/specs/web-apps/current-work/
� Web Forms 2.0Web Forms 2.0� http://www.whatwg.org/specs/web-forms/current-work/#extend-form-
controls
� 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://dhtml-menu.com/dhtml-samples/menu375.html� http://henrikfalck.com/sudoku/