Лекция 11 по РСОИ для специальности 230401 Информационные системы (по отраслям)
план-конспект занятия на тему

Лекция № 11
Тема: «Основные элементы идеологии скриптового программирования»

Вопросы темы:
1. Основные принципы работы со скриптами.
2. Объектная модель браузера.
3. Доступ к значениям параметров (свойств) объекта.
4. Объекты и события.
5. Методы и функции
6. Переменные-макроподстановки

     1. Основные принципы работы со скриптами.
     Скрипт представляет собой исходный текст (листинг) программы на языке JavaScript или VBScript, размещенный в HTML-тексте. При открытии htm-файла находящиеся в нем листинги скриптов обнаруживаются браузером и транслируются им в исполняемый код, соответствующий данному типу компьютера и операционной системы. Скрипты представляют собой программные модули, определяющие, какие действия должен совершить компьютер в ответ на указанное разработчиком Web-страницы действие пользователя (например, щелчок мышью на той или иной кнопке).
     Исходный текст программы скрипта заключается в контейнер
, размещаемый в нутрии контейнера …. Листинг Java-скрипта также может содержаться в отдельном файле (это удобно, например, когда один и тот же скрипт используется на нескольких страницах: можно не повторять весь листинг на каждой из них, а лишь разместить обращение к требуемому «скриптовому файлу»).
.
Таких контейнеров, ссылающихся на разные скриптовые файлы, в одном и том же html-документе может быть и несколько, в том числе, когда каждый из них «отвечает» за какую-то конкретную ситуацию, происходящую для конкретного объекта Web-страницы. Для этого предназначены дополнительные параметры тэга



     Не все браузеры (особенно это касается старых версий) способны корректно распознавать Скрипты и выделять их из html-текста, поэтому текст скриптов, как правило прячут в комментарии ( .

     2. Объектная модель браузера.
     Идеология работы со скриптами построена на нескольких основополагающих принципах:
1. Представление HTML-документа как совокупности вложенных друг в друга объектов («контейнеров»), образующих иерархическую структуру.
Это означает, что, например, если в окне браузера открыта Web-страница, содержащая форму, состоящую из текстового поля ввода и кнопки, то с точки зрения скриптового программирования мы будем иметь дело с такой структурой:

     При этом каждому компоненту HTML-документа с помощью параметра NAME присваивается собственное имя (идентификатор). Соответственно, для получения доступа к конкретному элементу необходимо указать в скрипте все его «уровни вложенности». Запись идентификаторов производится через десятичную точку, например:
     Document.FormName.ButtonName.
Содержащаяся в окне браузера страница указывается здесь «общим» именем document, а для формы и кнопки указываются их индивидуальные имена (FormName и ButtonName). Это верно лишь при работе с текущим документом (т. е. в пределах htm-файла, содержащего данный скрипт либо его вызов из внешнего .js-файла). Если же с помощью скрипта открыть новое, дополнительное окно, присвоив ему собственное имя, то для обращения к элементу, содержащемуся в загруженной в это окно странице, требуется указать перед словом document идентификатор этого окна, например: WinName.document.FormName.ButtonName
Аналогично дело обстоит и при наличии фреймовой структуры. Здесь каждый создаваемый фрейм получает имя, используемое затем в тэге <А HREF. . . TARGET. . .>. Одновременно с этим существует и «безымянный» основной документ, определяющий вид фреймов, — в Java-скрипте ему соответствует «общее» имя parent («родительский», «порождающий»). Эти имена и указываются в цепочке «пути» к объекту
Например:
FrameName . document. FormName (обращение из «основного» окна к форме с именем FormName, содержащейся на странице, загруженной в фрейм с именем FrameName);
parent. FrameName. document. FormName (обращение к той же форме, но уже из скрипта, загруженного в другой фрейм; оно производится как бы «сквозь» фреймовую структуру и «сквозь» «родительский» документ);
parent.document (обращение из фрейма к «родительскому» документу и таким образом ко всему содержимому рабочего окна браузера, например, чтобы изменить количество и/или параметры фреймов либо загрузить в это окно другое содержимое).
     Другой возможный способ обращения к фреймам, например, чтобы загрузить в них несколько файлов при одном щелчке мышью:
<А HREF="#" onClick="javascript:top.Frames[nl]. location='имя1'; top.frames[n2].location='имя2'; ...">ссылка
где nl, n2 и т.д. - порядковые номера требуемых фреймов (по порядку записи тэгов , считая с нуля!), а записываемые в апострофах имена файлов (а если нужно, то также пути и адреса URL) указывают, что нужно загружать в эти фреймы. Пример (замена содержимого первого и третьего фреймов на файлы New_logot. jpg и New_page . htm соответственно):
<А HREF="javascript:top.frames[0].location= ;
'New_logot.jpg';
top.frames[2].location='New_page.htm';">новые
логотип и страница
     Здесь обращение к «родительской» структуре производится через «определение» всего окна браузера (top), т. е. данный «иерархический уровень» можно рассматривать как эквивалент parent.

     3. Доступ к значениям параметров (свойств) объекта
     Большинство параметров, указываемых в составе соответствующего тому или иному объекту тэга, в скриптовом программировании получает статус cвойств этого объекта (практически полная аналогия с Visual Basic). Эти свойства носят собственные имена (часто совпадающие с названиями соответствующих параметров тэга), а их значения могут переприсваиваться, приводя таким образом к изменению вида соответствующего объекта Например, следующая строка заменяет содержимое текстового поля ввода TxtName, включенного в состав расположенной на текущей странице формы FormName, на заданную строку:
document.FormName.TxtName.value = "Новый текст"
     Здесь переприсваивается значение свойства (параметра) VALUE, которое, как мы помним, в тэге «ответственно» за содержимое поля ввода.
Точно так же можно, наоборот, получить набранную пользователем в этом поле текстовую строку, поместив ее в некую переменную для последующей обработки в скрипте:
TxtMessage = document.FormName.TxtName.value
     Аналогично, правая часть вышеприведенного равенства может использоваться в качестве аргумента другого обращения (скажем, чтобы вывести в окне сообщение, включающее ранее введенные пользователем в соответствующем текстовом поле имя и фамилию) или в составе логического условия в операторе if:
if (document.FormName.TxtName.value == "Иванов")
// проходи
else {
// стой!
}

      4. Объекты и события
     Язык JavaScript, подобно большинству современных языков программирования (в частности, «визуальных», предназначенных для создания Windows-приложений), является по своей идеологии «объектно-событийным». Это означает, что создаваемое приложение (в нашем случае таковым является загруженная в окно браузера WWW-страница) рассматривается как иерархическая совокупность обособленных объектов, каждому из которых присвоено собственное имя и определенный набор параметров (свойств), значения которых можно считывать в назначенные для этого переменные для использования в программе, а во многих случаях — и программно изменять, меняя тем самым состояние самого объекта на экране. Типичным примером является страница, содержащая в себе форму с флажком: здесь главным является объект «окно браузера» (window); в нем в качестве вложенного объекта рассматривается его содержимое —
HTML-документ (document); в него вложена, среди прочих объектов
(абзацев, если они поименованы, гиперссылок, других форм и пр.) наша форма, в которую, в свою очередь, вложен флажок, который имеет среди прочих свойств значение (value). В этом случае для доступа к значению одного из пунктов списка потребуется записать всю иерархию вложений через десятичную точку, например:
х = window.document.MyForm.MyCheckbox.value
     Когда речь идет о содержимом того же самого документа, в котором содержится данный скрипт, слово window можно опустить, если только речь не идет о свойствах или объектах, связанных именно с окном, а не с документом. В последнем случае важно обратить внимание на тот факт, что с точки зрения JavaScript окно браузера, содержащее Web-страницу, и сама эта страница, содержащаяся в окне браузера, рассматриваются как разные объекты. Если нам нужно работать с параметрами окна (его размерами, выводом линеек прокрутки и пр.), то нужно указывать в качестве объекта window, если же с параметрами именно самой Web-страницы (как единого целого либо ее отдельных составляющих), то речь должна идти уже об объекте document.
Имена объектов обычно указываются в составе определяющих их тэгов (параметр NAME, например для форм и их элементов, фреймов и пр., или параметр ID, добавляемый, в частности, в состав тэга <Р>, чтобы выделить соответствующий абзац текста как отдельный объект). Объекты с именем, указанным в качестве значения параметра NAME, обычно считаются типичными для HTML и в строке достаточно указать их имена; если же имя указывается в каче¬стве значения параметра ID, то обращение к таким объектам производится через запись all («все содержимое документа»). Например:
х = document.all. myparag <свойство>
для доступа к указанному свойству абзаца, в составе открывающего тэга <Р> которого включен параметр ID="myparag". Аналогично, через document. all обращение производится и к поименованным (параметр NAME), но не заключенным в контейнер формы диалоговым элементам.
     Над каждым из имеющихся на экране объектов могут совершаться те или иные действия — как автоматически (например, по истечении заданного промежутка времени, отсчитываемого встроенным в компьютер таймером), так и, в основном, по командам__пользователя: Такие действия пользователя (например нажатие или отпускание любой клавиши, одинарный или двойной щелчок мышью, нажатие или отпускание ее кнопки в то время как курсор мыши наведен на данный элемент интерфейса, да и сам факт наведения на него мышиного курсора), равно как и действия, совершающиеся автоматически, в Windows стандартизированы, а факт их совершения называется событием, произошедшим (совершившимся) для данного объекта. При этом события отслеживаются операционной системой автоматически, так что от программиста требуется лишь написать набор подпрограмм (в JavaScript — пользовательских функций), каж¬дая из которых «привязана» к соответствующему событию для одного конкретного или нескольких объектов и определяет реакцию программы (а в нашем случае — Web-страницы) на это событие.
      Всякий раз, когда операционная система фиксирует совершение какого-либо события, ею генерируется соответствующее прерывание и на исполнение вызывается присвоенный этому событию скрипт. (Те, кому приходилось иметь дело с Visual Basic, хорошо знакомы с этими принципами, только в VB подпрограммы обработки пишутся отдельно для каждого события каждого объекта, а скрипт, как правило, определяет действия компьютера, соответствующие данному событию для текущего объекта — того, на который в настоящий момент указывает курсор мыши.)
       Вот, например, как для кнопки, являющейся элементом размещенной на Web-странице формы, программируется реакция ЭВМ на событие «щелчок мышью» — подстановка в имеющееся в этой же (или другой указанной в скрипте) фор¬ме текстовое поле ввода требуемой строки:

VALUE="Автоввод" onClick="document.
FormName.TxtName.value = 'Вставляемый текст' ">

     Здесь строка-обращение к параметру (свойству) value объекта «поле ввода» (с указанием его имени TxtName и всей иерархии доступа к нему), которая должна присвоить этому параметру взамен его старого значения фразу «Вставляемый текст», присвоена событию onClick, означающему однократный щелчок мышью на данном объекте, т. е. на кнопке, создаваемой на Web-странице при помощи данного тэга . Заметим, что при необходимости можно присвоить одному и тому же событию несколько скриптовых строк, например, записав несколько операторов присваивания внутри кавычек через точку с запятой:
onClick ="<первый оператор присваиваниям <второй оператор присваивания>”
     При этом нужно отметить использование в подобных строках кавычек и апострофов: вставляемая фраза (новое значе¬ние параметра VALUE) должна быть заключена в кавычки, но и вся строка, присвоенная событию onClick, также должна быть заключена в кавычки. Чтобы избавиться от путаницы, JavaScript позволяет использовать в качестве кавычек как простые («двойные»), так и «одинарные» (апострофы).
Нужно также отметить и следующую специфику HTML и JavaScript: здесь событие, совершившееся над неким объектом, являющимся составной частью иерархической структуры, обычно как бы передается по всей «цепочке вложенности» (если только речь не идет о событии, специфичном для данного объекта и невозможном для других объектов более «высокого» уровня). Например, если наша страница содержит в себе форму, а в ней — кнопку, и мы присвоим отдельные функций обработки события «щелчок мышью» и для кнопки, и для формы, и для всего HTML-документа в целом, то щелчок мышью на кнопке вначале вызовет запуск на исполнение функции, «привязанной» к данному, событию для кнопки, затем — функции для формы и после этого — функций для документа в целом. При этом в распоряжении разработчика скрипта имеется возможность «разорвать» эту цепочку, запретив распространение события на объекты более высокого уровня вложенности.
Другая специфика связана с тем, что некоторые события предполагают реакции, запускаемые по умолчанию, например переход по ссылке при щелчке мышью на ней или же вызов встроенного Help-файла для данного браузера при нажатии клавиши F1. В этом случае, если мы перехватываем эти события (т. е. хотим присвоить им собственные подпрограммы обработки, выполняющие какие-то другие действия взамен предусмотренных по умолчанию для таких объектов), то сразу же после исполнения назначенной нами для них функции последует и действие, выполняемое по умолчанию, если только мы в своей функции не запретим исполнение действия по умолчанию, воспользо¬вавшись соответствующей возможностью JavaScript.
     Описанная здесь «объектно-событийная» идеология опре¬деляет главную особенность практической работы с JavaScript: для успешного написания скриптов требуется прежде, всего знать наперечет все имена существующих типовых объектов, событий и свойств, а также правила их записи в скрипте).

     5. Методы и функции
     Действия компьютера в ответ на произошедшее событие (более сложные, чем простое переприсваивание значения какого-либо свойства объекта) обычно реализуются вызовом тех или иных стандартных подпрограмм, которые в Java называются методами. Примерами методов являются open (), close (), .write () и пр.
Обращение к методам в JavaScript производится аналогично обращению к свойствам объектов, например:
WinName.document.write("Текст") — выводит в окно с именем WinName в качестве содержимого заданное слово;
WinName = window.open () —открывает (создает) новое окно с именем WinName.
     В отличие от методов, функции в JavaScript представляют собой «классические» подпрограммы, созданные (объявлен¬ные) самим пользователем, разрабатывающим Java-cкрипт. В плане же функционирования и функции, и методы аналогичны друг другу (для них используется, по сути, один и тот же механизм передачи в скобках аргументов — формальных и фактических).

     6. Переменные-макроподстановки
     В отличие от обычных языков программирования, в JavaScript переменные служат не только для хранения значений (чисел и текстовых строк), используемых в вычислени¬х, но в ряде случаев и в качестве «макроподставок» в самом листинге скрипта. Например, если в нем требуется многократное повторение обращений к одному и тому же объекту, то нет необходимости каждый раз записывать всю цепочку «пути» к нему. Достаточно один раз присвоить специально назначенной переменной повторяющийся участок записи и в каждой строке указывать имя этой переменной, например:

WinName.document.write("Текст 1"); WinName.document.write("Текст 2") ; WinName.document.write("Текст 3");
WinName.document.write("Текст n") ; заменяется на фрагмент
DocName = WinName.document; DocName.write("Текст 1"); DocName.write("Текст 2");
DocName.write("Текст n");