Javascript var document 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="138654" 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/javascript-var-document-form/" content="Javascript var document form"> <meta itemprop="dateModified" content="2023-08-26"> <meta itemprop="datePublished" content="2023-08-28T04:06:10+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":"ea4cb145f7"};
/* ]]> */
</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>