Руководство по HTML5
Адам Фриман
Определение и использование функций
Если вы определите выражение непосредственно в элементе script
, как я сделал это раньше в листинге 5-2, браузер будет выполнять эти выражения, как только он их достигнет. В качестве альтернативы вы можете упаковать несколько выражений в функцию, которая не будет выполнена, пока браузер не столкнется с выражением, которое вызывает эту функцию, как показано в листинге 5-3.
Листинг 5-3: Определение JavaScript функции
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myFunc() {
document.writeln("This is a statement");
};
myFunc();
</script>
</body>
</html>
Выражения, содержащиеся в функции, заключаются в фигурные скобки ({
и }
) и называются блоком кода. В этом листинге определена функция с именем myFunc
, которая содержит одно выражение в блоке кода. JavaScript является регистрозависимым языком, это обозначает, что ключевое слово function
должно быть написано в нижнем регистре. Выражение в функции не будет выполнено, пока браузер не достигнет еще одного выражения, которое вызывает функцию myFunc
, например:
myFunc();
Этот пример не особенно полезен, потому что функция вызывается сразу же после того, как она была определена. Вы можете увидеть примеры, когда функции гораздо более полезны, когда мы обратимся к событиям далее в этой главе.
Определение функций с параметрами
Как и большинство языков программирования, JavaScript позволяет определить параметры для функции, как показано в листинге 5-4.
Листинг 5-4: Определение функций с параметрами
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myFunc(name, weather) {
document.writeln("Hello " + name + ".");
document.writeln("It is " + weather + " today");
};
myFunc("Adam", "sunny");
</script>
</body>
</html>
В этом листинге я добавил два параметра функции myFunc
: name
и weather
. JavaScript является слабо типизированным языком, то есть вы не должны объявлять тип данных параметров при определении функций. Я вернусь к свободной типизации далее в этой главе, когда мы обратимся к переменным JavaScript. Чтобы вызвать функцию с параметрами, вы добавляете значения в качестве аргументов при вызове функции, например:
myFunc("Adam", "sunny");
Результаты выполнения этого скрипта следующие:
Hello Adam. It is sunny today
Количество аргументов, используемых при вызове функции, не обязательно должно совпадать с числом параметров в функции. Если вы вызываете функцию с меньшим количеством аргументов, чем она имеет параметров, значение любого параметра, для которого вы не предоставили значения, будет не определено. Если вы вызываете функцию с большим количеством аргументов, чем у нее есть параметров, дополнительные аргументы просто игнорируются. Следствием этого является то, что вы не можете создать две функции с тем же именем и различными параметрами и ожидать, что JavaScript будет различать их по аргументам, которые вы предоставляете при вызове функции. Если вы определите две функции с тем же именем, второе определение заменит первое.
Определение функций, которые возвращают результат
Можно вернуть результат функции, используя ключевое слово return
. В листинге 5-5 показана функция, которая возвращает результат.
Листинг 5-5: Возвращение результата функции
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myFunc(name) {
return ("Hello " + name + ".");
};
document.writeln(myFunc("Adam"));
</script>
</body>
</html>
Эта функция определяет один параметр и использует его, чтобы сгенерировать простой результат. Я вызвал функцию и отправил ее результат в качестве аргумента функции document.writeln
:
document.writeln(myFunc("Adam"));
Обратите внимание, что вам не нужно объявлять, что функция будет возвращать результат, а также указывать тип данных результата. Результат работы данного кода будет следующим:
Hello Adam.