Изучаем функции в JavaScript

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

Содержание

Объявление и вызов функции JS

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

function ''имя'' ( ''аргумент1'', ''аргумент2'', ''аргумент3'' ... )
{
           ''операторы''
           return ''значение''
}

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

В следующем примере показана функция, определяемая в разделе <head> HTML-страницы и вызываемая в разделе <body>:

<html>
<head>
<title>Простой пример функции JavaScript</title>
<script language="JavaScript">

function sayHello()
{
      alert("Привет!");
}
</script>
</head>
<body>
<script language="JavaScript">
sayHello();
</script>
</body>
</html>
JavaScript - Функции

Передача аргументов в функцию JS

В приведенном выше примере (script type text JavaScript function) функции не передается никакие аргументы. Обычно функция предназначена для выполнения каких-либо действий с несколькими аргументами:

<html>
<head>
<title>Простой пример функции JavaScript</title>
<script language="JavaScript">

function sayHello( day, month)
{
      alert("Привет! Сегодня " + day + " " + month);
}
</script>
</head>

<script language="JavaScript">
sayHello( "24", "Июля" );
sayHello ( "1", "Августа" );
sayHello ( "24", "Мая" );
</script>

</body>
</html>

В этом примере JavaScript callback function вызывается несколько раз, принимая аргументы, которые затем используются для создания строки, отображаемой в диалоговом окне. Чтобы сделать это без функции, нужно было бы повторить скрипт в разделе <body> три раза. Очевидно, что использование функции является более эффективным подходом.

Функции JavaScript – интересно и важно

Возврат значения из функции JS

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

<html>
<head>
<title>Простой пример функции JavaScript</title>
<script language="JavaScript">
function addValues( value1, value2)
{
      return value1 + value2;
}
</script>
</head>
<script language="JavaScript">
var result = addValues( 10, 20)
document.write ( "Результат = " + result);
</script>
</body>
</html>

В приведенном выше примере мы передаем в функцию addValues значения 10 и 20. Функция addValues складывает эти два значения и возвращает результат. Оператор return присваивает результат переменной result, которая затем используется для создания строки, выводимой на HTML-странице.

Вызов JavaScript function может быть выполнен в разных местах. Например, не обязательно присваивать результат в качестве значения переменной. Можно использовать его непосредственно в качестве аргумента при вызове document.write.

Важно отметить, что функция может возвращать только одно значение:

<html>
<head>
<title>Простой пример функции JavaScript</title>
<script language="JavaScript">
function addValues( value1, value2)
{
      return value1 + value2;
}
</script>
</head>
<script language="JavaScript">
document.write ( "Результат = " + addValues( 10, 20));
</script>
</body>
</html>
JavaScript onclick function также могут использоваться в условных выражениях. Например:
<html>
<head>
<title>Простой пример функции JavaScript</title>
<script language="JavaScript">
function addValues( value1, value2)
{
      return value1 + value2;
}
</script>
</head>
<script language="JavaScript">
if (addValues( 10, 20) > 20)
{
      document.write ( "Результат > 20");
}
else
{
      document.write ( "Результат < 20");
}
</script>
</body>
</html>

Где размещать объявления функций JS

Есть два места, в которых рекомендуется размещать объявления JavaScript function return: внутри раздела <head> HTML-документа или во внешнем файле .js. Наиболее предпочтительным местом считается второй вариант, так как он обеспечивает наибольшую гибкость.

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

Пожалуйста, оставляйте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, подписки, лайки!