конспект курса Java Script. Программирование клиентской части Интернет приложений с использованием JavaScript
 Скачать 1.49 Mb.
|
|
Предложенная первоначально технология WWW с ее гипертекстовыми документами позволяла получать статические страницы HTML. Но с введением в HTML 2.0 форм, позволяющих получать от пользователя и передавать на сервер информацию, возникла необходимость в создании приложений, которые могут обрабатывать эту вводимую в поля формы пользователем информацию. Для сервера был разработан специальный интерфейс Common Gateway Interface (CGI) (стандарт), доступный приложениям, выполняемым на машине сервера (используются языки C, Perl). Компьютер клиента Браузер Компьютер сервера Интернет- сервер Интернет CGI-сценарий Локальный диск HTTP-запрос HTTP-ответ Каждое обращение клиента к CGI-сценарию выполняется в собственном процессе, создаваемом операционной системой. Получение передаваемой и отсылаемой информации реализовано через стандартные потоки ввода/вывода — stdin и stdout. Следует отметить, что выполнение серверных CGI-сценариев обычно достаточно медленное, даже если они и реализованы в виде выполнимых 10 exe-файлов, так как в этой технологии всегда приходится организовывать межпроцессное взаимодействие. Компания Microsoft для своего сервера IIS реализовала кроме CGI-интерфейса дополнительный интерфейс ISAPI — Internet Server Application Programming Interface (компания Netscape для своего сервера реализовала интерфейс NSAPI). Этот интерфейс позволяет создавать серверные приложения, выполняющиеся в том же процессе, в котором выполняется и программа самого сервера, а также он позволяет создавать сценарии, обладающие дополнительными возможностями взаимодействия сервера и сценария. Одним из недостатков CGI-технологии является то, что страница HTML формируется полностью с нуля при каждом запросе к CGI-сценарию. Компания Microsoft, разработав технологию IDC (Internet Database Connector), уже в ней реализовала идею шаблона — документа HTML, в определенные места которого вставлялись данные по запросу пользователя из базы данных. Эта технология была реализована через ISAPI. Дальнейшее развитие серверных технологий привело к появлению технологии ASP — Active Server Pages, в которой совмещены наилучшие стороны всех рассмотренных технологий. Страница ASP — это заготовка документа HTML, в который кроме кода HTML встроен выполняемый во время обработки до отсылки клиенту код, написанный на одном из двух, поддерживаемых в ASP языков сценариев, — JavaScript (JScript) или VBScript. Кроме этого в ASP были реализованы специальные компоненты, выполняющие наиболее часто встречающие задачи: определение характеристик программы просмотра Интернета и операционной системы клиента, взаимодействие с БД и т.п. Таким образом, приложение на основе технологии ASP представляет собой трехуровневую архитектуру: Исследования работы приложений Интернета показали, что в 70% случаев для выполнения определенных действий пользователя нет необходимости обращаться к серверу — эти действия можно реализовать на клиенте, если бы он позволял каким-то образом их запрограммировать. Так появился встроенный в программу 11 просмотра Интернета язык JavaScript, который расширил возможности языка разметки HTML, предоставляя разработчику возможность встраивать в документ HTML код программы, выполняющейся на клиенте. Урок 2. Сценарии JavaScript в документах HTML Языки сценариев Язык сценариев — это язык программирования, используемый для выполнения функций настройки и автоматизации работы какой-либо существующей системы (например, программы просмотра Интернета, Интернет-сервера, операционной системы). Обычно в подобных системах их функциональность уже доступна через интерфейс пользователя. Языки сценариев раскрывают ее для программного управления. При этом немаловажно то, что сама система обеспечивает специальную среду, обычно состоящую из объектов и подпрограмм, которая дополняет возможности языка сценариев. В операционной системе Windows имеется средство Windows Scripting Host (WSH), предназначенное для программной настройки системы, которое создает специальную среду со специальными объектами, позволяющими программно настраивать операционную систему, создавая файлы сценариев. В этой среде методы автоматически создаваемого объекта WScript позволяют организовать диалог с пользователем, а также создавать объекты из иерархической модели объектов этой среды (например, объект Shell соответствует оболочке операционной системы, в семействе Environment которого хранятся значения всех переменных среды). В качестве языка сценария в WSH можно использовать либо JScript (реализация компанией Microsoft языка JavaScript) или поддерживаемый и разрабатываемый ею же собственный сценарный язык VBScript. Сценарий пишется на любом из указанных языков и сохраняется соответственно в файле с расширением .js или .vbs . Запуск сценария WSH осуществляется двойным щелчком на файле в проводнике Windows. Пример 1. Сценарий Windows Scripting Host Создадим в любом текстовом редакторе представленный ниже сценарий WSH на языке JScript и сохраним его в файле с расширением .js . После чего запустим его на выполнение двойным щелчком в проводнике Windows. Со всеми действиями этого сценария можно ознакомиться, прочитав внедренные в текст сценария комментарии. // Отображение диалогового окна с приветствием WScript.Echo("Привет!"); text = ""; 12 // Создание объекта Shell shell = WScript.CreateObject("WScript.Shell") // Присоединение к семейству WScript.Shell.Environment // итератора для организации перебора элементов семейства e = new Enumerator(shell.Environment); // Перебор элементов семейства Environment // и сохранение их значений в переменной text for ( ; !e.atEnd(); e.moveNext()){ text += e.item() + "\n"; } // Отображение полученных значений в диалоговом окне WScript.Echo(text) Встроенный в документ HTML сценарий JavaScript имеет доступ к объектной модели обозревателя, в котором этот документ отображается (при условии, конечно, поддержки обозревателем языка сценариев JavaScript и раскрытия своей модели объектов), а также к объектной модели (DOM) самого документа (опять- таки при ее реализации в обозревателе). Пример 2. Сценарий JavaScript в обозревателе Internet Explorer Создадим приведенный ниже документ HTML и отобразим его в обозревателе Internet Explorer. Каждый щелчок на кнопке Новое окно документа будет приводить к отображению еще одного окна обозревателя размером 300 50 пикселей, но без строки меню, полос прокрутки, строки состояния, панели инструментов и адресной строки. 13 14 прошел ряд версий, соответствие которых браузеру этой компании представлено в следующей таблице: Поддержка JavaScript в браузерах Internet Explorer Версия браузера Версия языка Internet Explorer 3.0 1.0 Internet Explorer 4.0 3.0 Internet Explorer 5.0 5.0 Internet Explorer 5.5 5.5 Internet Explorer 6.0 5.6 Следует отметить, что свой язык JScript компания Microsoft использовала не только в браузере, но и в других своих продуктах. Разработка языков происходила без какого-либо взаимодействия двух компаний в режиме соревнований, что привело к известной "войне браузеров". Однако впоследствии здравомыслие восторжествовало и в 1996 году компании договорились о разработке единого стандарта под эгидой Европейской ассоциации производителей компьютеров (ECMA). И в июле 1997 года появился новый язык, получивший название ECMAScript. Сегодняшние последние версии языка JavaScript, реализованные в популярных браузерах, полностью соответствуют стандарту языка ECMAScript, известному под названием ECMA- 262, редакция 5.1 от 2011 г. Задачи, решаемые с помощью встроенных в документ HTML сценариев JavaScript: динамическое создание содержимого документа HTML во время его загрузки в браузер; оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер; создание динамических страниц HTML совместно с каскадными таблицами стилей и объектной моделью документа; взаимодействие с пользователем при решении "локальных" задач, реализуемых приложением JavaScript, встроенном в страницу HTML. Основные положения синтаксиса Сценарий JavaScript, являясь, по-существу, обычной программой, представляет собой последовательность операторов этого языка. Каждый оператор с необязательным в конце разделителем (символ ;) обычно располагается в отдельной строке кода программы: var m=5 alert('Подсказка'+m) m = "five"; // но можно и так 15 Разделитель обязателен только в случае задания нескольких операторов на одной строке: var m=5; alert('Подсказка',m) Любой оператор для удобства чтения может быть продолжен на следующую строку без использования какого-либо символа продолжения: alert("Подсказка"); alert( "Подсказка" ); Нельзя продолжать на другую строку строковый литерал — он должен располагаться полностью на одной строке текста программы или разбит на два строковых литерала, соединенных операцией конкатенации +: alert("Подсказка") // Правильно alert("Под // Не правильно сказка") alert("Под" + // Правильно "сказка") Пробельные символы в тексте программы являются незначащими, если только они не используются в строковых литералах. Комментарии в программе JavaScript двух видов — однострочные и многострочные: // комментарий, расположенный на одной строке. /* комментарий, расположенный на нескольких строках. */ Язык JavaScript чувствителен к регистру. Размещение операторов языка на странице Способы встраивания сценария JavaScript в страницу HTML: заданием операторов языка JavaScript внутри элемента SCRIPT документа HTML; указанием файла с кодом JavaScript в атрибуте SRC открывающего тега элемента SCRIPT; определением обработчика событий в открывающем теге любого элемента HTML. Использование элемента SCRIPT Элемент SCRIPT состоит из открывающего тега . Между ними записывается код JavaScript. Для совместимости с 16 обозревателями, не поддерживающими язык сценариев JavaScript, рекомендуется код JavaScript заключать в теги комментария HTML. Необязательный атрибут LANGUAGE элемента SCRIPT задает используемый в сценарии язык (по умолчанию JavaScript). Иногда перед закрывающим тегом комментария HTML ставят символы однострочного комментария JavaScript (как в приведенном примере). Это исторический казус, относящийся к версии 3.0 MS Internet Explorer, в котором этот тег рассматривался как оператор языка JavaScript и приводил к ошибке интерпретации. Элементов SCRIPT в документе может быть несколько, и они могут располагаться в любом его месте. Но обычно его (или их) располагают в элементе HEAD и в нем (в них) определяют функции, реализующие реакцию документа HTML на действия пользователя, перехватываемые заданными в документе обработчиками событий (см. ниже). Следует помнить, что сценарий JavaScript, как и весь документ HTML, обрабатывается постепенно, начиная с первой строки. Поэтому если в сценарии используется, например, переменная, определяемая в элементе SCRIPT, расположенном ниже, или ссылка на объект, соответствующий элементу HTML документа, расположенному после элемента SCRIPT, то значение переменной или ссылка на объект для выполняемого в данный момент оператора будут не доступны. После завершения загрузки документа в обозреватель все глобальные переменные и ссылки на объекты HTML, естественно, становятся доступными. Задание файла с кодом JavaScript В атрибуте SRC открывающего тега Такой подход удобен, если на многих страницах сайта используются, например, одни и те же функции. Подгружаемый указанным способом файл сценария не должен содержать никакой разметки HTML. Содержимое элемента SCRIPT в последних версиях обозревателя Internet Explorer (версии 5.0 и выше) не выполняется никогда. Тогда как в предыдущих версиях оно выполнялось в случае, если по какой-то причине файл сценария, указанный в атрибуте SRC не был загружен. 17 Обработчики событий С помощью обработчиков событий, представляющих собой введенные в стандарт HTML дополнительные атрибуты для всех элементов HTML, реализуется реакция отображаемого в обозревателе Интернета документа на действия пользователя или системы. По-существу с их помощью документ становится "живым", реализуя событийно-управляемое приложение. Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11): onclick обработчик события click (щелчок мышью) onmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML) Значением атрибута, соответствующего обработчику события, является код JavaScript. Обычно в нем задается вызов функции, реализующей "реакцию" страницы на действия пользователя, но может быть задана и целая последовательность операторов: onmouseout="color(this)" onclick="click++; myFunc();">. . . Функция или процедура – это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined): function имя_функции([параметры]) { [операторы JavaScript] [return значение] } Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым). Пример 3. Сценарий, вычисляющий время обработки документа В этом примере представлен документ HTML со всеми возможными способами внедрения кода сценария JavaScript, реализующий вычисление времени обработки браузером документа HTML и отображения этой информации в диалоговом окне. Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега Начинается отображение страницы, в которую внедрен сценарий JavaScript. Следующая строка сгенерирована внедренным сценарием: |