Form tag and javascript

HTML Tag

An HTML form with two input fields and one submit button:

More «Try it Yourself» examples below.

Definition and Usage

The tag is used to create an HTML form for user input.

The element can contain one or more of the following form elements:

Browser Support

Attributes

Attribute	Value	Description
accept-charset	character_set	Specifies the character encodings that are to be used for the form submission
action	URL	Specifies where to send the form-data when a form is submitted
autocomplete	on off	Specifies whether a form should have autocomplete on or off
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how the form-data should be encoded when submitting it to the server (only for method=»post»)
method	get post	Specifies the HTTP method to use when sending form-data
name	text	Specifies the name of a form
novalidate	novalidate	Specifies that the form should not be validated when submitted
rel	external help license next nofollow noopener noreferrer opener prev search	Specifies the relationship between a linked resource and the current document
target	_blank _self _parent _top	Specifies where to display the response that is received after submitting the form

Источник

Формы и javascript. FORM

Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM .

Свойства форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора

• action. Значение атрибута ACTION тега FORM .
• encoding. Значение атрибута ENCTYPE тега FORM .
• method. Значение атрибута METHOD тега FORM .
• target. Значение атрибута TARGET тега FORM .
• elements. Массив всех элементов формы.
• length. Размер массива elements.

Элементы форм

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

Метод

Пример

      
Нажатие кнопки
 

Нажатие кнопки

Флажок (CHECKBOX)

Свойства

• name. Имя объекта.
• value. Надпись на кнопке.
• checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
• defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

Метод

Пример

    
Метод click флажка
 Флажок Состояние флажка можно изменить и этой кнопкой 

Метод click флажка

Переключатель (RADIO)

Свойства

• name. Имя объекта.
• value. Надпись на кнопке.
• length. Количество переключателей в группе.
• checked. Состояние переключателя: true — переключатель включен, false — выключен.
• defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

Метод

Пример

     
Метод click группы переключателей
 Мужской Женский Состояние переключателей можно изменить и этой кнопкой 

Метод click группы переключателей

Список (SELECT)

Свойства

• name. Имя объекта.
• selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE ).
• length. Количество элементов (строк) в списке.
• options. Массив элементов списка, заданных тегами OPTION .

• value. Значение атрибута VALUE .
• text. Текст, указанный после тега OPTION .
• index. Индекс элемента списка.
• selected. Присвоив этому свойству значение true , можно выбрать данный элемент.
• defaultSelected. Отражает наличие атрибута SELECTED : true — есть, false — нет.

Методы

Пример

     
Работа с готовым списком
  Чай Кофе Молоко Какао Сок 

Работа с готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE , третий соответствует свойству defaultSelected , четвертый — свойству selected .

Пример

    
Динамическое заполнение списка
         

Динамическое заполнение списка

Поле ввода (TEXT)

Свойства

• name. Имя объекта.
• defaultValue. Начальное содержимое поля.
• value. Текущее содержимое поля.

Методы

• focus( ). Передает полю фокус ввода.
• blur( ). Отбирает у поля фокус ввода.
• select( ). Выделяет содержимое поля.

Пример

      
Заполните анкету
   Фамилия: Имя: Возраст: Телефон: 

Заполните анкету

Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase , определенный во встроенном классе строк.

Текстовая область (TEXTAREA)

Свойства

• name. Имя объекта.
• defaultValue. Начальное содержимое области.
• value. Текущее содержимое области.

Методы

• focus( ). Передает области фокус ввода.
• blur( ). Отбирает у области фокус ввода.
• select( ). Выделяет содержимое области.

Пример

      
Отправьте телеграмму
  Явка в норме  Явка провалена 

Отправьте телеграмму

Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

   <script>function setCaretPosition(o, pos) < o=document.getElementById(o); if(o.setSelectionRange) < o.focus(); o.setSelectionRange(pos,pos); >else if (o.createTextRange) < // IE var range = o.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); >></script> </code></pre> <p><h3 id="pole-vvoda-parolya-password">Поле ввода пароля (PASSWORD)</h3><br/> <h4 id="svoystva-7">Свойства</h4></p> <ul> <li><b>name</b>. Имя объекта.</li> <li><b>defaultValue</b>. Начальное содержимое поля.</li> <li><b>value</b>. Текущее содержимое поля.</li> </ul> <p><h4 id="metody-4">Методы</h4></p> <ul> <li><b>focus( )</b>. Передает полю фокус ввода.</li> <li><b>blur( )</b>. Отбирает у поля фокус ввода.</li> <li><b>select( )</b>. Выделяет содержимое поля.</li> </ul> <p><h4 id="primer-8">Пример</h4></p> <pre><code > <html> <head> <script> //--></script> </head> <h2>Регистрация</h2>  <TABLE>Идентификатор: Пароль: Проверка пароля:</TABLE> </html></code></pre> <h2 id="registratsiya">Регистрация</h2> <p><h3 id="kak-ya-mogu-ispolzovat-select-box-kak-navigatsionnoe">Как я могу использовать select box как навигационное меню?</h3></p> <p>При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:</p> <p>Просто сохраните URL различных страниц в <i>option value</i>. Обработчик события <i>OnChange</i> вызовет перенаправление расположения, когда значение в поле изменено. Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением <b>‘self.location =’</b> на ‘<b>top.framename.location =</b>‘ </p> <p><h3 id="kak-ya-mogu-ispolzovat-kartinku-dlya-knopki">Как я могу использовать картинку для кнопки submit?</h3></p> <p>Часто возникает вопрос: «Как инициировать форму по картинке, а не по кнопке submit?» Решение столь же просто, как этот пример:</p> <p>Когда нажимается любая кнопка, форма инициируется и координаты <i>x/y</i> щелчка мыши на кнопке загружаются в объект <i>запроса</i>. Например, если пользователь выбрал <i>Cancel!</i>, объект запроса будет содержать переменные <i>cancel.x</i> и <i>cancel.y</i>. Точно так же щелчок на <i>Continue</i> привел бы к переменным <i>continue.x</i> и <i>continue.y</i>. Здесь важно отметить, что элементы <i>.x</i> и <i>.y</i> — не переменные объектов <i>continue</i> или <i>cancel</i>, а фактически часть имени <i>«continue.x»</i>. Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:</p> <pre>if (request.normalItem) act(); if (request.continue.x) // Noooo! Produces horrible error messages! doContinuingThings();</pre> <pre>if (request['normalItem']) act(); if (<b>request['continue.x']</b>) // Much better :) doContinuingThings();</pre> <p>Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму. Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах <i>image_element.x</i> и <i>image_element.y</i>. Следующий <b>серверный</b> JavaScript мог бы использоваться для этого:</p> <p>x=0; y=0; if ((request[‘my_submit_image.x’]) (request[‘my_submit_image.y’]))<br/> <h3 id="peredacha-dannyh-mezhdu-formami-na-razlichnyh">Передача данных между формами на различных страницах</h3></p> <p>В качестве простого примера, предположите, что ваша «домашняя» страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search. <br/><b>home.html</b></p> <pre> <html> <head> <script language="JavaScript">function nextPage() < self.location = "next.html?name=" + escape(document.theForm.userName.value); // Use escape() any time there might be spaces or >// non-alpa characters</script> </head>  Enter your name:</html> </pre> <pre>userName = document.search; userName = userName.substring(userName.indexOf("=")+1); document.write("Greetings, " + userName + "");</pre> <p><h3 id="pochemu-document-formname-selectobject-value">Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?</h3></p> <p>Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к <i>VALUE</i> только что выбранным полем в списке — это:</p> <pre>Document.form.selectObject[document.form.selectObject.selectedIndex].value</pre> <pre>Document.form.selectObject[document.form.selectObject.selectedIndex].text</pre> <p><h3 id="kak-mne-poluchit-znachenie-vybrannoy-v-dannyy">Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?</h3></p> <p>Существует свойство, созданное в объекте <i>form</i> для каждой <i>radio buttons</i> или <i>checkboxes</i> с тем же самым <i>именем</i>. Например, следующий HTML код:</p> <pre> <form name='theForm'>Male Female Not Specified</form> </pre> <p>приводит к созданию 3-х элементов массива, вызываемых с помощью <i>document.theForm.gender.</i> Чтобы определить значение выбранной кнопки (или checkbox’а), вам нужно проверить свойство <i>checked</i> каждого из элементов. Например:</p> <p>Для получения и установки значения radio button value на javascript можно использовать следующие функции:</p> <pre><code >function getCheckedValue(radioObj) < if(!radioObj) return ""; var radioLength = radioObj.length; if(radioLength == undefined) if(radioObj.checked) return radioObj.value; else return ""; for(var i = 0; i < radioLength; i++) < if(radioObj[i].checked) < return radioObj[i].value; >> return ""; > function setCheckedValue(radioObj, newValue) < if(!radioObj) return; var radioLength = radioObj.length; if(radioLength == undefined) < radioObj.checked = (radioObj.value == newValue.toString()); return; >for(var i = 0; i < radioLength; i++) < radioObj[i].checked = false; if(radioObj[i].value == newValue.toString()) < radioObj[i].checked = true; >> ></code></pre> <p><h3 id="kak-mne-poluchit-formu-chtoby-initsiirovat">Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?</h3></p> <p>Форма отправляется, если нажата клавиша <i>enter</i>, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события <i>onSubmit</i> (или <i>action ) для накопления данных из других форм в вашей странице и инициируйте их все сразу. </p> <p><h3 id="kak-ya-mogu-otklyuchit-pole-tekstovogo-vvoda">Как я могу отключить поле текстового ввода?</h3><br/> <h3 id="kak-sdelat-zagruzku-stranitsy-pri-vybore">Как сделать загрузку страницы при выборе флажка?</h3></p> <h3 id="sohranenie-dannyh-v-lokalnoe-hranilische">Сохранение данных в локальное хранилище браузера:</h3> <p>sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку). localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.</p> <pre><code > <style>#idVhod < display: none; /* изначально скрыт */ ></style> <button onclick="onclickVhod()">открыть</button> <span текст</span> <script>var idVhod = document.getElementById('idVhod'); function onclickVhod() < idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline' localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в объект hide >if(localStorage.getItem('hide') == 'inline') < // если значение объекта hide "inline" document.getElementById('idVhod').style.display = 'inline'; >//localStorage.removeItem('hide') // удалить один элемент //localStorage.clear() // удалить все элементы</script> </code></pre> <h3 id="osobennosti-onclick-onsubmit-onreset">Особенности onClick, onSubmit, onReset</h3> <ul> <li>метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки</li> <li>метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки</li> <li>метод reset() у формы — влечет за собой вызов обработчика onReset у формы</li> <li>НО метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!</li> </ul> <h3 id="dom-obekt-elementa-input">DOM объект элемента INPUT:</h3> <pre>interface HTMLInputElement : HTMLElement < attribute DOMString <b>accept</b>; attribute DOMString <b>alt</b>; attribute DOMString <b>autocomplete</b>; attribute boolean <b>autofocus</b>; attribute boolean <b>defaultChecked</b>; attribute boolean <b>checked</b>; attribute DOMString <b>dirName</b>; attribute boolean <b>disabled</b>; readonly attribute HTMLFormElement? <b>form</b>; readonly attribute FileList? <b>files</b>; attribute DOMString <b>formAction</b>; attribute DOMString <b>formEnctype</b>; attribute DOMString <b>formMethod</b>; attribute boolean <b>formNoValidate</b>; attribute DOMString <b>formTarget</b>; attribute unsigned long <b>height</b>; attribute boolean <b>indeterminate</b>; readonly attribute HTMLElement? <b>list</b>; attribute DOMString <b>max</b>; attribute long <b>maxLength</b>; attribute DOMString <b>min</b>; attribute boolean <b>multiple</b>; attribute DOMString <b>name</b>; attribute DOMString <b>pattern</b>; attribute DOMString <b>placeholder</b>; attribute boolean <b>readOnly</b>; attribute boolean <b>required</b>; attribute unsigned long <b>size</b>; attribute DOMString <b>src</b>; attribute DOMString <b>step</b>; attribute DOMString <b>type</b>; attribute DOMString <b>defaultValue</b>; attribute DOMString <b>value</b>; attribute Date? <b>valueAsDate</b>; attribute double <b>valueAsNumber</b>; attribute unsigned long <b>width</b>; void <b>stepUp</b>(optional long n); void <b>stepDown</b>(optional long n); readonly attribute boolean <b>willValidate</b>; readonly attribute ValidityState <b>validity</b>; readonly attribute DOMString <b>validationMessage</b>; boolean <b>checkValidity</b>(); void <b>setCustomValidity</b>(DOMString error); readonly attribute NodeList <b>labels</b>; void <b>select</b>(); attribute unsigned long <b>selectionStart</b>; attribute unsigned long <b>selectionEnd</b>; attribute DOMString <b>selectionDirection</b>; void <b>setSelectionRange</b>(unsigned long start, unsigned long end, optional DOMString direction); >;</pre> <p><a href="https://htmlweb.ru/java/forms.php">Источник</a></p> <div class="fpm_end"></div> </div><!-- .entry-content --> </article> <div class="rating-box"> <div class="rating-box__header">Оцените статью</div> <div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="75928" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div> </div> <div class="entry-social"> <div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--facebook" data-social="facebook"></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span></div> </div> <meta itemprop="author" content="admin"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://business-programming.ru/form-tag-and-javascript/" content="Form tag and javascript"> <meta itemprop="dateModified" content="2023-08-24"> <meta itemprop="datePublished" content="2023-08-25T23:49:28+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="Программирование"><meta itemprop="telephone" content="Программирование"><meta itemprop="address" content="https://business-programming.ru"></div> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="block-2" class="widget widget_block"><div class="flatPM_sidebar" data-top="70"> <div id="Q_sidebar"></div> </div></div> </div> </aside><!-- #secondary --> <div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/yaschiki-s-usami-python/">Ящики с усами python</a></div><div class="post-card__description">pandas.plotting.boxplot# Make a box-and-whisker plot</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-74/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-73/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">HTML Размеры таблицы HTML таблицы могут иметь разные</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-72/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> </div></div> </div><!--.site-content-inner--> </div><!--.site-content--> <div class="site-footer-container "> <div class="footer-navigation fixed" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner full"> <div class="menu-tehnicheskoe-menyu-container"><ul id="footer_menu" class="menu"><li id="menu-item-12637" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12637"><a href="https://business-programming.ru/pravoobladatelyam/">Правообладателям</a></li> <li id="menu-item-12638" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12638"><a href="https://business-programming.ru/politika-konfidentsialnosti/">Политика конфиденциальности</a></li> <li id="menu-item-12639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12639"><a href="https://business-programming.ru/kontakty/">Контакты</a></li> </ul></div> </div> </div><!--footer-navigation--> <footer id="colophon" class="site-footer site-footer--style-gray full"> <div class="site-footer-inner fixed"> <div class="footer-bottom"> <div class="footer-info"> © 2024 Программирование </div> <div class="footer-counters"><!-- Yandex.Metrika counter --> <script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(97921369, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script> <noscript><div><img src="https://mc.yandex.ru/watch/97921369" style="position:absolute; left:-9999px;" alt=""/></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </div> </footer><!--.site-footer--> </div> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){   window.open( e.target.getAttribute("data-uri") ); }); }</script><script type="text/javascript" id="reboot-scripts-js-extra">
/* <![CDATA[ */
var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"};
var wps_ajax = {"url":"https:\/\/business-programming.ru\/wp-admin\/admin-ajax.php","nonce":"892cdd8a27"};
/* ]]> */
</script> <script type="text/javascript" src="https://business-programming.ru/wp-content/themes/reboot/assets/js/scripts.min.js" id="reboot-scripts-js"></script> <script>window.lazyLoadOptions = [{
                elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
                data_src: "lazy-src",
                data_srcset: "lazy-srcset",
                data_sizes: "lazy-sizes",
                class_loading: "lazyloading",
                class_loaded: "lazyloaded",
                threshold: 300,
                callback_loaded: function(element) {
                    if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
                        if (element.classList.contains("lazyloaded") ) {
                            if (typeof window.jQuery != "undefined") {
                                if (jQuery.fn.fitVids) {
                                    jQuery(element).parent().fitVids();
                                }
                            }
                        }
                    }
                }},{
				elements_selector: ".rocket-lazyload",
				data_src: "lazy-src",
				data_srcset: "lazy-srcset",
				data_sizes: "lazy-sizes",
				class_loading: "lazyloading",
				class_loaded: "lazyloaded",
				threshold: 300,
			}];
        window.addEventListener('LazyLoad::Initialized', function (e) {
            var lazyLoadInstance = e.detail.instance;

            if (window.MutationObserver) {
                var observer = new MutationObserver(function(mutations) {
                    var image_count = 0;
                    var iframe_count = 0;
                    var rocketlazy_count = 0;

                    mutations.forEach(function(mutation) {
                        for (var i = 0; i < mutation.addedNodes.length; i++) {
                            if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
                                continue;
                            }

                            if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
                                continue;
                            }

                            images = mutation.addedNodes[i].getElementsByTagName('img');
                            is_image = mutation.addedNodes[i].tagName == "IMG";
                            iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
                            is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
                            rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');

                            image_count += images.length;
			                iframe_count += iframes.length;
			                rocketlazy_count += rocket_lazy.length;

                            if(is_image){
                                image_count += 1;
                            }

                            if(is_iframe){
                                iframe_count += 1;
                            }
                        }
                    } );

                    if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
                        lazyLoadInstance.update();
                    }
                } );

                var b      = document.getElementsByTagName("body")[0];
                var config = { childList: true, subtree: true };

                observer.observe(b, config);
            }
        }, false);</script><script data-no-minify="1" async src="https://business-programming.ru/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt){var t='<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">',a='<button class="play" aria-label="play Youtube video"></button>';t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script> </body> </html>