Определение и вызов функций в JavaScript

CSSCSSBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом лабе студенты изучат фундаментальные концепции определения и вызова функций в JavaScript. Лаб предоставляет полное введение в основы функций, охватывая важные навыки, такие как создание простых функций, работа с параметрами и понимание возвращаемых значений функций. Участники научатся структурировать функции, выполнять их и использовать консольный вывод для демонстрации их функциональности.

С помощью серии практических упражнений ученики будут практиковать создание функций без возвращаемых значений, реализацию функций с параметрами и исследование различных способов вызова и использования функций. К концу лабы студенты приобретут практический опыт в написании повторно используемых блоков кода, понимании синтаксиса функций и применении концепций функций в JavaScript-программировании.

Разберитесь с основами функций

В этом шаге вы изучите фундаментальные концепции функций в JavaScript. Функции - это повторно используемые блоки кода, которые выполняют определенную задачу и помогают организовать вашу программирующую логику.

Функция определяется с использованием ключевого слова function, за которым следуют имя, круглые скобки (), и блок кода, заключенный в фигурные скобки {}. Вот базовая структура функции:

function functionName() {
  // Код, который будет выполнен
}

Давайте создадим простой пример, чтобы продемонстрировать основы функций. Откройте WebIDE и создайте новый файл с именем functions.js в директории ~/project.

// Определение простой функции
function greet() {
  console.log("Hello, JavaScript Functions!");
}

// Вызов функции
greet();

При запуске этого кода вы увидите следующий вывод:

Примерный вывод:
Hello, JavaScript Functions!

Основные моменты, которые необходимо понять о функциях:

  • Функции определяются с использованием ключевого слова function
  • Их можно вызывать несколько раз
  • Они помогают уменьшить повторение кода
  • Функции могут быть простыми или сложными

Попробуйте экспериментировать, вызывая функцию greet() несколько раз, чтобы понять, как она работает.

Создайте простую функцию без возвращаемого значения

В этом шаге вы научитесь создавать функции, которые выполняют действия, не возвращая значение. Эти функции часто используются для выполнения определенной задачи или отображения информации.

Откройте WebIDE и создайте новый файл с именем simple_functions.js в директории ~/project. Мы создадим несколько примеров функций без возвращаемых значений.

// Функция для отображения приветственного сообщения
function displayWelcome() {
  console.log("Welcome to JavaScript Functions!");
}

// Функция для вывода таблицы умножения
function printMultiplicationTable(number) {
  console.log(`Таблица умножения для ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}

// Вызов функций
displayWelcome();
printMultiplicationTable(5);

При запуске этого кода вы увидите следующий вывод:

Примерный вывод:
Welcome to JavaScript Functions!
Таблица умножения для 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

Основные моменты о функциях без возвращаемых значений:

  • Они выполняют действия, такие как печать или изменение данных
  • Они используют console.log() для отображения информации
  • Они могут принимать параметры, чтобы стать более гибкими
  • Они не используют ключевое слово return, чтобы вернуть значение

Попробуйте экспериментировать, создав собственные функции или изменив существующие, чтобы отобразить разные сообщения или выполнить различные задачи.

Создайте функцию с параметрами и возвращаемым значением

В этом шаге вы научитесь создавать функции, которые принимают параметры и возвращают значения. Эти функции более гибкие и могут выполнять вычисления или преобразования.

Откройте WebIDE и создайте новый файл с именем parameter_functions.js в директории ~/project. Мы создадим функции, демонстрирующие параметры и возвращаемые значения.

// Функция для вычисления площади прямоугольника
function calculateRectangleArea(length, width) {
  return length * width;
}

// Функция для проверки, является ли число четным
function isEven(number) {
  return number % 2 === 0;
}

// Функция для приветствия человека
function createGreeting(name) {
  return `Hello, ${name}! Welcome to JavaScript.`;
}

// Демонстрация вызовов функций и возвращаемых значений
let rectangleArea = calculateRectangleArea(5, 3);
console.log(`Площадь прямоугольника: ${rectangleArea} квадратных единиц`);

let checkNumber = 6;
console.log(`Является ли ${checkNumber} четным? ${isEven(checkNumber)}`);

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

При запуске этого кода вы увидите следующий вывод:

Примерный вывод:
Площадь прямоугольника: 15 квадратных единиц
Является ли 6 четным? true
Hello, Alice! Welcome to JavaScript.

Основные моменты о функциях с параметрами и возвращаемыми значениями:

  • Параметры позволяют функциям принимать входные данные
  • Ключевое слово return возвращает значение из функции
  • Функции могут выполнять вычисления и возвращать результат
  • Возвращаемые значения могут использоваться в дальнейших вычислениях или логировании

Попробуйте экспериментировать, создавая собственные функции с разными параметрами и типами возвращаемых значений.

Практика реализации функций

В этом шаге вы будете практиковать реализацию функций, создав небольшую программу, которая демонстрирует различные приемы работы с функциями. Мы создадим простое приложение-калькулятор, чтобы укрепить ваше понимание реализации функций.

Откройте WebIDE и создайте новый файл с именем calculator.js в директории ~/project. Мы реализуем несколько математических функций:

// Функция для сложения двух чисел
function add(a, b) {
  return a + b;
}

// Функция для вычитания двух чисел
function subtract(a, b) {
  return a - b;
}

// Функция для умножения двух чисел
function multiply(a, b) {
  return a * b;
}

// Функция для деления двух чисел с обработкой ошибок
function divide(a, b) {
  if (b === 0) {
    return "Error: Division by zero";
  }
  return a / b;
}

// Функция для вычисления квадрата числа
function square(x) {
  return x * x;
}

// Демонстрация функций калькулятора
console.log("Addition: 5 + 3 =", add(5, 3));
console.log("Subtraction: 10 - 4 =", subtract(10, 4));
console.log("Multiplication: 6 * 7 =", multiply(6, 7));
console.log("Division: 15 / 3 =", divide(15, 3));
console.log("Square of 4 =", square(4));
console.log("Division by zero:", divide(10, 0));

При запуске этого кода вы увидите следующий вывод:

Примерный вывод:
Addition: 5 + 3 = 8
Subtraction: 10 - 4 = 6
Multiplication: 6 * 7 = 42
Division: 15 / 3 = 5
Square of 4 = 16
Division by zero: Error: Division by zero

Основные моменты о реализации функций:

  • Создайте функции с четкими, однозначными обязанностями
  • Используйте параметры, чтобы сделать функции гибкими
  • Реализуйте обработку ошибок, если необходимо
  • Тестируйте функции с разными входными данными
  • Используйте осмысленные имена функций и переменных

Попробуйте экспериментировать, добавляя больше математических функций или изменяя существующие.

Изучите вызов функций и вывод результатов

В этом шаге вы изучите разные способы вызова функций и различные приемы вывода результатов в JavaScript. Мы создадим полный пример, который демонстрирует несколько стратегий вызова функций и методов вывода.

Откройте WebIDE и создайте новый файл с именем function_output.js в директории ~/project:

// Функция для генерации персонального приветствия
function createGreeting(name, time) {
  return `Good ${time}, ${name}!`;
}

// Функция для вычисления общей стоимости с налогом
function calculateTotalPrice(price, taxRate = 0.1) {
  return price + price * taxRate;
}

// Функция с несколькими параметрами и значениями по умолчанию
function displayUserInfo(name, age = "Not specified", city = "Unknown") {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

// Демонстрация различных методов вызова функций
let morningGreeting = createGreeting("Alice", "morning");
console.log(morningGreeting);

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

let productPrice = 100;
let totalPrice = calculateTotalPrice(productPrice);
console.log(`Product Price: $${productPrice}`);
console.log(`Total Price (with tax): $${totalPrice}`);

// Вызов функции с разными комбинациями параметров
displayUserInfo("Charlie");
displayUserInfo("David", 30);
displayUserInfo("Eve", 25, "New York");

При запуске этого кода вы увидите следующий вывод:

Примерный вывод:
Good morning, Alice!
Good evening, Bob!
Product Price: $100
Total Price (with tax): $110
Name: Charlie
Age: Not specified
City: Unknown
Name: David
Age: 30
City: Unknown
Name: Eve
Age: 25
City: New York

Основные моменты о вызове функций и выводе результатов:

  • Функции можно вызывать с разным количеством аргументов
  • Значения параметров по умолчанию обеспечивают гибкость
  • Используйте шаблонные литералы для форматированного вывода
  • console.log() полезен для отображения результатов функции
  • Вы можете хранить возвращаемые значения функций в переменных

Попробуйте экспериментировать, создавая более сложные вызовы функций и сценарии вывода.

Резюме

В этом практическом занятии участники изучали основные концепции функций в JavaScript, узнавая, как определять, создавать и вызывать функции с различными характеристиками. Практическое занятие помогла ученикам понять основы функций, включая синтаксис функций, объявление и выполнение, с акцентом на создание повторно используемых блоков кода, которые могут выполнять определенные задачи.

В рамках обучения участники создавали простые функции без возвращаемых значений, реализовывали функции с параметрами и изучали, как функции могут быть использованы для организации логики программирования, вывода результатов и выполнения вычислений. 通过练习函数的实现和探索各种函数调用技术,参与者获得了编写模块化和高效 JavaScript 代码的实践技能。
При прохождении практики по реализации функций и изучению различных методов вызова функций участники приобрели навыки написания модульного и эффективного кода на JavaScript.