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

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

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

Определение функции

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

Синтаксис

Здесь показан основной синтаксис.

<script type="text/javascript">
   <!--
      function functionname(parameter-list)
      {
         statements
      }
   //-->
</script>
пример

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

<script type="text/javascript">
   <!--
      function sayHello()
      {
         alert("Hello there");
      }
   //-->
</script>

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

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

<html>
   <head>
  
      <script type="text/javascript">
         function sayHello()
         {
            document.write ("Hello there!");
         }
      </script>
     
   </head>
   <body>
      <p>Click the following button to call the function</p>
     
      <form>
         <input type="button" onclick="sayHello()" value="Say Hello">
      </form>
      
  
   </body>
</html>

Параметры функции

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

пример

Попробуйте следующий пример. Здесь мы изменили функцию sayHello. Теперь он принимает два параметра.

<html>
   <head>
  
      <script type="text/javascript">
         function sayHello(name, age)
         {
            document.write (name + " is " + age + " years old.");
         }
      </script>
     
   </head>
   <body>
      <p>Click the following button to call the function</p>
     
      <form>
         <input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
      </form>
     
  
   </body>
</html>

Заявление о возврате

Функция JavaScript может иметь необязательный оператор return. Это необходимо, если вы хотите вернуть значение из функции. Это утверждение должно быть последним в функции.

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

пример

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

<html>
   <head>
     
      <script type="text/javascript">
         function concatenate(first, last)
         {
            var full;
            full = first + last;
            return full;
         }
        
         function secondFunction()
         {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>
     
   </head>
  
   <body>
      <p>Click the following button to call the function</p>
     
      <form>
         <input type="button" onclick="secondFunction()" value="Call Function">
      </form>
     
      <p>Use different parameters inside the function and then try...</p>
 
  </body>
</html>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok