Главная страница   /   5.3. Определение и использование функций (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

5.3. Определение и использование функций

Если вы определите выражение непосредственно в элементе 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.