Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

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

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

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

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

5 <h2>Объявление функций в JS</h2>

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

7 function showMessage() { alert( 'Приветствуем вас на сайте!' ); }В вышеприведённом примере ключевое слово -function, которое идёт в самом начале. Потом прописывается имя функции, затем параметры (в скобках), далее - тело функции (код, выполняемый при вызове).

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

9 function showMessage() { alert( 'Приветствуем вас на сайте!' ); } showMessage(); showMessage();Отображённый код выведет сообщение 2 раза, так как, грубо говоря, выше мы уже сформировали своеобразную ссылку на текст сообщения, в результате чего происходит передача данных. Это демонстрирует нам главную цель создания функций:решение проблемы излишнего дублирования кода в JavaScript. Если же вам понадобится поменять текст либо метод его вызова, это можно сделать лишь в одном месте - в функции, отвечающей за его вызов.

10 <h2>Локальные переменные функции</h2>

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

12 function showMessage() { var message = 'Привет, моё имя - Петя!'; // это локальная переменная alert( message ); } showMessage(); // 'Привет, моё имя - Петя!' alert( message ); // <-- здесь ошибка, ведь переменная видна только внутри функцииПомните, что блокиwhile, switch, for, if/else, do..whileникак не влияют на зону видимости переменных, то есть при объявлении переменных в данных блоках они будут видны во всей функции. Пример:

13 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 вы объявляете переменную. Вне зависимости от метода ваших действий объявление сработает одни раз и распространится на всю функцию:

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

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

16 var userName = 'Петя'; function showMessage() { var message = 'Привет, моё имя' + userName; alert(message); } showMessage(); // Привет, моё имя ПетяДоступ возможен на чтение и запись. Но раз переменная внешняя, изменения видны и снаружи функции:

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

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

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

20 function showMessage(from, text) { // параметры from, text from = "** " + from + " **"; // здесь вставляем сложный код оформления alert(from + ': ' + text); } showMessage('Петя', 'Привет!'); showMessage('Петя', 'Как дела?');Помните, что когда код будет передан, параметры скопируются в локальные переменные. Также функцию можно вызвать практически с любым количеством аргументов, а если при вызове параметр не будет передан, он считается равнымundefined. К примеру, функцию отображения сообщений showMessage(from, text) можно без проблем вызвать, используя один аргумент:

21 <h2>Выбор имени function</h2>

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

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

24 showMessage(..) // "показать" сообщениеЗапускfunction, которая что-то получает, называют get, вычисляет - calc и т. д.

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

26 getAge(..) // get, "получает" возраст calcD(..) // calc, "вычисляет" дискриминант createForm(..) // create, "создаёт" форму checkPermission(..) // check, "проверяет" разрешение, возвращает true/falseИспользование данного метода названия - удобная штука, ведь, взглянув на функцию, мы примерно поймём, что она делает, какое значение возвращает. И даже если эту функцию написал кто-то другой, вы будете иметь представление о ней.

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

28 <h2>Функция jQuery() в JavaScript</h2>

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

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

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

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

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

34 <h2>Функция jQuery(html,attributes)</h2>

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

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

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

38 <h2>Функция jQuery(html[,ownerDocument])</h2>

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

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

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

42 <h2>Ссылки в JS</h2>

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

44 <ul><li>Самый простой метод, позволяющий осуществлять вызов - вывод alert в ссылке. Пример такой ссылки (ссылку можно запустить без проблем из любого браузера):</li>

45 </ul><a href = "javascript:alert('Привет Мир!');">Вызов ссылки</a><ul><li>Второй метод вызова ссылки имеет более сложную конструкцию. В этом случае ссылку можно сделать с помощью функции document.write(). А оформить такую ссылку можно следующим образом:</li>

46 </ul><script type="text/javascript">document.write('<a href="http://otus.ru/">текст ссылки</a>');</script><ul><li>В качестве третьего метода продемонстрируем ещё более усложнённый вариант. Ссылка и её вызов осуществляются с помощью переменных, т. к. сама ссылка и её текст выведены в отдельные переменные:</li>

47 </ul><script type="text/javascript"> desiredText = desiredLink = 'http://otus.ru/'; document.write('<a href="'+desiredLink+'">'+desiredText+'</a>'); </script>Кроме того, можно вызывать ссылку через таблицу, div, ячейку таблицы и путём использования другого метода. Собственно говоря, использование этих методов для передачи ссылок - довольно странное занятие, если вспомнить, что у нас есть простые, эффективные и всем понятные решения с html и php.