Лекция №

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

Вопросы темы:

1.  Основные принципы работы со скриптами.

2.  объектная модель браузера.

3.  доступ к значениям параметров (свойств) объекта.

4.  объекты и события.

5.  методы и функции

6.  переменные-макроподстановки

1.  Основные принципы работы со скриптами.

Скрипт представляет собой исходный текст (листинг) программы на языке JavaScript или VBScript, размещенный в HTML-тексте, на клиентской стороне или на языках разработки сценариев на серверной стороне (PHP, ASP, IDC/HTX), предназначенные для обработки данных, поступающих от клиентов.

При открытии htm-файла находящиеся в нем листинги скриптов обнаруживаются браузером и транслируются им в исполняемый код, соответствующий данному типу компьютера и операционной системы. Скрипты представляют собой программные модули, определяющие, какие действия должен совершить компьютер в ответ на указанное разработчиком Web-страницы действие пользователя (например, щелчок мышью на той или иной кнопке).

Исходный текст программы скрипта заключается в контейнер

<SCRIPT LANGUAGE= “[название языка программирования]”>…</SCRIPT>, размещаемый в нутрии контейнера <HEAD>…</HEAD>. Листинг Java-скрипта также может содержаться в отдельном файле (это удобно, например, когда один и тот же скрипт используется на нескольких страницах: можно не повторять весь листинг на каждой из них, а лишь разместить обращение к требуемому «скриптовому файлу»).

НЕ нашли? Не то? Что вы ищете?

<SCRIPT LANGUAGE=”JavaScript” SRC=”имя_файла.js”> </SCRIPT>.

Таких контейнеров, ссылающихся на разные скриптовые файлы, в одном и том же html-документе может быть и несколько, в том числе, когда каждый из них «отвечает» за какую-то конкретную ситуацию, происходящую для конкретного объекта Web-страницы. Для этого предназначены дополнительные параметры тэга <SCRIPT>: FOR (указывает имя объекта) и EVENT (указывает событие).

<SCRIPT LANGUAGE=”JavaScript” SRC=”script1.js”></SCRIPT>

<SCRIPT LANGUAGE=”JavaScript” SRC=”script2.js”></SCRIPT>

<SCRIPT LANGUAGE=”JavaScript” FOR= “butt1”

EVENT=onclick SRC=”script3.js”></SCRIPT>

<SCRIPT LANGUAGE=”JavaScript” FOR= “butt2”

EVENT=onclick SRC=”script4.js”></SCRIPT>

Не все браузеры (особенно это касается старых версий) способны корректно распознавать Скрипты и выделять их из 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 и т. д. - порядковые номера требуемых фреймов (по порядку записи тэгов <FRAME>, считая с нуля!), а записываемые в апострофах имена файлов (а если нужно, то также пути и адреса 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.

2. Доступ к значениям параметров (свойств) объекта

Большинство параметров, указываемых в составе соответствующего тому или иному объекту тэга, в скриптовом программировании получает статус cвойств этого объекта (практически полная аналогия с Visual Basic). Эти свойства носят собственные имена (часто совпадающие с названиями соответствующих параметров тэга), а их значения могут переприсваиваться, приводя таким образом к изменению вида соответствующего объекта Например, следующая строка заменяет содержимое текстового поля ввода TxtName, включенного в состав расположенной на текущей странице формы FormName, на заданную строку:

document.FormName.TxtName.value = "Новый текст"

Здесь переприсваивается значение свойства (параметра) VALUE, которое, как мы помним, в тэге <INPUT> «ответственно» за содержимое поля ввода.

Точно так же можно, наоборот, получить набранную пользователем в этом поле текстовую строку, поместив ее в некую переменную для последующей обработки в скрипте:

TxtMessage = document.FormName.TxtName.value

Аналогично, правая часть вышеприведенного равенства может использоваться в качестве аргумента другого обращения (скажем, чтобы вывести в окне сообщение, включающее ранее введенные пользователем в соответствующем текстовом поле имя и фамилию) или в составе логического условия в операторе if:

if (document. FormName. TxtName. value == "Иванов")

// проходи

else {

// стой!

}

3.  Объекты и события

Язык 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-странице формы, программируется реакция ЭВМ на событие «щелчок мышью» — подстановка в имеющееся в этой же (или другой указанной в скрипте) фор­ме текстовое поле ввода требуемой строки:

<INPUT TYPE="button" NAME="NuttonName"

VALUE="Автоввод" onClick="document.

FormName. TxtName. value = 'Вставляемый текст' ">

Здесь строка-обращение к параметру (свойству) value объекта «поле ввода» (с указанием его имени TxtName и всей иерархии доступа к нему), которая должна присвоить этому параметру взамен его старого значения фразу «Вставляемый текст», присвоена событию onClick, означающему однократный щелчок мышью на данном объекте, т. е. на кнопке, создаваемой на Web-странице при помощи данного тэга <INPUT>. Заметим, что при необходимости можно присвоить одному и тому же событию несколько скриптовых строк, например, записав несколько операторов присваивания внутри кавычек через точку с запятой:

onClick ="<первый оператор присваиваниям <второй оператор присваивания>”

При этом нужно отметить использование в подобных строках кавычек и апострофов: вставляемая фраза (новое значе­ние параметра VALUE) должна быть заключена в кавычки, но и вся строка, присвоенная событию onClick, также должна быть заключена в кавычки. Чтобы избавиться от путаницы, JavaScript позволяет использовать в качестве кавычек как простые («двойные»), так и «одинарные» (апострофы).

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

Другая специфика связана с тем, что некоторые события предполагают реакции, запускаемые по умолчанию, например переход по ссылке при щелчке мышью на ней или же вызов встроенного Help-файла для данного браузера при нажатии клавиши F1. В этом случае, если мы перехватываем эти события (т. е. хотим присвоить им собственные подпрограммы обработки, выполняющие какие-то другие действия взамен предусмотренных по умолчанию для таких объектов), то сразу же после исполнения назначенной нами для них функции последует и действие, выполняемое по умолчанию, если только мы в своей функции не запретим исполнение действия по умолчанию, воспользо­вавшись соответствующей возможностью JavaScript.

Описанная здесь «объектно-событийная» идеология опре­деляет главную особенность практической работы с JavaScript: для успешного написания скриптов требуется прежде, всего знать наперечет все имена существующих типовых объектов, событий и свойств, а также правила их записи в скрипте).

4.  Методы и функции

Действия компьютера в ответ на произошедшее событие (более сложные, чем простое переприсваивание значения какого-либо свойства объекта) обычно реализуются вызовом тех или иных стандартных подпрограмм, которые в Java называются методами. Примерами методов являются open (), close (), .write () и пр.

Обращение к методам в JavaScript производится аналогично обращению к свойствам объектов, например:

WinName.document.write("Текст") — выводит в окно с именем WinName в качестве содержимого заданное слово;

WinName = window.open () —открывает (создает) новое окно с именем WinName.

В отличие от методов, функции в JavaScript представляют собой «классические» подпрограммы, созданные (объявлен­ные) самим пользователем, разрабатывающим Java-cкрипт. В плане же функционирования и функции, и методы аналогичны друг другу (для них используется, по сути, один и тот же механизм передачи в скобках аргументов — формальных и фактических).

5.  Переменные-макроподстановки

В отличие от обычных языков программирования, в 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");

Вопросы для повторения:

Назовите основные принципы работы со скриптами. Поясните на примере понятие объектной модели браузера. Как происходит доступ к значениям параметров (свойств) объекта? К какой категории языков программирования относится JavaScript? Что является событием в ООП? Приведите пример события. Какова специфика HTML и JavaScript? Что такое метод? Приведите пример. Что является функцией в JavaScript? Для чего используют переменные-макроподстановки?