JavaScript - funkcje

Funkcja to grupa kodu wielokrotnego użytku, który można wywołać w dowolnym miejscu programu. Eliminuje to konieczność wielokrotnego pisania tego samego kodu. Pomaga programistom w pisaniu kodów modułowych. Funkcje pozwalają programiście podzielić duży program na kilka małych i łatwych w zarządzaniu funkcji.

Jak każdy inny zaawansowany język programowania, JavaScript obsługuje również wszystkie funkcje niezbędne do pisania kodu modułowego przy użyciu funkcji. Musiałeś widzieć takie funkcje jakalert() i write()we wcześniejszych rozdziałach. Używaliśmy tych funkcji wielokrotnie, ale zostały one napisane w rdzeniu JavaScript tylko raz.

JavaScript pozwala nam również pisać własne funkcje. Ta sekcja wyjaśnia, jak pisać własne funkcje w JavaScript.

Definicja funkcji

Zanim użyjemy funkcji, musimy ją zdefiniować. Najczęstszym sposobem definiowania funkcji w JavaScript jest użycie rozszerzeniafunction słowo kluczowe, po którym następuje unikatowa nazwa funkcji, lista parametrów (która może być pusta) oraz blok instrukcji otoczony nawiasami klamrowymi.

Składnia

Tutaj pokazano podstawową składnię.

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

Przykład

Wypróbuj następujący przykład. Definiuje funkcję o nazwie sayHello, która nie przyjmuje parametrów -

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

Wywołanie funkcji

Aby wywołać funkcję gdzieś w dalszej części skryptu, wystarczy wpisać nazwę tej funkcji, jak pokazano w poniższym kodzie.

<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>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

Wynik

Parametry funkcji

Do tej pory widzieliśmy funkcje bez parametrów. Istnieje jednak możliwość przekazywania różnych parametrów podczas wywoływania funkcji. Te przekazane parametry można przechwycić wewnątrz funkcji i można na nich wykonać dowolną manipulację. Funkcja może przyjmować wiele parametrów oddzielonych przecinkami.

Przykład

Wypróbuj następujący przykład. Zmodyfikowaliśmy naszesayHellodziałają tutaj. Teraz przyjmuje dwa parametry.

<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>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

Wynik

Instrukcja return

Funkcja JavaScript może mieć opcjonalną returnkomunikat. Jest to wymagane, jeśli chcesz zwrócić wartość z funkcji. Ta instrukcja powinna być ostatnią instrukcją w funkcji.

Na przykład możesz przekazać dwie liczby w funkcji, a następnie możesz oczekiwać, że funkcja zwróci ich mnożenie w programie wywołującym.

Przykład

Wypróbuj następujący przykład. Definiuje funkcję, która przyjmuje dwa parametry i łączy je przed zwróceniem wyniku w programie wywołującym.

<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>

Wynik

Można się wiele nauczyć o funkcjach JavaScript, jednak omówiliśmy najważniejsze pojęcia w tym samouczku.

Funkcje zagnieżdżone JavaScript
Konstruktor funkcji () JavaScript
Literały funkcji JavaScript