Чат Telegram
Группа ВКонтакте
Клиентские языки программирования: что это такое

Клиентские языки программирования

Развёрнутая статья, которая будет полезна всем, кто изучает клиентские технологии, клиентские языки программирования и работу веб-сайтов.

Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно

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

Скрипты на стороне клиента встроены в код разметки HTML на веб-сайте, который размещается на сервере на языке совместимым с браузером или скомпилированным для связи с ним. Это и есть клиентский язык программирования. Браузер загружает этот код, а затем обрабатывает его. Если ему требуется запросить дополнительную информацию в ответ на клики пользователей, мыши и т.д. (называемые «событиями»), ещё один запрос отправляется обратно на сервер.

Клиентский скриптинг всегда развивается - он становится более простым, более проворным и более простым в использовании. В результате сайты быстрее, эффективнее и меньше работы остается на сервере. Между этими двумя технологиями наблюдается совпадение, поскольку они работают в тандеме, но есть основные различия. Скрипты на стороне сервера - это так называемый бэкенд, который пользователь не видит. Там описывается вся логика для доступа к базе данных, всей закулисной механике, которая организует и управляет сайтом. Клиентский код, однако, обрабатывает то, что видит пользователь - эта часть приложения называется frontend.

Скрипты внедряются внутри кода странички и взаимодействуют с HTML вашего сайта, выбирая его элементы, а затем манипулируют этими элементами, чтобы обеспечить интерактивный опыт. Скрипты взаимодействуют с каскадным файлом таблицы стилей (CSS), который стилизует отображение страницы. Он диктует, какую работу должен выполнить серверный код, и возвращает данные, которые возвращаются с бэкенда в виде, читаемым браузером.

Например: если существует форма для обновления профиля, то для создания конкретной информации из базы данных берется конкретная информация, в то время как интерфейсные скрипты заполняют форму на клиенте этой информацией.

Клиентские языки программирования и фреймворки

Теперь, когда у вас есть широкое представление о том, что такое интерфейсная технология и есть, взглянем на некоторые из наиболее широко используемых языков сценариев и интерфейсных фреймворков. Языки почти всегда используются в контексте их фреймворков, которые быстро выполняют сложный код с библиотеками предварительно упакованного, совместно используемого кода и большого количества надстроек. Разработчик может использовать одну или их комбинацию при создании фронтенда вашего сайта.

HTML и CSS: это основные строительные блоки любого сайта. HTML диктует организацию и контент сайта. CSS содержит код для каждого графического элемента - от фонов до шрифтов - который составляет внешний вид веб-сайта.

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

На JavaScript есть множество отличных фреймворков, которые упрощают его и придают ему большую гибкость.

Фреймворки, библиотеки и расширения JavaScript

  • AngularJS: невероятно надежная среда JavaScript для сайтов с тяжелыми данными
  • JQuery, jQuery Mobile: быстрая, небольшая библиотека объектов JS, которая упрощает управление JavaScript в разных браузерах
  • Node.js: серверная платформа, использующая JavaScript, и изменяет способ взаимодействия приложений реального времени с сервером для более быстрого времени отклика и более простого пользовательского взаимодействия. Он работает с другой инфраструктурой JavaScript, Express.js, для создания серверных веб-приложений.
  • Bootstrap: платформа для мобильных устройств, использующая HTML, CSS и JavaScript для ускорения разработки быстродействующих приложений React, для дизайна пользовательского интерфейса Express.js, Backbone.js, Ember.js, MeteorJS и другие.
  • TypeScript: язык компиляции на JavaScript, который является надмножеством JavaScript, созданным Microsoft
  • AJAX (JavaScript + XML) - технология, позволяющая обновлять определенные части сайта без обновления полной страницы путем асинхронного подключения к базе данных и вытягивания фрагментов данных на основе JSON или XML.
Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Об авторе
Артём Ивашкевич
Артём Ивашкевич
Занимаюсь программированием более трех лет. В свободное время обучаю программированию на PHP других людей, потому что мне это нравится. Если вы интересуетесь темой IT и хотели бы стать разработчиком, рекомендую прочитать статью о том, как я стал программистом.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Комментарии (0)
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований