Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting,...

Interface Web - Programação Cliente

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

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áticastr=xOperador + 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

Vectores 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);

propriedade length for (i=0;i<cidades.length;i++)

{ document.writeln(paises[i]); }

JavaScript

Principais instruções if (condition) {   statements1}[else {   statements2} ]

function checkAno () {if (document.getElementById(“ano”).value < 2005 ) {  return true; }

else {alert("Ano tem de ser menor que 2004”);      return false; }

}

JavaScript switch (expression){

   case label :      statement;      break;   ...   default : statement; }

for ([initialExpression]; [condition]; [incrementExpression]) {   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(“jal@dei.isep.ipp.pt”) 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é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 sistemanew 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.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 > 2004)

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 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 = urlpropriedade para definir novo url da página ou saber url corrente

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. 

function getNews() {     window.location= "http://www.cnn.com"; } no html: <button onclick="getNews();">News</button>  

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

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 HandlersArea onClick, onMouseOut, onMOuseOver

Button onBlur, onClick, onFocus

Checkbox onBlur, onClick, onFocus

Form onReset, onSubmit

Frame onLoad, onUnload

Link onClick, onMouseOut, onMouseOver

Select onBlur, onChange, onFocus

Submit onBlur, onClick, onFocus

Text onBlur, onChange, onFocus

Window onBlur, onError, onFocus, onLoad, onUnload

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

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 radioobj=document.getElementsByName(“Regime")

for (i=0;i<radioobj.length;i++)

if (radioobj[i].checked) str=radioobj[i].value;

Detecção do browser

getElementByID e getElementsByName

são os métodos propostos pelo DOM W3C para aceder aos elementos HTML e são implementados no IE 6 e Netscape 7

Código “antigo” nos forms

document.formname.htmlname

var ns4 = (document.layers) ? true : false;var ie4 = (document.all && !document.getElementById) ?

true : false;var w3c = (document.getElementById) ? true : false;

Expressões Regulares em JavaScript Usadas para validar a informação num Form HTML Criar uma expressão regular:

 Usando uma expressão literal:

var regexpr = /^\d{6}$/

  com a seguinte sintaxe: /padrão/   usando o construtor do objecto RegExp :

var regexpr = new RegExp("^\d{6}$") Aplicar a expressão regular

Método test do objecto RegExp regexp.test(num)

Expressões Regulares em JavaScript

Exemplofunction validate()

{

var regexp=/^\d{6}$/;

num=document.getElementById("numaluno").value;

if (regexp.test(num))

{ return true;}

else { alert("Número tem de ter 6 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]

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,}

Caracteres especiais

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(sub-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(strid)

{

var myobj=document.getElementById(strid) myobj.style.color="blue";

myobj.style.backgroundColor = "#00DD33"; myobj.innerHTML="Departamento de Engenharia

Informática";

}