Menu
∞ JavaScript Avançado ∞
Para ir mais além da construção de pequenos programas que realizam funções muito simples, e começar a desenvolver aplicações realmente úteis em termos de World Wide Web, é necessário saber noções sintácticas de natureza mais avançada: as que se relacionam com a utilização de objectos e as que estão mais directamente relacionadas com as funções.
Funções
O código JavaScript é habitualmente dividido em funções, ou seja, em blocos de código. Uma função permite agrupar uma porção de expressões num bloco, designado por um determinado nome, e pronto para ser utilizado em qualquer zona do código principal. Quando o nome da função for utilizado no código do programa, a função é executada.
Uma função declara-se com a seguinte sintaxe:
function nome (parâmetros) {
expressão1
expressão2
...
expressãoN
return (valor);
}
A função é identificada pelo nome que tem e pode ser definida com um conjunto de parâmetros (valores) que são passados para o interior da função, na altura da chamada da função. Estes parâmetros são utilizados como vulgares variáveis no interior da função.
Para além da execução das expressões colocadas no interior da função, esta também pode devolver um determinado valor para a expressão que a chamou, através da instrução return. No exemplo da sintaxe anterior, o valor devolvido é o contido na variável valor.
As funções em JavaScript são utilizadas com dois objectivos: o primeiro é a estruturação do código, por forma a que este seja organizado de forma eficiente e prática, a criação de funções evita, muitas vezes, a reescrita de código, por haver reutilização das linhas de código existentes no corpo da função. O segundo objectivo é o associar de funções a acontecimentos ocorridos na página Web, denominados eventos.
Vejamos um exemplo de declaração e utilização de uma função em JavaScript.
<script language="Javascript" type="text/javascript">
function soma ( x, y ) {
var sum;
sum = x + y;
return (sum);
}
var total = soma(5,4);
document.write("Resultado da soma: ", total);
</script>
A função está definida no topo do script, contudo, só é chamada no final, no corpo principal do código do programa. A chamada à função total = soma(5,4) é feita passando como parâmetros os valores 5 e 4, que são colocados nas variáveis x e y, internas à função em causa (não são conhecidas fora do corpo da função e que, como parâmetros fixos que são, não podem ser modificados no interior da função. Igualmente interna à função soma() é a variável sum, cujo valor é por fim devolvido para o exterior da função, utilizando para tal a instrução return(sum).
O valor devolvido é colocado na variável total, que foi utilizada na expressão de chamada da função.
A reutilização de código pode ser demonstrada com o exemplo seguinte. Nele é utilizada uma função fact(), que simplesmente calcula o factorial de um número. Neste exemplo pretende-se calcular todos os factoriais de números entre 1 e 10, bem como dar a oportunidade de calcular o factorial de um número à escolha.
<script language="Javascript" type="text/javascript">
function fact(num) {
//função de cálculo do factorial
var res = 1;
//variável que vai conter o resultado final
for (var k = num; k >= 1; k--) { //cálculo do factorial
res *= k;
//expressão reduzida da multiplicação
}
return (res);
}
//Programa principal
for (var k=1; k<=10; k++) {
//cálculo dos factoriais entre 1 e 10
document.write(k, "! = " , fact(k), "<br>");
}
var x;
x = prompt("Outro factorial a calcular: ");
document.write(x, "! = " , fact(x));
</script>
A utilização da função fact() para calcular os factoriais dos números de 1 a 10 e depois a utilização da mesma função para calcular o factorial do número entrado pelo utilizador, permite efectuar reutilização de código, uma vez que a alternativa seria escrever duas vezes a rotina de cálculo do factorial.
Outro exemplo de escrever o mesmo código seria:
<html>
<head>
<title>Factorial</title>
<script language="Javascript" type="text/javascript">
function fact(num) {
//função de cálculo do factorial
var res=1;
//variável que vai conter o resultado final
for (var k = num; k >= 1; k--) { //cálculo do factorial
res *= k;
//expressão reduzida da multiplicação
}
return (res);
}
//Programa principal
function main() {
for (var k=1; k<=10; k++) { //cálculo dos factoriais entre 1 e 10
document.write(k, "! = " , fact(k), "<br>");
}
var x;
x = prompt("Outro factorial a calcular: ");
document.write(x, "! = " , fact(x));
}
</script>
</head>
<body>
<h3>Cálculo do Factorial</h3>
<script language="Javascript" type="text/javascript">
main();
</script>
</body>
</html>
Neste caso, o código JavaScript foi colocado no cabeçalho (header) da página HTML, sob a forma de funções, estando a função principal main() também residente nessa zona.
O corpo da página HTML contém, neste exemplo, apenas a invocação da função main(). Em muitas circunstâncias, a forma como se integram scripts em páginas HTML será por recurso aos chamados eventos, ou seja, à execução de funções de código como resposta a determinadas ocorrências numa página (por exemplo, um clique de rato).