Відмінності між версіями «Підпрограми в JavaScript»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
 
(не показано 5 проміжних версій цього учасника)
Рядок 1: Рядок 1:
'''Функції'''<br>
+
<h1>Підпрограми</h1>
У більшості наших програм на мові JavaScript ми будемо користуватися функціями. Тому вже тепер мені необхідно розповісти про це важливий елемент мови. У більшості випадків функції представляють собою лише спосіб зв'язати разом кількох команд. Давайте, наприклад, напишемо скрипт, що друкує якийсь текст три рази поспіль. Для початку розглянемо простий підхід:
+
При створенні програми розумно виділити в ній логічно незалежні частини (підпрограми). Кожну частину при необхідності можна розбити на окремі підпрограми і т. д. Розбиття програми на підпрограми полегшує процес відлагодження, оскільки дозволяє відлагоджувати кожну підпрограму окремо. Один раз створену і відлагоджену підпрограму можна використовувати довільну кількість разів. У багатьох мовах програмування поняття підпрограми реалізується за допомогою конструкцій процедур, функцій, модулів і т.д. Основним елементом для реалізації підпрограм в мові JavaScript є функція.  
<code><font color="#0000BB">
+
<h1>Створення та використання функцій</h1>
   
+
В мові програмування JavaScript функції поділяються на іменовані функції та анонімні. Основна їх відмінність в тому, що доступ до іменованої функції можна отримати скрізь, а до анонімної - тільки після її оголошення.
<html>
+
<script language="JavaScript"><br>
+
document.write("Добро пожаловать на мою страницу!");<br>
+
document.write("Это JavaScript!");<br>
+
document.write("Добро пожаловать на мою страницу!");<br>
+
document.write(Это JavaScript!");<br>
+
document.write("Добро пожаловать на мою страницу!");<br>
+
document.write("Это JavaScript!");
+
</script>
+
</html>
+
  
</font></code><br>
+
'''Синтаксис оголошення іменованої функції'''<br/>
І такий скрипт напише наступний текст
+
<code>
 +
<font style="font-size:10pt">
 +
function <span style="color:green;">ім'я(параметри)</span><br/>  
 +
{
 +
<span style="color:green;">Тіло функції</span>
 +
}<br/>
 +
</font>
 +
</code>
  
Ласкаво просимо на мою сторінку!
+
'''Синтаксис оголошення анонімної функції'''<br/>
Це JavaScript!
+
<code>
 +
<font style="font-size:10pt">
 +
var <span style="color:green;">ім'я</span> = function(<span style="color:green;">параметри</span>)<br/>
 +
{
 +
<span style="color:green;">Тіло функції</span>
 +
}<br/>
 +
</font>
 +
</code>
  
три рази. Якщо подивитися на вихідний код скрипта, то видно, що для отримання необхідного результату певна частина його коду була повторена три рази. Хіба це ефективно? Ні, ми можемо вирішити ту ж завдання ще краще. Як щодо такого скрипта для вирішення тієї ж самої задачі?:
+
або<br/>
 +
<code>
 +
<font style="font-size:10pt">
 +
var <span style="color:green;">ім'я</span> = new Function(<span style="color:green;">параметри, 'Тіло функції'</span>)<br/>
 +
</font>
 +
</code>
  
<code><font color="#0000BB">
+
Причому синтаксис new Function використовується досить рідко, в основному для отримання функції з тексту, наприклад, динамічно завантаженого з сервера в процесі виконання скриптів.
<html>
+
<script language="JavaScript">
+
function myFunction() {­
+
document.write("Добро пожаловать на мою страницу!");
+
document.write("Это JavaScript!");
+
}
+
myFunction();
+
myFunction();
+
myFunction();
+
</script>
+
</html>
+
  
</font></code>
+
'''Приклад оголошення та використання іменованої функції'''<br/>
 +
<code>
 +
<font style="font-size:10pt">
 +
  <span style="color:green;">// функція sum визначена нижче її виклику.</span>
 +
  <span style="color:blue;">var</span> a = sum(1,1);<br/>
 +
  <span style="color:blue;">function</span> sum(x,y)
 +
  {
 +
  &nbsp;&nbsp;<span style="color:blue;">return</span> x+y;
 +
  }
  
У цьому скрипті ми визначили певну функцію, що складається з наступних рядків:
+
</font>
<code><font color="#0000BB">
+
</code>
  
function myFunction() <br>
+
'''Приклад оголошення та використання анонімної функції'''<br/>
  ­nt.write("Добро пожаловать на мою страницу!");<br>
+
<code>
document.write("Это JavaScript!");
+
<font style="font-size:10pt">
}
+
  <span style="color:green;">//При виконанні даного коду буде отримано помилку так як під час виклику
</font></code>
+
  //функція sum ще не оголошена</span>
 +
  <span style="color:blue;">var</span> a = sum(1,1);<br/>
 +
  <span style="color:blue;">var</span> sum = <span style="color:blue;">function</span>(x,y)
 +
  {
 +
  &nbsp;&nbsp;<span style="color:blue;">return</span> x+y;
 +
  }
 +
</font>
 +
</code>
  
Всі команди скрипта, що знаходяться усередині фігурних дужок - () - належать функції myFunction (). Це означає, що обидві команди document.write () тепер зв'язані воєдино і можуть бути виконані при виклику зазначеної функції. І дійсно, в нашому прикладі є три виклики цієї функції - можна побачити, що ми написали рядок myFunction () три рази відразу після того, як дали визначення самої функції. Тобто зробили три виклики. У свою чергу, це означає, що вміст цієї функції (команди, вказані в фігурних дужках) було виконано тричі. Оскільки це досить простий приклад використання функції, то у вас мігло виникнути питання, а чому, власне, ці функції настільки важливі в JavaScript. Після прочитання даного опису ви звичайно ж зрозумієте їх користь. Саме можливість передачі змінних при виконанні функції надає нашим скриптам справжню гнучкість - що це таке, ми побачимо пізніше.
+
<h1>Область видимості функції</h1>
 +
Змінні визначені всередині функції невидимі поза цією функцією, так як змінні визначаються в області видимості всередині функції. Будь-яка функція має доступ до всіх змінних та інших функцій які визначені у тій же області видимості де і сама функція була визначена. Іншими словами, функція визначена в глобальній області видимості має доступ до всіх змінних визначених у глобальній області видимості. Функція визначена всередині іншої функції має доступ до всіх змінних визначених у батьківській функції і будь-яких інших змінних до яких має доступ батьківська функція.
  
Функції можуть також використовуватися в спільно з процедурами обробки подій. Розглянемо наступний приклад:
+
'''Приклад'''<br/>
<code><font color="#0000BB">
+
<code>
 +
<font style="font-size:10pt">
 +
  <span style="color:green;">// Визначення змінних в глобальній області видимості</span>
 +
  <span style="color:blue;">var</span> num1 = 20,
 +
  &nbsp;&nbsp;num2 = 3,
 +
  &nbsp;&nbsp;name = "Test";
 +
  <span style="color:green;">// Ця функція визначена в глобальній області видимості</span>
 +
  <span style="color:blue;">function</span> multiply() {
 +
  &nbsp;&nbsp;<span style="color:blue;">return</span> num1 * num2;
 +
  }<br/>
 +
  multiply(); <span style="color:green;">// функція поверне 60</span><br/>
 +
  <span style="color:blue;">function</span> getScore () {
 +
  <span style="color:blue;">var</span> num1 = 2,
 +
  &nbsp;&nbsp;&nbsp;&nbsp;num2 = 3;
 +
  <span style="color:green;">//Приклад вкладеної функції</span>
 +
  &nbsp;&nbsp;<span style="color:blue;">function</span> add() {
 +
  &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">return</span> name + " scored " + (num1 + num2);
 +
  &nbsp;&nbsp;}
 +
  &nbsp;&nbsp;&nbsp;<span style="color:blue;">return</span> add();
 +
  }<br/>
 +
  getScore(); <span style="color:green;">// функція поверне "Test scored 5"</span>
  
<html><br>
+
</font>
<head><br>
+
</code>
<script language="JavaScript"><br>
+
<h1>Параметри функції</h1>
 +
Функції в JavaScript можна запускати з будь-яким числом параметрів.
 +
Якщо в функцію передано менше параметрів, ніж є у визначенні, то відсутні параметри отримують значення undefined.
  
function calculation() {­<br>
+
'''Приклад виклику функції з різною кількістю параметрів'''<br/>
var x= 12;<br>
+
<code>
var y= 5;<br>
+
<font style="font-size:10pt">
var result= x + y;<br>
+
  <span style="color:blue;">var</span> add = <span style="color:blue;">function</span>(x,y)
alert(result);<br>
+
  {
} <br>
+
  &nbsp;&nbsp;y = y||10;
</script><br>
+
  &nbsp;&nbsp;<span style="color:blue;">return</span> x+y;
</head><br>
+
  }<br/>
<body><br>
+
  <span style="color:green;">// 1) add(10)=>20
<form><br>
+
  // 2) add(10,2)=>12
<input type="button" value="Calculate" onClick="calculation()"><br>
+
  // 3) add(10,2,5,6,7)=>12
</form><br>
+
  // 4) add() => undefined + 10 =>NaN</span>
</body><br>
+
</html><br>
+
  
</font></code>
+
</font>
 +
</code>
 +
При першому запуску функція працює з аргументами х = 10, у = undefined. Зазвичай така ситуація, якщо вона підтримується функцією, передбачає значення за замовчуванням:<br/>
 +
<code>
 +
<font style="font-size:10pt">
 +
<span style="color:green;">// Якщо у – хибне значення (undefined, 0, false...) - підставити 10</span><br/>
 +
y = y || 10;<br/>
 +
</font>
 +
</code>
 +
Оператор | | в JavaScript повертає не true / false, а саме значення (перше, яке приводиться до true).
 +
Тому його використовують для задання значень за замовчуванням. У нашому виклику y буде обчислено як undefined | | 10 = 10. Тому результат буде 10+10 = 20.
 +
Другий запуск - стандартний.<br/>
 +
Третій запуск задає кілька додаткових аргументів. У функції не передбачена робота з додатковими аргументами, тому вони просто ігноруються.<br/>
 +
Ну і в останньому випадку аргументів взагалі немає, тому x = undefined, і маємо результат додавання undefined+10 = NaN (Not-A-Number, сталася помилка).<br/>
  
Тут при натисненні на кнопку здійснюється виклик функції calculation (). Як можна помітити, ця функція виконує якісь обчислення, користуючись змінними x, y і result. Змінну ми можемо визначити за допомогою ключового слова var. Змінні можуть використовуватися для зберігання різних величин - чисел, рядків тексту і т.д. Так рядок скрипта var result = x + y; повідомляє браузеру про те, що необхідно створити змінну result і помістити туди результат виконання арифметичної операції x + y (тобто 5 + 12). Після цього в змінний result буде розміщено число 17. В даному випадку команда alert (result) виконує те ж саме, що й alert (17). Іншими словами, ми отримуємо випадає вікно, в якому написано число 17.
+
'''Передача функції в якості параметра іншої функції'''<br/>
 
+
Слід зауважити що в якості параметра будь-якої функції можна передавати іншу функцію.<br/>
 
+
'''Приклад'''
 
+
<code>
 
+
<font style="font-size:10pt">
Перейти до [[Інтернет-програмування]]
+
  <span style="color:blue;">var</span> map = <span style="color:blue;">function</span>(func, arr) {
[[category:Інтернет-програмування|*]]
+
  <span style="color:blue;">var</span> result = [ ];
 
+
  &nbsp; <span style="color:blue;">for</span> ( <span style="color:blue;">var</span>  i=0; i<arr.length; i++)
[[category:Навчальні проекти]]
+
  &nbsp; &nbsp;{
 +
    &nbsp;&nbsp;result[i] = func(arr[i]);
 +
  &nbsp; &nbsp;}
 +
  &nbsp; &nbsp; &nbsp; <span style="color:blue;">return</span>  result;
 +
  }
 +
</font>
 +
</code>
 +
В даному прикладі функція map бере функцію func, і застосовує її до кожного елементу масиву arr і повертає результуючий масив.<br/>
 +
'''Приклади використання:'''<br/>
 +
<code>
 +
<font style="font-size:10pt">
 +
map(func, [1, 2, 3]);<br/>
 +
</font>
 +
</code>
 +
Або можна створити анонімну функцію прямо під час виклику map<br/>
 +
<code>
 +
<font style="font-size:10pt">
 +
map( <span style="color:blue;">function</span> (a) { <span style="color:blue;">return</span> a*3 } ,  [1,2,3]
 +
<span style="color:green;">// = [3,6,9]</span><br/>
 +
</font>
 +
</code>

Поточна версія на 16:10, 19 травня 2013

Підпрограми

При створенні програми розумно виділити в ній логічно незалежні частини (підпрограми). Кожну частину при необхідності можна розбити на окремі підпрограми і т. д. Розбиття програми на підпрограми полегшує процес відлагодження, оскільки дозволяє відлагоджувати кожну підпрограму окремо. Один раз створену і відлагоджену підпрограму можна використовувати довільну кількість разів. У багатьох мовах програмування поняття підпрограми реалізується за допомогою конструкцій процедур, функцій, модулів і т.д. Основним елементом для реалізації підпрограм в мові JavaScript є функція.

Створення та використання функцій

В мові програмування JavaScript функції поділяються на іменовані функції та анонімні. Основна їх відмінність в тому, що доступ до іменованої функції можна отримати скрізь, а до анонімної - тільки після її оголошення.

Синтаксис оголошення іменованої функції
function ім'я(параметри)
{ Тіло функції }

Синтаксис оголошення анонімної функції
var ім'я = function(параметри)
{ Тіло функції }

або
var ім'я = new Function(параметри, 'Тіло функції')

Причому синтаксис new Function використовується досить рідко, в основному для отримання функції з тексту, наприклад, динамічно завантаженого з сервера в процесі виконання скриптів.

Приклад оголошення та використання іменованої функції

 // функція sum визначена нижче її виклику.
 var a = sum(1,1);
function sum(x,y) {   return x+y; }

Приклад оголошення та використання анонімної функції

 //При виконанні даного коду  буде отримано помилку так як під час виклику
 //функція sum ще не оголошена
 var a = sum(1,1);
var sum = function(x,y) {   return x+y; }

Область видимості функції

Змінні визначені всередині функції невидимі поза цією функцією, так як змінні визначаються в області видимості всередині функції. Будь-яка функція має доступ до всіх змінних та інших функцій які визначені у тій же області видимості де і сама функція була визначена. Іншими словами, функція визначена в глобальній області видимості має доступ до всіх змінних визначених у глобальній області видимості. Функція визначена всередині іншої функції має доступ до всіх змінних визначених у батьківській функції і будь-яких інших змінних до яких має доступ батьківська функція.

Приклад

 // Визначення змінних в глобальній області видимості
 var num1 = 20,
   num2 = 3,
   name = "Test"; 
 // Ця функція визначена в глобальній області видимості
 function multiply() {
   return num1 * num2;
 }
multiply(); // функція поверне 60
function getScore () { var num1 = 2,     num2 = 3; //Приклад вкладеної функції   function add() {     return name + " scored " + (num1 + num2);   }    return add(); }
getScore(); // функція поверне "Test scored 5"

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

Функції в JavaScript можна запускати з будь-яким числом параметрів. Якщо в функцію передано менше параметрів, ніж є у визначенні, то відсутні параметри отримують значення undefined.

Приклад виклику функції з різною кількістю параметрів

 var add = function(x,y)
 {
   y = y||10;
   return x+y;
 }
// 1) add(10)=>20 // 2) add(10,2)=>12 // 3) add(10,2,5,6,7)=>12 // 4) add() => undefined + 10 =>NaN

При першому запуску функція працює з аргументами х = 10, у = undefined. Зазвичай така ситуація, якщо вона підтримується функцією, передбачає значення за замовчуванням:
// Якщо у – хибне значення (undefined, 0, false...) - підставити 10
y = y || 10;
Оператор | | в JavaScript повертає не true / false, а саме значення (перше, яке приводиться до true). Тому його використовують для задання значень за замовчуванням. У нашому виклику y буде обчислено як undefined | | 10 = 10. Тому результат буде 10+10 = 20. Другий запуск - стандартний.
Третій запуск задає кілька додаткових аргументів. У функції не передбачена робота з додатковими аргументами, тому вони просто ігноруються.
Ну і в останньому випадку аргументів взагалі немає, тому x = undefined, і маємо результат додавання undefined+10 = NaN (Not-A-Number, сталася помилка).

Передача функції в якості параметра іншої функції
Слід зауважити що в якості параметра будь-якої функції можна передавати іншу функцію.
Приклад

 var map = function(func, arr) {
 var result = [ ];
    for ( var  i=0; i<arr.length; i++) 
     {
     result[i] = func(arr[i]);
     }
        return  result;
 }

В даному прикладі функція map бере функцію func, і застосовує її до кожного елементу масиву arr і повертає результуючий масив.
Приклади використання:
map(func, [1, 2, 3]);
Або можна створити анонімну функцію прямо під час виклику map
map( function (a) { return a*3 } , [1,2,3]) // = [3,6,9]