interface web - programação cliente. javascript o javascript é uma linguagem de scripting,...
TRANSCRIPT
![Page 1: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/1.jpg)
Interface Web - Programação Cliente
![Page 2: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/2.jpg)
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
![Page 3: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/3.jpg)
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
![Page 4: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/4.jpg)
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.
![Page 5: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/5.jpg)
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]); }
![Page 6: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/6.jpg)
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; }
}
![Page 7: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/7.jpg)
JavaScript switch (expression){
case label : statement; break; ... default : statement; }
for ([initialExpression]; [condition]; [incrementExpression]) { statements}
while (condition) { statements}
![Page 8: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/8.jpg)
JavaScript Objectos primitivos
Sintaxe OOobjectName.propertyName objectName.methodname(params);
Principais objectos String Array Date Math RegExp
![Page 9: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/9.jpg)
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
![Page 10: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/10.jpg)
JavaScript Objecto String
Outros métodoscharCodeAtfromCharCodetoLowercasetoUpperCasesplit
![Page 11: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/11.jpg)
JavaScript Objecto Date
construtoresnew 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()
![Page 12: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/12.jpg)
JavaScript Objecto Math
O objecto Math tem métodos para trabalhar com constantes e funções matemáticas
Math.PIMath.sqrt(x)Math.abs(x)Math.round(x)Math.cos(x)Math.max(x,y)Math.pow(x,y)Math.random()
![Page 13: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/13.jpg)
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")
![Page 14: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/14.jpg)
JavaScript JavaScript Dom (Document Object Model)
![Page 15: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/15.jpg)
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
![Page 16: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/16.jpg)
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");
![Page 17: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/17.jpg)
JavaScript url = window.location
window.location = urlpropriedade para definir novo url da página ou saber url corrente
window.parentdevolve uma referência para a janela (frame) pai da janela( frame) corrente.
window.topdevolve uma referência para a janela principal (ou frameset) numa hierarquia de janelas
msg = window.statuswindow.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>
![Page 18: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/18.jpg)
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.setTimeOutwindow.setTimeout("tick();", 100);
![Page 19: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/19.jpg)
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]
![Page 20: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/20.jpg)
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');" >
![Page 21: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/21.jpg)
JavascriptObject Event HandlersArea onClick, onMouseOut, onMOuseOverButton onBlur, onClick, onFocusCheckbox onBlur, onClick, onFocusForm onReset, onSubmitFrame onLoad, onUnloadLink onClick, onMouseOut, onMouseOverSelect onBlur, onChange, onFocusSubmit onBlur, onClick, onFocusText onBlur, onChange, onFocusWindow onBlur, onError, onFocus, onLoad,
onUnload
![Page 22: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/22.jpg)
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.
![Page 23: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/23.jpg)
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
![Page 24: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/24.jpg)
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++;
}
![Page 25: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/25.jpg)
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;
![Page 26: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/26.jpg)
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;
![Page 27: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/27.jpg)
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
![Page 28: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/28.jpg)
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;}
}
![Page 29: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/29.jpg)
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
![Page 30: Interface Web - Programação Cliente. JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela](https://reader034.vdocuments.com.br/reader034/viewer/2022042721/5706384d1a28abb8238f6cbb/html5/thumbnails/30.jpg)
JavaScript e CSS Alteração de estilos de um elemento usando
o objecto style Sintaxe:
objectelement.style.propriedade=valorvar objdiv=document.getElementById("p1")objdiv.style.color=“black"objdiv.style.backGroundColor=“red”