Programação para Internet I. 8. JavaScript. Nuno Miguel Gil Fonseca

Transcrição

1 Programação para Internet I 8. JavaScript Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt

2 Trata-se de uma linguagem de programação bastante completa! No entanto, é geralmente conhecida como linguagem de scripting. Apresenta características comuns à maior parte das linguagens de programação vulgares : Variáveis, funções, controlo de fluxo, ciclos, operadores Apresenta ainda algumas capacidades orientadação a objectos As funções escritas em JavaScript são usadas no âmbito de uma página web e geralmente chamadas em resposta a eventos (click, mouseover, etc.) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 2

3 Existem algumas incompatibilidades entre as versões JavaScript (da Netscape) e JScript (da Microsoft) O que deve ser feito para ultrapassar estas incompatibilidades Usar apenas um subconjunto da linguagem que se saiba suportado por todos os browsers Escrever diferentes versões do código para funcionar correctamente em cada um dos browsers Uma combinação das duas técnicas anteriores É executado do lado do cliente O utilizador pode desactivar o uso de JavaScript no seu browser. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 3

4 Como inserir um script no código? Embutido directamente nas tags (X)HTML <input type="text" name="morada" onblur="alert('olá!')"> Embutido no código (X)HTML através da tag <script></script>... <head> <script language="javascript" type="text/javascript"> function hello(){ alert("hello World!"); } </script> </head> <body onload="hello()">... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 4

5 Como inserir um script no código? Incluído num ficheiro externo... <head> <script type="text/javascript" src="omeuficheiro.js"></script> </head> <body onload="hello()">... // conteudo do ficheiro omeuficheiro.js function hello(){ alert("hello World!"); return; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 5

6 Variáveis e tipos de dados É uma linguagem de tipo livre (typeless) Não é necessário especificar os tipos de dados das variáveis aquando da sua declaração As variáveis são acedidas através do seu nome var numero = 2; var nome = "Zé"; alert(nome); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 6

7 Variáveis e tipos de dados(continuação...) Âmbito das variáveis Global Pode ser acedida de qualquer parte do código JavaScript var number = 2; function increasethenumber(){ number++; } increasethenumber(); alert(number); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 7

8 Variáveis e tipos de dados (continuação...) Âmbito das variáveis (continuação...) Local Só pode ser acedida dentro da função/ciclo/instrução condicional em que foi criada function returnthenumber(){ var number = 1; return number; } alert(returnthenumber()); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 8

9 Variáveis e tipos de dados (continuação...) Tipos Números inteiros e vírgula flutuante, positivos e negativos Booleanos true ou false Strings "Isto é um exemplo de uma String" Objectos omeuobjecto = new Object(); Arrays var clubes = new Array("SCP","FCP"); clubes[0] = "Sporting"; alert(clubes[0]); var clubes = ["Sporting", 1]; clubes[0] = "Sporting"; alert(clubes[0]); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 9

10 Variáveis e tipos de dados (continuação...) Arrays (cont.) Arrays Associativos var clubes = new Array(); clubes["maior"] = "Sporting"; alert(clubes["maior"]); var arr = { "a":1, "b": 300}; alert(arr["a"]); Em javascript é possível ter valores de diferentes tipos no mesmo array var c = new Array("SCP","FCP", 1, true); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 10

11 Operadores Aritméticos Básicos +,-,*,/ Resto da divisão inteira % Incrementos/decrementos unitários ++, -- Comparações ==,!=, <, <=, >, >= Booleanos &&,,! String (concatenação) + (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11

12 Operadores (continuação...) Atribuições =, +=, -=, *=, /=, &=, = Condicional (condição)? valorcasoverdadeiro: valorcasofalso resultado = (vencedor == "sporting")? "justo": "injusto"; typeof Devolve o tipo de dados do operando if (typeof resultado == "number") {... } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 12

13 Estruturas de controlo Condicionais if if(condição1) {... } else if (condição 2) {... } else{... } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 13

14 Estruturas de controlo Condicionais switch switch(var){ case "a": // faz coisas se A break; case "b": // faz coisas se B break; default: // faz coisas se nem A nem B } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 14

15 Estruturas de controlo (continuação...) Ciclos for normal O código é executado um determinado número de vezes até se verificar uma determinada condição de paragem for (i = 0; i <= 5; i++) { document.write("o número é:" + i + "<br>"); } for in O código é executado pelo menos uma vez. Posteriormente é executado enquanto a condição se verificar. for (chave in array){ alert(array[chave]); } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 15

16 Estruturas de controlo (continuação...) Ciclos do...while O código é executado pelo menos uma vez. Posteriormente é executado enquanto a condição se verificar. do { código a executar; } while(condição verdadeira); while O código é executado enquanto a condição se verificar. Poderá não ser executado nenhuma vez. while(condição verdadeira){ código a executar; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 16

17 Funções Permitem agrupar um conjunto de expressões sob um determinado nome Definição das funções function nomefunção (argumento1, argumento2,...) { //Código específico } return [valor]; Chamadas das funções variavel = nomefunção (arg1, arg2,...); nomefunção2(); nomefunção2(nomefunção3()); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 17

18 Caixas de diálogo alert alert('bom dia!'); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 18

19 Caixas de diálogo confirm confirm('tem a certeza que deseja sair?'); <a href="delete.page?id=1" onclick="return confirm('tem a certeza que deseja sair?')">apagar</a> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 19

20 Caixas de diálogo prompt var nome = prompt('por favor introduza o seu nome'); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 20

21 DOM (Document Object Model) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 21

22 DOM (Document Object Model) Define uma hierarquia de objectos da linguagem JavaScript A maior parte deste objectos estão relacionados com as características de uma página web ou de um determinado browser Para referenciar um objecto é necessário percorrer a hierarquia (window pode ser omitido) Em alternativa document.formulario. ; document.getelementbyid(" "); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 22

23 Formulários (DOM: Form) HTML <form id="formulario"> <input type="text" name=" " id=" ">... </form> Aceder aos valores em JavaScript var variavel = document.formulario. .value; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 23

24 Formulários (DOM: Form) Para validar formulários aquando da submissão do formulário <form name="formulario" onsubmit="return valida()"> </form>... //Ficheiro javascript function valida(){ //Se correr tudo bem return true; } //Se existirem erros return false; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 24

25 O histórico (DOM:History) Através de JavaScript é possivel manipular o histórico do browser Métodos disponíveis back() forward() go() history.back(); history.forward(); history.go(-2); history.go(2); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 25

26 Alterar em run-time a página que está carregada (DOM:Location) Através de JavaScript é possivel alterar a página que se está a visualizar location.href = " <img src="abc.png" onclick="location.href = ' /> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 26

27 Strings var aminhastring = "exemplo de uma string"; String.length devolve o tamanho da string "Hello World".length; String.charAt(x) devolve o caracter número x, começando em zero 11 "Hello World".charAt(6); "W" String.substr(a, b) devolve a sub-string entre a e b "Hello World".substr(0,4); "Hello" String.indexOf(string2, a) - devolve a posição em que surge pela primeira vez a string2 na String começando na posição a "Hello World".indexOf("o",0); 4 (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 27

28 Strings (continuação...) String.lastIndexOf(string2, a) devolve a posição em que surge pela última vez vez a string2 na String começando na posição a "Hello World".lastIndexOf("o"); 7 String.split(delimiter) devolve um array resultante da separação da String pelo delimitador "Hello,World".split(","); {"Hello", "World"} String.toLowerCase(), String.toUpperCase() Converte a String toda para minúsculas, minúsculas "Hello World".toLowerCase(); "hello world" "Hello World".toUpperCase(); "HELLO WORLD" (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 28

29 Strings (continuação...) Para além da comparação de igualdade (==) ou diferença (!=) é também possível fazer outras comparações (de acordo com a tabela ASCII) "a" > "b" false "abc".charat(1) > "a"; true (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 29

30 Adicionar dinamicamente conteúdo a um elemento HTML document.getelementbyid("nomedoelemento").innerhtml = "falta preencher o nome"; <input type="text" id="nome" name="nome" /> <span id="nomedoelemento"></span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 30

31 Datas var umadata = new Date(); var hora = umadata.gethours(); Métodos disponíveis getdate() getmonth() getfullyear() gethours() getminutes() getseconds() (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 31

32 Abertura (e fecho) de janelas (pop-ups e não só) window.open("url", "nome" [, "propriedades"]) Propriedades toolbar, location, directories, status, menubar, scrollbars, resizable, copyhistory, width, height, top, left window.open("xpto.html", "xpto", "width=100,height=100"); window.close(); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 32

33 Alterar propriedades da folha de estilos document.{elemento}.style.propriedade Propriedades backgroundcolor, color, fontfamily, fontstyle, fontvariant, fontweight, cursor, function changecursor(element){ window.document.getelementbyid(element).style.cursor = hand; } function changecursor2(element){ element.style.cursor = hand; } <td id="nome" onmouseover="changecursor( nome )">...</td> <td onmouseover="changecursor2(this)">...</td> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 33

34 Eventos onabort Quando o carregamento de uma imagem é parado; onblur Quando um elemento perde o foco (focus); onclick Quando se clica num elemento; onchange Quando o valor de um formulário de texto é alterado; ondblclick Quando é feito um duplo clique sobre um elemento; onerror Quando ocorre um erro ao carregar a página; onfocus - Quando um elemento ganha o foco (focus); onkeydown Quando uma tecla é pressionado, independentemente de ser ou não largado; onkeypress Quando uma tecla é pressionado; onkeyup Quando uma tecla é largado; onload Quando o carregamento de uma página termina; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 34

35 Eventos onmousedown Quando uma tecla do rato é pressionada; onmousemove Quando o rato mexe; onmouseout Quando o rato sai de cima de um elemento; onmouseover Quando o rato passa por cima de um elemento; onmouseup Quando é libertada a tecla do rato; onreset Quando é pressionado o botão de reset de um form; onresize Quando é alterado o tamanho de uma janela; onselect Quando é selecionado texto de uma caixa de texto; onsubmit Quando é pressionado o botão submit de um formulário; onunload Quando o utilizador abandona a página window.document.getelementbyid(element).focus() permite dar foco a um determinado elemento (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 35

36 Tratamento de excepções try{ // executa qualquer coisa } catch(ex){ alert("error:" + ex.message); } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 36

37 (Des)activação de campos de formulário Por vezes podemos necessitar de desactivar um determinado campo de formulário para evitar que seja clicado um botão, ou para evitar que seja preenchida uma caixa de texto. Desactivar document.getelementbyid("nomedocampo").disabled = true; Voltar a activar document.getelementbyid("nomedocampo").disabled = false; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 37

38 Expressões regulares Permitem verificar se uma determinada string obedece a um determinado padrão Como definir uma expressão regular Como verificar se a string obedece a um padrão Devolve true se obedecer, false caso contrário Mais informações var r = /a/; if(r.test("esta string tem um a"))... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 38

39 Exemplo Para validar endereços de Número de telemóvel ^($)?( )($ -)?([0-9]{3})([0-9]{4})$ Na internet poderá encontrar expressões regulares para validar praticamente tudo o que possa imaginar! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 39

40 Adicionar opções a uma select box dinamicamente <script> function loadoptions(){ var contador = 0; document.getelementbyid("seleccao").options[contador] = new Option('Opcao 1','1'); contador++; document.getelementbyid("seleccao").options[contador] = new Option('Opcao 2','2'); } </script> <body onload="loadoptions()"> <form> <select id="seleccao"></select> </form> </body> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 40

41 Manipulação de ficheiros XML (cont.) Função preenche um array (elements) com o conteúdo do ficheiro XML var xmldoc, elements; function loadxml(xmlfile){ if (document.implementation && document.implementation.createdocument){ //Firefox, Opera xmldoc = document.implementation.createdocument("", "", null); xmldoc.onload = function () {elements = xmldoc.documentelement.childnodes;}; } else if (window.activexobject){ // IE xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.onreadystatechange = function () { if (xmldoc.readystate == 4){elements = xmldoc.documentelement.childnodes;}}; } else { alert('your browser can\'t load the XML file: ' + e.tostring()); return; } xmldoc.load(xmlfile); } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 41

42 Manipulação de ficheiros XML (cont.) Para chamar a função anterior loadxml("./documento.xml"); Para aceder ao elemento raíz do documento var raiz = xmldoc.documentelement; Para saber o tipo de um elemento var nome = xmldoc.documentelement.tagname; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 42

43 Manipulação de ficheiros XML (cont.) Para obter todos os elementos filhos de um documento var filhos = xmldoc.documentelement.childnodes; Para obter o valor de um elemento var valor = filhos[0].childnodes[0].nodevalue; Para obter o valor de uma propriedade de um elemento var valor1 = filhos[0].attributes.getnameditem("nome").nodevalue; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 43

44 API de mapas do sapo (mapas.sapo.pt) Antes de mais, é necessário incluir o link para a API <script type="text/javascript" src=" Para criar um mapa na nossa página... <body onload="init();"> <div id="map" style="width:400px; height:400px;" ></div>... </body> var mapa; function init(){ mapa = new SAPO.Maps.Map("map"); mapa.addcontrol(new SAPO.Maps.Control.Navigation()); mapa.setmapcenter(new OpenLayers.LonLat(-9, 38, 12)); mapa.zoomto(12); } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 44

45 API de mapas do sapo (mapas.sapo.pt) Para adicionar marcadores, há que criar um layer var layermarkers = new SAPO.Maps.Markers("marcadores"); mapa.addmarkers(layermarkers); Adicionar marcador Imagem por defeito var marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(-9, 38), {draggable: true}); layermarkers.addoverlay(marker); Imagem personalizada var marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(-9, 38), {draggable: false}, {markerimage: "./imagem.png", markeranchor: new OpenLayers.Pixel(-16, -32), size: new OpenLayers.Size(32, 32)}); layermarkers.addmarker(marker); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 45

46 API de mapas do sapo (mapas.sapo.pt) Registar evento de click sobre o marcador marker.registerevent('click', {marker:this,texto:"bla bla bla"}, function(marker){openpopup(marker,this.texto);}); Para abrir o popup function openpopup(marker, txt){ marker.openpopup("<h3>"+txt+"</h3>"); } Para remover todos os marcadores function remove_markers(){ if(!layermarkers) { return false; } layermarkers.removemarkers(); return true; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 46

47 API de mapas do sapo (mapas.sapo.pt) Adicionar linhas ao mapa var polyline = new SAPO.Maps.Polyline([new OpenLayers.LonLat(-9, 38), new OpenLayers.LonLat(-8, 38), new OpenLayers.LonLat(-9, 39), new OpenLayers.LonLat(-9, 37) ]); map.addoverlay(polyline); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 47

48 API de mapas do sapo (mapas.sapo.pt) Para informações adicionais (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 48

49 Trabalhar com tempo Em javascript podemos utilizar métodos que nos permitem fazer algo de x em i segundos; Para inicializar o contador var t = settimeout("document.write('já passaram 3 segundos!')",3000) O código a vermelho indica o que será realizado de x em x segundos. Pode escrever-se o código directamente, ou pode escrever-se o nome de uma função que será chamada de x em x segundos var t = settimeout("tempopassado()",3000); Para parar o contador cleartimeout(t); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 49

50 Cookies As cookies são uma forma simples de permitir guardar informação persistentemente no nosso computador durante um determinado período de tempo. Criar e guardar cookies function setcookie(c_name,value,expiredays){ var exdate=new Date(); exdate.setdate(exdate.getdate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null)? "" : ";expires="+exdate.toutcstring()); } setcookie('nome','nuno',1); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 50

51 Cookies Devolver o valor de uma cookie previamente colocada function getcookie(c_name){ if (document.cookie.length>0){ c_start=document.cookie.indexof(c_name + "="); if (c_start!=-1){ c_start=c_start + c_name.length+1 ; c_end=document.cookie.indexof(";",c_start); if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } getcookie('nome'); Neste caso devolve "" caso a cookie não exista (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 51

52 Cookies Remover uma cookie previamente colocada function deletecookie(name) { if (getcookie(name)!=null && getcookie(name)!="" ) document.cookie = name + "=" +";expires=thu, 01-Jan :00:01 GMT"; } deletecookie('nome'); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 52

53 Para mais informações (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 53