Многие люди, которым требуется сайт, слышали, что при его создании используется JavaScript, но что это и для чего нужно, не особо понимают. Мы уже говорили о HTML и CSS и разобрались, что это специальные языки разметки и стилей, без которых вёрстка сайта невозможна. JavaScript – третий компонент, который обычно тоже используется, но он не такой обязательный. Без него можно обойтись, но с ним всё же гораздо лучше.
Итак, давайте посмотрим, что это такое вообще.
Что такое JavaScript
Если HTML и CSS позволяют создать разметку сайта и придать ему красоту, то JavaScript – это язык программирования. Он относится к языкам высокого уровня, то есть программа, или скрипт, на нём пишется с помощью набора команд – операторов, похожих на обычные английские слова. А затем обработчик кода, который называется движок, переводит их в понятный компьютеру машинный код.
JavaScript имеет в своём распоряжении много инструментов и возможностей. Он может работать с текстовыми и числовыми данными, массивами, в нём можно писать свои функции или использовать готовые. В общем, он позволяет писать программы любой сложности.
Но при чём здесь сайты? Дело в том, что JavaScript встроен практически во все браузеры, и они могут выполнять программы, написанные на этом языке. Поэтому их можно внедрять прямо в страницу сайта и получать разные интересные вещи.
Как используется JavaScript на сайтах
На любой открытой странице сайта могут происходить разные события, которые браузер отслеживает. Например, это прокрутка страницы вверх или вниз, наведение курсора на блок, картинку, ссылку, клик по ссылке или иному объекту. Таких событий множество, но браузер не реагирует на них.
Как сделать, чтобы во время этих событий на странице что-нибудь происходило? Кое-что можно сделать с помощью CSS. К примеру, реализовать какой-нибудь эффект при наведении курсора или при клике по объекту. Навели курсор на кнопку – она поменяла цвет или размер, навели на картинку – она наклонилась или стала круглой… Или можно сделать простой эффект параллакса, если зафиксировать фоновую картинку. Это действия, которые украшают дизайн, делают его живым и оригинальным, но никакой практической пользы посетителю не дают.
Применение языка программирования, такого, как JavaScript, позволяет задавать логику событиям. Принцип здесь простой – для определённого события пишется функция, в которой и программируются нужные действия. Они могут быть как простыми, так и сложными.
По нажатию на кнопку или иконку можно сдвигать одни элементы в сторону и на их месте показывать другие – так создаются слайдеры, которые вы видели на многих сайтах. Или по какой-нибудь формуле рассчитывается результат из введённых в поля данных – так реализуются калькуляторы.
Также JavaScript применяют для валидации форм – проверки данных перед отправкой. Такая форма не отправит сообщение на сервер, если поле с номером телефона или другое заполнено неправильно.
На JavaScript создаются красивые анимации и эффекты. Есть возможность даже подключить специальные библиотеки и добавить на сайт 3D-графику.
Как JavaScript подключается к сайту
Существуют разные способы подключения JavaScript к сайту. Если на странице нужен один или несколько небольших скриптов, их можно вставить прямо в её HTML-разметку. Делается это с помощью специальных тегов, которые размещаются в футере сайта. Так, например, обычно добавляются скрипты статистики – Яндекс.Метрика, Google Analytics и другие.
Если на сайте используется много скриптов, и они большие, то их размещают в отдельном файле, который имеет расширение js. Он также подключается в футере страницы с помощью ссылки на него.
Вторым способом пользуются чаще, так как он позволяет разделить разные части сайта. Так удобнее – сначала пишется разметка страницы на HTML, к ней подключается файл стилей CSS и потом файл со скриптами на JavaScript, в котором отдельно пишется функционал.
Когда все эти файлы загружены браузером, он начинает отслеживать происходящие на странице события и если для них прописаны определённые функции, то выполняет их.
Что может и не может делать JavaScript на сайте
Нужно понимать, что скрипт, написанный на JavaScript и подключенный к сайту, выполняется только в браузере, когда страница загружена и выводится на экран. При этом скриптам запрещён доступ к файловой системе компьютера – это сделано в целях безопасности. То есть скрипт с сайта не может, например, найти на вашем компьютере папку с фотографиями и отправить их кому-нибудь. Или что-нибудь удалить с диска. Вкладка браузера, где он выполняется, изолирована даже от других вкладок.
Однако JavaScript всё же может выходить за пределы браузера и отправлять данные, но только те, которые были вычислены или введены на странице пользователем. И передать он их может только на сервер сайта, откуда и была загружена страница, и больше никуда. Это ограничение тоже сделано с целью безопасности.
Но на самой загруженной странице скрипт может делать что угодно – здесь всё ограничено только возможностями языка JavaScript и фантазией программиста. Сейчас можно встретить много сайтов, на которых реализованы креативные идеи – динамические фоны, 3D-графика, красивые переходы между страницами, слайдеры разного вида, и многое другое. Самые необычные сайты даже выглядят, как мини-игры.
Всё это возможно благодаря огромному количеству готовых библиотек. В них содержится множество профессионально написанных функций, которые можно подключать к своему сайту и сразу использовать. Это сильно упрощает и ускоряет разработку, делает её качественнее, так как библиотеки уже протестированы и оптимизированы, и разработчику не надо писать все эти функции с нуля. Например, можно просто подключить к сайту библиотеку с анимациями и получить красивые эффекты для любых объектов на странице.
Язык JavaScript даёт большие возможности и позволяет «оживить» сайт, придать ему любой функционал, какой только требуется, и это его главное назначение.