Sintaxe para declaração de funções: function f1() { return "Olá"; function f2(nome) { return "Bom dia " + nome; Funções em JavaScript As funções podem retornar ou não valores e podem receber ou não argumentos. As funções em JavaScript são variáveis em que o nome da função é o nome da variável e o corpo da função é o valor da variável. As 2 funções acima poderiam ser criadas com a seguinte sintaxe, semelhante à sintaxe usada para as variáveis: var f1 = function() { return "Olá"; var f2 = function(nome) { return "Bom dia " + nome; Uma função, do mesmo modo que uma variável, é constituída por 2 partes: um identificador (nome da função) e um valor (corpo da função). Diferença entre referenciar uma função e invocar uma função Sempre que se usa o nome de uma função sem parêntesis estamos a referenciar a função, se usamos o nome da função seguido de parêntesis, incluindo argumentos se necessário, estamos a invocar a execução da função. A instrução alert( f1 ) produz: A instrução alert( f1() ) produz:
Atribuição do valor de uma Função O nome de uma função é uma variável cujo valor é uma referência para o corpo da função. No exemplo, o valor da variável f1 é uma referência para uma função. As funções podem ser manipuladas como variáveis. A instrução var x = f1; atribui à variável x o valor de f1, passando a função x() a ter o mesmo corpo que a função f1(). As instruções var x = f1; var y = x(); alert(x); alert(y); produzem saídas iguais às anteriormente mostradas. As instruções var z = f2; var w = z("rui"); alert(z); alert(w); produzem as seguintes saídas: Tratamento de Eventos em Aplicações Web O tratamento de eventos em páginas Web é muitas vezes feito através de funções JavaScript. Estas funções aparecem ligadas aos eventos através de atributos HTML. Exemplo: <body onload= init(); > O evento onload é desencadeado quando a página acaba de ser carregada. Estas funções designam-se por funções callback, porque são invocadas por eventos que ocorrem fora do nosso código. Não são invocadas directamente pelo nosso código. Temos de criar essas funções, ligá-las a um dado trigger, normalmente um evento. Quando o evento ocorre, o browser é responsável por invocar essa função.
Separação entre conteúdo e funcionalidade numa página Web Numa página Web, a separação entre o conteúdo (código HTML) e a funcionalidade (código JavaScript) torna a página mais fácil de construir e de manter. Em vez de usar atributos HTML para ligar funções callback a eventos podemos usar referências para funções directamente no código JavaScript. Exemplo: window.onload = init; O evento onload é uma propriedade do objecto window. Uma referência para a função init() é atribuída à propriedade onload. Não se devem colocar parêntesis a seguir ao nome da função porque não queremos invocar a execução da função. O evento onload é desencadeado quando a página acaba de ser carregada. Nessa altura a função init() é automaticamente chamada. Se necessitarmos de passar argumentos para a função callback, não podemos usar este processo de atribuir referências para funções a propriedades evento de objectos, porque deste modo não é possível passar argumentos. Quando necessitamos de passar argumentos temos de usar funções de tratamento de eventos anónimas. Exemplo: Consideremos que pretendíamos invocar a função f() com o argumento arg1 f(arg1) quando o utilizador clica no elemento id1. Com o código seguinte não seria possível passar o argumento: document.getelementbyid( id1 ).onclick = f; Temos que usar uma função anónima em cujo corpo invocamos f(arg1) : document.getelementbyid( id1 ).onclick = function(evt) { f(arg1); ; À propriedade evento onclick do elemento id1 é atribuída uma função anónima cujo corpo é declarado dentro das chavetas. Um objecto evento (variável evt) é automaticamente passado pelo browser à função que trata o evento (event handler), contendo informação específica para cada tipo evento. O código da função que trata o evento pode usar este objecto ou ignorá-lo, como é o caso do exemplo apresentado. Todas as funções callback de tratamento de eventos podem ser ligadas a propriedades evento de elementos html no corpo da função de tratamento do evento onload. window.onload = function() { init(); document.getelementbyid( id1 ).onclick = function(evt) { f(arg1); ;...
Exemplo: Ficheiro exemplo.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>exemplo</title> <script type="text/javascript" src="exemplo.js"> </script> <link rel="stylesheet" type="text/css" href="exemplo.css" /> </head> <body> <div id="contentor"> <div id="cabecalho">arquitectura de Sistemas</div> <div id="menu"> <ul> <li><a href="#" id="item1">xhtml</a></li> <li><a href="#" id="item2">javascript</a></li> </ul> </div> <div id="conteudo">as aulas Laboratoriais <br /> terão início em <br /> 6 de Outubro de 2009 </div> <div id="rodape">departamento de Engª Informática do ISEP</div> </div> </body> </html> Ficheiro exemplo.css: #contentor { border:solid 1px red; font-family:courier New; #cabecalho { height:10%; background-color:orange; font-size:200%; font-weight:bolder; padding:1em; text-align:center; #menu { width:30%; font-size:200%; font-weight:bolder; line-height:200%; padding:1%; text-align:left; #conteudo { border-left:solid 2px gray; font-family:arial; font-size:200%; line-height:150%; margin-left:30%; padding:5%; text-align:center;
Ficheiro exemplo.css (continuação): #rodape { height:5%; background-color:aqua; clear:left; font-size:50%; padding:1%; text-align:left; Pretende-se a seguinte funcionalidade: quando o rato passa sobre o item XHTML ou JavaScript, o conteúdo passa a Extended HTML ou Linguagem de Script, respectivamente, regressando aos valores iniciais quando o rato abandona os elementos. Ficheiro exemplo.js: function initmouseovers(){ var obj1=document.getelementbyid('item1'); //passando o rato no item1 escreve Extended HTML obj1.onmouseover = function() { altera(obj1, 'Extended HTML') ; //saindo o rato do item1 escreve novamente HTML obj1.onmouseout = function() { altera(obj1, 'HTML') ; var obj2=document.getelementbyid('item2'); //passando o rato no item2 escreve Linguagem de Script obj2.onmouseover=function() { altera(obj2, 'Linguagem de Script'); //saindo o rato do item2 escreve novamente JavaScript obj2.onmouseout = function() { altera(obj2, 'JavaScript') ; function altera(obj, novastring){ obj.innerhtml = novastring; window.onload=initmouseovers;
À propriedade evento onmouseover do elemento item1 (item HTML da lista) pretendemos atribuir uma função cujo corpo é altera(obj1, 'Extended HTML'). Para isso temos que criar um função anónima com o corpo altera(obj1, 'Extended HTML') e atribuí-la à propriedade evento onmouseover. De um modo idêntico atribuímos funções anónimas às outras propriedades evento dos itens da lista. Na figura seguinte mostra-se a imagem obtida quando se passa o rato por cima do item HTML. O código apresentado a seguir não funciona porque não liga às propriedades evento funções. Apenas atribui às propriedades evento o retorno da execução das funções altera(). Quando o código é carregado, as funções altera() são executadas. function initmouseovers(){ var obj1=document.getelementbyid('item1'); obj1.onmouseover = altera(obj1, 'Extended HTML'); obj1.onmouseout = altera(obj1, 'HTML'); var obj2=document.getelementbyid('item2'); obj2.onmouseover = altera(obj2, 'Linguagem de Script'); obj2.onmouseout = altera(obj2, 'JavaScript'); function altera(obj, novastring){ obj.innerhtml = novastring;