Урок 10. Пользовательские функции в JavaScript
Теория
Вы уже знаете многие стандартные функции JavaScript, например substr(), reverse(), split(). Их использование очень удобно, чтобы написать свои аналоги на JavaScript, потребовалось бы много времени и сил.
Однако, с помощью стандартных функций невозможно сделать все, что требуется. На помощь приходит такой механизм JavaScript, как функции пользователя. С их помощью можно создавать свои функции, принцип работы которых аналогичен стандартным функциям JavaScript.
Зачем нужны пользовательские функции?
Очень часто при программировании возникает такая ситуация: некоторые участки кода повторяются несколько раз в разных местах. Пользовательские Функции нужны для того, чтобы убрать дублирование кода.
Дублирование плохо тем, что если требуется что-то поменять в коде, это придется сделать во многих местах.
Кроме того, функции скрывают внутри себя какой-то код, о котором не приходится задумываться. Например, есть функция s(), которая сохраняет пользователя в базу данных. Можно просто вызывать ее, не задумываясь о том, какой код выполняется внутри функции. Это удобно. В программировании это называется инкапсуляцией.
Синтаксис функций пользователя
Функция создается с помощью команды function. Далее через пробел следует имя функции и круглые скобки. Круглые скобки могут быть пустыми, либо в них могут быть указаны параметры, которые принимает функция. Параметры - это обычные переменные JavaScript.
Сколько может быть параметров: 1, несколько (в этом случае они указываются через запятую), ни 1 (в этом случае круглые скобки все-равно нужны).
//f - это имя функции, ей передается 1 параметр p:
function f(p){}
//Передаем функции 2 параметра - p и q:
function f(p,q){}
//Вообще не передаем никаких параметров:
function f(){}
Обратите внимание на фигурные скобки в примерах: в них пишется код, который выполняет функция. Общий синтаксис функции выглядит так:
function имя_функции(здесь перечисляются параметры через запятую){Здесь написаны команды, которые выполняет функция}
Как вызвать функцию в коде?
Саму функцию можно вызвать в любом месте страницы (даже до ее определения). Функция вызывается по ее имени. При этом круглые скобки после ее имени обязательны, даже если они пустые.
Пример:
/*Пишем функцию, которая выводит на экран 'Привет, мир'. Назовем ее 'h':*/
function h(){
/*В этом месте ничего не выведется само по себе, а выведется только при вызове функции*/document.write('Привет, мир')}
/*Теперь вызываем функцию, чтобы она вывела фразу. Обратимся к функции по имени:*/
h();/*Функция выведет 'Привет, мир'. Можно вывести фразу несколько раз. Для этого достаточно написать функцию не 1 раз, а несколько*/h();h();h()
Подробнее о параметрах
В наших примерах вызывалась функция 'h()' без параметров.
Теперь вводится параметр, который будет задавать текст, выводимый функцией:
function h(t/*укажем здесь параметр t*/){/*Выведем значение переменной t*/document.write(t)};/*Теперь вызывается функция*/h('Привет, Земляне')/*она выведет именно ту фразу, которую ей передали*/
Сократим код:
function h(t){document.write(t)};h('Привет, Земляне')
Обратите внимание на переменную t в функции: в ней появляется то, что передается в круглых скобках при вызове функции.
Как JavaScript знает, что текст 'Привет, Земляне' нужно положить в переменную t? Мы сказали ему об этом, когда создавали нашу функцию, вот тут: 'function h(t)'.
Если задать несколько параметров, то каждый из них будет лежать в своей переменной внутри функции.
Инструкция return
Чаще всего функция должна не выводить что-то через document.write, а возвращать.
Сделаем так, чтобы функция не выводила что-то, а возвращала текст скрипту, чтобы он смог записать этот текст в переменную и как-то обработать его дальше:
Зададим функцию:
function h(t){/*С помощью инструкции 'return' укажем функции, что мы хотим, чтобы она вернула текст, а не вывела на экран*/return t}/*Теперь вызовем нашу функцию и запишем значение в переменную m*/var m=h('Привет, Земляне');/*Теперь в переменной m лежит 'Привет, Земляне'*/document.write(m);/*Убедимся в этом. Можно не вводить промежуточную переменную m, а сделать так:*/document.write(h('Привет, Земляне'))
Сократим код:
function h(t){return t}var m=h('Привет, Земляне');document.write(m);document.write(h('Привет, Земляне'))
function h(t){return t}document.write(h('Привет, Земляне'))
В принципе, практической пользы от этого никакой, т.к. функция вернула то, что ей передали. Модернизируем пример так, чтобы функция принимала имя человека, а выводила строку 'Привет, %имя_человека_переданное_функции%':
Зададим функцию:
ПРОВЕРЬ!
function h(n){/*укажем здесь параметр n, в котором будет лежать имя человека. Введем переменную t, в которую запишем всю фразу:*/t='Привет, '.n;/*Укажем функции с помощью инструкции 'return', что хотим, чтобы она ВЕРНУЛА содержимое переменной t:*/return t}/*Теперь вызовем нашу функцию и запишем значение в переменную m:*/m=h('Иван');/*Теперь в переменной t лежит 'Привет, Иван'*/document.write(m);/*Убедимся в этом. Поздороваемся сразу с группой людей из 3 человек*/document.write(h('Вася').'. '.h('Петя').'. '.h('Коля'))
Сократим код:
function h(n){t='Привет, '.n;return t};m=h('Иван');document.write(m,h('Вася').'. '.h('Петя').'. '.h('Коля'))
Частая ошибка с return
После того, как выполнится инструкция return, функция закончит свою работу. Т.е. после выполнения return больше никакой код не выполнится.
Это не значит, что в функции должен быть 1 return. Но выполнится только 1 из них. Такое поведение функций является причиной многочисленных трудноуловимых ошибок.
Пример:
ПРОВЕРЬ!
function f(p){/*Если переменная p имеет значение true, то вернем 'Верно'. Напоминаю о том, что конструкция if(p) эквивалентна if(p===true)!*/if(p)return 'Верно';/*Далее проделаем еще какие-то операции, но, если переменная p имеет значение true, сработает инструкция return, и код ниже работать не будет! Напротив, если p===false, инструкция return не выполнится и код дальше будет работать!*/document.write('Привет, мир')}
Сократим код:
function f(p){if(p)return'Верно';document.write('Привет, мир')}
Приемы работы с return
ПРОВЕРЬ!
Существуют некоторые приемы работы с return, упрощающие код. Как сделать проще:
function f(p){/*Что делает код: если param имеет значение true, то в переменную r пишем 'Верно', иначе 'Неверно':*/if(p){r='Верно'}else{r='Неверно'}/*Вернем содержимое переменной r:*/return r}
Сократим код:
function f(p){if(p){r='Верно'}else{r='Неверно'}return r}
Теперь упростим функцию, используя прием работы с return:
ПРОВЕРЬ!
function f(p){/*Что делает код: если param имеет значение true, вернет 'Верно', иначе вернет 'Неверно'*/if(p){return'Верно'}else{return'Неверно'}}
Сократим код:
function f(p){if(p){return'Верно'}else{return'Неверно'}}
Обратите внимание, как упростился код. Плюс - убрана лишняя переменная r.
Практика
Примеры решения задач
Задача
Сделать функцию, которая возвращает куб числа. Число передается параметром.
Решение:
function a($n){return $n*$n*$n};document.write(a(2))
Задачи для решения
Простые функции
Сделать функцию, которая возвращает квадрат числа. Число передается параметром.
Сделать функцию, которая возвращает сумму 2 чисел.
Сделать функцию, которая отнимает от 1-го числа 2-е и делит на 3-е.
Сделать функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.
