{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет! Если ты сделал прошлую статью и у тебя есть страница с кнопкой — отлично. Сегодня мы добавим JavaScript, чтобы кнопка не просто выглядела красиво, а реально что-то делала.","type":"unstyled","key":"8r5eh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого при клике она будет:","type":"unstyled","key":"bn0iq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"показывать всплывающее сообщение,","type":"unordered-list-item","key":"769if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"менять цвет,","type":"unordered-list-item","key":"3m9lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"менять надпись.","type":"unordered-list-item","key":"5v4s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И всё это на чистом JS — без сложных библиотек.","type":"unstyled","key":"iur8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что понадобится","type":"header-two","key":"9tq83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Твой файл index.html из прошлой статьи.","type":"unordered-list-item","key":"bqrs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер.","type":"unordered-list-item","key":"b6el7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1. Куда вставлять JavaScript","type":"header-two","key":"cc11q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открой index.html и найди закрывающий тег . Прямо перед ним (но внутри ) мы добавим наш скрипт:","type":"unstyled","key":"bvj72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n\n","type":"unstyled","key":"be7p9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему именно здесь?","type":"header-two","key":"eklb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер читает страницу сверху вниз. Если поставить скрипт в , он попытается найти кнопку до того, как она появится на странице, — и выдаст ошибку. А если поставить перед , кнопка уже будет на месте, и всё сработает.","type":"unstyled","key":"f9ofp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2. Находим кнопку и вешаем событие","type":"header-two","key":"bacb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставь внутрь тега ","type":"unstyled","key":"b401b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полный код (всё вместе)","type":"header-two","key":"epokt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот как теперь выглядит весь файл index.html. Можешь скопировать его целиком и заменить содержимое своего файла — так точно ничего не потеряется:","type":"unstyled","key":"1dk01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8hnp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bkk5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"etjb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b9rad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Моя первая страница","type":"unstyled","key":"1jo9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aaith"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8hend"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"287al"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"3jst2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Привет, это мой первый сайт!

","type":"unstyled","key":"d7rj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"crk9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"75ke3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Я только учусь верстать, но уже могу сделать простую страницу.

","type":"unstyled","key":"afm85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"dbiuc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Карточка проекта

","type":"unstyled","key":"44hu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это пример блока, который мы стилизуем чуть ниже.

","type":"unstyled","key":"f2jdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8qeuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"b52nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"876t3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8mdl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"57njv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f3rov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"92pjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разбор важных моментов","type":"header-two","key":"5pt13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const button — создаём переменную, в которой храним ссылку на кнопку.","type":"unordered-list-item","key":"b3btr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"addEventListener — самый частый способ реагировать на действия пользователя (клик, наведение и т. д.).","type":"unordered-list-item","key":"eek08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"style.backgroundColor — меняем стиль через JS.","type":"unordered-list-item","key":"f9oio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"textContent — меняем текст внутри элемента.","type":"unordered-list-item","key":"13ai7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Домашнее задание (на 3–5 минут)","type":"header-two","key":"78sj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуй сделать одно из этого — или всё по очереди:","type":"unstyled","key":"a3hru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Поменяй сообщение. В строке alert('Ура! Кнопка работает!') напиши своё, например: alert('Привет, я сделал свою первую интерактивную кнопку!').","type":"ordered-list-item","key":"f0mfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Поменяй цвет. Вместо #28a745 поставь любой другой. Например, красный — #dc3545, оранжевый — #fd7e14.","type":"ordered-list-item","key":"74h75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Сделай сброс. Попробуй добавить вторую кнопку «Сбросить», которая возвращает цвет и текст обратно. Подсказка: для этого нужно запомнить исходный цвет и текст в переменных до обработчика клика.","type":"ordered-list-item","key":"f1b7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если получилось — сделай скриншот и сохрани как «мой первый интерактивный сайт». Это уже реальный мини-проект, который можно положить в портфолио.","type":"unstyled","key":"2qtdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дисклеймер","type":"header-two","key":"1e88g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я сам когда-то боялся выкладывать первые статьи. Поэтому честно скажу: это не идеальный код для большого проекта, но он идеально подходит для первого шага. Если заметишь неточность — напиши в комментариях, обсудим. Мне важно, чтобы новичкам было понятно.","type":"unstyled","key":"81omc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А в следующей статье мы попробуем сделать простую форму, которая собирает имя пользователя и показывает приветствие.","type":"unstyled","key":"b15k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":132,"offset":0,"style":"BOLD"}],"text":"Напиши в комментариях, какой цвет кнопки ты выбрал или кидай скриншот результата. Буду рад увидеть твой первый интерактивный проект! \uD83D\uDC9B","type":"unstyled","key":"4ho5s"},{"data":{"image":{"id":"6a86e1181a21644bf466c04a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"56p2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5a3f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"WjY7F9WSQlT16CRqv83e"}],"entityMap":{}},"mentions":[]}