JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela NetScape Código embebido em paginas.

Apresentação em tema: "JavaScript O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas Criada pela NetScape Código embebido em paginas."— Transcrição da apresentação:

0 Interface Web - Programação Cliente

1 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

2 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

3 JavaScript Variáveis x=3.14 definição
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.

4 JavaScript Vectores 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); propriedade length  for (i=0;i<cidades.length;i++) { document.writeln(paises[i]); }

5 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; } }

6 JavaScript switch (expression){    case label :       statement;       break;    ...    default : statement; } for ([initialExpression]; [condition]; [incrementExpression]) {    statements }  while (condition) {    statements }

7 JavaScript Objectos primitivos Sintaxe OO Principais objectos
objectName.propertyName objectName.methodname(params); Principais objectos String Array Date Math RegExp

8 JavaScript Objecto String length indexOf(str1,[start]) charAt(index)
var strmail =new 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 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

9 JavaScript Objecto String Outros métodos charCodeAt Split
toUpperCase toLowercase fromCharCode function leftTrim(sString) { while (sString.substring(0,1) == ' ') { sString = sString.substring(1, sString.length); } return sString; }

10 JavaScript Objecto Date new Date(); // devolve a data do sistema
 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()

11 JavaScript Math.PI Objecto Math Math.sqrt(x) Math.abs(x) Math.round(x)
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()

12 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")

13 JavaScript Dom (Document Object Model)
ADES 04/05

14 JavaScript JavaScript DOM window document navigator event
contém a informação sobre as janelas e frames document contém informação sobre o documento HTML e permite aceder aos elementos HTML dentro do documento navigator Contém informação sobre o browser do utilizador event Contém informação sobre os eventos que ocorrem na página

15 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");

16 JavaScript url = window.location window.location = url window.parent
propriedade 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= " } no html: <button onclick="getNews();">News</button>  

17 JavaScript h = window.history; windows.history windows.setTimeOut
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

18 JavaScript document.myform JavaScript e Forms Por indice Por id/name
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]

19 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(' >

20 Javascript Object Event Handlers Area 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

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

22 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

23 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++; }

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

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

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

27 Expressões Regulares em JavaScript
Exemplo function 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; }

28 . Caracteres especiais a digit (positive integer) a non-digit
Pattern Symbol Alternative a digit (positive integer) \d [ ] 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,}

29 Matches exactly n occurrences of the preceding pattern x
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 \

30 Expressões Regulares em JavaScript
/^\D+$/ - só caracteres e pelo menos um - validação simples de um ^.+ 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

31 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";

32 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"; }