showDistance(12, 9);
showDistance(42, 21);
Не пугайтесь того, что этот код только что провернул на ваших глазах. Все просто: укороченный фрагмент кода выполнил ту же работу, что и множество строчек из рассмотренного ранее примера, но только без побочных действий. Мы узнаем о функциях все, в том числе как им удается так превосходно справляться со своей работой, и начнем мы прямо сейчас!
Поехали!
Что такое функция?
На самом базовом уровне функция — не более чем оболочка для некоего кода.
По сути функция:
• группирует инструкции;
• позволяет использовать код многократно.
Вы редко напишете или воспользуетесь кодом, в котором не будет функций, поэтому важно не только ознакомиться с ними, но и разобраться в тонкостях их правильной работы.
Простая функция
Лучший способ понять функции — это погрузиться в них и начать использовать. Поэтому создадим для начала самую простую функцию. Это не особо увлекательный процесс. Требуется лишь понимание некоторых особенностей синтаксиса вроде использования причудливых фигурных скобок и их собратьев.
Ниже приведен пример того, как выглядит простая функция:
function sayHello() {
alert("hello!");
}
Однако простого определения функции еще недостаточно, ее нужно также вызвать путем добавления следующих строк в конце:
function sayHello() {
alert("hello!");
}
sayHello();
Чтобы попрактиковаться, создайте новый HTML-документ (назовите его functions_sayhello.htm):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Say Hello!</title>
<style>
</style>
</head>
<body>
<script>
function sayHello() {
alert("hello!");
}
sayHello();
</script>
</body>
</html>
Если вы наберете этот текст полностью и просмотрите страницу в браузере, то увидите, как отобразится hello!. Это нужно сделать, чтобы убедиться, что наш код работает. Далее разберем, почему этот код сработал, а для этого разобьем функцию sayHello на несколько самостоятельных фрагментов и рассмотрим каждый из них подробнее.
Во-первых, мы видим ключевое слово function (рис. 3.3).
function sayHello() {
alert("hello!");
}
Рис. 3.3. Ключевое слово function
Это ключевое слово сообщает движку JavaScript, который живет в глубинах вашего браузера, что весь этот блок кода нужно рассматривать как связанный с функциями.
После ключевого слова function мы указываем актуальное имя функции и ставим после него открывающую и закрывающую скобки (), как показано на рис. 3.4.
function sayHello() {
alert("hello!");
}
Рис. 3.4. Имя функции и скобки
Завершая процесс объявления функции, нужно поставить открывающую и закрывающую фигурные скобки, внутри которых указываются нужные инструкции (рис. 3.5).
function sayHello() {
alert("hello!");
}
Рис. 3.5. Открывающая и закрывающая фигурные скобки
В заключение рассмотрим содержимое функции, а именно те инструкции, которые задают функциональность (рис. 3.6).
function sayHello() {
alert("hello!");
}
Рис. 3.6. Содержимое функции
В нашем примере содержимым является функция alert, отображающая диалоговое окно со словом hello!.
Последнее, что осталось рассмотреть, — это вызов функции (рис. 3.7).
function sayHello() {
alert("hello!");
}
sayHello();
Рис. 3.7. Вызов функции
Как правило, вызов функции — это имя той функции, которую мы хотим вызвать (как всегда, со скобками в конце). Без вызова функции она ничего не будет делать. Именно с вызовом наша функция просыпается и начинает что-то делать.
Вот мы и рассмотрели простейшую функцию. Далее, с опорой на только что пройденный материал, мы ознакомимся с более жизненными примерами функций.
Создание функции, принимающей аргументы
Предыдущий пример с sayHello слишком прост:
function sayHello() {
alert("hello!");
}
sayHello();
Мы вызываем функцию, и она производит определенные действия. Такое упрощение вполне нормально, потому что все функции работают одинаково. Отличия состоят лишь в особенностях того, как производится вызов функции, откуда в нее поступают данные и т. д. Первая особенность, которую мы рассмотрим, относится к функциям, принимающим аргументы.