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

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
Рядок 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><br/>
 +
<span style="color:blue;">var</span> a = sum(1,1);<br/>
  
−
У цьому скрипті ми визначили певну функцію, що складається з наступних рядків:
+
<span style="color:blue;">function</span> sum(x,y)<br/>
−
<code><font color="#0000BB">
+
{<br/>
 +
&nbsp;&nbsp;<span style="color:blue;">return</span> x+y;<br/>
 +
}<br/>
  
−
function myFunction() <br>
+
</font>
−
­nt.write("Добро пожаловать на мою страницу!");<br>
+
</code>
−
document.write("Это JavaScript!");
+
−
}
+
−
</font></code>
+
  
−
Всі команди скрипта, що знаходяться усередині фігурних дужок - () - належать функції myFunction (). Це означає, що обидві команди document.write () тепер зв'язані воєдино і можуть бути виконані при виклику зазначеної функції. І дійсно, в нашому прикладі є три виклики цієї функції - можна побачити, що ми написали рядок myFunction () три рази відразу після того, як дали визначення самої функції. Тобто зробили три виклики. У свою чергу, це означає, що вміст цієї функції (команди, вказані в фігурних дужках) було виконано тричі. Оскільки це досить простий приклад використання функції, то у вас мігло виникнути питання, а чому, власне, ці функції настільки важливі в JavaScript. Після прочитання даного опису ви звичайно ж зрозумієте їх користь. Саме можливість передачі змінних при виконанні функції надає нашим скриптам справжню гнучкість - що це таке, ми побачимо пізніше.
+
'''Приклад оголошення та використання анонімної функції'''<br/>
 +
<code>
 +
<font style="font-size:10pt">
 +
<span style="color:green;">//При виконанні даного коду  буде отримано помилку так як під час виклику<br/>
 +
//функція sum ще не оголошена<br/></span>
  
−
Функції можуть також використовуватися в спільно з процедурами обробки подій. Розглянемо наступний приклад:
+
<span style="color:blue;">var</span> a = sum(1,1);<br/>
−
<code><font color="#0000BB">
+
  
−
<html><br>
+
<span style="color:blue;">var</span> sum = <span style="color:blue;">function</span>(x,y)<br/>
−
<head><br>
+
{<br/>
−
<script language="JavaScript"><br>
+
&nbsp;&nbsp;<span style="color:blue;">return</span> x+y;<br/>
−
 
+
}<br/>
−
function calculation() {­<br>
+
</font>
−
var x= 12;<br>
+
</code>
−
var y= 5;<br>
+
−
var result= x + y;<br>
+
−
alert(result);<br>
+
−
} <br>
+
−
</script><br>
+
−
</head><br>
+
−
<body><br>
+
−
<form><br>
+
−
<input type="button" value="Calculate" onClick="calculation()"><br>
+
−
</form><br>
+
−
</body><br>
+
−
</html><br>
+
−
 
+
−
</font></code>
+
−
 
+
−
Тут при натисненні на кнопку здійснюється виклик функції calculation (). Як можна помітити, ця функція виконує якісь обчислення, користуючись змінними x, y і result. Змінну ми можемо визначити за допомогою ключового слова var. Змінні можуть використовуватися для зберігання різних величин - чисел, рядків тексту і т.д. Так рядок скрипта var result = x + y; повідомляє браузеру про те, що необхідно створити змінну result і помістити туди результат виконання арифметичної операції x + y (тобто 5 + 12). Після цього в змінний result буде розміщено число 17. В даному випадку команда alert (result) виконує те ж саме, що й alert (17). Іншими словами, ми отримуємо випадає вікно, в якому написано число 17.
+
−
 
+
−
 
+
−
 
+
−
 
+
−
Перейти до [[Інтернет-програмування]]
+
−
[[category:Інтернет-програмування|*]]
+
−
 
+
−
[[category:Навчальні проекти]]
+

Версія за 14:11, 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;
}

Отримано з https://wiki.cusu.edu.ua/index.php?title=Підпрограми_в_JavaScript&oldid=96350