Tutorial de JS

JS HOME Introdução JS JS Para onde Saída JS Declarações JS Sintaxe JS Comentários JS Variáveis ​​JS JS Let JS Const Operadores JS JS Aritmética Atribuição de JS Tipos de dados JS Funções JS Objetos JS Eventos JS Strings JS Métodos de string JS Pesquisa de String JS Modelos de String JS Números JS Métodos de número JS Matrizes JS Métodos de matriz JS Classificação de matriz JS Iteração de matriz JS Const da matriz JS Datas JS Formatos de data JS Métodos de obtenção de data JS Métodos de conjunto de datas JS JS Math JS Aleatório JS Booleanos Comparações JS Condições JS Interruptor JS Circuito JS para JS Loop Para Entrada JS Loop Para De JS Loop Enquanto Quebra de JS Iteráveis ​​JS Conjuntos JS Mapas JS Tipo JS de Conversão de tipo JS JS bit a bit JS RegExp Erros JS Escopo JS Içamento JS Modo estrito JS JS esta palavra-chave Função de seta JS Classes JS JS JSON Depuração JS Guia de estilo JS Práticas recomendadas de JS Erros de JS Desempenho JS Palavras reservadas JS

Versões JS

Versões JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Histórico de JS

Objetos JS

Definições de objeto Propriedades do objeto Métodos de objeto Exibição de objetos Acessadores de objetos Construtores de objetos Protótipos de Objetos Iteráveis ​​de objeto Conjuntos de objetos Mapas de objetos Referência do objeto

Funções JS

Definições de função Parâmetros de função Invocação de função Chamada de Função Função Aplicar Fechamentos de Função

Classes JS

Introdução à aula Herança de classe Classe Estática

JS Assíncrono

Retornos de chamada JS JS Assíncrono Promessas JS JS Async/Aguardar

JS HTML DOM

Introdução ao DOM Métodos DOM Documento DOM Elementos DOM HTML DOM Formulários DOM CSS DOM Animações DOM Eventos DOM Ouvinte de eventos DOM Navegação DOM Nós DOM Coleções DOM Listas de nós DOM

BOM do navegador JS

Janela JS Tela JS Localização JS Histórico de JS Navegador JS Alerta pop-up JS Temporização JS Cookies JS

APIs da Web JS

Introdução à API da Web API de formulários da Web API de histórico da web API de armazenamento da Web API do trabalhador da Web API de busca da Web API de geolocalização da Web

JS AJAX

Introdução AJAX AJAX XML Http Solicitação AJAX Resposta AJAX Arquivo XML AJAX PHP AJAX ASP AJAX Banco de dados AJAX Aplicativos AJAX Exemplos AJAX

JS JSON

Introdução JSON Sintaxe JSON JSON x XML Tipos de dados JSON Análise JSON JSON Stringify Objetos JSON Matrizes JSON Servidor JSON JSON PHP HTML JSON JSON JSONP

JS x jQuery

Seletores jQuery HTML jQuery jQuery CSS jQuery DOM

Gráficos JS

Gráficos JS Tela JS JS Plotly JS Chart.js JS Google Chart JS D3.js

Exemplos JS

Exemplos JS JS HTML DOM Entrada HTML JS Objetos HTML JS Eventos HTML JS Navegador JS Editor JS Exercícios JS Teste JS Certificado JS

Referências JS

Objetos JavaScript Objetos HTML DOM


Funções JavaScript


Uma função JavaScript é um bloco de código projetado para executar uma tarefa específica.

Uma função JavaScript é executada quando "algo" a invoca (chama).


Exemplo

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

Sintaxe da Função JavaScript

Uma função JavaScript é definida com a palavra- functionchave, seguida por um name , seguido por parênteses () .

Os nomes das funções podem conter letras, dígitos, sublinhados e cifrões (mesmas regras das variáveis).

Os parênteses podem incluir nomes de parâmetros separados por vírgulas:
( parâmetro1, parâmetro2, ... )

O código a ser executado, pela função, é colocado entre chaves: {}

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Os parâmetros da função são listados entre parênteses () na definição da função.

Os argumentos da função são os valores recebidos pela função quando ela é invocada.

Dentro da função, os argumentos (os parâmetros) se comportam como variáveis ​​locais.

Uma Função é muito parecida com um Procedimento ou uma Sub-rotina, em outras linguagens de programação.


Invocação de função

O código dentro da função será executado quando "algo" invocar (chamar) a função:

  • Quando ocorre um evento (quando um usuário clica em um botão)
  • Quando é invocado (chamado) do código JavaScript
  • Automaticamente (auto-invocado)

Você aprenderá muito mais sobre invocação de função posteriormente neste tutorial.



Retorno de Função

Quando o JavaScript atinge uma returninstrução, a função para de ser executada.

Se a função foi invocada a partir de uma instrução, o JavaScript "retornará" para executar o código após a instrução invocada.

As funções geralmente calculam um valor de retorno . O valor de retorno é "retornado" de volta ao "chamador":

Exemplo

Calcule o produto de dois números e retorne o resultado:

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

O resultado em x será:

12

Por que Funções?

Você pode reutilizar o código: defina o código uma vez e use-o várias vezes.

Você pode usar o mesmo código muitas vezes com argumentos diferentes, para produzir resultados diferentes.

Exemplo

Converter Fahrenheit para Celsius:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

O operador () invoca a função

Usando o exemplo acima, toCelsiusrefere-se ao objeto de função e toCelsius()refere-se ao resultado da função.

Acessar uma função sem () retornará o objeto da função em vez do resultado da função.

Exemplo

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Funções usadas como valores variáveis

As funções podem ser usadas da mesma maneira que você usa variáveis, em todos os tipos de fórmulas, atribuições e cálculos.

Exemplo

Em vez de usar uma variável para armazenar o valor de retorno de uma função:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Você pode usar a função diretamente, como um valor de variável:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Você aprenderá muito mais sobre funções posteriormente neste tutorial.


Variáveis ​​locais

Variáveis ​​declaradas dentro de uma função JavaScript tornam-se LOCAL para a função.

Variáveis ​​locais só podem ser acessadas de dentro da função.

Exemplo

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Como as variáveis ​​locais são reconhecidas apenas dentro de suas funções, variáveis ​​com o mesmo nome podem ser usadas em funções diferentes.

As variáveis ​​locais são criadas quando uma função é iniciada e excluídas quando a função é concluída.


Teste-se com exercícios

Exercício:

Execute a função chamada myFunction.

function myFunction() {
  alert("Hello World!");
}
;