T10_LM3: Subalgoritmos/funções (2013-2014)

JavaScript: Subalgoritmos

Carlos SantosLabMM 3 - NTC - DeCA - UAAula 10, 18-10-2013

Subalgoritmos

• Porque não devemos repetir o mesmo algoritmo/código em diferentes locais do programa?

• quantidade de código escrito aumenta;

• alterações ao algoritmo implicam uma manutenção mais complexa.

• Porque é uma boa prática centralizar rotinas em subalgoritmos?

• cada algoritmo só é escrito uma vez;

• diminui a dimensão da aplicação;

• facilita operações de alteração e/ou manutenção do código;

• pode minimizar alguns erros de programação.

Subalgoritmos - O que são?

• Subalgoritmos são algoritmos dentro de algoritmos que compreendem um conjunto de instruções dedicadas à resolução de uma tarefa ou problema.

• são identificados por um nome único que é definido na sua declaração;

• são invocados através do seu nome único;

• Conceptualmente, podem-se distinguir dois tipos de subalgoritmos:

• procedimentos: definem um conjunto de instruções a executar;

• funções: definem um conjunto de instruções a executar e retornam um valor final.

Subalgoritmos: declaração em Javascript

function nomeFunção ([arg0, arg1,..., argN]){

// código a executar[return valor;]

}

identificador único do subalgoritmo/

função

valor a retornar pela função (opcional)

lista de parâmetros necessários para a execução do subalgoritmo/

função (pode não existir)

Subalgoritmos: ordem de execução

Subalgoritmos: caixa preta!

subalgoritmoinvocação

retorno daexecução

Subalgoritmos e estratégias de programação

• Sem recurso a subalgoritmos – Programação convencional linear

• Cada processo é executado após o anterior;

• Não se distinguem alterações à linearidade do fluxo exceto pela utilização de estruturas de decisão e repetição.

• Com recurso a subalgoritmos – Programação estruturada ou modular

• Programação por módulos baseada na divisão do problema em sub-problemas;

• Cada módulo pensado para invocação a partir de múltiplos locais do programa.

Tipos de subalgoritmos

• Intrínsecos

• nativos da própria linguagem de programação.

• Extrínsecos

• criados pelo programador

• NOTA: as frameworks disponibilizam bibliotecas de funções que permitem ampliar as funções nativas de uma linguagem de programação.

• NOTA 2: apesar das diferenças conceptuais, a partir deste ponto irei utilizar apenas a designação “função” para todos os tipos de subalgoritmos.

Funções: exemplo 1

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Funções: Exemplo 1</title>

<script language="javascript" type="application/javascript">



</script>

</head>

<body>


helloWorld(); //Invocação da função

</script>

</body>

</html>

Como invocar

• Uma instrução direta no código

• helloWorld();

• Associar a um evento

• onload="iniciarQuadroJogo()”; //evento de sistema

• onclick="clicarObjeto()”; //eventos de ações do utilizador

• timerID = setInterval(“limparQuadroJogo()”, 2000); //eventos periódicos gerados por timers

• clearInterval(timerID); //para terminar com um timer específico

• Callback

• uma função é invocada assincronamente quando uma determinada operação terminar...

Parâmetros de uma função

• Parâmetros de entrada

• definem o “protocolo” de comunicação com uma função, ou seja, explicitam os dados que a função precisa para que possa atingir o seu objetivo;

• não há um limite formal ao número de parâmetros de uma função;

• na declaração são separados por vírgula;

• podem ser de qualquer tipo de dados.

• Parâmetro de saída

• é o valor devolvido pela função no final da sua execução;

• return valorDevolvido;

• após um return, o código seguinte da função não é executado!


<head>


function helloWorld() //Declaração da função

{

return true; //Qual o resultado da execução desta função?

alert("Hello World!");

}

</script>

</head>

<body>


helloWorld();

</script>

</body>


<head>


function helloPeople(name) //Declaração da função

{

alert(name);

}

</script>

</head>

<body>


helloPeople(“Manel”);

</script>

</body>

Parâmetros: como funcionam?

// Na invocação das funções temos valores,

// ou seja, a lista dos valores que queremos passar para a função

nomeFunção (valor0, valor1,..., valorN);

// Na declaração da função definimos os parâmetros.

// Na sua execução, os parâmetros são transformados em variáveis da função.

// Cada parâmetro é inicializado com o valor passado na respetiva posição.

function nomeFunção(param0, param1,..., paramN)

{

// código da função

// por exemplo, aqui, “param0” é uma variável cujo valor inicial é “valor0”

}

Funções: exemplo 3 - passagem de parâmetros

<head>



{

alert(name);

}

</script>

</head>

<body>



</script>

</body>

nesta invocação da função, ao parâmetro “name” é atribuído o valor inicial “Manel”


<head>



{

alert(name);

}

</script>

</head>

<body>



helloPeople(“Maria”);

</script>

</body>

Funções: exemplo 5 - qual o resultado?

<head>


function incValores(x, y) //Declaração da função

{

x++;

y++;

alert(x + “ “ + y); // ??

}

</script>

</head>

<body>


var a = 4;

var b = 8;

alert(a + “ “ + b); // ??

incValores(a, b);

alert(a + “ “ + b); // ??

</script>

</body>

Funções: exemplo 6 - qual o resultado?

<head>


function incValores(a, b) //Declaração da função

{

a++;

b++;

alert(a + “ “ + b); // ??

}

</script>

</head>

<body>


var a = 4;

var b = 8;

alert(a + “ “ + b); // ??

incValores(a, b);

alert(a + “ “ + b); // ??

</script>

</body>

T10_LM3: Subalgoritmos/funções (2013-2014)

Education

Transcript of T10_LM3: Subalgoritmos/funções (2013-2014)