java script - funções
TRANSCRIPT
![Page 1: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/1.jpg)
JavaScript - Funções
Cristiano Pires Martins Fonte: JavaScript - Guia do Programador
Maujor
![Page 2: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/2.jpg)
Definições
• Função é um poderoso objeto destinado a executar uma ação;
• É um bloco de código capaz de realizar ações;
• Função é um exemplo de reutilização inteligente de código;
• Tem a finalidade de dar maior legibilidade ao programa e facilitar a manutenção.
![Page 3: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/3.jpg)
Criando Funções
• Declaração de função:function minhaFuncao(){ // aqui bloco de código};
• Expressão de função:var minhaFuncao = function(){ // aqui bloco de código};
• Com o uso do objeto construtor precedido da palavra-chave new:
var minhaFuncao = new Function (/*aqui bloco de código*/);
![Page 4: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/4.jpg)
declarações x expressões
• Declaração de Funções:var result = add(5,5);
function add(num1, num2){return num1 + num2;
}
• Expressão de Funções:var result = add(5,5); //ERRO!!!!var add = function(num1, num2){
return num1 + num2;}
![Page 5: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/5.jpg)
Parâmetros
• É possível passar qualquer quantidade de parâmetros para qualquer função sem causar erros;
• Os parâmetros são armazenados em uma estrutura semelhante a arrays chamada arguments;
• arguments pode receber qualquer quantidade de valores.
![Page 6: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/6.jpg)
Exemplo 1 - parâmetrosfunction reflect(value){
return value;
}
console.log(reflect(“Hi!”)); //“Hi!"
console.log(reflect(“Hi!”,25)); //“Hi!”
console.log(reflect.lenght); // 1
![Page 7: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/7.jpg)
Exemplo 2 - parâmetrosreflect = function(){
return arguments[0];
}
console.log(reflect(“Hi!”)); //“Hi!"
console.log(reflect(“Hi!”,25)); //“Hi!”
console.log(reflect.lenght); // 0
![Page 8: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/8.jpg)
Exemplo 3 - parâmetrosfunction soma(){
var result = 0, i = 0; var len = arguments.length; while(i < len){result += arguments[i];i++;
}return result;
}console.log(soma(1,2)); //3console.log(soma(3,4,5,6)); //18console.log(soma(50)); //50console.log(soma()); //0
![Page 9: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/9.jpg)
Sobrecarga de funçõesfunction soma(){
var result = 0, i = 0; var len = arguments.length; while(i < len){result += arguments[i];i++;
}return result;
}console.log(soma(1,2)); //3console.log(soma(3,4,5,6)); //18console.log(soma(50)); //50console.log(soma()); //0
![Page 10: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/10.jpg)
Sobrecarga de funções
• É a possibilidade de uma função ter diversas assinaturas;
• Assinatura é composta do nome da função e da quantidade e dos tipos de parâmetros esperados pela função;
• JavaScript não possui Sobrecarga de funções.
![Page 11: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/11.jpg)
Resolvendo Sobrecarga em Funções
function mensagem(msg){
if(arguments.length === 0)
msg = “default”;
console.log(msg);
}
mensagem(“Olá”); //exibe “Olá"
mensagem(); //exibe “default”;
![Page 12: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/12.jpg)
Declaração Function<head>...<script type=”text/javascript”>
function ola(){alert(“Bem-vindo ao meu site”);
};</script></head><body>...
<button type=”button” onclick=”ola();”>Executar função</button>
![Page 13: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/13.jpg)
Declaração Function<head>...<script type=”text/javascript”>
function calculaRetangulo(b,h){var area = (b*h);var perimetro = (b+h)*2;alert(“Área: ” + area + “\nPerímetro: ” + perimetro);
};</script></head><body>...
<button type=”button” onclick=”calculaRetangulo(5,10);”>Executar função</button>
...
![Page 14: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/14.jpg)
Function( )
<head>...<script type=”text/javascript”>
var ola = new Function(“alert(‘Bem-vindo!’);”);</script></head><body>...
<button type=”button” onclick=”ola( );”>Executar função</button>
...
![Page 15: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/15.jpg)
Function( )<head>...<script type=”text/javascript”>
var calculaAreaRetangulo = new Function(“b”,”h”,“return b*h;”);
</script></head><body>...
<button type=”button” onclick=”alert(calculaAreaRetangulo(5,10));”>Executar função</button>
...
![Page 16: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/16.jpg)
Sintaxe Literal<head>...<script type=”text/javascript”>
var calculaAreaRetangulo = function(b,h){return b*h;
};</script></head><body>...
<button type=”button” onclick=”alert(calculaAreaRetangulo(5,10));”>Executar função</button>
...
![Page 17: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/17.jpg)
Retornando Objetos<head>...<script type=”text/javascript”>
function calculaRetangulo(b,h){var area = (b*h);var perimetro = (b+h)*2;return alert(“Área: ” + area + “\nPerímetro: ” + perimetro);
};</script></head><body>...
<button type=”button” onclick=”calculaRetangulo(5,10);”>Executar função</button>
...
![Page 18: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/18.jpg)
Retornando Objetos<head>...<script type=”text/javascript”>
function calculaRetangulo(b,h){var area = (b*h);var perimetro = (b+h)*2;return {
area: area,perimetro: perimetro
};};
</script></head><body>...
<button type=”button” onclick=”var resultados = calculaRetangulo(8,4);alert(`Área:’ + resultados.area); alert(‘Perímetro: ‘ + resultados.perimetro);”>Executar função</button>
...
![Page 19: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/19.jpg)
Retornando Array<head>...<script type=”text/javascript”>
function calculaRetangulo(b,h){var area = (b*h);var perimetro = (b+h)*2;return [area, perimetro];
};</script></head><body>...
<button type=”button” onclick=”var resultados = calculaRetangulo(8,4);alert(`Área:’ + resultados[0]); alert(‘Perímetro: ‘ + resultados[1]);”>Executar função</button>
...
![Page 20: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/20.jpg)
Sintaxe(function f(){...})()
<head>...<script type=”text/javascript”>
function calculaArea(b,h){var area = (b*h);return area;
};alert(calculaArea(3,7));alert(calculaArea);
</script></head><body>...
O segundo alert() mostraa função em si.
![Page 21: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/21.jpg)
Escopo da Função
• O corpo de uma função cria um escopo local para variáveis nele declaradas com o uso da palavra-chave var.
• Os argumentos de uma função também pertencem ao escopo local.
![Page 22: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/22.jpg)
Escopo de uma Função
<script type=”text/javascript”>function testeEscopo( ){
var soma = 2 + 6;alert(“A soma é: “ + soma); //A soma é 8
};testeEscopo( );try{
alert(“O dobro da soma é: ” + 2*soma); //Resulta em soma undefined} catch(e){
alert(e.message); //Mostra a mensagem de erro}
</script>
![Page 23: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/23.jpg)
Escopo de uma Função
<script type=”text/javascript”>function testeEscopo( ){
soma = 2 + 6;alert(“A soma é: “ + soma); //A soma é 8
};testeEscopo( );try{
alert(“O dobro da soma é: ” + 2*soma); //Resulta em 16} catch(e){
alert(e.message); //Não há mensagem de erro}
</script>
![Page 24: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/24.jpg)
Closures
• A ideia central de uma closure é exatamente a de confinamento de uma função dentro da outra.
![Page 25: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/25.jpg)
Closures<script type=”text/javascript”>
function funcaoExterna( ){alert(“Função externa”);function funcaoInterna( ){
alert(“Função interna”);};
};
</script><body>
<button type=”button” onclick=”funcaoExterna( )”>Executar função externa</button><br /><button type=”button” onclick=”funcaoInterna( )”>Executar função interna</button>
</body>
A função externa executa normalmente, mas a interna não é
executada, pois foi chamada fora da função externa
![Page 26: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/26.jpg)
Closures
<script type=”text/javascript”>function funcaoExterna( ){
alert(“Função externa”);function funcaoInterna( ){
alert(“Função interna”);};funcaoInterna();
};
</script><body>
<button type=”button” onclick=”funcaoExterna( )”>Executar função externa</button><br />
</body>
Como a função interna foi chamada dentro da função externa, é executada
normalmente
![Page 27: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/27.jpg)
Closures<script type=”text/javascript”>
function funcaoExterna( ){alert(“Função externa”);function funcaoInterna( ){
alert(“Função interna”);};variavelGlobal = funcaoInterna;
};
</script><body>
<button type=”button” onclick=”funcaoExterna( )”>Executar função externa</button><br /><button type=”button” onclick=”variavelGlobal( )”>Executar função interna</button>
</body>
As duas funções são executadas normalmente
![Page 28: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/28.jpg)
Funções Globais
• Funções que não estão associadas a um objeto particular da linguagem.
• eval(código): executar um script inserido no argumento código (cuidado ao usar, pois proporciona meios de servir código malicioso);
• isFinite(valor): testa um valor passado como argumento da função. True se for número ou false caso contrário;
• isNaN(valor): testa um valor passado como argumento da função. True se não for um número e falso caso contrário.
![Page 29: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/29.jpg)
Funções Globais
• Number(valor): converte em um número o valor passado como argumento da função.
• parseFloat(string [,base]): converte em um número o valor passado como argumento da função. Admite um argumento opcional que é a base na qual o número deverá ser retornado.
![Page 30: Java script - funções](https://reader034.vdocuments.net/reader034/viewer/2022050714/58d128881a28abe3298b4a61/html5/thumbnails/30.jpg)
Exercícios
• 1. Crie uma função que retorna um Array com os meses do ano. Mostre o array retornado usando for;
• 2. Faça uma função que retorne um objeto com o cardápio relacionado aos dias da semana. Para cada dia da semana existe um prato diferente. Quando a função for chamada, retornará um objeto que será mostrado usando o FOR IN.