Технология клиентского программирования javascript

Клиентский веб API

При написании клиентского JavaScript для приложений или веб-сайтов вам не приходится слишком сильно углубляться, пока вы не начнёте использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространённые из них, с которыми вы можете столкнуться в разработке.

Прежде чем начать

Убедитесь, что вы прочли и хорошо разбираетесь в следующих модулях (Первые шаги, Структурные элементы, и Введение в объекты). Эти модули включали в себя простое использование API, так как зачастую без них сложно писать примеры клиентского кода JavaScript. В данном модуле мы предполагаем, что вы хорошо знакомы с основами JavaScript, и немного подробнее рассмотрим общие веб-API.

Естественно знание HTML и CSS здесь также необходимо.

Примечание: Если вы работаете на устройстве, где у вас нет возможности создавать свои собственные файлы, вы можете проверить большинство примеров кода в онлайн-программах вроде JSBin или Thimble.

Руководства

Прежде всего, мы начнём изучение API с основ — что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.

При написании веб-страниц и приложений вы чаще всего будете управлять каким-либо образом веб-документами. Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект Document . В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.

Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например XMLHttpRequest и Fetch API.

API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.

В браузере содержатся очень мощные инструменты графического программирования, начиная с языка Scalable Vector Graphics (SVG) и заканчивая API для рисования элементов HTML (см. The Canvas API и WebGL). В статье содержится введение в Canvas API и дополнительные ресурсы, чтобы вы могли узнать больше.

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

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Источник

Технология написания клиентских приложений с использованием языка сценариев JavaScript

Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

«Владимирский государственный университет

имени Александра Григорьевича и Николая Григорьевича Столетовых»

Кафедра «Физика и прикладная математика»

по дисциплине «Веб программирование»

Цель работы: изучение технологии написания клиентских приложений с использованием языка сценариев JavaScript.

JavaScript — это облегченный объектно-ориентированный язык сценариев. Ядро этого языка встроено и м Netscape Navigator, и в Microsoft Internet Explorer, а также в другие браузеры, и расширено для веб-программирования добавлением объектов, представляющих окно браузера и его содержимое. Версия JavaScript для клиентской стороны позволяет включать в веб-страницы выполняемое содержимое. С помощью JavaScript можно выйти за пределы статического HTML и создавать страницы, включающие в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. JavaScript является наиболее распространенным языком сценариев, выполняющихся на стороне клиента.

Суть языка JavaScript можно выразить в следующих основных принципах:

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

JavaScript зависит от среды. Для выполнения кода требуется поддержка браузером используемых в этом коде средств.

JavaScript — интерпретируемый язык. JavaScript не компилируется в двоичный код наподобие .exe, а, оставаясь частью документа HTML, интерпретируется браузером.

JavaScript — слаботипизированный язык. Нет необходимости объявлять переменные специального типа, а одна и та же переменная может хранить в разных точках программы данные разного типа (числовые, строковые и другие).

JavaScript — объектно-ориентированный язык. Работа ведется с объектами, которые инкапсулируют данные (свойства) и поведение (методы). Однако объектная модель JavaScript основывается на экземплярах, а не на концепции наследования. Различают стандартные объекты, независимые объекты и пользовательские объекты. Первые служат для работы с элементами гипертекста и браузера. Набор стандартных объектов и их свойств может несколько отличаться у различных браузеров. Независимые объекты стандартизованы Европейской ассоциацией производителей компьютеров (ECMA), образуют стандартизованную версию JavaScript — язык ECMAScript — и предназначены для работы с такими данными как строки, массивы, время, математические функции и т.п. Пользовательские объекты описываются разработчиками и служат для решения специфических задач.

JavaScript — язык, управляемый событиями. HTML-элементы, подобные кнопкам, спискам или текстовым полям, усовершенствованы с целью поддержки обработчиков событий. Большинство написанных на JavaScript кодов как раз и оказываются связанными с теми или иными событиями.

JavaScript — это не Java. Java и JavaScript разрабатывались разными компаниями. Различия между Java и JavaScript очень велики и проявляются на уровне базовых принципов этих языков. Можно даже сказать, что общим у этих языков является только си-подобный синтаксис. Основная причина сходства имен кроется в маркетинговых соображениях.

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

javascript страница программа динамический

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

1. Для формы из лабораторной работы №2 выполнить проверку на наличие незаполненных полей. Проверка должна выполняться после нажатия кнопки . При наличии незаполненных полей пользователь должен увидеть соответствующее предупреждение (например, «Не введена фамилия!»)

2. Сделать проверку правильности ввода телефонного номера, он должен быть введён в формате «(ХХХ) ХХХХХХХ», где ‘X’-десятичная цифра. Общее количество цифр в скобках и за скобками должно равняться десяти.

3. Сделать проверку корректности ввода адреса электронной почты.

Источник

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

JavaScript — язык управления сценариями просмотра гипертекстовых страниц на стороне клиента. JavaScript позволяет получить доступ к библиотекам объектов браузеров, динамически формировать Web-страницы. JavaScript является скриптовым языком, программы обходятся без компиляции. JavaScript позволяет выполнять на стороне клиента многие функции, которые ранее выполнялись на стороне сервера. Лучшим примером является проверка заполнения форм до того, как пользователь передаст информацию Web-серверу. JavaScript позволяет читать и записывать файл cookie, который содержит информацию о пользователе, посылаемую веб-сервером на компьютер пользователя, для сохранения и использования в следующем сеансе связи.

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

JavaScript вместе с XML и библиотекой JQuery образует основу технологии AJAX, ведущей среди технологий WEB 2.0.

Технология «клиент-сервер» cgi

Приложения WWW работают по технологии «клиент-сервер», в которой все программное обеспечение разделяется на клиентскую и серверную части. Взаимодействие клиента и сервера происходит по принципу «запрос-ответ» . Клиент посылает запрос, сервер обрабатывает его и посылает ответ. Рассмотрим, наприер, этапы соединения по протоколу http.

Запрос клиента. Браузер формирует запрос на основе данных из URL пользователя, после щелчка на ссылке либо из данных формы.

Установка соединения клиента с сервером.

Посылка запроса клиента и ожидание ответа от сервера.

Обработка запроса сервером. Генерация ответа.

Пока нет обращений от клиентов, сам HTTP-сервер просто «спит», установив прослушку заданного порта (80). Когда клиент устанавливает соединение, сервер «просыпается» и, приняв данные запроса, приступает к их обработке. Результат всех манипуляций — это выдача ответа, которого ожидает клиент. После того как сервер выдал ответ, он разрывает соединение и вновь «погружается в сон». Естественно отметить, что в случае возникновения ошибки HTTP-транзакция может закончиться на любом из этих этапов.

Большое количество Web-приложений основано на использовании внешних программ, управляемых Web-сервером. Использование этих программ позволяет строить Web-приложения с динамически обновляемой информацией, хранящейся в базах данных или генерирующейся в зависимости от бизнес-правил решаемых задач. Для связи между Web-сервером и вызываемыми программами широко используется технология Common Gateway Interface (CGI). CGI является стандартом интерфейса (связи) внешней прикладной программы с Web-сервером типа HTTP. С помощью CGI можно создавать программы, называемые шлюзами, которые во взаимодействии с системой управления базами данных, электронными таблицами, деловой графикой и др., смогут выдать на экран пользователя динамическую информацию.

Программа-шлюз запускается WWW-сервером, который обеспечивает передачу запроса пользователя шлюзу. Он в свою очередь, используя средства прикладной системы, возвращает результат обработки запроса клиенту. Программа-шлюз записывается, например, в каталог WWW-сервера с именем cgi-bin.

Источник