Функции в JavaScript
Зачастую нам нужно повторять одни и те же действия в разных частях кода JavaScript. Например, иногда требуется передать сообщение при входе пользователя на сайт, при выходе и в других случаях.
Чтобы не повторять тот же код множество раз, используют функции (functions). По сути, функции — это основные «строительные кирпичики» программы на JavaScript.
Примеры встроенных функций: • prompt(message, default); • alert(message); • confirm(question).
Однако в JavaScript можно создавать и свои функции.
Объявление функций в JS
Рассмотрим пример создания function для показа сообщений
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) объявили свою локальную переменную
Параметры, которые можно вызвать функцией
При вызове function ей можно отправить данные для обработки. Например, нижеследующий код выведет 2 сообщения:
function showMessage(from, text) { // параметры from, text from = "** " + from + " **"; // здесь вставляем сложный код оформления alert(from + ': ' + text); } showMessage('Петя', 'Привет!'); showMessage('Петя', 'Как дела?');
Помните, что когда код будет передан, параметры скопируются в локальные переменные. Также функцию можно вызвать практически с любым количеством аргументов, а если при вызове параметр не будет передан, он считается равным undefined. К примеру, функцию отображения сообщений
showMessage("Петя");
Выбор имени function
При выборе имён в function применяют те же правила, что и когда выбирают имена переменной. Однако следует помнить, что именем должен быть глагол, ведь функция — это действие. Как правило, в качестве имени используют глагольные префиксы, плюс уточнения.
Функцию, которая что-то показывает, называют
showMessage(..) // "показать" сообщение
Запуск function, которая что-то получает, называют get, вычисляет — calc и т. д.
Примеры, каким именем можно назвать функцию:
getAge(..) // get, "получает" возраст calcD(..) // calc, "вычисляет" дискриминант createForm(..) // create, "создаёт" форму checkPermission(..) // check, "проверяет" разрешение, возвращает true/false
Использование данного метода названия — удобная штука, ведь, взглянув на функцию, мы примерно поймём, что она делает, какое значение возвращает. И даже если эту функцию написал кто-то другой, вы будете иметь представление о ней.
Остаётся запомнить, что вне зависимости от метода названия, одна функция — это одно действие. Если функция подразумевает поддействия, желательно выделить их в отдельные функции.
Функция jQuery() в JavaScript
Говоря о применении функций в JS, нельзя не упомянуть jQuery — известнейшую библиотеку языка программирования JavaScript, благодаря которой осуществляется взаимодействие HTML и JavaScript. Работа с ней начинается с вызова основной функции
Какие задачи решаются с помощью этой функции?
В зависимости от параметров возможно выполнение следующих действий: - поиск на основе селектора элементов в DOM-дереве и их возвращение в виде объекта; - оборачивание DOM-элементов, указанных в качестве параметров аргумента, в объект jQuery; - создание DOM-элементов в памяти с помощью HTML-строки, переданной в качестве аргумента функции; - выполнение указанной функции после того, как DOM-дерево окончательно загрузится браузером; - оборачивание простого JavaScript-объекта, содержащего ноль либо больше пар «ключ-значение» в объект jQuery; - клонирование объекта (актуально, если его нужно передать в качестве параметров функции).
Если параметры не указывать, то function возвращает пустой jQuery-объект.
Для примера рассмотрим функцию
Функция 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-код, функция обрабатывает его с помощью метода
Если пользоваться только одним параметром, элементы создаются для текущего документа. Если хотите создать элементы для другого документа, нужно передавать и 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.
