Файл: Программирование клиентской части Интернет приложений с использованием JavaScript.pdf
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 01.12.2023
Просмотров: 96
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
СОДЕРЖАНИЕ
Программирование клиентской части Интернет-
приложений с использованием JavaScript
Матросов А.В., Селицкая Е.А.
Санкт-Петербург
2016
2
Часть I. Язык сценариев JavaScript ................. 5
Урок 1. Модель клиент-сервер в Интернете .................................................................................... 5
Распределенные системы и приложения ...................................................................................... 5
Урок 2. Сценарии JavaScript в документах HTML ........................................................................ 11
Языки сценариев ........................................................................................................................... 11
Язык JavaScript .............................................................................................................................. 13
Упражнения ................................................................................................................................... 19
Урок 3. Переменные и литералы ..................................................................................................... 20
Числовой тип ................................................................................................................................. 20
Строковый тип............................................................................................................................... 21
Булевый тип ................................................................................................................................... 21
Специальные типы данных .......................................................................................................... 22
Переменные ................................................................................................................................... 22
Определение типа переменной .................................................................................................... 23
Упражнения ................................................................................................................................... 23
Урок 4. Выражения и операции ....................................................................................................... 24
Арифметические операции .......................................................................................................... 24
Логические выражения ................................................................................................................. 25
Строковые операции ..................................................................................................................... 26
Комбинированные операции присваивания ............................................................................... 27
Условная операция ........................................................................................................................ 27
Приоритет операций ..................................................................................................................... 27
Упражнения ................................................................................................................................... 28
Урок 5. Операторы ............................................................................................................................ 29
Операторы выбора ........................................................................................................................ 29
Операторы цикла ........................................................................................................................... 30
Упражнения ................................................................................................................................... 35
Урок 6. Функции ............................................................................................................................... 35
Упражнения ................................................................................................................................... 39
Урок 7. Встроенные объекты (1) ..................................................................................................... 40
Объект Array .................................................................................................................................. 40
Объект Date .................................................................................................................................... 44
Объект Math ................................................................................................................................... 51
Объект String ................................................................................................................................. 52
Объект Function ............................................................................................................................. 55
Объект Boolean .............................................................................................................................. 56
Объект Number .............................................................................................................................. 56
Упражнения ................................................................................................................................... 57
Урок 8 Встроенные объекты (2) ...................................................................................................... 58
Объект Object................................................................................................................................. 58
Стандартные функции верхнего уровня (объект Global) .......................................................... 61
Манипулирование объектами ...................................................................................................... 63
Обработка ошибок ........................................................................................................................ 65
Упражнения ................................................................................................................................... 69
Урок 9. Создание собственных объектов ....................................................................................... 70
Упражнения ................................................................................................................................... 74
Часть II. Среда клиента ....................................... 74
Урок 10. Объектная модель MS Internet Explorer .......................................................................... 74
Объект window .............................................................................................................................. 75
Фреймы .......................................................................................................................................... 79
3
Объект navigator ............................................................................................................................ 82
Объект location .............................................................................................................................. 82
Объект history ................................................................................................................................ 83
Упражнения ................................................................................................................................... 83
Урок 11. Объекты доступа к странице и ее элементам ................................................................. 84
Объект document ........................................................................................................................... 84
Объект body ................................................................................................................................... 85
Объект form ................................................................................................................................... 86
Упражнения ................................................................................................................................... 88
Урок 12. Обработка событий в MS Internet Explorer ..................................................................... 89
Обработчики событий .................................................................................................................. 89
Вызов процедуры обработки события ........................................................................................ 91
Событийная модель ...................................................................................................................... 91
Объект event (IE) ........................................................................................................................... 93
Упражнения ................................................................................................................................... 96
Часть III. Динамический HTML .......................... 97
Урок 13. Объектная модель документа DHTML ........................................................................... 97
Структура документа .................................................................................................................... 97
Иерархия объектов ........................................................................................................................ 98
Свойства и методы объектов ..................................................................................................... 100
Упражнения ................................................................................................................................. 103
Урок 14. Примеры динамических страниц HTML ...................................................................... 104
Раскрывающийся список ............................................................................................................ 104
Движущийся элемент ................................................................................................................. 107
Динамическое изменение таблиц .............................................................................................. 109
Родственные отношения ............................................................................................................. 110
Упражнения ................................................................................................................................. 111
Урок 15. Объектная модель документа DOM .............................................................................. 112
Узлы объектной модели DOM ................................................................................................... 113
Перемещение по объектной модели ......................................................................................... 114
Изменение объектной модели документа ................................................................................. 116
Упражнения ................................................................................................................................. 121
4
Аннотация
В курсе изучается программирование клиентской части традиционного Интернет- приложения на базе модели клиент-сервер. Он состоит из трех частей.
В первой части читатель знакомится с основами модели клиент-сервер и с одним из наиболее популярных языков программирования сценариев, встраиваемых в документы HTML, — языком JavaScript. В настоящее время этот язык реализован во всех популярных браузерах – программах просмотра Интернета. В пособии однако описываются только те его возможности, которые соответствуют стандарту языка ECMA-262 редакции 5.1 от 2011 г.
Вторая часть посвящена объектам среды выполнения клиентского сценария — объектам программы просмотра Интернета (браузера).
В третьей, последней части курса рассказывается о двух объектных моделях документа, представляющих API доступа к элементам HTML документа. Первая
— это объектная модель DHTML, реализованная компанией Microsoft в ее браузере Internet Explorer и предшествовавшая объектной модели документа
(DOM). Вторая — модель Document Object Model (DOM) ныне рекомендованная консорциумом WWW и реализованная во всех современных браузерах.
Использование одной из этих моделей или их совместное употребление вместе с каскадными таблицами стилей (CSS) и любым языком программирования реализует то, что называется динамическим HTML (DHTML).
В каждом уроке курса приводятся примеры, которые читателю рекомендуется повторить самостоятельно для лучшего усвоения прочитанного материала.
Выполнение упражнений после каждого урока (кроме первого) также способствует закреплению пройденного материала.
При описании синтаксиса языка JavaScript квадратные скобки [...] используются для указания необязательных элементов конструкций, которые могут не задаваться в конкретных случаях.
Данное пособие может быть рекомендовано бакалаврам и магистрам, обучающимся на направлениях «прикладная математика и информатика» и
«фундаментальные информатика и информационные технологии».
5
Часть I. Язык сценариев JavaScript
Урок 1. Модель клиент-сервер в Интернете
Распределенные системы и приложения
Распределенная система — это набор независимых компьютеров, представляющийся их пользователям единой объединенной системой.
В распределенной системе можно выделить два аспекта:
первый — все компьютеры автономны;
второй — для пользователей это единая система.
Распределенные приложения в Интернете чаще всего создаются на основе модели клиент-сервер — модели структурирования приложений или операционных систем путем разделения их на серверные процессы, каждый из которых предоставляет набор специализированных служб для клиентских процессов, причем каждый серверный процесс может взаимодействовать с одним или несколькими клиентскими процессами:
Компьютер сервера
Компьютер клиента
Компьютер клиента
Компьютер клиента
Компьютер клиента
Один из главных вопросов — как точно разделить клиента и сервера. Анализ приложений типа клиент-сервер, предназначенных для организации доступа к базам данных, привел к их логическому разбиению на три уровня:
уровень пользовательского интерфейса;
уровень обработки;
уровень данных.
Формы организации архитектуры клиент-сервер отличаются тем, какие задачи решаются клиентом и сервером:
6
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Приложение
(обработка)
База данных
Приложение
(обработка)
База данных
Приложение
(обработка)
Приложение
(обработка)
База данных
Приложение
(обработка)
База данных
Приложение
(обработка)
База данных
База данных кли ен т се рв ер се рв ер кли ен т
Взаимодействие клиента и сервера в Интернете осуществляется с помощью запросов, посылаемых клиентом серверу, и ответов сервера на запрос клиента:
Клиент
Сервер
HTTP-ответ
HTTP-запрос документ HTML приложение ISAPI сценарий CGI сценарий ASP или JSP сервлет Java документ HTML
Суть распределенных систем — связь между процессами, реализующими не только взаимодействие компьютеров, но и частей (уровней) приложений.
Взаимодействие частей приложений реализуется с помощью протоколов, описывающих состав и формат данных, пересылаемых соответствующими частями клиентских и серверных приложений друг другу для решения поставленной задачи. В Интернете разбиение приложений на части осуществляется на базе стека протоколов TCP/IP:
Сети
FTP
TELNET
SMTP
DNS
HTTP
TCP
UDP
IP
ARPANET
SATNET
Пакетное радио
Локальная сеть
Протоколы
Прикладной уровень
Транспортный уровень
Сетевой уровень
Физический уровень
+ передачи данных
Первоначально в Интернете существовала только возможность пересылки файлов
(протокол FTP), почтовых сообщений (e-mail) и подключение компьютера как удаленного терминала сервера (TELNET). Технология World Wide Web (WWW) и производство доступных для пользователей средств коммуникации (модемы) изменили Интернет и сделали его основным средством получения и опубликования информации.
7
Основу WWW составляет гипертекстовый документ, создаваемый с помощью языка разметки гипертекстовых документов (HTML), и протокол передачи гипертекстовых документов (HTTP).
Суть гипертекстового документа заключена в том, что весь документ разбит на части, которые могут храниться не обязательно на одном компьютере в сети, а в соответствующие части документа встроены гиперссылки на его другие части:
JavaScript
VBScript
Основная страница
Языки сценариев
JavaScript
PerlScript
VBScript
Pithon
VBScript
JavaScript
Основная страница
Pithon
Следующая
Основная страница
Pithon (1)
PerlScript
Основная страница
PerlScript
Perl
Основная страница
Perl
В настоящее время используется язык HTML версии 4.01, поддерживаемый организацией WWW-консорциум (http://www.w3.org).
Для передачи гипертекстовых документов применяется протокол HTTP версии
1.1 (RFC 2616).
Его основу составляют HTTP-сообщения, подразделяемые на:
запрос (request) клиента к серверу;
ответ (response) сервера клиенту.
HTTP-запрос
строка запроса: метод URI HTTP-версия
заголовки сообщения: имя: значение (их много, каждый в отдельной строке)
пустая строка:
тело сообщения: передаваемая информация
В строке запроса указывается адрес (URI) документа, запрашиваемого клиентом с сервера, а метод может указывать, каким образом передается информация, введенная пользователем в формах HTML, от клиента к серверу. Методом GET информация передается непосредственно в строке запроса, добавляясь после знака вопроса ? к адресу запрашиваемого документа (тело HTTP-запроса в этом
8 случае пусто). Методом POST передаваемая информация помещается в тело запроса. Кроме указанных двух методов HTTP-запрос поддерживает и ряд других методов, позволяющих выполнить определенные действия на сервере.
Методы: OPTIONS запрос информации о доступных опциях коммуникаций
GET получение информации, определенной в URI запроса
HEAD аналогичен GET, но информация не пересылается
POST запрос и пересылка информации, определенной в теле запроса
PUT сохранение на сервере под указанным в запросе URI пересылаемой в его теле информации
DELETE удаление на сервере документа с указанным в запросе URI
TRACE определяет, что будет получено из концевой цепочки запросов
CONNECT используется с прокси-сервером
Пример HTTP-запроса методом GET:
GET /search?keywords=servlets+jsp HTTP/1.1
Accept: image/gif, image/jpg, */*
Encoding: gzip, deflate
Accept-Language: en-us
Connection: Keep-Alive
Cookie: userID=id456578
Host: 212.250.238.67
Referer: http://www.somebookstore.com/findbooks.html
User_Agent: Mozilla/4.0 (compatible; MSIE 5.0; Windows
XP)
HTTP-ответ
строка состояния: HTTP-версия код_состояния строка_причина
заголовки сообщения: имя: значение (их много, каждый в отдельной строке)
пустая строка:
тело сообщения: передаваемая информация
Пересылаемый в ответ на запрос клиента сервером документ всегда содержится в теле HTTP-ответа.
9
Пример HTTP-ответа сервера:
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Connection: Keep-Alive
Date: Thu, 8 Jul 1999 10:27:16 GMT
Content-Type: text/html
Accept-Ranges: bytes
Content-Length: 2964
Last-Modified: Thu, 8 Jul 1999 10:27:16 GMT
Cookie: userID=id456578