Урок №7: функции в JavaScript

В JavaScript функции необходимы для оптимизации, а также уменьшения кода. Благодаря функциям код приобретает более читабельный вид, что значительно упрощает работу. Рекомендуется использовать функции при создании сайта, так как не исключено, что сайт будет разрабатывается одним программистом, а поддерживаться другим. А без функций, тех. поддержке будет очень сложно разобраться в программных кодах JavaScript.

Поэтому функции относятся к фундаментальным конструкциям в JavaScript. Функцией называется группа связанных между собой операторов JavaScript, перед которыми стоит цель, выполнять определенные задачи.

---

Синтаксис функции

Синтаксис стандартной функции выглядит примерно так:

function name_function(параметры, аргументы)
{ инструкции, операторы JavaScript }

Рассмотрим подробнее составляющие функции:

• function – важное ключевое слово JavaScript, которое объявляет функцию.
• name_function – название функции, необходимо задавать уникальные названия, (допустимые символы: цифры, латинские буквы, подчеркивание _ и не должно начинаться с цифр.)
• параметры, аргументы – функция использует аргументы при вычислении. Даже если нет необходимости использовать аргументы, скобки необходимо указывать всегда. Если функция имеет несколько аргументов, их необходимо задавать через запятую. Довольно часто в качестве аргументов можно увидеть переменные.
• инструкции, операторы JavaScript – тело функции или блок кода. Этот блок используется при каждом обращении к функции

В HTML функция должна заключаться между парными тегами script. Функция может быть расположена в любом месте веб-страницы, но предпочтительнее располагать функции в контейнере Head.

---

Примеры функций

Рассмотрим пример простейшей функции, сначала создадим функцию:

function messageWindow() {
alert('Данный текст был выведен на страницу с помощью JavaScript!');
}

Теперь создадим кнопку, в параметрах которой укажем событие, которое будет запускать нашу функцию:

<input type='button' value='Попробуйте' onclick='messageWindow()' >

В данном случае использовано событие onclick, т.е кликнув по кнопке "Попробуйте" активируется функция messageWindow, в которой в свою очередь прописан alert, благодаря которому выводится сообщение в всплывающем окне.

Событие можно прикрепить к любому объекту, необязательно к кнопке. Например зададим эту же функцию, только к блоку div'у.

<div style="border:2px dashed red" onClick="messageWindow();">Попробуйте</div>

Попробуйте

На следующем примере создадим простейший калькулятор, который будет умножать одно введенное число на другое и соответственно выводить результат. Данное действие будет выполняться при нажатии на кнопку "умножить". Создадим функцию:

function umnogenie(){ var a=document.formax.p1.value; var b=document.formax.p2.value; var x=a*b; document.formax.rezultat.value=x;

Функция есть, теперь осталось создать форму и подключить к ней нашу функцию:

<form name="formax"> Первое число: <input type="text" name="p1" size="5"> Второе число: <input type="text" name="p2" size="5"> <input type="button" name="button" value="Умножить" onClick="umnogenie();"> Результат: <input type="text" name="rezultat" size="5"> </form>

В результате получится небольшая форма, в которой можно задавать и перемножать заданные числа:

Первое число: Второе число: Результат:

На следующем уроке перейдем к рассмотрению событий в JavaScript: События и их обработчики