Функции
В большинстве программ на JavaScript мы будем пользоваться функциями. Рассмотрим пример и напишем скрипт, который будет выводить текст, причем один и тот же текст будет выводиться три раза. Вот возможный вариант программы:
Задание:
Написать Java-скрипт выводящий на экран следующие строки:
Добро пожаловать!
Это JavaScript
Добро пожаловать!
Это JavaScript
Добро пожаловать!
Это JavaScript
Выплнение:
создать новый HTML-документ;
поместить в тело документа следующие строки:
<script language="JavaScript">
<!-- hide
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
document.write ("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
// -->
</script>
сохранить html-документ;
проверить работу скрипта, открыв созданный html-документ в браузере.
Пояснение:
В результате выполнения Java-скрипта в окне браузера будет выведен следующий текст:
Добро пожаловать!
Это JavaScript!
Этот текст будет выведен три раза. Насколько это эффективно? Можно решить эту задачу более удобным способом. Ниже приводится другой вариант решения задачи.
Задание:
Изменить Java-скрипт таким образом, чтобы в окне браузера выводился текст из предыдущего задания, но при этом использовать заранее описаную функцию.
Выполнение:
открыть в редакторе HTML-документ созданный в результате выполнения предыдущего задания;
изменить Java-скрипт в HTML-документе в соответствии с приведенным ниже исходным текстом:
<html>
<body>
<script language="JavaScript">
<!-- hide
function myFunction() {
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>") ;
}
myFunction();
myFunction() ;
myFunction() ;
// -->
</script>
</body>
</html>
3) сохранить html-документ;
4) проверить работу скрипта, открыв созданный html-документ в браузере.
Пояснение:
Так выглядит окно браузера после загрузки скрипта, содержащего описанную выше функцию.
Рисунок 2 – Результат выполнения скрипта.
В этом Java-скрипте мы использовали функцию. Для определения функции нам понадобилось три строчки:
function myFunction() {
document.write("Добро пожаловать!<br>") ;
document.write("Это JavaScript!<br>");
}
Строки, помещенные между операторных скобок { }, составляют команды, содержащиеся в функции myFunction(). Это значит, что две используемых нами строки document.write() объединяются в одно целое, и они могут быть выполнены совместно при помощи обращении к функции. В нашей программе мы обращаемся к функции три раза, то есть три раза написали myFunction() после того, как определили эту функцию. Мы три раза вызвали функцию, т.е. содержание функции будет исполнено три раза. Это был пример очень простой функции.
Функции также можно использовать в сочетании со средствами управления событиями. Рассмотрим пример в следующем задании.
Задание:
Создать функцию, вычисляющую сумму чисел 12 и 5 при нажатии на кнопку расположенную в html-документе.
Выполнение:
1) создать html-документ;
2) разместить в документе кнопку с надписью Вычислить, поместив между тегами <body> следующий текст:
<form>
<input type="button" value="Вычислить" onClick="calculation()">
</form>
3) добавить в html-документ скрипт содержащий следующую функцию:
function calculation()
{
var x= 12;
var y= 5;
var result= x + y;
alert (result) ;
}
Пояснение:
Ниже приведено изображение окна браузера и диалогового окна, содержащего результат вычислений функции, после нажатия на кнопку "Вычислить".
Нажатая кнопка заставляет компьютер выполнить функцию calculation(). Эта функция производит определенные вычисления с переменными x, у и result. Мы можем определить переменные с помощью специального слова var. Переменные могут использоваться для хранения различных величин, например для хранения чисел, текстовых строк и т.д.
Рисунок 3 – Результат выполнения скрипта.
Строка программы var result= x + у; сообщает браузеру, что необходимо создать переменную result и в этой переменной сохранять значение, равное сумме значений переменных х + у ( т . е . 5 + 12).
После выполнения этой функции переменная result будет содержать число 17. Команда alert(result) в этом случае эквивалентна команде alert(17). Мы видим всплывающее окно, в котором записано число 17.