Как написать функцию в JavaScript

Функция в JavaScript — это блок кода, содержащий группу инструкций для выполнения определенной задачи. Другими словами, функция группирует ряд программных инструкций в единый блок для выполнения определенной задачи.

Например, write() — это встроенная функция JavaScript, которая используется для печати инструкции. Функция не выполняется до тех пор, пока она не будет вызвана. То есть функция будет выполняться, когда «кто-то» вызовет ее.

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

В программировании на JavaScript мы можем определять наши собственные функции, называемые пользовательскими функциями, а также использовать встроенные функции, уже определенные в JavaScript. Например, мы использовали встроенные функции, такие как:

• document.write()
• window.alert()
• parseInt()

Когда использовать функцию в JavaScript?

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

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

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

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

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

Объявление синтаксиса функции JavaScript

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

Мы определяем функцию с помощью ключевого слова function, за которым следует уникальное имя функции, список параметров (который может быть пустым или необязательным) и блок инструкций, заключенный в фигурные скобки и содержащий связанный с ними код.

Общий синтаксис для объявления функции в JavaScript следующий:

Function nameOfFunction(parameters-list)
{
  // Lines of code to be executed to perform a specific task.
}

Из приведенного выше синтаксиса,

1. nameOfFunction должно быть сразу после ключевого слова function, как показано на рисунке.

2. Все имена функций должны быть уникальными. Имена функций также не должны конфликтовать с зарезервированными словами, которые использует сам JavaScript. Например, вы не можете определить функцию с именем while. Вы не должны определять две функции с одинаковым отображением имен в программе.

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

4. Список параметров (parameter1, parameter2,… parameterN) — это набор локальных переменных, которые получают значения, передаваемые функции при вызове функции. То есть параметры функции получают значения аргументов, когда ее кто-то вызывает. Мы можем передавать разные значения аргументов при ее вызове. Мы можем использовать значения переданных значений внутри функции JavaScript, и мы также можем выполнять манипуляции с этими аргументами.

5. Функция может возвращать значение, но оператор return необязателен.

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

<script>
  function sayHello() {
     document.write("hello!");
   }
</script>

В этом примере имя функции — sayHello. Список параметров пуст, что указывает на то, что функция не получает никакого значения аргумента.

Примечание: В JavaScript чувствителен к регистру. Ключевое слово функции необходимо писать строчными буквами.

Типы функций в JavaScript

В JavaScript, как и в любом другом языке программирования, таком как C, C ++ и Java, есть два типа функций.

1. Предопределенные функции
2. Пользовательские функции

В этом руководстве мы сосредоточимся на пользовательских функциях.

Предопределенные функции в JavaScript

В JavaScript встроены сотни предопределенных функций для выполнения различных задач. Ниже приведены некоторые из важных предопределенных функций.:

1. alert(): Эта функция отображает диалоговое окно предупреждения в браузере.

2. confirm(): Эта функция отображает диалоговое окно подтверждения и просит пользователя выбрать один из двух вариантов.

3. prompt(): Функция prompt() отображает диалоговое окно prompt в браузере и предлагает пользователю ввести входные данные.

4. write(): Функция write(), используемая для записи чего-либо в документе.

5. Date(): Эта функция используется для получения текущей даты и времени.

6. select(): Функция select(), используемая для выбора указанного объекта.

7. parseInt(numString): Эта функция преобразует строку в целое число.

8. parseFloat(numString, radix): Эта функция преобразует строку в число с плавающей запятой.

9. sqrt(число): Эта функция используется для получения квадратного корня из любого числа.

10. pow(число): используется для получения степени целого числа.

Это несколько примеров встроенных функций «верхнего уровня» в JavaScript. Мы узнаем больше о встроенных функциях в следующих руководствах.

Пользовательские функции в JavaScript

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

Синтаксис для определения пользовательской функции показан в предыдущем разделе.

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

Вызов функции в JavaScript

Для того, чтобы запустить или исполнить набор инструкций (код) в функциональном блоке (т.Е. Тело функции), нам придется вызвать функцию явно.

То есть код внутри функции будет выполняться при вызове функции. Вызов функции известен как вызов функции в JavaScript.

Без вызова функции созданная функция ничего не делает. То есть функция не будет выполнять код внутри блока функции.

Чтобы вызвать функцию в программе на JavaScript, просто напишите ее имя, а за ним пару открывающих и закрывающих круглых скобок. Общий синтаксис вызова функции в JavaScript следующий:

functionName([arguments]);
For example:
    sayHello();

Вызов sayHello() выполняет тело функции, которое является document.write("hello!");, и в следующей строке отобразится текст: hello!.

Существует несколько сценариев, в которых мы можем вызвать функцию в программе JavaScript. Это:

а) Когда происходит событие. То есть когда пользователь нажимает кнопку.

б) Когда функция вызывается (т.е. вызывается) из другой функции JavaScript.

c) Автоматически (вызывается самостоятельно).

Примечание: Имена функций в JavaScript чувствительны к регистру. Если вы определяете функцию с именем Display с заглавной буквы, убедитесь, что вы используете то же имя при вызове функции, иначе функция не будет работать. Например, если мы определяем функцию с именем Display(), то вызываем ее с помощью Display().

Пример программы, основанной на функции JavaScript

Давайте создадим программу на JavaScript, в которой мы определим пользовательскую функцию для отображения сообщения в разделе head веб-страницы HTML. Мы вызовем функцию позже в элементе script в разделе body веб-страницы.

Пример 1:

<html>
<head>
   <title>Functions in JavaScript</title>
<script>
   var msg = "Welcome to html-templates.info"; 
// Function declaration. 
   function display() { 
     document.write(msg); // It will print statement in web browser. 
   }
</script>
</head>
<body>
<script>
  display(); // Calling function.
</script>
</body>
</html>

В предыдущей программе мы создали функцию с именем display(), в которой мы написали инструкцию для отображения сообщения «Добро пожаловать на html-templates.info» с помощью document.write();.

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

Вывод:
 Добро пожаловать на html-templates.info

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

Давайте возьмем пример программы, в которой мы создадим функцию и вызовем ее, когда нажмем на кнопку. Она просто напечатает инструкцию в окне браузера.

Пример 2:

<html>
<head>
  <title>Function Definition and Calling</title>
<script>
var msg = "Welcome to Scientech Easy, Dhanbad";
// Function declaration.
function display() {
document.write(msg); // It will print statement in web browser.
}
</script>
</head>
<body>
    <p>Please, click on the button to call a function</p>
    <input type = "button" onclick = "display()" value = "Click me">
</body>
</html>

Когда мы выполняем приведенный выше HTML-код, в окне браузера будет отображаться следующий вывод.

Вывод:
 Добро пожаловать в Scientech Easy, Дханбад

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

Вызов функций из других функций в JavaScript

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

Итак, мы можем разбить слишком много строк кода на отдельные функции меньшего размера, а затем вызвать их из одной основной функции. С этого было бы легче читать.

Давайте создадим программу на JavaScript, в которой мы будем вызывать функции внутри одной основной функции.

Пример 3:

<html>
<head>
  <title>Calling functions from other functions.</title>
<script>
// Function 1.
   function runFirst() {
     document.write("function 1", "<br>");
   }
// Function 2.
  function runSecond() {
    document.write("function 2", "<br>");
  }
// Function 3.
  function runThird() {
    document.write("function 3");
  }
// Calling functions inside from function.
  function main() {
   runFirst();
   runSecond();
   runThird();
  }
</script>
</head>
<body>
  <p>Please, click on the button to call main function</p>
  <input type = "button" onclick = "main()" value = "Click me">
</body>
</html>

Вывод: 
 функция 1 
 функция 2 
 функция 3

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

Пример 4:

<html>
<head>
   <title>Calling functions from other functions.</title>
<script>
// Variable declaration.
  let x = 20;
  let y = 30;
// Function 1.
  function addition() {
    let sum = x+y;
    document.write("Sum = " +sum, "<br>");
   }
// Function 2.
  function subtraction() {
    let sub = x - y;
    document.write("Sub = " +sub, "<br>");
  }
// Function 3.
  function multiplication() {
   let multiply = x * y;
   document.write("Multiply = "+multiply, "<br>");
  }
// Function 4.
  function division() {
    let div = x/y;
    document.write("Div = " +div);
  }
// Calling functions inside from function.
  function main() {
    addition();
    subtraction();
    multiplication();
    division();
  }
 main(); // calling function.
</script>
</head>
<body>
</body>
</html>

Вывод:
 Sum = 50
 Sub = -10
 Multiply = 600
 Div = 0.666666

Самозапускающиеся функции

Мы также можем сделать выражение функции «самозапускающимся или самоисполняющимся». Мы можем сделать это, заключив всю функцию в круглые скобки { } и добавив оператор круглых скобок () в конце выражения.

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

(function() {
// code to be executed.
})();

Самозапускающиеся функции широко используются для выполнения кода, когда скрипт загружается браузером. Мы не можем самостоятельно вызывать объявление функции.

Давайте рассмотрим пример программы, основанной на самозапускающейся функции в JavaScript.

Пример 5:

<html>
<head>
   <title>Self-invoking function</title>
<script>
  (function() {
      document.write("Hello! I invoked myself");
   })();
</script>
</head>
<body>
</body>
</html>

Вывод:
 Привет! Я вызвал себя

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