Підпрограми в JavaScript

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук

Функції
У більшості наших програм на мові JavaScript ми будемо користуватися функціями. Тому вже тепер мені необхідно розповісти про це важливий елемент мови. У більшості випадків функції представляють собою лише спосіб зв'язати разом кількох команд. Давайте, наприклад, напишемо скрипт, що друкує якийсь текст три рази поспіль. Для початку розглянемо простий підхід:

<html>
<script language="JavaScript">
document.write("Добро пожаловать на мою страницу!");
document.write("Это JavaScript!");
document.write("Добро пожаловать на мою страницу!");
document.write(Это JavaScript!");
document.write("Добро пожаловать на мою страницу!");
document.write("Это JavaScript!");< </script> </html>


І такий скрипт напише наступний текст

Ласкаво просимо на мою сторінку! Це JavaScript!

три рази. Якщо подивитися на вихідний код скрипта, то видно, що для отримання необхідного результату певна частина його коду була повторена три рази. Хіба це ефективно? Ні, ми можемо вирішити ту ж завдання ще краще. Як щодо такого скрипта для вирішення тієї ж самої задачі?:

<html>
<script language="JavaScript">
function myFunction() {­
document.write("Добро пожаловать на мою страницу!");
document.write("Это JavaScript!");
}
myFunction();
myFunction();
myFunction();
</script>
</html>

У цьому скрипті ми визначили певну функцію, що складається з наступних рядків:

function myFunction() 
­nt.write("Добро пожаловать на мою страницу!");
document.write("Это JavaScript!"); }

Всі команди скрипта, що знаходяться усередині фігурних дужок - () - належать функції myFunction (). Це означає, що обидві команди document.write () тепер зв'язані воєдино і можуть бути виконані при виклику зазначеної функцf6іі. І деe5e5e5e5e5йствітельно, нашому прикладі є три виклики цієї функції - Можна побачити, що ми написали рядок myFunction () три рази відразу після того, як дали визначення самої функції. Те естькак раз і зробили три виклики. У свою чергу, це означає, що вміст цієї функції (команди, вказані в фігурних дужках) було виконано тричі. Оскільки це досить простий приклад використання функції, то у Вас міг виникнути питання, а чому, власне, ці функції настільки важливі в JavaScript. По прочитанні даного опису Ви звичайно ж зрозумієте їх користь. Саме можливість передачі змінних при виконанні функції надає нашим скриптам справжню гнучкість - що це таке, ми побачимо пізніше.

Функції можуть також використовуватися в спільно з процедурами обробки подій. Розглянемо наступний приклад:

<html>
<head>
<script language="JavaScript">
function calculation() {­
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>

Тут при натисненні на кнопку здійснюється виклик функції calculation (). Як можна помітити, ця функція виконує якісь обчислення, користуючись змінними x, y і result. Змінну ми можемо визначити за допомогою ключового слова var. Змінні можуть використовуватися для зберігання різних величин - чисел, рядків тексту і т.д. Так рядок скрипта var result = x + y; повідомляє браузеру про те, що необхідно створити змінну result і помістити туди результат виконання арифметичної операції x + y (тобто 5 + 12). Після цього в змінний result буде розміщено число 17. В даному випадку команда alert (result) виконує те ж саме, що й alert (17). Іншими словами, ми отримуємо випадає вікно, в якому написано число 17.