Функции
Мы используем функции в большинстве наших JavaScript программ. Следовательно я расскажу относительно этого важного понятия сейчас.
В основном функции — путь для связывания нескольких команд вместе. Давайте напишем сценарий, который выводит некоторый текст три раза. Рассмотрите следующий подход:
<html>
<script language="JavaScript">
<!-- hide
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
// -->
</script>
</html>
Который выводит текст
Welcome to my homepage!
This is JavaScript!
три раза. Рассмотрите исходный текст — повторение кода три раза делает нужный результат. Но это очень эффективно? Нет, мы можем решить это лучшим способом. Посмотрите на этот код, который делает тоже самое:
<html>
<script language="JavaScript">
<!-- hide
function myFunction() {
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</script>
</html>
В этом сценарии мы определяем функцию. Это выполняется в следующих строках:
function myFunction() {
document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");
}
Команды внутри {} принадлежат функции
myFunction(). Это означает, что две наши команды
document.write() связаны вместе и могут быть выполнены через обращение к функции. В нашем примере мы имеем три обращения к функции. Вы видите, что мы пишем
myFunction() три раза, прямо ниже определения функции. Это три обращения к функции. Это означает, что содержание функции выполняется три раза.
Это очень простой пример функции. Вы можете задать вопрос, почему функции настолько важны. При чтении этого учебника вы конечно поймете выгоды функций. Особенно переменные делают наши сценарии действительно гибкими — мы увидим это позже.
Функции могут также использоваться в комбинации с обработчиками события. Пожалуйста рассмотрите этот пример:
<html>
<head>
<script language="JavaScript">
<!-- hide
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 в нём. .