Definir e Chamar Funções em JavaScript

Introdução

Neste laboratório, os alunos explorarão os conceitos fundamentais de definição e chamada de funções em JavaScript. O laboratório oferece uma introdução abrangente aos fundamentos das funções, cobrindo habilidades essenciais como a criação de funções simples, o trabalho com parâmetros e a compreensão dos valores de retorno das funções. Os participantes aprenderão como estruturar funções, executá-las e usar a saída do console para demonstrar sua funcionalidade.

Através de uma série de exercícios práticos, os alunos praticarão a criação de funções sem valores de retorno, a implementação de funções com parâmetros e a exploração de diferentes maneiras de chamar e utilizar funções. Ao final do laboratório, os alunos terão adquirido experiência prática na escrita de blocos de código reutilizáveis, na compreensão da sintaxe das funções e na aplicação de conceitos de funções na programação JavaScript.

Entender os Fundamentos das Funções

Nesta etapa, você aprenderá os conceitos fundamentais das funções em JavaScript. Funções são blocos de código reutilizáveis que executam uma tarefa específica e ajudam a organizar sua lógica de programação.

Uma função é definida usando a palavra-chave function, seguida por um nome, parênteses (), e um bloco de código entre chaves {}. Aqui está a estrutura básica de uma função:

function functionName() {
  // Code to be executed
}

Vamos criar um exemplo simples para demonstrar os fundamentos das funções. Abra o WebIDE e crie um novo arquivo chamado functions.js no diretório ~/project.

// Definindo uma função simples
function greet() {
  console.log("Olá, Funções JavaScript!");
}

// Chamando a função
greet();

Quando você executar este código, verá a seguinte saída:

Saída de exemplo:
Olá, Funções JavaScript!

Pontos-chave para entender sobre funções:

• Funções são definidas usando a palavra-chave function
• Elas podem ser chamadas várias vezes
• Elas ajudam a reduzir a repetição de código
• Funções podem ser simples ou complexas

Experimente chamando a função greet() várias vezes para ver como ela funciona.

Criar uma Função Simples sem Valor de Retorno

Nesta etapa, você aprenderá como criar funções que executam ações sem retornar um valor. Essas funções são frequentemente usadas para executar uma tarefa específica ou exibir informações.

Abra o WebIDE e crie um novo arquivo chamado simple_functions.js no diretório ~/project. Criaremos alguns exemplos de funções sem valores de retorno.

// Função para exibir uma mensagem de boas-vindas
function displayWelcome() {
  console.log("Bem-vindo às Funções JavaScript!");
}

// Função para imprimir a tabuada
function printMultiplicationTable(number) {
  console.log(`Tabuada para ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}

// Chamando as funções
displayWelcome();
printMultiplicationTable(5);

Quando você executar este código, verá a seguinte saída:

Saída de exemplo:
Bem-vindo às Funções JavaScript!
Tabuada para 5:
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

Pontos-chave sobre funções sem valores de retorno:

• Elas executam ações como imprimir ou modificar dados
• Elas usam console.log() para exibir informações
• Elas podem receber parâmetros para torná-las mais flexíveis
• Elas não usam a palavra-chave return para enviar um valor de volta

Experimente criando suas próprias funções ou modificando as existentes para exibir mensagens diferentes ou executar várias tarefas.

Criar uma Função com Parâmetros e Valor de Retorno

Nesta etapa, você aprenderá como criar funções que aceitam parâmetros e retornam valores. Essas funções são mais versáteis e podem realizar cálculos ou transformações.

Abra o WebIDE e crie um novo arquivo chamado parameter_functions.js no diretório ~/project. Criaremos funções que demonstram parâmetros e valores de retorno.

// Função para calcular a área de um retângulo
function calculateRectangleArea(length, width) {
  return length * width;
}

// Função para verificar se um número é par
function isEven(number) {
  return number % 2 === 0;
}

// Função para cumprimentar uma pessoa
function createGreeting(name) {
  return `Olá, ${name}! Bem-vindo ao JavaScript.`;
}

// Demonstrando chamadas de função e valores de retorno
let rectangleArea = calculateRectangleArea(5, 3);
console.log(`Área do Retângulo: ${rectangleArea} unidades quadradas`);

let checkNumber = 6;
console.log(`O número ${checkNumber} é par? ${isEven(checkNumber)}`);

let personalGreeting = createGreeting("Alice");
console.log(personalGreeting);

Quando você executar este código, verá a seguinte saída:

Saída de exemplo:
Área do Retângulo: 15 unidades quadradas
O número 6 é par? true
Olá, Alice! Bem-vindo ao JavaScript.

Pontos-chave sobre funções com parâmetros e valores de retorno:

• Parâmetros permitem que as funções aceitem entrada
• A palavra-chave return envia um valor de volta da função
• Funções podem realizar cálculos e retornar o resultado
• Valores de retorno podem ser usados em cálculos ou logs adicionais

Experimente criando suas próprias funções com diferentes parâmetros e tipos de retorno.

Praticar a Implementação de Funções

Nesta etapa, você praticará a implementação de funções criando um pequeno programa que demonstra várias técnicas de função. Construiremos um aplicativo de calculadora simples para reforçar sua compreensão da implementação de funções.

Abra o WebIDE e crie um novo arquivo chamado calculator.js no diretório ~/project. Implementaremos várias funções matemáticas:

// Função para somar dois números
function add(a, b) {
  return a + b;
}

// Função para subtrair dois números
function subtract(a, b) {
  return a - b;
}

// Função para multiplicar dois números
function multiply(a, b) {
  return a * b;
}

// Função para dividir dois números com tratamento de erros
function divide(a, b) {
  if (b === 0) {
    return "Erro: Divisão por zero";
  }
  return a / b;
}

// Função para calcular o quadrado de um número
function square(x) {
  return x * x;
}

// Demonstrar funções da calculadora
console.log("Adição: 5 + 3 =", add(5, 3));
console.log("Subtração: 10 - 4 =", subtract(10, 4));
console.log("Multiplicação: 6 * 7 =", multiply(6, 7));
console.log("Divisão: 15 / 3 =", divide(15, 3));
console.log("Quadrado de 4 =", square(4));
console.log("Divisão por zero:", divide(10, 0));

Quando você executar este código, verá a seguinte saída:

Saída de exemplo:
Adição: 5 + 3 = 8
Subtração: 10 - 4 = 6
Multiplicação: 6 * 7 = 42
Divisão: 15 / 3 = 5
Quadrado de 4 = 16
Divisão por zero: Error: Divisão por zero

Pontos-chave sobre a implementação de funções:

• Crie funções com responsabilidades claras e únicas
• Use parâmetros para tornar as funções flexíveis
• Implemente tratamento de erros quando necessário
• Teste suas funções com diferentes entradas
• Use nomes significativos para funções e variáveis

Experimente adicionando mais funções matemáticas ou modificando as existentes.

Explorar Chamadas de Funções e Saída

Nesta etapa, você aprenderá diferentes maneiras de chamar funções e explorará várias técnicas de saída em JavaScript. Criaremos um exemplo abrangente que demonstra múltiplas estratégias de chamada de função e métodos de saída.

Abra o WebIDE e crie um novo arquivo chamado function_output.js no diretório ~/project:

// Função para gerar uma saudação personalizada
function createGreeting(name, time) {
  return `Bom ${time}, ${name}!`;
}

// Função para calcular o preço total com imposto
function calculateTotalPrice(price, taxRate = 0.1) {
  return price + price * taxRate;
}

// Função com múltiplos parâmetros e valores padrão
function displayUserInfo(
  name,
  age = "Não especificado",
  city = "Desconhecido"
) {
  console.log(`Nome: ${name}`);
  console.log(`Idade: ${age}`);
  console.log(`Cidade: ${city}`);
}

// Demonstrando diferentes técnicas de chamada de função
let morningGreeting = createGreeting("Alice", "manhã");
console.log(morningGreeting);

let eveningGreeting = createGreeting("Bob", "noite");
console.log(eveningGreeting);

let productPrice = 100;
let totalPrice = calculateTotalPrice(productPrice);
console.log(`Preço do Produto: $${productPrice}`);
console.log(`Preço Total (com imposto): $${totalPrice}`);

// Chamando a função com diferentes combinações de parâmetros
displayUserInfo("Charlie");
displayUserInfo("David", 30);
displayUserInfo("Eve", 25, "Nova York");

Quando você executar este código, verá a seguinte saída:

Saída de exemplo:
Bom manhã, Alice!
Bom noite, Bob!
Preço do Produto: $100
Preço Total (com imposto): $110
Nome: Charlie
Idade: Não especificado
Cidade: Desconhecido
Nome: David
Idade: 30
Cidade: Desconhecido
Nome: Eve
Idade: 25
Cidade: Nova York

Pontos-chave sobre chamadas de função e saída:

• Funções podem ser chamadas com diferentes números de argumentos
• Valores de parâmetro padrão fornecem flexibilidade
• Use literais de template para saída formatada
• console.log() é útil para exibir resultados de funções
• Você pode armazenar valores de retorno de funções em variáveis

Experimente criando chamadas de função e cenários de saída mais complexos.

Resumo

Neste laboratório, os participantes exploraram os conceitos fundamentais de funções JavaScript, aprendendo como definir, criar e chamar funções com diferentes características. O laboratório guiou os alunos através da compreensão dos fundamentos das funções, incluindo a sintaxe da função, declaração e execução, com foco na criação de blocos de código reutilizáveis que podem realizar tarefas específicas.

A jornada de aprendizado cobriu a criação de funções simples sem valores de retorno, a implementação de funções com parâmetros e a demonstração de como as funções podem ser usadas para organizar a lógica de programação, imprimir saída e realizar cálculos. Ao praticar a implementação de funções e explorar várias técnicas de chamada de função, os participantes adquiriram habilidades práticas na escrita de código JavaScript modular e eficiente.