Функции в JavaScript
2026-03-10 21:43 Diff
https://otus.ru/nest/post/533/

Зачастую нам нужно повторять одни и те же действия в разных частях кода JavaScript. Например, иногда требуется передать сообщение при входе пользователя на сайт, при выходе и в других случаях.

Чтобы не повторять тот же код множество раз, используют функции (functions). По сути, функции — это основные «строительные кирпичики» программы на JavaScript.

Примеры встроенных функций: • prompt(message, default); • alert(message); • confirm(question).

Однако в JavaScript можно создавать и свои функции.

Объявление функций в JS

Рассмотрим пример создания function для показа сообщений showMessage():

function showMessage() { alert( 'Приветствуем вас на сайте!' ); }

В вышеприведённом примере ключевое слово — function, которое идёт в самом начале. Потом прописывается имя функции, затем параметры (в скобках), далее — тело функции (код, выполняемый при вызове).

Объявленная таким образом функция будет доступна по имени:

function showMessage() { alert( 'Приветствуем вас на сайте!' ); } showMessage(); showMessage();

Отображённый код выведет сообщение 2 раза, так как, грубо говоря, выше мы уже сформировали своеобразную ссылку на текст сообщения, в результате чего происходит передача данных. Это демонстрирует нам главную цель создания функций: решение проблемы излишнего дублирования кода в JavaScript. Если же вам понадобится поменять текст либо метод его вызова, это можно сделать лишь в одном месте — в функции, отвечающей за его вызов.

Локальные переменные функции

В функцию могут входить и локальные переменные (объявляются через var). Они видны только внутри функции:

function showMessage() { var message = 'Привет, моё имя — Петя!'; // это локальная переменная alert( message ); } showMessage(); // 'Привет, моё имя — Петя!' alert( message ); // <-- здесь ошибка, ведь переменная видна только внутри функции

Помните, что блоки while, switch, for, if/else, do..while никак не влияют на зону видимости переменных, то есть при объявлении переменных в данных блоках они будут видны во всей функции. Пример:

function count() { // переменные i и j не будут удалены по окончании цикла for (var i = 0; i < 3; i++) { var j = i * 2; } alert( i ); // i=3, последнее значение i, цикл при нём перестал работать alert( j ); // j=4, последнее значение j, которое цикл вычислил }

При этом неважно, где конкретно в function вы объявляете переменную. Вне зависимости от метода ваших действий объявление сработает одни раз и распространится на всю функцию:

function count() { var i, j; // здесь мы передвинули объявление var в начало for (i = 0; i < 3; i++) { j = i * 2; } alert( i ); // i=3 alert( j ); // j=4 }

Внешние переменные функции

Функция позволяет вызвать и внешнюю переменную, например:

var userName = 'Петя'; function showMessage() { var message = 'Привет, моё имя' + userName; alert(message); } showMessage(); // Привет, моё имя Петя

Доступ возможен на чтение и запись. Но раз переменная внешняя, изменения видны и снаружи функции:

var userName = 'Петя'; function showMessage() { userName = 'Коля'; // (1) передача во внешнюю переменную, присвоение других данных var message = 'Привет, я ' + userName; alert( message ); } showMessage(); alert( userName ); // Коля, т. к. значение внешней переменной у функции изменилось

Однако если бы мы внутри функции в строке (1) объявили свою локальную переменную var userName, все обращения задействовали бы её, то есть внешняя переменная не изменилась бы.

Параметры, которые можно вызвать функцией

При вызове function ей можно отправить данные для обработки. Например, нижеследующий код выведет 2 сообщения:

function showMessage(from, text) { // параметры from, text from = "** " + from + " **"; // здесь вставляем сложный код оформления alert(from + ': ' + text); } showMessage('Петя', 'Привет!'); showMessage('Петя', 'Как дела?');

Помните, что когда код будет передан, параметры скопируются в локальные переменные. Также функцию можно вызвать практически с любым количеством аргументов, а если при вызове параметр не будет передан, он считается равным undefined. К примеру, функцию отображения сообщений showMessage(from, text) можно без проблем вызвать, используя один аргумент:

Выбор имени function

При выборе имён в function применяют те же правила, что и когда выбирают имена переменной. Однако следует помнить, что именем должен быть глагол, ведь функция — это действие. Как правило, в качестве имени используют глагольные префиксы, плюс уточнения.

Функцию, которая что-то показывает, называют show (это лучший вариант для имени):

showMessage(..) // "показать" сообщение

Запуск function, которая что-то получает, называют get, вычисляет — calc и т. д.

Примеры, каким именем можно назвать функцию:

getAge(..) // get, "получает" возраст calcD(..) // calc, "вычисляет" дискриминант createForm(..) // create, "создаёт" форму checkPermission(..) // check, "проверяет" разрешение, возвращает true/false

Использование данного метода названия — удобная штука, ведь, взглянув на функцию, мы примерно поймём, что она делает, какое значение возвращает. И даже если эту функцию написал кто-то другой, вы будете иметь представление о ней.

Остаётся запомнить, что вне зависимости от метода названия, одна функция — это одно действие. Если функция подразумевает поддействия, желательно выделить их в отдельные функции.

Функция jQuery() в JavaScript

Говоря о применении функций в JS, нельзя не упомянуть jQuery — известнейшую библиотеку языка программирования JavaScript, благодаря которой осуществляется взаимодействие HTML и JavaScript. Работа с ней начинается с вызова основной функции jQuery() либо $(). Данная функция (function) может выполнять разные действия, что зависит от того, какое значение передать в качестве параметров аргумента.

Какие задачи решаются с помощью этой функции?

В зависимости от параметров возможно выполнение следующих действий: - поиск на основе селектора элементов в DOM-дереве и их возвращение в виде объекта; - оборачивание DOM-элементов, указанных в качестве параметров аргумента, в объект jQuery; - создание DOM-элементов в памяти с помощью HTML-строки, переданной в качестве аргумента функции; - выполнение указанной функции после того, как DOM-дерево окончательно загрузится браузером; - оборачивание простого JavaScript-объекта, содержащего ноль либо больше пар «ключ-значение» в объект jQuery; - клонирование объекта (актуально, если его нужно передать в качестве параметров функции).

Если параметры не указывать, то function возвращает пустой jQuery-объект.

Для примера рассмотрим функцию jQuery(html,attributes) и функцию jQuery(html[,ownerDocument]).

Функция jQuery(html,attributes)

Function служит для создания DOM-элемента с параметрами. Необходимый элемент указывается в первом аргументе с помощью HTML-строки. Атрибуты к нему указываются во втором аргументе с помощью объекта JavaScript (PlainObject).

Данный способ вызова функции имеет два параметра: • html — обязательный параметр типа htmlString, содержит DOM-элемент; • attributes — необязательный параметр типа PlainObject. Это объект, содержащий атрибуты, методы и события, которые нужно передать создаваемому элементу.

Примечание: необходимо, чтобы HTML-строка начиналась с <, а не с текстовых узлов. Что касается объекта PlainObject, то имя "class" необходимо заключить в кавычки (class — зарезервированное слово JavaScript). Имя "className" использовать тоже нельзя, ведь это имя относится к свойству, а не к атрибуту DOM.

Функция jQuery(html[,ownerDocument])

Эта function позволяет создавать DOM-узлы в памяти, что называется «на лету», используя HTML-строку, которую можно передать в качестве аргумента. Способ (метод) вызова функции даёт возможность запустить её с помощью двух параметров: - html — относится к обязательному параметру типа htmlString. По сути, это строка, содержащая HTML-код; - ownerDocument — относится к необязательным параметрам типа document.

Принцип работы функции: - анализируется значение параметров; - если он выглядит, как HTML-код, функция обрабатывает его с помощью метода $.parseHTML(); - после обработки запускается процесс создания DOM-узлов (применяется браузерный механизм .innerHTML); - в конечном итоге функция возвращает объект jQuery, включающий созданные DOM-узлы.

Если пользоваться только одним параметром, элементы создаются для текущего документа. Если хотите создать элементы для другого документа, нужно передавать и 1-й, и 2-й параметры.

Ссылки в JS

В заключении поговорим о ссылке в JavaScript. Под ссылкой будем понимать видимую часть текста или кода, нажатие на которую приведёт к переходу по ней. Рассмотрим три основных метода, в результате применения которых образуется кликабельная ссылка.

  • Самый простой метод, позволяющий осуществлять вызов — вывод alert в ссылке. Пример такой ссылки (ссылку можно запустить без проблем из любого браузера):
<a href = "javascript:alert('Привет Мир!');">Вызов ссылки</a>
  • Второй метод вызова ссылки имеет более сложную конструкцию. В этом случае ссылку можно сделать с помощью функции document.write(). А оформить такую ссылку можно следующим образом:
<script type="text/javascript">document.write('<a href="http://otus.ru/">текст ссылки</a>');</script>
  • В качестве третьего метода продемонстрируем ещё более усложнённый вариант. Ссылка и её вызов осуществляются с помощью переменных, т. к. сама ссылка и её текст выведены в отдельные переменные:
<script type="text/javascript"> desiredText = desiredLink = 'http://otus.ru/'; document.write('<a href="'+desiredLink+'">'+desiredText+'</a>'); </script>

Кроме того, можно вызывать ссылку через таблицу, div, ячейку таблицы и путём использования другого метода. Собственно говоря, использование этих методов для передачи ссылок — довольно странное занятие, если вспомнить, что у нас есть простые, эффективные и всем понятные решения с html и php.