Урок 5. Javascript – Как гуглить?

На этом уроке мы слегка затронем язык программирования JavaScript. Для начала, немного базовой информации.

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

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

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

JavaScript – это тоже язык программирования. И сразу возникает резонный вопрос «а зачем нам изучать сразу два языка программирования, если можно использовать только PHP». Без практики будет крайне сложно ответить на данный вопрос, чтобы ответ нормально уложился в голове, но я всё же попробую.

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

Также, стоит отметить, что PHP и JavaScript работают по совершенно разным принципам. Так, например, все действия, выполненные с помощью языка программирования PHP, выполняются на стороне хостинга, посетитель сайта не видит исходный PHP-код а только результат его работы. Результат работы PHP, который может увидеть пользователь – это просто текст. Этот текст может быть как просто текст, так и может быть встроен в HTML-документ. Процесс работы PHP конечен, т.е. после того, как пользователь открыл веб-страничку, до того момента как он перейдет на следующую страницу или не обновит текущую – PHP никак не может влиять на содержимое этой страницы.

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

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

Обычно, в реальной жизни Javascript используют frontend-разработчики, которые занимаются разработкой интерфейсов, а PHP используют backend-разработчки, которые разрабатывают серверную часть сайта или приложения, т.е. делают всё то, что скрыто от глаз пользователя.

А теперь вдохнули поглубже, будет еще немного теории

Каждому разработчику очень часто придется сталкиваться с библиотеками. Библиотека – это набор функций расширяющий или упрощающий возможности того или иного языка программирования, с целью повысить эффективность работы разработчика. Некоторые задачи, которые выполняются с помощью больших и сложных конструкций при использовании чистого языка программирования, могут быть выполнены буквально одной функцией нужной библиотеки.

Также, вам постоянно придется работать с различными фрейморками. Смысл фреймворков такой же, как и у библиотек – упростить процесс разработки и сделать работу разработчика более эффективной.

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

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

Вот вам пожалуйста готовый пример кода для реализации аккордеона, вот вам слайдер, выпадающее меню, модальные окна. Мы можем просто скопировать HTML-код интересующего нас элемента в своей проект и настроить его под себя. Но обратите внимание, что все эти элементы будут выглядеть нужным образом и работать корректно, только при условии, если на вашем сайте подключен фреймворк Boostrap. О том, как его подключать вы также можете прочитать в официальной документации.

Также, нам часто будет требоваться крайне популярная JavaScript-библиотека jQuery, которая значительно упрощает процесс работы с HTML-объектами и имеет множество функций, недоступных в чисто JavaScript. jQuery можно встретить, пожалуй, на каждом третьем, если не на каждом втором сайте в интернете. Раньше, jQuery была обязательной библиотекой для использования фреймворка Bootstrap, сейчас Bootsrap можно использовать и без jQuery, но мы всё же будем её использовать из-за её огромных возможностей.

Теперь, еще буквально пару слов про синтаксис JavaScript.

1. Весь Javascript-код в HTML-документах должен находиться внутри тега <script> – очень похоже на то как CSS-код находится внутри тега <style>
2. Ровно также как и с CSS, Javascript код можно разместить в отдельных файлах. Для подключения таких файлов потребуется тот же тег <script> но, содержимое этого тега должно быть пустым, а в атрибуте src нам необходимо задать путь к нашему javascript-файлу

Также, если вы не прошли курс по JavaScript на Code Academy, я рекомендую ознакомиться со статьей  «Основы JavaScript» на сайте Mozilla.

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

Переходим на сайт Boostrap, в раздел Docs. Помните, в начале курса я говорил, что нам придется все искать на английском языке? Дак вот – оно началось. Русской документации к Bootstrap нет, потому изучать возможности этого фреймворка нам придется на английском языке. Находим страничку с примерами модальных окон и поищем, что нам может подойдит. Вот здесь отличный пример, как по клику на кнопку вызывается всплывающее окно – его мы и скопируем. Проверяем – работает.

Теперь перенесем кнопку вызывающее модальное окно туда, где ей и место.

Теперь нам нужно добавить в модально окно нашу контактную форму. Форму мы можем на самом деле сделать и свою собственную с нуля, но зачем? Если Bootstrap предлагает огромное множество красивых шаблонов для самых популярных компонентов веб-сайта.

Открываем документацию к Boostrap, раздел «Forms» и копируем наиболее подходящую. Заменяем многоточие, которое демонстрирует где у нас находится основная рабочая область всплывающего окна на код формы.