{"draftJsState":{"blocks":[{"data":{"image":{"id":"5be4636d85262700aa3e1187"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"24evs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":253,"offset":0,"style":"ITALIC"}],"text":"Профессия веб-разработчика — одна из самых востребованных на IT-рынке. Давайте разберемся, как прийти в нее, выясним, как работают и взаимодействуют между собой технологии веб-разработки, и на практическом примере попробуем создать свою первую страницу.","type":"unstyled","key":"aq4le"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":48,"offset":37}],"inlineStyleRanges":[],"text":"Текст подготовлен на основе вебинара «Как стать веб-разработчиком с нуля за 3 месяца» с участием Михаила Овчинникова из компании Badoo.","type":"unstyled","key":"2sm6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Ситуация на рынке","type":"header-two","key":"fkje9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:","type":"unstyled","key":"dcteb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":1,"offset":12,"style":"BOLD"}],"text":"1. Frontend — самая «громкая» и быстроразвивающаяся отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также язык разметки гипертекста HTML и таблицы стилей CSS.","type":"unstyled","key":"1aqqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"2. Web-development, а именно backend-разработка с использованием различных языков, например, PHP, Ruby и Python.","type":"unstyled","key":"9mng7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"3. Android/iOS-development — разработка под мобильные устройства на языках Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.","type":"unstyled","key":"e4ks1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"4. .NET-development — разработка как десктопных приложений под операционную систему Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.","type":"unstyled","key":"8jdh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"5. Java-development — разработка кросс-платформенных приложений на языке Java, а также крупных высокопроизводительных систем с использованием технологии Java EE. Ее выбирают, когда нужны надежность, масштабируемость и гибкость.","type":"unstyled","key":"7k7j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"6. Game development — разработка игр под различные платформы.","type":"unstyled","key":"e6rd5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"7. UI/UX — проектирование пользовательских интерфейсов.","type":"unstyled","key":"e0is6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"8. QA — обеспечение качества программного обеспечения и его тестирование.","type":"unstyled","key":"48q6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"9. Embedded development — разработка программного обеспечения под «железо»: автомобили, бытовую технику и различные устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.","type":"unstyled","key":"2rad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Почему стоит идти в веб","type":"header-two","key":"94e4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас веб-разработка — настолько быстро развивающаяся отрасль, что стоит изучить одну технологию либо фреймворк и начать с ними работать, как через два-три месяца на рынке появится что-то совершенно новое и все начнут использовать именно это.","type":"unstyled","key":"84ka7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-разработка постоянно пополняется молодыми специалистами. Senior-программистов с десятью годами стажа можно встретить довольно редко: либо из них успевают вырасти управленцы, либо им приходится осваивать новые языки. Этот бурный рост отрасли формирует широкое информационное поле и крепкое сообщество.","type":"unstyled","key":"7v2us"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому, если вы молоды, полны энергии, имеете чувство вкуса, да еще и с любовью относитесь к программированию, веб-разработка — для вас.","type":"unstyled","key":"efpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Сколько зарабатывает веб-разработчик","type":"header-two","key":"bdjot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изучив сайты поиска работы, можно увидеть весь диапазон зарплат веб-разработчиков. Новичок, у которого меньше полугода опыта, может зарабатывать от 30 000 до 60 000 рублей. Средний специалист с хорошим стажем получает 80 000–150 000 рублей. Доход профессионала составляет 150 000–250 000 рублей. Вдобавок, многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.","type":"unstyled","key":"bt4ik"},{"data":{"image":{"id":"5be463820ec29100aa809620"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зарплаты frontend-разработчика от сервиса зарплат компании «Мой круг» на сайте habrahabr.ru (конец 2017 года)","type":"atomic:image","key":"arf69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Что нужно знать веб-разработчику","type":"header-two","key":"1lpko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Про веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.","type":"unstyled","key":"1jrnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Что веб-разработчику не требуется:","type":"header-three","key":"3v8ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Знать математику — большинству программистов, которые профессионально занимаются созданием сайтов и веб-сервисов, достаточно знаний на уровне 5 класса.","type":"unordered-list-item","key":"gj7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иметь глубокие знания английского языка. Полсотни слов может вполне хватить.","type":"unordered-list-item","key":"der1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Учиться несколько лет и заканчивать институт, чтобы освоить базовую веб-разработку. На деле ее освоение займет два-три месяца обучения.","type":"unordered-list-item","key":"7bnec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Что понадобится для успешного старта:","type":"header-three","key":"6v0ht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изучить базовые технологии создания сайтов — HTML и CSS — и понять принципы построения структуры сайтов. На это уйдет несколько недель.","type":"unordered-list-item","key":"bjiih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Освоить сопутствующие технологии: редакторы кода либо IDE (интегрированные среды разработки), например Notepad++, Sublime Text, Brackets, WebStorm, PHPStorm. Эти инструменты сильно ускорят процесс разработки.","type":"unordered-list-item","key":"3rp7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Знать о существовании фреймворков и готовых решений, которые упрощают и улучшают код. Например, для frontend-разработчика это фреймворк для верстки Bootstrap, библиотека языка JavaScript — JQuery, с помощью которой написано множество других полезных и нужных библиотек, и Simfony — PHP-фреймворк общего назначения, который облегчает взаимодействие с базой данных, задачи формирования HTML-кода и задачи принятия данных из запроса.","type":"unordered-list-item","key":"e82d0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не менее важно и умение правильно составлять поисковые запросы, пользоваться качественными и проверенными источниками информации.","type":"unordered-list-item","key":"e6tq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Структура веб-сайта","type":"header-two","key":"9b3lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала давайте выясним что такое сайт и из чего он состоит.","type":"unstyled","key":"5ss4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Технически, сайт — просто набор текстовых файлов, имеющих определенные расширения, хранящихся в одном каталоге на компьютере или сервере. Кроме них в структуру каталога могут входить подпапки с изображениями, шрифтами и дополнительными библиотеками, использующимися на нем. В зависимости от назначения и формата файлов их сортируют по соответствующим папкам. Главная страница сайта, как правило, лежит в корне каталога и называется index.html.","type":"unstyled","key":"e62uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, если бы наш сайт имел домен mysite123.com, то и папка, в которой он лежит, называлась бы так же и имела примерно такую структуру:","type":"unstyled","key":"1564r"},{"data":{"image":{"id":"5be463820bb73a00aa0c80e0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура каталога сайта","type":"atomic:image","key":"ircp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда в адресной строке браузера мы вводим адрес, например, yandex.ru, браузер обращается к серверу соответствующего сайта. Это то, с чего начинается взаимодействие с любой страницей в сети.","type":"unstyled","key":"8ihq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В ответ на этот запрос на сервере yandex.ru начинают работать backend-технологии, например, PHP и MySQL. Они делают свою «серверную магию» и в ответ на запрос «покажи мне главную страницу» отдают обратно браузеру искомую страницу в виде HTML, CSS и JavaScript-кода. Браузер умеет распознавать этот код и в результате выводит в своем окне красивую, работающую «Главную».","type":"unstyled","key":"2amuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Ресурсы и инструменты для веб-разработки","type":"header-two","key":"7529h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для качественного и продуктивного освоения веб-разработки познакомимся с наиболее популярными источниками информации, а также некоторыми инструментами.","type":"unstyled","key":"1j3vk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"HTML и CSS:","type":"header-three","key":"drddb"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":0}],"inlineStyleRanges":[],"text":"htmlbook.ru — самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;","type":"unordered-list-item","key":"98bi7"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":14,"offset":0}],"inlineStyleRanges":[],"text":"htmlacademy.ru — интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;","type":"unordered-list-item","key":"3koq7"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":9,"offset":0}],"inlineStyleRanges":[],"text":"webref.ru — самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;","type":"unordered-list-item","key":"3p5t0"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":20,"offset":0}],"inlineStyleRanges":[],"text":"«Погружение в HTML5» Марка Пилгрима.","type":"unordered-list-item","key":"chga9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"JavaScript:","type":"header-three","key":"3hp6l"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":19,"offset":0}],"inlineStyleRanges":[],"text":"learn.javascript.ru — самый современный самоучитель по JavaScript;","type":"unordered-list-item","key":"f75c8"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":35,"offset":0}],"inlineStyleRanges":[],"text":"«JavaScript. Подробное руководство» Дэвида Флэнагана.","type":"unordered-list-item","key":"br1a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После освоения этих технологий рекомендуется также изучить JQuery — самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и с такими полезными библиотеками, как Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js и другими.","type":"unstyled","key":"8t5lv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для ускорения написания кода и удобной работы с ним советуем использовать текстовые редакторы, такие как Sublime Text с плагином Emmet, редактором Notepad++, Brackets, IDE WEBStorm, PHPStorm и другими полезными инструментами.","type":"unstyled","key":"21rqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для ускорения написания CSS-кода полезно будет научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.","type":"unstyled","key":"9h2d9"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":43,"offset":17},{"key":8,"length":42,"offset":64},{"key":9,"length":55,"offset":110}],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"},{"length":4,"offset":23,"style":"BOLD"},{"length":16,"offset":28,"style":"BOLD"},{"length":7,"offset":45,"style":"BOLD"},{"length":14,"offset":53,"style":"BOLD"},{"length":9,"offset":68,"style":"BOLD"},{"length":4,"offset":78,"style":"BOLD"},{"length":9,"offset":83,"style":"BOLD"},{"length":1,"offset":93,"style":"BOLD"},{"length":6,"offset":95,"style":"BOLD"},{"length":11,"offset":102,"style":"BOLD"},{"length":5,"offset":114,"style":"BOLD"},{"length":14,"offset":120,"style":"BOLD"},{"length":6,"offset":135,"style":"BOLD"},{"length":14,"offset":142,"style":"BOLD"},{"length":8,"offset":157,"style":"BOLD"}],"text":"Читайте также\n• Какой язык программирования выбрать новичку\n• Как перестать быть джуниором и начать жить\n• Как стать программистом? Советы преподавателей Skillbox","type":"blockquote","key":"b8716"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Создаем простую веб-страницу","type":"header-two","key":"6jnpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы уже узнали,веб-страница — это файл с расширением .html, в которой содержится HTML-код. Он представляет собой набор определенных тегов, заключенных с обеих сторон в угловые скобки. Теги бывают закрывающие и незакрывающие.","type":"unstyled","key":"6bdfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Воспользуемся текстовым редактором Sublime Text 3 и создадим в нем новый файл index.html.","type":"unstyled","key":"bqmj6"},{"data":{"image":{"id":"5be4638218b02c00a9be9505"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл index.html","type":"atomic:image","key":"dbe24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь у нас есть стандартная структура HTML-документа. Откры созданную страницу в браузере, вы увидите пустой белый фон. Все содержимое страницы, которое выводится в браузере, помещается между открывающим и закрывающим тегами и — а пока что у нее есть только title, отображаемый во вкладке браузера, но нет никакого наполнения.","type":"unstyled","key":"637lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим несколько элементов. Для каждого из них есть свой тег. Для начала создадим заголовок и дополним его текстом и кнопкой.","type":"unstyled","key":"4hcih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для добавления заголовка используется тег

, для параграфа текста — тег
, а для кнопки — тег ","type":"blockquote","key":"a7oht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1ha0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dkrn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь обновим страницу. Как видите, элементы появились в окне браузера.","type":"unstyled","key":"4rqtm"},{"data":{"image":{"id":"5be46382a8d1cc00aa1ad754"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dfkoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Язык HTML, который мы использовали до сих пор, отвечает лишь за создание структуры страницы. Давайте попробуем немного стилизовать наши элементы: поменяем цвета заголовка и фона кнопки, а для текста параграфа изменим размер шрифта.","type":"unstyled","key":"23tdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для изменения стиля элементов необходимо применить к ним CSS-правила. CSS-правила можно записать внутри блока с тегом ","type":"blockquote","key":"vten"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разместить его следует между тегами . Как вы могли заметить, названия свойств говорят сами за себя. Это простые английские слова, записанные согласно определенному синтаксису, свойственному языку программирования. Снова обновим страницу и посмотрим, что получилось.","type":"unstyled","key":"9njiq"},{"data":{"image":{"id":"5be4638217adb400aa1ca624"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"24vgc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично. Теперь установим фон, а кнопку сделаем более заметной. Добавим следующие правила для кнопки и фона:","type":"unstyled","key":"dco1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {","type":"blockquote","key":"2jl2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: orange;","type":"blockquote","key":"fgkch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 300px;","type":"blockquote","key":"cm8u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 50px;","type":"blockquote","key":"4gkek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: white;","type":"blockquote","key":"2t186"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 30px;","type":"blockquote","key":"alsge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"ch171"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {background-color: lightgray;}","type":"blockquote","key":"ddan5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пора дополнить все это великолепие картинкой. Добавим к существующим элементам тег , который и отвечает за отображение изображений на странице. Он включает такой атрибут, как src (от англ. source — источник), который указывает на путь к картинке. Наша картинка лежит на диске D.","type":"unstyled","key":"102n3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3jeok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так можно создавать множество элементов на странице, а затем с помощью CSS-правил придавать им нужные вид и расположение.","type":"unstyled","key":"1rd9e"},{"data":{"image":{"id":"5be46385600f7f00ab7b8cf0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"21be5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте сделаем так, чтобы при наведении курсора на кнопку она становилась белой, а текст внутри нее — оранжевым. За состояние элемента при наведении на него курсора в CSS отвечает псевдокласс hover. Добавим несколько правил для нашей кнопки и после этого попробуем навести на нее курсор.","type":"unstyled","key":"c0122"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button:hover {background-color: white; color: orange;}","type":"blockquote","key":"31q0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все сработало! Кнопка поменяла свой вид.","type":"unstyled","key":"dsr6e"},{"data":{"image":{"id":"5be463853ec37000a9001563"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7fae5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь попробуем сделать нашу картинку по умолчанию невидимой и устроим все так, чтобы она появлялась только по нажатию на кнопку. За видимость объектов отвечает CSS-свойство visibility. Установим ему значение hidden.","type":"unstyled","key":"b5ssm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"img {visibility: hidden;}","type":"blockquote","key":"bep5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите, картинка исчезла.","type":"unstyled","key":"1la47"},{"data":{"image":{"id":"5be46385151d1700aaf9b2e7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2fra4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вернем нашу картинку и нажмем на кнопку «Показать». Ничего не произошло? Все потому, что мы еще не запрограммировали кнопку на выполнение действия. Здесь мы уже можем применить JavaScript.","type":"unstyled","key":"dggap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Зачем нужен JavaScript","type":"header-two","key":"cphu7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас мы имеем статическую страницу, которая содержит простой контент. Для того чтобы назначить какое-то событие в качестве реакции для нажатия на кнопку, и нужен язык JavaScript. Вообще любая интерактивность на сайте, любое взаимодействие с пользователем — это JavaScript. Код JavaScript, как и CSS, записывается в определенном теге — ","type":"blockquote","key":"do5cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также необходимо явно указать кнопке, что она должна реагировать на какое-то событие. В нашем случае это одиночный клик. То есть при клике по кнопке должна выполниться ранее созданная функция show.","type":"unstyled","key":"d0idk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ardjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь конструкция document.getElementById('cat') выполняет обращение к элементу по идентификатору cat, который прикреплен к нашей картинке. Укажем, что обращаемся к стилю элемента, а конкретно — к свойству visibility, и устанавливаем через знак «=» значение visible в кавычках.","type":"unstyled","key":"2pdrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы хотите, чтобы при нажатии на кнопку менялся и фон страницы, добавьте в функцию и этот код:","type":"unstyled","key":"9slg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.body.style.background = 'green';","type":"blockquote","key":"3h8k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите, и правда просто.","type":"unstyled","key":"ato3f"},{"data":{"image":{"id":"5be4638618b02c00a9be9506"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1rpa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо того чтобы вручную менять свойства объектов в коде, JavaScript это сделал за нас.","type":"unstyled","key":"1on0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Как сайты хранят данные","type":"header-two","key":"e3drp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сам сайт данные не хранит. Он лишь отображает их на своих страницах. Профили пользователей, списки товаров и услуг, а с ними и прочая информация лежат в базе данных на сервере. На новостном сайте все новости также хранятся в базе данных.","type":"unstyled","key":"faco1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте себе, если бы каждый раз, когда какой-нибудь онлайн-магазин пополняет свой список товаров, приходилось вручную вставлять блоки с информацией о них в HTML-код страницы. Сложно представить, насколько рутинным было бы это занятие. Вместо человека этот процесс должен выполняться программой.","type":"unstyled","key":"br0nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для таких целей и существуют серверные языки, например PHP. Скрипты, написанные на PHP, умеют работать с базой данных в автоматическом режиме. Типовая задача, которую решает PHP-код, — это получить какой-то запрос от пользователя, обработать его, сходить в базу данных, забрать нужные и вывести их пользователю.","type":"unstyled","key":"fe72o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует много других языков для этих целей, но PHP в связке с MySQL — системой управления базой данных (СУБД) — считаются наиболее простым вариантом для освоения новичком.","type":"unstyled","key":"8o0r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того чтобы постоянно пополнять сайт новым контентом, существуют системы управления контентом (CMS), или так называемые движки. Кстати, одна из наиболее популярных CMS, Wordpress, как раз написана на языке PHP.","type":"unstyled","key":"8pgi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подводя итог, можно сказать, что для того, чтобы сделать сайт «живым», необходимо овладеть как минимум вышеперечисленными технологиями.","type":"unstyled","key":"4ll87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-two","key":"cbq9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы поговорили о том, какой стек знаний должен иметь начинающий программист. Разобрались с основами сайтостроения и попробовали создать свою первую веб-страницу. Еще раз перечислим основные навыки веб-разработчика:","type":"unstyled","key":"f2iq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Знание языков.","type":"unordered-list-item","key":"53k5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Умение пользоваться готовыми решениями, библиотеками и фреймворками.","type":"unordered-list-item","key":"9rgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самопрезентация и работа с заказчиком.","type":"unordered-list-item","key":"54omo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наличие хорошего портфолио и резюме.","type":"unordered-list-item","key":"9thkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Умение вникать в требования заказчика и работодателя.","type":"unordered-list-item","key":"ciq1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И, пожалуй, самое важное — это постоянная практика и стремление к изучению чего-то нового. Всему этому (и многому другому) вы сможете научиться, пройдя курс «Веб-разработчик», включающий в себя множество тестовых и практических задач, большой объем коммуникаций с профессиональными программистами и даже создание своего первого рабочего проекта.","type":"unstyled","key":"e621t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":1,"style":"BOLD"}],"text":" Курс «Профессия Веб-разработчик»","type":"blockquote","key":"flkcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практический годовой курс для тех, кто хочет стать профессиональным веб-разработчиком, запустить свой интернет-проект или веб-сервис и получить первые заказы на разработку.","type":"blockquote","key":"fhbp"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":15,"offset":0}],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Программа курса","type":"blockquote","key":"b41lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"CVYRDUAeMk3Jd5oIXNnI"}],"entityMap":{"0":{"data":{"href":"https://live.skillbox.ru/code/online/170118/","url":"https://live.skillbox.ru/code/online/170118/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"http://htmlbook.ru/","url":"http://htmlbook.ru/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://htmlacademy.ru/","url":"https://htmlacademy.ru/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://webref.ru/","url":"https://webref.ru/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://www.labirint.ru/books/284929/","url":"https://www.labirint.ru/books/284929/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://learn.javascript.ru/","url":"https://learn.javascript.ru/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://www.litres.ru/devid-flenagan/javascript-podrobnoe-rukovodstvo-6-e-izdanie-24499998/","url":"https://www.litres.ru/devid-flenagan/javascript-podrobnoe-rukovodstvo-6-e-izdanie-24499998/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://skillbox.ru/media/code/kakoy-yazyk-programmirovaniya-vybrat-novichku","url":"https://skillbox.ru/media/code/kakoy-yazyk-programmirovaniya-vybrat-novichku"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://skillbox.ru/media/code/kak_perestat_byt_dzhuniorom","url":"https://skillbox.ru/media/code/kak_perestat_byt_dzhuniorom"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://skillbox.ru/media/code/kak_stat_programmistom","url":"https://skillbox.ru/media/code/kak_stat_programmistom"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"url":"https://skillbox.ru/webdev/?utm_source=skillbox.media&utm_medium=zen&utm_campaign=webdev&utm_term=kakvebsnylya&utm_content=articles"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Это моя первая страница