конспект курса Java Script. Программирование клиентской части Интернет приложений с использованием JavaScript
 Скачать 1.49 Mb.
|
|
Программирование клиентской части Интернет- приложений с использованием 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 |