Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Aula 3 – Funções em JavaScript
Sergio Zumpano Arnosti
𝑓 𝑥 = 𝑎0 + 𝑎𝑛 cos𝑛𝜋𝑥
𝐿+ 𝑏𝑛 sin
𝑛𝜋𝑥
𝐿
∞
𝑛=1
𝑔(𝑥) = 𝑥2𝑑𝑥1
0
1 + 𝑥 𝑛 = 1 +
𝑛𝑥
1!+𝑛 𝑛 − 1 𝑥2
2!+ ⋯
tan 𝜃 =sin 𝜃
cos 𝜃
sinh 𝑥
ℎ 𝑥, 𝑦 = 𝑥3𝑑𝑥 𝑦4𝑑𝑦
𝑓 𝑥 =𝑥 24 1
𝑧 𝑥 =𝑑𝑦
𝑑𝑥
𝐴 𝑧, 𝑤 =𝑤 ⋯ 10⋮ ⋱ ⋮10 ⋯ 10
. 𝑧
O que são funções na matemática ?
O que são funções em linguagens de programação ?
• Podemos dizer que funções/procedimentos são sub-rotinas que executam uma tarefa em particular.
• As linguagens de programação atuais possuem
formas de se criar sub-rotinas. • O programador pode criar as suas próprias
funções. • A própria linguagem tem algumas sub-rotinas
prontas que facilitam o trabalho do programador.
• Sub-rotina é um algoritmo.
Mas, pra que servem as funções ?
<script type="text/javascript">
var notaP1;
var notaP2;
var media;
notaP1 = 6.0;
notaP2 = 8.0;
media = (2*notaP1 + 3*notaP2)/5;
document.write("Média de Matemática: " + media + "<br/>");
notaP1 = 9.0;
notaP2 = 8.0;
media = (notaP1 + 2*notaP2)/3;
document.write("Média de Ciências: " + media + "<br/>");
notaP1 = 6.0;
notaP2 = 8.0;
media = (2*notaP1 + 5*notaP2)/7;
document.write("Média de Português: " + media + "<br/>");
</script>
• Organiza a programação (Modulariza).
• Evita que um mesmo código tenha que ser
reescrito várias vezes.
• Reutilização.
• Facilita a leitura e manutenção do código.
• Dividir em pequenas partes e conquistar.
Definindo um função em JS
function nomeDaFuncao (arg1, arg2, ..., argN){
/* Código JavaScript a ser executado */
}
Rotina principal faz uma
chamada a sub-rotina (função).
Função executa a sua rotina e retorna à principal.
Como funciona ?
Retorno
Chamada
Vamos fazer um exemplo simples ?
Exemplo
function cumprimentar(){
alert("Olá, como vai você ?");
}
Parâmetros ou Argumentos
function nomeDaFuncao (arg1, arg2, ..., argN){
/* Código JavaScript a ser executado */
}
Valores passados na chamada da função para serem utilizados
dentro da rotina a ser executada, devem ser separados por
vírgulas.
Retorno de valores
• Procedimento: Não retorna valor algum, apenas executa uma ação.
• Função: Executa uma rotina e obrigatoriamente retorna um valor.
• Método: Análogo a funções e procedimentos, porém é executado por um objeto para alterar seu estado.
Retorno de valores
function nomeDaFuncao (arg1, arg2, ..., argN){
/* Código JavaScript a ser executado */
return valor;
}
Utilizamos a palavra-chave return seguida do valor de
qualquer tipo a ser retornado para a rotina principal.
Expressões com função
var nomeDaFunção = function (arg1, ..., argN){
/* Código JavaScript a ser executado */
return valor;
}
Escopo var x = 10;
function y(){
document.write(x);
var x = 20;
document.write(x);
}
y();
document.write(x);
sayHello();
function sayHello(){
document.write(" Olá! ");
}
sayHello();
var sayHello = function()
{
document.write("Olá!");
};
Escopo
• A declaração de uma variável está ligada ao início de seu escopo.
• As variáveis dentro de uma função fazem parte de um
escopo local, assim como os seus argumentos.
• Posso acessar uma variável externa à função desde que não exista um escopo local para uma variável com o mesmo nome.
Resumindo, para construir funções devemos definir:
• Nome da função Deve ser objetivo e relacionado a ação executada pela função.
• Lista de parâmetros Verificar quais valores a função deve receber para executar a sua rotina.
• Código JS a ser executado Montar o código específico. Não é uma boa prática imprimir resultados dentro da função, preferível retornar .
Agora que sabemos os princípios para se definir uma função,
Vamos fazer um exercício mais completo !!!
<script type="text/javascript">
var notaP1;
var notaP2;
var media;
notaP1 = 6.0;
notaP2 = 8.0;
media = (2*notaP1 + 3*notaP2)/5;
document.write("Média de Matemática: " + media + "<br/>");
notaP1 = 9.0;
notaP2 = 8.0;
media = (notaP1 + 2*notaP2)/3;
document.write("Média de Ciências: " + media + "<br/>");
notaP1 = 6.0;
notaP2 = 8.0;
media = (2*notaP1 + 5*notaP2)/7;
document.write("Média de Português: " + media + "<br/>");
</script>
Transforme em função !
Funções aninhadas e closures function externa(x) {
function interna(y) {
return x + y;
}
return interna;
}
func_interna = externa(3);
result = func_interna(5); // returns 8
result1 = externa(3)(5); // returns 8
Características interessantes O Array (vetor) arguments :
• Mesmo que a função não receba argumentos em sua declaração,
podemos passar valores a ela e chamá-los com o vetor arguments.
• Serve para definir funções que recebam qualquer número de
argumentos.
• Como usar ?
nomeDaFuncao.arguments.length – dá o número de argumentos
nomeDaFuncao.arguments[i] – pega o valor do vetor na posição i
Funções interessantes
Math.random(); /* Gera números randômicos entre 0 e 1 */ Math.floor(n); /* Arredonda um número para o maior inteiro menor que n */ eval("string"); /* Avalia o valor da string, se não for uma string retorna o valor inalterado */ setTimeout("função", t); /* Após um certo tempo t, executa a função passada */
Referências
Mozilla Developer Network. Function and functions scope Disponível em: < https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope#Scope_and_the_function_stack > Acesso em: 07 maio 2014. ALLARDICE, James. Explaining function and variable hoisting in JavaScript < http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/ > Acesso em: 07 maio 2014. W3schools.com. JavaScript and HTML DOM Reference < http://www.w3schools.com/jsref/default.asp > Acesso em: 07 maio 2014.
Obrigado !!!