Interface Web Programação Cliente JavaScriptlosa/ARQSI/ADESjavascriptv4.pdf · Matches at least...

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


ctrlKey Returns whether or not the "CTRL" key was pressed


metaKey Returns whether or not the "meta" key was pressed


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


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.


� 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


� 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++;

}


� 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)


� 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 \


� /^\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/

Interface Web Programação Cliente JavaScriptlosa/ARQSI/ADESjavascriptv4.pdf · Matches at least...

Documents

Transcript of Interface Web Programação Cliente JavaScriptlosa/ARQSI/ADESjavascriptv4.pdf · Matches at least...