{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет! В прошлый раз мы сделали кнопку, которая меняла цвет и показывала сообщение. Сегодня шаг чуть сложнее, но такой же понятный: сделаем форму, где пользователь вводит своё имя, нажимает кнопку — и мы показываем персональное приветствие.","type":"unstyled","key":"dmp96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это уже похоже на настоящий мини-проект: есть ввод данных, есть реакция на действие, есть результат. И всё на чистом JavaScript.","type":"unstyled","key":"ab8g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что понадобится","type":"header-two","key":"8j2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Твой файл index.html (можно взять из прошлой статьи или начать с чистого листа).","type":"unordered-list-item","key":"fpui2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер.","type":"unordered-list-item","key":"d4o4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1. Добавляем форму в HTML","type":"header-two","key":"d1j8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открой index.html и внутри .card (рядом с кнопкой или вместо неё) добавь такой блок:","type":"unstyled","key":"f0cap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ijl2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7vr7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что тут важного:","type":"header-two","key":"fav0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— это контейнер формы. Мы дали ему id=\"name-form\", чтобы потом найти через JS.","type":"unordered-list-item","key":"8o0d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — поле для ввода текста. id=\"user-name\" нужен, чтобы JS мог прочитать, что туда написали.","type":"unordered-list-item","key":"1vpov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"required — браузер не даст отправить форму пустым полем. Это простой способ избежать ошибок.","type":"unordered-list-item","key":"8mhv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— пустой блок, куда мы позже выведем приветствие. Пока он пустой, но скоро там появится текст.","type":"unordered-list-item","key":"6hufs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2. Куда ставить скрипт","type":"header-two","key":"513re"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как и в прошлый раз, скрипт ставим прямо перед закрывающим тегом :","type":"unstyled","key":"c9m8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n\n \n","type":"unstyled","key":"364ol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему именно здесь? Чтобы к моменту запуска скрипта все элементы (форма, поле, кнопка) уже существовали на странице. Если поставить скрипт в , он может попытаться найти элементы раньше, чем они появятся, — и выдаст ошибку.","type":"unstyled","key":"9f5b3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3. Находим элементы и обрабатываем отправку","type":"header-two","key":"e1ptf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставь внутрь ","type":"unstyled","key":"9eg5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a6la7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7kp69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разбор важных моментов","type":"header-two","key":"4kdfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"id у элементов — это «адрес», по которому JS их находит.","type":"unordered-list-item","key":"a7ah5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Событие submit — это именно то, что происходит при отправке формы (в том числе при нажатии Enter в поле ввода).","type":"unordered-list-item","key":"avm9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.preventDefault() — спасает от перезагрузки страницы.","type":"unordered-list-item","key":"a0cep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Домашнее задание (на 5–7 минут)","type":"header-two","key":"esbi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуй сделать одно или несколько улучшений:","type":"unstyled","key":"5vebv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Сделай приветствие веселее. Поменяй текст в output.textContent на что-то своё, например: «Ого, ${name}, ты сделал форму! Ты крут!»","type":"ordered-list-item","key":"2l4sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Добавь эмодзи. Вставь эмодзи прямо в строку, JS это отлично понимает: `Привет, ${name}! \uD83C\uDF89`.","type":"ordered-list-item","key":"4t2bt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Сбрось форму. После показа приветствия можно очистить поле: input.value = '';. Попробуй добавить эту строчку после вывода приветствия.","type":"ordered-list-item","key":"300tj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Разные приветствия. Сделай так, чтобы если имя «МИР» — выводилось одно сообщение, а для всех остальных — другое. Подсказка: используй if (name === 'МИР').","type":"ordered-list-item","key":"b1gd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если получилось — сделай скриншот: форма + приветствие. Это уже полноценный мини-проект, который можно смело класть в портфолио.","type":"unstyled","key":"2s07p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дисклеймер ","type":"header-two","key":"3k3u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я сам когда-то боялся выкладывать первые статьи. Поэтому честно скажу: это не идеальный код для большого корпоративного проекта, но он идеально подходит для первого шага. Если заметишь неточность — напиши в комментариях, обсудим. Мне важно, чтобы новичкам было понятно.","type":"unstyled","key":"4mrrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А в следующей статье мы попробуем сохранить имя в localStorage, чтобы при обновлении страницы приветствие не пропадало. Или можем сделать простую валидацию (например, запретить вводить цифры). Что тебе ближе?","type":"unstyled","key":"4qdca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":107,"offset":0,"style":"BOLD"}],"text":"Напиши в комментариях, какое имя ты ввёл и какой текст приветствия сделал. Буду рад увидеть твой результат! \uD83D\uDC9B","type":"unstyled","key":"7abqf"},{"data":{"image":{"id":"6a86e4988bdbcd2a5cd6a844"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4pb5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bn7u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"uk7Ks00e5mJPlv7IpJK5"}],"entityMap":{}},"mentions":[]}