Практическое занятие № 36
Тема: «Работа с пользовательскими функциями в JavaScript»
Цель работы: приобретение навыков создания и использования пользовательских функций в JS.
Краткие теоретические основания выполнения задания
Вы уже знаете многие стандартные функции JavaScript, например substr(), reverse(), split(). Их использование очень удобно ‐ чтобы написать свои аналоги на JavaScript, потребовалось бы много времени и сил.
Однако, с помощью стандартных функций невозможно сделать все, что нам требуется. На помощь приходит такой механизм JavaScript, как функции пользователя. С их помощью мы можем создавать свои функции, принцип работы которых аналогичен стандартным функциям JavaScript.
Зачем нужны пользовательские функции?
Очень часто при программировании возникает такая ситуация: некоторые участки кода повторяются несколько раз в разных местах. Пользовательские Функции нужны для того, чтобы убрать дублирование кода.
Дублирование плохо тем, что если вам потребуется что‐то поменять в коде ‐ это придется сделать во многих местах При этом обязательно в каком‐нибудь месте вы это сделать забудете. Практика копирования участков кода и вставки в другое место ‐ очень плохая практика (очень часто ей грешат новички).
Кроме того, функции скрывают внутри себя какой‐то код, о котором нам не приходится задумываться. Например, у нас есть функция saveUser(), которая сохраняет пользователя в базу данных. Мы можем просто вызывать ее, не задумываясь о том, какой код выполняется внутри функции. Это очень удобно. В программировании это называется инкапсуляцией.
Синтаксис функций пользователя
Функция создается с помощью команды function. Далее через пробел следует имя функции и круглые скобки. Круглые скобки могут быть пустыми, либо в них могут быть указаны параметры, которые принимает функция.Параметры ‐ это обычные переменные JavaScript.
Сколько может быть параметров: один, несколько (в этом случае они указываются через запятую), ни одного (в этом случае круглые скобки все равно нужны, хоть они и будут пустыми).
//'func' - это имя функции, ей передается один параметр param: function func(param) {
}
//Передаем функции два параметра - param1 и param2: function func(param1, param2) {
}
//Вообще не передаем никаких параметров: function func() {
}
Обратите внимание на фигурные скобки в примерах: в них мы пишем код, который выполняет функция. Общий синтаксис функции выглядит так:
function имя_функции(здесь перечисляются параметры через запятую) {
Здесь написаны команды, которые выполняет функция.
}
Как вызвать функцию в коде?
Саму функцию мы можем вызвать в любом месте нашего JavaScript документа (даже до ее определения). Функция вызывается по ее имени. При этом круглые скобки после ее имени обязательны, даже если они пустые. Смотрите пример:
/*
Мы написали функцию,
которая выводит на экран 'Привет, мир!'. Назовем ее 'hello':
*/
function hello() {
/*
В этом месте ничего не выведется само по себе, а выведется только при вызове функции.
*/
alert('Привет, мир!');
}
/*
Теперь мы хотим вызвать нашу функцию, чтобы она вывела на экран свою фразу. Обратимся к ней по имени:
*/
hello(); //Вот и все! Функция выведет на экран фразу 'Привет, мир!'.
/*
Мы можем вывести нашу фразу несколько раз -
для этого достаточно написать функцию не один раз, а несколько:
*/
hello();
hello();
hello();
Подробнее о параметрах
В наших примерах мы вызывали функцию 'hello()' без параметров.
Давайте теперь попробуем ввести параметр, который будет задавать текст, выводимый нашей функцией:
//Зададим нашу функцию:
function hello(text) { //укажем здесь параметр text
//Выведем на экран значение переменной text: alert(text);
}
//Теперь вызовем нашу функцию:
hello('Привет, Земляне!'); //она выведет именно ту фразу, которую мы ей передали
Обратите внимание на переменную text в нашей функции: в ней появляется то, что мы передали в круглых скобках при вызове функции.
Как JavaScript знает, что текст 'Привет, Земляне!' нужно положить в переменную text? Мы сказали ему об этом, когда создавали нашу функцию, вот тут: 'function hello(text)'.
Если мы зададим несколько параметров ‐ то каждый из них будет лежать в своей переменной внутри функции.
Инструкция return
Чаще всего функция должна не выводить что‐то через alert на экран, а возвращать.
Сделаем теперь так, чтобы функция не выводила что‐то на экран, а возвращала текст скрипту, чтобы он смог записать этот текст в переменную и как‐то обработать его дальше:
//Зададим функцию: function hello(text) {
/*
Укажем функции с помощью инструкции 'return',
что мы хотим, чтобы она ВЕРНУЛА текст, а не вывела на экран:
*/
return text;
}
//Теперь вызовем нашу функцию и запишем значение в переменную message: var message = hello('Привет, Земляне!'); //пока вывода на экран нет
//И теперь в переменной message лежит 'Привет, Земляне!': alert(message); //убедимся в этом
//Можно не вводить промежуточную переменную message, а сделать так: alert(hello('Привет, Земляне!'));
В принципе, практической пользы от того, что мы сделали ‐ никакой, так как функция вернула нам то, что мы ей передали. Модернизируем наш пример так, чтобы функция принимала имя человека, а выводила строку 'Привет, %имя_человека_переданное_функции%!':
//Зададим функцию:
function hello(name) { //укажем здесь параметр name, в котором будет лежать имя человека
//Введем переменную text, в которую запишем всю фразу: var text = 'Привет, '.name.'!';
/*
Укажем функции с помощью инструкции 'return',
что мы хотим, чтобы она ВЕРНУЛА содержимое переменной text:
*/
return text;
}
//Теперь вызовем нашу функцию и запишем значение в переменную message: var message = hello('Дима');
//И теперь в переменной text лежит 'Привет, Дима!': alert(message); //убедимся в этом
//Поздороваемся сразу с группой людей из трех человек: alert(hello('Вася').' '.hello('Петя').' '.hello('Коля'));
Частая ошибка с return
После того, как выполнится инструкция return – функция закончит свою работу. То есть: после выполнения return больше никакой код не выполнится.
Это не значит, что в функции должен быть один return. Но выполнится только один из них. Такое поведение функций является причиной многочисленных трудноуловимых ошибок.
Смотрите пример:
function func(param){
/*
Если переменная param имеет значение true, то вернем 'Верно!'.
Напоминаю о том, что конструкция if(param) эквивалентна
if(param === true)!
*/
if (param) return 'Верно!';
/*
Далее новичок в JavaScript хочет проделать еще какие-то
операции,
но если переменная param имеет значение true – сработает
инструкция return,
и код ниже работать не будет!
Напротив, если param === false – инструкция return не
выполнится
и код дальше будет работать!
*/
alert('Привет, мир!');
}
//Осознайте это и не совершайте ошибок
Приемы работы с return
Существуют некоторые приемы работы с return, упрощающие код. Как сделать проще всего:
function func(param) {
/*
'Верно!',
*/
Что делает код:
если param имеет значение true – то в переменную result запишем иначе 'Неверно!':
if (param) {
var result = 'Верно!'
} else {
var result = 'Неверно!';
}
//Вернем содержимое переменной result: return result;
}
Теперь упростим нашу функцию, используя прием работы с return:
function func(param) {
/*
Что делает код:
если param имеет значение true – вернет 'Верно!',
иначе вернет 'Неверно!'.
*/
if (param) {
return 'Верно!'
} else {
return = 'Неверно!';
}
}
Обратите внимание на то, насколько упростился код. Плюсом также является то, что мы убрали лишнюю переменную result.
Оборудование, материалы
Персональный компьютер с установленной ОС. Текстовый редактор Notepad++ или аналогичный. Open Server.
Порядок выполнения задания Примеры решения задач
Задача 1. Сделайте функцию, которая возвращает куб числа. Число передается параметром.
Решение:
function cube($num) {
return $num * $num * $num
}
Задачи для решения Простые функции
Сделайте функцию, которая возвращает квадрат числа. Число передается параметром.
Сделайте функцию, которая возвращает сумму двух чисел.
Сделайте функцию, которая отнимает от первого числа второе и делит на третье.
Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.
Ресурсы и ссылки
http://code.mu/books/javascript/base/osnovy‐raboty‐s‐polzovatelskimi‐funkciyami‐v‐javascript.html
http://code.mu/tasks/javascript/base/osnovy‐raboty‐s‐polzovatelskimi‐funkciyami‐v‐javascript.html
3 247
18 475 
