[Перевод] Учебный курс по React, часть 24: второе занятие по работе с формами22.03.2019 15:32

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

→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами

Занятие 42. Работа с формами, часть 2

→ Оригинал

На этом занятии мы поговорим о полях для ввода многострочного текста, о флажках, о переключателях (их ещё называют «радиокнопками») и о полях со списками. К настоящему моменту мы рассмотрели лишь работу с обычными текстовыми полями ввода.
Вот код компонента App, с которого мы начнём сегодняшние эксперименты:

import React, {Component} from "react"

class App extends Component {
    constructor() {
        super()
        this.state = {
            firstName: "",
            lastName: ""
        }
        this.handleChange = this.handleChange.bind(this)
    }
    
    handleChange(event) {
        const {name, value} = event.target
        this.setState({
            [name]: value
        })
    }
    
    render() {
        return (
            

                
                

                
                
                {
                    /**
                     * Другие полезные элементы форм:
                     * 
                     *  
                     * <input type="checkbox" />
                     * <input type="radio" />
                     * <select> и <option> 
                     */
                }
                
                <h1>{this.state.firstName} {this.state.lastName}</h1>
            </form>
        )
    }
}

export default App</code>
</pre><p>
<br />Вот как выглядит страница приложения в браузере на данном этапе работы.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/321/d91/e0e/321d91e0e382c1f40c5fb788410d1545.png" alt="321d91e0e382c1f40c5fb788410d1545.png" /></div><p>
<br /><em><span>Страница приложения в браузере</span></em></p>

<p>Формы обычно содержат в себе не только поля, в которые вводят короткие строки. При оснащении форм другими элементами работа с ними в React немного усложняется, хотя ничего особенного в этом нет.</p>

<p>В вышеприведённом коде есть закомментированный фрагмент, в котором перечислены элементы, о которых мы будем говорить. Начнём с поля для ввода многострочного текста — элемента <code>textarea</code>. Вероятно, понять то, как с ним работать, легче всего. Если вы раньше, строя обычные HTML-формы, уже пользовались этим элементом, вы знаете, что это — не самозакрывающийся тег, как было в случае с элементом <code>input</code>. У него есть открывающая и закрывающая части.<br />Добавим на форму этот элемент, вставив, сразу после комментария, следующий код: </p>

<pre>
<code class="javascript"><br />
<textarea>

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

Поле для ввода текста на странице

Как видно, это поле немного выше обычных полей, пользователь может менять его размеры, пользуясь маркером в его правой нижней части. Благодаря атрибутам rows и cols можно, при описании этого элемента, указывать его размеры. В обычном HTML, если нужно, чтобы после вывода этого поля в нём уже был какой-то текст, делается это путём ввода нужного текста между открывающим и закрывающим тегами элемента. В React работа с такими элементами сделана максимально похожей на работу с элементами input, о которых мы говорили в прошлый раз. А именно, в React тег textarea является самозакрывающимся. То есть код для вывода поля на страницу можно изменить следующим образом:

</code>
</pre><p>
<br />В этом теге можно использовать атрибут <code>value</code>, причём, работа с ним осуществляется точно так же, как и с таким же атрибутом обычных текстовых полей. Благодаря этому достигается единообразие в работе с разными элементами, и, кроме того, облегчается обновление содержимого полей путём обновления свойств состояния, привязанных к таким полям. Приведём состояние кода поля к такому виду: </p>

<pre>
<code class="javascript"><textarea value={"Some default value"}/></code>
</pre><p>
<br />Это приведёт к тому, что указанный текст появится в поле при выводе его на страницу.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/eca/720/1f0/eca7201f0d8fdb526908f7c1a967863d.png" alt="eca7201f0d8fdb526908f7c1a967863d.png" /></div><p>
<br /><em><span>Текст, появившийся в поле</span></em></p>

<p>К работе с полем для ввода многострочного текста мы ещё вернёмся, а пока поговорим о флажках. Флажок — это элемент управления <code>input</code>, в качестве типа которого указан <code>checkbox</code>. Вот как выглядит его описание: </p>

<pre>
<code class="javascript"><input type="checkbox" /></code>
</pre><p>
<br />Вот как выглядит флажок, описанный этой разметкой, на странице.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/f51/8f2/c29/f518f2c29b93d3af9c9c5ca46a4c1b24.png" alt="f518f2c29b93d3af9c9c5ca46a4c1b24.png" /></div><p>
<br /><em><span>Флажок</span></em></p>

<p>Основной особенностью этого элемента управления является тот факт, что при работе с ним не используется атрибут <code>value</code>. Его применяют для того, чтобы предоставить пользователю выбор их неких двух вариантов, один из которых соответствует установленному флажку, а другой — снятому. Для отслеживания того, установлен флажок или снят, используется атрибут <code>checked</code>, который описывается логическим значением. В результате флажкам обычно соответствуют логические свойства, хранящиеся в состоянии.</p>

<p>Приведём состояние компонента к такому виду: </p>

<pre>
<code class="javascript">this.state = {
    firstName: "",
    lastName: "",
    isFriendly: true
}</code>
</pre><p>
<br />Код описания флажка изменим следующим образом: </p>

<pre>
<code class="javascript"><input 
    type="checkbox" 
    checked={this.state.isFriendly}
/></code>
</pre><p>
<br />После этого на страницу будет выведен установленный флажок.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/b9f/73f/c71/b9f73fc715128b3b9e8b5f7f1956fcb9.png" alt="b9f73fc715128b3b9e8b5f7f1956fcb9.png" /></div><p>
<br /><em><span>Установленный флажок</span></em></p>

<p>Правда, сейчас он не будет реагировать на щелчки по нему. Дело в том, что флажок привязан к соответствующей переменной, хранящейся в состоянии, в результате при попытке, в нашем случае, снять его, React, проверяя состояние, и обнаруживая, что свойство <code>isFriendly</code> установлено в <code>true</code>, не даёт этого сделать. При этом в консоль будет выводиться предупреждение о том, что мы не предусмотрели механизм изменения поля (обработчик события <code>onChange</code>) и оно выведено в состоянии «только для чтения».</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/582/f7f/674/582f7f674398a8a8cf296ade12d0d2c8.png" alt="582f7f674398a8a8cf296ade12d0d2c8.png" /></div><p>
<br /><em><span>Предупреждение в консоли</span></em></p>

<p>Мы вполне можем написать особый метод для работы с флажком, но в коде нашего компонента уже есть метод <code>handleChange()</code>. Сейчас он используется для работы с текстовыми полями. Подумаем о том, как воспользоваться им и для работы с флажком. Для этого сначала назначим вышеуказанный метод в качестве обработчика события <code>onChange</code> флажка и назначим флажку имя, соответствующее имени свойства состояния, относящегося к флажку. Кроме того, подпишем флажок, воспользовавшись тегом <code>label</code>: </p>

<pre>
<code class="javascript"><label>
     <input 
        type="checkbox" 
        name="isFriendly"
        checked={this.state.isFriendly}
        onChange={this.handleChange}
    /> Is friendly?
</label></code>
</pre><p>
<br />В методе <code>handleChange()</code>, код которого показан ниже, мы, при работе с текстовыми полями, выясняли имя элемента (<code>name</code>) и его содержимое (<code>value</code>), после чего обновляли состояние, записывая в него то, что было у поля с определённым именем в его атрибуте <code>value</code>: </p>

<pre>
<code class="javascript">handleChange(event) {
    const {name, value} = event.target
    this.setState({
        [name]: value
    })
}</code>
</pre><p>
<br />Теперь нам нужно разобраться с тем, как быть с флажком, атрибута <code>value</code> у которого нет. У него есть лишь атрибут <code>checked</code>, который может принимать только значения <code>true</code> или <code>false</code>. В результате нам, для того чтобы использовать метод <code>handleChange()</code> для работы с флажком, нужно проверить, является ли элемент, для которого вызван этот обработчик, флажком. Для того чтобы выполнить эту проверку — вспомним, что в качестве типа (<code>type</code>) элемента <code>input</code>, представляющего флажок, задано значение <code>checkbox</code>. Для того чтобы проверить это значение, можно обратиться к свойству <code>type</code> элемента <code>event.target</code>. Извлечём это свойство из <code>event.target</code>, а также — свойство <code>checked</code>, воспользовавшись следующей конструкцией: </p>

<pre>
<code class="javascript">const {name, value, type, checked} = event.target</code>
</pre><p>
<br />Теперь мы можем проверить значение константы <code>type</code> и выяснить, является ли элемент, для которого вызван обработчик события, флажком. Если это так — мы запишем в состояние то, что оказалось в константе <code>checked</code>. Не забудем при этом сохранить код, ответственный за работу с текстовыми полями. В результате код <code>handleChange()</code> приобретёт следующий вид: </p>

<pre>
<code class="javascript">handleChange(event) {
    const {name, value, type, checked} = event.target
    type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
}</code>
</pre><p>
<br />После этого проверим работу флажка.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/53b/66e/db2/53b66edb273dcde53ff7ef5cb997ecee.png" alt="53b66edb273dcde53ff7ef5cb997ecee.png" /></div><p>
<br /><em><span>Проверка работы флажка</span></em></p>

<p>Как видно, теперь его можно снимать и устанавливать. При этом работа текстовых полей не нарушена. Из консоли исчезло уведомление, касающееся флажка, но там выводится уведомление, касающееся поля для ввода многострочного текста. Изменим код, описывающий это поле, следующим образом: </p>

<pre>
<code class="javascript"><textarea 
    value={"Some default value"}
    onChange={this.handleChange}
/></code>
</pre><p>
<br />Это приведёт к исчезновению уведомления, хотя другие механизмы, позволяющие работать с этим полем средствами компонента, мы не реализовали (не указали имя для поля, не добавили в состояние соответствующее свойство). Вы можете реализовать эти возможности самостоятельно. Теперь поговорим о переключателях.</p>

<p>Их можно представить в виде комбинации элементов <code>input</code> типов <code>text</code> и <code>checkbox</code>. Здесь имеется в виду то, что у переключателей есть и атрибут <code>value</code>, и атрибут <code>checked</code>. Добавим в нашу форму пару переключателей, создав их код на основе кода описания флажка. Вот как это выглядит: </p>

<pre>
<code class="javascript"><label>
    <input 
        type="radio" 
        name="gender"
        value="male"
        checked={this.state.isFriendly}
        onChange={this.handleChange}
    /> Male
</label>
<br />
<label>
    <input 
        type="radio" 
        name="gender"
        value="female"
        checked={this.state.isFriendly}
        onChange={this.handleChange}
    /> Female
</label></code>
</pre><p>
<br />Мы создали этот код на основе кода описания флажка и кое-что ещё не отредактировали. Поэтому переключатели странно себя ведут. В частности, если флажок снят, то и тот и другой переключатели находятся в «выключенном» состоянии, а если установить флажок — один из них оказывается «включенным». Подобные ошибки можно предупредить, внимательно относясь к коду элементов в том случае, если он создаётся на основе кода уже существующих элементов. Сейчас мы это исправим.<br />Обратите внимание на то, что у этих двух элементов одно и то же имя — <code>gender</code>. Переключатели с одним и тем же именем формируют группу. Выбранным может быть лишь один переключатель, входящий в такую группу.</p>

<p>При настройке переключателей нельзя просто указать на то, что их значение <code>checked</code> устанавливается, скажем, в <code>true</code>, если некое свойство состояния равняется <code>true</code>. Переключатели должны поддерживать синхронизированное, в пределах группы, изменение собственного состояния. Вместо этого значение <code>checked</code> переключателей устанавливается по условию. Это условие в нашем случае будет представлено сравнением свойства состояния <code>this.state.gender</code> со строкой <code>male</code> или <code>female</code>. В коде описания переключателей это выглядит так: </p>

<pre>
<code class="javascript"><label>
    <input 
        type="radio" 
        name="gender"
        value="male"
        checked={this.state.gender === "male"}
        onChange={this.handleChange}
    /> Male
</label>
<br />
<label>
    <input 
        type="radio" 
        name="gender"
        value="female"
        checked={this.state.gender === "female"}
        onChange={this.handleChange}
    /> Female
</label></code>
</pre><p>
<br />Теперь добавим в состояние новое свойство, <code>gender</code>, инициализировав его пустой строкой: </p>

<pre>
<code class="javascript">this.state = {
    firstName: "",
    lastName: "",
    isFriendly: false,
    gender: ""
}</code>
</pre><p>
<br />После этого переключатели будут работать независимо от флажка. Добавим в код, выводимый компонентом, заголовок второго уровня, выводящий сведения о том, какой именно переключатель выбран: </p>

<pre>
<code class="javascript"><h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2></code>
</pre><p>
<br />Тут, вероятно, стоит внедрить некий механизм условного рендеринга. Это позволит, при открытии страницы, когда ни один из переключателей не выбран, сделать так, чтобы на ней не выводился бы текст <code>You are a</code>, но мы этого делать не будем, хотя вы вполне можете реализовать это самостоятельно. Взглянем теперь на то, что у нас получилось.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/c8d/6cb/2aa/c8d6cb2aaf0847aacb2cb6c9175c623f.png" alt="c8d6cb2aaf0847aacb2cb6c9175c623f.png" /></div><p>
<br /><em><span>Переключатели на странице приложения</span></em></p>

<p>Всё то, о чём мы тут говорили, может показаться достаточно сложным. В частности, это касается запоминания особенностей разных элементов управления. Для того чтобы упростить работу с формами, можно применять специализированные библиотеки. Например — библиотеку formik. Эта библиотека значительно упрощает процесс разработки форм в React-приложениях.</p>

<p>Теперь поговорим о полях со списками.</p>

<p>В обычном HTML при описании полей со списком используются такие конструкции: </p>

<pre>
<code class="javascript"><select>
    <option></option>
    <option></option>
    <option></option>
<select/></code>
</pre><p>
<br />В React применяется похожий подход, хотя, как и в случае с другими элементами, используется атрибут <code>value</code>. Это позволяет легко выяснить то, какой именно элемент списка выбран, и, кроме того, это облегчает работу с состоянием компонента.</p>

<p>Предположим, мы хотим создать поле со списком, позволяющее пользователю выбирать его любимый цвет. Для этого в атрибут <code>value</code> элемента <code>select</code> можно поместить следующую конструкцию: <code>value={this.state.favColor}</code>. Сюда будут попадать те значения, которые будет выбирать пользователь. Теперь добавим <code>favColor</code> в состояние: </p>

<pre>
<code class="javascript">this.state = {
    firstName: "",
    lastName: "",
    isFriendly: false,
    gender: "",
    favColor: "blue"
}</code>
</pre><p>
<br />Далее, оснастим поле со списком обработчиком события <code>onChange</code> и дадим ему имя. Также назначим значения <code>value</code> элементам <code>options</code> поля со списком и введём текст, который будет выводиться в поле.</p>

<p>Вот как выглядит настроенный элемент <code>select</code> с подписью: </p>

<pre>
<code class="javascript"><label>Favorite Color:</label>
<select 
    value={this.state.favColor}
    onChange={this.handleChange}
    name="favColor"
>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
</select></code>
</pre><p>
<br />Теперь добавим в форму ещё одну надпись, выводящую любимый цвет пользователя: </p>

<pre>
<code class="javascript"><h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2></code>
</pre><p>
<br />Пришло время испытать поле со списком.</p>

<div><img src="https://habrastorage.org/getpro/habr/post_images/284/815/0d9/2848150d9503aa2cf0abc95f5c2cf702.png" alt="2848150d9503aa2cf0abc95f5c2cf702.png" /></div><p>
<br /><em><span>Поле со списком</span></em></p>

<p>Как видно, хотя наша форма и не блещет изысками дизайна, элементы управления, размещённые на ней, работают так, как ожидается.</p>

<p>Благодаря тому, как в React организованы API элементов управления, несложно сделать так, чтобы для обработки их событий применялся бы один и тот же обработчик. Именно такая схема работы используется и в нашем случае. Единственная особенность нашего обработчика <code>handleChange()</code> заключается в том, что нам приходится по-особенному обрабатывать события флажка.</p>

<p>Теперь поговорим об отправке формы или об обработке введённых в неё значений после завершения её заполнения. Можно выделить два подхода к выполнению подобных действий. При применении любого из них форму стоит оснастить кнопкой: </p>

<pre>
<code class="javascript"><button>Submit</button></code>
</pre><p>
<br />В HTML5, если в форме будет найден элемент <code>button</code>, он будет действовать как старый элемент <code>input</code> с типом <code>submit</code>. Если по этой кнопке щёлкнуть — будет вызвано событие самой формы <code>onSubmit</code>. Если нужно что-то сделать после завершения заполнения формы, можно добавить обработчик события <code>onClick</code> к кнопке, но, например, лично я предпочитаю обрабатывать подобные события на уровне формы, назначая ей обработчик события <code>onSubmit</code>: </p>

<pre>
<code class="javascript"><form onSubmit={this.handleSubmit}></code>
</pre><p>
<br />Метод, используемый в качестве обработчика этого события, ещё не написан. Это — обычный обработчик события, который, например, обращаясь к некоему API, передаёт ему данные формы.</p>

<h2><span>Итоги</span></h2><p>
<br />На этом занятии мы завершаем разговор о работе с формами в React. В следующий раз вас ждёт практическая работа по этой теме.</p>

<p><strong>Уважаемые читатели! </strong> Если вы пробовали использовать библиотеку formik для создания форм в React — просим об этом рассказать.</p>

<p><img src="https://habrastorage.org/files/1ba/550/d25/1ba550d25e8846ce8805de564da6aa63.png" alt="1ba550d25e8846ce8805de564da6aa63.png" /></p>
    
            <p class="copyrights"><span class="source">© <a target="_blank" rel="nofollow" href="https://habr.com/ru/post/444356/?utm_campaign=444356">Habrahabr.ru</a></span></p>
                    </div>
                                                    
            <br>
            <!--<div align="left">
                <script type="text/topadvert">
                load_event: page_load
                feed_id: 12105
                pattern_id: 8187
                tech_model:
                </script><script type="text/javascript" charset="utf-8" defer="defer" async="async" src="//loader.topadvert.ru/load.js"></script>
            </div>
            <br>-->

            <div style="padding-left: 20px;">
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2514821055276660"
                        crossorigin="anonymous"></script>
                <!-- PCNews 336x280 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-2514821055276660"
                     data-ad-slot="1200562049"
                     data-ad-format="auto"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
            <!-- comments -->
                            <noindex>
                    <div style="margin: 25px;" id="disqus_thread"></div>
                    <script type="text/javascript">
                        var disqus_shortname = 'pcnewsru';
                        var disqus_identifier = '887338';
                        var disqus_title = '[Перевод] Учебный курс по React, часть 24: второе занятие по работе с формами';
                        var disqus_url = 'http://pcnews.ru/blogs/%5Bperevod%5D_ucebnyj_kurs_po_react_cast_24_vtoroe_zanatie_po_rabote_s_formami-887338.html';

                        (function() {
                            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                        })();
                    </script>
                    <!--<noscript>Please enable JavaScript to view the <a rel="nofollow" href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>-->
                    <!--<a href="http://disqus.com" rel="nofollow" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>-->
                </noindex>
            
        </div>

        <br class="clearer"/>
    </div>
    <br class="clearer"/>

    

        <div id="footer-2nd"></div>

        <div id="footer">
            <br/><br/>
            <ul class="horz-menu">
                <li class="about"><a href="/info/about.html" title="О проекте">О
                        проекте</a></li>
                <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a>
                </li>
                <li class="additional-menu"><a href="/info/reklama.html"
                                               title="Реклама" class="menu-item"><strong>Реклама</strong></a>
                    <a href="/info/partners.html" title="Партнёры"
                       class="menu-item">Партнёры</a>
                    <a href="/info/legal.html" title="Правовая информация"
                       class="menu-item">Правовая информация</a>
                    <a href="/info/contacts.html" title="Контакты"
                       class="menu-item">Контакты</a>
                    <a href="/feedback.html" title="Обратная связь" class="menu-item">Обратная
                        связь</a></li>
                <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img
                                src="/media/i/email.gif" alt="e-mail"/></a></li>
                <li style="visibility: hidden">
                    <noindex>
                        <!-- Rating@Mail.ru counter -->
                        <script type="text/javascript">
                            var _tmr = window._tmr || (window._tmr = []);
                            _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()});
                            (function (d, w, id) {
                                if (d.getElementById(id)) return;
                                var ts = d.createElement("script");
                                ts.type = "text/javascript";
                                ts.async = true;
                                ts.id = id;
                                ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
                                var f = function () {
                                    var s = d.getElementsByTagName("script")[0];
                                    s.parentNode.insertBefore(ts, s);
                                };
                                if (w.opera == "[object Opera]") {
                                    d.addEventListener("DOMContentLoaded", f, false);
                                } else {
                                    f();
                                }
                            })(document, window, "topmailru-code");
                        </script>
                        <noscript>
                            <div style="position:absolute;left:-10000px;">
                                <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1"
                                     width="1" alt="Рейтинг@Mail.ru"/>
                            </div>
                        </noscript>
                        <!-- //Rating@Mail.ru counter -->

                    </noindex>
                </li>
            </ul>
        </div>

        <!--[if lte IE 7]>
        <iframe id="popup-iframe" frameborder="0" scrolling="no"></iframe>
        <![endif]-->
        <!--<div id="robot-image"><img class="rbimg" src="i/robot-img.png" alt="" width="182" height="305" /></div>-->
        <!--[if IE 6]>
        <script>DD_belatedPNG.fix('#robot-image, .rbimg');</script><![endif]-->

    </div>

<!--[if lte IE 7]>
<iframe id="ie-popup-iframe" frameborder="0" scrolling="no"></iframe>
<![endif]-->


    <div id="footer-adlinks"></div>

    
    
    
        <noindex>


            <!--LiveInternet counter--><script type="text/javascript">
                document.write("<a rel='nofollow' href='//www.liveinternet.ru/click' "+
                    "target=_blank><img src='//counter.yadro.ru/hit?t45.6;r"+
                    escape(document.referrer)+((typeof(screen)=="undefined")?"":
                        ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
                            screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
                    ";"+Math.random()+
                    "' alt='' title='LiveInternet' "+
                    "border='0' width='1' height='1'><\/a>")
            </script><!--/LiveInternet-->

            <!-- Rating@Mail.ru counter -->
            <script type="text/javascript">
                var _tmr = window._tmr || (window._tmr = []);
                _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()});
                (function (d, w, id) {
                    if (d.getElementById(id)) return;
                    var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
                    ts.src = "https://top-fwz1.mail.ru/js/code.js";
                    var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
                    if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
                })(document, window, "topmailru-code");
            </script><noscript><div>
                    <img src="https://top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" />
                </div></noscript>
            <!-- //Rating@Mail.ru counter -->



            <!-- Yandex.Metrika counter -->
            <script type="text/javascript">
                (function (d, w, c) {
                    (w[c] = w[c] || []).push(function () {
                        try {
                            w.yaCounter23235610 = new Ya.Metrika({
                                id: 23235610,
                                clickmap: true,
                                trackLinks: true,
                                accurateTrackBounce: true,
                                webvisor: true,
                                trackHash: true
                            });
                        } 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/23235610" style="position:absolute; left:-9999px;" alt=""/>
                </div>
            </noscript>
            <!-- /Yandex.Metrika counter -->

            <!-- Default Statcounter code for PCNews.ru http://pcnews.ru-->
            <script type="text/javascript">
                var sc_project=9446204;
                var sc_invisible=1;
                var sc_security="14d6509a";
            </script>
            <script type="text/javascript"
                    src="https://www.statcounter.com/counter/counter.js"
                    async></script>
            <!-- End of Statcounter Code -->

            <script>
                (function (i, s, o, g, r, a, m) {
                    i['GoogleAnalyticsObject'] = r;
                    i[r] = i[r] || function () {
                            (i[r].q = i[r].q || []).push(arguments)
                        }, i[r].l = 1 * new Date();
                    a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                    a.async = 1;
                    a.src = g;
                    m.parentNode.insertBefore(a, m)
                })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

                ga('create', 'UA-46280051-1', 'pcnews.ru');
                ga('send', 'pageview');

            </script>

            <script async="async" src="/assets/uptolike.js?pid=49295"></script>

        </noindex>
    



<!--<div id="AdwolfBanner40x200_842695" ></div>-->
<!--AdWolf Asynchronous Code Start -->

<script type="text/javascript" src="https://pcnews.ru/js/blockAdblock.js"></script>

<script type="text/javascript" src="/assets/jquery.min.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.json.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/jquery/effects.core.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/js/browser-sniff.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/js/scripts.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-utils.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-auth.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-fiximg.js"></script>
<script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-infobox.js"></script>
</body>
</html>