Функции. Функции JavaScript
Идеи динамичного формирования контента на web-ресуре стали нормой. Статические страницы и шаблонное сайтостроение окончательно завершили свою миссию.
Однако современный web-ресурс не обязательно должен быть представлен набором страниц, формируемых сервером и обновляемых браузером (JS+AJAX).
Web-ресурс в момент прихода посетителя может представлять собой пару заголовков для протокола, немного текста в «head», несколько строк кода в «body» и все. Остальное «додумается » в процессе работы посетителя - это идеальный сайт или стремящийся быть таковым.
Место описания и сущность функций
JavaScript - это опыт, наработаный многими десятилетиями. Он имеет значимую историю развития, современную квалифицированную команду создателей-разработчиков. Язык отлично продуман, надежен, красив и дает настоящую возможность разработчикам писать приличный код и самосовершенствоваться.
Понятие алгоритма вне функции здесь отсутствует в принципе. Разумеется, разработчик может в любом месте страницы вставить скрипт, поместить в него код и он будет исполнен. Но какой смысл в коде, который исполняется только раз: при загрузке (перегрузке) страницы? Разве что можно установить начальные значения каких-нибудь малозначимых переменных.
Скрипт - это место описания нужных переменных и функций, нежели добрый кусок кода, написанный ради самого себя. Именно набор функций является существенным и значимым, возможно - их взаимная непосредственная связь, но чаще бывает все иначе. Место описания функции и место ее применения вовсе не одно и тоже.
Совершенно не обязательно, что функция будет вызывать другую функцию непосредственно, она это можно сделать опосредствованно через динамичное формирование кода. Посетитель принимает решение в рамках этого кода и срабатывает совсем другая система функций.
Функциональная динамика
Функциональная динамика - это вовсе не только и не столько обработчики, назначенные элементам страницы, это функции, формирующие элементы страницы, ну и непосредственные обработчики тоже могут меняться.
Действие на странице разворачивается в зависимости от ее элементов и поведения посетителя на ней. Движения мышки, кнопки клавиатуры, клики, события элементов и другие обстоятельства приводят к запуску нужных функций.
Изначально здесь нет никакой последовательности и нет никакой параллельности. Здесь есть адекватная реакция web-ресурса на события. Насколько быстро JavaScript отработает ту или иную функцию, зависит от многих технических (компьютер, линии связи) и семантических (логика алгоритма, предметная область, смысл задачи) факторов.
По факту можно утверждать, что что-то сработало параллельно, а что-то исполнится после чего-то, но смысла в этом особого нет. Важно, что функции JavaScript - это возможность создавать адекватную реакцию на действия посетителя.
Это новое мышление в разработке: распределенная обработка информации в недрах отдельно взятого браузера!
Синтаксис переменных и функций
JavaScript-переменные размещаются как в теге «script», так и в теле функции. Функции определяются так же. Особого смысла писать внутри функции еще одну функцию нет, но это может быть необходимо по различным и вполне обоснованным причинам.
Описание функции в общем случае начинается с ключевого слова «function», за которым следует ее имя, список аргументов в круглых скобках через запятую и тело функции в фигурных скобках.
В данном примере описаны две функции, обеспечивающие AJAX-обмен между страницей и сервером. Переменная scXHR описана выше, потому доступна как в InitXML, так и внутри WaitReplySC.
Имя функции и парамет «функция»
Здесь был представлен асинхронный вариант, когда JavaScript-функция в функции вызывается после ответа сервера. При этом, получив ответ от сервера, WaitReplySC обращается к тегам страницы, заполняет их полученной информацией и вызывает другие функции, которые вполне могут инициировать следующий запрос к серверу.
Здесь важно также отметить, что WaitReplySC - это функция. Но в строке scXHR.onreadystatechange = WaitReplySC она передается как параметр. Это общее правило передачи функций в другие функции в качестве параметров. Указал скобки и передал в них ее параметр (параметры) - функция исполнится немедленно. Передал только имя, ну и что с того. Вызов функции сделает тот, кто получил ее имя.
Функциональность, реализуемая через AJAX, позволяет выполнить вызов функции JavaScript через данные, полученные от сервера. Фактически, посылая запрос на сервер, та или иная функция может вовсе и не «знать», к какой функции она обращается и с какой информацией.
Выход из функции и ее результат
В теле функции можно писать любые операторы языка, который, собственно, для этого и предназначен. Внутри функции доступны переменные, описанные внутри и вне ее, но не те, что описаны в других функциях.
Если требуется, чтобы функция возвращала результат, можно воспользоваться оператором возврата JavaScript: return. В теле функции может быть достаточное количество операторов возврата. Совершенно не обязательно, что все они будут возвращать результат одного и того же типа.
Обычно разработчики очень чтут эту возможность и, в зависимости от ситуации, принимают решение о выходе из функции, как только это становится возможным.
Вовсе не обязательно пробегать весь алгоритм функции, когда можно выйти раньше.
Аргументы функций
Аргументы в функцию передаются списком через запятую, заключаются в круглые скобки и находятся сразу после ее имени. В качестве аргументов используются имена переменных, но можно передавать и непосредственно значения. Чтобы на JavaScript передать функцию в функцию, нужно просто указать ее имя без скобок.
Внутри функции доступна переменная arguments, имеющая свойство length. Можно обращаться к любому аргументу функции через arguments , arguments , ... до последнего arguments .
Изменение аргумента функции действительно внутри функции, но не вне ее. Для того чтобы что-то изменить вне функции, нужно воспользоваться оператором JavaScript return, через который передать необходимое значение наружу.
После того как функция завершит работу, все, что было связано с ее исполнением, будет уничтожено. Во время выполнения функция может изменять внешние переменные, кроме тех, что описаны в других функциях, в том числе и во внутренних.
У arguments есть свойство callee, которое предназначено для вызова функции, что выполняется в данный момент времени. Если вызвать саму себя, то вариант JavaScript функция в функции позволит реализовать рекурсию.
Использование функций
Основная забота функций - обслуживать события браузера. Для этого практически в каждом теге есть возможность указать имя события и функцию, его обрабатывающую. Можно указывать несколько событий, но на каждое событие указывается только одна функция.
Одна функция может обслуживать несколько элементов страницы и несколько событий. Посредством параметра «this» можно передать функции информацию, откуда она была вызвана.
Классическое использование JS-функций - обработчики событий на элементах. В данном примере в форме входа/выхода посетителя будет вызвана функция scfWecomeGo() или scfWelcomeCancel(), а при выборе режима работы scfMenuItemClick(this).
В последнем случае передается параметр «this», который позволяет чудесным образом узнать, из какого именно дива произошел вызов. Вообще, JavaScript настолько качественно имплантирован в DOM и он так удобно позволяет перемещаться по его элементам, собирать нужную информацию, что динамика страницы может быть просто непредсказуемой.
Функция не обязательно должна возвращать строку символов, число или другую функцию. Она может вернуть полноценный HTML-элемент, причем в котором будет необходимое количество элементов, со своими обработчиками своих событий.
Размещая такой элемент на странице, разработчик создает новую функциональность, что хорошо в части решения задачи и удовлетворения интересов посетителей, но достаточно сложно в части реализации.
Начиная такую полнофункциональную разработку, легко запутаться в собственном коде, в вызовах функций, в моментах, когда формируется то или иное содержимое той или иной части страницы. Прежде чем принять такое направление разработки, не помешает хорошо все взвесить.
О распределенном мышлении
Разработчику приходится мыслить на уровне всех элементов страницы, на уровне всех событий и иметь в ясном представлении, как все происходит на самом деле. Это сложно, но эта работа стоит того.
В JavaScript выполнение функции может быть отложено до какого-либо события, а таких функций может быть много, да и события имеют свойство распространяться и попадать в «сферу видимости» различных обработчиков.
В данном примере где-то ранее была вызвана функция, которая инициировала создание элемента меню навигации по файлам. Предполагается страничная организация, то есть в окошке всего семь файлов, которые можно удалять и обрабатывать. Перемещаться можно как по клику на строке файла, так и стрелками на клавиатуре, так и блоками по семь строк.
В каждом случае есть свои функции. Иначе говоря, в таком простом примере необходимо написать пару десятков функций, которые будут реагировать на различные события, а некоторые из этих функций будут обрабатывать различные варианты и ситуации, которые к событиям вовсе не относятся.
Например, при удалении строки нижние должны сместиться вверх. Для этого потребуется либо сделать новую выборку, что банально и емко по ресурсам, либо пересчитать строчки, использовать на javascript функции массивов и элегантно достигнуть цели.
Аргументы и результаты функций
JavaScript позволяет привести код к «полнофункциональному» состоянию. Нормально, когда аргументом функции является функция. Допускается вариант, когда функция возвращает функцию. JavaScript относится к этому совершенно спокойно.
Это хороший механизм, но достаточно сложный в отношении реализации. Технически все допустимо, семантически обеспечить логику передачи «функционала» под силу только квалифицированному разработчику.
Когда в JavaScript функция в функции - куда ни шло, но когда функция порождает функцию, а та еще одну, то уследить логику достаточно сложно. По сути дела, вопрос не в том, чтобы применить квалификацию, вопрос в том, чтобы получить безопасный и правильный результат.
Забота разработчика понятна и проста. Есть задача, нужно решение, а не ошибка вроде «JavaScript error the operation is insecure», чистый экран или остановка всего движка браузера.
Если аргументом является функция, значит разработчик передает переменную с особыми свойствами, то есть это не число, не строка, не объект. Но использование такого аргумента может привести к тому, что изменятся внешние переменные и будет результат исполнения функции. В зависимости от того, что переданы будут адекватные изменения.
Исполнение сформированного кода
Реализовать исполнение кода, сформированного в процессе работы другого кода, можно посредством «eval». Это не считается отличным решением, но часто можно не усложнять код излишними функциями, а ограничиться банальным формированием строки JavaScript кода и попросту исполнить ее.
В данном примере формируется строчка вставки в действующий див некоторой информации. Номер дива и содержание информации различны для различных позиций, потому такое решение в данной ситуации гарантированно не обеспечит ситуацию «javascript error the operation is insecure», но надежно даст нужный эффект.
Нюанс парадигмы JavaScript «функция в функции»
Если есть возможность обойтись без излишеств, лучше им воспользоваться. Все перечисленные варианты хороши. Безусловно, во многих случаях это единственное решение.
Классический пример рекурсии: вычисление факториала. Тут достаточно трудно написать алгоритм, который зациклится, но очень просто можно выйти за границы значения. Факториал растет слишком быстро.
Однако и рекурсия, и функция, вызывающая другую функцию, которая может сделать обоснованный обратный вызов - норма вещей.
Например, обычная таблица. В таблице могут быть и другие таблицы. Вложенность нельзя ограничивать. Писать для каждой таблицы свой набор функций - слишком большая роскошь.
Таких примеров можно привести множество, и все это будут реальные и насущные задачи, вовсе не из области программирования. Именно поэтому проблема заключается именно в том, что без излишеств не обойтись, созданная система функций, точнее ее отладка и последующая надежная работа становится заботой не JavaScript, а разработчика.
В этой статье описаны функции Javascript на уровне языка: создание, параметры, приемы работы, замыкания и многое другое.
Создание функций
Существует 3 способа создать функцию. Основное отличие в результате их работы - в том, что именованная функция видна везде, а анонимная - только после объявления:
Функции - объекты
В javascript функции являются полноценными объектами встроенного класса Function. Именно поэтому их можно присваивать переменным, передавать и, конечно, у них есть свойства:
Function f() { ... } f.test = 6 ... alert(f.test) // 6
Свойства функции доступны и внутри функции, так что их можно использовать как статические переменные.
Например,
Function func() { var funcObj = arguments.callee funcObj.test++ alert(funcObj.test) } func.test = 1 func() func()
В начале работы каждая функция создает внутри себя переменную arguments и присваивает arguments.callee ссылку на себя. Так что arguments.callee.test - свойство func.test , т.е статическая переменная test.
В примере нельзя было сделать присвоение:
Var test = arguments.callee.test test++
так как при этом операция ++ сработала бы на локальной переменной test , а не на свойстве test объекта функции.
Объект arguments также содержит все аргументы и может быть преобразован в массив (хотя им не является), об этом - ниже, в разделе про параметры.
Области видимости
Каждая функция, точнее даже каждый запуск функции задает свою индивидуальную область видимости.
Переменные можно объявлять в любом месте. Ключевое слово var задает переменную в текущей области видимости. Если его забыть, то переменная попадет в глобальный объект window . Возможны неожиданные пересечения с другими переменными окна, конфликты и глюки.
В отличие от ряда языков, блоки не задают отдельную область видимости. Без разницы - определена переменная внутри блока или вне его. Так что эти два фрагмента совершенно эквивалентны:
Заданная через var переменная видна везде в области видимости, даже до оператора var . Для примера сделаем функцию, которая будет менять переменную, var для которой находится ниже.
Например:
Function a() { z = 5 // поменяет z локально.. // .. т.к z объявлена через var var z } // тест delete z // очистим на всякий случай глобальную z a() alert(window.z) // => undefined, т.к z была изменена локально
Параметры функции
Функции можно запускать с любым числом параметров.
Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined .
Следующая функция возвращает время time , необходимое на преодоление дистанции distance с равномерной скоростью speed .
При первом запуске функция работает с аргументами distance=10 , speed=undefined . Обычно такая ситуация, если она поддерживается функцией, предусматривает значение по умолчанию:
// если speed - ложное значение(undefined, 0, false...) - подставить 10 speed = speed || 10
Оператор || в яваскрипт возвращает не true/false , а само значение (первое, которое приводится к true).
Поэтому его используют для задания значений по умолчанию. В нашем вызове speed будет вычислено как undefined || 10 = 10 .
Поэтому результат будет 10/10 = 1 .
Второй запуск - стандартный.
Третий запуск задает несколько дополнительных аргументов. В функции не предусмотрена работа с дополнительными аргументами, поэтому они просто игнорируются.
Ну и в последнем случае аргументов вообще нет, поэтому distance = undefined , и имеем результат деления undefined/10 = NaN (Not-A-Number, произошла ошибка).
Работа с неопределенным числом параметров
Непосредственно перед входом в тело функции, автоматически создается объект arguments , который содержит
- Аргументы вызова, начиная от нуля
- Длину в свойстве length
- Ссылку на саму функцию в свойстве callee
Например,
Function func() {
for(var i=0;i Свойство arguments похоже на массив, т.к у него есть длина и числовые индексы. На самом деле arguments не принадлежит классу Array и не содержит его методов, таких как push , pop и других. Если все же хочется воспользоваться этими методами, например, чтобы вызвать другую функцию с теми же аргументами, но кроме первого, можно создать из arguments настоящий массив: Var args = Array.prototype.slice.call(arguments)
// .. теперь args - настоящий массив аргументов..
args.shift()
...
Вызвать функцию для массива аргументов можно при помощи apply: Var func = function(a,b) { alert(a+b) }
var arr =
func.apply(null, arr) // => alert(3)
Функцию легко можно передавать в качестве аргумента другой функции. Например, map берет функцию func , применяет ее к каждому элементу массива arr и возвращает получившийся массив: Var map = function(func, arr) {
var result =
for(var i=0; i Пример использования: Map(run, ) // =
Или можно создать анонимную функцию непосредственно в вызове map:
// анонимная функция утраивает числа
map(function (a) { return a*3 } , ) // =
Бывают функции, аргументы которых сильно варьируются. Например:
// можно указать только часть аргументов
// не указанные - вычисляются или берутся по умолчанию
function resize(toWidth, toHeight, saveProportions, animate) {
// значения по умолчанию
saveProportions = saveProportions || true
animate = animate || true
toHeight = toHeight || ...
}
Вызов с необязательными параметрами приходится делать так: Resize(100, null, null, true)
Чтобы избежать лишних null и сделать код более понятным, используют нечто вроде "keyword arguments", существующих в Python и Ruby. Для этого много параметров пакуют в единый объект: Function resize(setup) {
// значения по умолчанию
var saveProportions = setup.saveProportions || true
var animate = setup.animate || true
var toHeight = setup.toHeight || ...
}
Вызов теперь делается гораздо проще: Var setup = {toWidth: 100, animate: true}
resize(setup)
// или
resize({toWidth: 100, animate: true})
Так - куда понятнее. А если параметров больше 5, то вообще - единственный нормальный способ. Кроме того, с объектом можно удобнее делать последовательности вызовов вроде: Var setup = {toWidth: 100, animate: true, saveProportions: false}
resize(setup)
setup.toWidth = 200
resize(setup) Статья в разработке! Статья, в которой рассмотрим, что такое функция, а также традиционный (классический) вариант работы с ней. Кроме этого, разберем, что такое аргументы (параметры) функции и оператор return.
Функция
- это некоторый набор инструкций
, которому можно дать имя
, а затем обратиться к нему по этому имени
из любого места программы. Классический пример использования функции.
На веб-странице имеется код JavaScript, некоторый фрагмент в котором повторяется несколько раз
. Чтобы этого избежать можно оформить этот фрагмент в виде функции
, а затем вызывать его
в нужных местах кода по имени этой функции
. Вызов этой функции
будет обозначать выполнение инструкций
, находящихся в ней. Как организовать выполнение некоторой задачи в JavaScript с использованием функций? Чтобы это выполнить обычно поступают так: В результате такая программа становится более структурированной. В неё более просто вносить различные изменения и добавлять новые возможности. Операции с функцией в JavaScript можно разделить на 2 шага: Объявление функции.
Создание функции в JavaScript начинается с написания ключевого слова function
, далее указывается имя
функции, затем в круглых скобка
х при необходимости перечисляются параметры
, после этого указываются инструкции
, которые заключаются в фигурные скобки
.
// объявление функции someName
function someName() {
alert("Вы вызвали функцию someName!");
}
JavaScript - Синтаксис объявления функции
Функции такого вида в JavaScript называются function declaration statement
. Кроме этого вида в JavaScript ещё различают функции function definition expression
и arrow function expression
. Составление имени функции
выполняется по тем же правилам, что и имя переменной. Т.е. оно может содержать буквы, цифры (0-9), знаки «$» и «_». В качестве букв рекомендуется использовать только буквы английского алфавита (a-z, A-Z). Имя функции, также как и имя переменной не может начинаться с цифры. Параметров у функции может быть сколько угодно много или не быть вообще. Круглые скобки
в любом случае указываются. Если параметров несколько, то их между собой необходимо разделить с помощью запятой
. Обращение к параметрам функции осуществляется по их имени. Набор инструкций
, заключенный в фигурные скобки
- это код функции
, который будет выполнен
при её вызове
. Вызов функции.
Объявленная функция
сама по себе выполняться не будет
. Для того чтобы её запустить
, её необходимо вызвать
. Вызов функции
осуществляется посредством указания её имени и двух круглых скобок. Внутри скобок при необходимости указываются аргументы.
// вызов функции, приведённой в предыдущем примере
someName();
JavaScript - Синтаксис вызова функции
Функции в JavaScript являются объектами.
В JavaScript вообще всё является объектами, кроме шести примитивных типов данных. А если функция является объектом, то ссылку на неё можно сохранить в переменную.
// объявление функции someName
function someName() {
alert("Вы вызвали функцию someName!");
}
var reference = someName;
После этого вызвать функцию можно будет так: Reference();
Аргументы функции
- это значения, которые передаются функции на этапе её вызова. Отделяются аргументы друг от друга с помощью запятой.
// вызов функции sayWelcome с передачей ей двух аргументов
sayWelcome("Иван", "Иванов");
// ещё один вызов функции sayWelcome с двумя аргументами
sayWelcome("Петр", "Петров");
Параметры функции
– это один из способов в JavaScript, посредством которого можно обратиться к аргументам внутри функции. Описываются параметры функции на этапе её объявления в круглых скобках. Другими словами параметры функции
- это локальные переменные, которые создаются автоматически на этапе запуска функции. В качестве значений параметры получают соответствующие аргументы, переданные функции во время её вызова. Обратиться к параметрам можно только внутри этой функции, вне её они не существуют.
// объявление функции sayWelcome, которая имеет два параметра
function sayWelcome (userFirstName, userLastName) {
// инструкция, выводящая в консоль значения параметров «userFirstName» и «userLastName»
console.log("Добро пожаловать, " + userLastName + " " + userFirstName);
}
В языке JavaScript при вызове функции количество аргументов не обязательно должно совпадать с количеством параметров
. Параметры, которым при вызове, не было установлено значение, будут равны undefined . Например
, вызовем функцию из примера, приведённого выше, без указания одного и двух параметров:
// вызов функции sayWelcome и передача ей одного аргумента
sayWelcome("Петр"); // Добро пожаловать, undefined Петр
// вызов функции sayWelcome без передачи ей аргументов
sayWelcome(); // Добро пожаловать, undefined undefined
Пример функции, которая будет просто выводить переданные ей аргументы в консоль браузера:
// объявление функции
function outputParam(param1, param2, param3) {
console.log(param1 + "; " + param2 + "; " + param3);
}
// вызовы функции outputParam с передачей ей разного количества параметров
outputParam("Дождь","Снег","Туман"); // Дождь; Снег; Туман
outputParam(17); // 17; undefined; undefined
outputParam(24,33); // 24; 33; undefined
outputParam(); // undefined; undefined; undefined
Другой способ
обратиться к аргументам внутри функции – это использовать специальный объект arguments
. Доступ к аргументам через arguments
выполняется точно также как к элементам обычного массива, т.е. по их порядковым номерам. Таким образом, argument - позволит получить первый аргумент, arguments – второй аргумент и т.д.
// объявление функции sum
function sum(num1, num2) {
/* num1 или arguments – получить значение 1 аргумента
num2 или arguments – получить значение 2 аргумента */
var
sum1 = num1 + num2,
sum2 = arguments + arguments;
return "Сумма, полученная 1 способом равна " + sum1 + "; сумма, полученная 2 способом равна " + sum2;
}
/* выведем результат функции sum в консоль
7 - первый аргумент (к нему можно обратиться как по имени num1, так и с помощью arguments)
4 - второй аргумент (к нему можно обратиться как по имени num2, так и с помощью arguments) */
console.log(sum(7,4));
Основное отличие между этими способами заключается в том, что первый из них позволяет обратиться только к тем аргументам, которым на этапе объявления функции были дали имена. Второй же способ позволяет получить значение любого аргумента, даже если у него нет имени (по порядковому номеру). Это возможность языка JavaScript позволяет создавать универсальные гибкие функции. Кроме получения аргументов, объект arguments позволяет также узнать их количество. Выполняется это с помощью свойства length. Перебрать аргументы
, переданные функции, можно, например, с помощью цикла for или for...of .
// объявление функции sum
function sum() {
var i = 0;
console.log("Вывод всех аргументов с помощью цикла for");
for (i; i < arguments.length; i++) {
console.log(i + 1 + " аргумент равен " + arguments[i]);
}
console.log("Вывод всех аргументов с помощью цикла for...of");
for (arg of arguments) {
console.log(arg);
}
}
// вызов функции sum
sum(7, 4, 3, 1);
Функция, выводящая в консоль все переданные ей аргументы и их количество:
// объявление функции
function myFunction () {
var i;
console.log("Количество переданных параметров = " + arguments.length);
// переберём все параметры с помощью цикла for
for (i = 0; i < arguments.length; i++) {
console.log(i + " параметр = " + arguments[i]);
}
}
// вызовы функции myFunction
myFunction(3, 7, 27, "JavaScript");
myFunction();
myFunction("Яблоки", "Груши", "Апельсины");
Функция, выполняющая сложение все переданных ей аргументов (их количество заранее неизвестно):
// объявление функции
var myCalc = function() {
// переберём все параметры с помощью цикла for
var i, sum = 0;
for (i = 0; i lt; arguments.length; i++) {
sum += arguments[i];
}
// возвратим в качестве результата сумму
return sum;
}
//вызов функции (вывод в консоль)
console.log(myCalc(4, 20, 17, -6));
В результате, посредством объекта arguments можно реализовать в теле функции: Кроме самой функции, доступ к аргументам, которые передаются ей на этапе вызова, имеют также другие функции, находящиеся в ней. Function mainF(p1, p2) {
function childF() {
console.log("p1 = " + p1 + "; p2 = " + p2);
}
childF();
}
mainF(3, 5); // p1 = 3; p2 = 5
mainF(4, 7); // p1 = 4; p2 = 7
Начиная с версии ECMAScript 2015 (6) параметру функции
можно задать значение, которое он будет иметь по умолчанию. Например
, установим параметру «color» значение по умолчанию, равное «#009688»: Function setBGColor(color = "#009688") {
document.body.style.backgroundColor = color;
}
setBGColor(); // цвет фона будет равен #009688
setBGColor("red"); // цвет фона будет равен red
До ECMAScript 2015 задать параметру значение по умолчанию можно, например, было так: Function setBGColor(color) {
color = color !== undefined ? color: "#009688"; // устанавливаем color значение по умолчанию, равное "#009688"
document.body.style.backgroundColor = color;
}
Если при вызове функции ей передать аргументов больше, чем у неё есть параметров, то получить оставшиеся можно с помощью, так называемых оставшихся параметров (rest patameters)
. Данная возможность в языке появилась, начиная с ECMAScript 2015.
// ...nums - оставшиеся параметры, к которым можно обратиться в данном случае по имени nums
function doMath(mathAction, ...nums) {
var result = 0;
nums.forEach(function(value) {
switch (mathAction) {
case "sum":
result += value;
break;
case "sumCube":
result += value**3;
break;
case "sumSquare":
result += value**2;
break;
deafult:
result = 0;
}
})
return result;
}
console.log(doMath("sum", 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4))
console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2)
console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)
Оператор return предназначен для возвращения значения или результата вычисления выражения текущей функции. Значение или выражение должно быть отделено от return посредством пробела. Кроме этого, оператор return прекращает выполнение функции, т.е. все инструкции, идущие после него, исполнены не будут. Функция в JavaScript всегда возвращает результат в вне зависимости от того, используется ли оператор return или нет.
// функция, возвращающая результат
function sayWelcome (userFirstName, userLastName) {
if ((!userFirstName) || (!userLastName))
return "Добро пожаловать, анонимный пользователь";
else
return "Добро пожаловать, " + userLastName + " " + userFirstName;
}
// объявление переменной person
var person;
// присвоить переменной person результат функции sayWelcome
person = sayWelcome("Иван","Иванов");
// вывести значение переменной в консоль
console.log(person);
//Инструкция, которая выведит в консоль результат работы функции sayWelcome
console.log(sayWelcome("Петр","Петров"));
//Инструкция, которая выведит в консоль результат работы функции sayWelcome
console.log(sayWelcome("Сидоров"));
JavaScript - Функция с проверкой параметров
Функция в JavaScript в результате своего выполнения всегда возвращает результат, даже если он явно не определён с помощью оператора return. Этот результат значение undefined.
// 1. функция, не возвращающая никакого результата
function sayWelcome (userFirstName, userLastName) {
console.log("Добро пожаловать, " + userLastName + " " + userFirstName);
}
// попробуем получить результат у функции, которая ничего не возвращает
console.log(sayWelcome ("Иван", "Иванов"));
// 2. функция, содержащая оператор return без значения
function sayDay (day) {
day = "Сегодня, " + day;
return;
//эта инструкция не выполнится, т.к. она идёт после оператора return
console.log(day);
}
// попробуем получить результат у функции, которая содержит оператор return без значения
console.log(sayDay("21 февраля 2016г."));
JavaScript - Получить значение у функции, которая ничего не возвращает
Такой же результат будет получен, если для оператора return не указать возвращаемое значение. Перегрузка функций в программировании – это возможность объявлять несколько функций с одинаковыми именами в одной области видимости. Отличаются такие функции друг от друга типом и числом аргументов. Каждая функция имеет свою программную логику. Используется перегрузка функций для того, чтобы с помощью одного имени функции можно было выполнять близкие действия. Язык JavaScript не поддерживает перегрузку функций в том виде, как это реализовано, например, в Си подобных языках. Т.е. в JavaScript нельзя создать несколько функций с одинаковыми именами, находящихся в одной области видимости. Подобную функциональность можно реализовать в JavaScript используя следующие действия: Например, создадим функцию, при вызове которой можно указывать один или два аргумента:
//объявление функции, которая изменяет цвет заднего фона элементов
function setBgColor(bgColor,elements) {
//если параметр elements при вызове не указан
if (elements=== undefined) {
//то приравнять его значение "div"
elements = "div";
}
//получить все элементы
elements = $(elements);
//перебрать все элементы и установить им указанный цвет заднего фона
elements.each(function(){
$(this).css("background-color",bgColor);
});
}
/*Вызвать функцию setBgColor, указав один параметр.
Т.к. 2 параметр не указан, то данная фукция изменит цвет заднего фона у всех элементов div.*/
setBgColor("green");
/*Вызвать функцию setBgColor, указав 2 параметра.
Т.к. 2 параметр задан, то данная функция изменит цвет заднего фона только элементов button.*/
setBgColor("#ff0000","button");
Произведём некоторые изменения в вышепредставленном коде. А именно, укажем для второго параметра значение по умолчанию:
//объявление функции, которая изменяет цвет заднего фона элементов
//параметр elements имеет значение "div" по умолчанию
function setBgColor(bgColor,elements = "div") {
//получить все элементы
elements = $(elements);
//перебрать все элементы и установить им указанный цвет заднего фона
elements.each(function(){
$(this).css("background-color",bgColor);
});
}
//вызвать функцию setBgColor, указав один параметр
setBgColor("green");
//вызвать функцию setBgColor, указав 2 параметра
setBgColor("#ff0000","button");
Пример, как в JavaScript можно реализовать «перегруженную» функцию, вычисляющую количество калорий, которых необходимо человеку в день:
// описание функции
function countCal(sex, height) { // параметры: sex (пол) и height (рост)
var result;
if ((sex === 0) || (sex === "man")) {
result = (height - 100) * 20;
} else if ((sex === 1) || (sex === "woman")) {
result = (height - 105) * 19;
}
if (result) {
// arguments - уровень активности
if (arguments) {
result *= arguments;
}
console.log("Количество ккал для нормальной жизнедеятельности: " + result);
} else {
console.log("Неверно указаны параметры");
}
}
/* вызов функции и передаче ей 2 аргументов (1 - "man", к нему можно обратиться с помощью имени sex и arguments; 2 - значение 185, к нему можно обратиться с помощью имени sex и arguments) */
countCal("man", 185);
/* вызов функции и передаче ей 3 параметров, хотя в описании функции присутствуют только 2 (получить значение 3 параметра в данном случае можно только как arguments) */
countCal(0, 185, 2);
Рекурсия – это вызов внутри тела некоторой функции самой себя. Вызов функции обычно осуществляется в зависимости от способа её объявления по имени или посредством переменной, содержащей ссылку на эту функцию. Function fact(n) {
if (n === 1) {
return 1;
}
return fact(n-1) * n;
}
console.log(fact(5)); // 120
Вызвать функцию внутри её тела можно не только по имени, но также с помощью свойства callee объекта arguments. Но данное свойство лучше не использовать, т.к. оно является устаревшим. Кроме этого в строгом режиме оно вообще не работает. В JavaScript имеется огромный набор встроенных (стандартных) функций. Данные функции уже описаны в самом движке браузера. Практически все они являются методами того или иного объекта. Например, для того чтобы вызвать встроенную функцию (метод) alert, её не надо предварительно объявлять. Она уже описана в браузере. Вызов метода alert осуществляется посредством указания имени, круглых скобок и аргумента внутри них. Данный метод предназначен для вывода сообщения на экран в форме диалогового окна. Текстовое сообщение берётся из значения параметра данной функции.
// вызов функции alert
alert("Некоторый текст");
JavaScript - Вызов функции alert
Начнём с того что язык JavaScript поддерживает концепцию ООП
(объектное ориентированное программирование). Это концепция состоит в том, что существуют такие элементы как объекты и у этих объектов есть различные свойства и методы(функции), которые позволяют управлять ими. Функция
- это отдельный блок кода, который состоит из одного или больше операторов. Оно имеет своё собственное(уникальное) название и может принимать различные параметры, в зависимости от которых может выполнит ту или иную операцию. Метод
- это тоже функция, но, он принадлежит уже какому-то классу или объекту. Для того чтобы вызывать какой-то метод
, необходимо сначала написать название объекта, потом через точку написать название метода. Исключением этого правила является вызов методов alert(), confirm() и prompt() объекта window. Их можно вызывать без того чтобы указать название объекта. С этими методами мы уже познакомились в этой статье . Также, в предыдущих статьях мы познакомились с методом вывода document.write()
, который принадлежит объекту document. Так вот, в программировании есть очень важная возможность, которая состоит в том, что можно создавать свои собственные функции
. Синтаксис функции выглядит таким образом: Для примера создадим простую функцию, которая добавит переданный текст в абзац и выведет его. И ещё сделает его жирным и курсивным. Function writeText(text){
//Добавляем текст в абзаце и выводим его
document.write(" " + text + " Сохраняем документ и открываем его в браузере. Замечание!
При объявлении функции, фигурные скобки должны быть обязательно, в независимости от того сколько там операторов. Основным плюсом использования функции это сокращение размера исходного кода скрипта
. Допустим, нам нужно перебрать три одномерных массивов. Как мы знаем из этой статьи: , массив перебирается с помощью цикла. Без функции код данного скрипта получится таким:
//объявляем три массива
var arr1 = ;
var arr2 = ["b", 5, 9.2, "h", 8, 2];
var arr2 = ;
for(var i = 0; i < arr1.length; i++){
document.write(" Элемент массива arr1, с индексом " + i + " равен: "+ arr1[i] +" Элемент массива arr2, с индексом " + i + " равен: "+ arr2[i] +" Элемент массива arr3, с индексом " + i + " равен: "+ arr3[i] +"Пример передачи функции по ссылке
Сворачивание параметров в объект
Что такое функция?
Объявление и вызов функции
Является ли функция в JavaScript объектом?
Параметры и аргументы функции
Значение параметров по умолчанию
Оставшиеся параметры (rest parameters)
Оператор return
Перегрузка функций в JavaScript
Рекурсия
Что такое встроенные (стандартные) функции?
Для чего нужны функции в программировании?
Так вот, для чтобы, не писать для каждого массива свой цикл, лучше использовать функцию в которой передаём массив, а она уже выведет на экран все его элементы. Таким образом мы, во-первых, сокращаем размер кода, а во-вторых избавляемся от повторяющего кода.
Function printArr(arr){ for(var i = 0; i < arr.length; i++){ document.write("
Элемент массива, с индексом " + i + " равен: "+ arr[i] +"
"); } } //объявляем три массива var arr1 = ; var arr2 = ["b", 5, 9.2, "h", 8, 2]; var arr2 = ; //Вызываем созданную функцию, для перебора каждого массива printArr(arr1); printArr(arr2); printArr(arr3);Параметры функции
Функция может принять любое количество параметров , от одного до бесконечности. Либо же, она может быть совсем без параметров.
Давайте создадим функцию без параметров , которая просто выведет на экран, классическую фразу "Hello world".
Function helloWorld(){ document.write("Hello World"); } //Вызываем функцию без параметров, helloWorld helloWorld();
Любой параметр функции, может иметь своё значение по умолчанию. Это значит, что если при вызове функции мы не передадим какое-то значение данному параметру, то он использует своё значение, которая задано по умолчанию.
Для примера создадим функцию, которая сложит две переданные числа. Если мы передадим только одно число, то, по умолчанию, второе число будет равна 4.
Function summa(number1, number2 = 4){ document.write("
Сумма чисел " + number1 + "(Первый параметр) и " + number2 + "(Второй параметр) равна: " + (number1 + number2) + "
"); } //Вызываем функцию, которая, по умолчанию выведет результат сложения переданного числа, с цифрой 4. summa(5); // Результат: 9 //Если предадим и второй параметр, то функция выведет результат сложения чисел из обоих параметров. summa(5, 20); // Результат: 25Ещё допускается чтобы внутри какой-то функции можно было бы вызывать другую существующею функцию.
Для примера, вызовем первую созданную нами функцию writeText() внутри предыдущей функции summa(). Функции writeText() передадим результат сложения чисел. В таком случае код функции summa() будет выглядеть уже так:
Function summa(number1, number2 = 4){ writeText(number1 + number2); } //Вызываем функцию summa summa(5); // Результат: 9 summa(5, 20); // Результат: 25
Функции которые возвращают какое-то значение
До сих пор мы писали функции, которые выводят результат на экран сразу.
Теперь же научимся как написать функцию, которая возвращает какой-то результат . Этот результат мы можем добавить в какую-то переменную и работать с ним дальше.
Для того чтобы лучше понять о чем идёт речь, вспомним такие методы как prompt() и confirm(). Эти методы именно возвращают значение, полученное от пользователя, а не выводят его.
Для примера создадим свою собственную функцию, которая будет возвращать последний элемент массива , переданного в качестве параметра.
Function lastElement(arr){ //Возвращаем последний элемент переданного массива return arr; } //Объявляем массив var otherArr = ["iphone", "asus", 2000, 9.8, "twix"]; //Вызываем созданную функцию lastElement и в качестве параметра передаем ей созданный массив otherArr var lastEl = lastElement(otherArr); //Выводим полученный последний элемент массива alert(lastEl);
В результате мы получим слово ‘twix’, так как именно это слово и есть последний элемент массива otherArr.
Метод alert() ничего не возвращает . То есть если мы попытаемся выводить переменную которая типа содержит результат вызова метода alert(), то увидим значение undefined . Это тоже самое как попытаться выводить значение пустой переменной.
Для примера возьмём результат последнего вызова alert() из предыдущего примера, помещаем его в переменную resAlert и используя созданную нами функцию writeText, попытаемся вывести полученный результат.
//Выводим полученный последний элемент массива var resAlert = alert(lastEl); var test; writeText(resAlert); //undefined writeText(test); //undefined
Как видим в обоих случаях получили значение undefined.
Глобальные и локальные переменные
Глобальные переменные - это те переменные, которые объявлены за пределами функции. То есть все те переменные, которые не объявлены внутри самой функции, являются глобальными . Они видны (действительны) во всем документе.
Локальные переменные - это те переменные, которые объявлены внутри самой функции . И они действительны только внутри данной функции. За её пределами, локальные переменные уже не будут работать.
Локальные и глобальные переменные никак не связаны между собой.
В примере из изображения, если бы мы попытались выводить содержимое переменной x, то получили бы сообщение undefined , потому что мы забыли вызвать функцию other().
Поэтому, для того чтобы сработали изменения производимые внутри функции, необходимо вызывать данную функцию.
Вызываем функцию other(), и если теперь попробуем вывести значение переменной x, то в результате увидим цифру 4.
Чтобы обратиться изнутри функции к глобальной переменной, не нужно нечего делать, надо просто использовать её. Изменения, производимые с глобальными переменными, будут видны за пределами функции.
Var x = 8; function increment(){ x++; } //Вызываем функцию increment() increment(); alert(x); //Результат: 9
Если мы не хотим, чтобы глобальная переменная изменилась, необходимо объявить локальную переменную (можно с таким же именем, как и у глобальной) и все действия будут произведены над ней.
Var g = 100; function func(){ var g = 14; g *= 2; // Это тоже самое что g = g * 2 alert(g);//Результат: 28 } //Вызываем функцию. func(); alert(g);//Результат: 100
На этом все дорогие читатели, теперь вы знаете что такое функция, как создать свою функцию , как вызывать функцию и какие типы функции существуют. Также Вы узнали что такое глобальные и локальные переменные .
Как я написал в начале статьи функции являются очень важными элементами , поэтому вы должны знать их на отлично.
Задачи
- Создайте функцию, которая принимает в качестве параметров две числа и возвращает результат умножения этих чисел.
- Выведите полученный результат.
Встроенная функция описывает какие-либо действия, которые она может совершить при её вызове. Описание действий встроенных функций скрыто от программиста. Примером таких действий может служить вычисление математического выражения и возвращение результата или манипуляция с содержимым html-документа. Функция может принимать параметры или аргументы, с которыми она производит какие-то действия. Аргументами могут служить как , так и .
Вызов функции производится следующим образом:
var a = functionName(par1, par2, …, parN);
В js существует множество встроенных функций для подсчёта математических выражений. Например, функция Math.sin, возвращает синус угла (угол задаётся в радианах), функция Math.sqrt вычисляет корень квадратный из числа, переданного ей в качестве параметра и т.д.
Например, вычислим корень квадратный из 256.
var b = Math.sqrt(256);
После выполнения кода одного из двух вышепредставленных примеров в переменной b будет содержаться значение 16.
Сегодня мы также рассмотрим две функции, которые позволят вашим скриптам хоть как-то сообщить какую-нибудь информацию внешнему миру. Вы вряд ли будете их использовать при написании реальных проектов, но они помогут вам в обучении.
Функция alert
Эта функция принимает в качестве параметра текстовое представление значение, которое она выведет на экран в унылом сером окошке с кнопкой «Ок». Пока пользователь не нажмёт эту кнопку, выполнения скрипта не продолжится.
Функция document.write
Эта функция пишет в html-документ текстовое представление значения переданного ей в качестве параметра. Никогда не используйте этот метод при написании скриптов, для реальных проектов, если, конечно, точно не знаете, что делаете. Если вызывать эту функцию после загрузки страницы, то, скорее всего, вы увидите пустую страницу с текстом, который вывел последний вызов этой функции.
Объект Math
В этом объекте содержатся функции для вычисления математических выражений и некоторые константы. Об объектах мы поговорим попозже. Для того, чтобы использовать объект Math вам надо лишь запомнить, что обращение к его свойствам (функциям и константам) необходимо написать Math.имяФункцииИлиКонстанты.
Свойства, которые содержит объект Math (слово «Math» опущено):
1. Константы
E 2.718281828459045
LN10 2.302585092994046 (логарифм натуральный 10)
LN2 0.6931471805599453 (логарифм натуральный 2)
LOG10E 0.4342944819032518 (логарифм десятичный e)
LOG2E 1.4426950408889634 (логарифм по основанию 2 числа e)
PI 3.141592653589793
SQRT1_2 0.7071067811865476 (корень квадратный из 0.5)
SQRT2 1.4142135623730951 (корень квадратный из двух)
2. Тригонометрические функции
sin – синус
cos – косинус
tan – тангенс
Угол, который в качестве аргумента принимают эти функции задаётся в радианах, а не в градусах. Для того, чтобы перевести значение угла из градусов в радианы необходимо умножить его на Math.PI и разделить на 180. И наоборот для того, чтобы перевести значение угла из радианов в градусы необходимо умножить его на 180 и разделить на Math.PI.
Таким образом, 60 градусов это π / 3 радиан, 30 градусов это π / 6 радиан и 45 градусов π / 4 радиан.
3. Обратные тригонометрические функции
acos – арккосинус от числа т.е. такой угол (в радианах), косинус которого равен аргументу
asin – арксинус от числа т.е. такой угол (в радианах), синус которого равен аргументу
atan – арктангенс от числа т.е. такой угол (в радианах), тангенс которого равен аргументу
atan2 – арктангенс от частного двух аргументов
3. Другие функции
abs – модуль числа
floor – целая часть числа, “пол“ или округление в меньшую сторону. Обратите внимание, что, например Math.floor(-0.9) и Math.floor(-0.1) это -1, а не ноль.
ceil – округление в большую сторону или «потолок»
exp – возвращает значение выражения e x , где x – это аргумент функции
log – возвращает натуральный логарифм числа
pow – принимает два аргумента и возвращает степень основание которой это первый аргумент, а показатель – второй.
max – принимает произвольное количество параметров и возвращает максимальный из них
min – принимает произвольное количество параметров и возвращает минимальный из них
random – возвращает случайное значение от 0 до 1
round – округляет число до единиц
sqrt – вычисляет корень квадратный из числа
Многие другие встроенные функции мы рассмотрим по ходу следующих уроков, а на сегодня всё.
